chrome-devtools-frontend 1.0.1009983 → 1.0.1010492

package/extension-api/ExtensionAPI.d.ts

@@ -181,7 +181,8 @@ export namespace Chrome {
        * A new raw module has been loaded. If the raw wasm module references an external debug info module, its URL will be
        * passed as symbolsURL.
        */
-      addRawModule(rawModuleId: string, symbolsURL: string|undefined, rawModule: RawModule): Promise<string[]>;
+      addRawModule(rawModuleId: string, symbolsURL: string|undefined, rawModule: RawModule):
+          Promise<string[]|{missingSymbolFiles: string[]}>;
 
       /**
        * Find locations in raw modules from a location in a source file.
@@ -242,9 +243,8 @@ export namespace Chrome {
       /**
        * Find locations in source files from a location in a raw module
        */
-      getFunctionInfo(rawLocation: RawLocation): Promise<{
-        frames: Array<FunctionInfo>,
-      }>;
+      getFunctionInfo(rawLocation: RawLocation):
+          Promise<{frames: Array<FunctionInfo>}|{missingSymbolFiles: Array<string>}>;
 
       /**
        * Find locations in raw modules corresponding to the inline function
@@ -279,7 +279,7 @@ export namespace Chrome {
     }
 
     export interface RecorderExtensions {
-      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string, mimeType: string):
+      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string, mediaType: string):
           Promise<void>;
       unregisterRecorderExtensionPlugin(plugin: RecorderExtensionPlugin): Promise<void>;
     }

package/front_end/core/host/UserMetrics.ts

@@ -939,7 +939,9 @@ export enum RecordingEdited {
 export enum RecordingExported {
   ToPuppeteer = 1,
   ToJSON = 2,
-  MaxValue = 3,
+  ToPuppeteerReplay = 3,
+  ToExtension = 4,
+  MaxValue = 5,
 }
 
 /* eslint-disable @typescript-eslint/naming-convention */

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

@@ -1241,6 +1241,9 @@
   "models/bindings/ContentProviderBasedProject.ts | unknownErrorLoadingFile": {
     "message": "Unknown error loading file"
   },
+  "models/bindings/DebuggerLanguagePlugins.ts | debugSymbolsIncomplete": {
+    "message": "The debug information for function {PH1} is incomplete"
+  },
   "models/bindings/DebuggerLanguagePlugins.ts | errorInDebuggerLanguagePlugin": {
     "message": "Error in debugger language plugin: {PH1}"
   },
@@ -1248,7 +1251,7 @@
     "message": "[{PH1}] Failed to load debug symbols for {PH2} ({PH3})"
   },
   "models/bindings/DebuggerLanguagePlugins.ts | failedToLoadDebugSymbolsForFunction": {
-    "message": "Missing debug symbols for function \"{PH1}\""
+    "message": "No debug information for function \"{PH1}\""
   },
   "models/bindings/DebuggerLanguagePlugins.ts | loadedDebugSymbolsForButDidnt": {
     "message": "[{PH1}] Loaded debug symbols for {PH2}, but didn't find any source files"
@@ -1262,9 +1265,6 @@
   "models/bindings/DebuggerLanguagePlugins.ts | loadingDebugSymbolsForVia": {
     "message": "[{PH1}] Loading debug symbols for {PH2} (via {PH3})..."
   },
-  "models/bindings/DebuggerLanguagePlugins.ts | symbolFileNotFound": {
-    "message": "Symbol file \"{PH1}\" not found"
-  },
   "models/bindings/ResourceScriptMapping.ts | liveEditCompileFailed": {
     "message": "LiveEdit compile failed: {PH1}"
   },
@@ -9518,6 +9518,9 @@
   "panels/sources/CallStackSidebarPane.ts | copyStackTrace": {
     "message": "Copy stack trace"
   },
+  "panels/sources/CallStackSidebarPane.ts | debugFileNotFound": {
+    "message": "Failed to load debug file \"{PH1}\"."
+  },
   "panels/sources/CallStackSidebarPane.ts | notPaused": {
     "message": "Not paused"
   },
@@ -9653,6 +9656,12 @@
   "panels/sources/DebuggerPlugin.ts | configure": {
     "message": "Configure"
   },
+  "panels/sources/DebuggerPlugin.ts | debugFileNotFound": {
+    "message": "Failed to load debug file \"{PH1}\"."
+  },
+  "panels/sources/DebuggerPlugin.ts | debugInfoNotFound": {
+    "message": "Failed to load any debug info for {PH1}."
+  },
   "panels/sources/DebuggerPlugin.ts | disableBreakpoint": {
     "message": "{n, plural, =1 {Disable breakpoint} other {Disable all breakpoints in line}}"
   },

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

@@ -1241,6 +1241,9 @@
   "models/bindings/ContentProviderBasedProject.ts | unknownErrorLoadingFile": {
     "message": "Ûńk̂ńôẃn̂ ér̂ŕôŕ l̂óâd́îńĝ f́îĺê"
   },
+  "models/bindings/DebuggerLanguagePlugins.ts | debugSymbolsIncomplete": {
+    "message": "T̂h́ê d́êb́ûǵ îńf̂ór̂ḿât́îón̂ f́ôŕ f̂ún̂ćt̂íôń {PH1} îś îńĉóm̂ṕl̂ét̂é"
+  },
   "models/bindings/DebuggerLanguagePlugins.ts | errorInDebuggerLanguagePlugin": {
     "message": "Êŕr̂ór̂ ín̂ d́êb́ûǵĝér̂ ĺâńĝúâǵê ṕl̂úĝín̂: {PH1}"
   },
@@ -1248,7 +1251,7 @@
     "message": "[{PH1}] F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ śŷḿb̂ól̂ś f̂ór̂ {PH2} ({PH3})"
   },
   "models/bindings/DebuggerLanguagePlugins.ts | failedToLoadDebugSymbolsForFunction": {
-    "message": "M̂íŝśîńĝ d́êb́ûǵ ŝým̂b́ôĺŝ f́ôŕ f̂ún̂ćt̂íôń \"{PH1}\""
+    "message": "N̂ó d̂éb̂úĝ ín̂f́ôŕm̂át̂íôń f̂ór̂ f́ûńĉt́îón̂ \"{PH1}\""
   },
   "models/bindings/DebuggerLanguagePlugins.ts | loadedDebugSymbolsForButDidnt": {
     "message": "[{PH1}] L̂óâd́êd́ d̂éb̂úĝ śŷḿb̂ól̂ś f̂ór̂ {PH2}, b́ût́ d̂íd̂ń't̂ f́îńd̂ án̂ý ŝóûŕĉé f̂íl̂éŝ"
@@ -1262,9 +1265,6 @@
   "models/bindings/DebuggerLanguagePlugins.ts | loadingDebugSymbolsForVia": {
     "message": "[{PH1}] L̂óâd́îńĝ d́êb́ûǵ ŝým̂b́ôĺŝ f́ôŕ {PH2} (v̂íâ {PH3})..."
   },
-  "models/bindings/DebuggerLanguagePlugins.ts | symbolFileNotFound": {
-    "message": "Ŝým̂b́ôĺ f̂íl̂é \"{PH1}\" n̂ót̂ f́ôún̂d́"
-  },
   "models/bindings/ResourceScriptMapping.ts | liveEditCompileFailed": {
     "message": "LiveEdit ĉóm̂ṕîĺê f́âíl̂éd̂: {PH1}"
   },
@@ -9518,6 +9518,9 @@
   "panels/sources/CallStackSidebarPane.ts | copyStackTrace": {
     "message": "Ĉóp̂ý ŝt́âćk̂ t́r̂áĉé"
   },
+  "panels/sources/CallStackSidebarPane.ts | debugFileNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ f́îĺê \"{PH1}\"."
+  },
   "panels/sources/CallStackSidebarPane.ts | notPaused": {
     "message": "N̂ót̂ ṕâúŝéd̂"
   },
@@ -9653,6 +9656,12 @@
   "panels/sources/DebuggerPlugin.ts | configure": {
     "message": "Ĉón̂f́îǵûŕê"
   },
+  "panels/sources/DebuggerPlugin.ts | debugFileNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ f́îĺê \"{PH1}\"."
+  },
+  "panels/sources/DebuggerPlugin.ts | debugInfoNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ âńŷ d́êb́ûǵ îńf̂ó f̂ór̂ {PH1}."
+  },
   "panels/sources/DebuggerPlugin.ts | disableBreakpoint": {
     "message": "{n, plural, =1 {D̂íŝáb̂ĺê b́r̂éâḱp̂óîńt̂} other {D́îśâb́l̂é âĺl̂ b́r̂éâḱp̂óîńt̂ś îń l̂ín̂é}}"
   },

package/front_end/core/sdk/DebuggerModel.ts

@@ -1242,6 +1242,11 @@ export class BreakLocation extends Location {
   }
 }
 
+export interface MissingDebugInfoDetails {
+  details: string;
+  resources: string[];
+}
+
 export class CallFrame {
   debuggerModel: DebuggerModel;
   readonly #scriptInternal: Script;
@@ -1253,7 +1258,7 @@ export class CallFrame {
   readonly #functionNameInternal: string;
   readonly #functionLocationInternal: Location|undefined;
   #returnValueInternal: RemoteObject|null;
-  readonly warnings: string[] = [];
+  #missingDebugInfoDetails: MissingDebugInfoDetails|null = null;
 
   readonly canBeRestarted: boolean;
 
@@ -1299,8 +1304,12 @@ export class CallFrame {
     return new CallFrame(this.debuggerModel, this.#scriptInternal, this.payload, inlineFrameIndex, name);
   }
 
-  addWarning(warning: string): void {
-    this.warnings.push(warning);
+  setMissingDebugInfoDetails(details: MissingDebugInfoDetails): void {
+    this.#missingDebugInfoDetails = details;
+  }
+
+  get missingDebugInfoDetails(): MissingDebugInfoDetails|null {
+    return this.#missingDebugInfoDetails;
   }
 
   get script(): Script {

package/front_end/core/sdk/EmulationModel.ts

@@ -21,6 +21,7 @@ export class EmulationModel extends SDKModel<void> {
   readonly #mediaConfiguration: Map<string, string>;
   #touchEnabled: boolean;
   #touchMobile: boolean;
+  #touchEmulationAllowed: boolean;
   #customTouchEnabled: boolean;
   #touchConfiguration: {
     enabled: boolean,
@@ -176,6 +177,7 @@ export class EmulationModel extends SDKModel<void> {
       updateDisabledImageFormats();
     }
 
+    this.#touchEmulationAllowed = true;
     this.#touchEnabled = false;
     this.#touchMobile = false;
     this.#customTouchEnabled = false;
@@ -185,6 +187,10 @@ export class EmulationModel extends SDKModel<void> {
     };
   }
 
+  setTouchEmulationAllowed(touchEmulationAllowed: boolean): void {
+    this.#touchEmulationAllowed = touchEmulationAllowed;
+  }
+
   supportsDeviceEmulation(): boolean {
     return this.target().hasAllCapabilities(Capability.DeviceEmulation);
   }
@@ -322,13 +328,13 @@ export class EmulationModel extends SDKModel<void> {
   }
 
   async emulateTouch(enabled: boolean, mobile: boolean): Promise<void> {
-    this.#touchEnabled = enabled;
-    this.#touchMobile = mobile;
+    this.#touchEnabled = enabled && this.#touchEmulationAllowed;
+    this.#touchMobile = mobile && this.#touchEmulationAllowed;
     await this.updateTouch();
   }
 
   async overrideEmulateTouch(enabled: boolean): Promise<void> {
-    this.#customTouchEnabled = enabled;
+    this.#customTouchEnabled = enabled && this.#touchEmulationAllowed;
     await this.updateTouch();
   }
 

package/front_end/models/bindings/BreakpointManager.ts

@@ -153,7 +153,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     const {pluginManager} = this.debuggerWorkspaceBinding;
     if (pluginManager) {
       const sourceUrls = await pluginManager.getSourcesForScript(script);
-      if (sourceUrls) {
+      if (Array.isArray(sourceUrls)) {
         for (const sourceURL of sourceUrls) {
           if (this.#hasBreakpointsForUrl(sourceURL)) {
             const uiSourceCode =

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

@@ -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

@@ -133,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};
@@ -713,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`);
       }
@@ -744,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 {

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/legacy/Infobar.ts

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

package/front_end/ui/legacy/infobar.css

@@ -24,6 +24,14 @@
   background-color: var(--override-infobar-warning-background);
 }
 
+.infobar-error {
+  --override-infobar-error-background: var(--color-error-background);
+  --override-infobar-error-text: var(--color-error-text);
+
+  background-color: var(--override-infobar-error-background);
+  color: var(--override-infobar-error-text);
+}
+
 .-theme-with-dark-background .infobar-warning,
 :host-context(.-theme-with-dark-background) .infobar-warning {
   --override-infobar-warning-background: rgb(63 52 2);
@@ -75,6 +83,10 @@
   margin: 4px;
 }
 
+.infobar-selectable {
+  user-select: text;
+}
+
 .infobar-button {
   color: var(--color-text-secondary);
   cursor: pointer;
@@ -93,6 +105,11 @@
   background-color: var(--override-warning-icon-color);
 }
 
+.error-icon {
+  background-image: var(--image-file-error_icon);
+  background-size: contain;
+}
+
 .-theme-with-dark-background .warning-icon,
 :host-context(.-theme-with-dark-background) .warning-icon {
   --override-warning-icon-color: rgb(245 182 10);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1009983"
+  "version": "1.0.1010492"
 }