chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -28,8 +28,13 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 /* eslint no-return-assign: "off" */
+import '../../ui/components/buttons/buttons.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
+import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+// eslint-disable-next-line @devtools/es-modules-import
+import dataGridAiButtonStyles from '../../ui/legacy/components/data_grid/dataGridAiButton.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -37,11 +42,13 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as ApplicationComponents from './components/components.js';
 import {StorageItemsToolbar} from './StorageItemsToolbar.js';
 
+const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
+
 const {ARIAUtils} = UI;
 const {EmptyWidget} = UI.EmptyWidget;
 const {VBox, widget} = UI.Widget;
 const {Size} = Geometry;
-const {repeat} = LitDirectives;
+const {repeat, ifDefined} = LitDirectives;
 
 type Widget = UI.Widget.Widget;
 type VBox = UI.Widget.VBox;
@@ -87,6 +94,9 @@ export interface ViewInput {
   onDeleteAll: () => void;
   jslog?: string;
   classes?: string[];
+  aiButtonTitle?: string;
+  showAiButton?: boolean;
+  onAiButtonClick?: (item: {key: string, value: string}, event: Event) => void;
 }
 
 interface ViewOutput {
@@ -150,6 +160,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                   @deselect=${() => input.onSelect(null)}
                 >
                   <table>
+                    ${input.showAiButton ? html`<style>${dataGridAiButtonStyles}</style>`: nothing}
                     <tr>
                       <th id="key" sortable ?editable=${input.editable}>
                         ${i18nString(UIStrings.key)}
@@ -165,7 +176,15 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                             input.onEdit(item.key, item.value, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
                           @delete=${() => input.onDelete(item.key)}
                           selected=${(input.selectedKey === item.key) || nothing}>
-                        <td>${item.key}</td>
+                        <td>${input.showAiButton ? html`
+                            <span class="ai-button-container">
+                              <devtools-floating-button
+                                icon-name=${AIAssistance.AiUtils.getIconName()}
+                                title=${ifDefined(input.aiButtonTitle)}
+                                @click=${(e: Event) => input.onAiButtonClick?.(item, e)}
+                              ></devtools-floating-button>
+                            </span>
+                          ` : nothing}${item.key}</td>
                         <td>${item.value.substr(0, MAX_VALUE_LENGTH)}</td>
                       </tr>`)}
                       <tr placeholder></tr>
@@ -217,15 +236,24 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       preview: this.#preview,
       jslog: this.#jslog,
       classes: this.#classes,
+      showAiButton: this.isAiButtonEnabled(),
+      aiButtonTitle: this.isAiButtonEnabled() &&
+              UI.ActionRegistry.ActionRegistry.instance().hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID) ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).title() :
+          undefined,
       onSelect: (item: {key: string, value: string}|null) => {
         this.#toolbar?.setCanDeleteSelected(Boolean(item));
-        if (!item) {
-          void this.#previewEntry(null);
-        } else {
-          void this.#previewEntry(item);
-        }
+        void this.#previewEntry(item);
         this.selectedItemChanged(item);
       },
+      onAiButtonClick: (item: {key: string, value: string}, event: Event) => {
+        event.stopPropagation();
+        viewInput.onSelect(item);
+        const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+        if (actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
+          void actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).execute();
+        }
+      },
 
       onSort: (ascending: boolean) => {
         this.#isSortOrderAscending = ascending;
@@ -252,6 +280,10 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     this.#view(viewInput, viewOutput, this.contentElement);
   }
 
+  protected isAiButtonEnabled(): boolean {
+    return false;
+  }
+
   protected get toolbar(): StorageItemsToolbar|undefined {
     return this.#toolbar;
   }

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

@@ -0,0 +1,219 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+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 adsViewStyles from './adsView.css.js';
+
+const {html} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Title for a metric showing the percentage of the viewport covered by ads.
+   */
+  viewportAdDensity: 'Viewport ad density',
+  /**
+   * @description Title for a metric showing the number of ads in the viewport.
+   */
+  viewportAdCount: 'Viewport ad count',
+  /**
+   * @description Title for a metric showing the total CPU usage by ads.
+   */
+  totalCpuUsage: 'Total CPU usage by ads',
+  /**
+   * @description Title for a metric showing the total network usage by ads.
+   */
+  totalNetworkUsage: 'Total network usage by ads',
+  /**
+   * @description Subtext showing the average value of a metric.
+   * @example {5.00%} PH1
+   */
+  average: '(Average: {PH1})',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/AdsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  metrics: Protocol.Ads.AdMetrics;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const metrics = input.metrics;
+
+  const formatValue = (val: number, isPercentage: boolean): string => {
+    if (isPercentage) {
+      return new Intl
+          .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+            style: 'percent',
+            maximumFractionDigits: 0,
+          })
+          .format(val / 100);
+    }
+    return new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale).format(val);
+  };
+
+  const formatAverage = (val: number, isPercentage: boolean): string => {
+    if (isPercentage) {
+      return new Intl
+          .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+            style: 'percent',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })
+          .format(val / 100);
+    }
+    return new Intl
+        .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })
+        .format(val);
+  };
+
+  const formatCpu = (val: number): string => {
+    return i18n.TimeUtilities.preciseMillisToString(val, 1);
+  };
+
+  const formatNetwork = (val: number): string => {
+    return i18n.ByteUtilities.bytesToString(val);
+  };
+
+  // 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>
+  `, target);
+  // clang-format on
+};
+
+export class AdsView extends UI.Widget.Widget {
+  #currentMetrics: Protocol.Ads.AdMetrics;
+  #pollTimer?: number;
+  #isPolling = false;
+  #pollSessionId = 0;
+  #view: View;
+
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+    this.#currentMetrics = {
+      viewportAdDensityByArea: 0,
+      averageViewportAdDensityByArea: 0,
+      viewportAdCount: 0,
+      averageViewportAdCount: 0,
+      totalAdCpuTime: 0,
+      totalAdNetworkBytes: 0,
+    };
+    this.requestUpdate();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#startPolling();
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                this.#onPrimaryPageChanged, this);
+  }
+
+  override willHide(): void {
+    this.#stopPolling();
+    SDK.TargetManager.TargetManager.instance().removeModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                   SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                   this.#onPrimaryPageChanged, this);
+    super.willHide();
+  }
+
+  #startPolling(): void {
+    if (this.#isPolling) {
+      return;
+    }
+    this.#isPolling = true;
+    this.#pollSessionId++;
+    void this.#pollMetrics(this.#pollSessionId);
+  }
+
+  #stopPolling(): void {
+    this.#isPolling = false;
+    if (this.#pollTimer !== undefined) {
+      window.clearTimeout(this.#pollTimer);
+      this.#pollTimer = undefined;
+    }
+  }
+
+  async #pollMetrics(sessionId: number): Promise<void> {
+    if (!this.#isPolling || this.#pollSessionId !== sessionId) {
+      return;
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (target) {
+      const adsAgent = target.adsAgent();
+      if (adsAgent) {
+        const response = await adsAgent.invoke_getAdMetrics();
+        if (!this.#isPolling || this.#pollSessionId !== sessionId) {
+          return;
+        }
+        if (!response.getError()) {
+          this.#currentMetrics = response.metrics;
+          this.requestUpdate();
+        }
+      }
+    }
+    if (this.#isPolling && this.#pollSessionId === sessionId) {
+      this.#pollTimer = window.setTimeout(() => this.#pollMetrics(sessionId), 500);
+    }
+  }
+
+  #onPrimaryPageChanged(): void {
+    this.#currentMetrics = {
+      viewportAdDensityByArea: 0,
+      averageViewportAdDensityByArea: 0,
+      viewportAdCount: 0,
+      averageViewportAdCount: 0,
+      totalAdCpuTime: 0,
+      totalAdNetworkBytes: 0,
+    };
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      metrics: this.#currentMetrics,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+}

package/front_end/panels/application/components/adsView.css

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.metrics-container {
+  flex: 0 0 auto;
+  margin: 0 0 24px;
+  border: 1px solid var(--sys-color-divider);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1px;
+  background-color: var(--sys-color-divider);
+}
+
+.metric-box {
+  background-color: var(--sys-color-surface);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.metric-title {
+  font-size: 12px;
+  color: var(--sys-color-on-surface-subtle);
+  margin: 0 0 4px;
+}
+
+.metric-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--sys-color-on-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  gap: 2px;
+}
+
+.metric-average {
+  font-size: 12px;
+  font-weight: normal;
+  color: var(--sys-color-on-surface-subtle);
+}

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AdsView from './AdsView.js';
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as BounceTrackingMitigationsView from './BounceTrackingMitigationsView.js';
 import * as CrashReportContextGrid from './CrashReportContextGrid.js';
@@ -17,6 +18,7 @@ import * as StorageMetadataView from './StorageMetadataView.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
 export {
+  AdsView,
   BackForwardCacheView,
   BounceTrackingMitigationsView,
   CrashReportContextGrid,

package/front_end/panels/common/ExtensionServer.ts

@@ -27,7 +27,13 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {ExtensionButton, ExtensionPanel, ExtensionSidebarPane} from './ExtensionPanel.js';
 
 const extensionOrigins = new WeakMap<MessagePort, Platform.DevToolsPath.UrlString>();
-const kPermittedSchemes = ['http:', 'https:', 'file:', 'data:', 'chrome-extension:', 'about:'];
+const kForbiddenSchemes = [
+  'chrome:',
+  'chrome-untrusted:',
+  'chrome-error:',
+  'chrome-search:',
+  'devtools:',
+];
 
 declare global {
   interface Window {
@@ -78,7 +84,6 @@ export class HostsPolicy {
 }
 
 class RegisteredExtension {
-  openResourceScheme: null|string = null;
   constructor(readonly name: string, readonly hostsPolicy: HostsPolicy, readonly allowFileAccess: boolean) {
   }
 
@@ -91,8 +96,11 @@ class RegisteredExtension {
       return false;
     }
 
-    if (this.openResourceScheme && inspectedURL.startsWith(this.openResourceScheme)) {
-      return true;
+    let parsedURL;
+    try {
+      parsedURL = new URL(inspectedURL);
+    } catch {
+      return false;
     }
 
     if (!ExtensionServer.canInspectURL(inspectedURL)) {
@@ -104,12 +112,6 @@ class RegisteredExtension {
     }
 
     if (!this.allowFileAccess) {
-      let parsedURL;
-      try {
-        parsedURL = new URL(inspectedURL);
-      } catch {
-        return false;
-      }
       return parsedURL.protocol !== 'file:';
     }
 
@@ -863,18 +865,27 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!extension) {
       throw new Error('Received a message from an unregistered extension');
     }
-    if (message.urlScheme) {
-      extension.openResourceScheme = message.urlScheme;
+    let validScheme = message.urlScheme;
+    if (validScheme) {
+      try {
+        const urlToParse = validScheme.replace(/:?(\/\/)?$/, '') + '://test';
+        validScheme = new URL(urlToParse).protocol;
+      } catch {
+        return this.status.E_BADARG('urlScheme', 'Invalid scheme');
+      }
+      if (kForbiddenSchemes.includes(validScheme) || validScheme === 'file:') {
+        return this.status.E_BADARG('urlScheme', 'Scheme is forbidden');
+      }
     }
     const extensionOrigin = this.getExtensionOrigin(port);
     const {name} = extension;
     const registration = {
       title: name,
       origin: extensionOrigin,
-      scheme: message.urlScheme,
+      scheme: validScheme,
       handler: this.handleOpenURL.bind(this, port),
       shouldHandleOpenResource: (url: Platform.DevToolsPath.UrlString, schemes: Set<string>) =>
-          Components.Linkifier.Linkifier.shouldHandleOpenResource(extension.openResourceScheme, url, schemes),
+          Components.Linkifier.Linkifier.shouldHandleOpenResource(validScheme || null, url, schemes),
     };
     if (message.handlerPresent) {
       Components.Linkifier.Linkifier.registerLinkHandler(registration);
@@ -1645,7 +1656,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return false;
     }
 
-    if (!kPermittedSchemes.includes(parsedURL.protocol)) {
+    if (kForbiddenSchemes.includes(parsedURL.protocol)) {
       return false;
     }
 

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
@@ -9,6 +10,8 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
+import {ConsoleViewMessage} from './ConsoleViewMessage.js';
+
 const {html, render} = Lit;
 
 export interface ViewInput {
@@ -24,20 +27,64 @@ function renderHeader(content: Lit.LitTemplate|Node|UI.Widget.Widget, isCause: b
   return html`<span class="error-message-text">${content}</span>`;
 }
 
-function renderFramePrefix(
-    frame: StackTrace.StackTrace.ParsedErrorStackFrame,
-    _options: Components.Linkifier.LinkifyOptions): Lit.LitTemplate {
+function formatName(frame: StackTrace.StackTrace.ParsedErrorStackFrame): string {
+  let name = frame.name || '';
+  const isInline = Boolean(frame.rawName) && frame.name !== frame.rawName;
+  const shouldAppendMethodAlias = !isInline && frame.methodName && name && name !== frame.methodName &&
+      !name.endsWith('.' + frame.methodName) && !name.endsWith(' ' + frame.methodName);
+  if (shouldAppendMethodAlias) {
+    name += ` [as ${frame.methodName}]`;
+  }
+  return name;
+}
+
+function renderLinkElement(frame: StackTrace.StackTrace.ParsedErrorStackFrame,
+                           options: Components.Linkifier.LinkifyOptions): HTMLElement|Lit.LitTemplate {
+  if (frame.url || frame.uiSourceCode) {
+    const link = Components.Linkifier.Linkifier.linkifyStackTraceFrame(frame, options);
+    link.tabIndex = -1;
+    return link;
+  }
+  return html`<span>&lt;anonymous&gt;</span>`;
+}
+
+function renderEvalOrigin(frame: StackTrace.StackTrace.ParsedErrorStackFrame,
+                          options: Components.Linkifier.LinkifyOptions): Lit.LitTemplate {
+  const name = formatName(frame);
+  const linkElement = renderLinkElement(frame, options);
+
+  const asyncPrefix = frame.isAsync ? 'async ' : '';
+  const constructorPrefix = frame.isConstructor ? 'new ' : '';
+
+  if (frame.isEval) {
+    const evalOrigin = frame.evalOrigin ? renderEvalOrigin(frame.evalOrigin, options) : '<anonymous>';
+    if (name) {
+      return html`${asyncPrefix}${constructorPrefix}eval at ${name} (${evalOrigin})`;
+    }
+    return html`${asyncPrefix}${constructorPrefix}eval at ${evalOrigin}`;
+  }
+  if (name) {
+    return html`${asyncPrefix}${constructorPrefix}eval at ${name} (${linkElement})`;
+  }
+  return html`${asyncPrefix}${constructorPrefix}eval at ${linkElement}`;
+}
+
+function renderFramePrefix(frame: StackTrace.StackTrace.ParsedErrorStackFrame,
+                           options: Components.Linkifier.LinkifyOptions): Lit.LitTemplate {
   const asyncPrefix = frame.isAsync ? 'async ' : '';
   if (frame.promiseIndex !== undefined) {
     const name = frame.name || 'Promise.all';
     return html`${asyncPrefix}${name} (index ${frame.promiseIndex})`;
   }
   const constructorPrefix = frame.isConstructor ? 'new ' : '';
-  let name = frame.name || '';
-  const isInline = Boolean(frame.rawName) && frame.name !== frame.rawName;
-  if (!isInline && frame.methodName && name && name !== frame.methodName && !name.endsWith('.' + frame.methodName) &&
-      !name.endsWith(' ' + frame.methodName)) {
-    name += ` [as ${frame.methodName}]`;
+  const name = formatName(frame);
+
+  if (frame.isEval) {
+    const evalOrigin = frame.evalOrigin ? renderEvalOrigin(frame.evalOrigin, options) : '<anonymous>';
+    if (name) {
+      return html`${asyncPrefix}${constructorPrefix}${name} (${evalOrigin}, `;
+    }
+    return html`${asyncPrefix}${constructorPrefix}${evalOrigin}, `;
   }
 
   if (name) {
@@ -58,10 +105,25 @@ function renderFrameSuffix(frame: StackTrace.StackTrace.ParsedErrorStackFrame):
 
 const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
   const renderError = (error: Bindings.SymbolizedError.SymbolizedError, isCause: boolean): Lit.LitTemplate => {
-    if (!(error instanceof Bindings.SymbolizedError.SymbolizedErrorObject)) {
+    if (error instanceof Bindings.SymbolizedError.SymbolizedSyntaxError) {
       console.error('SymbolizedErrorWidget received an unsupported error type:', error);
       return Lit.nothing;
     }
+    if (error instanceof Bindings.SymbolizedError.UnparsableError) {
+      const fragment = ConsoleViewMessage.linkifyWithCustomLinkifier(
+          error.errorStack,
+          (text: string, url: Platform.DevToolsPath.UrlString, lineNumber?: number, columnNumber?: number) => {
+            const options = {text, lineNumber, columnNumber, ignoreListManager: input.ignoreListManager};
+            const linkElement = Components.Linkifier.Linkifier.linkifyURL(url, options);
+            linkElement.tabIndex = -1;
+            return linkElement;
+          });
+      const header = renderHeader(fragment, isCause);
+      return html`
+        <span class=${isCause ? 'console-message-stack-trace-wrapper' : ''}>${header}</span>
+      `;
+    }
+
     const linkOptions: Components.Linkifier.LinkifyOptions = {
       showColumnNumber: true,
       inlineFrameIndex: 0,
@@ -75,19 +137,8 @@ const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): v
     return html`
       <span class=${isCause ? 'console-message-stack-trace-wrapper' : ''}
       >${header}${syncFrames.length > 0 ? '\n' : ''}${syncFrames.map((frame: StackTrace.StackTrace.ParsedErrorStackFrame, i: number) => {
-          let linkElement: HTMLElement|Lit.LitTemplate = Lit.nothing;
-          let isBuiltin = false;
-          if (frame.promiseIndex !== undefined) {
-            // Promise.all doesn't have a linkable location.
-            isBuiltin = true;
-          } else if (frame.url || frame.uiSourceCode) {
-            const link = Components.Linkifier.Linkifier.linkifyStackTraceFrame(frame, linkOptions);
-            link.tabIndex = -1;
-            linkElement = link;
-          } else {
-            linkElement = html`<span>&lt;anonymous&gt;</span>`;
-            isBuiltin = true;
-          }
+          const isBuiltin = frame.promiseIndex !== undefined || (!frame.url && !frame.uiSourceCode);
+          const linkElement = frame.promiseIndex !== undefined ? Lit.nothing : renderLinkElement(frame, linkOptions);
 
           const newline = i < error.stackTrace.syncFragment.frames.length - 1 ? '\n' : '';
           const frameClass = isBuiltin ? 'formatted-builtin-stack-frame' : 'formatted-stack-frame';

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -276,7 +276,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     return null;
   }
 
-  jumpToFunctionDefinition(_functionName: string): void {
+  jumpToFunctionDefinition(_functionName: string, _treeScopeDistance: number): void {
   }
 
   continueEditingElement(_sectionIndex: number, _propertyIndex: number): void {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -379,6 +379,14 @@ export class StylePropertiesSection {
     return this.sectionIdx;
   }
 
+  treeScopeDistance(): number {
+    const treeScope = this.styleInternal.parentRule?.treeScope;
+    if (!treeScope) {
+      return -1;
+    }
+    return SDK.CSSMatchedStyles.distanceToTreeScope(this.matchedStyles.node(), treeScope);
+  }
+
   static createRuleOriginNode(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, linkifier: Components.Linkifier.Linkifier,
       rule: SDK.CSSRule.CSSRule|null): LitTemplate {

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -51,9 +51,11 @@ export class StylePropertyHighlighter {
     PanelUtils.highlightElement(block.titleElement() as HTMLElement);
   }
 
-  findAndHighlightSection(sectionName: string, blockName: string): void {
+  findAndHighlightSection(sectionName: string, blockName: string, treeScopeDistance = -1): void {
     const block = this.styleSidebarPane.getSectionBlockByName(blockName);
-    const section = block?.sections.find(section => section.headerText() === sectionName);
+    const section = block?.sections.find(
+        section => section.headerText() === sectionName &&
+            (treeScopeDistance === -1 || section.treeScopeDistance() === treeScopeDistance));
     if (!section || !block) {
       return;
     }