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

[fqueze]

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.

[codecov]

Codecov Report

❌ Patch coverage is 85.71429% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.79%. Comparing base (41473d3) to head (0ccd480).
⚠️ Report is 2 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.77%   83.79%   +0.01%     
==========================================
  Files         329      329              
  Lines       34423    34451      +28     
  Branches     9627     9629       +2     
==========================================
+ Hits        28839    28868      +29     
+ Misses       5155     5154       -1     
  Partials      429      429              

☔ View full report in Codecov by Sentry.
📢 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.

[flodolo]

Don't modify languages other than en-US.

[flodolo]

This requires a new string ID.
https://mozilla-l10n.github.io/documentation/localization/making_string_changes.html

In general, shortcuts are exposed as a separate string, so they can be localized where necessary. Does / work across locales? For example, that's only available with SHIFT on an Italian layout.

[fqueze]

Does / work across locales? For example, that's only available with SHIFT on an Italian layout.

It's meant to be the same key as the '/' that starts the type ahead feature of Firefox, so we filter markers instead of having an unusable find feature. The '/' is hardcoded at https://searchfox.org/firefox-main/rev/e374045fac6f19383a04d087d2930ced5c1551fe/toolkit/content/widgets/findbar.js#876 in Firefox, so no need to localize it on the profiler side.

[flodolo]

Is it actually enabling the feature in the browser, or just a similar feature? What about other browsers?

We should still add a comment, e.g.

# `/` is a keyboard shortcut that mimics Firefox type ahead feature. The shortcut itself
# is not localizable.

[fqueze]

Is it actually enabling the feature in the browser, or just a similar feature? What about other browsers?

It's not enabling the feature in the browser, but actually the opposite: the web page consuming the event prevents the browser feature from being triggered. I haven't tested other browsers, but gmail has a similar behavior: typing '/' focuses the filter box.