feat: add React Native-only event for pre-enabling multiple layers of Tracing

Author: hoxyq

front_end/core/sdk/ReactNativeApplicationModel.ts

@@ -51,12 +51,18 @@ export class ReactNativeApplicationModel extends SDKModel<EventTypes> implements
     this.metadataCached = metadata;
     this.dispatchEventToListeners(Events.METADATA_UPDATED, metadata);
   }
+
+  traceRequested(): void {
+    this.dispatchEventToListeners(Events.TRACE_REQUESTED);
+  }
 }
 
 export const enum Events {
   METADATA_UPDATED = 'MetadataUpdated',
+  TRACE_REQUESTED = 'TraceRequested',
 }
 
 export interface EventTypes {
   [Events.METADATA_UPDATED]: Protocol.ReactNativeApplication.MetadataUpdatedEvent;
+  [Events.TRACE_REQUESTED]: void;
 }

front_end/generated/InspectorBackendCommands.js

@@ -17,6 +17,10 @@ export namespace ProtocolMapping {
      * device, application, and debugger integration.
      */
     'ReactNativeApplication.metadataUpdated': [Protocol.ReactNativeApplication.MetadataUpdatedEvent];
+    /**
+     * Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace.
+     */
+    'ReactNativeApplication.traceRequested': [];
     /**
      * The loadComplete event mirrors the load complete event sent by the browser to assistive
      * technology when the web page has finished loading.

front_end/generated/protocol-mapping.d.ts

@@ -255,6 +255,11 @@ declare namespace ProtocolProxyApi {
      */
     metadataUpdated(params: Protocol.ReactNativeApplication.MetadataUpdatedEvent): void;
 
+    /**
+     * Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace.
+     */
+    traceRequested(): void;
+
   }
 
   export interface AccessibilityApi {

front_end/generated/protocol-proxy-api.d.ts

@@ -99,6 +99,11 @@ export class TracingManager extends SDK.SDKModel.SDKModel<void> {
     this.#finishing = true;
     void this.#tracingAgent.invoke_end();
   }
+
+  rnPrepareForTraceCapturedInBackground(client: TracingManagerClient): void {
+    this.#activeClient = client;
+    this.#finishing = true;
+  }
 }
 
 export interface TracingManagerClient {

front_end/models/trace/TracingManager.ts

@@ -202,6 +202,18 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     await LiveMetrics.LiveMetrics.instance().enable();
   }
 
+  async rnPrepareForTraceCapturedInBackground(): Promise<void> {
+    await LiveMetrics.LiveMetrics.instance().disable();
+
+    if (this.tracingManager) {
+      this.tracingManager.rnPrepareForTraceCapturedInBackground(this);
+    }
+
+    this.client.loadingStarted();
+    await this.allSourcesFinished();
+    await LiveMetrics.LiveMetrics.instance().enable();
+  }
+
   private async fetchFieldData(): Promise<CrUXManager.PageResult[]|null> {
     const cruxManager = CrUXManager.CrUXManager.instance();
     if (!cruxManager.isEnabled() || !navigator.onLine) {

front_end/panels/timeline/TimelineController.ts

@@ -700,6 +700,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#showLandingPage();
     this.updateTimelineControls();
 
+    if (isReactNative) {
+      SDK.TargetManager.TargetManager.instance().observeModels(
+        SDK.ReactNativeApplicationModel.ReactNativeApplicationModel,
+        {
+          modelAdded: (model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel) => {
+            model.addEventListener(
+              SDK.ReactNativeApplicationModel.Events.TRACE_REQUESTED, () => this.rnPrepareForTraceCapturedInBackground());
+          },
+          modelRemoved: (_model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel) => {},
+        },
+      );
+    }
+
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SUSPEND_STATE_CHANGED, this.onSuspendStateChanged, this);
     const profilerModels = SDK.TargetManager.TargetManager.instance().models(SDK.CPUProfilerModel.CPUProfilerModel);
@@ -731,6 +744,31 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     });
   }
 
+  private async rnPrepareForTraceCapturedInBackground(): Promise<void> {
+    this.setUIControlsEnabled(false);
+
+    if (this.statusPane) {
+      this.statusPane.finish();
+      this.statusPane.updateStatus(i18nString(UIStrings.stoppingTimeline));
+      this.statusPane.updateProgressBar(i18nString(UIStrings.received), 0);
+    }
+    this.setState(State.STOP_PENDING);
+
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!primaryPageTarget) {
+      throw new Error('Could not load primary page target.');
+    }
+    if (!rootTarget) {
+      throw new Error('Could not load root target.');
+    }
+
+    this.controller = new TimelineController(rootTarget, primaryPageTarget, this);
+    await this.controller.rnPrepareForTraceCapturedInBackground();
+
+    this.setUIControlsEnabled(true);
+  }
+
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
     // When an insight is selected, ensure that the 3P checkbox is disabled
     // to avoid dimming interference.

front_end/panels/timeline/TimelinePanel.ts

@@ -71,6 +71,10 @@
                             "type": "boolean"
                         }
                     ]
+                },
+                {
+                    "name": "traceRequested",
+                    "description": "Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace."
                 }
             ]
         },

third_party/blink/public/devtools_protocol/browser_protocol.json

@@ -30,3 +30,6 @@ experimental domain ReactNativeApplication
       optional boolean unstable_isProfilingBuild
       # Enables the Network Panel.
       optional boolean unstable_networkInspectionEnabled
+
+  # Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace.
+  event traceRequested