Formalise ENABLE_TIMELINE_FRAMES experiment (#242)

Author: huntie

front_end/core/rn_experiments/experimentsImpl.ts

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

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

@@ -712,14 +712,6 @@ 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());
           },
@@ -1200,17 +1192,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (!isNode && (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES) || !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);
     }
 

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