diff --git a/front_end/core/rn_experiments/experimentsImpl.ts b/front_end/core/rn_experiments/experimentsImpl.ts index 083093a92e5..d499eac68e0 100644 --- a/front_end/core/rn_experiments/experimentsImpl.ts +++ b/front_end/core/rn_experiments/experimentsImpl.ts @@ -191,3 +191,10 @@ Instance.register({ unstable: true, enabledByDefault: () => false, }); + +Instance.register({ + name: RNExperimentName.ENABLE_TIMELINE_FRAMES, + title: 'Enable performance frames track', + unstable: true, + enabledByDefault: () => globalThis.enableTimelineFrames ?? false, +}); diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts index 08a67149ffe..f62d212e42e 100644 --- a/front_end/core/root/Runtime.ts +++ b/front_end/core/root/Runtime.ts @@ -306,6 +306,7 @@ export enum RNExperimentName { REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui', JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable', ENABLE_NETWORK_PANEL = 'enable-network-panel', + ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames', } export enum ConditionName { @@ -341,6 +342,7 @@ export const enum ExperimentName { REACT_NATIVE_SPECIFIC_UI = RNExperimentName.REACT_NATIVE_SPECIFIC_UI, NOT_REACT_NATIVE_SPECIFIC_UI = '!' + RNExperimentName.REACT_NATIVE_SPECIFIC_UI, ENABLE_NETWORK_PANEL = RNExperimentName.ENABLE_NETWORK_PANEL, + ENABLE_TIMELINE_FRAMES = RNExperimentName.ENABLE_TIMELINE_FRAMES, } export enum GenAiEnterprisePolicyValue { diff --git a/front_end/global_typings/react_native.d.ts b/front_end/global_typings/react_native.d.ts index 8a44fbfacaf..bb026253b2f 100644 --- a/front_end/global_typings/react_native.d.ts +++ b/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; diff --git a/front_end/panels/timeline/TimelineFlameChartDataProvider.ts b/front_end/panels/timeline/TimelineFlameChartDataProvider.ts index 7c7e281d8d9..6826abe4e93 100644 --- a/front_end/panels/timeline/TimelineFlameChartDataProvider.ts +++ b/front_end/panels/timeline/TimelineFlameChartDataProvider.ts @@ -106,8 +106,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper implements PerfUI.FlameChart.FlameChartDataProvider { - private isReactNative = false; - private droppedFramePatternCanvas: HTMLCanvasElement; private partialFramePatternCanvas: HTMLCanvasElement; private timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null = null; @@ -145,11 +143,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW constructor() { super(); - // [RN] Used to scope down available features for React Native targets - this.isReactNative = Root.Runtime.experiments.isEnabled( - Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, - ); - this.reset(); this.droppedFramePatternCanvas = document.createElement('canvas'); @@ -615,7 +608,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.#appendFramesAndScreenshotsTrack(); }