chrome-devtools-frontend 1.0.1717709 → 1.0.1721762

package/front_end/models/ai_assistance/tools/GetInsightDetails.ts

@@ -6,11 +6,11 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../core/text_utils/text_utils.js';
+import * as AiUtils from '../../ai-utils/ai-utils.js';
 import * as Logs from '../../logs/logs.js';
 import * as Trace from '../../trace/trace.js';
 import type {AiWidget} from '../agents/AiAgent.js';
 import {PerformanceInsightFormatter} from '../data_formatters/PerformanceInsightFormatter.js';
-import {debugLog} from '../debug.js';
 
 import {
   type BaseToolCapability,
@@ -24,6 +24,8 @@ import {
   ToolName,
 } from './Tool.js';
 
+const {debugLog} = AiUtils.Debug;
+
 const lockedString = i18n.i18n.lockedString;
 
 async function getNetworkRequestImageData(

package/front_end/models/ai_assistance/tools/GetSourceContent.ts

@@ -25,20 +25,44 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+/**
+ * Formats offsets in step titles, e.g. 30000 as "30,000". The titles are
+ * locked English strings, so the number uses en-US formatting to match.
+ */
+const offsetFormatter = new Intl.NumberFormat('en-US');
+
 export interface GetSourceContentArgs extends ToolArgs {
   id: number;
+  offset?: number;
+}
+
+/**
+ * Names the file in the step title so that reads of different files, or of
+ * different parts of one file, are distinguishable in the walkthrough. The
+ * lookup does not check the origin lock: an id from an earlier listing can
+ * name a file from another origin. The title is only shown in the local UI and
+ * is not sent to the model, and the handler still rejects reading that file.
+ */
+function titleFromArgs(args: GetSourceContentArgs): string {
+  const fileName = ListSourcesTool.idToUiSourceCode.get(args.id)?.displayName();
+  if (!fileName) {
+    return lockedString(UIStringsNotTranslate.readingSource);
+  }
+  return args.offset ? lockedString(`Reading ${fileName} (offset ${offsetFormatter.format(args.offset)})`) :
+                       lockedString(`Reading ${fileName}`);
 }
 
 /**
  * A tool that retrieves the contents of a source file by its unique ID.
  * Filters access by origin lock to prevent cross-origin leakage.
+ * Long files are returned in parts; `offset` selects which part.
  */
 export class GetSourceContentTool implements
     DataTool<GetSourceContentArgs, {content: string}, BaseToolCapability&OriginLockCapability> {
   readonly name: ToolName = ToolName.GET_SOURCE_CONTENT;
   readonly permissionPrompt: PermissionPrompt = PermissionPrompt.NEVER;
   readonly description: string =
-      'Retrieves the formatted content and metadata of a source file by its numeric ID obtained from listSources.';
+      'Retrieves the formatted content and metadata of a source file by its numeric ID obtained from listSources. Long files are returned in parts. If the result ends with a "Content truncated" notice, call this function again with the same id and the offset given in the notice to read the next part.';
 
   readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetSourceContentArgs> = {
     type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -49,6 +73,12 @@ export class GetSourceContentTool implements
         description: 'The unique numeric ID of the source file to retrieve.',
         nullable: false,
       },
+      offset: {
+        type: Host.AidaClient.ParametersTypes.INTEGER,
+        description:
+            'Character offset to start reading from. Omit to read from the start of the file. Use the offset given in a "Content truncated" notice to read the next part.',
+        nullable: true,
+      },
     },
     required: ['id'],
   };
@@ -58,8 +88,8 @@ export class GetSourceContentTool implements
     action: string,
   } {
     return {
-      title: lockedString(UIStringsNotTranslate.readingSource),
-      action: `getSourceContent(${args.id})`,
+      title: titleFromArgs(args),
+      action: args.offset ? `getSourceContent(${args.id}, ${args.offset})` : `getSourceContent(${args.id})`,
     };
   }
 
@@ -88,11 +118,23 @@ export class GetSourceContentTool implements
       };
     }
 
+    // Validate against the same working copy that FileFormatter slices. Binary
+    // files count as 0 characters so any offset above 0 is rejected, rather than
+    // slicing FileFormatter's '<binary data>' placeholder.
+    const offset = args.offset ?? 0;
+    const workingCopy = file.workingCopyContentData();
+    const contentLength = workingCopy.isTextContent ? workingCopy.text.length : 0;
+    if (!Number.isInteger(offset) || offset < 0 || (offset > 0 && offset >= contentLength)) {
+      return {
+        error: `Invalid offset ${offset}. The file content has ${contentLength} characters.`,
+      };
+    }
+
     const formatter = new FileFormatter(file);
 
     return {
       result: {
-        content: formatter.formatFile(),
+        content: formatter.formatFile({offset}),
       },
     };
   }

package/front_end/models/ai_assistance/tools/GetStorageValues.ts

@@ -49,6 +49,7 @@ export class GetStorageValuesTool implements DataTool<GetStorageValuesArgs, GetS
   readonly name: ToolName = ToolName.GET_STORAGE_VALUES;
   readonly permissionPrompt: PermissionPrompt = PermissionPrompt.ALLOW_ONCE;
   readonly permissionTitle: string = lockedString('Allow reading storage values?');
+  readonly displayName: string = lockedString('Read storage values');
   readonly description: string =
       'Retrieve specific string values from storage partitions for requested keys across origins.';
 

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -330,6 +330,12 @@ export interface BaseTool<ArgsType extends ToolArgs = ToolArgs> {
    * Required for tools that require user permission to run.
    */
   readonly permissionTitle?: string;
+  /**
+   * Short user-facing name of the tool, e.g. "Read cookie values".
+   * Shown in the "Allowed tools" list in Settings.
+   * Required for tools that require user permission to run.
+   */
+  readonly displayName?: string;
   /**
    * JSON schema representing the parameters this tool accepts.
    */

package/front_end/models/breakpoints/BreakpointManager.ts

@@ -330,10 +330,6 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
           enabled, isLogpoint, origin);
 
       if (uiSourceCode === compatibleUiSourceCode) {
-        if (normalizedLocation.id() !== uiLocation.id()) {
-          // Only call this on the uiSourceCode that was initially selected for breakpoint setting.
-          void Common.Revealer.reveal(normalizedLocation);
-        }
         primaryBreakpoint = breakpoint;
       }
     }

package/front_end/models/change_tracker/ChangeTracker.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 import type * as CommentManager from '../comment_manager/comment_manager.js';
 
@@ -26,5 +27,6 @@ export class ChangeTracker {
 
     const thread = this.#commentManager.createCommentThread(anchor, description, 'DEVELOPER', true);
     thread.save();
+    Host.userMetrics.changeRecorded(1);
   }
 }

package/front_end/models/comment_manager/CommentManager.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 
 import {
   type Comment,
@@ -126,6 +127,14 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
         threads.push(thread);
       }
     }
+    const changeCount = threads.filter(thread => thread.isGeneratedComment).length;
+    const commentCount = threads.length - changeCount;
+    if (commentCount > 0) {
+      Host.userMetrics.commentSharedWithAgent(commentCount);
+    }
+    if (changeCount > 0) {
+      Host.userMetrics.changeSharedWithAgent(changeCount);
+    }
     return threads;
   }
 
@@ -142,6 +151,9 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     if (!thread) {
       return false;
     }
+    if (thread.status !== 'RESOLVED') {
+      Host.userMetrics.commentResolved('Agent', 1);
+    }
     thread.resolve(replyText);
     return true;
   }

package/front_end/models/comment_manager/CommentThread.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 
 export interface EditorAnchorSignature {
   /** 1-based line number for CodeMirror text editor anchors */
@@ -37,7 +38,7 @@ export interface CommentAnchorSignature {
   /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
   vePath: string;
   /** Normalized text content of the target node */
-  textSignature: string;
+  textSignature?: string;
   /** Text content of the parent container VE node for sibling disambiguation */
   parentTextSignature?: string;
   /** 0-indexed position among siblings sharing the same visual logging path */
@@ -117,9 +118,25 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return false;
   }
 
+  /**
+   * Records UMA for a developer-authored comment when it leaves the DRAFT state.
+   */
+  #recordCommentCreated(): void {
+    if (this.isGeneratedComment) {
+      return;
+    }
+    const text = this.comments.find(c => c.author === 'DEVELOPER')?.text.trim();
+    if (!text) {
+      return;
+    }
+    Host.userMetrics.commentCreated(1);
+    Host.userMetrics.commentSize(text.length);
+  }
+
   save(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
     let changed = this.#saveText(text, author);
     if (this.status === 'DRAFT') {
+      this.#recordCommentCreated();
       if (this.#savedIndex === undefined) {
         this.#savedIndex = CommentThread.#nextIndex++;
       }
@@ -146,6 +163,9 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   sendToAgent(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
     let changed = this.#saveText(text, author);
+    if (this.status === 'DRAFT') {
+      this.#recordCommentCreated();
+    }
     if (this.status === 'DRAFT' || this.status === 'ACTIVE') {
       if (this.#savedIndex === undefined) {
         this.#savedIndex = CommentThread.#nextIndex++;

package/front_end/models/elements/ChangeTrackingUtils.ts

@@ -0,0 +1,37 @@
+// 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 Platform from '../../core/platform/platform.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import type * as CommentManager from '../comment_manager/comment_manager.js';
+
+/**
+ * Maximum number of characters of page or author controlled data (tag names, attribute names
+ * and values, text node values, HTML, CSS property names/values, and selectors) that a change
+ * description embeds.
+ */
+export const MAX_VALUE_LENGTH = 100;
+
+/** Shortens page or author controlled data so that both its start and end stay recognizable. */
+export function trimValue(value: string): string {
+  return Platform.StringUtilities.trimMiddle(value.trim(), MAX_VALUE_LENGTH);
+}
+
+export function buildAnchor(
+    vePath: string,
+    node: SDK.DOMModel.DOMNode|null,
+    textSignature?: string,
+    ): CommentManager.CommentManager.CommentAnchorSignature {
+  return {
+    vePath,
+    ...(textSignature ? {textSignature} : {}),
+    ...(node ? {
+      node: {
+        backendNodeId: node.backendNodeId(),
+        targetId: node.domModel().target().id(),
+      },
+    } :
+               {}),
+  };
+}

package/front_end/models/elements/DOMChanges.ts

@@ -2,37 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as ChangeTracker from '../change_tracker/change_tracker.js';
-import type * as CommentManager from '../comment_manager/comment_manager.js';
 
-type Tracker = ChangeTracker.ChangeTracker.ChangeTracker|undefined;
-
-/**
- * Maximum number of characters of page controlled data (tag names, attribute names and values,
- * text node values and HTML) that a change description embeds. The inspected page fully controls
- * these strings and `Changed HTML from ... to ...` in particular can otherwise hold on to the
- * entire subtree of an element.
- */
-export const MAX_VALUE_LENGTH = 100;
+import {buildAnchor, trimValue} from './ChangeTrackingUtils.js';
 
-/** Shortens page controlled data so that both its start and its end stay recognizable. */
-function trimValue(value: string): string {
-  return Platform.StringUtilities.trimMiddle(value, MAX_VALUE_LENGTH);
-}
+type Tracker = ChangeTracker.ChangeTracker.ChangeTracker|undefined;
 
-function buildAnchor(node: SDK.DOMModel.DOMNode,
-                     selector = 'element'): CommentManager.CommentManager.CommentAnchorSignature {
-  return {
-    vePath: 'Panel: elements > Tree: elements > TreeItem',
-    textSignature: selector,
-    node: {
-      backendNodeId: node.backendNodeId(),
-      targetId: node.domModel().target().id(),
-    },
-  };
-}
+const DOM_TREE_VE_PATH = 'Panel: elements > Tree: elements > TreeItem';
+const ELEMENT_PLACEHOLDER_TEXT_SIGNATURE = 'element';
 
 /**
  * Parses a raw attribute string (e.g. 'class="btn"', 'data-id=123', or 'disabled')
@@ -165,7 +143,8 @@ export function trackAttributeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode,
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeAttributeEdit(edit), buildAnchor(node, selector));
+  tracker.trackChange(describeAttributeEdit(edit),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackTagNameEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -173,7 +152,8 @@ export function trackTagNameEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, s
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeTagNameEdit(oldTagName, newTagName), buildAnchor(node, selector));
+  tracker.trackChange(describeTagNameEdit(oldTagName, newTagName),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackTextNodeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -181,14 +161,16 @@ export function trackTextNodeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode,
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeTextNodeEdit(oldText, newText), buildAnchor(node, selector));
+  tracker.trackChange(describeTextNodeEdit(oldText, newText),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackNodeRemoval(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeNodeRemoval(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+  tracker.trackChange(describeNodeRemoval(node.nodeName().toLowerCase()),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackHTMLEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -196,7 +178,8 @@ export function trackHTMLEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, sele
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeHTMLEdit(oldValue, newValue), buildAnchor(node, selector));
+  tracker.trackChange(describeHTMLEdit(oldValue, newValue),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackVisibilityToggle(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -204,14 +187,16 @@ export function trackVisibilityToggle(tracker: Tracker, node: SDK.DOMModel.DOMNo
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeVisibilityToggle(node.nodeName().toLowerCase(), hidden), buildAnchor(node, selector));
+  tracker.trackChange(describeVisibilityToggle(node.nodeName().toLowerCase(), hidden),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackNodeDuplication(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeNodeDuplication(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+  tracker.trackChange(describeNodeDuplication(node.nodeName().toLowerCase()),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackNodeMove(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -219,14 +204,16 @@ export function trackNodeMove(tracker: Tracker, node: SDK.DOMModel.DOMNode, sele
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeNodeMove(node.nodeName().toLowerCase(), directionUp), buildAnchor(node, selector));
+  tracker.trackChange(describeNodeMove(node.nodeName().toLowerCase(), directionUp),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackNodeDrop(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeNodeDrop(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+  tracker.trackChange(describeNodeDrop(node.nodeName().toLowerCase()),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }
 
 export function trackNodePaste(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
@@ -234,5 +221,6 @@ export function trackNodePaste(tracker: Tracker, node: SDK.DOMModel.DOMNode, sel
   if (!tracker?.isTracking) {
     return;
   }
-  tracker.trackChange(describeNodePaste(node.nodeName().toLowerCase(), isCut), buildAnchor(node, selector));
+  tracker.trackChange(describeNodePaste(node.nodeName().toLowerCase(), isCut),
+                      buildAnchor(DOM_TREE_VE_PATH, node, selector ?? ELEMENT_PLACEHOLDER_TEXT_SIGNATURE));
 }

package/front_end/models/elements/StyleChanges.ts

@@ -0,0 +1,97 @@
+// 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 Platform from '../../core/platform/platform.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import type * as ChangeTracker from '../change_tracker/change_tracker.js';
+
+import {buildAnchor, trimValue} from './ChangeTrackingUtils.js';
+
+const STYLES_PANE_VE_PATH = 'Panel: elements > Pane: styles';
+
+function formatRuleSuffix(preposition: 'in'|'to'|'from', ruleHeader?: string): string {
+  const trimmedRule = ruleHeader ? Platform.StringUtilities.collapseWhitespace(ruleHeader.trim()) : '';
+  return trimmedRule ? ` ${preposition} rule "${trimValue(trimmedRule)}"` : '';
+}
+
+export interface StylePropertyEdit {
+  /** Rule header or selector containing the property (e.g. 'element.style' or '.btn:hover'). */
+  ruleHeader?: string;
+  /** Property name before the edit, or an empty string when a new property is added. */
+  oldName: string;
+  /** Property value before the edit (including '!important' if present). */
+  oldValue: string;
+  /** Committed property name, or an empty string when the property is removed. */
+  newName: string;
+  /** Committed property value (including '!important' if present). */
+  newValue: string;
+}
+
+export interface StylePropertyToggle {
+  /** Rule header or selector containing the property (e.g. 'element.style' or '.btn:hover'). */
+  ruleHeader?: string;
+  name: string;
+  value: string;
+  /** Whether the property is now disabled. */
+  disabled: boolean;
+}
+
+/**
+ * These strings are for consumption by AI agents and do not need to be translated.
+ */
+function describeStylePropertyEdit({ruleHeader, oldName, oldValue, newName, newValue}: StylePropertyEdit): string {
+  if (!newName) {
+    return `Removed style property "${trimValue(oldName)}: ${trimValue(oldValue)}"${
+        formatRuleSuffix('from', ruleHeader)}`;
+  }
+
+  if (!oldName) {
+    return `Added style property "${trimValue(newName)}: ${trimValue(newValue)}"${formatRuleSuffix('to', ruleHeader)}`;
+  }
+
+  if (oldName !== newName) {
+    return `Changed style property from "${trimValue(oldName)}: ${trimValue(oldValue)}" to "${trimValue(newName)}: ${
+        trimValue(newValue)}"${formatRuleSuffix('in', ruleHeader)}`;
+  }
+
+  return `Changed style property "${trimValue(newName)}" from "${trimValue(oldValue)}" to "${trimValue(newValue)}"${
+      formatRuleSuffix('in', ruleHeader)}`;
+}
+
+function describeStylePropertyToggle({ruleHeader, name, value, disabled}: StylePropertyToggle): string {
+  const action = disabled ? 'Disabled' : 'Enabled';
+  return `${action} style property "${trimValue(name)}: ${trimValue(value)}"${formatRuleSuffix('in', ruleHeader)}`;
+}
+
+export function trackStylePropertyEdit(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    edit: StylePropertyEdit,
+    ): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  const oldName = edit.oldName.trim();
+  const oldValue = edit.oldValue.trim();
+  const newName = edit.newName.trim();
+  const newValue = edit.newValue.trim();
+  if (oldName === newName && oldValue === newValue) {
+    return;
+  }
+  tracker.trackChange(
+      describeStylePropertyEdit({ruleHeader: edit.ruleHeader, oldName, oldValue, newName, newValue}),
+      buildAnchor(STYLES_PANE_VE_PATH, node),
+  );
+}
+
+export function trackStylePropertyToggle(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    toggle: StylePropertyToggle,
+    ): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeStylePropertyToggle(toggle), buildAnchor(STYLES_PANE_VE_PATH, node));
+}

package/front_end/models/elements/elements.ts

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

package/front_end/models/emulation/DeviceModeModel.ts

@@ -918,6 +918,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     try {
       const screenshot = await screenCaptureModel.captureScreenshot(
           Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
+
+      if (screenshot !== null) {
+        void Platform.HostRuntime.HOST_RUNTIME
+            .copyScreenshot({
+              base64Png: screenshot,
+              fileName: this.getScreenshotFileName(),
+            })
+            .then(() => {
+              this.dispatchEventToListeners(Events.SCREENSHOT_COPIED);
+            })
+            .catch(() => {
+              this.dispatchEventToListeners(Events.SCREENSHOT_COPY_FAILED);
+            });
+      }
+
       return screenshot;
     } finally {
       await this.#emulationModel?.emulateDevice(null);
@@ -1173,10 +1188,14 @@ export class Rect {
 
 export const enum Events {
   UPDATED = 'Updated',
+  SCREENSHOT_COPIED = 'ScreenshotCopied',
+  SCREENSHOT_COPY_FAILED = 'ScreenshotCopyFailed',
 }
 
 export interface EventTypes {
   [Events.UPDATED]: void;
+  [Events.SCREENSHOT_COPIED]: void;
+  [Events.SCREENSHOT_COPY_FAILED]: void;
 }
 
 export enum Type {

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -6409,7 +6409,13 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "openWindow",
-    signatures: [["url"]]
+    signatures: [["url"]],
+    receivers: ["Clients"]
+  },
+  {
+    name: "openWindow",
+    signatures: [["url","?options"]],
+    receivers: ["PaymentRequestEvent"]
   },
   {
     name: "waitUntil",
@@ -8471,6 +8477,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "executeTool",
     signatures: [["tool","?inputObject","?options"]]
   },
+  {
+    name: "resumeTool",
+    signatures: [["token","callback"]]
+  },
   {
     name: "TaskController",
     signatures: [["?init"]]

package/front_end/models/trace/EventsSerializer.ts

@@ -24,6 +24,21 @@ export class EventsSerializer {
     }
 
     const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
+
+    if (Types.Events.isSyntheticLayoutShiftCluster(event)) {
+      // A cluster has no raw event of its own, so it is keyed by the raw event
+      // of its first layout shift.
+      const firstShift = event.events.at(0);
+      if (!firstShift) {
+        return null;
+      }
+      const firstShiftIndex = rawEvents.indexOf(firstShift.rawSourceEvent);
+      if (firstShiftIndex === -1) {
+        return null;
+      }
+      return `${Types.File.EventKeyType.LAYOUT_SHIFT_CLUSTER}-${firstShiftIndex}`;
+    }
+
     const isSynthetic = Types.Events.isSyntheticBased(event);
     const index = rawEvents.indexOf(isSynthetic ? event.rawSourceEvent : event);
     if (index === -1) {
@@ -54,6 +69,20 @@ export class EventsSerializer {
       return event;
     }
 
+    if (EventsSerializer.isLayoutShiftClusterKey(eventValues)) {
+      const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
+      const firstShiftRawEvent = rawEvents.at(eventValues.rawIndex);
+      const cluster = parsedTrace.data.LayoutShifts.clusters.find(cluster => {
+        const firstShift = cluster.events.at(0);
+        return firstShift !== undefined && firstShift.rawSourceEvent === firstShiftRawEvent;
+      });
+      if (!cluster) {
+        throw new Error(
+            `Unknown trace event. Could not find layout shift cluster with first shift index ${eventValues.rawIndex}`);
+      }
+      return cluster;
+    }
+
     if (EventsSerializer.isSyntheticEventKey(eventValues)) {
       const syntheticEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getSyntheticTraces();
       const syntheticEvent = syntheticEvents.at(eventValues.rawIndex);
@@ -79,6 +108,10 @@ export class EventsSerializer {
     return key.type === Types.File.EventKeyType.LEGACY_TIMELINE_FRAME;
   }
 
+  static isLayoutShiftClusterKey(key: Types.File.SerializableKeyValues): key is Types.File.LayoutShiftClusterKeyValues {
+    return key.type === Types.File.EventKeyType.LAYOUT_SHIFT_CLUSTER;
+  }
+
   static isRawEventKey(key: Types.File.SerializableKeyValues): key is Types.File.RawEventKeyValues {
     return key.type === Types.File.EventKeyType.RAW_EVENT;
   }
@@ -86,8 +119,8 @@ export class EventsSerializer {
     return key.type === Types.File.EventKeyType.SYNTHETIC_EVENT;
   }
 
-  #getModifiedProfileCallByKeyValues(key: Types.File.ProfileCallKeyValues, parsedTrace: ParsedTrace):
-      Types.Events.SyntheticProfileCall {
+  #getModifiedProfileCallByKeyValues(key: Types.File.ProfileCallKeyValues,
+                                     parsedTrace: ParsedTrace): Types.Events.SyntheticProfileCall {
     const cacheResult = this.#modifiedProfileCallByKey.get(key);
     if (cacheResult) {
       return cacheResult;