chrome-devtools-frontend 1.0.1008735 → 1.0.1009983

package/.vscode/devtools-workspace-launch.json

@@ -8,7 +8,7 @@
       "preLaunchTask": "1-build_Debug",
       "runtimeExecutable": "/usr/bin/npm",
       "runtimeArgs": ["run", "unittest"],
-      "port": 9222,
+      "port": 7722,
       "timeout": 30000,
       "browserLaunchLocation": "workspace",
       "outputCapture": "std",

package/extension-api/ExtensionAPI.d.ts

@@ -172,7 +172,8 @@ export namespace Chrome {
     }
 
     export interface RecorderExtensionPlugin {
-      stringify(obj: Record<string, any>): Promise<string>;
+      stringify(recording: Record<string, any>): Promise<string>;
+      stringifyStep(step: Record<string, any>): Promise<string>;
     }
 
     export interface LanguageExtensionPlugin {
@@ -278,7 +279,8 @@ export namespace Chrome {
     }
 
     export interface RecorderExtensions {
-      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string): Promise<void>;
+      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string, mimeType: string):
+          Promise<void>;
       unregisterRecorderExtensionPlugin(plugin: RecorderExtensionPlugin): Promise<void>;
     }
 

package/front_end/core/i18n/locales/en-US.json

@@ -3293,6 +3293,9 @@
   "panels/application/DOMStorageItemsView.ts | domStorageItems": {
     "message": "DOM Storage Items"
   },
+  "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
+    "message": "{PH1} cleared"
+  },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "Number of entries shown in table: {PH1}"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3293,6 +3293,9 @@
   "panels/application/DOMStorageItemsView.ts | domStorageItems": {
     "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ"
   },
+  "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
+    "message": "{PH1} ĉĺêár̂éd̂"
+  },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "N̂úm̂b́êŕ ôf́ êńt̂ŕîéŝ śĥóŵń îń t̂áb̂ĺê: {PH1}"
   },

package/front_end/core/sdk/CSSProperty.ts

@@ -188,7 +188,7 @@ export class CSSProperty {
     if (insideProperty) {
       result += propertyText;
     }
-    result = result.substring(2, result.length - 1).trimRight();
+    result = result.substring(2, result.length - 1).trimEnd();
     return result + (indentation ? '\n' + endIndentation : '');
 
     function processToken(token: string, tokenType: string|null): void {
@@ -230,8 +230,8 @@ export class CSSProperty {
       }
       if (cssMetadata().isGridAreaDefiningProperty(propertyName)) {
         const rowResult = GridAreaRowRegex.exec(token);
-        if (rowResult && rowResult.index === 0 && !propertyText.trimRight().endsWith(']')) {
-          propertyText = propertyText.trimRight() + '\n' + doubleIndent;
+        if (rowResult && rowResult.index === 0 && !propertyText.trimEnd().endsWith(']')) {
+          propertyText = propertyText.trimEnd() + '\n' + doubleIndent;
         }
       }
       if (!propertyName && token === ':') {

package/front_end/core/sdk/Script.ts

@@ -192,7 +192,6 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
 
   originalContentProvider(): TextUtils.ContentProvider.ContentProvider {
     if (!this.#originalContentProviderInternal) {
-      /* } */
       let lazyContentPromise: Promise<TextUtils.ContentProvider.DeferredContent>|null;
       this.#originalContentProviderInternal =
           new TextUtils.StaticContentProvider.StaticContentProvider(this.contentURL(), this.contentType(), () => {
@@ -220,7 +219,9 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
                     return {content: bytecode, isEncoded: true};
                   }
                   let content: string = scriptSource || '';
-                  if (this.hasSourceURL) {
+                  if (this.hasSourceURL && this.sourceURL.startsWith('snippet://')) {
+                    // TODO(crbug.com/1330846): Find a better way to establish the snippet automapping binding then adding
+                    // a sourceURL comment before evaluation and removing it here.
                     content = Script.trimSourceURLComment(content);
                   }
                   return {content, isEncoded: false};

package/front_end/core/sdk/Target.ts

@@ -61,8 +61,8 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
             Capability.IO | Capability.Media | Capability.Inspector;
         break;
       case Type.Worker:
-        this.#capabilitiesMask =
-            Capability.JS | Capability.Log | Capability.Network | Capability.Target | Capability.IO | Capability.Media;
+        this.#capabilitiesMask = Capability.JS | Capability.Log | Capability.Network | Capability.Target |
+            Capability.IO | Capability.Media | Capability.Emulation;
         break;
       case Type.Node:
         this.#capabilitiesMask = Capability.JS;

package/front_end/models/bindings/BreakpointManager.ts

@@ -51,6 +51,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   readonly debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
   readonly #breakpointsForUISourceCode: Map<Workspace.UISourceCode.UISourceCode, Map<string, BreakpointLocation>>;
   readonly #breakpointByStorageId: Map<string, Breakpoint>;
+  #updateBindingsCallbacks: ((uiSourceCode: Workspace.UISourceCode.UISourceCode) => Promise<void>)[];
 
   private constructor(
       targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
@@ -69,6 +70,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     this.#workspace.addEventListener(Workspace.Workspace.Events.ProjectRemoved, this.projectRemoved, this);
 
     this.targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
+    this.#updateBindingsCallbacks = [];
   }
 
   static instance(opts: {
@@ -108,6 +110,10 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     debuggerModel.setSynchronizeBreakpointsCallback(null);
   }
 
+  addUpdateBindingsCallback(callback: ((uiSourceCode: Workspace.UISourceCode.UISourceCode) => Promise<void>)): void {
+    this.#updateBindingsCallbacks.push(callback);
+  }
+
   async copyBreakpoints(fromURL: Platform.DevToolsPath.UrlString, toSourceCode: Workspace.UISourceCode.UISourceCode):
       Promise<void> {
     const breakpointItems = this.storage.breakpointItems(fromURL);
@@ -122,15 +128,13 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
       return;
     }
+    if (!script.sourceURL) {
+      return;
+    }
+
     const debuggerModel = script.debuggerModel;
+    const uiSourceCode = await this.getUpdatedUISourceCode(script);
     if (this.#hasBreakpointsForUrl(script.sourceURL)) {
-      // Handle inline scripts without sourceURL comment separately:
-      // The UISourceCode of inline scripts without sourceURLs will not be availabe
-      // until a later point. Use the v8 script for setting the breakpoint.
-      const isInlineScriptWithoutSourceURL = script.isInlineScript() && !script.hasSourceURL;
-      const sourceURL =
-          isInlineScriptWithoutSourceURL ? DefaultScriptMapping.createV8ScriptURL(script) : script.sourceURL;
-      const uiSourceCode = await Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURLPromise(sourceURL);
       await this.#restoreBreakpointsForUrl(uiSourceCode);
     }
 
@@ -161,6 +165,34 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
   }
 
+  async getUpdatedUISourceCode(script: SDK.Script.Script): Promise<Workspace.UISourceCode.UISourceCode> {
+    const isSnippet = script.sourceURL.startsWith('snippet://');
+    const projectType = isSnippet ? Workspace.Workspace.projectTypes.Network : undefined;
+
+    // Handle inline scripts without sourceURL comment separately:
+    // The UISourceCode of inline scripts without sourceURLs will not be availabe
+    // until a later point. Use the v8 script for setting the breakpoint.
+    const isInlineScriptWithoutSourceURL = script.isInlineScript() && !script.hasSourceURL;
+    const sourceURL =
+        isInlineScriptWithoutSourceURL ? DefaultScriptMapping.createV8ScriptURL(script) : script.sourceURL;
+    const uiSourceCode =
+        await Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURLPromise(sourceURL, projectType);
+
+    if (this.#updateBindingsCallbacks.length > 0) {
+      // It's possible to set breakpoints on files on the file system, and to have them
+      // hit whenever we navigate to a page that serves that file.
+      // To make sure that we have all breakpoint information moved from the file system
+      // to the served file, we need to update the bindings and await it. This will
+      // move the breakpoints from the FileSystem UISourceCode to the Network UiSourceCode.
+      const promises = [];
+      for (const callback of this.#updateBindingsCallbacks) {
+        promises.push(callback(uiSourceCode));
+      }
+      await Promise.all(promises);
+    }
+    return uiSourceCode;
+  }
+
   async #restoreBreakpointsForUrl(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     this.restoreBreakpoints(uiSourceCode);
     const breakpoints = this.#breakpointByStorageId.values();
@@ -713,20 +745,24 @@ export class ModelBreakpoint {
           };
         });
         newState = new Breakpoint.State(positions, condition);
-      } else if (this.#breakpoint.currentState) {
-        newState = new Breakpoint.State(this.#breakpoint.currentState.positions, condition);
-      } else {
-        // TODO(bmeurer): This fallback doesn't make a whole lot of sense, we should
-        // at least signal a warning to the developer that this #breakpoint wasn't
-        // really resolved.
-        const position = {
-          url: this.#breakpoint.url(),
-          scriptId: '' as Protocol.Runtime.ScriptId,
-          scriptHash: '',
-          lineNumber,
-          columnNumber,
-        };
-        newState = new Breakpoint.State([position], condition);
+      } else if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
+        // Use this fallback if we do not have instrumentation breakpoints enabled yet. This currently makes
+        // sure that v8 knows about the breakpoint and is able to restore it whenever the script is parsed.
+        if (this.#breakpoint.currentState) {
+          newState = new Breakpoint.State(this.#breakpoint.currentState.positions, condition);
+        } else {
+          // TODO(bmeurer): This fallback doesn't make a whole lot of sense, we should
+          // at least signal a warning to the developer that this #breakpoint wasn't
+          // really resolved.
+          const position = {
+            url: this.#breakpoint.url(),
+            scriptId: '' as Protocol.Runtime.ScriptId,
+            scriptHash: '',
+            lineNumber,
+            columnNumber,
+          };
+          newState = new Breakpoint.State([position], condition);
+        }
       }
     }
 

package/front_end/models/bindings/ResourceMapping.ts

@@ -14,7 +14,7 @@ import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {NetworkProject} from './NetworkProject.js';
 import {resourceMetadata} from './ResourceUtils.js';
 
-let resourceMappingInstance: ResourceMapping;
+let resourceMappingInstance: ResourceMapping|undefined;
 
 const styleSheetOffsetMap = new WeakMap<SDK.CSSStyleSheetHeader.CSSStyleSheetHeader, TextUtils.TextRange.TextRange>();
 const scriptOffsetMap = new WeakMap<SDK.Script.Script, TextUtils.TextRange.TextRange>();
@@ -47,6 +47,10 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     return resourceMappingInstance;
   }
 
+  static removeInstance(): void {
+    resourceMappingInstance = undefined;
+  }
+
   modelAdded(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
     const info = new ModelInfo(this.#workspace, resourceTreeModel);
     this.#modelToInfo.set(resourceTreeModel, info);
@@ -97,17 +101,27 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     if (!info) {
       return null;
     }
-    const uiSourceCode = info.getProject().uiSourceCodeForURL(script.sourceURL);
+    const embedderName = script.embedderName();
+    if (!embedderName) {
+      return null;
+    }
+    const uiSourceCode = info.getProject().uiSourceCodeForURL(embedderName);
     if (!uiSourceCode) {
       return null;
     }
     const offset = scriptOffsetMap.get(script) ||
         TextUtils.TextRange.TextRange.createFromLocation(script.lineOffset, script.columnOffset);
-    const lineNumber = jsLocation.lineNumber + offset.startLine - script.lineOffset;
+    let lineNumber = jsLocation.lineNumber + offset.startLine - script.lineOffset;
     let columnNumber = jsLocation.columnNumber;
     if (jsLocation.lineNumber === script.lineOffset) {
       columnNumber += offset.startColumn - script.columnOffset;
     }
+    if (script.hasSourceURL) {
+      if (lineNumber === 0) {
+        columnNumber += script.columnOffset;
+      }
+      lineNumber += script.lineOffset;
+    }
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
@@ -124,14 +138,33 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     if (!debuggerModel) {
       return [];
     }
-    const location = debuggerModel.createRawLocationByURL(uiSourceCode.url(), lineNumber, columnNumber);
-    if (location) {
-      const script = location.script();
-      if (script && script.containsLocation(lineNumber, columnNumber)) {
-        return [location];
+    const locations = [];
+    for (const script of debuggerModel.scripts()) {
+      if (script.embedderName() !== uiSourceCode.url()) {
+        continue;
+      }
+      const {startLine, startColumn} = scriptOffsetMap.get(script) ||
+          TextUtils.TextRange.TextRange.createFromLocation(script.lineOffset, script.columnOffset);
+      if (lineNumber < startLine || (lineNumber === startLine && columnNumber < startColumn)) {
+        continue;
+      }
+      const endLine = startLine + (script.endLine - script.lineOffset);
+      const endColumn =
+          startLine === endLine ? startColumn + (script.endColumn - script.columnOffset) : script.endColumn;
+      if (lineNumber > endLine || (lineNumber === endLine && columnNumber > endColumn)) {
+        continue;
+      }
+      let scriptLineNumber = lineNumber;
+      let scriptColumnNumber = columnNumber;
+      if (script.hasSourceURL) {
+        scriptLineNumber -= startLine;
+        if (scriptLineNumber === 0) {
+          scriptColumnNumber -= startColumn;
+        }
       }
+      locations.push(debuggerModel.createRawLocation(script, scriptLineNumber, scriptColumnNumber));
     }
-    return [];
+    return locations;
   }
 
   uiLocationToCSSLocations(uiLocation: Workspace.UISourceCode.UILocation): SDK.CSSModel.CSSLocation[] {
@@ -341,7 +374,7 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
     if (!debuggerModel) {
       return [];
     }
-    return debuggerModel.scriptsForSourceURL(this.#uiSourceCode.url());
+    return debuggerModel.scripts().filter(script => script.embedderName() === this.#uiSourceCode.url());
   }
 
   async styleSheetChanged(stylesheet: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader, edit: SDK.CSSModel.Edit|null):

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -298,7 +298,7 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
     }
 
     // Match ignoring sourceURL.
-    if (!workingCopy.startsWith(this.#scriptSource.trimRight())) {
+    if (!workingCopy.startsWith(this.#scriptSource.trimEnd())) {
       return true;
     }
     const suffix = this.#uiSourceCodeInternal.workingCopy().substr(this.#scriptSource.length);

package/front_end/models/extensions/ExtensionAPI.ts

@@ -111,6 +111,7 @@ export namespace PrivateAPI {
 
   export const enum RecorderExtensionPluginCommands {
     Stringify = 'stringify',
+    StringifyStep = 'stringifyStep',
   }
 
   export const enum RecorderExtensionPluginEvents {
@@ -132,6 +133,7 @@ export namespace PrivateAPI {
   type RegisterRecorderExtensionPluginRequest = {
     command: Commands.RegisterRecorderExtensionPlugin,
     pluginName: string,
+    mimeType: string,
     port: MessagePort,
   };
   type SubscribeRequest = {command: Commands.Subscribe, type: string};
@@ -276,7 +278,12 @@ export namespace PrivateAPI {
     parameters: {recording: Record<string, unknown>},
   };
 
-  export type RecorderExtensionRequests = StringifyRequest;
+  type StringifyStepRequest = {
+    method: RecorderExtensionPluginCommands.StringifyStep,
+    parameters: {step: Record<string, unknown>},
+  };
+
+  export type RecorderExtensionRequests = StringifyRequest|StringifyStepRequest;
 }
 
 declare global {
@@ -705,8 +712,8 @@ self.injectedExtensionAPI = function(
   (RecorderServicesAPIImpl.prototype as
    Pick<APIImpl.RecorderExtensions, 'registerRecorderExtensionPlugin'|'unregisterRecorderExtensionPlugin'>) = {
     registerRecorderExtensionPlugin: async function(
-        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin,
-        pluginName: string): Promise<void> {
+        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin, pluginName: string,
+        mimeType: string): Promise<void> {
       if (this._plugins.has(plugin)) {
         throw new Error(`Tried to register plugin '${pluginName}' twice`);
       }
@@ -720,11 +727,14 @@ self.injectedExtensionAPI = function(
             .catch(error => port.postMessage({requestId, error: {message: error.message}}));
       };
 
-      function dispatchMethodCall(request: PrivateAPI.RecorderExtensionRequests): Promise<unknown> {
+      async function dispatchMethodCall(request: PrivateAPI.RecorderExtensionRequests): Promise<unknown> {
         switch (request.method) {
           case PrivateAPI.RecorderExtensionPluginCommands.Stringify:
             return plugin.stringify(request.parameters.recording);
+          case PrivateAPI.RecorderExtensionPluginCommands.StringifyStep:
+            return plugin.stringifyStep(request.parameters.step);
           default:
+            // @ts-expect-error
             throw new Error(`'${request.method}' is not recognized`);
         }
       }
@@ -734,6 +744,7 @@ self.injectedExtensionAPI = function(
             {
               command: PrivateAPI.Commands.RegisterRecorderExtensionPlugin,
               pluginName,
+              mimeType,
               port: channel.port2,
             },
             () => resolve(), [channel.port2]);

package/front_end/models/extensions/ExtensionServer.ts

@@ -222,10 +222,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private registerRecorderExtensionEndpoint(
       message: PrivateAPI.ExtensionServerRequestMessage, _shared_port: MessagePort): Record {
     if (message.command !== PrivateAPI.Commands.RegisterRecorderExtensionPlugin) {
-      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.Subscribe}`);
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
-    const {pluginName, port} = message;
-    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, port));
+    const {pluginName, mimeType, port} = message;
+    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, mimeType, port));
     return this.status.OK();
   }
 

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -8,16 +8,22 @@ import {RecorderPluginManager} from './RecorderPluginManager.js';
 
 export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   private readonly name: string;
+  private readonly mimeType: string;
 
-  constructor(name: string, port: MessagePort) {
+  constructor(name: string, mimeType: string, port: MessagePort) {
     super(port);
     this.name = name;
+    this.mimeType = mimeType;
   }
 
   getName(): string {
     return this.name;
   }
 
+  getMimeType(): string {
+    return this.mimeType;
+  }
+
   protected handleEvent({event}: {event: string}): void {
     switch (event) {
       case PrivateAPI.RecorderExtensionPluginEvents.UnregisteredRecorderExtensionPlugin: {
@@ -40,4 +46,15 @@ export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   stringify(recording: Object): Promise<string> {
     return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.Stringify, {recording});
   }
+
+  /**
+   * In practice, `step` is a Step[1], but we avoid defining this type on the
+   * API in order to prevent dependencies between Chrome and puppeteer. Extensions
+   * are responsible for working out compatibility issues.
+   *
+   * [1]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L243
+   */
+  stringifyStep(step: Object): Promise<string> {
+    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.StringifyStep, {step});
+  }
 }

package/front_end/models/logs/NetworkLog.ts

@@ -196,11 +196,13 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     return initiatorInfo;
   }
 
-  initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorInfo {
-    const initiatorInfo = this.initializeInitiatorSymbolIfNeeded(request);
-    if (initiatorInfo.info) {
-      return initiatorInfo.info;
-    }
+  static initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest, existingInitiatorData?: InitiatorData):
+      InitiatorInfo {
+    const initiatorInfo: InitiatorData = existingInitiatorData || {
+      info: null,
+      chain: null,
+      request: undefined,
+    };
 
     let type = SDK.NetworkRequest.InitiatorType.Other;
     let url = Platform.DevToolsPath.EmptyUrlString;
@@ -253,11 +255,19 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
         url = initiator.url as Platform.DevToolsPath.UrlString || Platform.DevToolsPath.EmptyUrlString;
       }
     }
-
     initiatorInfo.info = {type, url, lineNumber, columnNumber, scriptId, stack: initiatorStack, initiatorRequest};
     return initiatorInfo.info;
   }
 
+  initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorInfo {
+    const initiatorInfo = this.initializeInitiatorSymbolIfNeeded(request);
+    if (initiatorInfo.info) {
+      return initiatorInfo.info;
+    }
+
+    return NetworkLog.initiatorInfoForRequest(request, initiatorInfo);
+  }
+
   initiatorGraphForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorGraph {
     const initiated = new Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
@@ -584,7 +594,7 @@ export type EventTypes = {
   [Events.RequestUpdated]: SDK.NetworkRequest.NetworkRequest,
 };
 
-interface InitiatorData {
+export interface InitiatorData {
   info: InitiatorInfo|null;
   chain: Set<SDK.NetworkRequest.NetworkRequest>|null;
   request?: SDK.NetworkRequest.NetworkRequest|null;
@@ -595,7 +605,7 @@ export interface InitiatorGraph {
   initiated: Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>;
 }
 
-interface InitiatorInfo {
+export interface InitiatorInfo {
   type: SDK.NetworkRequest.InitiatorType;
   // generally this is a url but can also contain "<anonymous>"
   url: Platform.DevToolsPath.UrlString;

package/front_end/models/persistence/Automapping.ts

@@ -88,7 +88,7 @@ export class Automapping {
       const networkProjects = this.workspace.projectsForType(Workspace.Workspace.projectTypes.Network);
       for (const networkProject of networkProjects) {
         for (const uiSourceCode of networkProject.uiSourceCodes()) {
-          this.computeNetworkStatus(uiSourceCode);
+          void this.computeNetworkStatus(uiSourceCode);
         }
       }
       this.onSweepHappenedForTest();
@@ -137,7 +137,7 @@ export class Automapping {
       this.fileSystemUISourceCodes.add(uiSourceCode);
       this.scheduleSweep();
     } else if (project.type() === Workspace.Workspace.projectTypes.Network) {
-      this.computeNetworkStatus(uiSourceCode);
+      void this.computeNetworkStatus(uiSourceCode);
     }
   }
 
@@ -173,20 +173,24 @@ export class Automapping {
     this.scheduleSweep();
   }
 
-  private computeNetworkStatus(networkSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    if (this.sourceCodeToProcessingPromiseMap.has(networkSourceCode) ||
-        this.sourceCodeToAutoMappingStatusMap.has(networkSourceCode)) {
-      return;
+  computeNetworkStatus(networkSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const processingPromise = this.sourceCodeToProcessingPromiseMap.get(networkSourceCode);
+    if (processingPromise) {
+      return processingPromise;
+    }
+    if (this.sourceCodeToAutoMappingStatusMap.has(networkSourceCode)) {
+      return Promise.resolve();
     }
     if (this.interceptors.some(interceptor => interceptor(networkSourceCode))) {
-      return;
+      return Promise.resolve();
     }
     if (networkSourceCode.url().startsWith('wasm://')) {
-      return;
+      return Promise.resolve();
     }
     const createBindingPromise =
         this.createBinding(networkSourceCode).then(validateStatus.bind(this)).then(onStatus.bind(this));
     this.sourceCodeToProcessingPromiseMap.set(networkSourceCode, createBindingPromise);
+    return createBindingPromise;
 
     async function validateStatus(this: Automapping, status: AutomappingStatus|null): Promise<AutomappingStatus|null> {
       if (!status) {
@@ -242,7 +246,7 @@ export class Automapping {
       } else {
         if (networkContent.content) {
           // Trim trailing whitespaces because V8 adds trailing newline.
-          isValid = fileContent.trimRight() === networkContent.content.trimRight();
+          isValid = fileContent.trimEnd() === networkContent.content.trimEnd();
         }
       }
       if (!isValid) {
@@ -252,18 +256,19 @@ export class Automapping {
       return status;
     }
 
-    function onStatus(this: Automapping, status: AutomappingStatus|null): void {
+    async function onStatus(this: Automapping, status: AutomappingStatus|null): Promise<void> {
       if (this.sourceCodeToProcessingPromiseMap.get(networkSourceCode) !== createBindingPromise) {
         return;
       }
-      this.sourceCodeToProcessingPromiseMap.delete(networkSourceCode);
       if (!status) {
         this.onBindingFailedForTest();
+        this.sourceCodeToProcessingPromiseMap.delete(networkSourceCode);
         return;
       }
       // TODO(lushnikov): remove this check once there's a single uiSourceCode per url. @see crbug.com/670180
       if (this.sourceCodeToAutoMappingStatusMap.has(status.network) ||
           this.sourceCodeToAutoMappingStatusMap.has(status.fileSystem)) {
+        this.sourceCodeToProcessingPromiseMap.delete(networkSourceCode);
         return;
       }
 
@@ -277,7 +282,8 @@ export class Automapping {
           this.scheduleSweep();
         }
       }
-      void this.onStatusAdded.call(null, status);
+      await this.onStatusAdded.call(null, status);
+      this.sourceCodeToProcessingPromiseMap.delete(networkSourceCode);
     }
   }
 

package/front_end/models/persistence/PersistenceImpl.ts

@@ -29,6 +29,7 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.workspace = workspace;
     this.breakpointManager = breakpointManager;
+    this.breakpointManager.addUpdateBindingsCallback(this.#setupBindings.bind(this));
     this.filePathPrefixesToBindingCount = new FilePathPrefixesBindingCounts();
 
     this.subscribedBindingEventListeners = new Platform.MapUtilities.Multimap();
@@ -79,6 +80,13 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     await this.innerRemoveBinding(binding);
   }
 
+  #setupBindings(networkUISourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    if (networkUISourceCode.project().type() !== Workspace.Workspace.projectTypes.Network) {
+      return Promise.resolve();
+    }
+    return this.mapping.computeNetworkStatus(networkUISourceCode);
+  }
+
   private async innerAddBinding(binding: PersistenceBinding): Promise<void> {
     bindings.set(binding.network, binding);
     bindings.set(binding.fileSystem, binding);
@@ -140,10 +148,10 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.BindingRemoved, binding);
   }
 
-  private async onStatusAdded(status: AutomappingStatus): Promise<void> {
+  private onStatusAdded(status: AutomappingStatus): Promise<void> {
     const binding = new PersistenceBinding(status.network, status.fileSystem);
     statusBindings.set(status, binding);
-    await this.innerAddBinding(binding);
+    return this.innerAddBinding(binding);
   }
 
   private async onStatusRemoved(status: AutomappingStatus): Promise<void> {

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -51,8 +51,13 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
       functionEndLocation.columnNumber);
   const scopeText = text.extract(scopeRange);
   const scopeStart = text.toSourceRange(scopeRange).offset;
-  const prefix = 'function fui';
-  const scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  let prefix = 'function fui';
+  let scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  if (!scopeTree) {
+    // Try to parse the function as an arrow function.
+    prefix = 'let fui = ';
+    scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  }
   if (!scopeTree) {
     return null;
   }