chrome-devtools-mcp-for-extension 0.19.2 → 0.20.0

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance/AIQueries.js

@@ -29,6 +29,9 @@ export class AIQueries {
         }
         const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace.data);
         const thread = threads.find(thread => {
+            if (!thread.processIsOnMainFrame) {
+                return false;
+            }
             if (mainThreadPID && mainThreadTID) {
                 return thread.pid === mainThreadPID && thread.tid === mainThreadTID;
             }
@@ -37,9 +40,9 @@ export class AIQueries {
         return thread ?? null;
     }
     /**
-     * Returns bottom up activity for the given range.
+     * Returns bottom up activity for the given range (within a single navigation / thread).
      */
-    static mainThreadActivityBottomUp(navigationId, bounds, parsedTrace) {
+    static mainThreadActivityBottomUpSingleNavigation(navigationId, bounds, parsedTrace) {
         const thread = this.findMainThread(navigationId, parsedTrace);
         if (!thread) {
             return null;
@@ -61,6 +64,47 @@ export class AIQueries {
             endTime,
         });
     }
+    /**
+     * Returns bottom up activity for the given range (no matter the navigation / thread).
+     */
+    static mainThreadActivityBottomUp(bounds, parsedTrace) {
+        const threads = [];
+        if (parsedTrace.insights) {
+            for (const insightSet of parsedTrace.insights?.values()) {
+                const thread = this.findMainThread(insightSet.navigation?.args.data?.navigationId, parsedTrace);
+                if (thread) {
+                    threads.push(thread);
+                }
+            }
+        }
+        else {
+            const navigationId = parsedTrace.data.Meta.mainFrameNavigations[0].args.data?.navigationId;
+            const thread = this.findMainThread(navigationId, parsedTrace);
+            if (thread) {
+                threads.push(thread);
+            }
+        }
+        if (threads.length === 0) {
+            return null;
+        }
+        const threadEvents = [...new Set(threads)].map(thread => AICallTree.findEventsForThread({ thread, parsedTrace, bounds }) ?? []);
+        const events = threadEvents.flat();
+        if (events.length === 0) {
+            return null;
+        }
+        // Use the same filtering as front_end/panels/timeline/TimelineTreeView.ts.
+        const visibleEvents = Trace.Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES.values().toArray();
+        const filter = new Trace.Extras.TraceFilter.VisibleEventsFilter(visibleEvents.concat(["SyntheticNetworkRequest" /* Trace.Types.Events.Name.SYNTHETIC_NETWORK_REQUEST */]));
+        // The bottom up root node handles all the "in Tracebounds" checks we need for the insight.
+        const startTime = Trace.Helpers.Timing.microToMilli(bounds.min);
+        const endTime = Trace.Helpers.Timing.microToMilli(bounds.max);
+        return new Trace.Extras.TraceTree.BottomUpRootNode(events, {
+            textFilter: new Trace.Extras.TraceFilter.ExclusiveNameFilter([]),
+            filters: [filter],
+            startTime,
+            endTime,
+        });
+    }
     /**
      * Returns an AI Call Tree representing the activity on the main thread for
      * the relevant time range of the given insight.

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/CSSWorkspaceBinding.js

@@ -3,33 +3,34 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 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 { LiveLocationWithPool, } from './LiveLocation.js';
 import { SASSSourceMapping } from './SASSSourceMapping.js';
 import { StylesSourceMapping } from './StylesSourceMapping.js';
-let cssWorkspaceBindingInstance;
 export class CSSWorkspaceBinding {
     #resourceMapping;
     #modelToInfo;
     #liveLocationPromises;
     constructor(resourceMapping, targetManager) {
         this.#resourceMapping = resourceMapping;
+        this.#resourceMapping.cssWorkspaceBinding = this;
         this.#modelToInfo = new Map();
         targetManager.observeModels(SDK.CSSModel.CSSModel, this);
         this.#liveLocationPromises = new Set();
     }
     static instance(opts = { forceNew: null, resourceMapping: null, targetManager: null }) {
         const { forceNew, resourceMapping, targetManager } = opts;
-        if (!cssWorkspaceBindingInstance || forceNew) {
+        if (forceNew) {
             if (!resourceMapping || !targetManager) {
                 throw new Error(`Unable to create CSSWorkspaceBinding: resourceMapping and targetManager must be provided: ${new Error().stack}`);
             }
-            cssWorkspaceBindingInstance = new CSSWorkspaceBinding(resourceMapping, targetManager);
+            Root.DevToolsContext.globalInstance().set(CSSWorkspaceBinding, new CSSWorkspaceBinding(resourceMapping, targetManager));
         }
-        return cssWorkspaceBindingInstance;
+        return Root.DevToolsContext.globalInstance().get(CSSWorkspaceBinding);
     }
     static removeInstance() {
-        cssWorkspaceBindingInstance = undefined;
+        Root.DevToolsContext.globalInstance().delete(CSSWorkspaceBinding);
     }
     get modelToInfo() {
         return this.#modelToInfo;
@@ -38,7 +39,7 @@ export class CSSWorkspaceBinding {
         return this.#modelToInfo.get(cssModel);
     }
     modelAdded(cssModel) {
-        this.#modelToInfo.set(cssModel, new ModelInfo(cssModel, this.#resourceMapping));
+        this.#modelToInfo.set(cssModel, new ModelInfo(cssModel, this.#resourceMapping, this));
     }
     modelRemoved(cssModel) {
         this.getCSSModelInfo(cssModel).dispose();
@@ -109,7 +110,7 @@ export class ModelInfo {
     #sassSourceMapping;
     #locations;
     #unboundLocations;
-    constructor(cssModel, resourceMapping) {
+    constructor(cssModel, resourceMapping, cssWorkspaceBinding) {
         this.#eventListeners = [
             cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, event => {
                 void this.styleSheetAdded(event);
@@ -121,7 +122,8 @@ export class ModelInfo {
         this.#resourceMapping = resourceMapping;
         this.#stylesSourceMapping = new StylesSourceMapping(cssModel, resourceMapping.workspace);
         const sourceMapManager = cssModel.sourceMapManager();
-        this.#sassSourceMapping = new SASSSourceMapping(cssModel.target(), sourceMapManager, resourceMapping.workspace);
+        this.#sassSourceMapping =
+            new SASSSourceMapping(cssModel.target(), sourceMapManager, resourceMapping.workspace, cssWorkspaceBinding);
         this.#locations = new Platform.MapUtilities.Multimap();
         this.#unboundLocations = new Platform.MapUtilities.Multimap();
     }

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/CompilerScriptMapping.js

@@ -4,6 +4,8 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+// eslint-disable-next-line @devtools/es-modules-import
+import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 import { ContentProviderBasedProject } from './ContentProviderBasedProject.js';
@@ -37,9 +39,13 @@ export class CompilerScriptMapping {
     #projects = new Map();
     #sourceMapToProject = new Map();
     #uiSourceCodeToSourceMaps = new Platform.MapUtilities.Multimap();
+    #debuggerModel;
+    #ignoreListManager;
     constructor(debuggerModel, workspace, debuggerWorkspaceBinding) {
         this.#sourceMapManager = debuggerModel.sourceMapManager();
         this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+        this.#debuggerModel = debuggerModel;
+        this.#ignoreListManager = debuggerWorkspaceBinding.ignoreListManager;
         this.#stubProject = new ContentProviderBasedProject(workspace, 'jsSourceMaps:stub:' + debuggerModel.target().id(), Workspace.Workspace.projectTypes.Service, '', true /* isServiceProject */);
         this.#eventListeners = [
             this.#sourceMapManager.addEventListener(SDK.SourceMapManager.Events.SourceMapWillAttach, this.sourceMapWillAttach, this),
@@ -214,8 +220,81 @@ export class CompilerScriptMapping {
         }
         return ranges;
     }
-    translateRawFramesStep(_rawFrames, _translatedFrames) {
-        // TODO(crbug.com/433162438): Implement source map stack trace translation.
+    async functionBoundsAtRawLocation(rawLocation) {
+        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, translatedFrames) {
+        const frame = rawFrames[0];
+        if (StackTraceImpl.Trie.isBuiltinFrame(frame)) {
+            return false;
+        }
+        const sourceMapWithScopeInfoForFrame = (rawFrame) => {
+            const script = this.#debuggerModel.scriptForId(rawFrame.scriptId ?? '');
+            if (!script || this.#stubUISourceCodes.has(script)) {
+                // Use fallback while source map is being loaded.
+                return null;
+            }
+            const sourceMap = script.sourceMap();
+            return sourceMap?.hasScopeInfo() ? { sourceMap, script } : null;
+        };
+        const sourceMapAndScript = sourceMapWithScopeInfoForFrame(frame);
+        if (!sourceMapAndScript) {
+            return false;
+        }
+        const { sourceMap, script } = sourceMapAndScript;
+        const { lineNumber, columnNumber } = script.relativeLocationToRawLocation(frame);
+        if (!sourceMap.isOutlinedFrame(lineNumber, columnNumber)) {
+            const frames = sourceMap.translateCallSite(lineNumber, columnNumber);
+            if (!frames.length) {
+                return false;
+            }
+            rawFrames.shift();
+            const result = [];
+            translatedFrames.push(result);
+            const project = this.#sourceMapToProject.get(sourceMap);
+            for (const frame of frames) {
+                // Switch out url for UISourceCode where we have it.
+                const uiSourceCode = frame.url ? project?.uiSourceCodeForURL(frame.url) : undefined;
+                result.push({
+                    ...frame,
+                    url: uiSourceCode ? undefined : frame.url,
+                    uiSourceCode: uiSourceCode ?? undefined,
+                });
+            }
+            return true;
+        }
+        // TODO(crbug.com/433162438): Consolidate outlined frames.
         return false;
     }
     /**
@@ -255,7 +334,7 @@ export class CompilerScriptMapping {
         // Create stub UISourceCode for the time source mapping is being loaded.
         this.addStubUISourceCode(script);
         void this.#debuggerWorkspaceBinding.updateLocations(script);
-        if (Workspace.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(script.sourceURL, { isContentScript: script.isContentScript() })) {
+        if (this.#ignoreListManager.isUserIgnoreListedURL(script.sourceURL, { isContentScript: script.isContentScript() })) {
             this.#sourceMapManager.cancelAttachSourceMap(script);
         }
     }

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/DebuggerWorkspaceBinding.js

@@ -3,8 +3,9 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-// eslint-disable-next-line rulesdir/es-modules-import
+// eslint-disable-next-line @devtools/es-modules-import
 import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import * as Workspace from '../workspace/workspace.js';
 import { CompilerScriptMapping } from './CompilerScriptMapping.js';
@@ -13,19 +14,23 @@ import { DefaultScriptMapping } from './DefaultScriptMapping.js';
 import { LiveLocationWithPool } from './LiveLocation.js';
 import { NetworkProject } from './NetworkProject.js';
 import { ResourceScriptMapping } from './ResourceScriptMapping.js';
-let debuggerWorkspaceBindingInstance;
 export class DebuggerWorkspaceBinding {
     resourceMapping;
     #debuggerModelToData;
     #liveLocationPromises;
     pluginManager;
-    constructor(resourceMapping, targetManager, ignoreListManager) {
+    ignoreListManager;
+    workspace;
+    constructor(resourceMapping, targetManager, ignoreListManager, workspace) {
         this.resourceMapping = resourceMapping;
+        this.resourceMapping.debuggerWorkspaceBinding = this;
+        this.ignoreListManager = ignoreListManager;
+        this.workspace = workspace;
         this.#debuggerModelToData = new Map();
         targetManager.addModelListener(SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.GlobalObjectCleared, this.globalObjectCleared, this);
         targetManager.addModelListener(SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this.debuggerResumed, this);
         targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
-        ignoreListManager.addEventListener("IGNORED_SCRIPT_RANGES_UPDATED" /* Workspace.IgnoreListManager.Events.IGNORED_SCRIPT_RANGES_UPDATED */, event => this.updateLocations(event.data));
+        this.ignoreListManager.addEventListener("IGNORED_SCRIPT_RANGES_UPDATED" /* Workspace.IgnoreListManager.Events.IGNORED_SCRIPT_RANGES_UPDATED */, event => this.updateLocations(event.data));
         this.#liveLocationPromises = new Set();
         this.pluginManager = new DebuggerLanguagePluginManager(targetManager, resourceMapping.workspace, this);
     }
@@ -34,19 +39,18 @@ export class DebuggerWorkspaceBinding {
             modelData.compilerMapping.setFunctionRanges(uiSourceCode, ranges);
         }
     }
-    static instance(opts = { forceNew: null, resourceMapping: null, targetManager: null, ignoreListManager: null }) {
-        const { forceNew, resourceMapping, targetManager, ignoreListManager } = opts;
-        if (!debuggerWorkspaceBindingInstance || forceNew) {
-            if (!resourceMapping || !targetManager || !ignoreListManager) {
+    static instance(opts = { forceNew: null, resourceMapping: null, targetManager: null, ignoreListManager: null, workspace: null }) {
+        const { forceNew, resourceMapping, targetManager, ignoreListManager, workspace } = opts;
+        if (forceNew) {
+            if (!resourceMapping || !targetManager || !ignoreListManager || !workspace) {
                 throw new Error(`Unable to create DebuggerWorkspaceBinding: resourceMapping, targetManager and IgnoreLIstManager must be provided: ${new Error().stack}`);
             }
-            debuggerWorkspaceBindingInstance =
-                new DebuggerWorkspaceBinding(resourceMapping, targetManager, ignoreListManager);
+            Root.DevToolsContext.globalInstance().set(DebuggerWorkspaceBinding, new DebuggerWorkspaceBinding(resourceMapping, targetManager, ignoreListManager, workspace));
         }
-        return debuggerWorkspaceBindingInstance;
+        return Root.DevToolsContext.globalInstance().get(DebuggerWorkspaceBinding);
     }
     static removeInstance() {
-        debuggerWorkspaceBindingInstance = undefined;
+        Root.DevToolsContext.globalInstance().delete(DebuggerWorkspaceBinding);
     }
     async computeAutoStepRanges(mode, callFrame) {
         function contained(location, range) {
@@ -199,11 +203,10 @@ export class DebuggerWorkspaceBinding {
     }
     waitForUISourceCodeAdded(url, target) {
         return new Promise(resolve => {
-            const workspace = Workspace.Workspace.WorkspaceImpl.instance();
-            const descriptor = workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, event => {
+            const descriptor = this.workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, event => {
                 const uiSourceCode = event.data;
                 if (uiSourceCode.url() === url && NetworkProject.targetForUISourceCode(uiSourceCode) === target) {
-                    workspace.removeEventListener(Workspace.Workspace.Events.UISourceCodeAdded, descriptor.listener);
+                    this.workspace.removeEventListener(Workspace.Workspace.Events.UISourceCodeAdded, descriptor.listener);
                     resolve(uiSourceCode);
                 }
             });
@@ -255,6 +258,11 @@ export class DebuggerWorkspaceBinding {
         }
         return [];
     }
+    async functionBoundsAtRawLocation(rawLocation) {
+        // TODO(crbug.com/463452667): first try pluginManager.
+        const modelData = this.#debuggerModelToData.get(rawLocation.debuggerModel);
+        return modelData ? await modelData.functionBoundsAtRawLocation(rawLocation) : null;
+    }
     async normalizeUILocation(uiLocation) {
         const rawLocations = await this.uiLocationToRawLocations(uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber);
         for (const location of rawLocations) {
@@ -455,6 +463,16 @@ class ModelData {
         ranges ??= this.#defaultMapping.uiLocationRangeToRawLocationRanges(uiSourceCode, textRange);
         return ranges;
     }
+    async functionBoundsAtRawLocation(rawLocation) {
+        let scope = 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, translatedFrames) {
         if (!this.compilerMapping.translateRawFramesStep(rawFrames, translatedFrames)) {
             this.#defaultTranslateRawFramesStep(rawFrames, translatedFrames);

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/ResourceMapping.js

@@ -3,11 +3,10 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.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';
 import { ContentProviderBasedProject } from './ContentProviderBasedProject.js';
-import { CSSWorkspaceBinding } from './CSSWorkspaceBinding.js';
-import { DebuggerWorkspaceBinding } from './DebuggerWorkspaceBinding.js';
 import { NetworkProject } from './NetworkProject.js';
 import { resourceMetadata } from './ResourceUtils.js';
 const styleSheetRangeMap = new WeakMap();
@@ -22,12 +21,40 @@ function computeStyleSheetRange(header) {
 export class ResourceMapping {
     workspace;
     #modelToInfo = new Map();
+    #debuggerWorkspaceBinding = null;
+    #cssWorkspaceBinding = null;
     constructor(targetManager, workspace) {
         this.workspace = workspace;
         targetManager.observeModels(SDK.ResourceTreeModel.ResourceTreeModel, this);
     }
+    get debuggerWorkspaceBinding() {
+        // TODO(crbug.com/458180550): Throw when this.#debuggerWorkspaceBinding is null and never return null.
+        //                            The only reason we don't throw and return an instance unconditionally
+        //                            is that unit tests often don't set-up both the *WorkspaceBindings.
+        return this.#debuggerWorkspaceBinding;
+    }
+    /* {@link DebuggerWorkspaceBinding} and ResourceMapping form a cycle so we can't wire it up at ctor time. */
+    set debuggerWorkspaceBinding(debuggerWorkspaceBinding) {
+        if (this.#debuggerWorkspaceBinding) {
+            throw new Error('DebuggerWorkspaceBinding already set');
+        }
+        this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    }
+    get cssWorkspaceBinding() {
+        // TODO(crbug.com/458180550): Throw when this.#cssWorkspaceBinding is null and never return null.
+        //                            The only reason we don't throw and return an instance unconditionally
+        //                            is that unit tests often don't set-up both the *WorkspaceBindings.
+        return this.#cssWorkspaceBinding;
+    }
+    /* {@link CSSWorkspaceBinding} and ResourceMapping form a cycle so we can't wire it up at ctor time. */
+    set cssWorkspaceBinding(cssWorkspaceBinding) {
+        if (this.#cssWorkspaceBinding) {
+            throw new Error('CSSWorkspaceBinding already set');
+        }
+        this.#cssWorkspaceBinding = cssWorkspaceBinding;
+    }
     modelAdded(resourceTreeModel) {
-        const info = new ModelInfo(this.workspace, resourceTreeModel);
+        const info = new ModelInfo(this, resourceTreeModel);
         this.#modelToInfo.set(resourceTreeModel, info);
     }
     modelRemoved(resourceTreeModel) {
@@ -212,6 +239,64 @@ export class ResourceMapping {
         }
         return cssModel.createRawLocationsByURL(uiLocation.uiSourceCode.url(), uiLocation.lineNumber, uiLocation.columnNumber);
     }
+    async functionBoundsAtRawLocation(rawLocation) {
+        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) {
+            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 === 2 /* Formatter.FormatterWorkerPool.ScopeKind.FUNCTION */ ||
+            node.kind === 4 /* 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) {
         const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
         const info = resourceTreeModel ? this.#modelToInfo.get(resourceTreeModel) : null;
@@ -225,9 +310,11 @@ class ModelInfo {
     #bindings = new Map();
     #cssModel;
     #eventListeners;
-    constructor(workspace, resourceTreeModel) {
+    resourceMapping;
+    constructor(resourceMapping, resourceTreeModel) {
         const target = resourceTreeModel.target();
-        this.project = new ContentProviderBasedProject(workspace, 'resources:' + target.id(), Workspace.Workspace.projectTypes.Network, '', false /* isServiceProject */);
+        this.resourceMapping = resourceMapping;
+        this.project = new ContentProviderBasedProject(resourceMapping.workspace, 'resources:' + target.id(), Workspace.Workspace.projectTypes.Network, '', false /* isServiceProject */);
         NetworkProject.setTargetForProject(this.project, target);
         const cssModel = target.model(SDK.CSSModel.CSSModel);
         console.assert(Boolean(cssModel));
@@ -293,7 +380,7 @@ class ModelInfo {
         }
         let binding = this.#bindings.get(resource.url);
         if (!binding) {
-            binding = new Binding(this.project, resource);
+            binding = new Binding(this, resource);
             this.#bindings.set(resource.url, binding);
         }
         else {
@@ -347,9 +434,13 @@ class Binding {
     #project;
     #uiSourceCode;
     #edits = [];
-    constructor(project, resource) {
+    #debuggerWorkspaceBinding;
+    #cssWorkspaceBinding;
+    constructor(modelInfo, resource) {
         this.resources = new Set([resource]);
-        this.#project = project;
+        this.#project = modelInfo.project;
+        this.#debuggerWorkspaceBinding = modelInfo.resourceMapping.debuggerWorkspaceBinding;
+        this.#cssWorkspaceBinding = modelInfo.resourceMapping.cssWorkspaceBinding;
         this.#uiSourceCode = this.#project.createUISourceCode(resource.url, resource.contentType());
         boundUISourceCodes.add(this.#uiSourceCode);
         if (resource.frameId) {
@@ -357,8 +448,8 @@ class Binding {
         }
         this.#project.addUISourceCodeWithProvider(this.#uiSourceCode, this, resourceMetadata(resource), resource.mimeType);
         void Promise.all([
-            ...this.inlineScripts().map(script => DebuggerWorkspaceBinding.instance().updateLocations(script)),
-            ...this.inlineStyles().map(style => CSSWorkspaceBinding.instance().updateLocations(style)),
+            ...this.inlineScripts().map(script => this.#debuggerWorkspaceBinding?.updateLocations(script)),
+            ...this.inlineStyles().map(style => this.#cssWorkspaceBinding?.updateLocations(style)),
         ]);
     }
     inlineStyles() {
@@ -421,7 +512,7 @@ class Binding {
                     continue;
                 }
                 scriptRangeMap.set(script, range.rebaseAfterTextEdit(oldRange, newRange));
-                updatePromises.push(DebuggerWorkspaceBinding.instance().updateLocations(script));
+                updatePromises.push(this.#debuggerWorkspaceBinding?.updateLocations(script));
             }
             for (const style of styles) {
                 const range = styleSheetRangeMap.get(style) ?? computeStyleSheetRange(style);
@@ -429,7 +520,7 @@ class Binding {
                     continue;
                 }
                 styleSheetRangeMap.set(style, range.rebaseAfterTextEdit(oldRange, newRange));
-                updatePromises.push(CSSWorkspaceBinding.instance().updateLocations(style));
+                updatePromises.push(this.#cssWorkspaceBinding?.updateLocations(style));
             }
             await Promise.all(updatePromises);
         }
@@ -450,8 +541,8 @@ class Binding {
     dispose() {
         this.#project.removeUISourceCode(this.#uiSourceCode.url());
         void Promise.all([
-            ...this.inlineScripts().map(script => DebuggerWorkspaceBinding.instance().updateLocations(script)),
-            ...this.inlineStyles().map(style => CSSWorkspaceBinding.instance().updateLocations(style)),
+            ...this.inlineScripts().map(script => this.#debuggerWorkspaceBinding?.updateLocations(script)),
+            ...this.inlineStyles().map(style => this.#cssWorkspaceBinding?.updateLocations(style)),
         ]);
     }
     firstResource() {

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/ResourceScriptMapping.js

@@ -6,6 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 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 Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 import { ContentProviderBasedProject } from './ContentProviderBasedProject.js';
@@ -125,6 +126,43 @@ export class ResourceScriptMapping {
             this.addScript(script);
         }
     }
+    async functionBoundsAtRawLocation(rawLocation) {
+        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) {
+            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 === 2 /* Formatter.FormatterWorkerPool.ScopeKind.FUNCTION */ ||
+            node.kind === 4 /* 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);
+    }
     addScript(script) {
         // Ignore live edit scripts here.
         if (script.isLiveEdit() || script.isBreakpointCondition) {

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/SASSSourceMapping.js

@@ -6,15 +6,16 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 import { ContentProviderBasedProject } from './ContentProviderBasedProject.js';
-import { CSSWorkspaceBinding } from './CSSWorkspaceBinding.js';
 import { NetworkProject } from './NetworkProject.js';
 export class SASSSourceMapping {
     #sourceMapManager;
     #project;
     #eventListeners;
     #bindings;
-    constructor(target, sourceMapManager, workspace) {
+    #cssWorkspaceBinding;
+    constructor(target, sourceMapManager, workspace, cssWorkspaceBinding) {
         this.#sourceMapManager = sourceMapManager;
+        this.#cssWorkspaceBinding = cssWorkspaceBinding;
         this.#project = new ContentProviderBasedProject(workspace, 'cssSourceMaps:' + target.id(), Workspace.Workspace.projectTypes.Network, '', false /* isServiceProject */);
         NetworkProject.setTargetForProject(this.#project, target);
         this.#bindings = new Map();
@@ -38,7 +39,7 @@ export class SASSSourceMapping {
             }
             binding.addSourceMap(sourceMap, header.frameId);
         }
-        await CSSWorkspaceBinding.instance().updateLocations(header);
+        await this.#cssWorkspaceBinding.updateLocations(header);
         this.sourceMapAttachedForTest(sourceMap);
     }
     async sourceMapDetached(event) {
@@ -54,7 +55,7 @@ export class SASSSourceMapping {
                 }
             }
         }
-        await CSSWorkspaceBinding.instance().updateLocations(header);
+        await this.#cssWorkspaceBinding.updateLocations(header);
     }
     rawLocationToUILocation(rawLocation) {
         const header = rawLocation.header();