npm - chrome-devtools-frontend - Versions diffs - 1.0.1009019 → 1.0.1010492 - Mend

chrome-devtools-frontend 1.0.1009019 → 1.0.1010492

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/extension-api/ExtensionAPI.d.ts CHANGED Viewed

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

package/front_end/core/host/UserMetrics.ts CHANGED Viewed

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

@@ -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}"
   },
@@ -3293,6 +3293,9 @@
   "panels/application/DOMStorageItemsView.ts | domStorageItems": {
     "message": "DOM Storage Items"
   },
+  "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
+    "message": "{PH1} cleared"
+  },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "Number of entries shown in table: {PH1}"
   },
@@ -9515,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"
   },
@@ -9650,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 CHANGED Viewed

@@ -1241,6 +1241,9 @@
   "models/bindings/ContentProviderBasedProject.ts | unknownErrorLoadingFile": {
     "message": "Ûńk̂ńôẃn̂ ér̂ŕôŕ l̂óâd́îńĝ f́îĺê"
   },
+  "models/bindings/DebuggerLanguagePlugins.ts | debugSymbolsIncomplete": {
+    "message": "T̂h́ê d́êb́ûǵ îńf̂ór̂ḿât́îón̂ f́ôŕ f̂ún̂ćt̂íôń {PH1} îś îńĉóm̂ṕl̂ét̂é"
+  },
   "models/bindings/DebuggerLanguagePlugins.ts | errorInDebuggerLanguagePlugin": {
     "message": "Êŕr̂ór̂ ín̂ d́êb́ûǵĝér̂ ĺâńĝúâǵê ṕl̂úĝín̂: {PH1}"
   },
@@ -1248,7 +1251,7 @@
     "message": "[{PH1}] F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ śŷḿb̂ól̂ś f̂ór̂ {PH2} ({PH3})"
   },
   "models/bindings/DebuggerLanguagePlugins.ts | failedToLoadDebugSymbolsForFunction": {
-    "message": "M̂íŝśîńĝ d́êb́ûǵ ŝým̂b́ôĺŝ f́ôŕ f̂ún̂ćt̂íôń \"{PH1}\""
+    "message": "N̂ó d̂éb̂úĝ ín̂f́ôŕm̂át̂íôń f̂ór̂ f́ûńĉt́îón̂ \"{PH1}\""
   },
   "models/bindings/DebuggerLanguagePlugins.ts | loadedDebugSymbolsForButDidnt": {
     "message": "[{PH1}] L̂óâd́êd́ d̂éb̂úĝ śŷḿb̂ól̂ś f̂ór̂ {PH2}, b́ût́ d̂íd̂ń't̂ f́îńd̂ án̂ý ŝóûŕĉé f̂íl̂éŝ"
@@ -1262,9 +1265,6 @@
   "models/bindings/DebuggerLanguagePlugins.ts | loadingDebugSymbolsForVia": {
     "message": "[{PH1}] L̂óâd́îńĝ d́êb́ûǵ ŝým̂b́ôĺŝ f́ôŕ {PH2} (v̂íâ {PH3})..."
   },
-  "models/bindings/DebuggerLanguagePlugins.ts | symbolFileNotFound": {
-    "message": "Ŝým̂b́ôĺ f̂íl̂é \"{PH1}\" n̂ót̂ f́ôún̂d́"
-  },
   "models/bindings/ResourceScriptMapping.ts | liveEditCompileFailed": {
     "message": "LiveEdit ĉóm̂ṕîĺê f́âíl̂éd̂: {PH1}"
   },
@@ -3293,6 +3293,9 @@
   "panels/application/DOMStorageItemsView.ts | domStorageItems": {
     "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ"
   },
+  "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
+    "message": "{PH1} ĉĺêár̂éd̂"
+  },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "N̂úm̂b́êŕ ôf́ êńt̂ŕîéŝ śĥóŵń îń t̂áb̂ĺê: {PH1}"
   },
@@ -9515,6 +9518,9 @@
   "panels/sources/CallStackSidebarPane.ts | copyStackTrace": {
     "message": "Ĉóp̂ý ŝt́âćk̂ t́r̂áĉé"
   },
+  "panels/sources/CallStackSidebarPane.ts | debugFileNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ f́îĺê \"{PH1}\"."
+  },
   "panels/sources/CallStackSidebarPane.ts | notPaused": {
     "message": "N̂ót̂ ṕâúŝéd̂"
   },
@@ -9650,6 +9656,12 @@
   "panels/sources/DebuggerPlugin.ts | configure": {
     "message": "Ĉón̂f́îǵûŕê"
   },
+  "panels/sources/DebuggerPlugin.ts | debugFileNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ d̂éb̂úĝ f́îĺê \"{PH1}\"."
+  },
+  "panels/sources/DebuggerPlugin.ts | debugInfoNotFound": {
+    "message": "F̂áîĺêd́ t̂ó l̂óâd́ âńŷ d́êb́ûǵ îńf̂ó f̂ór̂ {PH1}."
+  },
   "panels/sources/DebuggerPlugin.ts | disableBreakpoint": {
     "message": "{n, plural, =1 {D̂íŝáb̂ĺê b́r̂éâḱp̂óîńt̂} other {D́îśâb́l̂é âĺl̂ b́r̂éâḱp̂óîńt̂ś îń l̂ín̂é}}"
   },

package/front_end/core/sdk/CSSProperty.ts CHANGED Viewed

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

package/front_end/core/sdk/DebuggerModel.ts CHANGED Viewed

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

@@ -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/core/sdk/Script.ts CHANGED Viewed

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

package/front_end/models/bindings/BreakpointManager.ts CHANGED Viewed

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

package/front_end/models/bindings/DebuggerLanguagePlugins.ts CHANGED Viewed

@@ -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');
   }