[DevTools] hotkey to start/stop profiling

packages/react-devtools-shared/src/__tests__/profilerContext-test.js

@@ -584,4 +584,101 @@ describe('ProfilerContext', () => {
     await utils.actAsync(() => context.selectFiber(childID, 'Child'));
     expect(inspectedElementID).toBe(parentID);
   });
+
+  it('should toggle profiling when the keyboard shortcut is pressed', async () => {
+    // Use real timers for this test to avoid conflicts with Timeline's setInterval
+    jest.useRealTimers();
+
+    // Conetext providers
+    const Profiler =
+      require('react-devtools-shared/src/devtools/views/Profiler/Profiler').default;
+    const {
+      TimelineContextController,
+    } = require('react-devtools-timeline/src/TimelineContext');
+    const {
+      SettingsContextController,
+    } = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext');
+    const {
+      ModalDialogContextController,
+    } = require('react-devtools-shared/src/devtools/views/ModalDialog');
+
+    // need a dom component for profiling to be enabled
+    const Component = () => null;
+    utils.act(() => render(<Component />));
+
+    const profilerContainer = document.createElement('div');
+    document.body.appendChild(profilerContainer);
+
+    // Create a root for the profiler
+    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
+
+    try {
+      // Render the profiler - use React.act to ensure render completes
+      React.act(() => {
+        profilerRoot.render(
+          <Contexts>
+            <SettingsContextController browserTheme="light">
+              <ModalDialogContextController>
+                <TimelineContextController>
+                  <Profiler />
+                </TimelineContextController>
+              </ModalDialogContextController>
+            </SettingsContextController>
+          </Contexts>,
+        );
+      });
+
+      // Wait for any async effects to complete
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Verify that the profiler is not profiling.
+      expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
+
+      // Trigger the keyboard shortcut.
+      const ownerWindow = profilerContainer.ownerDocument.defaultView;
+      const isMac =
+        typeof navigator !== 'undefined' &&
+        navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+      const keyEvent = new KeyboardEvent('keydown', {
+        key: 'e',
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+      });
+
+      // Helper to wait for profiling state to change
+      const waitForProfilingState = async (expectedState, timeoutMs = 1000) => {
+        const startTime = Date.now();
+        while (
+          store.profilerStore.isProfilingBasedOnUserInput !== expectedState
+        ) {
+          if (Date.now() - startTime > timeoutMs) {
+            throw new Error(
+              `Timeout waiting for profiling to be ${expectedState}. ` +
+                `Current state: ${store.profilerStore.isProfilingBasedOnUserInput}`,
+            );
+          }
+          await new Promise(resolve => setTimeout(resolve, 10));
+        }
+      };
+
+      // Dispatch keyboard event to toggle profiling on
+      ownerWindow.dispatchEvent(keyEvent);
+      await waitForProfilingState(true);
+
+      expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(true);
+
+      // Dispatch keyboard event to toggle profiling off
+      ownerWindow.dispatchEvent(keyEvent);
+      await waitForProfilingState(false);
+
+      expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
+
+      document.body.removeChild(profilerContainer);
+    } finally {
+      // Restore fake timers for other tests
+      jest.useFakeTimers();
+    }
+  });
 });

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {Fragment, useContext} from 'react';
+import {Fragment, useContext, useEffect, useRef, useEffectEvent} from 'react';
 import {ModalDialog} from '../ModalDialog';
 import {ProfilerContext} from './ProfilerContext';
 import TabBar from '../TabBar';
@@ -38,6 +38,11 @@ import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 import styles from './Profiler.css';
 
 function Profiler(_: {}) {
+  const profilerRef = useRef<HTMLDivElement | null>(null);
+  const isMac =
+    typeof navigator !== 'undefined' &&
+    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
   const {
     didRecordCommits,
     isProcessingData,
@@ -47,6 +52,8 @@ function Profiler(_: {}) {
     selectedTabID,
     selectTab,
     supportsProfiling,
+    startProfiling,
+    stopProfiling,
   } = useContext(ProfilerContext);
 
   const {file: timelineTraceEventData, searchInputContainerRef} =
@@ -56,6 +63,32 @@ function Profiler(_: {}) {
 
   const isLegacyProfilerSelected = selectedTabID !== 'timeline';
 
+  // Cmd+E to start/stop profiler recording
+  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
+    const correctModifier = isMac ? event.metaKey : event.ctrlKey;
+    if (correctModifier && event.key === 'e') {
+      if (isProfiling) {
+        stopProfiling();
+      } else {
+        startProfiling();
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+
+  useEffect(() => {
+    const div = profilerRef.current;
+    if (!div) {
+      return;
+    }
+    const ownerWindow = div.ownerDocument.defaultView;
+    ownerWindow.addEventListener('keydown', handleKeyDown);
+    return () => {
+      ownerWindow.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
@@ -112,7 +145,7 @@ function Profiler(_: {}) {
 
   return (
     <SettingsModalContextController>
-      <div className={styles.Profiler}>
+      <div ref={profilerRef} className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
             <RecordToggle disabled={!supportsProfiling} />

packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js

@@ -30,13 +30,19 @@ export default function RecordToggle({disabled}: Props): React.Node {
     className = styles.ActiveRecordToggle;
   }
 
+  const isMac =
+    typeof navigator !== 'undefined' &&
+    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  const shortcut = isMac ? '⌘E' : 'Ctrl+E';
+  const title = `${isProfiling ? 'Stop' : 'Start'} profiling - ${shortcut}`;
+
   return (
     <Button
       className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
       testName="ProfilerToggleButton"
-      title={isProfiling ? 'Stop profiling' : 'Start profiling'}>
+      title={title}>
       <ButtonIcon type="record" />
     </Button>
   );