Skip to content

Open the popup at its last rendered height - #85

Merged
bmichelsen merged 3 commits into
mainfrom
84-popup-opens-header-only-then-snaps-to-full-height
Aug 15, 2026
Merged

Open the popup at its last rendered height#85
bmichelsen merged 3 commits into
mainfrom
84-popup-opens-header-only-then-snaps-to-full-height

Conversation

@bmichelsen

Copy link
Copy Markdown
Member

Closes #84

What

Since v0.5.0 the popup blinks on every open: it first appears as a ~60px header-only strip (both forms start display: none), holds there while the URL lookup runs (~150ms typical, capped at 400ms), then snaps to full height when showUrlForm() reveals the form. The reveal-when-ready gating from #81 is correct (it keeps the saved header and folder cards from popping into place after first paint), but the window resize it causes reads as a blink.

How

  • restore-height.js, a synchronous classic script in <head> (module scripts are deferred past first paint), restores the last rendered height from localStorage as a min-height on the document element before first paint. The popup opens as a full-size canvas with the brand header at top, and the content fades in below with no window resize.
  • On each form reveal, persistPopupHeight() releases the min-height and stores the fresh natural height. A layout that genuinely differs from last time (more folder cards, key form after a reset) adjusts once while content is visible; on a typical reopen the cached height matches exactly and nothing moves.
  • display: flow-root on body keeps child margins inside the measured offsetHeight. Without it the brand header's top margin collapses through body and html and escapes the root, making every restored height 18px short. No visual change.

The min-height lives on documentElement rather than body because the folder picker already uses body's min-height for its dropdown room (placements.js) and clears it wholesale.

First-ever open still starts small once; after that the size is always right.

Verification

  • npm run lint, npm run format:check, npm test (56 tests), npm run build all pass.
  • Loaded the built dist/chrome into headless Chrome for Testing 152 via Selenium and drove the popup page: first open persists the rendered height and creates no style attribute; a second open with a planted sentinel height (555px) shows the restore script applied it (style attribute exists), the reveal released it, and the sentinel was overwritten with the natural height.
  • Worth a quick manual check in a real toolbar popup (chrome://extensions -> Load unpacked -> dist/chrome): open the popup twice on any page; the second open should show a full-size canvas with the logo and no size jump.

🤖 Generated with Claude Code

Both forms start hidden until state loads, so the popup opened as a
header-only strip and the window snapped to full height when the form
was revealed - a visible blink on every open since the reveal became
lookup-gated with the folder placement cards.

Remember the rendered height in localStorage and restore it as a
min-height on the document from a synchronous head script, before first
paint. Each reveal releases the min-height and stores a fresh value, so
a layout that differs from last time adjusts once with content visible.
flow-root on body keeps child margins inside the measured offsetHeight.
@bmichelsen bmichelsen linked an issue Aug 15, 2026 that may be closed by this pull request
@bmichelsen
bmichelsen requested a balanced review from Copilot August 15, 2026 19:19

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Caches and restores the popup’s rendered height to prevent header-only blinking before content loads.

Changes:

  • Restores cached height before first paint.
  • Persists the natural height after either form appears.
  • Contains body margins within height measurement.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/popup/restore-height.js Restores the cached popup height.
src/popup/popup.js Clears and updates the cached height.
src/popup/popup.html Loads restoration before first paint.
src/popup/popup.css Ensures accurate root height measurement.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@bmichelsen
bmichelsen merged commit beeda1f into main Aug 15, 2026
3 checks passed
@bmichelsen
bmichelsen deleted the 84-popup-opens-header-only-then-snaps-to-full-height branch August 15, 2026 19:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Popup opens header-only then snaps to full height

2 participants