chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/docs/ui_engineering.md

@@ -812,6 +812,165 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+## Binding an action to a button
+
+Use the `bindToAction` directive to create a button that is bound to a registered action. The button's properties (e.g., `title`, `disabled`) will be automatically updated when the action's state changes.
+
+**Before:**
+```typescript
+class SomeWidget extends UI.Widget.Widget implements UI.Toolbar.ItemsProvider {
+  constructor() {
+    super();
+    this.toolbarItemsInternal = [];
+    this.toolbarItemsInternal.push(UI.Toolbar.Toolbar.createActionButton('elements.refresh-event-listeners'));
+  }
+
+  toolbarItems(): UI.Toolbar.ToolbarItem[] {
+    return this.toolbarItemsInternal;
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  const {bindToAction} = UI.UIUtils;
+  render(html`
+    <div>
+      <devtools-toolbar>
+        <devtools-button ${bindToAction('elements.refresh-event-listeners')}></devtools-button>
+      </devtools-toolbar>
+    </div>`,
+    target, {host: input});
+};
+```
+
+## Binding a setting to a checkbox
+
+Use the `bindToSetting` directive to bind a boolean setting to a `<devtools-checkbox>` component.
+
+**Before:**
+```typescript
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const toolbar = this.contentElement.createChild('devtools-toolbar');
+    const showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('show-all-properties', false);
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
+        showAllPropertiesSetting, i18nString(UIStrings.showAllTooltip), i18nString(UIStrings.showAll)));
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  const {bindToSetting} = UI.SettingsUI;
+  const showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('show-all-properties', false);
+  render(html`
+    <div>
+      <devtools-toolbar>
+        <devtools-checkbox title=${i18nString(UIStrings.showAllTooltip)} ${bindToSetting(showAllPropertiesSetting)}>
+          ${i18nString(UIStrings.showAll)}
+        </devtools-checkbox>
+      </devtools-toolbar>
+    </div>`,
+    target, {host: input});
+};
+```
+
+## Migrating `UI.Toolbar.ToolbarComboBox`
+
+Replace the imperative creation of a `ToolbarComboBox` with a declarative `<select>` element.
+
+**Before:**
+```typescript
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const toolbar = this.contentElement.createChild('devtools-toolbar');
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarComboBox(
+       this.someToolbarComboBoxClicked.bind(this), 'Combox',
+       'the-toolbar-combox', 'some-toolbar-combox'));
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html`
+    <div>
+      <devtools-toolbar>
+        <select class="the-toolbar-combox" title="Combox" aria-label="Combox"
+            jslog=${VisualLogging.dropDown('some-toolbar-combox').track({change: true})}
+            @change=${this.someToolbarComboBoxClicked.bind(this)}></select>
+      </devtools-toolbar>
+    </div>`,
+    target, {host: input});
+};
+```
+
+## Migrating various Toolbar items
+
+Replace various imperative `UI.Toolbar` methods like `appendSeparator`, `appendSpacer`, and `setEnabled` with their declarative equivalents.
+
+**Before:**
+```typescript
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const toolbar = this.contentElement.createChild('devtools-toolbar');
+    toolbar.wrappable = true;
+    toolbar.appendSeparator();
+    const combo = new UI.Toolbar.ToolbarComboBox(this.onSelect.bind(this), 'aria-label', undefined, 'combo-box');
+    combo.createOption('Option 1', '1', 'option-1');
+    const option2 = document.createElement('option');
+    option2.value = '2';
+    option2.textContent = 'Option 2';
+    combo.addOption(option2);
+    toolbar.appendToolbarItem(combo);
+    toolbar.appendSpacer();
+    const button = new UI.Toolbar.ToolbarButton('Click me', 'largeicon-add');
+    button.setEnabled(false);
+    toolbar.appendToolbarItem(button);
+    const otherButton = new UI.Toolbar.ToolbarButton('Other button', 'largeicon-delete');
+    otherButton.setEnabled(this.isEnabled);
+    toolbar.appendToolbarItem(otherButton);
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator());
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(false));
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(true));
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html`
+    <div>
+      <devtools-toolbar wrappable>
+        <div class="toolbar-divider"></div>
+        <select title="aria-label" aria-label="aria-label"
+            jslog=${VisualLogging.dropDown('combo-box').track({change: true})}
+            @change=${this.onSelect.bind(this)}>
+          <option value="1" jslog=${VisualLogging.item('option-1').track({click: true})}>Option 1</option>
+          <option value="2">Option 2</option>
+        </select>
+        <div class="toolbar-spacer"></div>
+        <devtools-button title="Click me" .variant=${Buttons.Button.Variant.TOOLBAR}
+            .iconName=${'largeicon-add'} disabled></devtools-button>
+        <devtools-button title="Other button" ?disabled=${!this.isEnabled}
+            .variant=${Buttons.Button.Variant.TOOLBAR} .iconName=${'largeicon-delete'}></devtools-button>
+        <div class="toolbar-divider"></div>
+        <div class="toolbar-divider"></div>
+        <div class="toolbar-spacer"></div>
+      </devtools-toolbar>
+    </div>`,
+    target, {host: input});
+};
+```
+
 ## Migrating `iframe` creation
 
 Replace `document.createElement('iframe')` and `setAttribute` calls with a declarative `<iframe>` tag in a lit-html template.

package/eslint.config.mjs

@@ -646,7 +646,12 @@ export default defineConfig([
       'rulesdir/check-css-import': 'error',
       'rulesdir/enforce-optional-properties-last': 'error',
       'rulesdir/check-enumerated-histograms': 'error',
-      'rulesdir/check-was-shown-methods': 'error',
+      'rulesdir/require-super-calls-in-overridden-methods': [
+        'error',
+        {
+          methodNames: ['wasShown', 'willHide'],
+        },
+      ],
       'rulesdir/static-custom-event-names': 'error',
       'rulesdir/lit-no-attribute-quotes': 'error',
       'rulesdir/lit-template-result-or-nothing': 'error',

package/front_end/core/host/UserMetrics.ts

@@ -514,7 +514,8 @@ export enum Action {
   AiCodeCompletionSuggestionAccepted = 187,
   AiCodeCompletionError = 188,
   AttributeLinkClicked = 189,
-  MAX_VALUE = 190,
+  InsightRequestedViaTeaser = 190,
+  MAX_VALUE = 191,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/i18n/i18nImpl.ts

@@ -68,7 +68,7 @@ export async function fetchAndRegisterLocaleData(
     locale: Intl.UnicodeBCP47LocaleIdentifier, location = self.location.toString()): Promise<void> {
   const localeDataTextPromise = fetch(getLocaleFetchUrl(locale, location)).then(result => result.json());
   const timeoutPromise =
-      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 2500));
+      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
   const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }
@@ -81,6 +81,11 @@ export function resetLocaleDataForTest(): void {
   i18nInstance.resetLocaleDataForTest();
 }
 
+export function registerLocaleDataForTest(
+    locale: Intl.UnicodeBCP47LocaleIdentifier, messages: I18n.I18n.LocalizedMessages): void {
+  i18nInstance.registerLocaleData(locale, messages);
+}
+
 /**
  * Returns an anonymous function that wraps a call to retrieve a localized string.
  * This is introduced so that localized strings can be declared in environments where

package/front_end/core/protocol_client/protocol_client.ts

@@ -15,7 +15,7 @@ export {
 // Create the global here because registering commands will involve putting
 // items onto the global.
 // @ts-expect-error Global namespace instantiation
-self.Protocol = self.Protocol || {};
+globalThis.Protocol = globalThis.Protocol || {};
 
 // FIXME: This instance of InspectorBackend should not be a side effect of importing this module.
 InspectorBackendCommands.registerCommands(InspectorBackend.inspectorBackend);

package/front_end/core/root/Runtime.ts

@@ -4,12 +4,11 @@
 
 import * as Platform from '../platform/platform.js';
 
-const queryParamsObject = new URLSearchParams(location.search);
-
 let runtimePlatform = '';
 
 let runtimeInstance: Runtime|undefined;
 let isNode: boolean|undefined;
+let isTraceAppEntry: boolean|undefined;
 
 /**
  * Returns the base URL (similar to `<base>`).
@@ -71,12 +70,21 @@ export class Runtime {
     runtimeInstance = undefined;
   }
 
+  static queryParamsObject: URLSearchParams;
+
+  static getSearchParams(): URLSearchParams {
+    if (!Runtime.queryParamsObject) {
+      Runtime.queryParamsObject = new URLSearchParams(location.search);
+    }
+    return Runtime.queryParamsObject;
+  }
+
   static queryParam(name: string): string|null {
-    return queryParamsObject.get(name);
+    return Runtime.getSearchParams().get(name);
   }
 
   static setQueryParamForTesting(name: string, value: string): void {
-    queryParamsObject.set(name, value);
+    Runtime.getSearchParams().set(name, value);
   }
 
   static isNode(): boolean {
@@ -86,6 +94,17 @@ export class Runtime {
     return isNode;
   }
 
+  /**
+   * Returns true if viewing the slimmed-down devtools meant for just viewing a
+   * performance trace, e.g. devtools://devtools/bundled/trace_app.html?traceURL=http://...
+   */
+  static isTraceApp(): boolean {
+    if (isTraceAppEntry === undefined) {
+      isTraceAppEntry = getPathName().includes('trace_app');
+    }
+    return isTraceAppEntry;
+  }
+
   static setPlatform(platform: string): void {
     runtimePlatform = platform;
   }
@@ -504,6 +523,18 @@ interface DevToolsStartingStyleDebugging {
   enabled: boolean;
 }
 
+interface AiPromptApi {
+  enabled: boolean;
+}
+
+interface DevToolsIndividualRequestThrottling {
+  enabled: boolean;
+}
+
+export interface DevToolsEnableDurableMessages {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -531,6 +562,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
   devToolsPrivacyUI: HostConfigPrivacyUI,
+  devToolsIndividualRequestThrottling: DevToolsIndividualRequestThrottling,
   devToolsIpProtectionPanelInDevTools: HostConfigIPProtection,
   /**
    * OffTheRecord here indicates that the user's profile is either incognito,
@@ -550,6 +582,8 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsLiveEdit: LiveEdit,
   devToolsFlexibleLayout: DevToolsFlexibleLayout,
   devToolsStartingStyleDebugging: DevToolsStartingStyleDebugging,
+  devToolsAiPromptApi: AiPromptApi,
+  devToolsEnableDurableMessages: DevToolsEnableDurableMessages,
 }>;
 
 /**

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -447,7 +447,7 @@ export class CSSMatchedStyles {
     if (!addedAttributesStyle) {
       addAttributesStyle.call(this);
     }
-    nodeCascades.push(new NodeCascade(this, nodeStyles, false /* #isInherited */));
+    nodeCascades.push(new NodeCascade(this, nodeStyles, this.#node, false /* #isInherited */));
 
     // Walk the node structure and identify styles with inherited properties.
     let parentNode: (DOMNode|null) = this.#node.parentNode;
@@ -514,8 +514,9 @@ export class CSSMatchedStyles {
         inheritedStyles.push(inheritedRule.style);
         this.#inheritedStyles.add(inheritedRule.style);
       }
+      const node = parentNode;
       parentNode = await traverseParentInFlatTree(parentNode);
-      nodeCascades.push(new NodeCascade(this, inheritedStyles, true /* #isInherited */));
+      nodeCascades.push(new NodeCascade(this, inheritedStyles, node, true /* #isInherited */));
     }
 
     return new DOMInheritanceCascade(this, nodeCascades, this.#registeredProperties);
@@ -556,7 +557,8 @@ export class CSSMatchedStyles {
     }
 
     for (const [highlightName, highlightStyles] of splitHighlightRules) {
-      const nodeCascade = new NodeCascade(this, highlightStyles, isInherited, true /* #isHighlightPseudoCascade*/);
+      const nodeCascade =
+          new NodeCascade(this, highlightStyles, node, isInherited, true /* #isHighlightPseudoCascade*/);
       const cascadeListForHighlightName = pseudoCascades.get(highlightName);
       if (cascadeListForHighlightName) {
         cascadeListForHighlightName.push(nodeCascade);
@@ -601,7 +603,8 @@ export class CSSMatchedStyles {
         }
         const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
         const nodeCascade = new NodeCascade(
-            this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+            this, pseudoStyles, this.#node, false /* #isInherited */,
+            isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
         pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
       }
     }
@@ -629,7 +632,8 @@ export class CSSMatchedStyles {
 
             const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
             const nodeCascade = new NodeCascade(
-                this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                this, pseudoStyles, parentNode, true /* #isInherited */,
+                isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
             const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
             if (cascadeListForPseudoType) {
               cascadeListForPseudoType.push(nodeCascade);
@@ -960,13 +964,15 @@ class NodeCascade {
   readonly #isHighlightPseudoCascade: boolean;
   readonly propertiesState = new Map<CSSProperty, PropertyState>();
   readonly activeProperties = new Map<string, CSSProperty>();
+  readonly #node: DOMNode;
   constructor(
-      matchedStyles: CSSMatchedStyles, styles: CSSStyleDeclaration[], isInherited: boolean,
+      matchedStyles: CSSMatchedStyles, styles: CSSStyleDeclaration[], node: DOMNode, isInherited: boolean,
       isHighlightPseudoCascade = false) {
     this.#matchedStyles = matchedStyles;
     this.styles = styles;
     this.#isInherited = isInherited;
     this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
+    this.#node = node;
   }
 
   computeActiveProperties(): void {
@@ -1026,9 +1032,46 @@ class NodeCascade {
     }
   }
 
+  #treeScopeDistance(property: CSSProperty): number {
+    if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+      return -1;
+    }
+    const root = this.#node.getTreeRoot();
+    const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+    if (nodeId === undefined) {
+      return -1;
+    }
+
+    let distance = 0;
+    for (let ancestor: DOMNode|null = this.#node; ancestor; ancestor = ancestor.parentNode) {
+      if (ancestor.backendNodeId() === nodeId) {
+        return distance;
+      }
+      distance++;
+    }
+    return -1;
+  }
+
+  #needsCascadeContextStep(): boolean {
+    if (!this.#node.isInShadowTree()) {
+      return false;
+    }
+
+    if (this.#node.ancestorShadowRoot()?.shadowRootType() === 'user-agent') {
+      // In UA shadow dom, only standards-track pseudo elements override style attributes. -webkit-* and -internal-*
+      // pseudos are still exempt from that to retain legacy behavior.
+      const pseudoElement = this.#node.getAttribute('pseudo');
+      return !pseudoElement?.startsWith('-webkit-') && !pseudoElement?.startsWith('-internal-');
+    }
+
+    return true;
+  }
+
   private updatePropertyState(propertyWithHigherSpecificity: CSSProperty, canonicalName: string): void {
     const activeProperty = this.activeProperties.get(canonicalName);
-    if (activeProperty?.important && !propertyWithHigherSpecificity.important) {
+    if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
+        activeProperty && this.#needsCascadeContextStep() &&
+            this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
       this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.OVERLOADED);
       return;
     }

package/front_end/core/sdk/CSSRule.ts

@@ -26,15 +26,18 @@ export class CSSRule {
   readonly origin: Protocol.CSS.StyleSheetOrigin;
   readonly style: CSSStyleDeclaration;
   readonly header: CSSStyleSheetHeader|null;
+  readonly treeScope: Protocol.DOM.BackendNodeId|undefined;
 
   constructor(cssModel: CSSModel, payload: {
     style: Protocol.CSS.CSSStyle,
     origin: Protocol.CSS.StyleSheetOrigin,
+    originTreeScopeNodeId: Protocol.DOM.BackendNodeId|undefined,
     header: CSSStyleSheetHeader|null,
   }) {
     this.header = payload.header;
     this.cssModelInternal = cssModel;
     this.origin = payload.origin;
+    this.treeScope = payload.originTreeScopeNodeId;
     this.style = new CSSStyleDeclaration(this.cssModelInternal, this, payload.style, Type.Regular);
   }
 
@@ -112,7 +115,12 @@ export class CSSStyleRule extends CSSRule {
   startingStyles: CSSStartingStyle[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
-    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: payload.originTreeScopeNodeId
+    });
     this.reinitializeSelectors(payload.selectorList);
     this.nestingSelectors = payload.nestingSelectors;
     this.media = payload.media ? CSSMedia.parseMediaArrayPayload(cssModel, payload.media) : [];
@@ -224,7 +232,12 @@ export class CSSStyleRule extends CSSRule {
 export class CSSPropertyRule extends CSSRule {
   #name: CSSValue;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPropertyRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined,
+    });
     this.#name = new CSSValue(payload.propertyName);
   }
 
@@ -258,7 +271,12 @@ export class CSSPropertyRule extends CSSRule {
 export class CSSFontPaletteValuesRule extends CSSRule {
   readonly #paletteName: CSSValue;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFontPaletteValuesRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
     this.#paletteName = new CSSValue(payload.fontPaletteName);
   }
 
@@ -289,7 +307,12 @@ export class CSSKeyframeRule extends CSSRule {
   #keyText!: CSSValue;
   #parentRuleName: string;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframeRule, parentRuleName: string) {
-    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
     this.reinitializeKey(payload.keyText);
     this.#parentRuleName = parentRuleName;
   }
@@ -340,7 +363,12 @@ export class CSSPositionTryRule extends CSSRule {
   readonly #name: CSSValue;
   readonly #active: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPositionTryRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
     this.#name = new CSSValue(payload.name);
     this.#active = payload.active;
   }
@@ -372,7 +400,8 @@ export class CSSFunctionRule extends CSSRule {
     super(cssModel, {
       origin: payload.origin,
       style: {cssProperties: [], shorthandEntries: []},
-      header: styleSheetHeaderForRule(cssModel, payload)
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
     });
     this.#name = new CSSValue(payload.name);
     this.#parameters = payload.parameters.map(({name}) => name);

package/front_end/core/sdk/Connections.ts

@@ -272,9 +272,10 @@ export async function initMainConnection(
 
 function createMainConnection(onConnectionLost: (message: Platform.UIString.LocalizedString) => void):
     ProtocolClient.InspectorBackend.Connection {
-  if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
+  if (Root.Runtime.Runtime.isTraceApp()) {
     return new RehydratingConnection(onConnectionLost);
   }
+
   const wsParam = Root.Runtime.Runtime.queryParam('ws');
   const wssParam = Root.Runtime.Runtime.queryParam('wss');
   if (wsParam || wssParam) {

package/front_end/core/sdk/DOMModel.ts

@@ -480,6 +480,10 @@ export class DOMNode {
     return this.#isInShadowTree;
   }
 
+  getTreeRoot(): DOMNode {
+    return this.isShadowRoot() ? this : (this.ancestorShadowRoot() ?? this.ownerDocument ?? this);
+  }
+
   ancestorShadowHost(): DOMNode|null {
     const ancestorShadowRoot = this.ancestorShadowRoot();
     return ancestorShadowRoot ? ancestorShadowRoot.parentNode : null;

package/front_end/core/sdk/DebuggerModel.ts

@@ -16,6 +16,7 @@ import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTr
 import {type EvaluationOptions, type EvaluationResult, type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {Script} from './Script.js';
 import {SDKModel} from './SDKModel.js';
+import {SourceMap} from './SourceMap.js';
 import {SourceMapManager} from './SourceMapManager.js';
 import {Capability, type Target, Type} from './Target.js';
 
@@ -169,7 +170,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.agent = target.debuggerAgent();
     this.#runtimeModel = (target.model(RuntimeModel) as RuntimeModel);
 
-    this.#sourceMapManager = new SourceMapManager(target);
+    this.#sourceMapManager = new SourceMapManager(
+        target,
+        (compiledURL, sourceMappingURL, payload, script) =>
+            new SourceMap(compiledURL, sourceMappingURL, payload, script));
 
     Common.Settings.Settings.instance()
         .moduleSetting('pause-on-exception-enabled')