chrome-devtools-frontend 1.0.981004 → 1.0.995227

package/front_end/core/sdk/CSSModel.ts

@@ -63,7 +63,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   readonly #sourceMapManager: SourceMapManager<CSSStyleSheetHeader>;
   readonly #styleLoader: ComputedStyleLoader;
   readonly #stylePollingThrottler: Common.Throttler.Throttler;
-  readonly #styleSheetIdsForURL: Map<string, Map<string, Set<Protocol.CSS.StyleSheetId>>>;
+  readonly #styleSheetIdsForURL: Map<Platform.DevToolsPath.UrlString, Map<string, Set<Protocol.CSS.StyleSheetId>>>;
   readonly #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
   #cachedMatchedCascadeNode: DOMNode|null;
   #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
@@ -111,7 +111,7 @@ export class CSSModel extends SDKModel<EventTypes> {
         .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
   }
 
-  headersForSourceURL(sourceURL: string): CSSStyleSheetHeader[] {
+  headersForSourceURL(sourceURL: Platform.DevToolsPath.UrlString): CSSStyleSheetHeader[] {
     const headers = [];
     for (const headerId of this.getStyleSheetIdsForURL(sourceURL)) {
       const header = this.styleSheetHeaderForId(headerId);
@@ -122,7 +122,9 @@ export class CSSModel extends SDKModel<EventTypes> {
     return headers;
   }
 
-  createRawLocationsByURL(sourceURL: string, lineNumber: number, columnNumber: number|undefined = 0): CSSLocation[] {
+  createRawLocationsByURL(
+      sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number,
+      columnNumber: number|undefined = 0): CSSLocation[] {
     const headers = this.headersForSourceURL(sourceURL);
     headers.sort(stylesheetComparator);
     const endIndex = Platform.ArrayUtilities.upperBound(
@@ -303,7 +305,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     return new CSSMatchedStyles(
         this, (node as DOMNode), response.inlineStyle || null, response.attributesStyle || null,
         response.matchedCSSRules || [], response.pseudoElements || [], response.inherited || [],
-        response.cssKeyframesRules || []);
+        response.inheritedPseudoElements || [], response.cssKeyframesRules || []);
   }
 
   async getClassNames(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string[]> {
@@ -602,7 +604,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
   }
 
-  getStyleSheetIdsForURL(url: string): Protocol.CSS.StyleSheetId[] {
+  getStyleSheetIdsForURL(url: Platform.DevToolsPath.UrlString): Protocol.CSS.StyleSheetId[] {
     const frameIdToStyleSheetIds = this.#styleSheetIdsForURL.get(url);
     if (!frameIdToStyleSheetIds) {
       return [];
@@ -628,7 +630,7 @@ export class CSSModel extends SDKModel<EventTypes> {
 
     await this.ensureOriginalStyleSheetText(styleSheetId);
     const response = await this.agent.invoke_setStyleSheetText({styleSheetId: header.id, text: newText});
-    const sourceMapURL = response.sourceMapURL;
+    const sourceMapURL = response.sourceMapURL as Platform.DevToolsPath.UrlString;
 
     this.#sourceMapManager.detachSourceMap(header);
     header.setSourceMapURL(sourceMapURL);
@@ -830,7 +832,7 @@ export class Edit {
 export class CSSLocation {
   readonly #cssModelInternal: CSSModel;
   styleSheetId: Protocol.CSS.StyleSheetId;
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   lineNumber: number;
   columnNumber: number;
   constructor(header: CSSStyleSheetHeader, lineNumber: number, columnNumber?: number) {

package/front_end/core/sdk/CSSProperty.ts

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Common from '../common/common.js';
+import * as Common from '../common/common.js';
 import * as HostModule from '../host/host.js';
+import * as Platform from '../platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+import {cssMetadata, GridAreaRowRegex} from './CSSMetadata.js';
 import type {Edit} from './CSSModel.js';
 import type {CSSStyleDeclaration} from './CSSStyleDeclaration.js';
 
@@ -160,17 +162,101 @@ export class CSSProperty {
     }
 
     const range = this.range.relativeTo(this.ownerStyle.range.startLine, this.ownerStyle.range.startColumn);
+    const indentation = this.ownerStyle.cssText ?
+    this.detectIndentation(this.ownerStyle.cssText) :
+    Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
+    const endIndentation = this.ownerStyle.cssText ? indentation.substring(0, this.ownerStyle.range.endColumn) : '';
     const text = new TextUtils.Text.Text(this.ownerStyle.cssText || '');
-    const textBeforeInsertion =
-        text.extract(new TextUtils.TextRange.TextRange(0, 0, range.startLine, range.startColumn));
-    // If we are appending after the last property and that property doesn't have a semicolon at the end
-    // (which is only legal in the last position), then add the semicolon in front of the new text to avoid
-    // CSS parsing errors. However, we shouldn't prepend semicolons on the first line or after a comment.
-    if (textBeforeInsertion.trim().length && !/[;{\/]\s*$/.test(textBeforeInsertion)) {
-      propertyText = ';' + propertyText;
-    }
-    const newStyleText = text.replaceRange(range, propertyText);
-    return this.ownerStyle.setText(newStyleText, majorChange);
+    const newStyleText = text.replaceRange(range, Platform.StringUtilities.sprintf(';%s;', propertyText));
+    const styleText = await CSSProperty.formatStyle(newStyleText, indentation, endIndentation);
+    return this.ownerStyle.setText(styleText, majorChange);
+  }
+
+  static async formatStyle(
+    styleText: string, indentation: string, endIndentation: string): Promise<string> {
+    const doubleIndent = indentation.substring(endIndentation.length) + indentation;
+    if (indentation) {
+      indentation = '\n' + indentation;
+    }
+    let result = '';
+    let propertyName = '';
+    let propertyText = '';
+    let insideProperty = false;
+    let needsSemi = false;
+    const tokenize = TextUtils.CodeMirrorUtils.createCssTokenizer();
+
+    await tokenize('*{' + styleText + '}', processToken);
+    if (insideProperty) {
+      result += propertyText;
+    }
+    result = result.substring(2, result.length - 1).trimRight();
+    return result + (indentation ? '\n' + endIndentation : '');
+
+    function processToken(token: string, tokenType: string|null): void {
+      if (!insideProperty) {
+        const disabledProperty = tokenType?.includes('comment') && isDisabledProperty(token);
+        const isPropertyStart =
+            (tokenType?.includes('string') || tokenType?.includes('meta') || tokenType?.includes('property') ||
+            tokenType?.includes('variableName'));
+        if (disabledProperty) {
+          result = result.trimEnd() + indentation + token;
+        } else if (isPropertyStart) {
+          insideProperty = true;
+          propertyText = token;
+        } else if (token !== ';' || needsSemi) {
+          result += token;
+          if (token.trim() && !(tokenType?.includes('comment'))) {
+            needsSemi = token !== ';';
+          }
+        }
+        if (token === '{' && !tokenType) {
+          needsSemi = false;
+        }
+        return;
+      }
+
+      if (token === '}' || token === ';') {
+        // While `propertyText` can generally be trimmed, doing so
+        // breaks valid CSS declarations such as `--foo:  ;` which would
+        // then produce invalid CSS of the form `--foo:;`. This
+        // implementation takes special care to restore a single
+        // whitespace token in this edge case. https://crbug.com/1071296
+        const trimmedPropertyText = propertyText.trim();
+        result =
+            result.trimEnd() + indentation + trimmedPropertyText + (trimmedPropertyText.endsWith(':') ? ' ' : '') + token;
+        needsSemi = false;
+        insideProperty = false;
+        propertyName = '';
+        return;
+      }
+      if (cssMetadata().isGridAreaDefiningProperty(propertyName)) {
+        const rowResult = GridAreaRowRegex.exec(token);
+        if (rowResult && rowResult.index === 0 && !propertyText.trimRight().endsWith(']')) {
+          propertyText = propertyText.trimRight() + '\n' + doubleIndent;
+        }
+      }
+      if (!propertyName && token === ':') {
+        propertyName = propertyText;
+      }
+      propertyText += token;
+    }
+
+    function isDisabledProperty(text: string): boolean {
+      const colon = text.indexOf(':');
+      if (colon === -1) {
+        return false;
+      }
+      const propertyName = text.substring(2, colon).trim();
+      return cssMetadata().isCSSPropertyName(propertyName);
+    }
+  }
+
+  private detectIndentation(text: string): string {
+    const lines = text.split('\n');
+    if (lines.length < 2) {
+      return '';
+    }
+    return TextUtils.TextUtils.Utils.lineIndent(lines[1]);
   }
 
   setValue(newValue: string, majorChange: boolean, overwrite: boolean, userCallback?: ((arg0: boolean) => void)): void {

package/front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -5,7 +5,7 @@
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
-import type * as Platform from '../platform/platform.js';
+import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -46,7 +46,7 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
   endColumn: number;
   contentLength: number;
   ownerNode: DeferredDOMNode|undefined;
-  sourceMapURL: string|undefined;
+  sourceMapURL: Platform.DevToolsPath.UrlString|undefined;
   #originalContentProviderInternal: TextUtils.StaticContentProvider.StaticContentProvider|null;
 
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSStyleSheetHeader) {
@@ -69,7 +69,7 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
     if (payload.ownerNode) {
       this.ownerNode = new DeferredDOMNode(cssModel.target(), payload.ownerNode);
     }
-    this.sourceMapURL = payload.sourceMapURL;
+    this.sourceMapURL = payload.sourceMapURL as Platform.DevToolsPath.UrlString;
     this.#originalContentProviderInternal = null;
   }
 
@@ -88,7 +88,7 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
     return this.#originalContentProviderInternal;
   }
 
-  setSourceMapURL(sourceMapURL?: string): void {
+  setSourceMapURL(sourceMapURL?: Platform.DevToolsPath.UrlString): void {
     this.sourceMapURL = sourceMapURL;
   }
 
@@ -197,6 +197,10 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
   }
 
   createPageResourceLoadInitiator(): PageResourceLoadInitiator {
-    return {target: null, frameId: this.frameId, initiatorUrl: this.hasSourceURL ? '' : this.sourceURL};
+    return {
+      target: null,
+      frameId: this.frameId,
+      initiatorUrl: this.hasSourceURL ? Platform.DevToolsPath.EmptyUrlString : this.sourceURL,
+    };
   }
 }

package/front_end/core/sdk/CSSSupports.ts

@@ -13,6 +13,8 @@ export class CSSSupports extends CSSQuery {
     return payload.map(supports => new CSSSupports(cssModel, supports));
   }
 
+  #active: boolean = true;
+
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
     super(cssModel);
     this.reinitialize(payload);
@@ -22,9 +24,10 @@ export class CSSSupports extends CSSQuery {
     this.text = payload.text;
     this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
     this.styleSheetId = payload.styleSheetId;
+    this.#active = payload.active;
   }
 
   active(): boolean {
-    return true;
+    return this.#active;
   }
 }

package/front_end/core/sdk/ChildTargetManager.ts

@@ -142,7 +142,9 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
     }
     const target = this.#targetManager.createTarget(
         targetInfo.targetId, targetName, type, this.#parentTarget, sessionId, undefined, undefined, targetInfo);
-    target.setInspectedURL(this.#parentTarget.inspectedURL());
+    if (type === Type.Worker || type === Type.ServiceWorker || type === Type.SharedWorker) {
+      target.setInspectedURL(this.#parentTarget.inspectedURL());
+    }
     this.#childTargetsBySessionId.set(sessionId, target);
     this.#childTargetsById.set(target.id(), target);
 

package/front_end/core/sdk/Connections.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
+import type * as Platform from '../platform/platform.js';
 import * as Host from '../host/host.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
@@ -82,7 +83,7 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn
   #onWebSocketDisconnect: (() => void)|null;
   #connected: boolean;
   #messages: string[];
-  constructor(url: string, onWebSocketDisconnect: () => void) {
+  constructor(url: Platform.DevToolsPath.UrlString, onWebSocketDisconnect: () => void) {
     this.#socket = new WebSocket(url);
     this.#socket.onerror = this.onError.bind(this);
     this.#socket.onopen = this.onOpen.bind(this);
@@ -286,7 +287,7 @@ function createMainConnection(websocketConnectionLost: () => void): ProtocolClie
   const wsParam = Root.Runtime.Runtime.queryParam('ws');
   const wssParam = Root.Runtime.Runtime.queryParam('wss');
   if (wsParam || wssParam) {
-    const ws = wsParam ? `ws://${wsParam}` : `wss://${wssParam}`;
+    const ws = (wsParam ? `ws://${wsParam}` : `wss://${wssParam}`) as Platform.DevToolsPath.UrlString;
     return new WebSocketConnection(ws, websocketConnectionLost);
   }
   if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {

package/front_end/core/sdk/ConsoleModel.ts

@@ -32,6 +32,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
 import * as i18n from '../i18n/i18n.js';
+import type * as Platform from '../platform/platform.js';
 
 import {FrontendMessageSource, FrontendMessageType} from './ConsoleModelTypes.js';
 export {FrontendMessageSource, FrontendMessageType} from './ConsoleModelTypes.js';
@@ -277,7 +278,7 @@ export class ConsoleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const callFrame = call.stackTrace && call.stackTrace.callFrames.length ? call.stackTrace.callFrames[0] : null;
     const details = {
       type: call.type,
-      url: callFrame?.url,
+      url: callFrame?.url as Platform.DevToolsPath.UrlString | undefined,
       line: callFrame?.lineNumber,
       column: callFrame?.columnNumber,
       parameters: call.args,
@@ -517,7 +518,7 @@ function areStackTracesEquivalent(
 
 export interface ConsoleMessageDetails {
   type?: MessageType;
-  url?: string;
+  url?: Platform.DevToolsPath.UrlString;
   line?: number;
   column?: number;
   parameters?: (string|RemoteObject|Protocol.Runtime.RemoteObject)[];
@@ -537,7 +538,7 @@ export class ConsoleMessage {
   level: Protocol.Log.LogEntryLevel|null;
   messageText: string;
   readonly type: MessageType;
-  url: string|undefined;
+  url: Platform.DevToolsPath.UrlString|undefined;
   line: number;
   column: number;
   parameters: (string|RemoteObject|Protocol.Runtime.RemoteObject)[]|undefined;
@@ -598,10 +599,10 @@ export class ConsoleMessage {
   static fromException(
       runtimeModel: RuntimeModel, exceptionDetails: Protocol.Runtime.ExceptionDetails,
       messageType?: Protocol.Runtime.ConsoleAPICalledEventType|FrontendMessageType, timestamp?: number,
-      forceUrl?: string, affectedResources?: AffectedResources): ConsoleMessage {
+      forceUrl?: Platform.DevToolsPath.UrlString, affectedResources?: AffectedResources): ConsoleMessage {
     const details = {
       type: messageType,
-      url: forceUrl || exceptionDetails.url,
+      url: forceUrl || exceptionDetails.url as Platform.DevToolsPath.UrlString,
       line: exceptionDetails.lineNumber,
       column: exceptionDetails.columnNumber,
       parameters: exceptionDetails.exception ?

package/front_end/core/sdk/Cookie.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 type * as Platform from '../platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 const OPAQUE_PARITION_KEY = '<opaque>';
@@ -144,7 +145,7 @@ export class Cookie {
   /**
    * @deprecated
    */
-  url(): string|null {
+  url(): Platform.DevToolsPath.UrlString|null {
     if (!this.domain() || !this.path()) {
       return null;
     }
@@ -156,7 +157,8 @@ export class Cookie {
     }
     // We must not consider the this.sourceScheme() here, otherwise it will be impossible to set a cookie without
     // the Secure attribute from a secure origin.
-    return (this.secure() ? 'https://' : 'http://') + this.domain() + port + this.path();
+    return (this.secure() ? 'https://' : 'http://') + this.domain() + port + this.path() as
+        Platform.DevToolsPath.UrlString;
   }
 
   setSize(size: number): void {

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -234,8 +234,12 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
   readonly #runtimeModelInternal: RuntimeModel;
   #domModel: DOMModel;
   #domBreakpointsInternal: DOMBreakpoint[];
-  readonly #domBreakpointsSetting: Common.Settings
-      .Setting<{url: string, path: string, type: Protocol.DOMDebugger.DOMBreakpointType, enabled: boolean}[]>;
+  readonly #domBreakpointsSetting: Common.Settings.Setting<{
+    url: Platform.DevToolsPath.UrlString,
+    path: string,
+    type: Protocol.DOMDebugger.DOMBreakpointType,
+    enabled: boolean,
+  }[]>;
   suspended = false;
 
   constructor(target: Target) {
@@ -384,9 +388,9 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
     return {type: type, node: node, targetNode: targetNode, insertion: insertion};
   }
 
-  private currentURL(): string {
+  private currentURL(): Platform.DevToolsPath.UrlString {
     const domDocument = this.#domModel.existingDocument();
-    return domDocument ? domDocument.documentURL : '';
+    return domDocument ? domDocument.documentURL : Platform.DevToolsPath.EmptyUrlString;
   }
 
   private async documentUpdated(): Promise<void> {
@@ -403,7 +407,7 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
     // Note that requestDocument() caches the document so that it is requested
     // only once.
     const document = await this.#domModel.requestDocument();
-    const currentURL = document ? document.documentURL : '';
+    const currentURL = document ? document.documentURL : Platform.DevToolsPath.EmptyUrlString;
     for (const breakpoint of this.#domBreakpointsSetting.get()) {
       if (breakpoint.url === currentURL) {
         void this.#domModel.pushNodeByPathToFrontend(breakpoint.path).then(appendBreakpoint.bind(this, breakpoint));
@@ -464,7 +468,7 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
   private saveDOMBreakpoints(): void {
     const currentURL = this.currentURL();
     const breakpoints = this.#domBreakpointsSetting.get().filter((breakpoint: {
-                                                                   url: string,
+                                                                   url: Platform.DevToolsPath.UrlString,
                                                                  }) => breakpoint.url !== currentURL);
     for (const breakpoint of this.#domBreakpointsInternal) {
       breakpoints.push(

package/front_end/core/sdk/DOMModel.ts

@@ -808,9 +808,9 @@ export class DOMNode {
     traverse(this);
   }
 
-  resolveURL(url: string): string|null {
+  resolveURL(url: string): Platform.DevToolsPath.UrlString|null {
     if (!url) {
-      return url;
+      return url as Platform.DevToolsPath.UrlString;
     }
     for (let frameOwnerCandidate: (DOMNode|null) = (this as DOMNode | null); frameOwnerCandidate;
          frameOwnerCandidate = frameOwnerCandidate.parentNode) {

package/front_end/core/sdk/DebuggerModel.ts

@@ -139,6 +139,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
                                    }>>)|null;
   #expandCallFramesCallback: ((arg0: Array<CallFrame>) => Promise<Array<CallFrame>>)|null;
   evaluateOnCallFrameCallback: ((arg0: CallFrame, arg1: EvaluationOptions) => Promise<EvaluationResult|null>)|null;
+  #synchronizeBreakpointsCallback: ((script: Script) => Promise<void>)|null;
   // We need to be able to register listeners for individual breakpoints. As such, we dispatch
   // on breakpoint ids, which are not statically known. The event #payload will always be a `Location`.
   readonly #breakpointResolvedEventTarget =
@@ -169,6 +170,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.#computeAutoStepRangesCallback = null;
     this.#expandCallFramesCallback = null;
     this.evaluateOnCallFrameCallback = null;
+    this.#synchronizeBreakpointsCallback = null;
 
     this.#autoStepOver = false;
 
@@ -232,7 +234,12 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     const isRemoteFrontend = Root.Runtime.Runtime.queryParam('remoteFrontend') || Root.Runtime.Runtime.queryParam('ws');
     const maxScriptsCacheSize = isRemoteFrontend ? 10e6 : 100e6;
     const enablePromise = this.agent.invoke_enable({maxScriptsCacheSize});
-    void enablePromise.then(this.registerDebugger.bind(this));
+    let instrumentationPromise: Promise<Protocol.Debugger.SetInstrumentationBreakpointResponse>|undefined;
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
+      instrumentationPromise = this.agent.invoke_setInstrumentationBreakpoint({
+        instrumentation: Protocol.Debugger.SetInstrumentationBreakpointRequestInstrumentation.BeforeScriptExecution,
+      });
+    }
     this.pauseOnExceptionStateChanged();
     void this.asyncStackTracesStateChanged();
     if (!Common.Settings.Settings.instance().moduleSetting('breakpointsActive').get()) {
@@ -242,7 +249,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       void this.pauseOnAsyncCall(_scheduledPauseOnAsyncCall);
     }
     this.dispatchEventToListeners(Events.DebuggerWasEnabled, this);
-    await enablePromise;
+    const [enableResult] = await Promise.all([enablePromise, instrumentationPromise]);
+    this.registerDebugger(enableResult);
   }
 
   async syncDebuggerId(): Promise<Protocol.Debugger.EnableResponse> {
@@ -644,11 +652,24 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.evaluateOnCallFrameCallback = callback;
   }
 
+  setSynchronizeBreakpointsCallback(callback: (script: Script) => Promise<void>): void {
+    this.#synchronizeBreakpointsCallback = callback;
+  }
+
   async pausedScript(
       callFrames: Protocol.Debugger.CallFrame[], reason: Protocol.Debugger.PausedEventReason, auxData: Object|undefined,
       breakpointIds: string[], asyncStackTrace?: Protocol.Runtime.StackTrace,
       asyncStackTraceId?: Protocol.Runtime.StackTraceId,
       asyncCallStackTraceId?: Protocol.Runtime.StackTraceId): Promise<void> {
+    if (reason === Protocol.Debugger.PausedEventReason.Instrumentation) {
+      const script = this.scriptForId(callFrames[0].location.scriptId);
+      if (this.#synchronizeBreakpointsCallback && script) {
+        await this.#synchronizeBreakpointsCallback(script);
+      }
+      this.resume();
+      return;
+    }
+
     if (asyncCallStackTraceId) {
       // Note: this is only to support old backends. Newer ones do not send asyncCallStackTraceId.
       _scheduledPauseOnAsyncCall = asyncCallStackTraceId;
@@ -703,7 +724,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       sourceMapURL: Platform.DevToolsPath.UrlString|undefined, hasSourceURLComment: boolean, hasSyntaxError: boolean,
       length: number, isModule: boolean|null, originStackTrace: Protocol.Runtime.StackTrace|null,
       codeOffset: number|null, scriptLanguage: string|null, debugSymbols: Protocol.Debugger.DebugSymbols|null,
-      embedderName: string|null): Script {
+      embedderName: Platform.DevToolsPath.UrlString|null): Script {
     const knownScript = this.#scriptsInternal.get(scriptId);
     if (knownScript) {
       return knownScript;
@@ -1060,7 +1081,8 @@ class DebuggerDispatcher implements ProtocolProxyApi.DebuggerDispatcher {
         scriptId, url as Platform.DevToolsPath.UrlString, startLine, startColumn, endLine, endColumn,
         executionContextId, hash, executionContextAuxData, Boolean(isLiveEdit),
         sourceMapURL as Platform.DevToolsPath.UrlString, Boolean(hasSourceURL), false, length || 0, isModule || null,
-        stackTrace || null, codeOffset || null, scriptLanguage || null, debugSymbols || null, embedderName || null);
+        stackTrace || null, codeOffset || null, scriptLanguage || null, debugSymbols || null,
+        embedderName as Platform.DevToolsPath.UrlString || null);
   }
 
   scriptFailedToParse({
@@ -1089,7 +1111,7 @@ class DebuggerDispatcher implements ProtocolProxyApi.DebuggerDispatcher {
         scriptId, url as Platform.DevToolsPath.UrlString, startLine, startColumn, endLine, endColumn,
         executionContextId, hash, executionContextAuxData, false, sourceMapURL as Platform.DevToolsPath.UrlString,
         Boolean(hasSourceURL), true, length || 0, isModule || null, stackTrace || null, codeOffset || null,
-        scriptLanguage || null, null, embedderName || null);
+        scriptLanguage || null, null, embedderName as Platform.DevToolsPath.UrlString || null);
   }
 
   breakpointResolved({breakpointId, location}: Protocol.Debugger.BreakpointResolvedEvent): void {

package/front_end/core/sdk/HeapProfilerModel.ts

@@ -4,6 +4,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
+import type * as Platform from '../platform/platform.js';
 
 import type {DebuggerModel} from './DebuggerModel.js';
 import type {RemoteObject} from './RemoteObject.js';
@@ -179,7 +180,7 @@ export type EventTypes = {
 
 export interface NativeProfilerCallFrame {
   functionName: string;
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   scriptId?: string;
   lineNumber?: number;
   columnNumber?: number;

package/front_end/core/sdk/NetworkManager.ts

@@ -249,7 +249,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return newHeaders;
   }
 
-  requestForURL(url: string): NetworkRequest|null {
+  requestForURL(url: Platform.DevToolsPath.UrlString): NetworkRequest|null {
     return this.dispatcher.requestForURL(url);
   }
 
@@ -281,7 +281,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
   }
 
   async loadNetworkResource(
-      frameId: Protocol.Page.FrameId|null, url: string,
+      frameId: Protocol.Page.FrameId|null, url: Platform.DevToolsPath.UrlString,
       options: Protocol.Network.LoadNetworkResourceOptions): Promise<Protocol.Network.LoadNetworkResourcePageResult> {
     const result = await this.#networkAgent.invoke_loadNetworkResource({frameId: frameId ?? undefined, url, options});
     if (result.getError()) {
@@ -395,7 +395,7 @@ export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
 export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   readonly #manager: NetworkManager;
   #requestsById: Map<string, NetworkRequest>;
-  #requestsByURL: Map<string, NetworkRequest>;
+  #requestsByURL: Map<Platform.DevToolsPath.UrlString, NetworkRequest>;
   #requestIdToExtraInfoBuilder: Map<string, ExtraInfoBuilder>;
   readonly #requestIdToTrustTokenEvent: Map<string, Protocol.Network.TrustTokenOperationDoneEvent>;
   constructor(manager: NetworkManager) {
@@ -417,7 +417,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
         MultitargetNetworkManager.Events.RequestIntercepted, this.#markAsIntercepted.bind(this));
   }
 
-  #markAsIntercepted(event: Common.EventTarget.EventTargetEvent<string>): void {
+  #markAsIntercepted(event: Common.EventTarget.EventTargetEvent<Platform.DevToolsPath.UrlString>): void {
     const request = this.requestForURL(event.data);
     if (request) {
       request.setWasIntercepted(true);
@@ -522,7 +522,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     return this.#requestsById.get(url) || null;
   }
 
-  requestForURL(url: string): NetworkRequest|null {
+  requestForURL(url: Platform.DevToolsPath.UrlString): NetworkRequest|null {
     return this.#requestsByURL.get(url) || null;
   }
 
@@ -550,7 +550,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     // TODO(crbug/841076): Sends the request ID of prefetching to the browser
     // process and DevTools to find the matching request.
     if (!networkRequest) {
-      networkRequest = this.#requestsByURL.get(info.outerResponse.url);
+      networkRequest = this.#requestsByURL.get(info.outerResponse.url as Platform.DevToolsPath.UrlString);
       if (!networkRequest) {
         return;
       }
@@ -1021,7 +1021,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   subresourceWebBundleMetadataReceived({requestId, urls}: Protocol.Network.SubresourceWebBundleMetadataReceivedEvent):
       void {
     const extraInfoBuilder = this.getExtraInfoBuilder(requestId);
-    extraInfoBuilder.setWebBundleInfo({resourceUrls: urls});
+    extraInfoBuilder.setWebBundleInfo({resourceUrls: urls as Platform.DevToolsPath.UrlString[]});
     const finalRequest = extraInfoBuilder.finalRequest();
     if (finalRequest) {
       this.updateNetworkRequest(finalRequest);
@@ -1099,7 +1099,7 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
   #updatingInterceptionPatternsPromise: Promise<void>|null;
   readonly #blockingEnabledSetting: Common.Settings.Setting<boolean>;
   readonly #blockedPatternsSetting: Common.Settings.Setting<BlockedPattern[]>;
-  #effectiveBlockedURLs: string[];
+  #effectiveBlockedURLs: Platform.DevToolsPath.UrlString[];
   readonly #urlsForRequestInterceptor:
       Platform.MapUtilities.Multimap<(arg0: InterceptedRequest) => Promise<void>, InterceptionPattern>;
   #extraHeaders?: Protocol.Network.Headers;
@@ -1420,7 +1420,8 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
       await requestInterceptor(interceptedRequest);
       if (interceptedRequest.hasResponded()) {
         this.dispatchEventToListeners(
-            MultitargetNetworkManager.Events.RequestIntercepted, interceptedRequest.request.url);
+            MultitargetNetworkManager.Events.RequestIntercepted,
+            interceptedRequest.request.url as Platform.DevToolsPath.UrlString);
         return;
       }
     }
@@ -1453,7 +1454,7 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
     return certificate.tableNames;
   }
 
-  async loadResource(url: string): Promise<{
+  async loadResource(url: Platform.DevToolsPath.UrlString): Promise<{
     success: boolean,
     content: string,
     errorDescription: Host.ResourceLoader.LoadErrorDescription,
@@ -1496,7 +1497,7 @@ export namespace MultitargetNetworkManager {
     [Events.UserAgentChanged]: void,
     [Events.InterceptorsChanged]: void,
     [Events.AcceptedEncodingsChanged]: void,
-    [Events.RequestIntercepted]: string,
+    [Events.RequestIntercepted]: Platform.DevToolsPath.UrlString,
   };
 }
 
@@ -1713,7 +1714,7 @@ export interface Conditions {
 }
 
 export interface BlockedPattern {
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   enabled: boolean;
 }
 

package/front_end/core/sdk/NetworkRequest.ts

@@ -1718,7 +1718,7 @@ export interface ExtraResponseInfo {
 }
 
 export interface WebBundleInfo {
-  resourceUrls?: string[];
+  resourceUrls?: Platform.DevToolsPath.UrlString[];
   errorMessage?: string;
 }