Merge branch 'main' into users/devanb/frames

Author: sbuggay

AGENTS.md

@@ -0,0 +1,17 @@
+# Project Instructions
+
+This codebase is a fork of https://github.com/ChromeDevTools/devtools-frontend.
+
+## Editing Policy
+
+- Make minimal edits. No speculative refactors.
+- Changes should generally be scoped to the `front_end/` directory. Focus code searches here.
+
+## Workflow
+
+- Update `BUILD.gn` files when adding new modules and imports.
+- New files should prepend "Copyright (c) Meta Platforms, Inc. and affiliates." as the first line of the license header, above the Chromium Authors license. Keep in sync with `META_CODE_PATHS` in `scripts/eslint_rules/lib/check-license-header.js`.
+
+## Architecture
+
+- For UI code, prefer modern `html` template code and locate styles in one adjacent CSS file. Example: `front_end/ui/components/cards/Cards.ts`.

front_end/Images/react_native/learn-debugging-basics.jpg

@@ -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'});
   }
@@ -298,6 +308,24 @@ class RNPerfMetrics {
     });
   }
 
+  manualBreakpointSetSucceeded(bpSettingDuration: number): void {
+    this.sendEvent({
+      eventName: 'ManualBreakpointSetSucceeded',
+      params: {
+        bpSettingDuration,
+      }
+    });
+  }
+
+  stackTraceFrameClicked(isLinkified: boolean): void {
+    this.sendEvent({
+      eventName: 'StackTraceFrameClicked',
+      params: {
+        isLinkified,
+      }
+    });
+  }
+
   panelShown(_panelName: string, _isLaunching?: boolean): void {
     // no-op
     // We only care about the "main" and "drawer" panels for now via panelShownInLocation(…)
@@ -417,6 +445,14 @@ export type DeveloperResourceLoadingFinishedEvent = Readonly<{
   }>,
 }>;
 
+export type DeveloperResourcesStartupLoadingFinishedEvent = Readonly<{
+  eventName: 'DeveloperResources.StartupLoadingFinished',
+  params: Readonly<{
+    numResources: number,
+    timeSinceLaunch: DOMHighResTimeStamp,
+  }>,
+}>;
+
 export type FuseboxSetClientMetadataStartedEvent = Readonly<{
   eventName: 'FuseboxSetClientMetadataStarted',
 }>;
@@ -489,12 +525,26 @@ export type StackTraceFrameUrlResolutionFailed = Readonly<{
   }>,
 }>;
 
+export type StackTraceFrameClicked = Readonly<{
+  eventName: 'StackTraceFrameClicked',
+  params: Readonly<{
+    isLinkified: boolean,
+  }>,
+}>;
+
+export type ManualBreakpointSetSucceeded = Readonly<{
+  eventName: 'ManualBreakpointSetSucceeded',
+  params: Readonly<{
+    bpSettingDuration: number,
+  }>,
+}>;
+
 export type ReactNativeChromeDevToolsEvent =
     EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent|
-    BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|
-    DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|FuseboxSetClientMetadataFinishedEvent|
-    MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|PanelClosedEvent|
-    StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
-    StackTraceFrameUrlResolutionFailed;
+    BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourcesStartupLoadingFinishedEvent|
+    DeveloperResourceLoadingStartedEvent|DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|
+    FuseboxSetClientMetadataFinishedEvent|MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|
+    PanelClosedEvent|StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
+    StackTraceFrameUrlResolutionFailed|ManualBreakpointSetSucceeded|StackTraceFrameClicked;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;

front_end/Images/react_native/learn-native-debugging.jpg

@@ -185,13 +185,6 @@ Instance.register({
   enabledByDefault: ({ isReactNativeEntryPoint }) => isReactNativeEntryPoint,
 });
 
-Instance.register({
-  name: RNExperimentName.ENABLE_PERFORMANCE_PANEL,
-  title: 'Enable Performance panel',
-  unstable: true,
-  enabledByDefault: ({ isReactNativeEntryPoint }) => !isReactNativeEntryPoint,
-});
-
 Instance.register({
   name: RNExperimentName.ENABLE_NETWORK_PANEL,
   title: 'Enable Network panel',

front_end/Images/react_native/welcomeIcon.png

@@ -305,7 +305,6 @@ 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_PERFORMANCE_PANEL = 'enable-performance-panel',
   ENABLE_NETWORK_PANEL = 'enable-network-panel',
   ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames',
 }
@@ -342,7 +341,6 @@ 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_PERFORMANCE_PANEL = RNExperimentName.ENABLE_PERFORMANCE_PANEL,
   ENABLE_NETWORK_PANEL = RNExperimentName.ENABLE_NETWORK_PANEL,
   ENABLE_TIMELINE_FRAMES = RNExperimentName.ENABLE_TIMELINE_FRAMES,
 }

front_end/core/host/RNPerfMetrics.ts

@@ -20,6 +20,8 @@ import {
 import type {Target} from './Target.js';
 import {TargetManager} from './TargetManager.js';
 
+const RNDT_STARTUP_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;
+  #rndtStartupResourcesLoadedReported = false;
+  #rndtStartupResourcesLoadedTimeout: number|undefined = undefined;
   #currentlyLoadingPerTarget = new Map<Protocol.Target.TargetID|'main', number>();
   readonly #maxConcurrentLoads: number;
   #pageResources = new Map<string, PageResource>();
@@ -261,6 +265,23 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       await this.acquireLoadSlot(initiator.target);
       const resultPromise = this.dispatchLoad(url, initiator);
       const result = await resultPromise;
+
+      if (!this.#rndtStartupResourcesLoadedReported) {
+        // If, after initial load, no new resources are scheduled for
+        // RNDT_STARTUP_RESOURCES_LOADED_COOLDOWN,
+        // we consider all startup resources to be loaded + settled.
+        window.clearTimeout(this.#rndtStartupResourcesLoadedTimeout);
+        this.#rndtStartupResourcesLoadedTimeout = window.setTimeout(() => {
+          if (!this.#rndtStartupResourcesLoadedReported && this.#currentlyLoading === 0) {
+            Host.rnPerfMetrics.developerResourcesStartupLoadingFinishedEvent(
+              this.getNumberOfResources().resources /* numResources */,
+              performance.now() - RNDT_STARTUP_RESOURCES_LOADED_COOLDOWN /* timeSinceLaunch */,
+            );
+            this.#rndtStartupResourcesLoadedReported = true;
+          }
+        }, RNDT_STARTUP_RESOURCES_LOADED_COOLDOWN);
+      }
+
       pageResource.errorMessage = result.errorDescription.message;
       pageResource.success = result.success;
       if (result.success) {
@@ -354,6 +375,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     }
     Host.rnPerfMetrics.developerResourceLoadingFinished(
         parsedURL, Host.UserMetrics.DeveloperResourceLoaded.FALLBACK_AFTER_FAILURE, result);
+
     return result;
   }
 

front_end/core/rn_experiments/experimentsImpl.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/core/root/Runtime.ts

@@ -72,6 +72,8 @@ export class HeapSnapshotLoader {
   }
 
   async buildSnapshot(secondWorker: MessagePort): Promise<JSHeapSnapshot> {
+    await this.parsingComplete;
+
     this.#snapshot = this.#snapshot || {};
 
     this.#progress.updateStatus('Processing snapshot…');