Results navigation & panel UX: arrow keys, row dividers, grabbable scrollbar, click-off close - #2
Merged
Merged
Conversation
…, click-off close, no datalist - Up/Down arrows navigate between results (next/prev), alongside Enter/Shift+Enter. - Result rows get a subtle bottom divider so they're easy to tell apart. - Results scrollbar: inset with a right gutter so it no longer sits flush against the page scrollbar, plus a fatter webkit thumb and themed Firefox scrollbar. - Clicking back onto the page closes the panel (composedPath check for our glance-root wrapper; clicks on the panel/rail/handle keep it open). - Removed the in-box past-searches datalist (it was the unwanted suggestion dropdown and hijacked the arrow keys); recents remain in the empty state. Hardened the input with autocorrect/autocapitalize off. Tests: new Panel.test.tsx (arrow/Enter nav via a fake controller; input has no datalist/list and autocomplete=off) and extended app-render.test.tsx (click-off closes; click-inside stays open). Full suite green (53). 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.
Five day-to-day friction fixes for the find panel (Firefox-first; Chrome maintained).
Changes
Up/Down arrows navigate results
Plain
ArrowDown/ArrowUpnow move to the next/previous match (guarded to when results exist), alongside the existingEnter/Shift+Enter. Removing the datalist (below) is what frees the arrows from the browser's suggestion-list hijack.Row delineation
Each result row gets a subtle bottom divider (
border-b), so it's easy to see where one result ends and the next begins. The active-row accent/background still layers on top.Grabbable results scrollbar
The scroll area was flush against the page's own scrollbar. It's now inset with a right gutter so its scrollbar sits inboard of the viewport edge, the Chrome
::-webkit-scrollbarthumb is fattened (was effectively ~4px), and Firefox gets a themed native bar.Click-off to close
Clicking back onto the page closes the panel. Implemented in
App.tsxvia awindowpointerdown(capture) listener usingcomposedPath()— clicks on the panel, scrollbar rail, or resize handle (all insideglance-root) keep it open; clicks on the page close it.Removed the past-searches dropdown
Per decision, removed the in-box
<datalist>of past searches — it was the unwanted "previously entered" dropdown and it hijacked the arrow keys. Recent searches remain as clickable chips in the empty state. Input hardened withautocomplete/autocorrect/autocapitalize="off".Tests
components/__tests__/Panel.test.tsx— arrow/Enter navigation via a lightweight fake controller; asserts the input has nolist/datalist andautocomplete="off".entrypoints/content/__tests__/app-render.test.tsx— clicking the page closes the panel (asserts exit animation); clicking inside keeps it open.npm run compile,npm test(53 pass),npm run build:firefox,npm run buildall green.Manual check (Firefox first)
npm run build:firefox→ load.output/firefox-mv2/manifest.jsonviaabout:debugging: Up/Down move between matches and scroll to them; rows are visually separated; the results scrollbar is offset from the page scrollbar and easy to grab; clicking the page closes the panel (clicking inside doesn't); no suggestion dropdown under the search box.🤖 Generated with Claude Code