[Devtools] Navigating commits performance panel hotkey

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

@@ -363,8 +363,7 @@ describe('console', () => {
 
   it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = false;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -405,8 +404,7 @@ describe('console', () => {
 
   it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      true;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = true;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -433,8 +431,7 @@ describe('console', () => {
 
   it('should double log from Effects if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = false;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -481,8 +478,7 @@ describe('console', () => {
 
   it('should not double log from Effects if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      true;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = true;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -518,8 +514,7 @@ describe('console', () => {
 
   it('should double log from useMemo if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = false;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -562,8 +557,7 @@ describe('console', () => {
 
   it('should not double log from useMemo fns if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      true;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = true;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
@@ -592,8 +586,7 @@ describe('console', () => {
 
   it('should double log in Strict mode initial render for extension', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = false;
 
     // This simulates a render that happens before React DevTools have finished
     // their handshake to attach the React DOM renderer functions to DevTools
@@ -638,8 +631,7 @@ describe('console', () => {
 
   it('should not double log in Strict mode initial render for extension', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      true;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = true;
 
     // This simulates a render that happens before React DevTools have finished
     // their handshake to attach the React DOM renderer functions to DevTools
@@ -670,8 +662,7 @@ describe('console', () => {
 
   it('should properly dim component stacks during strict mode double log', () => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = true;
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
-      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode = false;
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);

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

@@ -655,4 +655,212 @@ describe('ProfilerContext', () => {
 
     document.body.removeChild(profilerContainer);
   });
+
+  it('should navigate between commits when the keyboard shortcut is pressed', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const container = document.createElement('div');
+    utils.act(() => legacyRender(<Parent />, container));
+
+    // Profile and record multiple commits
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<Parent />, container)); // Commit 1
+    await utils.actAsync(() => legacyRender(<Parent />, container)); // Commit 2
+    await utils.actAsync(() => legacyRender(<Parent />, container)); // Commit 3
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    // Context 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');
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    const profilerContainer = document.createElement('div');
+    document.body.appendChild(profilerContainer);
+
+    // Create a root for the profiler
+    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
+
+    // Render the profiler with ContextReader
+    await utils.actAsync(() => {
+      profilerRoot.render(
+        <Contexts>
+          <SettingsContextController browserTheme="light">
+            <ModalDialogContextController>
+              <TimelineContextController>
+                <Profiler />
+                <ContextReader />
+              </TimelineContextController>
+            </ModalDialogContextController>
+          </SettingsContextController>
+        </Contexts>,
+      );
+    });
+
+    // Verify we have profiling data with 3 commits
+    expect(context.didRecordCommits).toBe(true);
+    expect(context.profilingData).not.toBeNull();
+    const rootID = context.rootID;
+    expect(rootID).not.toBeNull();
+    const dataForRoot = context.profilingData.dataForRoots.get(rootID);
+    expect(dataForRoot.commitData.length).toBe(3);
+
+    // Set initial commit selection
+    await utils.actAsync(() => context.selectCommitIndex(0));
+    expect(context.selectedCommitIndex).toBe(0);
+
+    const ownerWindow = profilerContainer.ownerDocument.defaultView;
+
+    // Test ArrowRight navigation (forward)
+    const arrowRightEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowRight',
+      bubbles: true,
+    });
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(2);
+
+    // Test wrap-around (last -> first)
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(0);
+
+    // Test ArrowLeft navigation (backward)
+    const arrowLeftEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowLeft',
+      bubbles: true,
+    });
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(2);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(0);
+
+    document.body.removeChild(profilerContainer);
+  });
+
+  it('should handle commit selection edge cases when filtering commits', async () => {
+    // Create components that render with different durations
+    const FastComponent = () => null;
+    const SlowComponent = () => {
+      // Simulate slow render
+      const start = performance.now();
+      while (performance.now() - start < 20) {
+        // Busy wait
+      }
+      return null;
+    };
+
+    const container = document.createElement('div');
+
+    // Initial render
+    utils.act(() => legacyRender(<FastComponent />, container));
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    // Profile with multiple commits of varying durations
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<FastComponent />, container)); // Fast commit (index 0)
+    await utils.actAsync(() => legacyRender(<SlowComponent />, container)); // Slow commit (index 1)
+    await utils.actAsync(() => legacyRender(<FastComponent />, container)); // Fast commit (index 2)
+    await utils.actAsync(() => legacyRender(<SlowComponent />, container)); // Slow commit (index 3)
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    // Initially, no commit is selected and no filter is enabled
+    expect(context.selectedCommitIndex).toBe(null);
+    expect(context.isCommitFilterEnabled).toBe(false);
+
+    // Case 1: When no commit is selected and there are commits, first should auto-select
+    expect(context.filteredCommitIndices.length).toBe(4);
+    expect(context.selectedFilteredCommitIndex).toBe(null);
+
+    // The context should auto-select the first commit when rendered with commits available
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      );
+    });
+    expect(context.selectedCommitIndex).toBe(0);
+
+    // Case 2: Select a slow commit, then enable filter to hide it
+    await utils.actAsync(() => context.selectCommitIndex(3)); // Select last slow commit
+    expect(context.selectedCommitIndex).toBe(3);
+
+    // Enable filter with duration threshold that filters out fast commits
+    await utils.actAsync(() => context.setIsCommitFilterEnabled(true));
+    await utils.actAsync(() => context.setMinCommitDuration(10)); // Filter for commits > 10ms
+
+    // After filtering, only slow commits (1, 3) should remain
+    // Selected commit (3) should still be valid
+    expect(context.filteredCommitIndices).toEqual([1, 3]);
+    expect(context.selectedCommitIndex).toBe(3);
+    expect(context.selectedFilteredCommitIndex).toBe(1); // Index 1 in filtered array
+
+    // Case 3: Select a fast commit, then filter it out
+    await utils.actAsync(() => context.setIsCommitFilterEnabled(false));
+    await utils.actAsync(() => context.selectCommitIndex(0)); // Select first fast commit
+    expect(context.selectedCommitIndex).toBe(0);
+
+    // Re-enable filter - commit 0 should be filtered out
+    await utils.actAsync(() => context.setIsCommitFilterEnabled(true));
+
+    // Context should auto-correct to last valid filtered commit
+    expect(context.filteredCommitIndices).toEqual([1, 3]);
+    expect(context.selectedCommitIndex).toBe(3); // Auto-corrected to last filtered commit
+    expect(context.selectedFilteredCommitIndex).toBe(1);
+
+    // Case 4: Filter out all commits
+    await utils.actAsync(() => context.setMinCommitDuration(1000)); // Very high threshold
+
+    // No commits should pass filter
+    expect(context.filteredCommitIndices).toEqual([]);
+    expect(context.selectedCommitIndex).toBe(null); // Should be null when no commits
+    expect(context.selectedFilteredCommitIndex).toBe(null);
+  });
 });

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

@@ -54,6 +54,8 @@ function Profiler(_: {}) {
     supportsProfiling,
     startProfiling,
     stopProfiling,
+    selectPrevCommitIndex,
+    selectNextCommitIndex,
   } = useContext(ProfilerContext);
 
   const {file: timelineTraceEventData, searchInputContainerRef} =
@@ -63,9 +65,9 @@ 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;
+    // Cmd+E to start/stop profiler recording
     if (correctModifier && event.key === 'e') {
       if (isProfiling) {
         stopProfiling();
@@ -74,6 +76,21 @@ function Profiler(_: {}) {
       }
       event.preventDefault();
       event.stopPropagation();
+    } else if (
+      isLegacyProfilerSelected &&
+      didRecordCommits &&
+      selectedCommitIndex !== null
+    ) {
+      // Left/Right to navigate commits
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if (event.key === 'ArrowLeft') {
+          selectPrevCommitIndex();
+        } else {
+          selectNextCommitIndex();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      }
     }
   });