From f10cfea232dc580f98659a05b82db1b592fc0d60 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 19 Jan 2022 14:01:50 -0500 Subject: [PATCH] DevTools logs Timeline metadata only once, when profiling starts. --- .../src/__tests__/TimelineProfiler-test.js | 154 +++--------------- .../src/__tests__/preprocessData-test.js | 100 ++++++------ .../src/backend/profilingHooks.js | 32 ++-- 3 files changed, 90 insertions(+), 196 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 3a6c96c476d27..8c0fdab072a02 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -121,8 +121,32 @@ describe('Timeline profiler', () => { describe('when profiling', () => { beforeEach(() => { const store = global.store; + utils.act(() => store.profilerStore.startProfiling()); + + // Clear inital metadata marks to make tests below less noisy. + clearPendingMarks(); + }); + + it('should log metadata once when profiling starts', () => { + clearPendingMarks(); + const store = global.store; + utils.act(() => store.profilerStore.stopProfiling()); utils.act(() => store.profilerStore.startProfiling()); + + // Note that we use toContain() rather than toMatchInlineSnapshot() because of the test renderer. + // It also gets registered with DevTools and results in duplicate metadata marks. + expect(clearedMarks).toContain('--react-version-'); + expect(clearedMarks).toContain('--profiler-version-1'); + expect(clearedMarks).toContain( + '--react-internal-module-start-', + ); + expect(clearedMarks).toContain( + '--react-internal-module-stop-', + ); + expect(clearedMarks).toContain( + '--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen', + ); }); it('should mark sync render without suspends or state updates', () => { @@ -134,11 +158,6 @@ describe('Timeline profiler', () => { "--render-start-1", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--layout-effects-stop", "--commit-stop", @@ -164,11 +183,6 @@ describe('Timeline profiler', () => { "--render-start-16", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -226,11 +240,6 @@ describe('Timeline profiler', () => { "--suspense-suspend-0-Example-mount-1-", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--layout-effects-stop", "--commit-stop", @@ -268,11 +277,6 @@ describe('Timeline profiler', () => { "--suspense-suspend-0-Example-mount-1-", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--layout-effects-stop", "--commit-stop", @@ -315,11 +319,6 @@ describe('Timeline profiler', () => { "--suspense-suspend-0-Example-mount-16-", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -366,11 +365,6 @@ describe('Timeline profiler', () => { "--suspense-suspend-0-Example-mount-16-", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -417,11 +411,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--schedule-state-update-1-Example", "--layout-effects-stop", @@ -430,11 +419,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] @@ -470,11 +454,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--schedule-forced-update-1-Example", "--layout-effects-stop", @@ -483,11 +462,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] @@ -535,11 +509,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -588,11 +557,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -628,11 +592,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--component-layout-effect-mount-start-Example", "--schedule-state-update-1-Example", @@ -643,11 +602,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] @@ -677,11 +631,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -695,11 +644,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", ] `); @@ -727,11 +671,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--layout-effects-stop", "--commit-stop", @@ -777,11 +716,6 @@ describe('Timeline profiler', () => { "--error-ExampleThatThrows-mount-Expected error", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--schedule-state-update-1-ErrorBoundary", "--layout-effects-stop", @@ -791,11 +725,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", ] `); @@ -857,11 +786,6 @@ describe('Timeline profiler', () => { "--error-ExampleThatThrows-mount-Expected error", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--schedule-state-update-1-ErrorBoundary", "--layout-effects-stop", @@ -870,11 +794,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] @@ -936,11 +855,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-16", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-16", "--component-layout-effect-mount-start-ComponentWithEffects", "--component-layout-effect-mount-stop", @@ -992,11 +906,6 @@ describe('Timeline profiler', () => { "--render-start-1", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--component-layout-effect-unmount-start-ComponentWithEffects", "--component-layout-effect-unmount-stop", "--component-layout-effect-unmount-start-ComponentWithEffects", @@ -1026,11 +935,6 @@ describe('Timeline profiler', () => { "--render-start-1", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--layout-effects-stop", "--commit-stop", @@ -1076,11 +980,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-1", "--layout-effects-stop", "--commit-stop", @@ -1116,11 +1015,6 @@ describe('Timeline profiler', () => { "--component-render-stop", "--render-stop", "--commit-start-4", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start-", - "--react-internal-module-stop-", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--layout-effects-start-4", "--layout-effects-stop", "--commit-stop", diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index 9123e81ef90a9..7e532064a228e 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -73,11 +73,6 @@ describe('Timeline profiler', () => { utils = require('./utils'); utils.beforeEachProfiling(); - const store = global.store; - - // Start profiling so that data will actually be recorded. - utils.act(() => store.profilerStore.startProfiling()); - React = require('react'); ReactDOM = require('react-dom'); Scheduler = require('scheduler'); @@ -86,6 +81,11 @@ describe('Timeline profiler', () => { .setPerformanceMock_ONLY_FOR_TESTING; setPerformanceMock(createUserTimingPolyfill()); + const store = global.store; + + // Start profiling so that data will actually be recorded. + utils.act(() => store.profilerStore.startProfiling()); + global.IS_REACT_ACT_ENVIRONMENT = true; }); @@ -631,11 +631,11 @@ describe('Timeline profiler', () => { Object { "batchUID": 0, "depth": 0, - "duration": 0.01, + "duration": 0.005, "lanes": Array [ 0, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render-idle", }, Object { @@ -645,17 +645,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 0, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render", }, Object { "batchUID": 0, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 0, ], - "timestamp": 0.006, + "timestamp": 0.016, "type": "commit", }, Object { @@ -665,13 +665,13 @@ describe('Timeline profiler', () => { "lanes": Array [ 0, ], - "timestamp": 0.012, + "timestamp": 0.017, "type": "layout-effects", }, ], }, "componentMeasures": Array [], - "duration": 0.014, + "duration": 0.019, "flamechart": Array [], "internalModuleSourceToRanges": Map { undefined => Array [ @@ -723,11 +723,11 @@ describe('Timeline profiler', () => { Object { "batchUID": 0, "depth": 0, - "duration": 0.01, + "duration": 0.005, "lanes": Array [ 0, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render-idle", }, Object { @@ -737,17 +737,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 0, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render", }, Object { "batchUID": 0, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 0, ], - "timestamp": 0.006, + "timestamp": 0.016, "type": "commit", }, Object { @@ -757,7 +757,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 0, ], - "timestamp": 0.012, + "timestamp": 0.017, "type": "layout-effects", }, ], @@ -801,7 +801,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 0, ], - "timestamp": 0.003, + "timestamp": 0.013, "type": "schedule-render", "warning": null, }, @@ -812,7 +812,7 @@ describe('Timeline profiler', () => { "suspenseEvents": Array [], "thrownErrors": Array [], } - `); + `); }); it('should process a sample createRoot render sequence', async () => { @@ -840,11 +840,11 @@ describe('Timeline profiler', () => { Object { "batchUID": 0, "depth": 0, - "duration": 0.012, + "duration": 0.007, "lanes": Array [ 4, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render-idle", }, Object { @@ -854,17 +854,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render", }, Object { "batchUID": 0, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 4, ], - "timestamp": 0.008, + "timestamp": 0.018, "type": "commit", }, Object { @@ -874,7 +874,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.014, + "timestamp": 0.019, "type": "layout-effects", }, Object { @@ -884,7 +884,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.017, + "timestamp": 0.022, "type": "passive-effects", }, ], @@ -892,11 +892,11 @@ describe('Timeline profiler', () => { Object { "batchUID": 1, "depth": 0, - "duration": 0.012, + "duration": 0.007, "lanes": Array [ 4, ], - "timestamp": 0.022, + "timestamp": 0.027, "type": "render-idle", }, Object { @@ -906,17 +906,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.022, + "timestamp": 0.027, "type": "render", }, Object { "batchUID": 1, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 4, ], - "timestamp": 0.026, + "timestamp": 0.031, "type": "commit", }, Object { @@ -945,21 +945,21 @@ describe('Timeline profiler', () => { Object { "componentName": "App", "duration": 0.001, - "timestamp": 0.005, + "timestamp": 0.015, "type": "render", "warning": null, }, Object { "componentName": "App", "duration": 0.002, - "timestamp": 0.018, + "timestamp": 0.023, "type": "passive-effect-mount", "warning": null, }, Object { "componentName": "App", "duration": 0.001, - "timestamp": 0.023, + "timestamp": 0.028, "type": "render", "warning": null, }, @@ -1027,11 +1027,11 @@ describe('Timeline profiler', () => { Object { "batchUID": 0, "depth": 0, - "duration": 0.012, + "duration": 0.007, "lanes": Array [ 4, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render-idle", }, Object { @@ -1041,17 +1041,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.004, + "timestamp": 0.014, "type": "render", }, Object { "batchUID": 0, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 4, ], - "timestamp": 0.008, + "timestamp": 0.018, "type": "commit", }, Object { @@ -1061,7 +1061,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.014, + "timestamp": 0.019, "type": "layout-effects", }, Object { @@ -1071,17 +1071,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.017, + "timestamp": 0.022, "type": "passive-effects", }, Object { "batchUID": 1, "depth": 0, - "duration": 0.012, + "duration": 0.007, "lanes": Array [ 4, ], - "timestamp": 0.022, + "timestamp": 0.027, "type": "render-idle", }, Object { @@ -1091,17 +1091,17 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.022, + "timestamp": 0.027, "type": "render", }, Object { "batchUID": 1, "depth": 0, - "duration": 0.008, + "duration": 0.003, "lanes": Array [ 4, ], - "timestamp": 0.026, + "timestamp": 0.031, "type": "commit", }, Object { @@ -1161,7 +1161,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.003, + "timestamp": 0.013, "type": "schedule-render", "warning": null, }, @@ -1170,7 +1170,7 @@ describe('Timeline profiler', () => { "lanes": Array [ 4, ], - "timestamp": 0.019, + "timestamp": 0.024, "type": "schedule-state-update", "warning": null, }, @@ -1845,8 +1845,6 @@ describe('Timeline profiler', () => { ), ); - clearPendingMarks(); - const testMarks = [creactCpuProfilerSample()]; // Start profiling and suspend during a render. diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index c6624e2334ba3..c14fe49de9ada 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -134,17 +134,6 @@ export function createProfilingHooks({ function markCommitStarted(lanes: Lanes): void { if (supportsUserTimingV3) { markAndClear(`--commit-start-${lanes}`); - - // Certain types of metadata should be logged infrequently. - // Normally we would log this during module init, - // but there's no guarantee a user is profiling at that time. - // Commits happen infrequently (less than renders or state updates) - // so we log this extra information along with a commit. - // It will likely be logged more than once but that's okay. - // - // TODO (timeline) Only log this once, when profiling starts. - // For the first phase– refactoring– we'll match the previous behavior. - markMetadata(); } } @@ -354,10 +343,23 @@ export function createProfilingHooks({ } function toggleProfilingStatus(value: boolean) { - isProfiling = value; - - if (value) { - // TODO (timeline) Log metadata (e.g. profiler and React versions, lane labels). + if (isProfiling !== value) { + isProfiling = value; + + if (supportsUserTimingV3) { + if (isProfiling) { + // Some metadata only needs to be logged once per session. + // Log it at the start of the session. + // + // TODO (timeline) + // This is the right time to general and store one-off metadata like this, + // but using the User Timing API for it will leave things temporarily broken, + // because Chrome locks you to the Performance tab once you start recording. + // We'll clean this up with a subsequent commit though, + // when we store this data in memory like we do with the legacy profiler. + markMetadata(); + } + } } }