chrome-devtools-frontend 1.0.1009515 → 1.0.1010780

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -59,12 +59,12 @@ const UIStrings = {
   *@description Error message that is displayed in UI debugging information cannot be found for a call frame
   *@example {main} PH1
   */
-  failedToLoadDebugSymbolsForFunction: 'Missing debug symbols for function "{PH1}"',
+  failedToLoadDebugSymbolsForFunction: 'No debug information for function "{PH1}"',
   /**
   *@description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
-  *@example {src/myapp.debug.wasm.dwp} PH1
+  *@example {mainp.debug.wasm.dwp} PH1
   */
-  symbolFileNotFound: 'Symbol file "{PH1}" not found',
+  debugSymbolsIncomplete: 'The debug information for function {PH1} is incomplete',
 };
 const str_ = i18n.i18n.registerUIStrings('models/bindings/DebuggerLanguagePlugins.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -766,7 +766,7 @@ export class DebuggerLanguagePluginManager implements
     rawModuleId: string,
     plugin: DebuggerLanguagePlugin,
     scripts: Array<SDK.Script.Script>,
-    addRawModulePromise: Promise<Array<Platform.DevToolsPath.UrlString>>,
+    addRawModulePromise: Promise<Array<Platform.DevToolsPath.UrlString>|{missingSymbolFiles: string[]}>,
   }>;
 
   constructor(
@@ -819,17 +819,19 @@ export class DebuggerLanguagePluginManager implements
         .all(callFrames.map(async callFrame => {
           const functionInfo = await this.getFunctionInfo(callFrame.script, callFrame.location());
           if (functionInfo) {
-            const {frames, missingSymbolFiles} = functionInfo;
-            if (frames.length) {
-              return frames.map(({name}, index) => callFrame.createVirtualCallFrame(index, name));
+            if ('frames' in functionInfo && functionInfo.frames.length) {
+              return functionInfo.frames.map(({name}, index) => callFrame.createVirtualCallFrame(index, name));
             }
-            if (missingSymbolFiles && missingSymbolFiles.length) {
-              for (const file of missingSymbolFiles) {
-                callFrame.addWarning(i18nString(UIStrings.symbolFileNotFound, {PH1: file}));
-              }
+            if ('missingSymbolFiles' in functionInfo && functionInfo.missingSymbolFiles.length) {
+              const resources = functionInfo.missingSymbolFiles;
+              const details = i18nString(UIStrings.debugSymbolsIncomplete, {PH1: callFrame.functionName});
+              callFrame.setMissingDebugInfoDetails({details, resources});
+            } else {
+              callFrame.setMissingDebugInfoDetails({
+                resources: [],
+                details: i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: callFrame.functionName}),
+              });
             }
-            callFrame.addWarning(
-                i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: callFrame.functionName}));
           }
           return callFrame;
         }))
@@ -1069,40 +1071,45 @@ export class DebuggerLanguagePluginManager implements
       const rawModuleId = rawModuleIdForScript(script);
       let rawModuleHandle = this.#rawModuleHandles.get(rawModuleId);
       if (!rawModuleHandle) {
-        const sourceFileURLsPromise = (async(): Promise<Platform.DevToolsPath.UrlString[]> => {
-          const console = Common.Console.Console.instance();
-          const url = script.sourceURL;
-          const symbolsUrl = (script.debugSymbols && script.debugSymbols.externalURL) || '';
-          if (symbolsUrl) {
-            console.log(i18nString(UIStrings.loadingDebugSymbolsForVia, {PH1: plugin.name, PH2: url, PH3: symbolsUrl}));
-          } else {
-            console.log(i18nString(UIStrings.loadingDebugSymbolsFor, {PH1: plugin.name, PH2: url}));
-          }
-          try {
-            const code = (!symbolsUrl && url.startsWith('wasm://')) ? await script.getWasmBytecode() : undefined;
-            const sourceFileURLs =
-                await plugin.addRawModule(rawModuleId, symbolsUrl, {url, code}) as Platform.DevToolsPath.UrlString[];
-            // Check that the handle isn't stale by now. This works because the code that assigns to
-            // `rawModuleHandle` below will run before this code because of the `await` in the preceding
-            // line. This is primarily to avoid logging the message below, which would give the developer
-            // the misleading information that we're done, while in reality it was a stale call that finished.
-            if (rawModuleHandle !== this.#rawModuleHandles.get(rawModuleId)) {
-              return [];
-            }
-            if (sourceFileURLs.length === 0) {
-              console.warn(i18nString(UIStrings.loadedDebugSymbolsForButDidnt, {PH1: plugin.name, PH2: url}));
-            } else {
-              console.log(i18nString(
-                  UIStrings.loadedDebugSymbolsForFound, {PH1: plugin.name, PH2: url, PH3: sourceFileURLs.length}));
-            }
-            return sourceFileURLs;
-          } catch (error) {
-            console.error(
-                i18nString(UIStrings.failedToLoadDebugSymbolsFor, {PH1: plugin.name, PH2: url, PH3: error.message}));
-            this.#rawModuleHandles.delete(rawModuleId);
-            return [];
-          }
-        })();
+        const sourceFileURLsPromise =
+            (async(): Promise<Platform.DevToolsPath.UrlString[]|{missingSymbolFiles: string[]}> => {
+              const console = Common.Console.Console.instance();
+              const url = script.sourceURL;
+              const symbolsUrl = (script.debugSymbols && script.debugSymbols.externalURL) || '';
+              if (symbolsUrl) {
+                console.log(
+                    i18nString(UIStrings.loadingDebugSymbolsForVia, {PH1: plugin.name, PH2: url, PH3: symbolsUrl}));
+              } else {
+                console.log(i18nString(UIStrings.loadingDebugSymbolsFor, {PH1: plugin.name, PH2: url}));
+              }
+              try {
+                const code = (!symbolsUrl && url.startsWith('wasm://')) ? await script.getWasmBytecode() : undefined;
+                const addModuleResult = await plugin.addRawModule(rawModuleId, symbolsUrl, {url, code});
+                // Check that the handle isn't stale by now. This works because the code that assigns to
+                // `rawModuleHandle` below will run before this code because of the `await` in the preceding
+                // line. This is primarily to avoid logging the message below, which would give the developer
+                // the misleading information that we're done, while in reality it was a stale call that finished.
+                if (rawModuleHandle !== this.#rawModuleHandles.get(rawModuleId)) {
+                  return [];
+                }
+                if ('missingSymbolFiles' in addModuleResult) {
+                  return {missingSymbolFiles: addModuleResult.missingSymbolFiles};
+                }
+                const sourceFileURLs = addModuleResult as Platform.DevToolsPath.UrlString[];
+                if (sourceFileURLs.length === 0) {
+                  console.warn(i18nString(UIStrings.loadedDebugSymbolsForButDidnt, {PH1: plugin.name, PH2: url}));
+                } else {
+                  console.log(i18nString(
+                      UIStrings.loadedDebugSymbolsForFound, {PH1: plugin.name, PH2: url, PH3: sourceFileURLs.length}));
+                }
+                return sourceFileURLs;
+              } catch (error) {
+                console.error(i18nString(
+                    UIStrings.failedToLoadDebugSymbolsFor, {PH1: plugin.name, PH2: url, PH3: error.message}));
+                this.#rawModuleHandles.delete(rawModuleId);
+                return [];
+              }
+            })();
         rawModuleHandle = {rawModuleId, plugin, scripts: [script], addRawModulePromise: sourceFileURLsPromise};
         this.#rawModuleHandles.set(rawModuleId, rawModuleHandle);
       } else {
@@ -1114,12 +1121,14 @@ export class DebuggerLanguagePluginManager implements
       // for the DebuggerModel again, which may disappear
       // in the meantime...
       void rawModuleHandle.addRawModulePromise.then(sourceFileURLs => {
-        // The script might have disappeared meanwhile...
-        if (script.debuggerModel.scriptForId(script.scriptId) === script) {
-          const modelData = this.#debuggerModelToData.get(script.debuggerModel);
-          if (modelData) {  // The DebuggerModel could have disappeared meanwhile...
-            modelData.addSourceFiles(script, sourceFileURLs);
-            void this.#debuggerWorkspaceBinding.updateLocations(script);
+        if (!('missingSymbolFiles' in sourceFileURLs)) {
+          // The script might have disappeared meanwhile...
+          if (script.debuggerModel.scriptForId(script.scriptId) === script) {
+            const modelData = this.#debuggerModelToData.get(script.debuggerModel);
+            if (modelData) {  // The DebuggerModel could have disappeared meanwhile...
+              modelData.addSourceFiles(script, sourceFileURLs);
+              void this.#debuggerWorkspaceBinding.updateLocations(script);
+            }
           }
         }
       });
@@ -1127,7 +1136,8 @@ export class DebuggerLanguagePluginManager implements
     }
   }
 
-  getSourcesForScript(script: SDK.Script.Script): Promise<Array<Platform.DevToolsPath.UrlString>|undefined> {
+  getSourcesForScript(script: SDK.Script.Script):
+      Promise<Array<Platform.DevToolsPath.UrlString>|{missingSymbolFiles: string[]}|undefined> {
     const rawModuleId = rawModuleIdForScript(script);
     const rawModuleHandle = this.#rawModuleHandles.get(rawModuleId);
     if (rawModuleHandle) {
@@ -1173,10 +1183,8 @@ export class DebuggerLanguagePluginManager implements
     }
   }
 
-  async getFunctionInfo(script: SDK.Script.Script, location: SDK.DebuggerModel.Location): Promise<{
-    frames: Array<Chrome.DevTools.FunctionInfo>,
-    missingSymbolFiles?: Array<string>,
-  }|null> {
+  async getFunctionInfo(script: SDK.Script.Script, location: SDK.DebuggerModel.Location):
+      Promise<{frames: Array<Chrome.DevTools.FunctionInfo>}|{missingSymbolFiles: string[]}|null> {
     const {rawModuleId, plugin} = await this.rawModuleIdAndPluginForScript(script);
     if (!plugin) {
       return null;
@@ -1189,7 +1197,8 @@ export class DebuggerLanguagePluginManager implements
     };
 
     try {
-      return await plugin.getFunctionInfo(rawLocation);
+      const functionInfo = await plugin.getFunctionInfo(rawLocation);
+      return functionInfo;
     } catch (error) {
       Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return {frames: []};
@@ -1362,7 +1371,7 @@ class ModelData {
   }
 }
 
-export class DebuggerLanguagePlugin {
+export class DebuggerLanguagePlugin implements Chrome.DevTools.LanguageExtensionPlugin {
   name: string;
   constructor(name: string) {
     this.name = name;
@@ -1378,7 +1387,7 @@ export class DebuggerLanguagePlugin {
   /** Notify the #plugin about a new script
     */
   async addRawModule(_rawModuleId: string, _symbolsURL: string, _rawModule: Chrome.DevTools.RawModule):
-      Promise<string[]> {
+      Promise<string[]|{missingSymbolFiles: string[]}> {
     throw new Error('Not implemented yet');
   }
 
@@ -1445,10 +1454,8 @@ export class DebuggerLanguagePlugin {
   /**
    * Find #locations in source files from a #location in a raw module
    */
-  async getFunctionInfo(_rawLocation: Chrome.DevTools.RawLocation): Promise<{
-    frames: Array<Chrome.DevTools.FunctionInfo>,
-    missingSymbolFiles?: Array<string>,
-  }> {
+  async getFunctionInfo(_rawLocation: Chrome.DevTools.RawLocation):
+      Promise<{frames: Array<Chrome.DevTools.FunctionInfo>}|{missingSymbolFiles: string[]}> {
     throw new Error('Not implemented yet');
   }
 

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);
@@ -423,6 +423,18 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
     return this.scriptInternal !== undefined && Boolean(this.scriptInternal.sourceMapURL);
   }
 
+  async missingSymbolFiles(): Promise<string[]|null> {
+    if (!this.scriptInternal) {
+      return null;
+    }
+    const {pluginManager} = this.#resourceScriptMapping.debuggerWorkspaceBinding;
+    if (!pluginManager) {
+      return null;
+    }
+    const sources = await pluginManager.getSourcesForScript(this.scriptInternal);
+    return sources && 'missingSymbolFiles' in sources ? sources.missingSymbolFiles : null;
+  }
+
   get script(): SDK.Script.Script|null {
     return this.scriptInternal || null;
   }

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,7 +133,7 @@ export namespace PrivateAPI {
   type RegisterRecorderExtensionPluginRequest = {
     command: Commands.RegisterRecorderExtensionPlugin,
     pluginName: string,
-    mimeType: string,
+    mediaType: string,
     port: MessagePort,
   };
   type SubscribeRequest = {command: Commands.Subscribe, type: string};
@@ -277,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 {
@@ -707,7 +713,7 @@ self.injectedExtensionAPI = function(
    Pick<APIImpl.RecorderExtensions, 'registerRecorderExtensionPlugin'|'unregisterRecorderExtensionPlugin'>) = {
     registerRecorderExtensionPlugin: async function(
         this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin, pluginName: string,
-        mimeType: string): Promise<void> {
+        mediaType: string): Promise<void> {
       if (this._plugins.has(plugin)) {
         throw new Error(`Tried to register plugin '${pluginName}' twice`);
       }
@@ -721,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`);
         }
       }
@@ -735,7 +744,7 @@ self.injectedExtensionAPI = function(
             {
               command: PrivateAPI.Commands.RegisterRecorderExtensionPlugin,
               pluginName,
-              mimeType,
+              mediaType,
               port: channel.port2,
             },
             () => resolve(), [channel.port2]);

package/front_end/models/extensions/ExtensionServer.ts

@@ -224,8 +224,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (message.command !== PrivateAPI.Commands.RegisterRecorderExtensionPlugin) {
       return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
-    const {pluginName, mimeType, port} = message;
-    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, mimeType, port));
+    const {pluginName, mediaType, port} = message;
+    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, mediaType, port));
     return this.status.OK();
   }
 

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -8,20 +8,20 @@ import {RecorderPluginManager} from './RecorderPluginManager.js';
 
 export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   private readonly name: string;
-  private readonly mimeType: string;
+  private readonly mediaType: string;
 
-  constructor(name: string, mimeType: string, port: MessagePort) {
+  constructor(name: string, mediaType: string, port: MessagePort) {
     super(port);
     this.name = name;
-    this.mimeType = mimeType;
+    this.mediaType = mediaType;
   }
 
   getName(): string {
     return this.name;
   }
 
-  getMimeType(): string {
-    return this.mimeType;
+  getMediaType(): string {
+    return this.mediaType;
   }
 
   protected handleEvent({event}: {event: string}): void {
@@ -46,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/issues_manager/DeprecationIssue.ts

@@ -113,7 +113,7 @@ const UIStrings = {
   getUserMediaInsecureOrigin:
       '`getUserMedia()` no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.',
   /**
-   * @description TODO(crbug.com/1320342): Description needed for translation
+   * @description A deprecation warning shown to developers in the DevTools Issues tab when code tries to use the deprecated hostCandidate field, guiding developers to use the the equivalent information in the .address and .port fields instead.
    */
   hostCandidateAttributeGetter:
       '`RTCPeerConnectionIceErrorEvent.hostCandidate` is deprecated. Please use `RTCPeerConnectionIceErrorEvent.address` or `RTCPeerConnectionIceErrorEvent.port` instead.',
@@ -164,10 +164,6 @@ const UIStrings = {
    */
   obsoleteWebRtcCipherSuite:
       'Your partner is negotiating an obsolete (D)TLS version. Please check with your partner to have this fixed.',
-  /**
-   * @description TODO(crbug.com/1320349): Description needed for translation
-   */
-  paymentRequestBasicCard: 'The `basic-card` payment method is deprecated and will be removed.',
   /**
    * @description This issue indicates that a `<source>` element with a `<picture>` parent was using an `src` attribute, which is not valid and is ignored by the browser. The `srcset` attribute should be used instead.
    */
@@ -411,11 +407,6 @@ export class DeprecationIssue extends Issue {
         messageFunction = i18nLazyString(UIStrings.obsoleteWebRtcCipherSuite);
         milestone = 81;
         break;
-      case Protocol.Audits.DeprecationIssueType.PaymentRequestBasicCard:
-        messageFunction = i18nLazyString(UIStrings.paymentRequestBasicCard);
-        feature = 5730051011117056;
-        milestone = 100;
-        break;
       case Protocol.Audits.DeprecationIssueType.PictureSourceSrc:
         messageFunction = i18nLazyString(UIStrings.pictureSourceSrc);
         break;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7865,10 +7865,6 @@ export const NativeFunctions = [
     name: 'colorMaskiOES',
     signatures: [['buf','r','g','b','a']]
   },
-  {
-    name: 'isEnablediOES',
-    signatures: [['target','index']]
-  },
   {
     name: 'WebGLContextEvent',
     signatures: [['type','?eventInit']]
@@ -7909,6 +7905,10 @@ export const NativeFunctions = [
     name: 'releaseVideoFrame',
     signatures: [['handle']]
   },
+  {
+    name: 'requestAdapterInfo',
+    signatures: [['?unmaskHints']]
+  },
   {
     name: 'mapAsync',
     signatures: [['mode','?offset','?size']]

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/workspace/WorkspaceImpl.ts

@@ -261,8 +261,8 @@ export class WorkspaceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   // This method explicitly awaits the UISourceCode if not yet
   // available.
-  uiSourceCodeForURLPromise(url: Platform.DevToolsPath.UrlString): Promise<UISourceCode> {
-    const uiSourceCode = this.uiSourceCodeForURL(url);
+  uiSourceCodeForURLPromise(url: Platform.DevToolsPath.UrlString, type?: projectTypes): Promise<UISourceCode> {
+    const uiSourceCode = this.uiSourceCodeForURL(url, type);
     if (uiSourceCode) {
       return Promise.resolve(uiSourceCode);
     }
@@ -270,24 +270,31 @@ export class WorkspaceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes
       const descriptor = this.addEventListener(Events.UISourceCodeAdded, event => {
         const uiSourceCode = event.data;
         if (uiSourceCode.url() === url) {
-          this.removeEventListener(Events.UISourceCodeAdded, descriptor.listener);
-          resolve(uiSourceCode);
+          if (!type || type === uiSourceCode.project().type()) {
+            this.removeEventListener(Events.UISourceCodeAdded, descriptor.listener);
+            resolve(uiSourceCode);
+          }
         }
       });
     });
   }
 
-  uiSourceCodeForURL(url: Platform.DevToolsPath.UrlString): UISourceCode|null {
+  uiSourceCodeForURL(url: Platform.DevToolsPath.UrlString, type?: projectTypes): UISourceCode|null {
     for (const project of this.projectsInternal.values()) {
-      const uiSourceCode = project.uiSourceCodeForURL(url);
-      if (uiSourceCode) {
-        return uiSourceCode;
+      // For snippets, we may get two different UISourceCodes for the same url (one belonging to
+      // the file system project, one belonging to the network project). Allow selecting the UISourceCode
+      // for a specific project type.
+      if (!type || project.type() === type) {
+        const uiSourceCode = project.uiSourceCodeForURL(url);
+        if (uiSourceCode) {
+          return uiSourceCode;
+        }
       }
     }
     return null;
   }
 
-  uiSourceCodesForProjectType(type: string): UISourceCode[] {
+  uiSourceCodesForProjectType(type: projectTypes): UISourceCode[] {
     const result: UISourceCode[] = [];
     for (const project of this.projectsInternal.values()) {
       if (project.type() === type) {

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -56,6 +56,11 @@ const UIStrings = {
   *@description Data grid name for DOM Storage Items data grids
   */
   domStorageItems: 'DOM Storage Items',
+  /**
+   *@description Text for announcing number of entries after filtering
+   *@example {'DOM Storage Items'} PH1
+   */
+  domStorageItemsCleared: '{PH1} cleared',
   /**
   *@description Text in DOMStorage Items View of the Application panel
   */
@@ -149,6 +154,7 @@ export class DOMStorageItemsView extends StorageItemsView {
 
     this.dataGrid.rootNode().removeChildren();
     this.dataGrid.addCreationNode(false);
+    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared, {PH1: this.dataGrid.displayName}));
     this.setCanDeleteSelected(false);
   }
 

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1397,7 +1397,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       if (scripts.length) {
         const location =
             new SDK.DebuggerModel.Location(debuggerModel, scripts[0].scriptId, lineNumber || 0, columnNumber);
-        return await debuggerWorkspaceBinding.pluginManager.getFunctionInfo(scripts[0], location) ?? {frames: []};
+        const functionInfo = await debuggerWorkspaceBinding.pluginManager.getFunctionInfo(scripts[0], location);
+        return functionInfo && 'frames' in functionInfo ? functionInfo : {frames: []};
       }
     }