Add enableComponentPerformanceTrack Flag (#30960)

This flag will be used to gate a new timeline profiler that's integrate
with the Performance Tab and the new performance.measure extensions in
Chrome.

It replaces the existing DevTools feature so this disables
enableSchedulingProfiler when it is enabled since they can interplay in
weird ways potentially.

This means that experimental React now disable scheduling profiler and
enables this new approach.

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,10 +260,6 @@ 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__;
@@ -271,6 +267,17 @@ 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;