Add experiment for enabling frames and screenshots (#212)

Adds back the frames track under an RN experiment.

Author: sbuggay

front_end/core/rn_experiments/experimentsImpl.ts

@@ -184,3 +184,10 @@ Instance.register({
   unstable: false,
   enabledByDefault: ({ isReactNativeEntryPoint }) => isReactNativeEntryPoint,
 });
+
+Instance.register({
+  name: RNExperimentName.ENABLE_TIMELINE_FRAMES,
+  title: 'Enable performance frames track',
+  unstable: true,
+  enabledByDefault: () => globalThis.enableTimelineFrames ?? false,
+});

front_end/core/root/Runtime.ts

@@ -305,6 +305,7 @@ export const experiments = new ExperimentsSupport();
 export enum RNExperimentName {
   REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui',
   JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable',
+  ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames',
 }
 
 export enum ConditionName {
@@ -339,6 +340,7 @@ export const enum ExperimentName {
   JS_HEAP_PROFILER_ENABLE = RNExperimentName.JS_HEAP_PROFILER_ENABLE,
   REACT_NATIVE_SPECIFIC_UI = RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   NOT_REACT_NATIVE_SPECIFIC_UI = '!' + RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
+  ENABLE_TIMELINE_FRAMES = RNExperimentName.ENABLE_TIMELINE_FRAMES,
 }
 
 export enum GenAiEnterprisePolicyValue {

front_end/global_typings/react_native.d.ts

@@ -16,6 +16,8 @@ declare global {
     // eslint-disable-next-line no-var
     var enableDisplayingFullDisconnectedReason: boolean|undefined;
     // eslint-disable-next-line no-var
+    var enableTimelineFrames: boolean|undefined;
+    // eslint-disable-next-line no-var
     var reactNativeOpenInEditorButtonImage: string|undefined;
     // eslint-disable-next-line no-var,@typescript-eslint/naming-convention
     var FB_ONLY__reactNativeFeedbackLink: string|undefined;

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -615,7 +615,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     // In CPU Profiles the trace data will not have frames nor
     // screenshots, so we can keep this call as it will be a no-op in
     // these cases.
-    if (!this.isReactNative) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES) || !this.isReactNative) {
       this.#appendFramesAndScreenshotsTrack();
     }
 

front_end/testing/EnvironmentHelpers.ts

@@ -130,6 +130,7 @@ const REGISTERED_EXPERIMENTS = [
   Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION,
   Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
   Root.Runtime.ExperimentName.NOT_REACT_NATIVE_SPECIFIC_UI,
+  Root.Runtime.ExperimentName.ENABLE_TIMELINE_FRAMES,
 ];
 
 export async function initializeGlobalVars({reset = true} = {}) {