chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -7,7 +7,7 @@ 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 Protocol from '../../generated/protocol.js';
-import type * as StackTrace from '../stack_trace/stack_trace.js';
+import * as StackTrace from '../stack_trace/stack_trace.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
@@ -20,7 +20,12 @@ import {type LiveLocation, type LiveLocationPool, LiveLocationWithPool} from './
 import {NetworkProject} from './NetworkProject.js';
 import type {ResourceMapping} from './ResourceMapping.js';
 import {type ResourceScriptFile, ResourceScriptMapping} from './ResourceScriptMapping.js';
-import {SymbolizedError} from './SymbolizedError.js';
+import {
+  type SymbolizedError,
+  SymbolizedErrorObject,
+  SymbolizedSyntaxError,
+  UnparsableError
+} from './SymbolizedError.js';
 
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly resourceMapping: ResourceMapping;
@@ -206,7 +211,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
 
   async createStackTraceFromErrorStackLikeString(
       target: SDK.Target.Target, stack: string,
-      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<StackTrace.StackTrace.ParsedErrorStackTrace> {
+      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<StackTrace.StackTrace.ParsedErrorStackTrace|null> {
     const model =
         target.model(StackTraceImpl.StackTraceModel.StackTraceModel) as StackTraceImpl.StackTraceModel.StackTraceModel;
     const stackTracePromise =
@@ -215,24 +220,54 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     return await stackTracePromise;
   }
 
-  async createSymbolizedError(remoteObject: SDK.RemoteObject.RemoteObject): Promise<SymbolizedError|null> {
-    if (remoteObject.subtype !== 'error') {
+  async createSymbolizedError(
+      remoteObject: SDK.RemoteObject.RemoteObject,
+      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<SymbolizedError|null> {
+    let errorStack = '';
+    let causeRemoteObject: SDK.RemoteObject.RemoteObject|undefined;
+    let fetchedExceptionDetails = exceptionDetails;
+
+    if (remoteObject.subtype === 'error') {
+      const remoteError = SDK.RemoteObject.RemoteError.objectAsError(remoteObject);
+      errorStack = remoteError.errorStack;
+
+      const [details, causeRemote] = await Promise.all([
+        exceptionDetails ? Promise.resolve(exceptionDetails) : remoteError.exceptionDetails(),
+        remoteError.cause(),
+      ]);
+      fetchedExceptionDetails = details;
+      causeRemoteObject = causeRemote;
+
+      if (remoteObject.className === 'SyntaxError' && fetchedExceptionDetails) {
+        const syntaxError = await SymbolizedSyntaxError.fromExceptionDetails(
+            remoteObject.runtimeModel().target(), this, fetchedExceptionDetails);
+        if (syntaxError) {
+          return syntaxError;
+        }
+      }
+    } else if (remoteObject.type === 'string') {
+      errorStack = remoteObject.description || '';
+    } else {
       return null;
     }
 
-    const remoteError = SDK.RemoteObject.RemoteError.objectAsError(remoteObject);
-    const [exceptionDetails, causeRemoteObject] = await Promise.all([
-      remoteError.exceptionDetails(),
-      remoteError.cause(),
-    ]);
-
     const [stackTrace, cause] = await Promise.all([
       this.createStackTraceFromErrorStackLikeString(
-          remoteObject.runtimeModel().target(), remoteError.errorStack, exceptionDetails),
+          remoteObject.runtimeModel().target(), errorStack, fetchedExceptionDetails),
       causeRemoteObject ? this.createSymbolizedError(causeRemoteObject) : Promise.resolve(null),
     ]);
 
-    return new SymbolizedError(remoteError, stackTrace, cause);
+    const issueSummary = fetchedExceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      errorStack = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(errorStack, issueSummary);
+    }
+
+    if (!stackTrace) {
+      return new UnparsableError(errorStack, cause);
+    }
+
+    const message = StackTraceImpl.DetailedErrorStackParser.parseMessage(errorStack);
+    return new SymbolizedErrorObject(message, stackTrace, cause);
   }
 
   async createLiveLocation(

package/front_end/models/bindings/SymbolizedError.ts

@@ -2,19 +2,106 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as SDK from '../../core/sdk/sdk.js';
-import type * as StackTrace from '../stack_trace/stack_trace.js';
+import * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as StackTrace from '../stack_trace/stack_trace.js';
+import type * as Workspace from '../workspace/workspace.js';
 
-export class SymbolizedError {
-  readonly remoteError: SDK.RemoteObject.RemoteError;
+import type {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
+import {type LiveLocation, LiveLocationPool} from './LiveLocation.js';
+
+export type SymbolizedError = SymbolizedErrorObject|SymbolizedSyntaxError|UnparsableError;
+
+export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly errorStack: string;
+  readonly cause: SymbolizedError|null;
+
+  constructor(errorStack: string, cause: SymbolizedError|null) {
+    super();
+    this.errorStack = errorStack;
+    this.cause = cause;
+  }
+}
+
+export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly message: string;
   readonly stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace;
   readonly cause: SymbolizedError|null;
 
-  constructor(
-      remoteError: SDK.RemoteObject.RemoteError, stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace,
-      cause: SymbolizedError|null) {
-    this.remoteError = remoteError;
+  constructor(message: string, stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace, cause: SymbolizedError|null) {
+    super();
+    this.message = message;
     this.stackTrace = stackTrace;
     this.cause = cause;
+
+    this.stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.#fireUpdated, this);
+    this.cause?.addEventListener(Events.UPDATED, this.#fireUpdated, this);
+  }
+
+  dispose(): void {
+    this.stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.#fireUpdated, this);
+    this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
+    if (this.cause instanceof SymbolizedErrorObject) {
+      this.cause.dispose();
+    }
+  }
+
+  #fireUpdated(): void {
+    this.dispatchEventToListeners(Events.UPDATED);
   }
 }
+
+export class SymbolizedSyntaxError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly message: string;
+  #uiLocation: Workspace.UISourceCode.UILocation|null = null;
+
+  constructor(message: string) {
+    super();
+    this.message = message;
+  }
+
+  get uiLocation(): Workspace.UISourceCode.UILocation|null {
+    return this.#uiLocation;
+  }
+
+  static async fromExceptionDetails(
+      target: SDK.Target.Target, debuggerWorkspaceBinding: DebuggerWorkspaceBinding,
+      exceptionDetails: Protocol.Runtime.ExceptionDetails): Promise<SymbolizedSyntaxError|null> {
+    const {exception, scriptId, lineNumber, columnNumber} = exceptionDetails;
+    if (!exception || exception.subtype !== 'error' || exception.className !== 'SyntaxError') {
+      throw new Error('SymbolizedSyntaxError.fromExceptionDetails expects a SyntaxError');
+    }
+    if (!scriptId) {
+      return null;
+    }
+
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    if (!debuggerModel) {
+      return null;
+    }
+
+    const rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber);
+    const symbolizedSyntaxError = new SymbolizedSyntaxError(exception.description || '');
+
+    // We don't implement dispose here. We won't create many of these so a couple
+    // LiveLocationPools and SymbolizedSyntaxError instances leaking is fine.
+    await debuggerWorkspaceBinding.createLiveLocation(
+        rawLocation, symbolizedSyntaxError.#update.bind(symbolizedSyntaxError), new LiveLocationPool());
+
+    return symbolizedSyntaxError;
+  }
+
+  async #update(liveLocation: LiveLocation): Promise<void> {
+    this.#uiLocation = await liveLocation.uiLocation();
+    this.dispatchEventToListeners(Events.UPDATED);
+  }
+}
+
+export const enum Events {
+  UPDATED = 'UPDATED',
+}
+
+export interface EventTypes {
+  [Events.UPDATED]: void;
+}

package/front_end/models/emulation/DeviceModeModel.ts

@@ -634,7 +634,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
                                         Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
           resetPageScaleFactor);
-      this.applyUserAgent(mobile ? defaultMobileUserAgent : '', mobile ? defaultMobileUserAgentMetadata : null);
+      this.applyUserAgent(
+          mobile ? DeviceModeModel.defaultMobileUserAgent() : '',
+          mobile ? DeviceModeModel.defaultMobileUserAgentMetadata() : null);
       this.applyTouch(
           this.#uaSetting.get() === UA.DESKTOP_TOUCH || this.#uaSetting.get() === UA.MOBILE,
           this.#uaSetting.get() === UA.MOBILE);
@@ -872,6 +874,45 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       maskLength: (this.#mode.orientation === VerticalSpanned) ? hinge.width : hinge.height,
     };
   }
+
+  /**
+   * Heuristic to keep the default mobile User Agent fresh and aligned with the adoption bell curve.
+   * Android: We target N-1 versions (where N is the latest) to represent the plurality of global users.
+   * iOS: We follow the calendar year (starting from the 2025 shift to year-based versioning).
+   * Data sources:
+   * - StatCounter Global Stats: https://gs.statcounter.com/os-version-market-share/android
+   * - Android adoption typically lags by ~12-18 months for plurality.
+   * - iOS adoption typically reaches majority within ~3-6 months.
+   */
+  static getDynamicMobileUA(): {userAgent: string, metadata: Protocol.Emulation.UserAgentMetadata} {
+    const now = new Date();
+    const year = now.getFullYear();
+    const isLateInYear = now.getMonth() >= 9;  // Oct, Nov, Dec
+
+    // Android: Released in late summer/fall. plurality is usually Year - 2011 (e.g. Android 15 in early 2026).
+    const androidVersion = isLateInYear ? (year - 2010) : (year - 2011);
+    const pixelModel = isLateInYear ? (year - 2016) : (year - 2017);
+
+    const ua = `Mozilla/5.0 (Linux; Android ${androidVersion}; Pixel ${
+        pixelModel}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36`;
+    const metadata = {
+      platform: 'Android',
+      platformVersion: androidVersion.toString(),
+      architecture: '',
+      model: `Pixel ${pixelModel}`,
+      mobile: true,
+    };
+    return {userAgent: ua, metadata};
+  }
+
+  static defaultMobileUserAgent(): string {
+    return SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(
+        DeviceModeModel.getDynamicMobileUA().userAgent);
+  }
+
+  static defaultMobileUserAgentMetadata(): Protocol.Emulation.UserAgentMetadata {
+    return DeviceModeModel.getDynamicMobileUA().metadata;
+  }
 }
 
 export class Insets {
@@ -937,16 +978,4 @@ export const MinDeviceScaleFactor = 0;
 export const MaxDeviceScaleFactor = 10;
 export const MaxDeviceNameLength = 50;
 
-const mobileUserAgent =
-    'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36';
-const defaultMobileUserAgent =
-    SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(mobileUserAgent);
-
-const defaultMobileUserAgentMetadata = {
-  platform: 'Android',
-  platformVersion: '6.0',
-  architecture: '',
-  model: 'Nexus 5',
-  mobile: true,
-};
 export const defaultMobileScaleFactor = 2;

package/front_end/models/emulation/EmulatedDevices.ts

@@ -793,7 +793,7 @@ const emulatedDevices = [
     'user-agent':
         'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
     'user-agent-metadata':
-        {'platform': 'Android', 'platformVersion': '13', 'architecture': '', 'model': 'Pixel 5', 'mobile': true},
+        {'platform': 'Android', 'platformVersion': '13', 'architecture': '', 'model': 'Pixel 7', 'mobile': true},
     'type': 'phone',
   },
   {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -435,12 +435,11 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     // In case a user wants to hide a specific issue, the issue code is added to "code" section
     // of our setting and its value is set to IssueStatus.Hidden. Then issue then gets hidden.
     if (values?.[code]) {
-      if (values[code] === IssueStatus.HIDDEN) {
-        issue.setHidden(true);
-        return;
+      const isHidden = values[code] === IssueStatus.HIDDEN;
+      if (issue.isHidden() !== isHidden) {
+        issue.setHidden(isHidden);
+        this.dispatchEventToListeners(Events.ISSUE_HIDDEN_STATUS_UPDATED, {issue});
       }
-      issue.setHidden(false);
-      return;
     }
   }
 
@@ -471,7 +470,10 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   unhideAllIssues(): void {
     for (const issue of this.#allIssues.values()) {
-      issue.setHidden(false);
+      if (issue.isHidden()) {
+        issue.setHidden(false);
+        this.dispatchEventToListeners(Events.ISSUE_HIDDEN_STATUS_UPDATED, {issue});
+      }
     }
     this.hideIssueSetting?.set(defaultHideIssueByCodeSetting());
   }
@@ -486,10 +488,15 @@ export interface IssueAddedEvent {
   issue: Issue;
 }
 
+export interface IssueHiddenStatusUpdatedEvent {
+  issue: Issue;
+}
+
 export interface EventTypes {
   [Events.ISSUES_COUNT_UPDATED]: void;
   [Events.FULL_UPDATE_REQUIRED]: void;
   [Events.ISSUE_ADDED]: IssueAddedEvent;
+  [Events.ISSUE_HIDDEN_STATUS_UPDATED]: IssueHiddenStatusUpdatedEvent;
 }
 
 // @ts-expect-error

package/front_end/models/issues_manager/IssuesManagerEvents.ts

@@ -6,4 +6,5 @@ export const enum Events {
   ISSUES_COUNT_UPDATED = 'IssuesCountUpdated',
   ISSUE_ADDED = 'IssueAdded',
   FULL_UPDATE_REQUIRED = 'FullUpdateRequired',
+  ISSUE_HIDDEN_STATUS_UPDATED = 'IssueHiddenStatusUpdated',
 }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -8339,7 +8339,7 @@ export const NativeFunctions = [
   },
   {
     name: "setConstraints",
-    signatures: [["constraints"]]
+    signatures: [["?constraints"]]
   },
   {
     name: "createContext",
@@ -9353,7 +9353,7 @@ export const NativeFunctions = [
   },
   {
     name: "copyElementImageToTexture",
-    signatures: [["source","destination"],["source","width","height","destination"],["source","sx","sy","swidth","sheight","destination"]]
+    signatures: [["source","destination"],["source","width","height","destination"],["source","sx","sy","swidth","sheight","destination"],["source","sx","sy","swidth","sheight","width","height","destination"]]
   },
   {
     name: "multiDrawIndirect",

package/front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -251,6 +251,7 @@ function initialize(): void {
   }, {
     reportAllChanges: true,
     durationThreshold: 0,
+    includeProcessedEventEntries: false,
     onEachInteraction,
     generateTarget(el) {
       if (el) {

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -8,19 +8,34 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import type {RawFrame} from './Trie.js';
 
+const CALL_FRAME_REGEX = /^\s*at\s+/;
+
 /**
  * Takes a V8 Error#stack string and extracts structured information.
+ *
+ * @returns Null if the provided string has an unexpected format. A
+ *          populated `RawFrame[]` otherwise.
  */
-export function parseRawFramesFromErrorStack(stack: string): RawFrame[] {
+export function parseRawFramesFromErrorStack(stack: string): RawFrame[]|null {
   const lines = stack.split('\n');
+  const firstAtLineIndex = findFramesStartLine(lines);
   const rawFrames: RawFrame[] = [];
-  for (const line of lines) {
-    const match = /^\s*at\s+(.*)/.exec(line);
+
+  if (firstAtLineIndex === -1) {
+    return rawFrames;
+  }
+
+  for (let i = firstAtLineIndex; i < lines.length; ++i) {
+    const line = lines[i];
+    const match = CALL_FRAME_REGEX.exec(line);
     if (!match) {
-      continue;
+      if (line.trim() === '') {
+        continue;
+      }
+      return null;
     }
 
-    let lineContent = match[1];
+    let lineContent = line.substring(match[0].length);
     let isAsync = false;
     if (lineContent.startsWith('async ')) {
       isAsync = true;
@@ -71,15 +86,17 @@ export function parseRawFramesFromErrorStack(stack: string): RawFrame[] {
         if (innerOpenParen !== -1) {
           evalFunctionName = evalOriginStr.substring(0, innerOpenParen).trim();
           evalLocation = evalOriginStr.substring(innerOpenParen + 2, evalOriginStr.length - 1);
-          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName} (${evalLocation})`)[0];
+          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName} (${evalLocation})`)?.[0];
         } else {
-          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName}`)[0];
+          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName}`)?.[0];
         }
       }
 
       if (location.startsWith('index ')) {
         promiseIndex = parseInt(location.substring(6), 10);
         url = '';
+      } else if (location === '<anonymous>' || location === 'native') {
+        url = '';
       } else if (location.includes(':wasm-function[')) {
         isWasm = true;
         const wasmMatch = /^(.*):wasm-function\[(\d+)\]:(0x[0-9a-fA-F]+)$/.exec(location);
@@ -142,6 +159,20 @@ export function parseRawFramesFromErrorStack(stack: string): RawFrame[] {
   return rawFrames;
 }
 
+function findFramesStartLine(lines: string[]): number {
+  return lines.findIndex(line => CALL_FRAME_REGEX.test(line));
+}
+
+export function parseMessage(stack: string): string {
+  const lines = stack.split('\n');
+  const firstAtLineIndex = findFramesStartLine(lines);
+
+  if (firstAtLineIndex !== -1) {
+    return lines.slice(0, firstAtLineIndex).join('\n');
+  }
+  return stack;
+}
+
 /**
  * Error#stack output only contains script URLs. In some cases we are able to
  * retrieve additional exception details from V8 that we can use to augment
@@ -150,9 +181,17 @@ export function parseRawFramesFromErrorStack(stack: string): RawFrame[] {
 export function augmentRawFramesWithScriptIds(
     rawFrames: RawFrame[], protocolStackTrace: Protocol.Runtime.StackTrace): void {
   for (const rawFrame of rawFrames) {
-    const protocolFrame = protocolStackTrace.callFrames.find(
-        frame => rawFrame.url === frame.url && rawFrame.lineNumber === frame.lineNumber &&
-            rawFrame.columnNumber === frame.columnNumber);
+    const isWasm = rawFrame.parsedFrameInfo?.isWasm;
+    const protocolFrame = protocolStackTrace.callFrames.find(frame => {
+      if (isWasm) {
+        // The parser parses Wasm offsets into the `columnNumber` field. The `lineNumber` is always -1.
+        // In the protocol trace, the `lineNumber` is 0 (for Wasm) and `columnNumber` is the bytecode offset.
+        return rawFrame.url === frame.url && rawFrame.columnNumber === frame.columnNumber;
+      }
+      return rawFrame.url === frame.url && rawFrame.lineNumber === frame.lineNumber &&
+          rawFrame.columnNumber === frame.columnNumber;
+    });
+
     if (protocolFrame) {
       // @ts-expect-error scriptId is a readonly property.
       rawFrame.scriptId = protocolFrame.scriptId;

package/front_end/models/stack_trace/ErrorStackParser.ts

@@ -21,6 +21,24 @@ export interface ParsedErrorFrame {
   };
 }
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export function concatErrorDescriptionAndIssueSummary(description: string, issueSummary: string): string {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+}
+
 /**
  * Takes a V8 Error#stack string and extracts source position information.
  *

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -58,8 +58,12 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
 
   async createFromErrorStackLikeString(
       stack: string, rawFramesToUIFrames: TranslateRawFrames,
-      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<StackTrace.StackTrace.ParsedErrorStackTrace> {
+      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<StackTrace.StackTrace.ParsedErrorStackTrace|null> {
     const rawFrames = parseRawFramesFromErrorStack(stack);
+    if (!rawFrames) {
+      return null;
+    }
+
     if (exceptionDetails?.stackTrace) {
       augmentRawFramesWithScriptIds(rawFrames, exceptionDetails.stackTrace);
     }

package/front_end/models/text_utils/ContentData.ts

@@ -2,11 +2,23 @@
 // 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 Platform from '../../core/platform/platform.js';
 
-import { contentAsDataURL, type DeferredContent } from './ContentProvider.js';
+import {contentAsDataURL, type DeferredContent} from './ContentProvider.js';
 import {Text} from './Text.js';
 
+const objectUrlRegistry = new FinalizationRegistry<string>(url => {
+  URL.revokeObjectURL(url);
+});
+
+/**
+ * The maximum size in bytes that we are willing to convert to a Blob.
+ * 10MB is chosen as a safe upper limit to prevent freezing the DevTools UI
+ * when synchronously decoding large Base64 strings.
+ */
+const MAX_BLOB_SIZE_BYTES = 10 * 1024 * 1024;
+
 /**
  * This class is a small wrapper around either raw binary or text data.
  * As the binary data can actually contain textual data, we also store the
@@ -26,11 +38,10 @@ import {Text} from './Text.js';
 export class ContentData {
   readonly mimeType: string;
   readonly charset: string;
-
   #contentAsBase64?: string;
   #contentAsText?: string;
-
   #contentAsTextObj?: Text;
+  #imagePreviewUrl?: string;
 
   constructor(data: string, isBase64: boolean, mimeType: string, charset?: string) {
     this.charset = charset || 'utf-8';
@@ -75,13 +86,7 @@ export class ContentData {
       throw new Error('Cannot interpret binary data as text');
     }
 
-    const binaryString = window.atob(this.#contentAsBase64 as string);
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
-    }
-
+    const bytes = Common.Base64.decode(this.#contentAsBase64 as string);
     this.#contentAsText = new TextDecoder(this.charset).decode(bytes);
     return this.#contentAsText;
   }
@@ -145,6 +150,62 @@ export class ContentData {
     return contentAsDataURL(this.text, this.mimeType ?? '', false, 'utf-8');
   }
 
+  /**
+   * Returns the content as a Blob.
+   *
+   * We prefer Base64 as the source for the Blob because it represents the raw binary
+   * bytes. Converting binary data (like an image) to a UTF-16 string (contentAsText)
+   * is destructive and will corrupt the image data.
+   *
+   * @returns The Blob representation, or `null` if the content exceeds the 10MB safety limit.
+   */
+  asBlob(): Blob|null {
+    // We prefer Base64 as the source for the Blob because it represents the raw binary
+    // bytes. Converting binary data (like an image) to a UTF-16 string (contentAsText)
+    // is destructive and will corrupt the image data.
+    if (this.#contentAsBase64 !== undefined) {
+      // Base64 encoding uses 4 characters to represent 3 bytes of data.
+      // Therefore, the byte size is approximately 75% of the string length.
+      if (this.#contentAsBase64.length * 0.75 > MAX_BLOB_SIZE_BYTES) {
+        return null;
+      }
+      const bytes = Common.Base64.decode(this.#contentAsBase64);
+      return new Blob([bytes], {type: this.mimeType});
+    }
+    const text = this.#contentAsText ?? '';
+    if (text.length > MAX_BLOB_SIZE_BYTES) {
+      return null;
+    }
+    return new Blob([text], {type: this.mimeType});
+  }
+
+  /**
+   * Gets the image as either a data: or blob: URL.
+   *
+   * We prefer data: for simplicity, but these are limited in size to 1MB. If
+   * the resource is >1MB, we fall back to a blob: URL.
+   *
+   * @returns An object URL, or `null` if the content exceeds the 10MB safety limit.
+   */
+  asImagePreviewUrl(): string|null {
+    if (this.#imagePreviewUrl) {
+      return this.#imagePreviewUrl;
+    }
+    const url = this.asDataUrl();
+    if (url !== null) {
+      this.#imagePreviewUrl = url;
+      return this.#imagePreviewUrl;
+    }
+
+    const blob = this.asBlob();
+    if (blob === null) {
+      return null;
+    }
+    this.#imagePreviewUrl = URL.createObjectURL(blob);
+    objectUrlRegistry.register(this, this.#imagePreviewUrl);
+    return this.#imagePreviewUrl;
+  }
+
   /**
    * @deprecated Used during migration from `DeferredContent` to `ContentData`.
    */

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

@@ -14,6 +14,13 @@ export interface TraceFile {
   metadata: MetaData;
 }
 
+// When a file is imported, it could have come from another tool which does not
+// define metadata.
+interface TraceFileWithUnknownMetadata {
+  traceEvents: readonly Event[];
+  metadata?: MetaData;
+}
+
 export interface Breadcrumb {
   window: TraceWindowMicro;
   child: Breadcrumb|null;
@@ -239,7 +246,7 @@ export interface MetadataResource {
   mimeType: string;
 }
 
-export type Contents = TraceFile|Event[];
+export type Contents = TraceFileWithUnknownMetadata|Event[];
 
 export function traceEventKeyToValues(key: SerializableKey): SerializableKeyValues {
   const parts = key.split('-');