Add enableComponentPerformanceTrack Flag

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

@@ -18,6 +18,11 @@ import {
 import {ReactVersion} from '../../../../ReactVersions';
 import semver from 'semver';
 
+let React = require('react');
+let Scheduler;
+let store;
+let utils;
+
 // TODO: This is how other DevTools tests access the version but we should find
 // a better solution for this
 const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
@@ -26,11 +31,16 @@ const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
 const enableSiblingPrerendering =
   false && semver.gte(ReactVersionTestingAgainst, '19.0.0');
 
+// This flag is on experimental which disables timeline profiler.
+const enableComponentPerformanceTrack =
+  React.version.startsWith('19') && React.version.includes('experimental');
+
 describe('Timeline profiler', () => {
-  let React;
-  let Scheduler;
-  let store;
-  let utils;
+  if (enableComponentPerformanceTrack) {
+    test('no tests', () => {});
+    // Ignore all tests.
+    return;
+  }
 
   beforeEach(() => {
     utils = require('./utils');

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

@@ -16,16 +16,29 @@ import {ReactVersion} from '../../../../ReactVersions';
 
 const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
 
+let React = require('react');
+let ReactDOM;
+let ReactDOMClient;
+let Scheduler;
+let utils;
+let assertLog;
+let waitFor;
+
+// This flag is on experimental which disables timeline profiler.
+const enableComponentPerformanceTrack =
+  React.version.startsWith('19') && React.version.includes('experimental');
+
 describe('Timeline profiler', () => {
-  let React;
-  let ReactDOM;
-  let ReactDOMClient;
-  let Scheduler;
-  let utils;
-  let assertLog;
-  let waitFor;
+  if (enableComponentPerformanceTrack) {
+    test('no tests', () => {});
+    // Ignore all tests.
+    return;
+  }
 
   describe('User Timing API', () => {
+    if (enableComponentPerformanceTrack) {
+      return;
+    }
     let currentlyNotClearedMarks;
     let registeredMarks;
     let featureDetectionMarkName = null;

packages/shared/ReactFeatureFlags.js

@@ -260,17 +260,24 @@ export const disableTextareaChildren = false;
 // Debugging and DevTools
 // -----------------------------------------------------------------------------
 
-// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
-// for an experimental timeline tool.
-export const enableSchedulingProfiler = __PROFILE__;
-
 // Helps identify side effects in render-phase lifecycle hooks and setState
 // reducers by double invoking them in StrictLegacyMode.
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 
 // Gather advanced timing metrics for Profiler subtrees.
 export const enableProfilerTimer = __PROFILE__;
 
+// Adds performance.measure() marks using Chrome extensions to allow formatted
+// Component rendering tracks to show up in the Performance tab.
+// This flag will be used for both Server Component and Client Component tracks.
+// All calls should also be gated on enableProfilerTimer.
+export const enableComponentPerformanceTrack = __EXPERIMENTAL__;
+
+// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
+// for an experimental timeline tool.
+export const enableSchedulingProfiler: boolean =
+  !enableComponentPerformanceTrack && __PROFILE__;
+
 // Record durations for commit and passive effects phases.
 export const enableProfilerCommitHooks = __PROFILE__;
 

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -77,6 +77,7 @@ export const enableRefAsProp = true;
 export const enableRenderableContext = true;
 export const enableRetryLaneExpiration = false;
 export const enableSchedulingProfiler = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
 export const enableScopeAPI = false;
 export const enableServerComponentLogs = true;
 export const enableSuspenseAvoidThisFallback = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -67,6 +67,7 @@ export const enableRefAsProp = true;
 export const enableRenderableContext = true;
 export const enableRetryLaneExpiration = false;
 export const enableSchedulingProfiler = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
 export const enableScopeAPI = false;
 export const enableServerComponentLogs = true;
 export const enableShallowPropDiffing = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -17,6 +17,7 @@ export const enableSchedulingProfiler = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
 export const enableUpdaterTracking = false;
 export const enableCache = true;
 export const enableLegacyCache = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -61,6 +61,7 @@ export const enableRefAsProp = true;
 export const enableRenderableContext = true;
 export const enableRetryLaneExpiration = false;
 export const enableSchedulingProfiler = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
 export const enableScopeAPI = false;
 export const enableServerComponentLogs = true;
 export const enableShallowPropDiffing = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -17,6 +17,7 @@ export const enableSchedulingProfiler = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
 export const enableUpdaterTracking = false;
 export const enableCache = true;
 export const enableLegacyCache = true;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -62,6 +62,8 @@ export const disableInputAttributeSyncing = false;
 export const enableLegacyFBSupport = true;
 export const enableLazyContextPropagation = true;
 
+export const enableComponentPerformanceTrack = false;
+
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler: boolean =
   __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;