chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/models/issues_manager/SharedDictionaryIssue.ts

@@ -108,9 +108,7 @@ function getIssueCode(details: Protocol.Audits.SharedDictionaryIssueDetails): Is
   }
 }
 
-export class SharedDictionaryIssue extends Issue {
-  readonly #issueDetails: Protocol.Audits.SharedDictionaryIssueDetails;
-
+export class SharedDictionaryIssue extends Issue<Protocol.Audits.SharedDictionaryIssueDetails, IssueCode> {
   constructor(
       issueDetails: Protocol.Audits.SharedDictionaryIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super(
@@ -121,13 +119,12 @@ export class SharedDictionaryIssue extends Issue {
             issueDetails.sharedDictionaryError,
           ].join('::'),
         },
-        issuesModel);
-    this.#issueDetails = issueDetails;
+        issueDetails, issuesModel);
   }
 
   override requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    if (this.#issueDetails.request) {
-      return [this.#issueDetails.request];
+    if (this.details().request) {
+      return [this.details().request];
     }
     return [];
   }
@@ -136,12 +133,8 @@ export class SharedDictionaryIssue extends Issue {
     return IssueCategory.OTHER;
   }
 
-  details(): Protocol.Audits.SharedDictionaryIssueDetails {
-    return this.#issueDetails;
-  }
-
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.#issueDetails.sharedDictionaryError);
+    const description = issueDescriptions.get(this.details().sharedDictionaryError);
     if (!description) {
       return null;
     }
@@ -149,7 +142,7 @@ export class SharedDictionaryIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/StylesheetLoadingIssue.ts

@@ -13,40 +13,35 @@ export const lateImportStylesheetLoadingCode = [
   Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule,
 ].join('::');
 
-export class StylesheetLoadingIssue extends Issue {
-  #issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails;
+export class StylesheetLoadingIssue extends Issue<Protocol.Audits.StylesheetLoadingIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     const code =
         `${Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue}::${issueDetails.styleSheetLoadingIssueReason}`;
-    super(code, issuesModel);
-    this.#issueDetails = issueDetails;
+    super(code, issueDetails, issuesModel);
   }
 
   override sources(): Protocol.Audits.SourceCodeLocation[] {
-    return [this.#issueDetails.sourceCodeLocation];
+    return [this.details().sourceCodeLocation];
   }
   override requests(): Protocol.Audits.AffectedRequest[] {
-    if (!this.#issueDetails.failedRequestInfo) {
+    const details = this.details();
+    if (!details.failedRequestInfo) {
       return [];
     }
-    const {url, requestId} = this.#issueDetails.failedRequestInfo;
+    const {url, requestId} = details.failedRequestInfo;
     if (!requestId) {
       return [];
     }
     return [{url, requestId}];
   }
 
-  details(): Protocol.Audits.StylesheetLoadingIssueDetails {
-    return this.#issueDetails;
-  }
-
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getDescription(): MarkdownIssueDescription {
-    switch (this.#issueDetails.styleSheetLoadingIssueReason) {
+    switch (this.details().styleSheetLoadingIssueReason) {
       case Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule:
         return {
           file: 'stylesheetLateImport.md',

package/front_end/models/issues_manager/UnencodedDigestIssue.ts

@@ -26,9 +26,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/UnencodedDigestIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class UnencodedDigestIssue extends Issue<string> {
-  readonly #issueDetails: Protocol.Audits.UnencodedDigestIssueDetails;
-
+export class UnencodedDigestIssue extends Issue<Protocol.Audits.UnencodedDigestIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.UnencodedDigestIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super(
@@ -36,12 +34,7 @@ export class UnencodedDigestIssue extends Issue<string> {
           code: `${Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue}::${issueDetails.error}`,
           umaCode: `${Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue}::${issueDetails.error}`,
         },
-        issuesModel);
-    this.#issueDetails = issueDetails;
-  }
-
-  details(): Protocol.Audits.UnencodedDigestIssueDetails {
-    return this.#issueDetails;
+        issueDetails, issuesModel);
   }
 
   override primaryKey(): string {

package/front_end/models/issues_manager/descriptions/genericNavigationEntryMarkedSkippable.md

@@ -0,0 +1,7 @@
+# Session History Item Has Been Marked Skippable
+
+A session history item was added by this document without any interaction from the
+user. As a result, this document's history items will be skipped if the user goes
+back or forward via the browser's UI (e.g., back/forward buttons), to prevent pages
+from trapping a user. If the user interacts with the page, the history items
+will no longer be skipped.

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -709,11 +709,6 @@ export const NativeFunctions = [
     signatures: [["property","cssText"]],
     receivers: ["CSSStyleValue"]
   },
-  {
-    name: "parse",
-    signatures: [["serializedOrigin"]],
-    receivers: ["Origin"]
-  },
   {
     name: "parse",
     signatures: [["url","?base"]],
@@ -6990,6 +6985,10 @@ export const NativeFunctions = [
     name: "Highlight",
     signatures: [["...initRanges"]]
   },
+  {
+    name: "getElementTransform",
+    signatures: [["element","draw_transform"]]
+  },
   {
     name: "configureHighDynamicRange",
     signatures: [["options"]]
@@ -7382,14 +7381,6 @@ export const NativeFunctions = [
     name: "compareComponent",
     signatures: [["component","left","right"]]
   },
-  {
-    name: "Origin",
-    signatures: [["?serializedOrigin"]]
-  },
-  {
-    name: "fromURL",
-    signatures: [["serializedURL"]]
-  },
   {
     name: "isSameOrigin",
     signatures: [["other"]]
@@ -8905,11 +8896,11 @@ export const NativeFunctions = [
   },
   {
     name: "texElementImage2D",
-    signatures: [["target","level","internalformat","format","type","element"]]
+    signatures: [["target","level","internalformat","format","type","element"],["target","level","internalformat","width","height","format","type","element"]]
   },
   {
     name: "texElement2D",
-    signatures: [["target","level","internalformat","format","type","element"]]
+    signatures: [["target","level","internalformat","format","type","element"],["target","level","internalformat","width","height","format","type","element"]]
   },
   {
     name: "drawingBufferStorage",
@@ -9097,7 +9088,7 @@ export const NativeFunctions = [
   },
   {
     name: "copyElementImageToTexture",
-    signatures: [["source","destination"]]
+    signatures: [["source","destination"],["source","width","height","destination"]]
   },
   {
     name: "setIndexBuffer",

package/front_end/models/source_map_scopes/FunctionCodeResolver.snapshot.txt

@@ -0,0 +1,98 @@
+Title: FunctionCodeResolver getFunctionCodeFromLocation [no source maps] lookup named function
+Content:
+se strict";
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
+<FUNCTION_END>const btn = document.querySele
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [no source maps] lookup anonymous function
+Content:
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
+}
+<FUNCTION_END>);
+const input = document.quer
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup named function with generated location
+Content:
+function <FUNCTION_START>fibonacci(num) { // 67 ms
+  if (num <= 1) return 1; // 23 ms
+
+  return fibonacci(num - 1) + fibonacci(num - 2); // 1999 ms
+} // 13 ms
+
+<FUNCTION_END>const btn = document.querySele
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup named function with original location
+Content:
+function <FUNCTION_START>fibonacci(num) { // 67 ms
+  if (num <= 1) return 1; // 23 ms
+
+  return fibonacci(num - 1) + fibonacci(num - 2); // 1999 ms
+} // 13 ms
+
+<FUNCTION_END>const btn = document.querySele
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with generated location
+Content:
+se strict";
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
+<FUNCTION_END>const btn = document.querySele
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with original location
+Content:
+se strict";
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
+<FUNCTION_END>const btn = document.querySele
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup anonymous function with generated location
+Content:
+btn.addEventListener('click', <FUNCTION_START>() => {
+  console.log(fibonacci(Number(params.get('x')))); // 5000 ms
+  btn.style.backgroundColor = 'red'; // 333 ms
+}<FUNCTION_END>);
+
+const input = document.que
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup anonymous function with original location
+Content:
+btn.addEventListener('click', <FUNCTION_START>() => {
+  console.log(fibonacci(Number(params.get('x')))); // 5000 ms
+  btn.style.backgroundColor = 'red'; // 333 ms
+}<FUNCTION_END>);
+
+const input = document.que
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup anonymous function with generated location
+Content:
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
+}
+<FUNCTION_END>);
+const input = document.quer
+=== end content
+
+Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup anonymous function with original location
+Content:
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
+}
+<FUNCTION_END>);
+const input = document.quer
+=== end content

package/front_end/models/source_map_scopes/FunctionCodeResolver.ts

@@ -0,0 +1,270 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../bindings/bindings.js';
+import * as Formatter from '../formatter/formatter.js';
+import * as TextUtils from '../text_utils/text_utils.js';
+import * as Workspace from '../workspace/workspace.js';
+
+/** Represents the source code for a given function, including additional context of surrounding lines. */
+export interface FunctionCode {
+  functionBounds: Workspace.UISourceCode.UIFunctionBounds;
+  /** The text of `uiSourceCode`. */
+  text: TextUtils.Text.Text;
+  /** The function text. */
+  code: string;
+  /** The range of `code` within `text`. */
+  range: TextUtils.TextRange.TextRange;
+  /** The function text, plus some additional context before and after. The actual function is wrapped in <FUNCTION_START>...<FUNCTION_END> */
+  codeWithContext: string;
+  /** The range of `codeWithContext` within `text`. */
+  rangeWithContext: TextUtils.TextRange.TextRange;
+}
+
+export interface CreateFunctionCodeOptions {
+  /** Number of characters to include before and after the function. Stacks with `contextLineLength`. */
+  contextLength?: number;
+  /** Number of lines to include before and after the function. Stacks with `contextLength`. */
+  contextLineLength?: number;
+  /** If true, appends profile data from the trace at the end of every line of the function in `codeWithContext`. This should match what is seen in the formatted view in the Sources panel. */
+  appendProfileData?: boolean;
+}
+
+interface InputData {
+  text: TextUtils.Text.Text;
+  formattedContent: Formatter.ScriptFormatter.FormattedContent|null;
+  performanceData: Workspace.UISourceCode.LineColumnProfileMap|undefined;
+}
+
+const inputCache = new WeakMap<Workspace.UISourceCode.UISourceCode, Promise<InputData>>();
+
+async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  const formattedContent = await format(uiSourceCode, content);
+  const text = new TextUtils.Text.Text(formattedContent ? formattedContent.formattedContent : content);
+  let performanceData = uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE) as
+          Workspace.UISourceCode.LineColumnProfileMap |
+      undefined;
+
+  // Map profile data to the formatted view of the text.
+  if (formattedContent && performanceData) {
+    performanceData = Workspace.UISourceCode.createMappedProfileData(performanceData, (line, column) => {
+      return formattedContent.formattedMapping.originalToFormatted(line, column);
+    });
+  }
+
+  return {text, formattedContent, performanceData};
+}
+
+/** Formatting and parsing line endings for Text is expensive, so cache it. */
+async function prepareInputAndCache(
+    uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  let cachedPromise = inputCache.get(uiSourceCode);
+  if (cachedPromise) {
+    return await cachedPromise;
+  }
+
+  cachedPromise = prepareInput(uiSourceCode, content);
+  inputCache.set(uiSourceCode, cachedPromise);
+  return await cachedPromise;
+}
+
+function extractPerformanceDataByLine(
+    textRange: TextUtils.TextRange.TextRange, performanceData: Workspace.UISourceCode.LineColumnProfileMap): number[] {
+  const {startLine, startColumn, endLine, endColumn} = textRange;
+  const byLine = new Array(endLine - startLine + 1).fill(0);
+
+  for (let line = startLine; line <= endLine; line++) {
+    const lineData = performanceData.get(line + 1);
+    if (!lineData) {
+      continue;
+    }
+
+    // Fast-path for when the entire line's data is relevant.
+    if (line !== startLine && line !== endLine) {
+      byLine[line - startLine] = lineData.values().reduce((acc, cur) => acc + cur);
+      continue;
+    }
+
+    const column0 = line === startLine ? startColumn + 1 : 0;
+    const column1 = line === endLine ? endColumn + 1 : Number.POSITIVE_INFINITY;
+
+    let totalData = 0;
+    for (const [column, data] of lineData) {
+      if (column >= column0 && column <= column1) {
+        totalData += data;
+      }
+    }
+
+    byLine[line - startLine] = totalData;
+  }
+
+  return byLine.map(data => Math.round(data * 10) / 10);
+}
+
+function createFunctionCode(
+    inputData: InputData, functionBounds: Workspace.UISourceCode.UIFunctionBounds,
+    options?: CreateFunctionCodeOptions): FunctionCode {
+  let {startLine, startColumn, endLine, endColumn} = functionBounds.range;
+  if (inputData.formattedContent) {
+    const startMapped = inputData.formattedContent.formattedMapping.originalToFormatted(startLine, startColumn);
+    startLine = startMapped[0];
+    startColumn = startMapped[1];
+
+    const endMapped = inputData.formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
+    endLine = endMapped[0];
+    endColumn = endMapped[1];
+  }
+
+  const text = inputData.text;
+  const content = text.value();
+
+  // Define two ranges - the first is just the function bounds, the second includes
+  // that plus some surrounding context as dictated by the options.
+  const range = new TextUtils.TextRange.TextRange(startLine, startColumn, endLine, endColumn);
+
+  const functionStartOffset = text.offsetFromPosition(startLine, startColumn);
+  const functionEndOffset = text.offsetFromPosition(endLine, endColumn);
+
+  let contextStartOffset = 0;
+  if (options?.contextLength !== undefined) {
+    const contextLength = options.contextLength;
+    contextStartOffset = Math.max(contextStartOffset, functionStartOffset - contextLength);
+  }
+  if (options?.contextLineLength !== undefined) {
+    const contextLineLength = options.contextLineLength;
+    const position = text.offsetFromPosition(Math.max(startLine - contextLineLength, 0), 0);
+    contextStartOffset = Math.max(contextStartOffset, position);
+  }
+
+  let contextEndOffset = content.length;
+  if (options?.contextLength !== undefined) {
+    const contextLength = options.contextLength;
+    contextEndOffset = Math.min(contextEndOffset, functionEndOffset + contextLength);
+  }
+  if (options?.contextLineLength !== undefined) {
+    const contextLineLength = options.contextLineLength;
+    const position =
+        text.offsetFromPosition(Math.min(endLine + contextLineLength, text.lineCount() - 1), Number.POSITIVE_INFINITY);
+    contextEndOffset = Math.min(contextEndOffset, position);
+  }
+
+  const contextStart = text.positionFromOffset(contextStartOffset);
+  const contextEnd = text.positionFromOffset(contextEndOffset);
+  const rangeWithContext = new TextUtils.TextRange.TextRange(
+      contextStart.lineNumber, contextStart.columnNumber, contextEnd.lineNumber, contextEnd.columnNumber);
+
+  // Grab substrings for the function range, and for the context range.
+  const code = content.substring(functionStartOffset, functionEndOffset);
+  const before = content.substring(contextStartOffset, functionStartOffset);
+  const after = content.substring(functionEndOffset, contextEndOffset);
+
+  let codeWithContext;
+  if (options?.appendProfileData && inputData.performanceData) {
+    const performanceDataByLine = extractPerformanceDataByLine(range, inputData.performanceData);
+    const lines = performanceDataByLine.map((data, i) => {
+      let line = text.lineAt(startLine + i);
+
+      const isLastLine = i === performanceDataByLine.length - 1;
+      if (i === 0) {
+        if (isLastLine) {
+          line = line.substring(startColumn, endColumn);
+        } else {
+          line = line.substring(startColumn);
+        }
+      } else if (isLastLine) {
+        line = line.substring(0, endColumn);
+      }
+
+      if (isLastLine) {
+        // Don't ever annotate the last line - it could make the rest of the code on
+        // that line get commented out.
+        data = 0;
+      }
+
+      return data ? `${line} // ${data} ms` : line;
+    });
+    const annotatedCode = lines.join('\n');
+    codeWithContext = before + `<FUNCTION_START>${annotatedCode}<FUNCTION_END>` + after;
+  } else {
+    codeWithContext = before + `<FUNCTION_START>${code}<FUNCTION_END>` + after;
+  }
+
+  return {
+    functionBounds,
+    text,
+    code,
+    range,
+    codeWithContext,
+    rangeWithContext,
+  };
+}
+
+/**
+ * The input location may be a source mapped location or a raw location.
+ */
+export async function getFunctionCodeFromLocation(
+    target: SDK.Target.Target, url: Platform.DevToolsPath.UrlString, line: number, column: number,
+    options?: CreateFunctionCodeOptions): Promise<FunctionCode|null> {
+  const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+  if (!debuggerModel) {
+    throw new Error('missing debugger model');
+  }
+
+  let uiSourceCode;
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  const projects = debuggerWorkspaceBinding.workspace.projectsForType(Workspace.Workspace.projectTypes.Network);
+  for (const project of projects) {
+    uiSourceCode = project.uiSourceCodeForURL(url);
+    if (uiSourceCode) {
+      break;
+    }
+  }
+
+  if (!uiSourceCode) {
+    return null;
+  }
+
+  const rawLocations = await debuggerWorkspaceBinding.uiLocationToRawLocations(uiSourceCode, line, column);
+  const rawLocation = rawLocations.at(-1);
+  if (!rawLocation) {
+    return null;
+  }
+
+  return await getFunctionCodeFromRawLocation(rawLocation, options);
+}
+
+async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string):
+    Promise<Formatter.ScriptFormatter.FormattedContent|null> {
+  const contentType = uiSourceCode.contentType();
+  const shouldFormat = !contentType.isFromSourceMap() && (contentType.isDocument() || contentType.isScript()) &&
+      TextUtils.TextUtils.isMinified(content);
+  if (!shouldFormat) {
+    return null;
+  }
+
+  return await Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
+}
+
+/**
+ * Returns a {@link FunctionCode} for the given raw location.
+ */
+export async function getFunctionCodeFromRawLocation(
+    rawLocation: SDK.DebuggerModel.Location, options?: CreateFunctionCodeOptions): Promise<FunctionCode|null> {
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  const functionBounds = await debuggerWorkspaceBinding.functionBoundsAtRawLocation(rawLocation);
+  if (!functionBounds) {
+    return null;
+  }
+
+  await functionBounds.uiSourceCode.requestContentData();
+  const content = functionBounds.uiSourceCode.content();
+  if (!content) {
+    return null;
+  }
+
+  const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content);
+  return createFunctionCode(inputData, functionBounds, options);
+}

package/front_end/models/source_map_scopes/source_map_scopes.ts

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