Formalise ENABLE_TIMELINE_FRAMES experiment (#242)

Author: huntie

front_end/core/rn_experiments/experimentsImpl.ts

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

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/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts

@@ -29,6 +29,12 @@ const UIStrings = {
    * @description Title shown when a feature is unavailable due to multiple React Native hosts.
    */
   multiHostFeatureUnavailableTitle: 'Feature is unavailable',
+  /**
+   * @description Message for the "settings changed" banner shown when a reload
+   * is required for frame timings in the Performance panel.
+   */
+  reloadRequiredForTimelineFramesMessage:
+      'Frame timings and screenshots are now available in the Performance panel. Please reload to enable.',
   /**
    * @description Detail message shown when a feature is disabled due to multiple React Native hosts.
    */
@@ -75,7 +81,7 @@ export class FuseboxFeatureObserver implements
   #handleMetadataUpdated(
       event: Common.EventTarget.EventTargetEvent<Protocol.ReactNativeApplication.MetadataUpdatedEvent>): void {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const {unstable_isProfilingBuild, unstable_networkInspectionEnabled} = event.data;
+    const {unstable_isProfilingBuild, unstable_networkInspectionEnabled, unstable_frameRecordingEnabled} = event.data;
 
     if (unstable_isProfilingBuild) {
       FuseboxWindowTitleManager.instance().setSuffix('[PROFILING]');
@@ -87,6 +93,10 @@ export class FuseboxFeatureObserver implements
     if (!unstable_networkInspectionEnabled && !Root.Runtime.conditions.reactNativeExpoNetworkPanel()) {
       this.#hideNetworkPanel();
     }
+
+    if (unstable_frameRecordingEnabled) {
+      void this.#ensureTimelineFramesEnabled();
+    }
   }
 
   #handleSystemStateChanged(
@@ -132,6 +142,14 @@ export class FuseboxFeatureObserver implements
     });
   }
 
+  async #ensureTimelineFramesEnabled(): Promise<void> {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES)) {
+      Root.Runtime.experiments.setEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES, true);
+      UI.InspectorView?.InspectorView?.instance()?.displayReloadRequiredWarning(
+          i18nString(UIStrings.reloadRequiredForTimelineFramesMessage));
+    }
+  }
+
   #disableSingleHostOnlyFeatures(): void {
     if (this.#singleHostFeaturesDisabled) {
       return;

front_end/generated/protocol.ts

@@ -61,6 +61,11 @@ export namespace ReactNativeApplication {
      * Enables the Network Panel.
      */
     unstable_networkInspectionEnabled?: boolean;
+    /**
+     * Whether Frame Timings and screenshots are supported in performance
+     * traces.
+     */
+    unstable_frameRecordingEnabled?: boolean;
   }
 
   /**

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/panels/timeline/TimelinePanel.ts

@@ -712,6 +712,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         SDK.ReactNativeApplicationModel.ReactNativeApplicationModel,
         {
           modelAdded: (model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel) => {
+            model.addEventListener(
+              SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED,
+              (event: Common.EventTarget.EventTargetEvent<Protocol.ReactNativeApplication.MetadataUpdatedEvent>) => {
+                if (event.data.platform === 'android') {
+                  this.showScreenshotsToolbarCheckbox?.setVisible(true);
+                }
+              }
+            );
             model.addEventListener(
               SDK.ReactNativeApplicationModel.Events.TRACE_REQUESTED, () => this.rnPrepareForTraceCapturedInBackground());
           },
@@ -1192,6 +1200,17 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (!isNode && !isReactNative) {
       this.showScreenshotsToolbarCheckbox =
           this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
+
+      let showScreenshotsToggle = false;
+
+      const reactNativeApplicationModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.ReactNativeApplicationModel.ReactNativeApplicationModel);
+      if (reactNativeApplicationModel !== null && reactNativeApplicationModel !== undefined) {
+        showScreenshotsToggle = reactNativeApplicationModel.metadataCached?.platform === 'android';
+      }
+
+      // Only show this toggle if we are on android, to address a possible race condition with the platform metadata,
+      // this is also checked again on SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED
+      this.showScreenshotsToolbarCheckbox.setVisible(showScreenshotsToggle);
       this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox);
     }
 

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} = {}) {

third_party/blink/public/devtools_protocol/browser_protocol.json

@@ -69,6 +69,12 @@
                             "description": "Enables the Network Panel.",
                             "optional": true,
                             "type": "boolean"
+                        },
+                        {
+                            "name": "unstable_frameRecordingEnabled",
+                            "description": "Whether Frame Timings and screenshots are supported in performance traces.",
+                            "optional": true,
+                            "type": "boolean"
                         }
                     ]
                 },

third_party/blink/public/devtools_protocol/react_native_domains.pdl

@@ -30,6 +30,8 @@ experimental domain ReactNativeApplication
       optional boolean unstable_isProfilingBuild
       # Enables the Network Panel.
       optional boolean unstable_networkInspectionEnabled
+      # Whether Frame Timings and screenshots are supported in performance traces.
+      optional boolean unstable_frameRecordingEnabled
 
   # Emitted when assertions about the debugger backend have changed.
   event systemStateChanged