chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -9,6 +9,8 @@ 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 Tracing from '../../../services/tracing/tracing.js';
+import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
 import {
   PerformanceInsightFormatter,
@@ -23,6 +25,7 @@ import {
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
+  type FunctionCallHandlerResult,
   type ParsedResponse,
   type RequestOptions,
   type ResponseData,
@@ -44,6 +47,7 @@ const UIStringsNotTranslated = {
   mainThreadActivity: 'Investigating main thread activity…',
 } as const;
 const lockedString = i18n.i18n.lockedString;
+const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
 
 /**
  * WARNING: preamble defined in code is only used when userTier is
@@ -51,6 +55,16 @@ const lockedString = i18n.i18n.lockedString;
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
 
+const greenDevAdditionalFunction = `
+- CRITICAL:You also have access to a function called addElementAnnotation, which should be used to highlight elements.`;
+
+const greenDevAdditionalGuidelines = `
+- CRITICAL: Each time an element with a nodeId is mentioned, you MUST ALSO call the function addElementAnnotation for that element.
+- The addElementAnnotation function should be called as soon as you identify an element that needs to be highlighted.
+- The addElementAnnotation function should always be called for the LCP element, if known.
+- The annotationMessage should be descriptive and relevant to why the element is being highlighted.
+`;
+
 /**
  * Preamble clocks in at ~1341 tokens.
  *   The prose is around 4.5 chars per token.
@@ -68,6 +82,8 @@ Don't mention anything about an insight without first getting more data about it
 
 You have many functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
+${annotationsEnabled ? greenDevAdditionalFunction : ''}
+
 You will be given bounds representing a time range within the trace. Bounds include a min and a max time in microseconds. max is always bigger than min in a bounds.
 
 The 3 main performance metrics are:
@@ -108,6 +124,8 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Structure your response using markdown headings and bullet points for improved readability.
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
+${annotationsEnabled ? greenDevAdditionalGuidelines : ''}
+
 ## Strict Constraints
 
 Adhere to the following critical requirements:
@@ -135,6 +153,11 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 When asking the user to make a choice between multiple options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
 `;
 
+const greenDevAdditionalGuidelineFreshTrace = `
+When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying the id and an annotation reason.
+- CRITICAL: Each time you add an annotating link you MUST ALSO call the function addElementAnnotation.
+`;
+
 const extraPreambleWhenFreshTrace = `Additional notes:
 
 When referring to an element for which you know the nodeId, annotate your output using markdown link syntax:
@@ -142,7 +165,8 @@ When referring to an element for which you know the nodeId, annotate your output
 - This link will reveal the element in the Elements panel
 - Never mention node or nodeId when referring to the element, and especially not in the link text.
 - When referring to the LCP, it's useful to also mention what the LCP element is via its nodeId. Use the markdown link syntax to do so.
-`;
+
+${annotationsEnabled ? greenDevAdditionalGuidelineFreshTrace : ''}`;
 
 enum ScorePriority {
   REQUIRED = 3,
@@ -310,7 +334,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_FULL_AGENT;
   }
   get userTier(): string|undefined {
-    return Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
+    return annotationsEnabled ? 'TESTERS' : Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
   }
   get options(): RequestOptions {
     const temperature = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.temperature;
@@ -883,12 +907,107 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     });
 
+    if (annotationsEnabled) {
+      this.declareFunction<{
+        elementId: string,
+        annotationMessage: string,
+      }>('addElementAnnotation', {
+        description:
+            'Adds a visual annotation in the Elements panel, attached to a node with the specific UID provided. Use it to highlight nodes in the Elements panel and provide contextual suggestions to the user related to their queries.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            elementId: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The UID of the element to annotate.',
+              nullable: false,
+            },
+            annotationMessage: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The message the annotation should show to the user.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async params => {
+          return await this.addElementAnnotation(params.elementId, params.annotationMessage);
+        },
+      });
+    }
+
+    this.declareFunction<{scriptUrl: string, line: number, column: number}, {result: string}>('getFunctionCode', {
+      description: 'Returns the code for a function defined at the given location.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          scriptUrl: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The url of the function.',
+            nullable: false,
+          },
+          line: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The line number where the function is defined.',
+            nullable: false,
+          },
+          column: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The column number where the function is defined.',
+            nullable: false,
+          },
+        },
+      },
+      displayInfoFromArgs: args => {
+        return {
+          title: lockedString('Looking up function code…'),
+          action: `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`
+        };
+      },
+      handler: async args => {
+        debugLog('Function call: getFunctionCode');
+
+        if (args.line === undefined) {
+          return {error: 'Missing arg: line'};
+        }
+
+        if (args.column === undefined) {
+          return {error: 'Missing arg: column'};
+        }
+
+        if (!this.#formatter) {
+          throw new Error('missing formatter');
+        }
+
+        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        if (!target) {
+          throw new Error('missing target');
+        }
+
+        const url = args.scriptUrl as Platform.DevToolsPath.UrlString;
+        const code = await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
+            target, url, args.line, args.column, {contextLength: 200, contextLineLength: 5, appendProfileData: true});
+        if (!code) {
+          return {error: 'Could not find code'};
+        }
+
+        const result = this.#formatter.formatFunctionCode(code);
+
+        const key = `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`;
+        this.#cacheFunctionResult(focus, key, result);
+        return {result: {result}};
+      },
+    });
+
     const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
     const isTraceApp = Root.Runtime.Runtime.isTraceApp();
 
     this.declareFunction<{url: string}, {content: string}>('getResourceContent', {
       description:
-          'Returns the content of the resource with the given url. Only use this for text resource types. This function is helpful for getting script contents in order to further analyze main thread activity and suggest code improvements. When analyzing the main thread activity, always call this function to get more detail. Always call this function when asked to provide specifics about what is happening in the code. Never ask permission to call this function, just do it.',
+          'Returns the content of the resource with the given url. Only use this for text resource types. Prefer getFunctionCode when possible.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -972,4 +1091,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       });
     }
   }
+
+  async addElementAnnotation(elementId: string, annotationMessage: string):
+      Promise<FunctionCallHandlerResult<unknown>> {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received agent request to add annotation with annotations disabled');
+      return {error: 'Annotations are not currently enabled'};
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`AI AGENT EVENT: Performance Agent adding annotation for element ${elementId}: '${annotationMessage}'`);
+    Annotations.AnnotationRepository.instance().addElementsAnnotation(annotationMessage, elementId);
+    return {result: {success: true}};
+  }
 }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as CrUXManager from '../../crux-manager/crux-manager.js';
+import type * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
 import type {AICallTree} from '../performance/AICallTree.js';
 import type {AgentFocus} from '../performance/AIContext.js';
@@ -813,4 +814,27 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     ];
     return parts.join(';');
   }
+
+  formatFunctionCode(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): string {
+    const {startLine, startColumn} = code.range;
+    const {
+      startLine: contextStartLine,
+      startColumn: contextStartColumn,
+      endLine: contextEndLine,
+      endColumn: contextEndColumn
+    } = code.rangeWithContext;
+    const name = code.functionBounds.name;
+    const url = code.functionBounds.uiSourceCode.url();
+
+    const parts = [];
+    parts.push(`${name} @ ${url}:${startLine}:${startColumn}. With added context, chunk is from ${contextStartLine}:${
+        contextStartColumn} to ${contextEndLine}:${contextEndColumn}`);
+    parts.push(
+        '\nThe following is a markdown block of JavaScript. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.\n');
+    parts.push('```');
+    parts.push(code.codeWithContext);
+    parts.push('```');
+
+    return parts.join('\n');
+  }
 }

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -270,6 +270,49 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     return ranges;
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+
+    const sourceMap = this.#sourceMapManager.sourceMapForClient(script);
+    if (!sourceMap) {
+      return null;
+    }
+
+    const {lineNumber, columnNumber} = script.rawLocationToRelativeLocation(rawLocation);
+    const {url, scope} = sourceMap.findOriginalFunctionScope({line: lineNumber, column: columnNumber}) ?? {};
+    if (!scope || !url) {
+      return null;
+    }
+
+    const project = this.#sourceMapToProject.get(sourceMap);
+    if (!project) {
+      return null;
+    }
+
+    const uiSourceCode = project.uiSourceCodeForURL(url);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    // If there's no original source content, callers can't get the source code for
+    // the given scope. Presently that's the only reason to get a function's bounds,
+    // so in that case return null and allow ResourceScriptMapping to fulfill this
+    // request.
+    const contentData = await uiSourceCode.requestContentData();
+    if ('error' in contentData) {
+      return null;
+    }
+
+    const name = scope.name ?? '';
+    const range =
+        new TextUtils.TextRange.TextRange(scope.start.line, scope.start.column, scope.end.line, scope.end.column);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   translateRawFramesStep(
       rawFrames: StackTraceImpl.Trie.RawFrame[],
       translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): boolean {

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -338,6 +338,13 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     return [];
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    // TODO(crbug.com/463452667): first try pluginManager.
+    const modelData = this.#debuggerModelToData.get(rawLocation.debuggerModel);
+    return modelData ? await modelData.functionBoundsAtRawLocation(rawLocation) : null;
+  }
+
   async normalizeUILocation(uiLocation: Workspace.UISourceCode.UILocation): Promise<Workspace.UISourceCode.UILocation> {
     const rawLocations =
         await this.uiLocationToRawLocations(uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber);
@@ -582,6 +589,18 @@ class ModelData {
     return ranges;
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    let scope: Workspace.UISourceCode.UIFunctionBounds|null = null;
+    // Check source maps.
+    scope = scope || await this.compilerMapping.functionBoundsAtRawLocation(rawLocation);
+    // Check debugger scripts.
+    scope = scope || await this.#resourceScriptMapping.functionBoundsAtRawLocation(rawLocation);
+    // Check inline scripts inside HTML resources.
+    scope = scope || await this.#resourceMapping.functionBoundsAtRawLocation(rawLocation);
+    return scope;
+  }
+
   translateRawFramesStep(
       rawFrames: StackTraceImpl.Trie.RawFrame[],
       translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): void {

package/front_end/models/bindings/ResourceMapping.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -269,6 +270,78 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
         uiLocation.uiSourceCode.url(), uiLocation.lineNumber, uiLocation.columnNumber);
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+    const info = this.infoForTarget(script.debuggerModel.target());
+    if (!info) {
+      return null;
+    }
+    const embedderName = script.embedderName();
+    if (!embedderName) {
+      return null;
+    }
+    const uiSourceCode = info.getProject().uiSourceCodeForURL(embedderName);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    let {lineNumber, columnNumber} = rawLocation;
+    lineNumber -= script.lineOffset;
+    if (lineNumber === 0) {
+      columnNumber -= script.columnOffset;
+    }
+
+    const scopeTreeAndText = script ? await SDK.ScopeTreeCache.scopeTreeForScript(script) : null;
+    if (!scopeTreeAndText) {
+      return null;
+    }
+
+    // Find the inner-most scope that maps to the given position.
+
+    const offset = scopeTreeAndText.text.offsetFromPosition(lineNumber, columnNumber);
+
+    const results = [];
+    (function walk(nodes: Formatter.FormatterWorkerPool.ScopeTreeNode[]) {
+      for (const node of nodes) {
+        if (!(offset >= node.start && offset < node.end)) {
+          continue;
+        }
+        results.push(node);
+        walk(node.children);
+      }
+    })([scopeTreeAndText.scopeTree]);
+
+    const result = results.findLast(
+        node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+    if (!result) {
+      return null;
+    }
+
+    // Map back to positions.
+    const startPosition = scopeTreeAndText.text.positionFromOffset(result.start);
+    const endPosition = scopeTreeAndText.text.positionFromOffset(result.end);
+
+    startPosition.lineNumber += script.lineOffset;
+    if (startPosition.lineNumber === script.lineOffset) {
+      startPosition.columnNumber += script.columnOffset;
+    }
+
+    endPosition.lineNumber += script.lineOffset;
+    if (endPosition.lineNumber === script.lineOffset) {
+      endPosition.columnNumber += script.columnOffset;
+    }
+
+    const name = '';  // TODO(crbug.com/452333154): update ScopeVariableAnalysis to include function name.
+    const range = new TextUtils.TextRange.TextRange(
+        startPosition.lineNumber, startPosition.columnNumber, endPosition.lineNumber, endPosition.columnNumber);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   resetForTest(target: SDK.Target.Target): void {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     const info = resourceTreeModel ? this.#modelToInfo.get(resourceTreeModel) : null;

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -8,6 +8,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 * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -156,6 +157,55 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     }
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    const scopeTreeAndText = script ? await SDK.ScopeTreeCache.scopeTreeForScript(script) : null;
+    if (!scopeTreeAndText) {
+      return null;
+    }
+
+    // Find the inner-most scope that maps to the given position.
+
+    const offset = scopeTreeAndText.text.offsetFromPosition(rawLocation.lineNumber, rawLocation.columnNumber);
+
+    const results = [];
+    (function walk(nodes: Formatter.FormatterWorkerPool.ScopeTreeNode[]) {
+      for (const node of nodes) {
+        if (!(offset >= node.start && offset < node.end)) {
+          continue;
+        }
+        results.push(node);
+        walk(node.children);
+      }
+    })([scopeTreeAndText.scopeTree]);
+
+    const result = results.findLast(
+        node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+    if (!result) {
+      return null;
+    }
+
+    // Map back to positions.
+    const startPosition = scopeTreeAndText.text.positionFromOffset(result.start);
+    const endPosition = scopeTreeAndText.text.positionFromOffset(result.end);
+
+    const name = '';  // TODO(crbug.com/452333154): update ScopeVariableAnalysis to include function name.
+    const range = new TextUtils.TextRange.TextRange(
+        startPosition.lineNumber, startPosition.columnNumber, endPosition.lineNumber, endPosition.columnNumber);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   private addScript(script: SDK.Script.Script): void {
     // Ignore live edit scripts here.
     if (script.isLiveEdit() || script.isBreakpointCondition) {

package/front_end/models/issues_manager/GenericIssue.ts

@@ -38,6 +38,11 @@ const UIStrings = {
    * @description title for CORB explainer.
    */
   corbExplainerPageTitle: 'CORB explainer',
+
+  /**
+   * @description title for history intervention documentation page.
+   */
+  historyManipulationInterventionPageTitle: 'History manipulation intervention explainer'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/GenericIssue.ts', UIStrings);
@@ -185,6 +190,14 @@ export const genericResponseWasBlockedbyORB = {
   }],
 };
 
+export const genericNavigationEntryMarkedSkippable = {
+  file: 'genericNavigationEntryMarkedSkippable.md',
+  links: [{
+    link: 'https://chromium.googlesource.com/chromium/src/+/main/docs/history_manipulation_intervention.md',
+    linkTitle: i18nLazyString(UIStrings.historyManipulationInterventionPageTitle),
+  }],
+};
+
 const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMarkdownIssueDescription>([
   [Protocol.Audits.GenericIssueErrorType.FormLabelForNameError, genericFormLabelForNameError],
   [Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError, genericFormInputWithNoLabelError],
@@ -221,6 +234,10 @@ const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMar
     Protocol.Audits.GenericIssueErrorType.ResponseWasBlockedByORB,
     genericResponseWasBlockedbyORB,
   ],
+  [
+    Protocol.Audits.GenericIssueErrorType.NavigationEntryMarkedSkippable,
+    genericNavigationEntryMarkedSkippable,
+  ],
 ]);
 
 const issueTypes = new Map<Protocol.Audits.GenericIssueErrorType, IssueKind>([

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

@@ -6990,6 +6990,10 @@ export const NativeFunctions = [
     name: "Highlight",
     signatures: [["...initRanges"]]
   },
+  {
+    name: "getElementTransform",
+    signatures: [["element","draw_transform"]]
+  },
   {
     name: "configureHighDynamicRange",
     signatures: [["options"]]
@@ -8905,11 +8909,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 +9101,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