Compare commits

..

No commits in common. "e1cf2970da0dcf218c245dab3d163bbe6241ab7d" and "6e06a67bded6b435b13a1b7b25e480fb920f626c" have entirely different histories.

6 changed files with 43 additions and 598 deletions

View File

@ -1,179 +0,0 @@
# Popup Update Panel Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Redesign the extension popup into a compact enterprise-style tool panel with clearer grouping, better spacing, and more readable update actions while keeping existing behavior unchanged.
**Architecture:** Keep the popup behavior in `src/popup/index.ts` and focus most UI changes in `src/popup/view.ts`. Add only the minimum structural changes needed to support grouped cards, clearer update states, and button hierarchy, then verify the existing popup tests still cover the update workflow.
**Tech Stack:** TypeScript, Chrome MV3 popup UI, Vitest, jsdom
---
## File Map
- Modify: `src/popup/view.ts`
- Replace the current long text flow with grouped cards and clearer status blocks.
- Modify: `src/popup/index.html`
- Add popup-level CSS for layout, spacing, typography, and button hierarchy.
- Modify: `src/popup/index.ts`
- Keep logic unchanged unless the new view structure needs small status-render support changes.
- Modify: `tests/popup-entry.test.ts`
- Update popup rendering expectations for the redesigned layout.
### Task 1: Lock the desired popup structure in tests
**Files:**
- Modify: `tests/popup-entry.test.ts`
- [ ] **Step 1: Write the failing layout assertions**
Update the logged-in and update-available popup tests to assert the new structure exists. Add checks for:
- a compact product header
- an account card/root section
- an update card/root section
- a primary update button and secondary guide button
Use selectors that match the intended new DOM shape, for example:
```ts
expect(
dom.window.document.querySelector('[data-popup-account="card"]')
).not.toBeNull();
expect(
dom.window.document.querySelector('[data-popup-update="card"]')
).not.toBeNull();
```
- [ ] **Step 2: Run the focused popup test**
Run:
```bash
npm test -- tests/popup-entry.test.ts
```
Expected: FAIL because the current popup view does not expose the new grouped structure.
### Task 2: Redesign the logged-in popup shell
**Files:**
- Modify: `src/popup/view.ts`
- Modify: `src/popup/index.html`
- [ ] **Step 1: Implement the grouped popup shell**
Change the logged-in renderer so it produces:
- a compact header
- an account card
- an update card container
- a low-emphasis footer action area
Keep the same text content, just reorganized.
- [ ] **Step 2: Add popup CSS**
Add scoped CSS in `src/popup/index.html` for:
- wider popup body
- neutral background
- white cards
- consistent spacing
- smaller title scale
- primary / secondary / tertiary button styles
Do not add animation-heavy or branding-heavy styles.
- [ ] **Step 3: Re-run popup tests**
Run:
```bash
npm test -- tests/popup-entry.test.ts
```
Expected: PASS for structure-related checks, with any remaining failures isolated to update-state details.
### Task 3: Redesign update-state rendering
**Files:**
- Modify: `src/popup/view.ts`
- Modify: `src/popup/index.ts` (only if required)
- [ ] **Step 1: Write or update state-specific assertions**
Ensure tests cover:
- `checking` state shows a compact progress line
- `latest` state hides download actions
- `available` state shows current version, latest version, notes, and action buttons
- `error` state renders a readable warning block
- [ ] **Step 2: Run the focused tests**
Run:
```bash
npm test -- tests/popup-entry.test.ts
```
Expected: FAIL on any states not yet aligned to the new view.
- [ ] **Step 3: Implement state-specific card rendering**
Refactor `renderUpdateStatus()` to keep one card shell and swap state bodies inside it. Make the available-update state visually prominent but restrained.
- [ ] **Step 4: Verify**
Run:
```bash
npm test -- tests/popup-entry.test.ts tests/update-check.test.ts
```
Expected: PASS.
### Task 4: Verify the popup still works end-to-end
**Files:**
- Modify: `src/popup/view.ts` if polish is needed
- Modify: `src/popup/index.html` if polish is needed
- [ ] **Step 1: Build the release popup**
Run:
```bash
npm run build:release
```
Expected: PASS and updated popup assets written to `dist/`.
- [ ] **Step 2: Run the full test suite**
Run:
```bash
npm test
```
Expected: PASS.
- [ ] **Step 3: Manual smoke check**
Open the unpacked extension popup from `dist/` and confirm:
- title no longer wraps into a giant stacked block
- account status is easy to scan
- update information reads clearly
- buttons are visually distinct and not cramped
- [ ] **Step 4: Commit**
```bash
git add src/popup/view.ts src/popup/index.html src/popup/index.ts tests/popup-entry.test.ts
git commit -m "feat: redesign popup update panel"
```

View File

@ -1,100 +0,0 @@
# Popup Update Panel Design
## Goal
Redesign the extension popup so it feels like a compact internal tool instead of a stretched document. The new popup should prioritize readability, clear grouping, and obvious update actions while keeping the interaction model unchanged.
## Confirmed Direction
- Visual style: enterprise tool
- Primary problem to solve: information feels crowded and hard to read
- Layout freedom: use whatever structure best improves clarity
## Scope
This change only redesigns the popup presentation layer:
- improve popup layout
- improve spacing and typography
- improve button hierarchy
- improve update-status presentation
This change does not alter:
- auth flow
- update-check logic
- download behavior
- background message behavior
## Layout
Use a grouped card layout instead of one long text column.
Recommended structure:
1. Header
- compact product title on one line
2. Account card
- login state
- current user name
3. Update card
- current version
- latest version or current status
- release notes
- primary and secondary action buttons
- short follow-up instruction text
4. Footer action
- low-emphasis sign-out button
## Visual Rules
- Increase popup width to a more usable fixed tool width.
- Use a soft neutral page background with white content cards.
- Reduce title size significantly from the current oversized stacked text.
- Use a clear type scale:
- product title: medium emphasis
- section title: medium emphasis
- status/version rows: normal emphasis
- helper text: smaller and lighter
- Keep the palette restrained and neutral.
- Make `下载更新包` the primary button.
- Make `下载使用说明` a secondary button.
- Make `退出登录` a tertiary or low-emphasis button.
## Update State Presentation
- `checking`: show a compact in-progress line inside the update card.
- `latest`: show a simple success-style status without action buttons.
- `available`: show a clear “发现新版本” status block with versions and actions.
- `error`: show a readable warning block instead of generic broken-looking text flow.
## Content Rules
- Keep product name to one visual line or two short lines max.
- Avoid large paragraphs in the popup.
- Release notes should stay as a compact bullet list.
- The post-download instruction should be one concise sentence.
- Version labels should align consistently so the user can compare current/latest quickly.
## Implementation Notes
- Keep the existing popup DOM entrypoints and rendering flow.
- Focus changes in `src/popup/view.ts` first.
- Only adjust popup controller code if needed to support cleaner status rendering.
- Prefer CSS embedded in the popup HTML/view flow only as needed; do not expand scope into unrelated refactors.
## Testing
Add or update popup rendering tests for:
- logged-in layout still renders correctly
- available update state still shows current/latest versions
- update action buttons still exist
- latest/error states still render expected text
## Out of Scope
- new popup features
- star chart page banners
- animation-heavy UI
- branding-heavy marketing visuals

View File

@ -4,183 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Star Chart Search Enhancer</title>
<style>
:root {
color-scheme: light;
--popup-bg: #f3f4f6;
--popup-card: #ffffff;
--popup-text: #111827;
--popup-subtle: #6b7280;
--popup-border: #d1d5db;
--popup-accent: #8f1f4b;
--popup-accent-strong: #74183b;
--popup-success: #065f46;
--popup-warning: #92400e;
}
html,
body {
width: 380px;
min-height: 560px;
margin: 0;
background: var(--popup-bg);
color: var(--popup-text);
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body {
box-sizing: border-box;
}
#app {
box-sizing: border-box;
padding: 14px;
}
.popup-shell {
display: grid;
gap: 12px;
}
.popup-header {
padding: 6px 2px 2px;
}
.popup-eyebrow {
margin: 0 0 6px;
color: var(--popup-subtle);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.popup-header h1 {
margin: 0;
font-size: 24px;
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.03em;
}
.popup-card {
background: var(--popup-card);
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 16px;
padding: 14px;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}
.popup-card-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--popup-subtle);
}
.popup-status {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
}
.popup-status--accent {
color: var(--popup-accent);
}
.popup-user {
margin: 0 0 2px;
font-size: 16px;
font-weight: 700;
}
.popup-copy,
.popup-error,
.popup-warning,
.popup-success {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: var(--popup-subtle);
}
.popup-error {
color: #b42318;
}
.popup-warning {
color: var(--popup-warning);
font-weight: 600;
}
.popup-success {
color: var(--popup-success);
font-weight: 600;
}
.popup-notes {
margin: 0 0 12px;
padding-left: 18px;
color: var(--popup-text);
font-size: 13px;
line-height: 1.45;
}
.popup-notes li + li {
margin-top: 6px;
}
.popup-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.popup-footer {
display: flex;
justify-content: flex-start;
}
.popup-button {
appearance: none;
border: 1px solid var(--popup-border);
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.popup-button--primary {
border-color: var(--popup-accent);
background: var(--popup-accent);
color: #fff;
}
.popup-button--primary:hover {
background: var(--popup-accent-strong);
border-color: var(--popup-accent-strong);
}
.popup-button--secondary {
background: #fff;
color: var(--popup-text);
}
.popup-button--secondary:hover,
.popup-button--ghost:hover {
background: rgba(17, 24, 39, 0.04);
}
.popup-button--ghost {
background: transparent;
color: var(--popup-subtle);
border-color: transparent;
padding-inline: 0;
}
</style>
</head>
<body>
<main id="app"></main>

View File

@ -104,7 +104,7 @@ async function renderCurrentAuthState(
}
renderLoggedIn(root, response.value);
await runUpdateCheck(root, sendMessage, updateOptions);
void runUpdateCheck(root, sendMessage, updateOptions);
root
.querySelector('[data-popup-sign-out="button"]')
?.addEventListener("click", () => {
@ -195,10 +195,9 @@ async function runUpdateCheck(
status: "available"
});
bindUpdateDownloadButtons(root, sendMessage, manifest);
} catch (error) {
} catch {
renderUpdateStatus(root, {
currentVersion: options.currentVersion,
message: error instanceof Error ? error.message : String(error),
status: "error"
});
}

View File

@ -3,18 +3,11 @@ import type { UpdateManifest } from "../shared/update-check";
export function renderLoggedOut(root: HTMLElement, error?: string | null): void {
root.innerHTML = `
<section class="popup-shell" data-popup-shell="root" data-popup-state="logged-out">
<header class="popup-header" data-popup-header="root">
<p class="popup-eyebrow"></p>
<h1>Star Chart Search Enhancer</h1>
</header>
<section class="popup-card popup-card--account" data-popup-account="card">
<div class="popup-card-title"></div>
<p class="popup-status"></p>
<p class="popup-copy">使</p>
${error ? `<p class="popup-error" data-popup-error="true">${escapeHtml(error)}</p>` : ""}
<button type="button" class="popup-button popup-button--primary" data-popup-sign-in="button"> Logto</button>
</section>
<section data-popup-state="logged-out">
<h1>Star Chart Search Enhancer</h1>
<p>使</p>
${error ? `<p data-popup-error="true">${error}</p>` : ""}
<button type="button" data-popup-sign-in="button"> Logto</button>
</section>
`;
}
@ -26,24 +19,16 @@ export function renderLoggedIn(
const userInfo = authState.userInfo;
root.innerHTML = `
<section class="popup-shell" data-popup-shell="root" data-popup-state="logged-in">
<header class="popup-header" data-popup-header="root">
<p class="popup-eyebrow"></p>
<h1>Star Chart Search Enhancer</h1>
</header>
<section class="popup-card popup-card--account" data-popup-account="card">
<div class="popup-card-title"></div>
<p class="popup-status"></p>
<p class="popup-user">${escapeHtml(userInfo?.name ?? userInfo?.username ?? "未知用户")}</p>
<p class="popup-copy">${escapeHtml(userInfo?.email ?? "")}</p>
<section data-popup-state="logged-in">
<h1>Star Chart Search Enhancer</h1>
<p></p>
<p>${userInfo?.name ?? userInfo?.username ?? "未知用户"}</p>
<p>${userInfo?.email ?? ""}</p>
<section data-popup-update="root">
<h2></h2>
<p data-popup-update-status="text">...</p>
</section>
<section class="popup-card popup-card--update" data-popup-update="card" data-popup-update-root="root">
<div class="popup-card-title"></div>
<p data-popup-update-status="text" class="popup-status">...</p>
</section>
<footer class="popup-footer">
<button type="button" class="popup-button popup-button--ghost" data-popup-sign-out="button">退</button>
</footer>
<button type="button" data-popup-sign-out="button">退</button>
</section>
`;
}
@ -53,54 +38,50 @@ export function renderUpdateStatus(
options: {
currentVersion: string;
manifest?: UpdateManifest;
message?: string | null;
status: "checking" | "error" | "latest" | "available";
}
): void {
const container = root.querySelector('[data-popup-update-root="root"]');
const container = root.querySelector('[data-popup-update="root"]');
if (!container) {
return;
}
if (options.status === "checking") {
container.innerHTML = `
<div class="popup-card-title"></div>
<p data-popup-update-status="text" class="popup-status">${options.currentVersion}</p>
<p class="popup-copy">...</p>
<h2></h2>
<p data-popup-update-status="text">${options.currentVersion}</p>
<p>...</p>
`;
return;
}
if (options.status === "error") {
container.innerHTML = `
<div class="popup-card-title"></div>
<p data-popup-update-status="text" class="popup-status">${options.currentVersion}</p>
<p class="popup-warning"></p>
${options.message ? `<p class="popup-error">${escapeHtml(options.message)}</p>` : ""}
<p class="popup-copy"></p>
<h2></h2>
<p data-popup-update-status="text">${options.currentVersion}</p>
<p></p>
<p></p>
`;
return;
}
if (options.status === "latest" || !options.manifest) {
container.innerHTML = `
<div class="popup-card-title"></div>
<p data-popup-update-status="text" class="popup-status">${options.currentVersion}</p>
<p class="popup-success"></p>
<h2></h2>
<p data-popup-update-status="text">${options.currentVersion}</p>
<p></p>
`;
return;
}
container.innerHTML = `
<div class="popup-card-title"></div>
<p data-popup-update-status="text" class="popup-status">${options.currentVersion}</p>
<p class="popup-status popup-status--accent">${options.manifest.latestVersion}</p>
<h2></h2>
<p data-popup-update-status="text">${options.currentVersion}</p>
<p>${options.manifest.latestVersion}</p>
${renderReleaseNotes(options.manifest.releaseNotes)}
<div class="popup-actions">
<button type="button" class="popup-button popup-button--primary" data-popup-download-update="button"></button>
<button type="button" class="popup-button popup-button--secondary" data-popup-download-guide="button">使</button>
</div>
<p data-popup-update-download-status="text" class="popup-copy"> zip chrome://extensions 里重新加载插件。</p>
<button type="button" data-popup-download-update="button"></button>
<button type="button" data-popup-download-guide="button">使</button>
<p data-popup-update-download-status="text"> zip chrome://extensions 里重新加载插件。</p>
`;
}
@ -122,7 +103,7 @@ function renderReleaseNotes(releaseNotes: string[]): string {
}
return `
<ul class="popup-notes">
<ul>
${releaseNotes.map((note) => `<li>${escapeHtml(note)}</li>`).join("")}
</ul>
`;
@ -141,16 +122,15 @@ export function renderDevPanel(
authState: AuthStateValue
): void {
const panel = root.ownerDocument.createElement("section");
panel.className = "popup-card popup-card--dev";
panel.dataset.popupDevPanel = "root";
panel.innerHTML = `
<div class="popup-card-title">dev auth panel</div>
<p class="popup-copy">resource: ${escapeHtml(authState.resource ?? "")}</p>
<p class="popup-copy">scopes: ${escapeHtml((authState.scopes ?? []).join(", "))}</p>
<p class="popup-copy">token: ${authState.tokenAvailable ? "available" : "missing"}</p>
<p class="popup-copy">expires: ${escapeHtml(String(authState.accessTokenExpiresAt ?? "unknown"))}</p>
<p class="popup-copy">error: ${escapeHtml(authState.lastError ?? "")}</p>
<button type="button" class="popup-button popup-button--secondary" data-popup-test-protected-api="button"></button>
<h2>dev auth panel</h2>
<p>resource: ${authState.resource ?? ""}</p>
<p>scopes: ${(authState.scopes ?? []).join(", ")}</p>
<p>token: ${authState.tokenAvailable ? "available" : "missing"}</p>
<p>expires: ${authState.accessTokenExpiresAt ?? "unknown"}</p>
<p>error: ${authState.lastError ?? ""}</p>
<button type="button" data-popup-test-protected-api="button"></button>
<pre data-popup-protected-api-result="output"></pre>
`;
root.appendChild(panel);

View File

@ -3,10 +3,6 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
import { bootPopup } from "../src/popup/index";
function flushTasks(): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, 0));
}
describe("popup-entry", () => {
let dom: JSDOM;
@ -26,12 +22,6 @@ describe("popup-entry", () => {
}))
});
expect(
dom.window.document.querySelector('[data-popup-shell="root"]')
).not.toBeNull();
expect(
dom.window.document.querySelector('[data-popup-account="card"]')
).not.toBeNull();
expect(dom.window.document.querySelector("button")?.textContent).toContain(
"登录"
);
@ -57,12 +47,6 @@ describe("popup-entry", () => {
}))
});
expect(
dom.window.document.querySelector('[data-popup-header="root"]')
).not.toBeNull();
expect(
dom.window.document.querySelector('[data-popup-account="card"]')
).not.toBeNull();
expect(dom.window.document.body.textContent).toContain("resource");
expect(dom.window.document.body.textContent).toContain("token");
});
@ -92,16 +76,12 @@ describe("popup-entry", () => {
}
}))
});
await flushTasks();
await flushTasks();
await Promise.resolve();
expect(fetchUpdateManifest).toHaveBeenCalledTimes(1);
expect(dom.window.document.body.textContent).toContain("当前版本0.2.0421.2");
expect(dom.window.document.body.textContent).toContain("发现新版本0.2.0421.3");
expect(dom.window.document.body.textContent).toContain("支持检查更新");
expect(
dom.window.document.querySelector('[data-popup-update="card"]')
).not.toBeNull();
expect(
dom.window.document.querySelector('[data-popup-download-update="button"]')
).not.toBeNull();
@ -138,8 +118,7 @@ describe("popup-entry", () => {
})),
sendMessage
});
await flushTasks();
await flushTasks();
await Promise.resolve();
(
dom.window.document.querySelector(
@ -266,63 +245,6 @@ describe("popup-entry", () => {
expect(sendMessage).toHaveBeenCalledWith({ type: "auth:sign-out" });
});
test("shows the latest state without update actions", async () => {
dom.window.document.body.innerHTML = "<main id='app'></main>";
await bootPopup({
currentVersion: "0.0525.5",
document: dom.window.document,
fetchUpdateManifest: vi.fn(async () => ({
guideUrl: "https://cos.example.com/guide.pdf",
latestVersion: "0.0525.5",
minSupportedVersion: "0.0525.5",
publishedAt: "2026-05-19",
releaseNotes: ["支持检查更新"],
zipUrl: "https://cos.example.com/plugin.zip"
})),
sendMessage: vi.fn(async () => ({
ok: true,
type: "auth:state",
value: {
isAuthenticated: true,
userInfo: { name: "Dev" }
}
}))
});
await flushTasks();
await flushTasks();
expect(dom.window.document.body.textContent).toContain("当前已是最新版本");
expect(
dom.window.document.querySelector('[data-popup-download-update="button"]')
).toBeNull();
});
test("shows a readable error state when the manifest fetch fails", async () => {
dom.window.document.body.innerHTML = "<main id='app'></main>";
await bootPopup({
currentVersion: "0.0525.5",
document: dom.window.document,
fetchUpdateManifest: vi.fn(async () => {
throw new Error("network down");
}),
sendMessage: vi.fn(async () => ({
ok: true,
type: "auth:state",
value: {
isAuthenticated: true,
userInfo: { name: "Dev" }
}
}))
});
await flushTasks();
await flushTasks();
expect(dom.window.document.body.textContent).toContain("暂时无法检查更新");
expect(dom.window.document.body.textContent).toContain("network down");
});
test("shows the auth error when sign-in fails", async () => {
const sendMessage = vi
.fn()