chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/models/ai_assistance/AiConversation.ts

@@ -71,9 +71,9 @@ export class AiConversation {
   ) {
     this.#changeManager = changeManager;
     this.#aidaClient = aidaClient;
-    this.#agent = this.#createAgent(type);
-
     this.type = type;
+    this.#agent = this.#createAgent();
+
     this.id = id;
     this.#isReadOnly = isReadOnly;
     this.#isExternal = isExternal;
@@ -212,14 +212,14 @@ export class AiConversation {
     };
   }
 
-  #createAgent(conversationType: ConversationType): AiAgent<unknown> {
+  #createAgent(): AiAgent<unknown> {
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
       changeManager: this.#changeManager,
     };
     let agent: AiAgent<unknown>;
-    switch (conversationType) {
+    switch (this.type) {
       case ConversationType.STYLING: {
         agent = new StylingAgent(options);
         break;
@@ -251,6 +251,7 @@ export class AiConversation {
           ): AsyncGenerator<ResponseData, void, void> {
     for await (const data of this.#agent.run(initialQuery, options, multimodalInput)) {
       // We don't want to save partial responses to the conversation history.
+      // TODO(crbug.com/463325400): We should save interleaved answers to the history as well.
       if (data.type !== ResponseType.ANSWER || data.complete) {
         void this.addHistoryItem(data);
       }

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
@@ -23,11 +24,13 @@ export const enum LanguageModelAvailability {
   DISABLED = 'disabled',
 }
 
-export class BuiltInAi {
+export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #availability: LanguageModelAvailability|null = null;
   #hasGpu: boolean;
   #consoleInsightsSession?: LanguageModel;
   initDoneForTesting: Promise<void>;
+  #downloadProgress: number|null = null;
+  #currentlyCreatingSession = false;
 
   static instance(): BuiltInAi {
     if (builtInAiInstance === undefined) {
@@ -37,9 +40,10 @@ export class BuiltInAi {
   }
 
   constructor() {
+    super();
     this.#hasGpu = this.#isGpuAvailable();
     this.initDoneForTesting =
-        this.getLanguageModelAvailability().then(() => this.initialize()).then(() => this.#sendAvailabilityMetrics());
+        this.getLanguageModelAvailability().then(() => this.#sendAvailabilityMetrics()).then(() => this.initialize());
   }
 
   async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
@@ -49,14 +53,59 @@ export class BuiltInAi {
     }
     try {
       // @ts-expect-error
-      this.#availability = await window.LanguageModel.availability(
-                               {expectedOutputs: [{type: 'text', languages: ['en']}]}) as LanguageModelAvailability;
+      this.#availability = await window.LanguageModel.availability({
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      }) as LanguageModelAvailability;
     } catch {
       this.#availability = LanguageModelAvailability.UNAVAILABLE;
     }
     return this.#availability;
   }
 
+  isDownloading(): boolean {
+    return this.#availability === LanguageModelAvailability.DOWNLOADING;
+  }
+
+  isEventuallyAvailable(): boolean {
+    if (!this.#hasGpu && !Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu)) {
+      return false;
+    }
+    return this.#availability === LanguageModelAvailability.AVAILABLE ||
+        this.#availability === LanguageModelAvailability.DOWNLOADING ||
+        this.#availability === LanguageModelAvailability.DOWNLOADABLE;
+  }
+
+  #setDownloadProgress(newValue: number): void {
+    this.#downloadProgress = newValue;
+    this.dispatchEventToListeners(Events.DOWNLOAD_PROGRESS_CHANGED, this.#downloadProgress);
+  }
+
+  getDownloadProgress(): number|null {
+    return this.#downloadProgress;
+  }
+
+  startDownloadingModel(): void {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+      return;
+    }
+    if (this.#availability !== LanguageModelAvailability.DOWNLOADABLE) {
+      return;
+    }
+
+    void this.#createSession();
+    // Without the timeout, the returned availability would still be `downloadable`
+    setTimeout(() => {
+      void this.getLanguageModelAvailability();
+    }, 1000);
+  }
+
   #isGpuAvailable(): boolean {
     const canvas = document.createElement('canvas');
     try {
@@ -86,16 +135,29 @@ export class BuiltInAi {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
       return;
     }
-    if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+    if (this.#availability !== LanguageModelAvailability.AVAILABLE &&
+        this.#availability !== LanguageModelAvailability.DOWNLOADING) {
       return;
     }
     await this.#createSession();
   }
 
   async #createSession(): Promise<void> {
+    if (this.#currentlyCreatingSession) {
+      return;
+    }
+    this.#currentlyCreatingSession = true;
+
+    const monitor = (m: EventTarget): void => {
+      m.addEventListener('downloadprogress', ((e: {loaded: number}) => {
+                                               this.#setDownloadProgress(e.loaded);
+                                             }) as unknown as EventListener);
+    };
+
     try {
       // @ts-expect-error
       this.#consoleInsightsSession = await window.LanguageModel.create({
+        monitor,
         initialPrompts: [{
           role: 'system',
           content: `
@@ -125,11 +187,13 @@ Your instructions are as follows:
         }],
       });
       if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+        this.dispatchEventToListeners(Events.DOWNLOADED_AND_SESSION_CREATED);
         void this.getLanguageModelAvailability();
       }
     } catch (e) {
       console.error('Error when creating LanguageModel session', e.message);
     }
+    this.#currentlyCreatingSession = false;
   }
 
   static removeInstance(): void {
@@ -198,3 +262,13 @@ Your instructions are as follows:
     }
   }
 }
+
+export const enum Events {
+  DOWNLOAD_PROGRESS_CHANGED = 'downloadProgressChanged',
+  DOWNLOADED_AND_SESSION_CREATED = 'downloadedAndSessionCreated',
+}
+
+export interface EventTypes {
+  [Events.DOWNLOAD_PROGRESS_CHANGED]: number;
+  [Events.DOWNLOADED_AND_SESSION_CREATED]: void;
+}

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -31,9 +31,9 @@ function formatStyles(styles: Record<string, string>, indent = 2): string {
 export class ChangeManager {
   readonly #stylesheetMutex = new Common.Mutex.Mutex();
   readonly #cssModelToStylesheetId =
-      new Map<SDK.CSSModel.CSSModel, Map<Protocol.Page.FrameId, Protocol.CSS.StyleSheetId>>();
-  readonly #stylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
-  readonly #backupStylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
+      new Map<SDK.CSSModel.CSSModel, Map<Protocol.Page.FrameId, Protocol.DOM.StyleSheetId>>();
+  readonly #stylesheetChanges = new Map<Protocol.DOM.StyleSheetId, Change[]>();
+  readonly #backupStylesheetChanges = new Map<Protocol.DOM.StyleSheetId, Change[]>();
 
   constructor() {
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -147,7 +147,7 @@ ${formatStyles(change.styles)}
   }
 
   async #getStylesheet(cssModel: SDK.CSSModel.CSSModel, frameId: Protocol.Page.FrameId):
-      Promise<Protocol.CSS.StyleSheetId> {
+      Promise<Protocol.DOM.StyleSheetId> {
     return await this.#stylesheetMutex.run(async () => {
       let frameToStylesheet = this.#cssModelToStylesheetId.get(cssModel);
       if (!frameToStylesheet) {

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -14,7 +14,6 @@ import {
   type AiAgent,
   type ExternalRequestResponse,
   ExternalRequestResponseType,
-  type ResponseData,
   ResponseType
 } from './agents/AiAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
@@ -204,20 +203,6 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     }
   }
 
-  async *
-      handleConversationWithHistory(
-          items: AsyncIterable<ResponseData, void, void>,
-          conversation: AiConversation|undefined,
-          ): AsyncGenerator<ResponseData, void, void> {
-    for await (const data of items) {
-      // We don't want to save partial responses to the conversation history.
-      if (data.type !== ResponseType.ANSWER || data.complete) {
-        void conversation?.addHistoryItem(data);
-      }
-      yield data;
-    }
-  }
-
   async * #createAndDoExternalConversation(opts: {
     conversationType: ConversationType,
     aiAgent: AiAgent<unknown>,

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

@@ -237,7 +237,8 @@ export interface FunctionDeclaration<Args extends Record<string, unknown>, Retur
   /**
    * Function implementation that the LLM will try to execute,
    */
-  handler: (args: Args, options?: FunctionHandlerOptions) => Promise<FunctionCallHandlerResult<ReturnType>>;
+
+  handler(args: Args, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<ReturnType>>;
 }
 
 interface AidaFetchResult {
@@ -618,10 +619,12 @@ export abstract class AiAgent<T> {
     }
   }
 
-  async * #callFunction(name: string, args: Record<string, unknown>, options?: {
-    signal?: AbortSignal,
-    approved?: boolean,
-  }): AsyncGenerator<FunctionCallResponseData, {result: unknown}> {
+  async *
+      #callFunction(
+          name: string,
+          args: Record<string, unknown>,
+          options?: FunctionHandlerOptions,
+          ): AsyncGenerator<FunctionCallResponseData, {result: unknown}> {
     const call = this.#functionDeclarations.get(name);
     if (!call) {
       throw new Error(`Function ${name} is not found.`);
@@ -655,7 +658,7 @@ export abstract class AiAgent<T> {
       }
     }
 
-    let result = await call.handler(args, options) as FunctionCallHandlerResult<unknown>;
+    let result = await call.handler(args, options);
 
     if ('requiresApproval' in result) {
       if (code) {

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 {