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

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 mstangeMay 14, 2026 21:40
@fqueze
fqueze requested a review from a team as a code ownerMay 14, 2026 21:40
@codecov

codecovBot 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 linesPatch %Lines
src/components/shared/PanelSearch.tsx85.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 threadlocales/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 threadlocales/en-US/app.ftl
@fqueze
fquezeforce-pushed the filter-keyboard-shortcut branch from e2c11bb to 8794d21CompareMay 15, 2026 18:46
@fqueze
fqueze requested a review from flodoloMay 15, 2026 18:48
@fqueze
fquezeforce-pushed the filter-keyboard-shortcut branch from 8794d21 to 0ccd480CompareMay 18, 2026 08:26
Comment threadsrc/components/shared/PanelSearch.tsx
Comment threadsrc/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
fquezeforce-pushed the filter-keyboard-shortcut branch from 0ccd480 to 94d55dfCompareJuly 1, 2026 14:36
@fqueze
fqueze merged commit e176afe into firefox-devtools:mainJul 1, 2026
24 checks passed
@canovacanova mentioned this pull request Jul 9, 2026
canova added a commit that referenced this pull request Jul 9, 2026
Changes:
[Nazım Can Altınova] Bump profiler-cli version to 0.4.0 (#6132)
[Florian Quèze] Add "/" and "f" keyboard shortcuts to focus the panel
filter box (#6025)
[Markus Stange] Change profile.shared.stackTable.prefix to prefixOffset
(delta from current index) (#6089)
[Sky Ning] Add workflow to insert PR preview links (#6133)
[Markus Stange] Implement column sorting in the marker table (#6083)
[Markus Stange] Make it easier to create upside-down flame graphs
(#6128)
[Markus Stange] Use appropriate highlighter dialects for ts + jsx
(#6141)
[cathaysia] style: add .editorconfig (#6142)
[Nazım Can Altınova] Prevent long source URLs from overflowing the code
error overlay (#6147)
[Nazım Can Altınova] Extract a runCommand helper for profiler-cli
command handlers (#6148)
[Markus Stange] feat(theme): add color-scheme meta (#6150)
[Nazım Can Altınova] Add an early throw for the this.querier and remove
the non-null asserts in the cli codebase (#6145)
[Markus Stange] feat: invert call stack in flame graph to render as
icicle graph (#6090)
[Markus Stange] Improve preview link discovery (#6149)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (July 9, 2026) (#6155)
And special thanks to our localizers:
de: Michael Köhler
el: Jim Spentzos
en-GB: Ian Neal
es-CL: ravmn
fr: Théo Chevalier
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Fjoerfoks
ru: Valery Ledovskoy
tr: Nazım Can Altınova
zh-TW: Pin-guang Chen
Sign up for freeto 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

@fqueze@mstange@emilio@flodolo