Firefox-first UX pass: instant render, UI scale, branding, empty state, resizable panel - #1
Merged
Merged
Conversation
…e, resizable panel - Instant first paint: inline critical theme CSS in options/popup index.html so the correct surface paints before the stylesheet + React bundle resolve (no flash). - UI text/icon scale: new `textSize` setting (auto/default/large/larger), defaulting to enlarge on >1080p displays. Driven by a single `--g-scale` var; panel sizing moved to `em` (via `--spacing`/`--text-*` overrides scoped to `.glance-root`) so it scales uniformly and no longer leaks the page's root font-size inside the Shadow DOM. - Brand icon: assets/logo.svg + scripts/generate-icons.mjs (sharp) replacing the default WXT puzzle piece; Logo component used in popup, options, and empty state. - Branded empty state: logo, recent searches as clickable chips, and shortcut tips fill the previously blank flyout; "No matches" line on empty results. - Resizable panel: left-edge drag handle, width clamped and persisted to sync settings; page-push and scrollbar markers are now width-aware. - CI/CD: ci.yml (typecheck, tests, both builds) and release.yml (zip artifacts on release); README CI badge + dev-perf note. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A Firefox-first UX pass plus CI/CD. Firefox is the primary target; Chrome builds are maintained alongside.
What's included
1. Instant options/popup render
The 1–2s delay traced to the dev runner (unminified React + Tailwind recompiled per page open), not bundle size (bundles are small). To make first paint instant regardless, inline critical theme CSS in
options/index.htmlandpopup/index.htmlso the correct themed surface paints before the stylesheet + React bundle resolve — no white/blank flash. README documents loading the optimized build as a temporary add-on to judge real speed.2. UI text/icon scale (auto + manual)
New
textSizesetting (auto/default/large/larger), defaulting to auto, which enlarges on >1080p displays (e.g. 1440p). Driven by one--g-scalevariable. Panel sizing moved toemby scoping Tailwind's--spacingand--text-*to.glance-root— so everything scales uniformly and stops leaking the page's root font-size inside the content-script Shadow DOM (a latent bug). Added under Options → Appearance → Text size.3. Brand icon
Replaced the default WXT puzzle piece with a Glance mark (
assets/logo.svg): an orange tile + magnifier with "context lines".scripts/generate-icons.mjs(sharp,npm run icons) rasterizes the PNG set. ALogocomponent carries the branding into the popup, options, and empty state.4. Branded empty state
The previously blank flyout now shows the logo + tagline, recent searches as clickable chips (reusing stored history), and shortcut tips. Shows a "No matches for …" line on empty results.
5. Resizable, persisted panel
Drag the panel's left edge to resize; width is clamped (320 → min(900, 90% viewport)) and persisted to sync settings, so it carries across sessions. Page-push reflow tracks the drag live, and the scrollbar marker rail follows the new width.
CI/CD
ci.yml— typecheck, vitest, and both browser builds on PRs/pushes.release.yml— zips Chrome + Firefox packages and attaches them to GitHub releases (no store credentials needed).Testing
npm run compile,npm test(46 pass — addedresolveScale/clampPanelWidth/width tests),npm run build,npm run build:firefoxall green.npm run build:firefox→ load.output/firefox-mv2/manifest.jsonviaabout:debugging, then verify instant render, larger default text on 1440p, the new icon, the empty state, and drag-resize persistence across a restart.🤖 Generated with Claude Code