chrome-devtools-frontend 1.0.1695017 → 1.0.1696961

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -942,23 +942,23 @@ The following images could be optimized:
 ### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg (eventKey: s-1212, ts: 59728701403)
 - Potential savings: 1.1 MB
 - Optimizations:
-Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image’s download size. (Est 1.1 MB)
+Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image’s download size (Est 1.1 MB)
 
 ### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif (eventKey: s-1216, ts: 59728702014)
 - Potential savings: 682 kB
 - Optimizations:
-Using video formats instead of GIFs can improve the download size of animated content. (Est 682 kB)
+Using video formats instead of GIFs can improve the download size of animated content (Est 682 kB)
 
 ### https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png (eventKey: s-1228, ts: 59728702737)
 - Potential savings: 176 kB
 - Optimizations:
-Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image’s download size. (Est 134.1 kB)
+Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image’s download size (Est 134.1 kB)
 This image file is larger than it needs to be (640x436) for its displayed dimensions (200x136). Use responsive images to reduce the image download size. (Est 162.9 kB)
 
 ### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp (eventKey: s-1224, ts: 59728702313)
 - Potential savings: 49.8 kB
 - Optimizations:
-Increasing the image compression factor could improve this image’s download size. (Est 49.8 kB)
+Increasing the image compression factor could improve this image’s download size (Est 49.8 kB)
 
 ### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp (eventKey: s-1226, ts: 59728702539)
 - Potential savings: 41.4 kB
@@ -1258,7 +1258,7 @@ The webpage is not optimized for mobile viewing.
 
 The viewport meta tag is missing.
 
-Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile.
+Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile
 
 ## Estimated savings: none
 

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -351,7 +351,7 @@ Available insights:
     example question: Help me optimize my CLS score
     example question: How can I prevent layout shifts on this page?
   - insight name: NetworkDependencyTree
-    description: [Avoid chaining critical requests](https://developer.chrome.com/docs/performance/insights/network-dependency-tree) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
+    description: [Avoid chaining critical requests](https://developer.chrome.com/docs/performance/insights/network-dependency-tree) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load
     relevant trace bounds: {min: 157423489126µs, max: 157426527569µs}
     example question: How do I optimize my network dependency tree?
   - insight name: ImageDelivery
@@ -498,7 +498,7 @@ Available insights:
     example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: LCPDiscovery
-    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading.
+    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading
     relevant trace bounds: {min: 59728656735µs, max: 59729209036µs}
     example question: Suggest fixes to reduce my LCP
     example question: What can I do to reduce my LCP discovery time?
@@ -516,7 +516,7 @@ Available insights:
     example question: How do I decrease the initial loading time of my page?
     example question: Did anything slow down the request for this document?
   - insight name: Viewport
-    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile.
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile
     relevant trace bounds: {min: 59728649746µs, max: 59734400108µs}
     estimated metric savings: INP 0 ms
     example question: How do I make sure my page is optimized for mobile viewing?
@@ -582,7 +582,7 @@ Available insights:
     example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: LCPDiscovery
-    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading.
+    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading
     relevant trace bounds: {min: 59728656735µs, max: 59729209036µs}
     example question: Suggest fixes to reduce my LCP
     example question: What can I do to reduce my LCP discovery time?
@@ -600,7 +600,7 @@ Available insights:
     example question: How do I decrease the initial loading time of my page?
     example question: Did anything slow down the request for this document?
   - insight name: Viewport
-    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile.
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile
     relevant trace bounds: {min: 59728649746µs, max: 59734400108µs}
     estimated metric savings: INP 0 ms
     example question: How do I make sure my page is optimized for mobile viewing?
@@ -635,7 +635,7 @@ Metrics (lab / observed):
 Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: INPBreakdown
-    description: Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.
+    description: Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart
     relevant trace bounds: {min: 337944870984µs, max: 337945010222µs}
     example question: Suggest fixes for my longest interaction
     example question: Why is a large INP score problematic?

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

@@ -6,7 +6,6 @@ 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 type * as Protocol from '../../../generated/protocol.js';
-import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
   type BaseToolCapability,
@@ -82,9 +81,6 @@ export class GetElementAccessibilityDetailsTool implements
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
       ): Promise<DataHandlerResult<string>> {
     const establishedOrigin = context.getEstablishedOrigin();
-    if (!establishedOrigin || establishedOrigin.isOpaque()) {
-      return {error: 'Error: Origin lock is not established.'};
-    }
 
     const target = context.getTarget();
     if (!target) {
@@ -100,13 +96,14 @@ export class GetElementAccessibilityDetailsTool implements
       return {error: 'Error: Could not resolve element by ID.'};
     }
 
-    const nodeContext = new DOMNodeContext(resolved);
     // Security check: Ensure the element matches the active conversation's origin lock.
-    if (!isOriginAllowedByLock(establishedOrigin, nodeContext.getOrigin())) {
-      return {error: 'Error: Node does not belong to the locked origin.'};
+    // Because getTarget() returns the primary page target to support resolving elements
+    // across frames, origin validation must be enforced directly on the resolved node.
+    if (!isOriginAllowedByLock(establishedOrigin, resolved.securityOrigin())) {
+      return {error: 'Error: Node does not belong to the current origin.'};
     }
 
-    const axModel = target.model(SDK.AccessibilityModel.AccessibilityModel);
+    const axModel = resolved.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
     if (!axModel) {
       return {error: 'Error: Accessibility model not found.'};
     }

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

@@ -79,13 +79,6 @@ export class GetNetworkRequestDetailsTool implements
     // We only allow inspecting requests matching the conversation's established origin.
     const establishedOrigin = context.getEstablishedOrigin();
 
-    // Opaque origins are never allowed to be used as context.
-    if (!establishedOrigin || establishedOrigin.isOpaque()) {
-      return {
-        error: 'Opaque origin not allowed',
-      };
-    }
-
     // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     const networkLog = this.#networkLog ?? Logs.NetworkLog.NetworkLog.instance();
     const request = networkLog.requests().find(req => {
@@ -97,7 +90,10 @@ export class GetNetworkRequestDetailsTool implements
       return isOriginAllowedByLock(establishedOrigin, req.initiatorSecurityOrigin());
     });
 
-    if (!request) {
+    // If establishedOrigin is undefined or opaque, isOriginAllowedByLock() fails closed,
+    // so find() will never return a request. We check establishedOrigin here as a defensive
+    // guard and to narrow the type for NetworkRequestFormatter below.
+    if (!establishedOrigin || !request) {
       return {
         error: 'No request found',
       };

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

@@ -5,7 +5,6 @@
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../core/text_utils/text_utils.js';
-import {FileContext} from '../contexts/FileContext.js';
 import {FileFormatter} from '../data_formatters/FileFormatter.js';
 
 import {ListSourcesTool} from './ListSources.js';
@@ -13,7 +12,6 @@ import {
   type BaseToolCapability,
   type DataHandlerResult,
   type DataTool,
-  isOriginAllowedByLock,
   type OriginLockCapability,
   type ToolArgs,
   ToolName,
@@ -67,9 +65,13 @@ export class GetSourceContentTool implements
       context: BaseToolCapability&OriginLockCapability,
       ): Promise<DataHandlerResult<{content: string}>> {
     const establishedOrigin = context.getEstablishedOrigin();
-    const file = ListSourcesTool.getUISourceCodes()
-                     .filter(f => isOriginAllowedByLock(establishedOrigin, FileContext.originForUISourceCode(f)))
-                     .find(f => ListSourcesTool.uiSourceCodeId.get(f) === args.id);
+    if (!establishedOrigin) {
+      return {
+        error: 'Unable to find file.',
+      };
+    }
+
+    const file = ListSourcesTool.getSourceById(args.id, establishedOrigin);
 
     if (!file) {
       return {

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

@@ -6,7 +6,6 @@ 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 {ComputedStyleAiWidget, FunctionHandlerOptions} from '../agents/AiAgent.js';
-import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
   type BaseToolCapability,
@@ -78,6 +77,12 @@ export class GetStylesTool implements
     };
   }
 
+  /**
+   * Handles the request to retrieve computed and authored CSS styles for specified elements.
+   *
+   * Resolves element backend node IDs using the primary page target and verifies that each
+   * element's security origin matches the established origin lock before querying CSS models.
+   */
   async handler(
       params: GetStylesArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
@@ -93,9 +98,6 @@ export class GetStylesTool implements
     }
 
     const establishedOrigin = context.getEstablishedOrigin();
-    if (!establishedOrigin || establishedOrigin.isOpaque()) {
-      return {error: 'Error: Origin lock is not established.'};
-    }
 
     for (const uid of params.elements) {
       result[uid] = {computed: {}, authored: {}};
@@ -104,8 +106,10 @@ export class GetStylesTool implements
       if (!resolved) {
         return {error: 'Error: Could not find the element with uid=' + uid};
       }
-      const newContext = new DOMNodeContext(resolved);
-      if (!isOriginAllowedByLock(establishedOrigin, newContext.getOrigin())) {
+      // Security check: Ensure the resolved element belongs to the locked origin.
+      // Because getTarget() returns the primary page target to support resolving elements
+      // across frames, origin validation must be enforced directly on the resolved node.
+      if (!isOriginAllowedByLock(establishedOrigin, resolved.securityOrigin())) {
         return {error: 'Error: Node does not belong to the current origin.'};
       }
       const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);

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

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Workspace from '../../workspace/workspace.js';
 import {FileContext} from '../contexts/FileContext.js';
 
@@ -46,9 +47,15 @@ export class ListSourcesTool implements
     ListSourcesTool.uiSourceCodeId = new WeakMap();
   }
 
-  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-  static getUISourceCodes(workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance()):
-      Workspace.UISourceCode.UISourceCode[] {
+  static getUISourceCodes(
+      establishedOrigin: SDK.SecurityOrigin.SecurityOrigin,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
+      ): Workspace.UISourceCode.UISourceCode[] {
+    if (establishedOrigin.isOpaque()) {
+      return [];
+    }
+
     const projects =
         workspace.projects().filter(project => project.type() === Workspace.Workspace.projectTypes.Network);
     const uiSourceCodes = new Map<string, Workspace.UISourceCode.UISourceCode>();
@@ -68,7 +75,21 @@ export class ListSourcesTool implements
       }
     }
 
-    return [...uiSourceCodes.values()];
+    return [...uiSourceCodes.values()].filter(
+        file => isOriginAllowedByLock(establishedOrigin, FileContext.originForUISourceCode(file)));
+  }
+
+  static getSourceById(
+      id: number,
+      establishedOrigin: SDK.SecurityOrigin.SecurityOrigin,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
+      ): Workspace.UISourceCode.UISourceCode|undefined {
+    if (establishedOrigin.isOpaque()) {
+      return undefined;
+    }
+    return ListSourcesTool.getUISourceCodes(establishedOrigin, workspace)
+        .find(file => ListSourcesTool.uiSourceCodeId.get(file) === id);
   }
 
   readonly parameters: Host.AidaClient.FunctionObjectParam<never> = {
@@ -100,9 +121,7 @@ export class ListSourcesTool implements
       };
     }
 
-    const files = ListSourcesTool.getUISourceCodes().filter(file => {
-      return isOriginAllowedByLock(establishedOrigin, FileContext.originForUISourceCode(file));
-    });
+    const files = ListSourcesTool.getUISourceCodes(establishedOrigin);
 
     return {
       result: {

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

@@ -4,7 +4,6 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
   type BaseToolCapability,
@@ -85,11 +84,6 @@ export class ResolveDevtoolsNodePathTool implements DataTool<ResolveDevtoolsNode
       params: ResolveDevtoolsNodePathArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
       ): Promise<DataHandlerResult<{backendNodeId: number}>> {
-    const establishedOrigin = context.getEstablishedOrigin();
-    if (!establishedOrigin || establishedOrigin.isOpaque()) {
-      return {error: 'Error: Origin lock is not established.'};
-    }
-
     const target = context.getTarget();
     const domModel = target?.model(SDK.DOMModel.DOMModel);
     if (!domModel) {
@@ -102,7 +96,8 @@ export class ResolveDevtoolsNodePathTool implements DataTool<ResolveDevtoolsNode
       // and ensures the node is loaded into the frontend DOM model, returning its ID.
       nodeId = await domModel.pushNodeByPathToFrontend(params.path);
     } catch {
-      // pushNodeByPathToFrontend can fail or return undefined
+      // pushNodeByPathToFrontend throws when the path is invalid or the node cannot be found.
+      // Swallow the error here so execution falls through to the structured error response below.
     }
     if (!nodeId) {
       return {error: 'Error: Could not find node by path.'};
@@ -113,11 +108,11 @@ export class ResolveDevtoolsNodePathTool implements DataTool<ResolveDevtoolsNode
       return {error: 'Error: Could not retrieve resolved node.'};
     }
 
-    const nodeContext = new DOMNodeContext(node);
+    const establishedOrigin = context.getEstablishedOrigin();
     // Security check: Ensure the resolved node belongs to the same origin
     // that this AI assistance session is locked to, preventing cross-origin access.
-    if (!isOriginAllowedByLock(establishedOrigin, nodeContext.getOrigin())) {
-      return {error: 'Error: Node does not belong to the locked origin.'};
+    if (!isOriginAllowedByLock(establishedOrigin, node.securityOrigin())) {
+      return {error: 'Error: Node does not belong to the current origin.'};
     }
 
     return {

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

@@ -106,7 +106,14 @@ export interface StyleMutationCapability {
  */
 export interface TargetCapability {
   /**
-   * Returns the current SDK Target for the inspected page.
+   * Returns the primary SDK Target for the inspected page.
+   *
+   * WARNING: This method does not perform a security origin check. When a conversation
+   * is locked to an iframe or subframe origin, this still returns the primary page target
+   * so tools can resolve DOM nodes and frame hierarchies across frames.
+   *
+   * Tools that consume this target must independently validate the security origin of
+   * any resolved entities (e.g. via `node.securityOrigin()`) against `getEstablishedOrigin()`.
    */
   getTarget(): SDK.Target.Target|null;
 }

package/front_end/models/bindings/FileUtils.ts

@@ -16,7 +16,7 @@ export interface ChunkedReader {
 
   cancel(): void;
 
-  error(): DOMError|null;
+  error(): DOMException|Error|null;
 }
 
 export class ChunkedFileReader implements ChunkedReader {
@@ -26,12 +26,11 @@ export class ChunkedFileReader implements ChunkedReader {
   #streamReader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>|null;
   readonly #chunkSize: number;
   readonly #chunkTransferredCallback: ((arg0: ChunkedReader) => void)|undefined;
-  readonly #decoder: TextDecoder;
+  readonly #decoder = new TextDecoder();
   #isCanceled: boolean;
   #error: DOMException|null;
   #transferFinished!: (arg0: boolean) => void;
   #output?: Common.StringOutputStream.OutputStream;
-  #reader?: FileReader|null;
 
   constructor(file: File, chunkSize?: number, chunkTransferredCallback?: ((arg0: ChunkedReader) => void)) {
     this.#file = file;
@@ -39,7 +38,6 @@ export class ChunkedFileReader implements ChunkedReader {
     this.#loadedSize = 0;
     this.#chunkSize = (chunkSize) ? chunkSize : Number.MAX_VALUE;
     this.#chunkTransferredCallback = chunkTransferredCallback;
-    this.#decoder = new TextDecoder();
     this.#isCanceled = false;
     this.#error = null;
     this.#streamReader = null;
@@ -54,10 +52,6 @@ export class ChunkedFileReader implements ChunkedReader {
       const fileStream = this.#file.stream();
       const stream = Common.Gzip.decompressStream(fileStream);
       this.#streamReader = stream.getReader();
-    } else {
-      this.#reader = new FileReader();
-      this.#reader.onload = this.onChunkLoaded.bind(this);
-      this.#reader.onerror = this.onError.bind(this);
     }
 
     this.#output = output;
@@ -91,26 +85,6 @@ export class ChunkedFileReader implements ChunkedReader {
     return this.#error;
   }
 
-  private onChunkLoaded(event: Event): void {
-    if (this.#isCanceled) {
-      return;
-    }
-
-    const eventTarget = (event.target as FileReader);
-    if (eventTarget.readyState !== FileReader.DONE) {
-      return;
-    }
-
-    if (!this.#reader) {
-      return;
-    }
-
-    const buffer = (this.#reader.result as ArrayBuffer);
-    this.#loadedSize += buffer.byteLength;
-    const endOfFile = this.#loadedSize === this.#fileSize;
-    void this.decodeChunkBuffer(buffer, endOfFile);
-  }
-
   private async decodeChunkBuffer(buffer: ArrayBuffer, endOfFile: boolean): Promise<void> {
     if (!this.#output) {
       return;
@@ -136,7 +110,6 @@ export class ChunkedFileReader implements ChunkedReader {
       return;
     }
     this.#file = null;
-    this.#reader = null;
     await this.#output.close();
     this.#transferFinished(!this.#error);
   }
@@ -153,19 +126,24 @@ export class ChunkedFileReader implements ChunkedReader {
         return await this.finishRead();
       }
       void this.decodeChunkBuffer(value.buffer, false);
+      return;
     }
-    if (this.#reader) {
-      const chunkStart = this.#loadedSize;
-      const chunkEnd = Math.min(this.#fileSize, chunkStart + this.#chunkSize);
-      const nextPart = this.#file.slice(chunkStart, chunkEnd);
-      this.#reader.readAsArrayBuffer(nextPart);
-    }
-  }
 
-  private onError(event: Event): void {
-    const eventTarget = (event.target as FileReader);
-    this.#error = eventTarget.error;
-    this.#transferFinished(false);
+    const chunkStart = this.#loadedSize;
+    const chunkEnd = Math.min(this.#fileSize, chunkStart + this.#chunkSize);
+    const nextPart = this.#file.slice(chunkStart, chunkEnd);
+    try {
+      const buffer = await nextPart.arrayBuffer();
+      if (this.#isCanceled) {
+        return;
+      }
+      this.#loadedSize += buffer.byteLength;
+      const endOfFile = this.#loadedSize === this.#fileSize;
+      void this.decodeChunkBuffer(buffer, endOfFile);
+    } catch (error) {
+      this.#error = error as DOMException;
+      this.#transferFinished(false);
+    }
   }
 }
 

package/front_end/models/bindings/TempFile.ts

@@ -38,23 +38,16 @@ export class TempFile {
         this.#lastBlob.slice((startOffset as number), (endOffset as number)) :
         this.#lastBlob;
 
-    const reader = new FileReader();
     try {
-      await new Promise((resolve, reject) => {
-        reader.onloadend = resolve;
-        reader.onerror = reject;
-        reader.readAsText(blob);
-      });
+      return await blob.text();
     } catch (error) {
-      this.#console.error('Failed to read from temp file: ' + error.message);
+      this.#console.error('Failed to read from temp file: ' + (error as Error).message);
+      return null;
     }
-
-    return reader.result as string | null;
   }
 
-  async copyToOutputStream(
-      outputStream: Common.StringOutputStream.OutputStream,
-      progress?: ((arg0: ChunkedReader) => void)): Promise<DOMError|null> {
+  async copyToOutputStream(outputStream: Common.StringOutputStream.OutputStream,
+                           progress?: ((arg0: ChunkedReader) => void)): Promise<DOMException|Error|null> {
     if (!this.#lastBlob) {
       void outputStream.close();
       return null;

package/front_end/models/comment_manager/CommentManager.ts

@@ -18,6 +18,21 @@ export interface DOMNodeAnchorSignature {
   targetId: string;
 }
 
+export interface TimelineAnchorSignature {
+  /** Identifier of the trace to scope comments to a specific recording */
+  traceId: string;
+  /** Serializable key from Trace.EventsSerializer (e.g. 'r-123', 'p-1-2-3-4', 's-5') */
+  traceEventKey: string;
+  /** Primary event title or category name */
+  entryName: string;
+  /** Event start timestamp in microseconds */
+  startTimeMicro: number;
+  /** Chart location */
+  chartLocation: 'main'|'network';
+  /** Event duration in microseconds (omitted for instant markers) */
+  durationMicro?: number;
+}
+
 export interface CommentAnchorSignature {
   /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
   vePath: string;
@@ -33,6 +48,8 @@ export interface CommentAnchorSignature {
   node?: DOMNodeAnchorSignature;
   /** Optional editor anchor coordinates for CodeMirror text editors */
   editor?: EditorAnchorSignature;
+  /** Optional timeline flamechart anchor coordinates for Performance panel trace entries */
+  timeline?: TimelineAnchorSignature;
 }
 
 export interface Comment {
@@ -41,13 +58,19 @@ export interface Comment {
   timestamp: number;
 }
 
+export interface ChangeRecord {
+  id: string;
+  description: string;
+  timestamp: number;
+}
+
 export interface CommentThread {
   id: string;
   anchor: CommentAnchorSignature;
   comments: Comment[];
   status: 'ACTIVE'|'RESOLVED';
   transmitted?: boolean;
-  changes?: Array<Record<string, unknown>>;
+  changes?: ChangeRecord[];
   index: number;
 }
 
@@ -83,21 +106,22 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   createCommentThread(
       anchor: CommentAnchorSignature,
-      text: string,
+      text?: string,
       author: 'DEVELOPER'|'AGENT' = 'DEVELOPER',
-      changes?: Array<Record<string, unknown>>,
+      changes?: ChangeRecord[],
       ): CommentThread {
     const index = this.#nextId++;
     const id = `comment-${index}`;
-    const comment: Comment = {
+    const comments: Comment[] = text ? [{
       author,
       text,
       timestamp: Date.now(),
-    };
+    }] :
+                                       [];
     const thread: CommentThread = {
       id,
       anchor,
-      comments: [comment],
+      comments,
       status: 'ACTIVE',
       transmitted: false,
       changes,

package/front_end/models/crux-manager/CrUXManager.ts

@@ -12,7 +12,7 @@ const UIStrings = {
   /**
    * @description Warning message indicating that the user will see real user data for a URL which is different from the URL they are currently looking at.
    */
-  fieldOverrideWarning: 'Field metrics are for a different URL than the current page.',
+  fieldOverrideWarning: 'Field metrics are for a different URL than the current page',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/crux-manager/CrUXManager.ts', UIStrings);
@@ -366,18 +366,21 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (response.status === 404) {
       // This is how CrUX tells us that there is not data available for the provided url/origin
       // Since it's a valid response, just return null instead of throwing an error.
-      if (responseData?.error?.status === 'NOT_FOUND') {
-        return null;
+      if (typeof responseData === 'object' && responseData && 'error' in responseData) {
+        const error = (responseData as {error?: {status?: string}}).error;
+        if (error?.status === 'NOT_FOUND') {
+          return null;
+        }
       }
 
       throw new Error(`Failed to fetch data from CrUX server (Status code: ${response.status})`);
     }
 
-    if (!('record' in responseData)) {
+    if (typeof responseData !== 'object' || !responseData || !('record' in responseData)) {
       throw new Error(`Failed to find data in CrUX response: ${JSON.stringify(responseData)}`);
     }
 
-    return responseData;
+    return responseData as CrUXResponse;
   }
 
   #getAutoDeviceScope(): DeviceScope {