chrome-devtools-frontend 1.0.1650232 → 1.0.1651641

package/front_end/panels/common/ExtensionServer.ts

@@ -85,7 +85,8 @@ export class HostsPolicy {
 }
 
 class RegisteredExtension {
-  constructor(readonly name: string, readonly hostsPolicy: HostsPolicy, readonly allowFileAccess: boolean) {
+  constructor(readonly origin: string, readonly name: string, readonly hostsPolicy: HostsPolicy,
+              readonly allowFileAccess: boolean) {
   }
 
   isAllowedOnTarget(inspectedURL?: Platform.DevToolsPath.UrlString): boolean {
@@ -104,6 +105,14 @@ class RegisteredExtension {
       return false;
     }
 
+    if (parsedURL.protocol === 'chrome-extension:') {
+      if (parsedURL.origin !== this.origin) {
+        if (!Root.Runtime.hostConfig.extensionsOnChromeUrls?.enabled) {
+          return false;
+        }
+      }
+    }
+
     if (!ExtensionServer.canInspectURL(inspectedURL)) {
       return false;
     }
@@ -953,27 +962,45 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
    */
   private extensionAllowedOnContentProvider(
       contentProvider: TextUtils.ContentProvider.ContentProvider, port: MessagePort): boolean {
-    if (!(contentProvider instanceof Workspace.UISourceCode.UISourceCode)) {
-      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    // 1. Exception for Scripts with sourceURL
+    if (contentProvider instanceof Workspace.UISourceCode.UISourceCode &&
+        contentProvider.contentType() === Common.ResourceType.resourceTypes.Script) {
+      const scripts =
+          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptsForUISourceCode(contentProvider);
+      if (scripts.length > 0) {
+        const uiSourceCodeTarget =
+            Bindings.NetworkProject.NetworkProject.targetForUISourceCode(contentProvider) ?? undefined;
+        if (uiSourceCodeTarget && !this.extensionAllowedOnTarget(uiSourceCodeTarget, port)) {
+          return false;
+        }
+        return scripts.every(script => {
+          if (script.hasSourceURL) {
+            return this.extensionAllowedOnTarget(script.target(), port);
+          }
+          return this.extensionAllowedOnURL(script.contentURL(), port) &&
+              this.extensionAllowedOnTarget(script.target(), port);
+        });
+      }
     }
 
-    if (contentProvider.contentType() !== Common.ResourceType.resourceTypes.Script) {
-      // We only check sourceURL magic comments for scripts (excluding ones coming from source maps).
-      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    // 2. Standard Policy: Both URL and Target must be allowed
+
+    // 2a. Check URL
+    if (!this.extensionAllowedOnURL(contentProvider.contentURL(), port)) {
+      return false;
     }
 
-    const scripts =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptsForUISourceCode(contentProvider);
-    if (scripts.length === 0) {
-      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    // 2b. Check Target (if one can be identified)
+    let target: SDK.Target.Target|undefined;
+    if (contentProvider instanceof SDK.NetworkRequest.NetworkRequest) {
+      target = SDK.NetworkManager.NetworkManager.forRequest(contentProvider)?.target();
+    } else if (contentProvider instanceof SDK.Resource.Resource) {
+      target = contentProvider.frame()?.resourceTreeModel().target();
+    } else if (contentProvider instanceof Workspace.UISourceCode.UISourceCode) {
+      target = Bindings.NetworkProject.NetworkProject.targetForUISourceCode(contentProvider) ?? undefined;
     }
 
-    return scripts.every(script => {
-      if (script.hasSourceURL) {
-        return this.extensionAllowedOnTarget(script.target(), port);
-      }
-      return this.extensionAllowedOnURL(script.contentURL(), port);
-    });
+    return !target || this.extensionAllowedOnTarget(target, port);
   }
 
   /**
@@ -998,7 +1025,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return {uiSourceCode};
   }
 
-  private extensionAllowedOnTarget(target: SDK.Target.Target, port: MessagePort): boolean {
+  private extensionAllowedOnTarget(target: SDK.Target.Target|undefined, port: MessagePort): boolean {
+    if (!target) {
+      return false;
+    }
     return this.extensionAllowedOnURL(target.inspectedURL(), port);
   }
 
@@ -1061,7 +1091,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_BADARG('command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.GetHAR}`);
     }
     const requests =
-        Logs.NetworkLog.NetworkLog.instance().requests().filter(r => this.extensionAllowedOnURL(r.url(), port));
+        Logs.NetworkLog.NetworkLog.instance().requests().filter(r => this.extensionAllowedOnContentProvider(r, port));
     const harLog = await HAR.Log.Log.build(requests, {sanitize: false});
     for (let i = 0; i < harLog.entries.length; ++i) {
       // @ts-expect-error
@@ -1310,26 +1340,34 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   private notifyResourceAdded(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
     const uiSourceCode = event.data;
-    this.postNotification(
-        Extensions.ExtensionAPI.PrivateAPI.Events.ResourceAdded, [this.makeResource(uiSourceCode)],
-        extension => extension.isAllowedOnTarget(uiSourceCode.url()));
+    const target = Bindings.NetworkProject.NetworkProject.targetForUISourceCode(uiSourceCode);
+    const targetUrl = target?.inspectedURL();
+    this.postNotification(Extensions.ExtensionAPI.PrivateAPI.Events.ResourceAdded, [this.makeResource(uiSourceCode)],
+                          extension => extension.isAllowedOnTarget(uiSourceCode.url()) &&
+                              (!targetUrl || extension.isAllowedOnTarget(targetUrl)));
   }
 
   private notifyUISourceCodeContentCommitted(
       event: Common.EventTarget.EventTargetEvent<Workspace.Workspace.WorkingCopyCommittedEvent>): void {
     const {uiSourceCode, content} = event.data;
-    this.postNotification(
-        Extensions.ExtensionAPI.PrivateAPI.Events.ResourceContentCommitted, [this.makeResource(uiSourceCode), content],
-        extension => extension.isAllowedOnTarget(uiSourceCode.url()));
+    const target = Bindings.NetworkProject.NetworkProject.targetForUISourceCode(uiSourceCode);
+    const targetUrl = target?.inspectedURL();
+    this.postNotification(Extensions.ExtensionAPI.PrivateAPI.Events.ResourceContentCommitted,
+                          [this.makeResource(uiSourceCode), content],
+                          extension => extension.isAllowedOnTarget(uiSourceCode.url()) &&
+                              (!targetUrl || extension.isAllowedOnTarget(targetUrl)));
   }
 
   private async notifyRequestFinished(event: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>):
       Promise<void> {
     const request = event.data;
     const entry = await HAR.Log.Entry.build(request, {sanitize: false});
+    const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
+    const targetUrl = networkManager?.target()?.inspectedURL();
     this.postNotification(
         Extensions.ExtensionAPI.PrivateAPI.Events.NetworkRequestFinished, [this.requestId(request), entry],
-        extension => extension.isAllowedOnTarget(entry.request.url));
+        extension => extension.isAllowedOnTarget(entry.request.url as Platform.DevToolsPath.UrlString) &&
+            (!targetUrl || extension.isAllowedOnTarget(targetUrl)));
   }
 
   private notifyElementsSelectionChanged(): void {
@@ -1388,7 +1426,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const startPageURL = new URL((startPage));
       const extensionOrigin = startPageURL.origin;
       const name = extensionInfo.name || `Extension ${extensionOrigin}`;
-      const extensionRegistration = new RegisteredExtension(name, hostsPolicy, Boolean(extensionInfo.allowFileAccess));
+      const extensionRegistration =
+          new RegisteredExtension(extensionOrigin, name, hostsPolicy, Boolean(extensionInfo.allowFileAccess));
       if (!extensionRegistration.isAllowedOnTarget(inspectedURL)) {
         this.#pendingExtensions.push(extensionInfo);
         return;
@@ -1494,11 +1533,11 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private registerAutosubscriptionTargetManagerHandler<Events, T extends keyof Events>(
       eventTopic: string, modelClass: new(arg1: SDK.Target.Target) => SDK.SDKModel.SDKModel<Events>,
       frontendEventType: T, handler: Common.EventTarget.EventListener<Events, T>): void {
-    this.registerSubscriptionHandler(
-        eventTopic,
-        () => SDK.TargetManager.TargetManager.instance().addModelListener(modelClass, frontendEventType, handler, this),
-        () => SDK.TargetManager.TargetManager.instance().removeModelListener(
-            modelClass, frontendEventType, handler, this));
+    this.registerSubscriptionHandler(eventTopic,
+                                     () => SDK.TargetManager.TargetManager.instance().addModelListener(
+                                         modelClass, frontendEventType, handler, this, {scoped: true}),
+                                     () => SDK.TargetManager.TargetManager.instance().removeModelListener(
+                                         modelClass, frontendEventType, handler, this));
   }
 
   private registerResourceContentCommittedHandler(
@@ -1609,25 +1648,6 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_FAILED('Permission denied');
     }
 
-    try {
-      const parsedUrl = new URL(frame.url);
-      let targetType = Host.UserMetrics.ExtensionEvalTarget.WEB_PAGE;
-      if (parsedUrl.protocol === 'chrome-extension:') {
-        if (parsedUrl.origin === securityOrigin) {
-          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);
-    } catch {
-      // Ignore invalid URLs.
-    }
-
     void context
         .evaluate(
             {

package/front_end/panels/elements/CSSSpecificityBreakdown.ts

@@ -0,0 +1,106 @@
+// 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 type * as Protocol from '../../generated/protocol.js';
+
+const UIStrings = {
+  /**
+   * @description Summary line in a tooltip explaining a CSS selector specificity.
+   * @example {1} PH1
+   * @example {2} PH2
+   * @example {3} PH3
+   */
+  specificity: 'Specificity: ({PH1},{PH2},{PH3})',
+  /**
+   * @description Tooltip line listing the selector parts contributing to the ID-like specificity bucket.
+   * @example {#main} PH1
+   */
+  idLikeSpecificity: '(a) ID-like: {PH1}',
+  /**
+   * @description Tooltip line listing the selector parts contributing to the class-like specificity bucket.
+   * @example {.active, :hover} PH1
+   */
+  classLikeSpecificity: '(b) Class-like: {PH1}',
+  /**
+   * @description Tooltip line listing the selector parts contributing to the type-like specificity bucket.
+   * @example {div} PH1
+   */
+  typeLikeSpecificity: '(c) Type-like: {PH1}',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSSpecificityBreakdown.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface SpecificityBreakdown {
+  ids: string[];
+  classes: string[];
+  types: string[];
+}
+
+function formatContribution(text: string, contribution: number): string {
+  return contribution > 1 ? `${text} x${contribution}` : text;
+}
+
+function formatComponentList(components: string[]): string {
+  const formatter = new Intl.ListFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+    style: 'long',
+    type: 'conjunction',
+  });
+  return formatter.format(components);
+}
+
+export function getSpecificityBreakdown(specificity: Protocol.CSS.Specificity): SpecificityBreakdown {
+  const ids: string[] = [];
+  const classes: string[] = [];
+  const types: string[] = [];
+
+  for (const component of specificity.components ?? []) {
+    if (component.a > 0) {
+      ids.push(formatContribution(component.text, component.a));
+    }
+    if (component.b > 0) {
+      classes.push(formatContribution(component.text, component.b));
+    }
+    if (component.c > 0) {
+      types.push(formatContribution(component.text, component.c));
+    }
+  }
+
+  return {ids, classes, types};
+}
+
+/**
+ * Formats the specificity breakdown into a human-readable multi-line string
+ * suitable for displaying in a tooltip.
+ *
+ * Example output for selector "div#main .active:hover":
+ *   Specificity: (1,2,1)
+ *   (a) ID-like: #main
+ *   (b) Class-like: .active, :hover
+ *   (c) Type-like: div
+ */
+export function formatSpecificitySummary(specificity: Protocol.CSS.Specificity): string {
+  return i18nString(UIStrings.specificity, {PH1: specificity.a, PH2: specificity.b, PH3: specificity.c});
+}
+
+export function getSpecificityBreakdownLines(specificity: Protocol.CSS.Specificity): string[] {
+  const breakdown = getSpecificityBreakdown(specificity);
+  const lines: string[] = [];
+
+  if (breakdown.ids.length > 0) {
+    lines.push(i18nString(UIStrings.idLikeSpecificity, {PH1: formatComponentList(breakdown.ids)}));
+  }
+  if (breakdown.classes.length > 0) {
+    lines.push(i18nString(UIStrings.classLikeSpecificity, {PH1: formatComponentList(breakdown.classes)}));
+  }
+  if (breakdown.types.length > 0) {
+    lines.push(i18nString(UIStrings.typeLikeSpecificity, {PH1: formatComponentList(breakdown.types)}));
+  }
+
+  return lines;
+}
+
+export function formatSpecificityTooltip(specificity: Protocol.CSS.Specificity): string {
+  return [formatSpecificitySummary(specificity), ...getSpecificityBreakdownLines(specificity)].join('\n');
+}

package/front_end/panels/elements/ElementsPanel.ts

@@ -1627,7 +1627,7 @@ export class PseudoStateMarkerDecorator implements MarkerDecorator {
       return null;
     }
     return {
-      color: '--sys-color-orange-bright',
+      color: 'var(--sys-color-orange-bright)',
       title: i18nString(UIStrings.elementStateS, {PH1: ':' + pseudoState.join(', :')}),
     };
   }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -54,9 +54,15 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
 import * as ElementsComponents from './components/components.js';
+import {formatSpecificitySummary, getSpecificityBreakdownLines} from './CSSSpecificityBreakdown.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
-import {type Context, GhostStylePropertyTreeElement, StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {
+  type Context,
+  GhostStylePropertyTreeElement,
+  handleVarDefinitionActivate,
+  StylePropertyTreeElement,
+} from './StylePropertyTreeElement.js';
 import type {StylesContainer} from './StylesContainer.js';
 
 const UIStrings = {
@@ -110,11 +116,6 @@ const UIStrings = {
    * @description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
    */
   cssSelector: '`CSS` selector',
-  /**
-   * @description Text displayed in tooltip that shows specificity information.
-   * @example {(0,0,1)} PH1
-   */
-  specificity: 'Specificity: {PH1}',
   /**
    * @description Accessibility label for the button that expands a collapsed CSS rule in the Styles pane.
    */
@@ -898,7 +899,7 @@ export class StylePropertiesSection {
           ancestorRuleElement = this.createMediaElement(rule.media[mediaIndex++]);
           break;
         case Protocol.CSS.CSSRuleType.ContainerRule:
-          ancestorRuleElement = this.createContainerQueryElement(rule.containerQueries[containerIndex++]);
+          ancestorRuleElement = this.createContainerQueryElement(rule.containerQueries[containerIndex++], rule.style);
           break;
         case Protocol.CSS.CSSRuleType.ScopeRule:
           ancestorRuleElement = this.createScopeElement(rule.scopes[scopeIndex++]);
@@ -1019,7 +1020,8 @@ export class StylePropertiesSection {
     return mediaQueryElement;
   }
 
-  protected createContainerQueryElement(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery):
+  protected createContainerQueryElement(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery,
+                                        style?: SDK.CSSStyleDeclaration.CSSStyleDeclaration):
       ElementsComponents.CSSQuery.CSSQuery|undefined {
     let onQueryTextClick;
     if (containerQuery.styleSheetId) {
@@ -1032,10 +1034,22 @@ export class StylePropertiesSection {
       queryName: containerQuery.textIsConditionText ? undefined : containerQuery.name,
       queryText: containerQuery.text,
       onQueryTextClick,
+      onLinkActivate: async(resolvedVariable: string|SDK.CSSMatchedStyles.CSSValueSource): Promise<void> => {
+        handleVarDefinitionActivate(resolvedVariable, this.stylesContainer);
+      },
+      getPopoverContents: (variableName: string, variableValue: string|null):
+                              ElementsComponents.CSSVariableValueView.CSSVariableValueView => {
+        return this.stylesContainer.getVariablePopoverContents(this.matchedStyles, variableName, variableValue);
+      },
       jslogContext: 'container-query',
     };
-    if (!/^style\(.*\)/.test(containerQuery.text)) {
-      // We only add container element for non-style queries.
+    if (style) {
+      const tooltipPrefix = `container-${this.sectionTooltipIdPrefix}-${this.nestingLevel}`;
+      void containerQuery.getContainerForNode(this.matchedStyles.node().id).then(container => {
+        if (container) {
+          containerQueryElement.parseStyleQueries(this.matchedStyles, style, container.containerNode, tooltipPrefix);
+        }
+      });
       void this.addContainerForContainerQuery(containerQuery);
     }
     return containerQueryElement;
@@ -1434,14 +1448,27 @@ export class StylePropertiesSection {
       elementToSelectorIndex.set(span, i);
       span.textContent = selectors[i].text;
       if (specificityTooltipId && selector.specificity) {
-        span.setAttribute('aria-describedby', specificityTooltipId);
-        const PH1 = `(${selector.specificity.a},${selector.specificity.b},${selector.specificity.c})`;
+        span.setAttribute('aria-details', specificityTooltipId);
         const tooltip = this.#specificityTooltips.appendChild(new Tooltips.Tooltip.Tooltip({
           id: specificityTooltipId,
           anchor: span,
+          variant: 'rich',
           jslogContext: 'elements.css-selector-specificity',
         }));
-        tooltip.textContent = i18nString(UIStrings.specificity, {PH1});
+        tooltip.hoverDelay = 500;
+
+        const specificitySummary = formatSpecificitySummary(selector.specificity);
+        const breakdownLines = getSpecificityBreakdownLines(selector.specificity);
+        const tooltipContent = breakdownLines.length > 0 ? html`
+          <details class="selector-specificity-tooltip-disclosure">
+            <summary>${specificitySummary}</summary>
+            <ul class="selector-specificity-tooltip-list">
+              ${breakdownLines.map(line => html`<li>${line}</li>`)}
+            </ul>
+          </details>` :
+                                                           html`
+          <div class="selector-specificity-tooltip-summary">${specificitySummary}</div>`;
+        render(tooltipContent, tooltip, {host: this});
       }
     }
   }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -316,8 +316,8 @@ export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
-function handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyles.CSSValueSource,
-                                     stylesContainer: StylesContainer): void {
+export function handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyles.CSSValueSource,
+                                            stylesContainer: StylesContainer): void {
   Host.userMetrics.actionTaken(Host.UserMetrics.Action.CustomPropertyLinkClicked);
   Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.VAR_LINK);
 
@@ -448,16 +448,17 @@ export class VariableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     this.#matchedStyles = matchedStyles;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.VariableNameMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.VariableNameMatch, _context: RenderingContext): Node[] {
+    const varSwatch = document.createElement('span');
     if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
-      return Renderer.render(ASTUtils.children(match.node), context).nodes;
+      render(html`${match.text}`, varSwatch);
+      return [varSwatch];
     }
 
     const {declaration, value: variableValue} = match.resolveVariable() ?? {};
     const isDefined = variableValue !== undefined;
     const onLinkActivate = (name: string): void =>
         handleVarDefinitionActivate(declaration ?? name, this.#stylesContainer);
-    const varSwatch = document.createElement('span');
 
     const tooltipContents =
         this.#stylesContainer.getVariablePopoverContents(this.#matchedStyles, match.text, variableValue ?? null);

package/front_end/panels/elements/components/CSSQuery.ts

@@ -3,11 +3,17 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/components/tooltips/tooltips.js';
+import '../../../ui/legacy/components/inline_editor/inline_editor.js';
+
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as InlineEditor from '../../../ui/legacy/components/inline_editor/inline_editor.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 cssQueryStyles from './cssQuery.css.js';
+import type {CSSVariableValueView} from './CSSVariableValueView.js';
 
 const {render, html} = Lit;
 
@@ -16,36 +22,145 @@ export interface CSSQueryData {
   queryName?: string;
   queryText: string;
   onQueryTextClick?: (event: Event) => void;
+  onLinkActivate?: (resolvedVariable: string|SDK.CSSMatchedStyles.CSSValueSource) => void;
+  getPopoverContents?: (variableName: string, variableValue: string|null) => CSSVariableValueView;
   jslogContext: string;
 }
 
+interface TextSection {
+  text: string;
+  isVariable: boolean;
+}
+
 export class CSSQuery extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #queryPrefix = '';
   #queryName?: string;
-  #queryText = '';
+  #queryText: TextSection[] = [];
   #onQueryTextClick?: (event: Event) => void;
+  #onLinkActivate?: (resolvedVariable: string|SDK.CSSMatchedStyles.CSSValueSource) => void;
+  #getPopoverContents?: (variableName: string, variableValue: string|null) => CSSVariableValueView;
   #jslogContext?: string;
+  #matchedStyles?: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  #style?: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
+  #containerNode?: SDK.DOMModel.DOMNode;
+  #tooltipPrefix = '';
 
   set data(data: CSSQueryData) {
     this.#queryPrefix = data.queryPrefix;
     this.#queryName = data.queryName;
-    this.#queryText = data.queryText;
+    this.#queryText = [{text: data.queryText, isVariable: false}];
     this.#onQueryTextClick = data.onQueryTextClick;
+    this.#onLinkActivate = data.onLinkActivate;
+    this.#getPopoverContents = data.getPopoverContents;
     this.#jslogContext = data.jslogContext;
     this.#render();
   }
 
+  parseStyleQueries(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration,
+      containerNode: SDK.DOMModel.DOMNode,
+      tooltipPrefix: string,
+      ): void {
+    this.#matchedStyles = matchedStyles;
+    this.#style = style;
+    this.#containerNode = containerNode;
+    this.#tooltipPrefix = tooltipPrefix;
+
+    const queryText = this.#queryText[0]?.text;
+    if (!queryText) {
+      return;
+    }
+
+    const prefix = 'if(';
+    const suffix = ': 1)';
+    const ast = SDK.CSSPropertyParser.tokenizeDeclaration('--query', prefix + queryText + suffix);
+    if (!ast) {
+      return;
+    }
+
+    const matcher = new SDK.CSSPropertyParserMatchers.VariableNameMatcher(matchedStyles, style);
+    const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [matcher]);
+    const matchedNodes = SDK.CSSPropertyParser.TreeSearch.findAll(ast, node => {
+      return matchedResult.getMatch(node) instanceof SDK.CSSPropertyParserMatchers.VariableNameMatch;
+    });
+
+    matchedNodes.sort((a, b) => a.from - b.from);
+
+    const sections: TextSection[] = [];
+    const valueOffset = ast.rule.indexOf(ast.propertyValue) + prefix.length;
+    let lastOffset = 0;
+
+    for (const node of matchedNodes) {
+      const start = node.from - valueOffset;
+      const end = node.to - valueOffset;
+      if (start > lastOffset) {
+        sections.push({
+          text: queryText.substring(lastOffset, start),
+          isVariable: false,
+        });
+      }
+      sections.push({
+        text: queryText.substring(start, end),
+        isVariable: true,
+      });
+      lastOffset = end;
+    }
+
+    if (lastOffset < queryText.length) {
+      sections.push({
+        text: queryText.substring(lastOffset),
+        isVariable: false,
+      });
+    }
+
+    this.#queryText = sections;
+    this.#render();
+  }
+
   #render(): void {
     const queryClasses = Lit.Directives.classMap({
       query: true,
       editable: Boolean(this.#onQueryTextClick),
     });
 
-    // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     const queryText = html`
-      <span class="query-text" @click=${this.#onQueryTextClick}>${this.#queryText}</span>
+      <span class="query-text" @click=${this.#onQueryTextClick}>${
+        this.#queryText.map((section, index) => {
+          if (section.isVariable && this.#matchedStyles && this.#style && this.#onLinkActivate) {
+            const variableName = section.text;
+            const variable = this.#matchedStyles.computeCSSVariable(this.#style, variableName, this.#containerNode);
+            const isDefined = variable !== null && variable.value !== undefined;
+            const onLinkActivate = (): void => {
+              if (this.#onLinkActivate) {
+                this.#onLinkActivate(variable ? variable.declaration : variableName);
+              }
+            };
+            const tooltipContents = this.#getPopoverContents?.(variableName, variable?.value ?? null) ?? null;
+            const tooltipId = `${this.#tooltipPrefix}-${index}-${variableName}`;
+            const tooltip = {tooltipId};
+            return html`
+              <devtools-link-swatch class="css-var-link" .data=${{
+                  tooltip,
+                  text: variableName,
+                  isDefined,
+                  onLinkActivate,
+                } as InlineEditor.LinkSwatch.LinkSwatchRenderData}>
+              </devtools-link-swatch>
+              <devtools-tooltip
+                id=${tooltipId}
+                variant="rich"
+                jslogContext="elements.css-var"
+              >
+                ${tooltipContents}
+              </devtools-tooltip>
+            `;
+          }
+          return html`${section.text}`;
+        })
+      }</span>
     `;
 
     render(html`

package/front_end/panels/elements/elements.ts

@@ -23,6 +23,7 @@ import './StylesAiCodeCompletionProvider.js';
 import './StylePropertyTreeElement.js';
 import './ComputedStyleWidget.js';
 import './CSSRuleValidator.js';
+import './CSSSpecificityBreakdown.js';
 import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
@@ -36,6 +37,7 @@ import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
 import * as CSSRuleValidator from './CSSRuleValidator.js';
+import * as CSSSpecificityBreakdown from './CSSSpecificityBreakdown.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
 import * as DOMPath from './DOMPath.js';
 import * as ElementsPanel from './ElementsPanel.js';
@@ -73,6 +75,7 @@ export {
   ColorSwatchPopoverIcon,
   ComputedStyleWidget,
   CSSRuleValidator,
+  CSSSpecificityBreakdown,
   CSSValueTraceView,
   DOMPath,
   ElementsPanel,