track when all startup resources are loaded

Author: vzaidman

front_end/core/host/RNPerfMetrics.ts

@@ -186,6 +186,16 @@ class RNPerfMetrics {
     });
   }
 
+  developerResourcesStartupLoadingFinishedEvent(numResources: number, timeSinceLaunch: DOMHighResTimeStamp): void {
+    this.sendEvent({
+      eventName: 'DeveloperResources.StartupLoadingFinished',
+      params: {
+        numResources,
+        timeSinceLaunch,
+      },
+    });
+  }
+
   fuseboxSetClientMetadataStarted(): void {
     this.sendEvent({eventName: 'FuseboxSetClientMetadataStarted'});
   }
@@ -437,6 +447,14 @@ export type DeveloperResourceLoadingFinishedEvent = Readonly<{
   }>,
 }>;
 
+export type DeveloperResourcesStartupLoadingFinishedEvent = Readonly<{
+  eventName: 'DeveloperResources.StartupLoadingFinished',
+  params: Readonly<{
+    numResources: number,
+    timeSinceLaunch: DOMHighResTimeStamp,
+  }>,
+}>;
+
 export type FuseboxSetClientMetadataStartedEvent = Readonly<{
   eventName: 'FuseboxSetClientMetadataStarted',
 }>;
@@ -525,10 +543,10 @@ export type ManualBreakpointSetSucceeded = Readonly<{
 
 export type ReactNativeChromeDevToolsEvent =
     EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent|
-    BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|
-    DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|FuseboxSetClientMetadataFinishedEvent|
-    MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|PanelClosedEvent|
-    StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
-    StackTraceFrameUrlResolutionFailed|ManualBreakpointSetSucceeded|StackTraceFrameClicked;
+    BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|StackTraceFrameClicked|
+    DeveloperResourceLoadingFinishedEvent|DeveloperResourcesStartupLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|
+    FuseboxSetClientMetadataFinishedEvent|MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|
+    PanelShownEvent|PanelClosedEvent|StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|
+    StackTraceFrameUrlResolutionSucceeded|StackTraceFrameUrlResolutionFailed|ManualBreakpointSetSucceeded;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;

front_end/core/sdk/PageResourceLoader.ts

@@ -20,6 +20,8 @@ import {
 import type {Target} from './Target.js';
 import {TargetManager} from './TargetManager.js';
 
+const ALL_RESOURCES_LOADED_COOLDOWN = 3000;
+
 const UIStrings = {
   /**
    *@description Error message for canceled source map loads
@@ -82,6 +84,8 @@ interface LoadQueueEntry {
  */
 export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #currentlyLoading = 0;
+  #startupResourcesLoadedReported = false;
+  #startupResourcesLoadedTimeout = -1;
   #currentlyLoadingPerTarget = new Map<Protocol.Target.TargetID|'main', number>();
   readonly #maxConcurrentLoads: number;
   #pageResources = new Map<string, PageResource>();
@@ -354,6 +358,22 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     }
     Host.rnPerfMetrics.developerResourceLoadingFinished(
         parsedURL, Host.UserMetrics.DeveloperResourceLoaded.FALLBACK_AFTER_FAILURE, result);
+
+    if (!this.#startupResourcesLoadedReported) {
+      // if no new resource was set to be loaded for a certain time
+      // we consider all startup resources to be loaded
+      window.clearTimeout(this.#startupResourcesLoadedTimeout);
+      this.#startupResourcesLoadedTimeout = window.setTimeout(() => {
+        if (!this.#startupResourcesLoadedReported && this.#currentlyLoading === 0) {
+          Host.rnPerfMetrics.developerResourcesStartupLoadingFinishedEvent(
+            this.getNumberOfResources().resources /* numResources */,
+            performance.now() - ALL_RESOURCES_LOADED_COOLDOWN /* timeSinceLaunch */,
+          );
+          this.#startupResourcesLoadedReported = true;
+        }
+      }, ALL_RESOURCES_LOADED_COOLDOWN);
+    }
+
     return result;
   }