chrome-devtools-frontend 1.0.1650677 → 1.0.1652307

package/front_end/generated/protocol.ts

@@ -1444,6 +1444,7 @@ export namespace Audits {
     JwksHttpNotFound = 'JwksHttpNotFound',
     JwksInvalidResponse = 'JwksInvalidResponse',
     TokenVerificationSdJwtUnsupportedHeaderAlg = 'TokenVerificationSdJwtUnsupportedHeaderAlg',
+    TokenVerificationSdJwtInvalidTyp = 'TokenVerificationSdJwtInvalidTyp',
     TokenVerificationSdJwtMissingIss = 'TokenVerificationSdJwtMissingIss',
     TokenVerificationSdJwtMissingIat = 'TokenVerificationSdJwtMissingIat',
     TokenVerificationSdJwtMissingCnf = 'TokenVerificationSdJwtMissingCnf',
@@ -4803,6 +4804,7 @@ export namespace DOM {
     FileSelectorButton = 'file-selector-button',
     DetailsContent = 'details-content',
     Picker = 'picker',
+    SelectListbox = 'select-listbox',
     PermissionIcon = 'permission-icon',
     OverscrollAreaParent = 'overscroll-area-parent',
     Skeleton = 'skeleton',
@@ -13982,6 +13984,58 @@ export namespace Overlay {
     outlineColor?: DOM.RGBA;
   }
 
+  /**
+   * Supported display cutout shapes.
+   */
+  export const enum DisplayCutoutShape {
+    Pill = 'pill',
+    Notch = 'notch',
+    Circle = 'circle',
+    Rectangle = 'rectangle',
+  }
+
+  /**
+   * Configuration for a display cutout.
+   */
+  export interface DisplayCutoutConfig {
+    /**
+     * A rectangle representing the cutout bounds.
+     */
+    rect: DOM.Rect;
+    /**
+     * Shape used to draw the cutout.
+     */
+    shape: DisplayCutoutShape;
+    /**
+     * Border radius for rounded cutout shapes.
+     */
+    borderRadius?: integer;
+    /**
+     * Upper shoulder radius for notch cutout shapes.
+     */
+    upperRadius?: integer;
+    /**
+     * Lower transition radius for notch cutout shapes.
+     */
+    lowerRadius?: integer;
+    /**
+     * Center x coordinate for circle cutout shapes.
+     */
+    cx?: integer;
+    /**
+     * Center y coordinate for circle cutout shapes.
+     */
+    cy?: integer;
+    /**
+     * Radius for circle cutout shapes.
+     */
+    radius?: integer;
+    /**
+     * The cutout fill color (default: black).
+     */
+    contentColor?: DOM.RGBA;
+  }
+
   /**
    * Configuration for Window Controls Overlay
    */
@@ -14344,6 +14398,13 @@ export namespace Overlay {
     hingeConfig?: HingeConfig;
   }
 
+  export interface SetShowDisplayCutoutRequest {
+    /**
+     * display cutout data, null means hide display cutout
+     */
+    displayCutoutConfig?: DisplayCutoutConfig;
+  }
+
   export interface SetShowIsolatedElementsRequest {
     /**
      * An array of node identifiers and descriptors for the highlight appearance.
@@ -19431,13 +19492,11 @@ export namespace Target {
      */
     hidden?: boolean;
     /**
-     * If specified, the option is used to determine if the new target should
-     * be focused or not. By default, the focus behavior depends on the
-     * value of the background field. For example, background=false and focus=false
-     * will result in the target tab being opened but the browser window remain
-     * unchanged (if it was in the background, it will remain in the background)
-     * and background=false with focus=undefined will result in the window being focused.
-     * Using background: true and focus: true is not supported and will result in an error.
+     * If specified, determines whether the new target should be focused.
+     * By default, the focus behavior depends on the `background` parameter:
+     * - If `background` is false (default) and `focus` is omitted, the new target is focused and the browser window is brought to the foreground.
+     * - If `background` is false and `focus` is false, the target is opened but the browser window's focus remains unchanged (e.g., if the window was in the background, it stays there).
+     * - If `background` is true, setting `focus` to true is not supported and will result in an error.
      */
     focus?: boolean;
   }

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -22,7 +22,7 @@ import {debugLog} from './debug.js';
 import {ExtensionScope} from './ExtensionScope.js';
 import type {Skill, SkillName} from './skills/Skill.js';
 import {SKILLS} from './skills/SkillRegistry.js';
-import type {AllToolsContext, Tool, ToolArgs} from './tools/Tool.js';
+import type {AllToolsCapabilities, Tool, ToolArgs} from './tools/Tool.js';
 import {ToolRegistry} from './tools/ToolRegistry.js';
 
 const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
@@ -214,7 +214,7 @@ User query: ${enhancedQuery}`;
    * Declares a tool to be available to the agent model, verifying first that
    * it hasn't already been declared to prevent duplicate declaration errors.
    */
-  #declareTool(tool: Tool<ToolArgs, unknown, AllToolsContext>): void {
+  #declareTool(tool: Tool<ToolArgs, unknown, AllToolsCapabilities>): void {
     if (this.#declaredTools.has(tool.name)) {
       debugLog(`AiAgent2: Tool ${tool.name} is already declared`);
       return;
@@ -225,7 +225,7 @@ User query: ${enhancedQuery}`;
       parameters: tool.parameters,
       displayInfoFromArgs: tool.displayInfoFromArgs,
       handler: (args, options) => {
-        const context: AllToolsContext = {
+        const context: AllToolsCapabilities = {
           conversationContext: this.context ?? null,
           changeManager: this.#changes,
           createExtensionScope: this.#createExtensionScope.bind(this),

package/front_end/models/ai_assistance/README.md

@@ -46,7 +46,7 @@ To support skills requiring execution of code or fetching page state (like compu
 
 - **BaseTool**: A non-generic base interface capturing tool metadata (`name`, `description`, `parameters`). This acts as the type-erased representation for generic registry storage and fallback string lookups.
 - **Tool**: A generic interface parameterized by `<Args, ReturnType, ContextType>` that binds parameter argument types and handler execution to strict contracts. `ContextType` defaults to `BaseToolCapability`, ensuring that each tool explicitly requests only the dependencies it requires.
-- **Capability Contexts**: Instead of passing a monolithic grab-bag context to all tools, dependencies are broken into narrow capability interfaces (e.g. `PageExecutionCapability`, `StyleMutationCapability`, `TargetCapability`, `OriginLockCapability`). Tools declare their required dependencies by intersecting these interfaces on their generic `ContextType` definition. The caller/Agent fulfills the complete capability context (`AllToolsContext`), guaranteeing 100% compile-time type safety for dependencies without runtime checks.
+- **Capability Contexts**: Instead of passing a monolithic grab-bag context to all tools, dependencies are broken into narrow capability interfaces (e.g. `PageExecutionCapability`, `StyleMutationCapability`, `TargetCapability`, `OriginLockCapability`). Tools declare their required dependencies by intersecting these interfaces on their generic `ContextType` definition. The caller/Agent fulfills the complete capability context (`AllToolsCapabilities`), guaranteeing 100% compile-time type safety for dependencies without runtime checks.
 - **ToolRegistry**: A static registry (`ToolRegistry`) storing instantiated tools. It uses TypeScript function overloading and generic lookups (`static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K]`) to return the precise class type of each tool, preventing type-erasure and escape-hatches (such as `any` or `as unknown` type assertions) at integration points like `AiAgent2.ts`. See the [Tools README](tools/README.md) for authoring instructions.
 
 ## Performance specific documentation

package/front_end/models/ai_assistance/tools/README.md

@@ -21,7 +21,7 @@ Instead of passing a monolithic "grab-bag" context object to all tool handlers,
 
 ### Unified Context
 
-The Agent (e.g., `AiAgent2`) builds the complete dependency union (`AllToolsContext`) and fulfills all capabilities. When the handler is invoked, TypeScript validates that the provided context matches the intersection of capabilities requested by that tool.
+The Agent (e.g., `AiAgent2`) builds the complete dependency union (`AllToolsCapabilities`) and fulfills all capabilities. When the handler is invoked, TypeScript validates that the provided context matches the intersection of capabilities requested by that tool.
 
 ## Authoring a New Tool
 

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -84,7 +84,7 @@ export interface LighthouseCapability {
  * Unified context interface providing all capabilities available in the project.
  * Used by the agent to pass a complete context to any tool type-safely.
  */
-export type AllToolsContext = BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&
+export type AllToolsCapabilities = BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&
     OriginLockCapability&LighthouseCapability;
 
 /**

package/front_end/models/ai_assistance/tools/ToolRegistry.ts

@@ -8,7 +8,7 @@ import {GetNetworkRequestDetailsTool} from './GetNetworkRequestDetails.js';
 import {GetStylesTool} from './GetStyles.js';
 import {ListNetworkRequestsTool} from './ListNetworkRequests.js';
 import {ResolveLighthousePathTool} from './ResolveLighthousePath.js';
-import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
+import {type AllToolsCapabilities, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
  * Plain object registry containing concrete instantiated tools.
@@ -45,16 +45,16 @@ export class ToolRegistry {
    * @param name The string name of the tool to retrieve, used when the tool name is only known at runtime.
    * @returns The generic Tool interface, or undefined if not found.
    */
-  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|undefined;
-  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|undefined {
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsCapabilities>|undefined;
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsCapabilities>|undefined {
     // We use a double assertion (`as unknown as Tool<...>`) here. TypeScript's variance
     // rules prevent direct casting from specific concrete tools (which have narrowed,
-    // capability-specific contexts) to the generic `Tool` signature that uses `AllToolsContext`.
+    // capability-specific contexts) to the generic `Tool` signature that uses `AllToolsCapabilities`.
     // This cast is runtime-safe because any capability requested by a specific tool is
-    // guaranteed to be satisfied by `AllToolsContext`, and the handler will only access
+    // guaranteed to be satisfied by `AllToolsCapabilities`, and the handler will only access
     // the capabilities it expects.
     return Object.prototype.hasOwnProperty.call(TOOLS, name) ?
-        TOOLS[name as keyof typeof TOOLS] as unknown as Tool<ToolArgs, unknown, AllToolsContext>:
+        TOOLS[name as keyof typeof TOOLS] as unknown as Tool<ToolArgs, unknown, AllToolsCapabilities>:
         undefined;
   }
 }

package/front_end/models/heap_snapshot/HeapSnapshotModel.ts

@@ -303,3 +303,17 @@ export interface DominatorNode {
 }
 
 export type DominatorChain = DominatorNode[];
+
+export interface DuplicateStringGroup {
+  value: string;
+  count: number;
+  totalSelfSize: number;
+  totalRetainedSize: number;
+  nodes: Array<{
+    id: number,
+    selfSize: number,
+    retainedSize: number,
+    distance: number,
+  }>;
+  truncated?: boolean;
+}

package/front_end/models/heap_snapshot/HeapSnapshotProxy.ts

@@ -272,6 +272,10 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('aggregatesWithFilter', filter);
   }
 
+  getDuplicateStrings(): Promise<HeapSnapshotModel.DuplicateStringGroup[]> {
+    return this.callMethodPromise('getDuplicateStrings');
+  }
+
   aggregatesForDiff(interfaceDefinitions: string): Promise<Record<string, HeapSnapshotModel.AggregateForDiff>> {
     return this.callMethodPromise('aggregatesForDiff', interfaceDefinitions);
   }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -8402,6 +8402,10 @@ export const NativeFunctions = [
     name: "getPathData",
     signatures: [["?settings"]]
   },
+  {
+    name: "setPathData",
+    signatures: [["pathData"]]
+  },
   {
     name: "ByteLengthQueuingStrategy",
     signatures: [["init"]]

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