chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

package/config/typescript/tsconfig.eslint.json

@@ -17,6 +17,7 @@
   },
   "include": [
     "../../front_end/**/*.ts",
+    "../../mcp/**/*.ts",
     "../../inspector_overlay/**/*.ts",
     "../../scripts/**/*.ts",
     "../../test/**/*.ts",

package/docs/styleguide/ux/styles.md

@@ -29,7 +29,7 @@ tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design
 name e.g. `--sys-color-error-container`). They reference palette tokens and
 incorporate light / dark mode switches and should be used in the code directly.
 You can view all system tokens in their light and dark variant when running the
-component server with `npm run components-server` under *Theme Colors*.
+component server on our [component documentation page](https://chromedevtools.github.io/devtools-frontend/#ThemeColors).
 
 [**Application
 tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens.css)

package/eslint.config.mjs

@@ -60,7 +60,7 @@ export default defineConfig([
     'scripts/protocol_typescript/*.js',
     'scripts/deps/tests/fixtures',
     'test/**/fixtures/',
-    'test/e2e/**/*.js',
+    'test/e2e_non_hosted/**/*.js',
     'test/shared/**/*.js',
   ]),
   {

package/front_end/Images/src/arrow-down.svg

@@ -1,3 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.25 3V14.125L7.062 11.938L6 13L10 17L14 13L12.938 11.938L10.75 14.125V3H9.25Z" fill="black"/>
+<g clip-path="url(#clip0_4041_3016)">
+<path d="M9.25 4H10.75V13.125L14.9375 8.9375L16 10L10 16L4 10L5.0625 8.9375L9.25 13.125V4Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4041_3016">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/front_end/Images/src/arrow-up.svg

@@ -1,3 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.25 17V5.875L7.062 8.062L6 7L10 3L14 7L12.938 8.062L10.75 5.875V17H9.25Z" fill="black"/>
+<g clip-path="url(#clip0_4041_3013)">
+<path d="M9.25 16V6.875L5.0625 11.0625L4 10L10 4L16 10L14.9375 11.0625L10.75 6.875V16H9.25Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4041_3013">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/front_end/core/common/ParsedURL.ts

@@ -38,7 +38,7 @@ export function normalizePath(path: string): string {
   return normalizedPath;
 }
 
-export function schemeIs(url: Platform.DevToolsPath.UrlString, scheme: string): boolean {
+export function schemeIs(url: Platform.DevToolsPath.UrlString|URL, scheme: string): boolean {
   try {
     return (new URL(url)).protocol === scheme;
   } catch {

package/front_end/core/common/common.ts

@@ -15,7 +15,6 @@ import * as EventTarget from './EventTarget.js';
 import * as Gzip from './Gzip.js';
 import * as JavaScriptMetaData from './JavaScriptMetaData.js';
 import * as Lazy from './Lazy.js';
-import * as Linkifier from './Linkifier.js';
 import * as MapWithDefault from './MapWithDefault.js';
 import * as Mutex from './Mutex.js';
 import * as ObjectWrapper from './Object.js';
@@ -56,7 +55,6 @@ export {
   Gzip,
   JavaScriptMetaData,
   Lazy,
-  Linkifier,
   MapWithDefault,
   Mutex,
   ObjectWrapper,

package/front_end/core/host/AidaClient.ts

@@ -733,7 +733,7 @@ export function convertToUserTierEnum(userTier: string|undefined): UserTier {
         return UserTier.PUBLIC;
     }
   }
-  return UserTier.BETA;
+  return UserTier.PUBLIC;
 }
 
 let hostConfigTrackerInstance: HostConfigTracker|undefined;

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -549,7 +549,6 @@ export const enum EnumeratedHistogram {
   LighthouseModeRun = 'DevTools.LighthouseModeRun',
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
-  AnimationPlaybackRateChanged = 'DevTools.AnimationPlaybackRateChanged',
   BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -269,11 +269,6 @@ export class UserMetrics {
         EnumeratedHistogram.SwatchActivated, swatch, SwatchType.MAX_VALUE);
   }
 
-  animationPlaybackRateChanged(playbackRate: AnimationsPlaybackRate): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.AnimationPlaybackRateChanged, playbackRate, AnimationsPlaybackRate.MAX_VALUE);
-  }
-
   workspacesPopulated(wallClockTimeInMilliseconds: number): void {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Workspaces.PopulateWallClocktime', wallClockTimeInMilliseconds);

package/front_end/core/platform/HostRuntime.ts

@@ -0,0 +1,18 @@
+// 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 Api from './api/api.js';
+import * as Browser from './browser/browser.js';
+import * as Node from './node/node.js';
+
+export const HOST_RUNTIME = ((): Api.HostRuntime.HostRuntime => {
+  if (Node.HostRuntime.IS_NODE) {
+    return Node.HostRuntime.HOST_RUNTIME;
+  }
+  if (Browser.HostRuntime.IS_BROWSER) {
+    return Browser.HostRuntime.HOST_RUNTIME;
+  }
+
+  throw new Error('Unknown runtime!');
+})();

package/front_end/core/platform/KeyboardUtilities.ts

@@ -29,10 +29,10 @@ export function keyIsArrowKey(key: string): key is ArrowKey {
   return ARROW_KEYS.has(key as ArrowKey);
 }
 
-export function isEscKey(event: KeyboardEvent): boolean {
+export function isEscKey(event: {readonly key: string}): boolean {
   return event.key === 'Escape';
 }
 
-export function isEnterOrSpaceKey(event: KeyboardEvent): boolean {
+export function isEnterOrSpaceKey(event: {readonly key: string}): boolean {
   return event.key === 'Enter' || event.key === ' ';
 }

package/front_end/core/platform/StringUtilities.ts

@@ -584,5 +584,5 @@ export const concatBase64 = function(lhs: string, rhs: string): string {
   }
   const lhsLeaveAsIs = lhs.substring(0, lhs.length - 4);
   const lhsToDecode = lhs.substring(lhs.length - 4);
-  return lhsLeaveAsIs + window.btoa(window.atob(lhsToDecode) + window.atob(rhs));
+  return lhsLeaveAsIs + globalThis.btoa(globalThis.atob(lhsToDecode) + globalThis.atob(rhs));
 };

package/front_end/core/platform/api/HostRuntime.ts

@@ -0,0 +1,20 @@
+// 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.
+
+/**
+ * Provides abstractions for host features that require different implementations depending
+ * on whether DevTools runs in the browser or Node.js
+ */
+export interface HostRuntime {
+  createWorker(url: string): Worker;
+}
+
+/**
+ * Abstracts away the differences between browser web workers and Node.js worker threads.
+ */
+export interface Worker {
+  // TODO(crbug.com/461952544): Actually add some methods here.
+  // Leave one marker method to make this non-empty.
+  dispose?(): void;
+}

package/front_end/core/platform/api/api.ts

@@ -0,0 +1,7 @@
+// 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 * as HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/browser/HostRuntime.ts

@@ -0,0 +1,14 @@
+// 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 Api from '../api/api.js';
+
+export const IS_BROWSER =
+    typeof window !== 'undefined' || (typeof self !== 'undefined' && typeof self.postMessage === 'function');
+
+export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
+  createWorker(): Api.HostRuntime.Worker {
+    throw new Error('unimplemented');
+  }
+};

package/front_end/core/platform/browser/browser.ts

@@ -0,0 +1,7 @@
+// 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 * as HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/node/HostRuntime.ts

@@ -0,0 +1,13 @@
+// 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 Api from '../api/api.js';
+
+export const IS_NODE = typeof (process as unknown) !== 'undefined' && process.versions?.node !== null;
+
+export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
+  createWorker(): Api.HostRuntime.Worker {
+    throw new Error('unimplemented');
+  }
+};

package/front_end/core/platform/node/node.ts

@@ -0,0 +1,7 @@
+// 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 * as HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/platform.ts

@@ -7,7 +7,7 @@ import * as Brand from './Brand.js';
 import * as Constructor from './Constructor.js';
 import * as DateUtilities from './DateUtilities.js';
 import * as DevToolsPath from './DevToolsPath.js';
-import * as DOMUtilities from './DOMUtilities.js';
+import * as HostRuntime from './HostRuntime.js';
 import * as KeyboardUtilities from './KeyboardUtilities.js';
 import * as MapUtilities from './MapUtilities.js';
 import * as MimeType from './MimeType.js';
@@ -31,7 +31,7 @@ export {
   Constructor,
   DateUtilities,
   DevToolsPath,
-  DOMUtilities,
+  HostRuntime,
   KeyboardUtilities,
   MapUtilities,
   MimeType,

package/front_end/core/protocol_client/CDPConnection.ts

@@ -5,10 +5,10 @@
 import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
 
 export type Command = keyof ProtocolMapping.Commands;
-export type CommandParams<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['paramsType'][0];
-export type CommandResult<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['returnType'];
+export type CommandParams<T extends Command> = ProtocolMapping.Commands[T]['paramsType'][0];
+export type CommandResult<T extends Command> = Omit<ProtocolMapping.Commands[T]['returnType'], 'getError'>;
 export type Event = keyof ProtocolMapping.Events;
-export type EventParams<T extends keyof ProtocolMapping.Events> = ProtocolMapping.Events[T];
+export type EventParams<T extends keyof ProtocolMapping.Events> = ProtocolMapping.Events[T][0];
 
 export interface CDPBaseMessage {
   sessionId?: string;

package/front_end/core/protocol_client/DevToolsCDPConnection.ts

@@ -17,7 +17,8 @@ import type {ConnectionTransport} from './ConnectionTransport.js';
 import {InspectorBackend, type MessageError, type QualifiedName, test} from './InspectorBackend.js';
 
 interface CallbackWithDebugInfo {
-  resolve: (response: Awaited<ReturnType<CDPConnection['send']>>) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  resolve: (response: {result: CommandResult<any>}|{error: CDPError}) => void;
   method: string;
   sessionId: string|undefined;
 }

package/front_end/core/sdk/CSSMetadata.ts

@@ -455,11 +455,8 @@ const cornerShapeValuePresetMap = new Map([
 ]);
 
 const valuePresets = new Map([
-  ['filter', filterValuePresetMap],
-  ['backdrop-filter', filterValuePresetMap],
-  ['background', imageValuePresetMap],
-  ['background-image', imageValuePresetMap],
-  ['-webkit-mask-image', imageValuePresetMap],
+  ['filter', filterValuePresetMap], ['backdrop-filter', filterValuePresetMap], ['background', imageValuePresetMap],
+  ['background-image', imageValuePresetMap], ['-webkit-mask-image', imageValuePresetMap],
   [
     'transform',
     new Map([
@@ -486,6 +483,17 @@ const valuePresets = new Map([
     ]),
   ],
   ['corner-shape', cornerShapeValuePresetMap],
+  [
+    'font-variant-alternates',
+    new Map([
+      ['stylistic', 'stylistic(||)'],
+      ['styleset', 'styleset(||)'],
+      ['character-variant', 'character-variant(||)'],
+      ['swash', 'swash(||)'],
+      ['ornaments', 'ornaments(||)'],
+      ['annotation', 'annotation(||)'],
+    ]),
+  ]
 ]);
 
 const distanceProperties = new Set<string>([
@@ -766,6 +774,10 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'ruby',
     ]),
   ],
+  [
+    'font-variant-alternates',
+    new Set(['historical-forms', 'stylistic', 'styleset', 'character-variant', 'swash', 'ornaments', 'annotation'])
+  ],
   ['vertical-align', new Set(['top', 'bottom', '-webkit-baseline-middle'])],
   ['page-break-after', new Set(['left', 'right', 'always', 'avoid'])],
   ['text-emphasis-style', textEmphasisStyle],

package/front_end/core/sdk/NetworkManager.ts

@@ -383,14 +383,6 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return result.status;
   }
 
-  async getIpProtectionProxyStatus(): Promise<Protocol.Network.IpProxyStatus|null> {
-    const result = await this.#networkAgent.invoke_getIPProtectionProxyStatus();
-    if (result.getError()) {
-      return null;
-    }
-    return result.status;
-  }
-
   async enableReportingApi(enable = true): Promise<Promise<Protocol.ProtocolResponseWithError>> {
     return await this.#networkAgent.invoke_enableReportingApi({enable});
   }
@@ -1043,6 +1035,12 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       appliedNetworkConditionsId,
     };
     this.getExtraInfoBuilder(requestId).addRequestExtraInfo(extraRequestInfo);
+
+    const networkRequest = this.#requestsById.get(requestId);
+    if (appliedNetworkConditionsId && networkRequest) {
+      networkRequest.setAppliedNetworkConditions(appliedNetworkConditionsId);
+      this.updateNetworkRequest(networkRequest);
+    }
   }
 
   responseReceivedEarlyHints({

package/front_end/core/sdk/NetworkRequest.ts

@@ -1629,6 +1629,10 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     );
   }
 
+  setAppliedNetworkConditions(appliedNetworkConditionsId: string): void {
+    this.#appliedNetworkConditionsId = appliedNetworkConditionsId;
+  }
+
   hasExtraRequestInfo(): boolean {
     return this.#hasExtraRequestInfo;
   }

package/front_end/core/sdk/SDKModel.ts

@@ -12,7 +12,9 @@ export interface RegistrationInfo {
   early?: boolean;
 }
 
-const registeredModels = new Map<new (arg1: Target) => SDKModel, RegistrationInfo>();
+export type SDKModelConstructor<T extends SDKModel = SDKModel> = new (target: Target) => T;
+
+const registeredModels = new Map<SDKModelConstructor, RegistrationInfo>();
 
 // TODO(crbug.com/1228674) Remove defaults for generic type parameters once
 //                         all event emitters and sinks have been migrated.
@@ -52,7 +54,7 @@ export class SDKModel<Events = any> extends Common.ObjectWrapper.ObjectWrapper<E
   dispose(): void {
   }
 
-  static register(modelClass: new(arg1: Target) => SDKModel, registrationInfo: RegistrationInfo): void {
+  static register(modelClass: SDKModelConstructor, registrationInfo: RegistrationInfo): void {
     if (registrationInfo.early && !registrationInfo.autostart) {
       throw new Error(`Error registering model ${modelClass.name}: early models must be autostarted.`);
     }

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -26,35 +26,114 @@ export class SourceMapScopesInfo {
   }
 
   /**
-   * If the source map does not contain any scopes information, this factory function attempts to create bare bones scope information
+   * If the source map does not contain any scopes information, this factory function attempts to create scope information
    * via the script's AST combined with the mappings.
    *
    * We create the generated ranges from the scope tree and for each range we create an original scope that matches the bounds 1:1.
-   * We don't map the bounds via mappings as mappings are often iffy and it's not strictly required to translate stack traces where we
-   * map call-sites separately.
    */
   static createFromAst(
       sourceMap: SourceMap, scopeTree: Formatter.FormatterWorkerPool.ScopeTreeNode,
       text: TextUtils.Text.Text): SourceMapScopesInfo {
-    const {scope, range} = convertScope(scopeTree, undefined, undefined);
-    return new SourceMapScopesInfo(sourceMap, {scopes: [scope], ranges: [range]});
+    const numSourceUrls = sourceMap.sourceURLs().length;
+    const scopeBySourceUrl: ScopesCodec.OriginalScope[] = [];
+    for (let i = 0; i < numSourceUrls; i++) {
+      const scope: ScopesCodec.OriginalScope = {
+        start: {line: 0, column: 0},
+        end: {line: Number.POSITIVE_INFINITY, column: Number.POSITIVE_INFINITY},
+        isStackFrame: false,
+        variables: [],
+        children: [],
+      };
+      scopeBySourceUrl.push(scope);
+    }
+
+    // Convert the entire scopeTree. Returns a root range that encompasses everything,
+    // and inserts scopes by sourceIndex into the above scopeBySourceUrl.
+    const {range} = convertScope(scopeTree, undefined);
+    return new SourceMapScopesInfo(sourceMap, {scopes: scopeBySourceUrl, ranges: [range]});
+
+    /**
+     * Recursively finds the correct place in the tree to insert the new scope.
+     * Maintains the invariant that children are sorted and contained by their parent.
+     */
+    function insertInScope(parent: ScopesCodec.OriginalScope, newScope: ScopesCodec.OriginalScope): void {
+      // Check if the newScope fits strictly inside any of the existing children.
+      for (const child of parent.children) {
+        if (contains(child, newScope)) {
+          insertInScope(child, newScope);
+          return;
+        }
+      }
+
+      // When here, newScope belongs directly in parent.
+      // However, newScope might encompass some of parent's existing children (due
+      // to compiler transform quirks or arbitrary insertion order). We must move
+      // those children inside newScope.
+      const childrenToKeep: ScopesCodec.OriginalScope[] = [];
+      for (const child of parent.children) {
+        if (contains(newScope, child)) {
+          // child is actually inside newScope, so re-parent it.
+          newScope.children.push(child);
+          child.parent = newScope;
+        } else {
+          childrenToKeep.push(child);
+        }
+      }
+
+      // Find the correct index in the remaining children to insert newScope.
+      // We look for the first child that starts after the new scope.
+      const insertIndex = childrenToKeep.findIndex(child => compareScopes(newScope, child) < 0);
+      if (insertIndex === -1) {
+        // If no child starts after, it goes at the end.
+        childrenToKeep.push(newScope);
+      } else {
+        childrenToKeep.splice(insertIndex, 0, newScope);
+      }
+
+      // Update parent's children to only be the ones that don't belong to newScope.
+      parent.children = childrenToKeep;
+      newScope.parent = parent;
+    }
+
+    function contains(outer: ScopesCodec.OriginalScope, inner: ScopesCodec.OriginalScope): boolean {
+      return comparePositions(outer.start, inner.start) <= 0 && comparePositions(outer.end, inner.end) >= 0;
+    }
+
+    function compareScopes(a: ScopesCodec.OriginalScope, b: ScopesCodec.OriginalScope): number {
+      return comparePositions(a.start, b.start);
+    }
+
+    function comparePositions(a: ScopesCodec.Position, b: ScopesCodec.Position): number {
+      if (a.line !== b.line) {
+        return a.line - b.line;
+      }
+      return a.column - b.column;
+    }
 
     function convertScope(
-        node: Formatter.FormatterWorkerPool.ScopeTreeNode, parentScope: ScopesCodec.OriginalScope|undefined,
-        parentRange: ScopesCodec.GeneratedRange|
-        undefined): {scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange} {
+        node: Formatter.FormatterWorkerPool.ScopeTreeNode,
+        parentRange: ScopesCodec.GeneratedRange|undefined): {range: ScopesCodec.GeneratedRange} {
       const start = positionFromOffset(node.start);
       const end = positionFromOffset(node.end);
+      const startEntry = sourceMap.findEntry(start.line, start.column);
+      const endEntry = sourceMap.findEntry(end.line, end.column);
+      const sourceIndex = startEntry?.sourceIndex;
+      const canMapOriginalPosition = startEntry && endEntry && sourceIndex !== undefined &&
+          startEntry.sourceIndex === endEntry.sourceIndex && startEntry.sourceIndex !== undefined && sourceIndex >= 0 &&
+          sourceIndex < numSourceUrls;
       const isStackFrame = node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION;
 
-      const scope: ScopesCodec.OriginalScope = {
-        start,
-        end,
-        name: sourceMap.findEntry(start.line, start.column, 0)?.name,
-        isStackFrame,
-        variables: [],
-        children: [],
-      };
+      let scope: ScopesCodec.OriginalScope|undefined;
+      if (canMapOriginalPosition) {
+        scope = {
+          start: {line: startEntry.sourceLineNumber, column: startEntry.sourceColumnNumber},
+          end: {line: endEntry.sourceLineNumber, column: endEntry.sourceColumnNumber},
+          name: startEntry.name,
+          isStackFrame,
+          variables: [],
+          children: [],
+        };
+      }
 
       const range: ScopesCodec.GeneratedRange = {
         start,
@@ -67,11 +146,14 @@ export class SourceMapScopesInfo {
       };
 
       parentRange?.children.push(range);
-      parentScope?.children.push(scope);
+      if (canMapOriginalPosition && scope) {
+        const rootScope = scopeBySourceUrl[sourceIndex];
+        insertInScope(rootScope, scope);
+      }
 
-      node.children.forEach(child => convertScope(child, scope, range));
+      node.children.forEach(child => convertScope(child, range));
 
-      return {scope, range};
+      return {range};
     }
 
     function positionFromOffset(offset: number): ScopesCodec.Position {
@@ -347,7 +429,16 @@ export class SourceMapScopesInfo {
   /**
    * Returns the authored function name of the function containing the provided generated position.
    */
-  findOriginalFunctionName({line, column}: ScopesCodec.Position): string|null {
+  findOriginalFunctionName(position: ScopesCodec.Position): string|null {
+    const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope ?? undefined;
+    return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope);
+  }
+
+  /**
+   * Returns the authored function scope of the function containing the provided generated position.
+   */
+  findOriginalFunctionScope({line, column}: ScopesCodec.Position):
+      {scope: ScopesCodec.OriginalScope, url?: Platform.DevToolsPath.UrlString}|null {
     // There are 2 approaches:
     //   1) Find the inner-most generated range containing the provided generated position
     //      and use it's OriginalScope (then walk it outwards until we hit a function).
@@ -376,7 +467,24 @@ export class SourceMapScopesInfo {
               .at(-1);
     }
 
-    return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope) ?? null;
+    if (!originalInnerMostScope) {
+      return null;
+    }
+
+    const functionScope = this.#findFunctionScopeInOriginalScopeChain(originalInnerMostScope);
+    if (!functionScope) {
+      return null;
+    }
+
+    // Find the root scope for some given original source, to get the source url.
+    let rootScope: ScopesCodec.OriginalScope = functionScope;
+    while (rootScope.parent) {
+      rootScope = rootScope.parent;
+    }
+    const sourceIndex = this.#originalScopes.indexOf(rootScope);
+    const url = sourceIndex !== -1 ? this.#sourceMap.sourceURLForSourceIndex(sourceIndex) : undefined;
+
+    return functionScope ? {scope: functionScope, url} : null;
   }
 
   /**
@@ -403,15 +511,25 @@ export class SourceMapScopesInfo {
     return result;
   }
 
-  #findFunctionNameInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined): string|null {
+  #findFunctionScopeInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined):
+      ScopesCodec.OriginalScope|null {
     for (let originalScope = innerOriginalScope; originalScope; originalScope = originalScope.parent) {
       if (originalScope.isStackFrame) {
-        return originalScope.name ?? '';
+        return originalScope;
       }
     }
     return null;
   }
 
+  #findFunctionNameInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined): string|null {
+    const functionScope = this.#findFunctionScopeInOriginalScopeChain(innerOriginalScope);
+    if (!functionScope) {
+      return null;
+    }
+
+    return functionScope.name ?? '';
+  }
+
   /**
    * Returns one or more original stack frames for this single "raw frame" or call-site.
    *

package/front_end/core/sdk/Target.ts

@@ -7,7 +7,7 @@ import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 
-import {SDKModel} from './SDKModel.js';
+import {SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import type {TargetManager} from './TargetManager.js';
 
 export class Target extends ProtocolClient.InspectorBackend.TargetBase {
@@ -111,20 +111,11 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     this.#targetInfo = targetInfo;
   }
 
-  createModels(required: Set<new(arg1: Target) => SDKModel>): void {
+  /** Creates the models in the order in which they are provided */
+  createModels(models: SDKModelConstructor[]): void {
     this.#creatingModels = true;
-    const registeredModels = Array.from(SDKModel.registeredModels.entries());
-    // Create early models.
-    for (const [modelClass, info] of registeredModels) {
-      if (info.early) {
-        this.model(modelClass);
-      }
-    }
-    // Create autostart and required models.
-    for (const [modelClass, info] of registeredModels) {
-      if (info.autostart || required.has(modelClass)) {
-        this.model(modelClass);
-      }
+    for (const model of models) {
+      this.model(model);
     }
     this.#creatingModels = false;
   }