Skip to content

Add "/" and "f" keyboard shortcuts to focus the panel filter box#6025

Merged
fqueze merged 1 commit into
firefox-devtools:mainfrom
fqueze:filter-keyboard-shortcut
Jul 1, 2026
Merged

Add "/" and "f" keyboard shortcuts to focus the panel filter box#6025
fqueze merged 1 commit into
firefox-devtools:mainfrom
fqueze:filter-keyboard-shortcut

Conversation

@fqueze

@fqueze fqueze commented May 14, 2026

Copy link
Copy Markdown
Contributor

I would really like to be able to type 'f' in the marker chart to start filtering markers as that matches what I use a lot on treeherder, but that shortcut is already used on the panels showing samples. '/' was suggested as an alternative, but we also have plenty of existing undocumented shortcuts, so adding 'f' only in the panels where it isn't already used for something else without documenting it should be accceptable.

With the patch:

  • "/" now focuses the filter input on any panel that has one (Call Tree, Flame Graph, Stack Chart, Marker Chart, Marker Table, Network Chart). The shortcut is discoverable through the input placeholder, which now reads "Enter filter terms (/)".

  • "f" is an additional undocumented shortcut with the same effect, but only on panels where "f" is not already used as a call node transform shortcut (i.e. Marker Chart, Marker Table and Network Chart). It is opt-in via a new alsoFocusOnF prop on PanelSearch.

  • Both shortcuts are no-ops when the user is already typing in an input, textarea or contenteditable element, and when modifier keys are held.

@fqueze fqueze requested a review from mstange May 14, 2026 21:40
@fqueze fqueze requested a review from a team as a code owner May 14, 2026 21:40
@codecov

codecov Bot commented May 14, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 85.71429% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.48%. Comparing base (de0953b) to head (94d55df).
⚠️ Report is 22 commits behind head on main.

Files with missing lines Patch % Lines
src/components/shared/PanelSearch.tsx 85.71% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6025      +/-   ##
==========================================
+ Coverage   83.47%   83.48%   +0.01%     
==========================================
  Files         342      342              
  Lines       36097    36125      +28     
  Branches    10098    10109      +11     
==========================================
+ Hits        30131    30160      +29     
+ Misses       5538     5537       -1     
  Partials      428      428              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread locales/en-GB/app.ftl

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Don't modify languages other than en-US.

Comment thread locales/en-US/app.ftl
@fqueze fqueze force-pushed the filter-keyboard-shortcut branch from e2c11bb to 8794d21 Compare May 15, 2026 18:46
@fqueze fqueze requested a review from flodolo May 15, 2026 18:48
@fqueze fqueze force-pushed the filter-keyboard-shortcut branch from 8794d21 to 0ccd480 Compare May 18, 2026 08:26
Comment thread src/components/shared/PanelSearch.tsx
Comment thread src/test/fixtures/utils.ts
"/" now focuses the filter input on any panel that has one (Call Tree,
Flame Graph, Stack Chart, Marker Chart, Marker Table, Network Chart).
The shortcut is discoverable through the input placeholder, which now
reads "Enter filter terms (/)".

"f" is an additional undocumented shortcut with the same effect, but
only on panels where "f" is not already used as a call node transform
shortcut (i.e. Marker Chart, Marker Table and Network Chart). It is
opt-in via a new alsoFocusOnF prop on PanelSearch.

Both shortcuts are no-ops when the user is already typing in an input,
textarea or contenteditable element, and when modifier keys are held.
@fqueze fqueze force-pushed the filter-keyboard-shortcut branch from 0ccd480 to 94d55df Compare July 1, 2026 14:36
@fqueze fqueze merged commit e176afe into firefox-devtools:main Jul 1, 2026
24 checks passed
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.

4 participants