[0.83] Backport performance debugging improvements (#248)

Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

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

@@ -573,7 +573,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.panelToolbar.wrappable = true;
     this.panelRightToolbar = timelineToolbarContainer.createChild('devtools-toolbar');
     this.panelRightToolbar.role = 'presentation';
-    if (!isNode && !isReactNative) {
+    if (!isNode) {
       this.createSettingsPane();
       this.updateShowSettingsToolbarButton();
     }
@@ -1189,7 +1189,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     // View
     this.panelToolbar.appendSeparator();
-    if (!isNode && !isReactNative) {
+    if (!isNode && (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES) || !isReactNative)) {
       this.showScreenshotsToolbarCheckbox =
           this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
       this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox);
@@ -1225,7 +1225,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     // Settings
-    if (!isNode && !isReactNative) {
+    if (!isNode) {
       this.panelRightToolbar.appendSeparator();
       this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
     }
@@ -1334,22 +1334,24 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
         i18nString(UIStrings.disablesJavascriptSampling)));
 
-    const cpuThrottlingPane = this.settingsPane.createChild('div');
-    cpuThrottlingPane.append(i18nString(UIStrings.cpu));
-    this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
-    cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
+    if (!isReactNative) {
+      const cpuThrottlingPane = this.settingsPane.createChild('div');
+      cpuThrottlingPane.append(i18nString(UIStrings.cpu));
+      this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
+      cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
-        this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
-        i18nString(UIStrings.capturesAdvancedPaint)));
+      this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+          this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
+          i18nString(UIStrings.capturesAdvancedPaint)));
 
-    const networkThrottlingPane = this.settingsPane.createChild('div');
-    networkThrottlingPane.append(i18nString(UIStrings.network));
-    networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
+      const networkThrottlingPane = this.settingsPane.createChild('div');
+      networkThrottlingPane.append(i18nString(UIStrings.network));
+      networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
-        this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
-        i18nString(UIStrings.capturesSelectorStats)));
+      this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+          this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
+          i18nString(UIStrings.capturesSelectorStats)));
+    }
 
     const thirdPartyCheckbox =
         this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions));
@@ -1618,7 +1620,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   private updateSettingsPaneVisibility(): void {
-    if (isNode || isReactNative) {
+    if (isNode) {
       return;
     }
     if (this.showSettingsPaneSetting.get()) {

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