chrome-devtools-frontend 1.0.1643855 → 1.0.1646286

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

@@ -16,6 +16,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as WebMCP from '../../models/web_mcp/web_mcp.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -33,6 +34,8 @@ import {
   type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as Console from '../console/console.js';
+import symbolizedErrorWidgetStyles from '../console/symbolizedErrorWidget.css.js';
 import * as ProtocolMonitor from '../protocol_monitor/protocol_monitor.js';
 
 import webMCPViewStyles from './webMCPView.css.js';
@@ -191,10 +194,6 @@ const UIStrings = {
    * @description Notice to display when a tool has been unregistered
    */
   toolUnregisteredNotice: 'This tool has been unregistered',
-  /**
-   * @description Text preceding a nested error in a stack trace
-   */
-  causedBy: 'Caused by:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -592,7 +591,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
                           errorText: input.selectedCall?.result?.errorText,
-                          exceptionDetails: input.selectedCall?.result?.exceptionDetails,
+                          symbolizedError: input.selectedCall?.result?.symbolizedError,
                   })}>
                 </devtools-widget>
               </devtools-tabbed-pane>
@@ -953,11 +952,11 @@ export interface PayloadViewInput {
   valueObject?: unknown;
   valueString?: string;
   errorText?: string;
-  exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
+  symbolizedError?: Bindings.SymbolizedError.SymbolizedError|null;
 }
 
 export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
-  if (!input.valueObject && !input.valueString && !input.errorText && !input.exceptionDetails) {
+  if (!input.valueObject && !input.valueString && !input.errorText && !input.symbolizedError) {
     render(nothing, target);
     return;
   }
@@ -988,74 +987,44 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       html`<div class="payload-value source-code error-text">${text}</div>`;
 
   const createException = (
-      details: WebMCP.WebMCPModel.ExceptionDetails,
-      linkifier: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(),
-      ): TemplateResult => {
-    const renderFrame = (
-        frame: StackTrace.ErrorStackParser.ParsedErrorFrame,
-        index: number,
-        array: StackTrace.ErrorStackParser.ParsedErrorFrame[],
-        ): TemplateResult => {
-      const newline = index < array.length - 1 ? '\n' : '';
-      const {line, link, isCallFrame} = frame;
-
-      if (!isCallFrame) {
-        return html`<span>${line}${newline}</span>`;
-      }
-
-      if (!link) {
-        return html`<span class="formatted-builtin-stack-frame">${line}${newline}</span>`;
-      }
-
-      const scriptLocationLink = linkifier.linkifyScriptLocation(
-          details.error.runtimeModel().target(),
-          link.scriptId || null,
-          link.url,
-          link.lineNumber,
-          {
-            columnNumber: link.columnNumber,
-            inlineFrameIndex: 0,
-            showColumnNumber: true,
-          },
-      );
-      scriptLocationLink.tabIndex = -1;
-
-      return html`<span class="formatted-stack-frame">${link.prefix}${scriptLocationLink}${link.suffix}${
-          newline}</span>`;
-    };
-
+      error: Bindings.SymbolizedError.SymbolizedError|null,
+      ): TemplateResult|typeof nothing => {
+    if (!error) {
+      return nothing;
+    }
     return html`
       <div class="payload-value source-code error-text">
-        ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
-        <div>${details.frames.map(renderFrame)}</div>
-        ${
-        details.cause ? html`\n${i18nString(UIStrings.causedBy)}\n${createException(details.cause, linkifier)}` :
-                        nothing}</div>`;
+        <devtools-widget
+          ${UI.Widget.widget(Console.SymbolizedErrorWidget.SymbolizedErrorWidget, {error})}
+        ></devtools-widget>
+      </div>
+    `;
   };
 
-  render(
-      html`
+  render(html`
     <style>${webMCPViewStyles}</style>
+    <style>${symbolizedErrorWidgetStyles}</style>
     <div class="call-payload-view">
       <div class="call-payload-content">
             ${
-          isParsable ? createPayload(input.valueObject) :
-                       (input.valueString !== undefined ?
-                            createSourceText(input.valueString) :
-                            (input.exceptionDetails ? createException(input.exceptionDetails) :
-                                                      (input.errorText ? createErrorText(input.errorText) : nothing)))}
+             isParsable ?
+                 createPayload(input.valueObject) :
+                 (input.valueString !== undefined ?
+                      createSourceText(input.valueString) :
+                      (input.symbolizedError ? createException(input.symbolizedError) :
+                                               (input.errorText ? createErrorText(input.errorText) : nothing)))}
       </div>
     </div>
   `,
-      target);
+         target);
 };
 
 export class PayloadWidget extends UI.Widget.Widget {
   #valueObject?: unknown;
   #valueString?: string;
   #errorText?: string;
-  #exceptionDetailsPromise?: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>;
-  #exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
+  #symbolizedErrorPromise?: Promise<Bindings.SymbolizedError.SymbolizedError|null>;
+  #symbolizedError?: Bindings.SymbolizedError.SymbolizedError|null;
   #view: typeof PAYLOAD_DEFAULT_VIEW;
 
   constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
@@ -1090,27 +1059,27 @@ export class PayloadWidget extends UI.Widget.Widget {
     return this.#errorText;
   }
 
-  async #updateExceptionDetails(
-      exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined): Promise<void> {
-    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
+  async #updateSymbolizedError(symbolizedErrorPromise: Promise<Bindings.SymbolizedError.SymbolizedError|null>|
+                               undefined): Promise<void> {
+    if (this.#symbolizedErrorPromise === symbolizedErrorPromise) {
       return;
     }
-    this.#exceptionDetailsPromise = exceptionDetailsPromise;
-    this.#exceptionDetails = undefined;
+    this.#symbolizedErrorPromise = symbolizedErrorPromise;
+    this.#symbolizedError = undefined;
     this.requestUpdate();
-    const exceptionDetails = await exceptionDetailsPromise;
-    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
-      this.#exceptionDetails = exceptionDetails;
+    const symbolizedError = await symbolizedErrorPromise;
+    if (this.#symbolizedErrorPromise === symbolizedErrorPromise) {
+      this.#symbolizedError = symbolizedError || null;
       this.requestUpdate();
     }
   }
 
-  set exceptionDetails(exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined) {
-    void this.#updateExceptionDetails(exceptionDetailsPromise);
+  set symbolizedError(symbolizedErrorPromise: Promise<Bindings.SymbolizedError.SymbolizedError|null>|undefined) {
+    void this.#updateSymbolizedError(symbolizedErrorPromise);
   }
 
-  get exceptionDetails(): Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined {
-    return this.#exceptionDetailsPromise;
+  get symbolizedError(): Promise<Bindings.SymbolizedError.SymbolizedError|null>|undefined {
+    return this.#symbolizedErrorPromise;
   }
   override wasShown(): void {
     super.wasShown();
@@ -1122,7 +1091,7 @@ export class PayloadWidget extends UI.Widget.Widget {
       valueObject: this.#valueObject,
       valueString: this.#valueString,
       errorText: this.#errorText,
-      exceptionDetails: this.#exceptionDetails,
+      symbolizedError: this.#symbolizedError,
     };
     this.#view(input, {}, this.contentElement);
   }

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

@@ -7,6 +7,7 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import adsViewStyles from './adsView.css.js';
 
@@ -89,34 +90,36 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
   Lit.render(html`
     <style>${adsViewStyles}</style>
-    <dl class="metrics-container">
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.viewportAdDensity)}</dt>
-        <dd class="metric-value">
-          <span>${formatValue(metrics.viewportAdDensityByArea, true)}</span>
-          <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdDensityByArea, true)})}</span>
-        </dd>
-      </div>
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
-        <dd class="metric-value">
-          <span>${formatValue(metrics.viewportAdCount, false)}</span>
-          <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdCount, false)})}</span>
-        </dd>
-      </div>
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
-        <dd class="metric-value">
-          <span>${formatCpu(metrics.totalAdCpuTime)}</span>
-        </dd>
-      </div>
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
-        <dd class="metric-value">
-          <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
-        </dd>
-      </div>
-    </dl>
+    <div class="ads-view-container" jslog=${VisualLogging.pane('ads')}>
+      <dl class="metrics-container">
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.viewportAdDensity)}</dt>
+          <dd class="metric-value">
+            <span>${formatValue(metrics.viewportAdDensityByArea, true)}</span>
+            <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdDensityByArea, true)})}</span>
+          </dd>
+        </div>
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
+          <dd class="metric-value">
+            <span>${formatValue(metrics.viewportAdCount, false)}</span>
+            <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdCount, false)})}</span>
+          </dd>
+        </div>
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
+          <dd class="metric-value">
+            <span>${formatCpu(metrics.totalAdCpuTime)}</span>
+          </dd>
+        </div>
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
+          <dd class="metric-value">
+            <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
+          </dd>
+        </div>
+      </dl>
+    </div>
   `, target);
   // clang-format on
 };

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/components/adsView.css

@@ -11,6 +11,12 @@
   overflow: auto;
 }
 
+.ads-view-container {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+}
+
 .metrics-container {
   flex: 0 0 auto;
   margin: 0 0 24px;

package/front_end/panels/common/ExtensionServer.ts

@@ -12,6 +12,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as _ProtocolClient from '../../core/protocol_client/protocol_client.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -1616,6 +1617,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           targetType = Host.UserMetrics.ExtensionEvalTarget.SAME_EXTENSION;
         } else {
           targetType = Host.UserMetrics.ExtensionEvalTarget.OTHER_EXTENSION;
+          if (!Root.Runtime.hostConfig.extensionsOnChromeUrls?.enabled) {
+            return this.status.E_FAILED(
+                'Access to extension URLs is restricted; use --extensions-on-chrome-urls to enable.');
+          }
         }
       }
       Host.userMetrics.extensionEvalTarget(targetType);

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