chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/models/comment_manager/CD4ABridge.ts

@@ -0,0 +1,128 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import type * as Logs from '../logs/logs.js';
+
+import * as CommentManager from './CommentManager.js';
+
+export interface CommentThread {
+  id: string;
+  text: string;
+  networkRequestId?: string;
+  backendNodeId?: number;
+  editor?: CommentManager.EditorAnchorSignature;
+}
+
+export interface RevealTarget {
+  networkRequestId?: string;
+  backendNodeId?: number;
+}
+
+export const enum Events {
+  COMMENT_THREADS_CHANGED = 'CommentThreadsChanged',
+}
+
+export interface EventTypes {
+  [Events.COMMENT_THREADS_CHANGED]: void;
+}
+
+/**
+ * Headless model bridge connecting DevTools comments subsystem to CD4A.
+ * Provides serialization, transmission state tracking, and element reveal capabilities.
+ */
+export class CD4ABridge extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly #commentManager: CommentManager.CommentManager;
+  readonly #targetManager?: SDK.TargetManager.TargetManager;
+  readonly #networkLog?: Logs.NetworkLog.NetworkLog;
+  readonly #inspectorFrontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI;
+  readonly #eventListeners: Common.EventTarget.EventDescriptor[];
+
+  constructor(
+      commentManager: CommentManager.CommentManager,
+      targetManager?: SDK.TargetManager.TargetManager,
+      networkLog?: Logs.NetworkLog.NetworkLog,
+      inspectorFrontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI =
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+  ) {
+    super();
+    this.#commentManager = commentManager;
+    this.#targetManager = targetManager;
+    this.#networkLog = networkLog;
+    this.#inspectorFrontendHost = inspectorFrontendHost;
+
+    this.#eventListeners = [
+      this.#commentManager.addEventListener(
+          CommentManager.Events.COMMENT_THREADS_CHANGED,
+          () => {
+            this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED);
+          },
+          ),
+    ];
+  }
+
+  dispose(): void {
+    Common.EventTarget.removeEventListeners(this.#eventListeners);
+  }
+
+  getCommentThreads(): CommentThread[] {
+    const threads = this.#commentManager.takeComments();
+    return threads.map(thread => {
+      const threadPayload: CommentThread = {
+        id: thread.id,
+        text: thread.comments[0]?.text ?? '',
+      };
+      if (thread.anchor.networkRequestId) {
+        threadPayload.networkRequestId = thread.anchor.networkRequestId;
+      }
+      if (thread.anchor.node) {
+        threadPayload.backendNodeId = thread.anchor.node.backendNodeId;
+      }
+      if (thread.anchor.editor) {
+        threadPayload.editor = thread.anchor.editor;
+      }
+      return threadPayload;
+    });
+  }
+
+  takeComments(): CommentThread[] {
+    return this.getCommentThreads();
+  }
+
+  resolveCommentThread(threadId: string, replyText?: string): boolean {
+    return this.#commentManager.resolveCommentThread(threadId, replyText);
+  }
+
+  async reveal(panelName: string, target?: RevealTarget): Promise<void> {
+    if (panelName) {
+      this.#inspectorFrontendHost.events.dispatchEventToListeners(
+          Host.InspectorFrontendHostAPI.Events.ShowPanel,
+          panelName,
+      );
+    }
+
+    if (target?.networkRequestId && this.#networkLog) {
+      const [request] = this.#networkLog.requestsForId(target.networkRequestId);
+      if (request) {
+        await Common.Revealer.reveal(request);
+      }
+    }
+
+    if (target?.backendNodeId !== undefined && this.#targetManager) {
+      const primaryTarget = this.#targetManager.primaryPageTarget();
+      const domModel = primaryTarget?.model(SDK.DOMModel.DOMModel);
+      if (domModel) {
+        const cdpNodeId = target.backendNodeId as Protocol.DOM.BackendNodeId;
+        const nodeMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([cdpNodeId]));
+        const node = nodeMap?.get(cdpNodeId);
+        if (node) {
+          await Common.Revealer.reveal(node);
+        }
+      }
+    }
+  }
+}

package/front_end/models/comment_manager/CommentManager.ts

@@ -11,6 +11,13 @@ export interface EditorAnchorSignature {
   filePath?: string;
 }
 
+export interface DOMNodeAnchorSignature {
+  /** Backend NodeId for DOM nodes (`data-backend-node-id`) */
+  backendNodeId: number;
+  /** Target ID associated with the DOM node (`data-target-id`) */
+  targetId: string;
+}
+
 export interface CommentAnchorSignature {
   /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
   vePath: string;
@@ -22,8 +29,8 @@ export interface CommentAnchorSignature {
   siblingIndex?: number;
   /** Optional backend RequestId for Network panel elements (`data-network-request-id`) */
   networkRequestId?: string;
-  /** Optional backend NodeId for Elements panel DOM nodes (`data-backend-node-id`) */
-  backendNodeId?: number;
+  /** Optional DOM node identifiers (`data-backend-node-id`, `data-target-id`) */
+  node?: DOMNodeAnchorSignature;
   /** Optional editor anchor coordinates for CodeMirror text editors */
   editor?: EditorAnchorSignature;
 }
@@ -39,7 +46,9 @@ export interface CommentThread {
   anchor: CommentAnchorSignature;
   comments: Comment[];
   status: 'ACTIVE'|'RESOLVED';
+  transmitted?: boolean;
   changes?: Array<Record<string, unknown>>;
+  index: number;
 }
 
 export const enum Events {
@@ -78,17 +87,21 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
       author: 'DEVELOPER'|'AGENT' = 'DEVELOPER',
       changes?: Array<Record<string, unknown>>,
       ): CommentThread {
-    const id = `comment-${this.#nextId++}`;
+    const index = this.#nextId++;
+    const id = `comment-${index}`;
+    const comment: Comment = {
+      author,
+      text,
+      timestamp: Date.now(),
+    };
     const thread: CommentThread = {
       id,
       anchor,
-      comments: [{
-        author,
-        text,
-        timestamp: Date.now(),
-      }],
+      comments: [comment],
       status: 'ACTIVE',
+      transmitted: false,
       changes,
+      index,
     };
 
     this.#commentThreads.set(id, thread);
@@ -104,6 +117,35 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     return Array.from(this.#commentThreads.values());
   }
 
+  takeComments(): CommentThread[] {
+    const threads: CommentThread[] = [];
+    for (const thread of this.#commentThreads.values()) {
+      if (!thread.transmitted) {
+        thread.transmitted = true;
+        threads.push(thread);
+      }
+    }
+    return threads;
+  }
+
+  resolveCommentThread(threadId: string, replyText?: string): boolean {
+    const thread = this.#commentThreads.get(threadId);
+    if (!thread) {
+      return false;
+    }
+    if (replyText && replyText.trim().length > 0) {
+      const comment: Comment = {
+        author: 'AGENT',
+        text: replyText.trim(),
+        timestamp: Date.now(),
+      };
+      thread.comments.push(comment);
+    }
+    thread.status = 'RESOLVED';
+    this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
+    return true;
+  }
+
   removeCommentThread(id: string): void {
     if (!this.#commentThreads.has(id)) {
       return;

package/front_end/models/comment_manager/comment_manager.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CD4ABridge from './CD4ABridge.js';
 import * as CommentManager from './CommentManager.js';
 
 export {
+  CD4ABridge,
   CommentManager,
 };

package/front_end/models/emulation/DeviceModeModel.ts

@@ -8,10 +8,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../geometry/geometry.js';
-import * as Workspace from '../workspace/workspace.js';
 
 import {
   type Cutout,
@@ -128,19 +126,17 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #settings: Common.Settings.Settings;
   readonly #multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager;
-  readonly #fileManager: Workspace.FileManager.FileManager;
+  #lastScreenshotBlobUrl: string|null = null;
 
   constructor(
       targetManager: SDK.TargetManager.TargetManager,
       settings: Common.Settings.Settings,
       multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager,
-      fileManager: Workspace.FileManager.FileManager,
   ) {
     super();
     this.#targetManager = targetManager;
     this.#settings = settings;
     this.#multitargetNetworkManager = multitargetNetworkManager;
-    this.#fileManager = fileManager;
     this.#screenRect = new Rect(0, 0, 1, 1);
     this.#visiblePageRect = new Rect(0, 0, 1, 1);
     this.#availableSize = new Geometry.Size(1, 1);
@@ -209,8 +205,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
               Common.Settings.Settings.instance(),
               // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.NetworkManager.MultitargetNetworkManager.instance(),
-              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-              Workspace.FileManager.FileManager.instance(),
               ));
     }
 
@@ -241,6 +235,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   dispose(): void {
     this.#targetManager.unobserveModels(SDK.EmulationModel.EmulationModel, this);
+    this.#revokeLastScreenshotBlobUrl();
   }
 
   static widthValidator(value: string): {
@@ -357,6 +352,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (type !== Type.None) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.DeviceModeEnabled);
+    } else {
+      this.#revokeLastScreenshotBlobUrl();
     }
     this.calculateAndEmulate(resetPageScaleFactor);
   }
@@ -499,7 +496,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
-        resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameChange, this);
+        resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameNavigated, this);
       }
     } else {
       void emulationModel.emulateTouch(this.#touchEnabled, this.#touchMobile);
@@ -511,8 +508,14 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       emulationModel.removeEventListener(
           SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
           this);
+      const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+      if (resourceTreeModel) {
+        resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
+        resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameNavigated, this);
+      }
       this.#emulationModel = null;
       this.#screenOrientationLocked = false;
+      this.#revokeLastScreenshotBlobUrl();
       this.dispatchEventToListeners(Events.UPDATED);
     }
   }
@@ -530,6 +533,13 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.showDeviceOverlaysIfApplicable(overlayModel);
   }
 
+  private onFrameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
+    if (event.data.isMainFrame()) {
+      this.#revokeLastScreenshotBlobUrl();
+    }
+    this.onFrameChange();
+  }
+
   private onScreenOrientationLockChanged(
       event: Common.EventTarget.EventTargetEvent<SDK.EmulationModel.ScreenOrientationLockChangedEvent>): void {
     this.#screenOrientationLocked = event.data.locked;
@@ -934,54 +944,34 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
   }
 
-  private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
+  async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
     const url = this.inspectedURL();
-    let baseName = '';
+    let fileName = '';
     if (url) {
-      const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-      if (parsedURL) {
-        const host = parsedURL.host;
-        const path = parsedURL.path.replace(/^\/+/, '').replace(/\/+$/, '');
-        baseName = host;
-        if (path) {
-          baseName += '-' + path.replaceAll('/', '-');
-        }
-        baseName = baseName.replace(/[^a-z0-9._-]/gi, '_');
-      }
-    }
-
-    if (!baseName) {
-      baseName = 'screenshot';
+      const withoutFragment = Platform.StringUtilities.removeURLFragment(url);
+      fileName = Platform.StringUtilities.trimURL(withoutFragment);
     }
 
-    let suffix = '';
     const device = this.device();
     if (device && this.type() === Type.Device) {
-      suffix += `(${device.title})`;
+      fileName += `(${device.title})`;
     }
-    suffix += '.png';
-
-    // The Windows save dialog / Chrome wrapper limits the suggested filename
-    // to 63 characters (due to a 64-byte null-terminated buffer).
-    // Capping the total filename length at 63 avoids truncation of the extension.
-    const maxBaseNameLength = Math.max(0, 63 - suffix.length);
-    baseName = Platform.StringUtilities.truncateToCodeUnitLength(baseName, maxBaseNameLength);
+    this.#revokeLastScreenshotBlobUrl();
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    const link = document.createElement('a');
+    link.download = fileName + '.png';
+    const blob = await canvas.convertToBlob({type: 'image/png'});
+    const blobUrl = URL.createObjectURL(blob);
+    this.#lastScreenshotBlobUrl = blobUrl;
+    link.href = blobUrl;
+    link.click();
+  }
 
-    let fileName = baseName + suffix;
-    if (fileName.length > 63) {
-      fileName = Platform.StringUtilities.truncateToCodeUnitLength(fileName, 59) + '.png';
+  #revokeLastScreenshotBlobUrl(): void {
+    if (this.#lastScreenshotBlobUrl) {
+      URL.revokeObjectURL(this.#lastScreenshotBlobUrl);
+      this.#lastScreenshotBlobUrl = null;
     }
-    const blob = await canvas.convertToBlob({type: 'image/png'});
-    const dataUrl = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-    const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
-    const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
-    await this.#fileManager.save(fileName as Platform.DevToolsPath.RawPathString, contentData, /* forceSaveAs=*/ true);
-    this.#fileManager.close(fileName as Platform.DevToolsPath.RawPathString);
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -6662,7 +6662,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "WebSocket",
-    signatures: [["url","?protocols"]]
+    signatures: [["url","?protocolsOrOptions"]]
   },
   {
     name: "WebSocketError",
@@ -6812,6 +6812,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "provokingVertexWEBGL",
     signatures: [["provokeMode"]]
   },
+  {
+    name: "drawingBufferToneMapping",
+    signatures: [["?toneMapping"]]
+  },
   {
     name: "texElementImage2D",
     signatures: [["target","internalformat","element","?config"]]
@@ -8734,6 +8738,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "CanvasPaintEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "ElementGeometryUpdateEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "captureElementImage",
     signatures: [["element"]]

package/front_end/models/live-metrics/web-vitals-injected/README.md

@@ -2,4 +2,4 @@
 
 [`web-vitals`](https://github.com/GoogleChrome/web-vitals) is a Google-maintained library that measures CWV metrics using their canonical definition. We use it to ensure we are using consistent implementations for measuring CWV across Google. It can also measure performance metrics of the current page *after* the they happen (See [`PerformanceObserver` buffered setting](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe#buffered)). See [go/cpq:rpp-metric-observations](http://go/cpq:rpp-metric-observations) for more information.
 
-The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` and `rollup.config.mjs` for how we bundle the JS binary.
+The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` for how we bundle the JS binary.

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -385,11 +385,12 @@ export const resolveScopeChain =
           //    2) We have a chrome feature flag.
 
           if (callFrame.script.isWasm()) {
-            return callFrame.scopeChain();
+            return callFrame.scopeChain().filter(scope => !scope.empty());
           }
           const thisObject = await resolveThisObject(callFrame, debuggerWorkspaceBinding);
-          return callFrame.scopeChain().map(
-              scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
+          const scopes = callFrame.scopeChain().filter(scope => !scope.empty() ||
+                                                           scope.type() === Protocol.Debugger.ScopeType.Local);
+          return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
 /**
@@ -411,7 +412,7 @@ export const allVariablesInCallFrame = async(
         return cachedMap;
       }
 
-      const scopeChain = callFrame.scopeChain();
+      const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
       const nameMappings =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
       const reverseMapping = new Map<string, string|null>();
@@ -485,12 +486,13 @@ export const resolveThisObject = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding:
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<SDK.RemoteObject.RemoteObject|null> => {
-  const scopeChain = callFrame.scopeChain();
-  if (scopeChain.length === 0) {
+  const innermostScope =
+      callFrame.scopeChain().find(scope => !scope.empty() || scope.type() === Protocol.Debugger.ScopeType.Local);
+  if (!innermostScope) {
     return callFrame.thisObject();
   }
 
-  const {thisMapping} = await resolveDebuggerScope(scopeChain[0], debuggerWorkspaceBinding);
+  const {thisMapping} = await resolveDebuggerScope(innermostScope, debuggerWorkspaceBinding);
   if (!thisMapping) {
     return callFrame.thisObject();
   }

package/front_end/models/trace/ModelImpl.ts

@@ -110,6 +110,8 @@ export class Model extends EventTarget {
       }
       const file = this.#storeAndCreateParsedTraceFile(
           syntheticEventsManager, traceEvents, metadata, this.#processor.data, this.#processor.insights);
+      // Reclaim memory used by the temporary event-to-index lookup map now that trace parsing is complete.
+      syntheticEventsManager.clearRegistrationIndex();
       // We only push the file onto this.#traces here once we know it's valid
       // and there's been no errors in the parsing.
       this.#traces.push(file);

package/front_end/models/trace/Processor.ts

@@ -208,7 +208,7 @@ export class TraceProcessor extends EventTarget {
     // Handle each event.
     for (let i = 0; i < traceEvents.length; ++i) {
       // Every so often we take a break just to render.
-      if (i % eventsPerChunk === 0 && i) {
+      if (options.yieldToMain !== false && i % eventsPerChunk === 0 && i) {
         // Take the opportunity to provide status update events.
         const percent = calculateProgress(i / traceEvents.length, ProgressPhase.HANDLE_EVENT);
         this.dispatchEvent(new TraceParseProgressEvent({percent}));
@@ -233,9 +233,11 @@ export class TraceProcessor extends EventTarget {
       const [name, handler] = sortedHandlers[i];
       if (handler.finalize) {
         options.logger?.start(`parse:${name}:finalize`);
-        // Yield to the UI because finalize() calls can be expensive
-        // TODO(jacktfranklin): consider using `scheduler.yield()` or `scheduler.postTask(() => {}, {priority: 'user-blocking'})`
-        await new Promise(resolve => setTimeout(resolve, 0));
+        if (options.yieldToMain !== false) {
+          // Yield to the UI because finalize() calls can be expensive
+          // TODO(jacktfranklin): consider using `scheduler.yield()` or `scheduler.postTask(() => {}, {priority: 'user-blocking'})`
+          await new Promise(resolve => setTimeout(resolve, 0));
+        }
         await handler.finalize(finalizeOptions);
         options.logger?.end(`parse:${name}:finalize`);
       }

package/front_end/models/trace/handlers/LayerTreeHandler.ts

@@ -62,9 +62,9 @@ export async function finalize(): Promise<void> {
       updateLayerEvents.push(event);
     } else if (Types.Events.isPaint(event)) {
       if (!event.args.data.layerId) {
-        // Note that this check purposefully includes excluding an event with a layerId of 0.
-        // 0 indicates that this paint was for a subframe - we do not want these
-        // as we only care about paints for top level frames.
+        // A layerId of 0 means that this event cannot be associated with a
+        // compositor layer. This includes modern Paint duration events and
+        // older Paint events for subframes.
         continue;
       }
       paintEvents.push(event);

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -37,7 +37,7 @@ import type {HandlerName} from './types.js';
 // score for the given recording, and almost certainly not the
 // navigation-to-unload CLS score.
 
-interface LayoutShiftsData {
+export interface LayoutShiftsData {
   clusters: readonly Types.Events.SyntheticLayoutShiftCluster[];
   sessionMaxScore: number;
   // The session window which contains the SessionMaxScore

package/front_end/models/trace/helpers/SyntheticEvents.ts

@@ -54,13 +54,35 @@ export class SyntheticEventsManager {
     this.#rawTraceEvents = rawEvents;
   }
 
+  #rawEventIndexes: Map<Types.Events.Event, number>|null = null;
+
+  #getRawEventIndex(event: Types.Events.Event): number {
+    if (!this.#rawEventIndexes) {
+      this.#rawEventIndexes = new Map();
+      for (let i = 0; i < this.#rawTraceEvents.length; i++) {
+        this.#rawEventIndexes.set(this.#rawTraceEvents[i], i);
+      }
+    }
+    return this.#rawEventIndexes.get(event) ?? -1;
+  }
+
+  /**
+   * Clears the transient raw event index map.
+   * During trace parsing, this map provides O(1) lookups for registering synthetic events.
+   * Once parsing is complete, queries look up synthetic events exclusively by index in
+   * `#syntheticTraces`, so this map is discarded to reclaim memory.
+   */
+  clearRegistrationIndex(): void {
+    this.#rawEventIndexes = null;
+  }
+
   /**
    * Registers and returns a branded synthetic event. Synthetic events need to
    * be created with this method to ensure they are registered and made
    * available to load events using serialized keys.
    */
   #registerSyntheticEvent<T extends Types.Events.SyntheticBased>(syntheticEvent: Omit<T, '_tag'>): T {
-    const rawIndex = this.#rawTraceEvents.indexOf(syntheticEvent.rawSourceEvent);
+    const rawIndex = this.#getRawEventIndex(syntheticEvent.rawSourceEvent);
     if (rawIndex < 0) {
       throw new Error('Attempted to register a synthetic event paired to an unknown raw event.');
     }

package/front_end/models/trace/types/Configuration.ts

@@ -73,6 +73,13 @@ export interface ParseOptions {
    * @default false
    */
   isFreshRecording?: boolean;
+  /**
+   * Whether the processor should yield to the main thread during parsing to keep the UI responsive.
+   * This should always remain enabled in production to prevent blocking the UI, but can be disabled
+   * in unit tests to speed up test execution.
+   * @default true
+   */
+  yieldToMain?: boolean;
   /**
    * If the trace is a CPU Profile rather than a Chrome tracing trace.
    * @default false

package/front_end/models/trace/types/TraceEvents.ts

@@ -2628,8 +2628,8 @@ export function isUpdateLayer(event: Event): event is UpdateLayer {
   return event.name === Name.UPDATE_LAYER;
 }
 
-export interface DisplayItemListSnapshot extends Event {
-  name: Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+export interface LegacyDisplayItemListSnapshot extends Event {
+  name: Name.LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT;
   ph: Phase.OBJECT_SNAPSHOT;
   id2: {
     local?: string,
@@ -2638,14 +2638,29 @@ export interface DisplayItemListSnapshot extends Event {
     snapshot: {
       skp64: string,
       params?: {
+        layer_rect: [number, number, number, number],
+      },
+    },
+  };
+}
 
+export interface InstantDisplayItemListSnapshot extends Instant {
+  name: Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+  args: Args&{
+    snapshot: {
+      skp64: string,
+      params?: {
         layer_rect: [number, number, number, number],
       },
     },
   };
 }
+
+export type DisplayItemListSnapshot = LegacyDisplayItemListSnapshot|InstantDisplayItemListSnapshot;
+
 export function isDisplayListItemListSnapshot(event: Event): event is DisplayItemListSnapshot {
-  return event.name === Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+  return (event.name === Name.LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT && event.ph === Phase.OBJECT_SNAPSHOT) ||
+      (event.name === Name.DISPLAY_ITEM_LIST_SNAPSHOT && event.ph === Phase.INSTANT);
 }
 
 export interface LayerTreeHostImplSnapshot extends Event {
@@ -3246,7 +3261,8 @@ export const enum Name {
   LAZY_PIXEL_REF = 'LazyPixelRef',
   LAYER_TREE_HOST_IMPL_SNAPSHOT = 'cc::LayerTreeHostImpl',
   PICTURE_SNAPSHOT = 'cc::Picture',
-  DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList',
+  LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList',
+  DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList:snapshot',
   INPUT_LATENCY_MOUSE_MOVE = 'InputLatency::MouseMove',
   INPUT_LATENCY_MOUSE_WHEEL = 'InputLatency::MouseWheel',
   IMPL_SIDE_FLING = 'InputHandlerProxy::HandleGestureFling::started',