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

locales/en-US/app.ftl

@@ -421,8 +421,11 @@ Home--chrome-extension-recording-instructions = Once installed, use the extensio
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.
 
-IdleSearchField--search-input =
-    .placeholder = Enter filter terms
+# `/` here overrides Firefox's Type Ahead Find shortcut, which would
+# otherwise trigger an unhelpful find bar on top of the profiler UI.
+# The shortcut itself is not localizable.
+IdleSearchField--search-input2 =
+    .placeholder = Enter filter terms (/)
 
 ## JsTracerSettings
 ## JSTracer is an experimental feature and it's currently disabled. See Bug 1565788.

src/components/shared/IdleSearchField.tsx

@@ -120,13 +120,13 @@ export class IdleSearchField extends PureComponent<Props, State> {
         onSubmit={this._onFormSubmit}
       >
         <Localized
-          id="IdleSearchField--search-input"
+          id="IdleSearchField--search-input2"
           attrs={{ placeholder: true }}
         >
           <input
             type="search"
             name="search"
-            placeholder="Enter filter terms"
+            placeholder="Enter filter terms (/)"
             className="idleSearchFieldInput photon-input"
             required={true}
             title={title ?? undefined}

src/components/shared/MarkerSettings.tsx

@@ -227,6 +227,7 @@ class MarkerSettingsImpl extends PureComponent<Props, State> {
             title="Only display markers that match a certain name"
             currentSearchString={searchString}
             onSearch={this._onSearch}
+            alsoFocusOnF={true}
           />
         </Localized>
         <Localized id="MarkerSettings--marker-filters" attrs={{ title: true }}>

src/components/shared/NetworkSettings.tsx

@@ -44,6 +44,7 @@ class NetworkSettingsImpl extends PureComponent<Props> {
             title="Only display network requests that match a certain name"
             currentSearchString={searchString}
             onSearch={this._onSearch}
+            alsoFocusOnF={true}
           />
         </Localized>
       </div>

src/components/shared/PanelSearch.tsx

@@ -14,12 +14,18 @@ type Props = {
   readonly title: string;
   readonly currentSearchString: string;
   readonly onSearch: (param: string) => void;
+  // When true, the "f" key (in addition to "/") will also focus the search
+  // field. This is opt-in because some panels (e.g. those showing frames) use
+  // "f" as a call node transform shortcut.
+  readonly alsoFocusOnF?: boolean;
 };
 
 type State = { searchFieldFocused: boolean };
 
 export class PanelSearch extends React.PureComponent<Props, State> {
   override state = { searchFieldFocused: false };
+  _searchFieldWrapper = React.createRef<HTMLDivElement>();
+
   _onSearchFieldIdleAfterChange = (value: string) => {
     this.props.onSearch(value);
   };
@@ -32,6 +38,55 @@ export class PanelSearch extends React.PureComponent<Props, State> {
     this.setState(() => ({ searchFieldFocused: false }));
   };
 
+  override componentDidMount() {
+    window.addEventListener('keydown', this._handleGlobalKeyDown);
+  }
+
+  override componentWillUnmount() {
+    window.removeEventListener('keydown', this._handleGlobalKeyDown);
+  }
+
+  _handleGlobalKeyDown = (event: KeyboardEvent) => {
+    // Ignore key combinations involving modifier keys, so we don't interfere
+    // with browser or OS shortcuts.
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    const isSlash = event.key === '/';
+    const isF = this.props.alsoFocusOnF && event.key === 'f';
+    if (!isSlash && !isF) {
+      return;
+    }
+
+    // Don't steal the key when the user is already typing in a text input,
+    // textarea, contenteditable element, or interacting with a select.
+    const target = event.target;
+    if (target instanceof HTMLElement) {
+      const tagName = target.tagName;
+      if (
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT' ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+    }
+
+    const wrapper = this._searchFieldWrapper.current;
+    if (!wrapper) {
+      return;
+    }
+    const input = wrapper.querySelector<HTMLInputElement>(
+      'input[type="search"]'
+    );
+    if (input) {
+      event.preventDefault();
+      input.focus();
+    }
+  };
+
   override render() {
     const { label, title, currentSearchString, className } = this.props;
     const { searchFieldFocused } = this.state;
@@ -40,7 +95,10 @@ export class PanelSearch extends React.PureComponent<Props, State> {
       currentSearchString &&
       !currentSearchString.includes(',');
     return (
-      <div className={classNames('panelSearchField', className)}>
+      <div
+        className={classNames('panelSearchField', className)}
+        ref={this._searchFieldWrapper}
+      >
         <label className="panelSearchFieldLabel">
           {label + ' '}
           <IdleSearchField

src/test/components/PanelSearch.test.tsx

@@ -0,0 +1,117 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { fireEvent, screen } from '@testing-library/react';
+
+import { render } from 'firefox-profiler/test/fixtures/testing-library';
+import { PanelSearch } from 'firefox-profiler/components/shared/PanelSearch';
+import { fireFullKeyPress } from 'firefox-profiler/test/fixtures/utils';
+import { coerce } from 'firefox-profiler/utils/types';
+
+describe('shared/PanelSearch', function () {
+  function setup({ alsoFocusOnF = false }: { alsoFocusOnF?: boolean } = {}) {
+    const onSearch = jest.fn();
+    const renderResult = render(
+      <PanelSearch
+        className="testPanelSearch"
+        label="Filter:"
+        title="Filter description"
+        currentSearchString=""
+        onSearch={onSearch}
+        alsoFocusOnF={alsoFocusOnF}
+      />
+    );
+    return { ...renderResult, onSearch };
+  }
+
+  function getSearchInput(): HTMLInputElement {
+    return screen.getByRole('searchbox') as HTMLInputElement;
+  }
+
+  it('focuses the search input when the / key is pressed outside any input', () => {
+    setup();
+    const input = getSearchInput();
+    expect(input).not.toHaveFocus();
+
+    fireFullKeyPress(coerce<Window, HTMLElement>(window), { key: '/' });
+
+    expect(input).toHaveFocus();
+  });
+
+  it('does not steal the / key when focus is already inside an input', () => {
+    setup();
+    const input = getSearchInput();
+
+    // Add a separate input that will hold focus.
+    const otherInput = document.createElement('input');
+    otherInput.type = 'text';
+    document.body.appendChild(otherInput);
+    otherInput.focus();
+    expect(otherInput).toHaveFocus();
+
+    // Fire the keydown event from the focused input. The listener should
+    // bail out and leave focus where it was.
+    fireEvent.keyDown(otherInput, { key: '/' });
+
+    expect(otherInput).toHaveFocus();
+    expect(input).not.toHaveFocus();
+
+    document.body.removeChild(otherInput);
+  });
+
+  it('does not react to / combined with a modifier key', () => {
+    setup();
+    const input = getSearchInput();
+    expect(input).not.toHaveFocus();
+
+    fireEvent.keyDown(window, { key: '/', ctrlKey: true });
+    expect(input).not.toHaveFocus();
+
+    fireEvent.keyDown(window, { key: '/', metaKey: true });
+    expect(input).not.toHaveFocus();
+
+    fireEvent.keyDown(window, { key: '/', altKey: true });
+    expect(input).not.toHaveFocus();
+  });
+
+  it('focuses the search input when the f key is pressed and alsoFocusOnF is true', () => {
+    setup({ alsoFocusOnF: true });
+    const input = getSearchInput();
+    expect(input).not.toHaveFocus();
+
+    fireFullKeyPress(coerce<Window, HTMLElement>(window), { key: 'f' });
+
+    expect(input).toHaveFocus();
+  });
+
+  it('does not focus the search input on the f key when alsoFocusOnF is not set', () => {
+    setup();
+    const input = getSearchInput();
+    expect(input).not.toHaveFocus();
+
+    fireFullKeyPress(coerce<Window, HTMLElement>(window), { key: 'f' });
+
+    expect(input).not.toHaveFocus();
+  });
+
+  it('still uses / for focus even when alsoFocusOnF is true', () => {
+    setup({ alsoFocusOnF: true });
+    const input = getSearchInput();
+    expect(input).not.toHaveFocus();
+
+    fireFullKeyPress(coerce<Window, HTMLElement>(window), { key: '/' });
+
+    expect(input).toHaveFocus();
+  });
+
+  it('removes its global key listener on unmount', () => {
+    const { unmount } = setup();
+    const input = getSearchInput();
+    unmount();
+
+    // After unmount, pressing / should be a no-op (no focus jump back).
+    fireFullKeyPress(coerce<Window, HTMLElement>(window), { key: '/' });
+    expect(input).not.toHaveFocus();
+  });
+});

src/test/components/__snapshots__/FlameGraph.test.tsx.snap

@@ -500,7 +500,7 @@ exports[`FlameGraph matches the snapshot 1`] = `
           <input
             class="idleSearchFieldInput photon-input"
             name="search"
-            placeholder="Enter filter terms"
+            placeholder="Enter filter terms (/)"
             required=""
             title="Only display stacks which contain a function whose name matches this substring"
             type="search"

src/test/components/__snapshots__/MarkerChart.test.tsx.snap

@@ -516,7 +516,7 @@ exports[`MarkerChart renders the normal marker chart and matches the snapshot 1`
           <input
             class="idleSearchFieldInput photon-input"
             name="search"
-            placeholder="Enter filter terms"
+            placeholder="Enter filter terms (/)"
             required=""
             title="Only display markers that match a certain name"
             type="search"

src/test/components/__snapshots__/MarkerTable.test.tsx.snap

@@ -127,7 +127,7 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = `
           <input
             class="idleSearchFieldInput photon-input"
             name="search"
-            placeholder="Enter filter terms"
+            placeholder="Enter filter terms (/)"
             required=""
             title="Only display markers that match a certain name"
             type="search"

src/test/components/__snapshots__/NetworkChart.test.tsx.snap

@@ -43,7 +43,7 @@ exports[`NetworkChart renders NetworkChart correctly 1`] = `
           <input
             class="idleSearchFieldInput photon-input"
             name="search"
-            placeholder="Enter filter terms"
+            placeholder="Enter filter terms (/)"
             required=""
             title="Only display network requests that match a certain name"
             type="search"