chrome-devtools-frontend 1.0.1643099 → 1.0.1645245

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -93,6 +94,18 @@ import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
+  /**
+   * @description Text of a context menu item to start a chat with AI
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Text of a context menu item to explain contents of a local/session storage bucket with AI
+   */
+  explainStorage: 'Explain storage',
+  /**
+   * @description Text of a context menu item to explain web cookies with AI
+   */
+  explainCookies: 'Explain cookies',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -1762,15 +1775,51 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 
+  /**
+   * Resolves the DOM storage partition context (`localStorage` or `sessionStorage`)
+   * associated with this tree element for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.domStorage.storageKey) {
+      return null;
+    }
+    const origin = SDK.StorageKeyManager.parseStorageKey(this.domStorage.storageKey).origin;
+    const storageType = this.domStorage.isLocalStorage ? 'localStorage' : 'sessionStorage';
+    return new AiAssistance.StorageItem.DOMStorageItem(mainPageOrigin, origin, this.domStorage.storageKey, storageType);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: MouseEvent): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.domStorage.clear(), {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainStorage),
+            () => action.execute({prompt: 'What is the purpose of this storage bucket?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.storage'});
+      }
+    }
+
     void contextMenu.show();
   }
 }
@@ -1851,9 +1900,27 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     return this.#cookieDomain;
   }
 
+  /**
+   * Resolves the cookie domain security context associated with this tree element
+   * for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        primaryTarget?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(primaryTarget.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.#cookieDomain) {
+      return null;
+    }
+    return new AiAssistance.StorageItem.CookieItem(mainPageOrigin, this.#cookieDomain);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: Event): void {
@@ -1861,6 +1928,22 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.resourcesPanel.clearCookies(this.target, this.#cookieDomain),
         {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainCookies),
+            () => action.execute({prompt: 'What is the purpose of these cookies?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.cookies'});
+      }
+    }
+
     void contextMenu.show();
   }
 

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -2,15 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+
+import '../../ui/components/buttons/buttons.js';
+
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
+const {html} = Lit;
+
 export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly resourcesPanel: ResourcesPanel;
   private customItemURL?: Platform.DevToolsPath.UrlString;
+  protected aiButtonContainer?: HTMLElement;
 
   constructor(resourcesPanel: ResourcesPanel, title: string, expandable: boolean, jslogContext: string) {
     super(title, expandable, jslogContext);
@@ -56,6 +65,36 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   showView(view: UI.Widget.AnyWidget|null): void {
     this.resourcesPanel.showView(view);
   }
+
+  protected createAiButton(storageItem: AiAssistance.StorageItem.StorageItem): void {
+    const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (!actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
+      return;
+    }
+    const action = actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID);
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const icon = AiAssistance.AiUtils.getIconName();
+      const onClick = (ev: Event): void => {
+        ev.stopPropagation();
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        void action.execute();
+      };
+
+      // clang-format off
+      Lit.render(html`
+            <devtools-floating-button
+              icon-name=${icon}
+              title=${action.title()}
+              jslogcontext="ask-ai"
+              @click=${onClick}
+              @mousedown=${(ev: Event) => ev.stopPropagation()}>
+            </devtools-floating-button>
+          `, this.aiButtonContainer);
+      // clang-format on
+    }
+  }
 }
 
 export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/CookieItemsView.ts

@@ -317,7 +317,7 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
-    if (!cookie || cookie.httpOnly()) {
+    if (cookie && cookie.httpOnly()) {
       UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
     }
@@ -332,7 +332,7 @@ export class CookieItemsView extends UI.Widget.VBox {
       return;
     }
 
-    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie.name());
+    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie?.name());
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -228,8 +228,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     othersView.show(othersDiv);
     const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
     const othersSectionRow = othersSection.appendRow();
-    const seeOthers = Link.create(
-        'chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations), undefined, 'view-all');
+    const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
+                                  undefined, 'view-all', 0, /* allowPrivileged=*/ true);
     othersSectionRow.appendChild(seeOthers);
 
     this.toolbar.appendToolbarItem(

package/front_end/panels/application/WebMCPView.ts

@@ -1014,7 +1014,6 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
           link.lineNumber,
           {
             columnNumber: link.columnNumber,
-            inlineFrameIndex: 0,
             showColumnNumber: true,
           },
       );

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -341,7 +341,7 @@ function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNot
     const link = 'chrome://extensions/?id=' + explanation.context as Platform.DevToolsPath.UrlString;
     // clang-format off
     return html`${i18nString(UIStrings.blockingExtensionId)}
-      <devtools-link .href=${link}>${explanation.context}</devtools-link>`;
+      <devtools-link .href=${link} allow-privileged>${explanation.context}</devtools-link>`;
     // clang-format on
   }
   return nothing;
@@ -393,7 +393,6 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
                              options: {
                                columnNumber: detail.columnNumber,
                                showColumnNumber: true,
-                               inlineFrameIndex: 0,
                                maxLength: maxLengthForDisplayedURLs,
                              }
                            })}`));

package/front_end/panels/application/resourcesSidebar.css

@@ -64,3 +64,14 @@ devtools-icon.navigator-font-tree-item {
 .no-device-bound-session {
   font-style: italic;
 }
+
+.ai-button-container {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  right: var(--sys-size-3);
+}
+
+.tree-outline li:hover .ai-button-container {
+  display: inline-flex;
+}

package/front_end/panels/console/ConsoleView.ts

@@ -75,6 +75,7 @@ import {
   getMessageForElement,
 } from './ConsoleViewMessage.js';
 import {ConsoleViewport, type ConsoleViewportElement, type ConsoleViewportProvider} from './ConsoleViewport.js';
+import symbolizedErrorWidgetStyles from './symbolizedErrorWidget.css.js';
 
 const UIStrings = {
   /**
@@ -356,7 +357,11 @@ export class ConsoleView extends UI.Widget.VBox implements
   constructor(viewportThrottlerTimeout: number) {
     super();
     this.setMinimumSize(0, 35);
-    this.registerRequiredCSS(consoleViewStyles, objectValueStyles, CodeHighlighter.codeHighlighterStyles);
+    // We register the SymbolizedErrorWidget styles here because many web and e2e
+    // tests use `deepTextContent`, which would also include <style> tags if they
+    // were injected directly into the widget's shadow DOM.
+    this.registerRequiredCSS(consoleViewStyles, symbolizedErrorWidgetStyles, objectValueStyles,
+                             CodeHighlighter.codeHighlighterStyles);
 
     this.#searchableView = new UI.SearchableView.SearchableView(this, null);
     this.#searchableView.element.classList.add('console-searchable-view');

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -34,7 +34,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type {Chrome} from '../../../extension-api/ExtensionAPI.js';
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -45,7 +44,6 @@ import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js'
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -66,6 +64,7 @@ import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
 import consoleViewStyles from './consoleView.css.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
+import {SymbolizedErrorWidget} from './SymbolizedErrorWidget.js';
 
 const UIStrings = {
   /**
@@ -449,7 +448,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (this.message.parameters?.length === 1) {
             const parameter = this.message.parameters[0];
             if (typeof parameter !== 'string' && parameter.type === 'string') {
-              messageElement = this.tryFormatAsError((parameter.value as string));
+              const value = parameter.value as string;
+              const runtimeModel = this.message.runtimeModel();
+              if (runtimeModel && Bindings.SymbolizedError.isErrorLike(value)) {
+                const remoteObj = parameter instanceof SDK.RemoteObject.RemoteObject ?
+                    parameter :
+                    runtimeModel.createRemoteObject(parameter);
+                messageElement = this.renderSymbolizedError(remoteObj);
+              }
             }
           }
           const args = this.message.parameters || [messageText];
@@ -570,23 +576,21 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const userMetric = this.#getLinkifierMetric();
       if (stackFrameWithBreakpoint) {
         return this.linkifier.maybeLinkifyConsoleCallFrame(runtimeModel.target(), stackFrameWithBreakpoint, {
-          inlineFrameIndex: 0,
           revealBreakpoint: true,
           userMetric,
         });
       }
       if (scriptId) {
-        return this.linkifier.linkifyScriptLocation(
-            runtimeModel.target(), scriptId, url || Platform.DevToolsPath.EmptyUrlString, line,
-            {columnNumber: column, inlineFrameIndex: 0, userMetric});
+        return this.linkifier.linkifyScriptLocation(runtimeModel.target(), scriptId,
+                                                    url || Platform.DevToolsPath.EmptyUrlString, line,
+                                                    {columnNumber: column, userMetric});
       }
       if (stackTrace?.callFrames.length) {
         return this.linkifier.linkifyStackTraceTopFrame(runtimeModel.target(), stackTrace);
       }
       if (url && url !== 'undefined') {
-        return this.linkifier.linkifyScriptLocation(
-            runtimeModel.target(), /* scriptId */ null, url, line,
-            {columnNumber: column, inlineFrameIndex: 0, userMetric});
+        return this.linkifier.linkifyScriptLocation(runtimeModel.target(), /* scriptId */ null, url, line,
+                                                    {columnNumber: column, userMetric});
       }
       return null;
     };
@@ -695,17 +699,19 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     stackTracePreview.options = {widthConstrained: true};
     if (stackTraceTarget && stackTrace) {
       const selectableChildIndex = this.selectableChildren.length;
-      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-          .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
-          .then(stackTrace => {
-            stackTracePreview.stackTrace = stackTrace;
-            return stackTracePreview.updateComplete;
-          })
-          .then(() => {
-            const selectableLinks =
-                stackTracePreview.linkElements.map(element => ({element, forceSelect: () => element.focus()}));
-            this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
-          });
+      const stackTracePromise = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                                    .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
+                                    .then(stackTrace => {
+                                      stackTracePreview.stackTrace = stackTrace;
+                                      return stackTracePreview.updateComplete;
+                                    })
+                                    .then(() => {
+                                      const selectableLinks = stackTracePreview.linkElements.map(
+                                          (element: HTMLElement) => ({element, forceSelect: () => element.focus()}));
+                                      this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
+                                    });
+      this.#formatErrorStackPromiseForTest =
+          Promise.all([this.#formatErrorStackPromiseForTest, stackTracePromise]).then(() => {});
     }
     stackTracePreview.markAsRoot();
     stackTracePreview.show(stackTraceElement);
@@ -771,7 +777,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     let element;
     switch (outputType) {
       case 'error':
-        element = this.formatParameterAsError(output);
+        element = this.renderSymbolizedError(output);
         break;
       case 'function':
         element = this.formatParameterAsFunction(output, includePreview);
@@ -980,42 +986,28 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return result;
   }
 
-  private formatParameterAsError(output: SDK.RemoteObject.RemoteObject): HTMLElement {
-    const result = document.createElement('span');
-
-    // Combine the ExceptionDetails for this error object with the parsed Error#stack.
-    // The Exceptiondetails include script IDs for stack frames, which allows more accurate
-    // linking.
-    const formatErrorStack =
-        async(errorObj: SDK.RemoteObject.RemoteObject, includeCausedByPrefix: boolean): Promise<void> => {
-      const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
-      const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
-      let errorElement = this.tryFormatAsError(error.errorStack, details);
-      if (!errorElement) {
-        errorElement = document.createElement('span');
-        appendOrShow(errorElement, this.linkifyStringAsFragment(error.errorStack));
-      }
-
-      if (includeCausedByPrefix) {
-        const causeElement = document.createElement('div');
-        causeElement.append('Caused by: ', errorElement);
-        result.appendChild(causeElement);
-      } else {
-        result.appendChild(errorElement);
-      }
+  private renderSymbolizedError(errorRemoteObject: SDK.RemoteObject.RemoteObject): HTMLElement {
+    const container = document.createElement('span');
+    const widget = new SymbolizedErrorWidget();
+    widget.ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance();
+    const selectableChildIndex = this.selectableChildren.length;
 
-      if (cause?.subtype === 'error') {
-        await formatErrorStack(cause, /* includeCausedByPrefix */ true);
-      } else if (cause?.type === 'string') {
-        const stringCauseElement = document.createElement('div');
-        stringCauseElement.append(`Caused by: ${cause.value}`);
-        result.append(stringCauseElement);
+    const format = async(): Promise<void> => {
+      const error = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createSymbolizedError(
+          errorRemoteObject, this.message.exceptionDetails);
+      if (error) {
+        widget.error = error;
       }
+      await widget.updateComplete;
+      const selectableLinks =
+          widget.linkElements.map((element: HTMLElement) => ({element, forceSelect: () => element.focus()}));
+      this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
     };
 
-    this.#formatErrorStackPromiseForTest = formatErrorStack(output, /* includeCausedByPrefix */ false);
-
-    return result;
+    this.#formatErrorStackPromiseForTest = Promise.all([this.#formatErrorStackPromiseForTest, format()]).then(() => {});
+    widget.markAsRoot();
+    widget.show(container);
+    return container;
   }
 
   private formatAsArrayEntry(output: SDK.RemoteObject.RemoteObject): DocumentFragment {
@@ -1781,165 +1773,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.searchHighlightNodes[index];
   }
 
-  private async getInlineFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, url: Platform.DevToolsPath.UrlString,
-      lineNumber: number|undefined, columnNumber: number|undefined): Promise<{frames: Chrome.DevTools.FunctionInfo[]}> {
-    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-    const projects = Workspace.Workspace.WorkspaceImpl.instance().projects();
-    const uiSourceCodes = projects.map(project => project.uiSourceCodeForURL(url)).flat().filter(f => !!f);
-    const scripts =
-        uiSourceCodes.map(uiSourceCode => debuggerWorkspaceBinding.scriptsForUISourceCode(uiSourceCode)).flat();
-    if (scripts.length) {
-      const location =
-          new SDK.DebuggerModel.Location(debuggerModel, scripts[0].scriptId, lineNumber || 0, columnNumber);
-      const functionInfo = await debuggerWorkspaceBinding.pluginManager.getFunctionInfo(scripts[0], location);
-      return functionInfo && 'frames' in functionInfo ? functionInfo : {frames: []};
-    }
-
-    return {frames: []};
-  }
-
-  // Expand inline stack frames in the formatted error in the stackTrace element, inserting new elements before the
-  // insertBefore anchor.
-  private async expandInlineStackFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, prefix: string, suffix: string,
-      url: Platform.DevToolsPath.UrlString, lineNumber: number|undefined, columnNumber: number|undefined,
-      stackTrace: HTMLElement, insertBefore: HTMLElement): Promise<boolean> {
-    const {frames} = await this.getInlineFrames(debuggerModel, url, lineNumber, columnNumber);
-    if (!frames.length) {
-      return false;
-    }
-
-    for (let f = 0; f < frames.length; ++f) {
-      const {name} = frames[f];
-      const formattedLine = document.createElement('span');
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(`${prefix} ${name} (`));
-      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), null, url, lineNumber, {columnNumber, inlineFrameIndex: f});
-      scriptLocationLink.tabIndex = -1;
-      this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
-      formattedLine.appendChild(scriptLocationLink);
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
-      formattedLine.classList.add('formatted-stack-frame');
-      stackTrace.insertBefore(formattedLine, insertBefore);
-    }
-    return true;
-  }
-
-  private createScriptLocationLinkForSyntaxError(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, exceptionDetails: Protocol.Runtime.ExceptionDetails): HTMLElement
-      |undefined {
-    const {scriptId, lineNumber, columnNumber} = exceptionDetails;
-    if (!scriptId) {
-      return;
-    }
-
-    // SyntaxErrors might not populate the URL field. Try to resolve it via scriptId.
-    const url =
-        exceptionDetails.url as Platform.DevToolsPath.UrlString || debuggerModel.scriptForId(scriptId)?.sourceURL;
-    if (!url) {
-      return;
-    }
-
-    const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-        debuggerModel.target(), exceptionDetails.scriptId || null, url, lineNumber, {
-          columnNumber,
-          inlineFrameIndex: 0,
-          showColumnNumber: true,
-        });
-    scriptLocationLink.tabIndex = -1;
-    return scriptLocationLink;
-  }
-
-  private tryFormatAsError(string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails): HTMLElement|null {
-    const runtimeModel = this.message.runtimeModel();
-    if (!runtimeModel) {
-      return null;
-    }
-
-    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
-    if (typeof issueSummary === 'string') {
-      string = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(string, issueSummary);
-    }
-
-    const linkInfos = StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(runtimeModel, string);
-    if (!linkInfos?.length) {
-      return null;
-    }
-    if (exceptionDetails?.stackTrace) {
-      StackTrace.ErrorStackParser.augmentErrorStackWithScriptIds(linkInfos, exceptionDetails.stackTrace);
-    }
-
-    const debuggerModel = runtimeModel.debuggerModel();
-    const formattedResult = document.createElement('span');
-
-    for (let i = 0; i < linkInfos.length; ++i) {
-      const newline = i < linkInfos.length - 1 ? '\n' : '';
-      const {line, link, isCallFrame} = linkInfos[i];
-      // Syntax errors don't have a stack frame that points to the source position
-      // where the error occurred. We use the source location from the
-      // exceptionDetails and append it to the end of the message instead.
-      if (!link && exceptionDetails && line.startsWith('SyntaxError')) {
-        appendOrShow(formattedResult, this.linkifyStringAsFragment(line));
-        const maybeScriptLocation = this.createScriptLocationLinkForSyntaxError(debuggerModel, exceptionDetails);
-        if (maybeScriptLocation) {
-          formattedResult.append(' (at ');
-          formattedResult.appendChild(maybeScriptLocation);
-          formattedResult.append(')');
-        }
-        formattedResult.append(newline);
-        continue;
-      }
-      if (!isCallFrame) {
-        appendOrShow(formattedResult, this.linkifyStringAsFragment(`${line}${newline}`));
-        continue;
-      }
-      const formattedLine = document.createElement('span');
-      if (!link) {
-        appendOrShow(formattedLine, this.linkifyStringAsFragment(`${line}${newline}`));
-        formattedLine.classList.add('formatted-builtin-stack-frame');
-        formattedResult.appendChild(formattedLine);
-        continue;
-      }
-      const suffix = `${link.suffix}${newline}`;
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(link.prefix));
-      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
-            columnNumber: link.columnNumber,
-            inlineFrameIndex: 0,
-            showColumnNumber: true,
-          });
-      scriptLocationLink.tabIndex = -1;
-      this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
-      formattedLine.appendChild(scriptLocationLink);
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
-      formattedLine.classList.add('formatted-stack-frame');
-      formattedResult.appendChild(formattedLine);
-
-      if (!link.enclosedInBraces) {
-        continue;
-      }
-
-      const prefixWithoutFunction = link.prefix.substring(0, link.prefix.lastIndexOf(' ', link.prefix.length - 3));
-
-      // If we were able to parse the function name from the stack trace line, try to replace it with an expansion of
-      // any inline frames.
-      const selectableChildIndex = this.selectableChildren.length - 1;
-      void this
-          .expandInlineStackFrames(
-              debuggerModel, prefixWithoutFunction, suffix, link.url, link.lineNumber, link.columnNumber,
-              formattedResult, formattedLine)
-          .then(modified => {
-            if (modified) {
-              formattedResult.removeChild(formattedLine);
-              this.selectableChildren.splice(selectableChildIndex, 1);
-            }
-          });
-    }
-
-    return formattedResult;
-  }
-
   static linkifyWithCustomLinkifier(
       string: string,
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):