chrome-devtools-frontend 1.0.1642246 → 1.0.1642899

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -362,23 +362,22 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
   const context = conversation?.selectedContext;
 
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
-    if (!context.external) {
-      const focus = context.getItem();
-      return new PerformanceAgentMarkdownRenderer(
-          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
-    }
-  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
+    const focus = context.getItem();
+    return new PerformanceAgentMarkdownRenderer(focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
+  }
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
     // Handle historical conversations (can't linkify anything).
     return new PerformanceAgentMarkdownRenderer();
-  } else if (
-      Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
+  }
+  if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
       conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING &&
       SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel)) {
     const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
     const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
     const mainFrameId = resourceTreeModel?.mainFrame?.id;
     return new StylingAgentMarkdownRenderer(mainFrameId);
-  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
+  }
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
     const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
     const mainDocumentURL = domModel?.existingDocument()?.documentURL;
     return new AccessibilityAgentMarkdownRenderer(mainDocumentURL);
@@ -570,11 +569,11 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   // clang-format on
 }
 
-function createNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceModel.StylingAgent.NodeContext|null {
+function createDOMNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceModel.DOMNodeContext.DOMNodeContext|null {
   if (!node) {
     return null;
   }
-  return new AiAssistanceModel.StylingAgent.NodeContext(node);
+  return new AiAssistanceModel.DOMNodeContext.DOMNodeContext(node);
 }
 
 function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileAgent.FileContext|
@@ -668,7 +667,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
 
   #selectedFile: AiAssistanceModel.FileAgent.FileContext|null = null;
-  #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
+  #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
 
@@ -1117,7 +1116,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#viewOutput.chatView?.focusTextInput();
     void this.#handleAidaAvailabilityChange();
     this.#selectedElement =
-        createNodeContext(selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)));
+        createDOMNodeContext(selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)));
     this.#selectedRequest =
         createRequestContext(UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest));
     this.#selectedPerformanceTrace =
@@ -1225,7 +1224,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
+    this.#selectedElement = createDOMNodeContext(selectedElementFilter(ev.data));
     this.#updateConversationState(this.#conversation);
   };
 
@@ -1576,6 +1575,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.FILE;
         break;
       }
+      case 'ai-assistance.storage-floating-button': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromStoragePanelFloatingButton);
+        targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
+        break;
+      }
     }
 
     if (!targetConversationType) {
@@ -1727,7 +1731,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #handleConversationContextChange = (data: unknown): void => {
     if (data instanceof AiAssistanceModel.FileAgent.FileContext) {
       this.#selectedFile = data;
-    } else if (data instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+    } else if (data instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
       this.#selectedElement = data;
     } else if (data instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
       this.#selectedRequest = data;

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -297,3 +297,19 @@ UI.ActionRegistration.registerActionExtension({
   },
   condition: config => isFileAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
 });
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'ai-assistance.storage-floating-button',
+  contextTypes(): [] {
+    return [];
+  },
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
+  configurableBindings: false,
+  async loadActionDelegate() {
+    const AiAssistance = await loadAiAssistanceModule();
+    return new AiAssistance.ActionDelegate();
+  },
+  condition: config =>
+      isStorageAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
+});

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -174,7 +174,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
     return lockedString(UIStringsNotTranslate.removeContextFile);
   }
-  if (context instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+  if (context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
     return lockedString(UIStringsNotTranslate.removeContextElement);
   }
   if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
@@ -336,7 +336,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                         })}
                       >
                         ${
-                          input.context instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                          input.context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext ?
                             html`
                               <devtools-widget
                                 class="title"

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -205,6 +205,10 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 
+  protected override isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
+  }
+
   protected removeItem(key: string): void {
     this.domStorage?.removeItem(key);
   }

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

@@ -3,15 +3,108 @@
 // found in the LICENSE file.
 
 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';
+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';
+
+const {html, render} = Lit;
 
 export interface ViewInput {
   error: Bindings.SymbolizedError.SymbolizedError;
   ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
 }
 
-const DEFAULT_VIEW = (_input: ViewInput, _output: object, _target: HTMLElement): void => {};
+function renderHeader(content: Lit.LitTemplate|Node|UI.Widget.Widget, isCause: boolean): Lit.LitTemplate {
+  if (isCause) {
+    return html`<div class="symbolized-error-header"><span>Caused by: </span><span class="error-message-text">${
+        content}</span></div>`;
+  }
+  return html`<span class="error-message-text">${content}</span>`;
+}
+
+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}]`;
+  }
+
+  if (name) {
+    return html`${asyncPrefix}${constructorPrefix}${name} (`;
+  }
+  return html`${asyncPrefix}${constructorPrefix}`;
+}
+
+function renderFrameSuffix(frame: StackTrace.StackTrace.ParsedErrorStackFrame): Lit.LitTemplate {
+  if (frame.promiseIndex !== undefined) {
+    return Lit.nothing;
+  }
+  if (frame.name) {
+    return html`)`;
+  }
+  return Lit.nothing;
+}
+
+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)) {
+      console.error('SymbolizedErrorWidget received an unsupported error type:', error);
+      return Lit.nothing;
+    }
+    const linkOptions: Components.Linkifier.LinkifyOptions = {
+      showColumnNumber: true,
+      inlineFrameIndex: 0,
+      maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
+      ignoreListManager: input.ignoreListManager,
+    };
+    const headerContent = html`${error.message}`;
+    const header = renderHeader(headerContent, isCause);
+    const syncFrames = error.stackTrace.syncFragment.frames;
+    // clang-format off
+    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 newline = i < error.stackTrace.syncFragment.frames.length - 1 ? '\n' : '';
+          const frameClass = isBuiltin ? 'formatted-builtin-stack-frame' : 'formatted-stack-frame';
+          return html`
+            <span class=${frameClass}>${'    at '}${renderFramePrefix(frame, linkOptions)}${linkElement}${renderFrameSuffix(frame)}${newline}</span>
+          `;
+        })}
+      </span>
+      ${error.cause ? renderError(error.cause, true) : Lit.nothing}
+    `;
+    // clang-format on
+  };
+
+  // clang-format off
+  render(html`<span class="symbolized-error-widget">${renderError(input.error, false)}</span>`, target);
+  // clang-format on
+};
 
 export class SymbolizedErrorWidget extends UI.Widget.Widget {
   #error?: Bindings.SymbolizedError.SymbolizedError;
@@ -19,7 +112,8 @@ export class SymbolizedErrorWidget extends UI.Widget.Widget {
   #ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
 
   constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
-    super(element);
+    const host = element || document.createElement('span');
+    super(host, {classes: ['symbolized-error-widget-host']});
     this.#view = view;
   }
 

package/front_end/panels/console/symbolizedErrorWidget.css

@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+
+.symbolized-error-widget {
+  white-space: pre-wrap;
+  word-break: break-all;
+
+  --display-formatted-stack-frame-default: block;
+  --display-ignored-formatted-stack-frame-local: var(--display-ignored-formatted-stack-frame, none);
+
+  &.show-hidden-rows {
+    --display-ignored-formatted-stack-frame-local: var(--display-formatted-stack-frame-default);
+  }
+}
+
+.symbolized-error-widget .formatted-stack-frame {
+  display: var(--display-formatted-stack-frame-default);
+
+  &:has(.ignore-list-link) {
+    display: var(--display-ignored-formatted-stack-frame-local);
+    opacity: 60%;
+
+    /* Subsequent builtin stack frames are also treated as ignored */
+    & + .formatted-builtin-stack-frame {
+      display: var(--display-ignored-formatted-stack-frame-local);
+      opacity: 60%;
+    }
+  }
+}
+
+.symbolized-error-widget .formatted-builtin-stack-frame {
+  display: var(--display-formatted-stack-frame-default);
+}
+
+.symbolized-error-widget-host {
+  display: inline;
+}
+
+.symbolized-error-header {
+  display: block;
+}
+
+.error-message-text {
+  display: inline;
+}

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;
     }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2661,10 +2661,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return container;
   }
 
-  #getLinkableFunction(functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      InlineEditor.LinkSwatch.LinkSwatch {
+  #getLinkableFunction(
+      functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      property: SDK.CSSProperty.CSSProperty): InlineEditor.LinkSwatch.LinkSwatch {
     const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
-    const registeredFunction = matchedStyles.getRegisteredFunction(functionName);
+    const {registeredFunction, treeScopeDistance} = matchedStyles.getRegisteredFunction(functionName, property);
     const isDefined = Boolean(registeredFunction);
     swatch.data = {
       jslogContext: 'css-function',
@@ -2675,7 +2676,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         if (!registeredFunction) {
           return;
         }
-        this.#stylesContainer.jumpToFunctionDefinition(registeredFunction);
+        this.#stylesContainer.jumpToFunctionDefinition(registeredFunction, treeScopeDistance);
       },
     };
     return swatch;
@@ -2696,7 +2697,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const tooltipId = this.getTooltipId(`${functionName}-trace`);
     // clang-format off
     return html`
-        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles) : functionName}</span>
+        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles, context.property) : functionName}</span>
         <devtools-tooltip
             id=${tooltipId}
             use-hotkey

package/front_end/panels/elements/StylesContainer.ts

@@ -37,7 +37,7 @@ export interface StylesContainer {
       computedValue: string|null): ElementsComponents.CSSVariableValueView.CSSVariableValueView;
   getVariableParserError(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, variableName: string):
       ElementsComponents.CSSVariableValueView.CSSVariableParserError|null;
-  jumpToFunctionDefinition(functionName: string): void;
+  jumpToFunctionDefinition(functionName: string, treeScopeDistance: number): void;
   continueEditingElement(sectionIndex: number, propertyIndex: number): void;
   revealProperty(cssProperty: SDK.CSSProperty.CSSProperty): void;
   resetFocus(): void;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -344,16 +344,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  jumpToSection(sectionName: string, blockName: string): void {
-    this.decorator.findAndHighlightSection(sectionName, blockName);
+  jumpToSection(sectionName: string, blockName: string, treeScopeDistance?: number): void {
+    this.decorator.findAndHighlightSection(sectionName, blockName, treeScopeDistance);
   }
 
   jumpToSectionBlock(section: string): void {
     this.decorator.findAndHighlightSectionBlock(section);
   }
 
-  jumpToFunctionDefinition(functionName: string): void {
-    this.jumpToSection(functionName, FUNCTION_SECTION_NAME);
+  jumpToFunctionDefinition(functionName: string, treeScopeDistance: number): void {
+    this.jumpToSection(functionName, FUNCTION_SECTION_NAME, treeScopeDistance);
   }
 
   jumpToFontPaletteDefinition(paletteName: string): void {