chrome-devtools-frontend 1.0.1009019 → 1.0.1010492

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);
@@ -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,6 +133,7 @@ export namespace PrivateAPI {
   type RegisterRecorderExtensionPluginRequest = {
     command: Commands.RegisterRecorderExtensionPlugin,
     pluginName: string,
+    mediaType: 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,
+        mediaType: 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,
+              mediaType,
               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, mediaType, port} = message;
+    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, mediaType, 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 mediaType: string;
 
-  constructor(name: string, port: MessagePort) {
+  constructor(name: string, mediaType: string, port: MessagePort) {
     super(port);
     this.name = name;
+    this.mediaType = mediaType;
   }
 
   getName(): string {
     return this.name;
   }
 
+  getMediaType(): string {
+    return this.mediaType;
+  }
+
   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/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: []};
       }
     }
 

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -86,6 +86,11 @@ const UIStrings = {
   *@description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
   */
   callFrameWarnings: 'Some call frames have warnings',
+  /**
+  *@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
+  */
+  debugFileNotFound: 'Failed to load debug file "{PH1}".',
   /**
    * @description A contex menu item in the Call Stack Sidebar Pane. "Restart" is a verb and
    * "frame" is a noun. "Frame" refers to an individual item in the call stack, i.e. a call frame.
@@ -204,8 +209,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
             return item;
           });
       itemPromises.push(itemPromise);
-      for (const warning of frame.warnings) {
-        uniqueWarnings.add(warning);
+      if (frame.missingDebugInfoDetails) {
+        uniqueWarnings.add(frame.missingDebugInfoDetails.details);
       }
     }
     const items = await Promise.all(itemPromises);
@@ -316,9 +321,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     element.appendChild(UI.Icon.Icon.create('smallicon-thick-right-arrow', 'selected-call-frame-icon'));
     element.tabIndex = item === this.list.selectedItem() ? 0 : -1;
 
-    if (callframe && callframe.warnings.length) {
+    if (callframe && callframe.missingDebugInfoDetails) {
       const icon = UI.Icon.Icon.create('smallicon-warning', 'call-frame-warning-icon');
-      UI.Tooltip.Tooltip.install(icon, callframe.warnings.join('\n'));
+      const messages =
+          callframe.missingDebugInfoDetails.resources.map(r => i18nString(UIStrings.debugFileNotFound, {PH1: r}));
+      UI.Tooltip.Tooltip.install(icon, [callframe.missingDebugInfoDetails.details, ...messages].join('\n'));
       element.appendChild(icon);
     }
     return element;

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -141,6 +141,16 @@ const UIStrings = {
   *@description Text in Debugger Plugin of the Sources panel
   */
   theDebuggerWillSkipStepping: 'The debugger will skip stepping through this script, and will not stop on exceptions.',
+  /**
+  *@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
+  */
+  debugFileNotFound: 'Failed to load debug file "{PH1}".',
+  /**
+  *@description Error message that is displayed when no debug info could be loaded
+  *@example {app.wasm} PH1
+  */
+  debugInfoNotFound: 'Failed to load any debug info for {PH1}.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/DebuggerPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -194,6 +204,7 @@ export class DebuggerPlugin extends Plugin {
   private prettyPrintInfobar!: UI.Infobar.Infobar|null;
   private refreshBreakpointsTimeout: undefined|number = undefined;
   private activeBreakpointDialog: BreakpointEditDialog|null = null;
+  private missingDebugInfoBar: UI.Infobar.Infobar|null = null;
 
   constructor(
       uiSourceCode: Workspace.UISourceCode.UISourceCode,
@@ -237,7 +248,6 @@ export class DebuggerPlugin extends Plugin {
 
     this.ignoreListInfobar = null;
     this.showIgnoreListInfobarIfNeeded();
-
     for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
       scriptFile.checkMapping();
     }
@@ -332,6 +342,9 @@ export class DebuggerPlugin extends Plugin {
         editor.dispatch({effects: SourceFrame.SourceFrame.addNonBreakableLines.of(linePositions)});
       }
     }, console.error);
+    if (this.missingDebugInfoBar) {
+      this.attachInfobar(this.missingDebugInfoBar);
+    }
     if (!this.muted) {
       void this.refreshBreakpoints();
     }
@@ -1350,6 +1363,42 @@ export class DebuggerPlugin extends Plugin {
     if (newScriptFile.hasSourceMapURL()) {
       this.showSourceMapInfobar();
     }
+
+    void newScriptFile.missingSymbolFiles().then(resources => {
+      if (resources) {
+        const details = i18nString(UIStrings.debugInfoNotFound, {PH1: newScriptFile.uiSourceCode.url()});
+        this.updateMissingDebugInfoInfobar({resources, details});
+      } else {
+        this.updateMissingDebugInfoInfobar(null);
+      }
+    });
+  }
+
+  private updateMissingDebugInfoInfobar(warning: SDK.DebuggerModel.MissingDebugInfoDetails|null): void {
+    if (this.missingDebugInfoBar) {
+      return;
+    }
+    if (warning === null) {
+      this.removeInfobar(this.missingDebugInfoBar);
+      this.missingDebugInfoBar = null;
+      return;
+    }
+    this.missingDebugInfoBar = UI.Infobar.Infobar.create(UI.Infobar.Type.Error, warning.details, []);
+    if (!this.missingDebugInfoBar) {
+      return;
+    }
+    for (const resource of warning.resources) {
+      const detailsRow =
+          this.missingDebugInfoBar?.createDetailsRowMessage(i18nString(UIStrings.debugFileNotFound, {PH1: resource}));
+      if (detailsRow) {
+        detailsRow.classList.add('infobar-selectable');
+      }
+    }
+    this.missingDebugInfoBar.setCloseCallback(() => {
+      this.removeInfobar(this.missingDebugInfoBar);
+      this.missingDebugInfoBar = null;
+    });
+    this.attachInfobar(this.missingDebugInfoBar);
   }
 
   private showSourceMapInfobar(): void {
@@ -1481,6 +1530,7 @@ export class DebuggerPlugin extends Plugin {
             const uiLocation = await liveLocation.uiLocation();
             if (uiLocation && uiLocation.uiSourceCode.url() === this.uiSourceCode.url()) {
               this.setExecutionLocation(uiLocation);
+              this.updateMissingDebugInfoInfobar(callFrame.missingDebugInfoDetails);
             } else {
               this.setExecutionLocation(null);
             }

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -53,6 +53,7 @@ export interface DataGridData {
   rows: Row[];
   activeSort: SortState|null;
   contextMenus?: DataGridContextMenusConfiguration;
+  label?: string;
 }
 
 const enum UserScrollState {
@@ -76,6 +77,7 @@ export class DataGrid extends HTMLElement {
   #isRendering = false;
   #userScrollState: UserScrollState = UserScrollState.NOT_SCROLLED;
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
+  #label?: string = undefined;
   #currentResize: {
     rightCellCol: HTMLTableColElement,
     leftCellCol: HTMLTableColElement,
@@ -132,6 +134,7 @@ export class DataGrid extends HTMLElement {
       rows: this.#rows as Row[],
       activeSort: this.#sortState,
       contextMenus: this.#contextMenus,
+      label: this.#label,
     };
   }
 
@@ -143,6 +146,7 @@ export class DataGrid extends HTMLElement {
     });
     this.#sortState = data.activeSort;
     this.#contextMenus = data.contextMenus;
+    this.#label = data.label;
 
     /**
      * On first render, now we have data, we can figure out which cell is the
@@ -711,6 +715,7 @@ export class DataGrid extends HTMLElement {
       })}
       <div class="wrapping-container" @scroll=${this.#onScroll} @focusout=${this.#onFocusOut}>
         <table
+          aria-label=${LitHtml.Directives.ifDefined(this.#label)}
           aria-rowcount=${this.#rows.length}
           aria-colcount=${this.#columns.length}
           @keydown=${this.#onTableKeyDown}

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -23,6 +23,7 @@ export interface DataGridControllerData {
    */
   initialSort?: SortState;
   contextMenus?: DataGridContextMenusConfiguration;
+  label?: string;
 }
 
 export class DataGridController extends HTMLElement {
@@ -33,6 +34,7 @@ export class DataGridController extends HTMLElement {
   #columns: readonly Column[] = [];
   #rows: Row[] = [];
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
+  #label?: string = undefined;
 
   /**
    * Because the controller will sort data in place (e.g. mutate it) when we get
@@ -56,6 +58,7 @@ export class DataGridController extends HTMLElement {
       rows: this.#originalRows as Row[],
       filters: this.#filters,
       contextMenus: this.#contextMenus,
+      label: this.#label,
     };
   }
 
@@ -65,6 +68,7 @@ export class DataGridController extends HTMLElement {
     this.#contextMenus = data.contextMenus;
     this.#filters = data.filters || [];
     this.#contextMenus = data.contextMenus;
+    this.#label = data.label;
 
     this.#columns = [...this.#originalColumns];
     this.#rows = this.#cloneAndFilterRows(data.rows, this.#filters);
@@ -210,6 +214,7 @@ export class DataGridController extends HTMLElement {
           rows: this.#rows,
           activeSort: this.#sortState,
           contextMenus: this.#contextMenus,
+          label: this.#label,
         } as DataGridData}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}

package/front_end/ui/legacy/Infobar.ts

@@ -236,4 +236,5 @@ export enum Type {
   Warning = 'warning',
   Info = 'info',
   Issue = 'issue',
+  Error = 'error',
 }