chrome-devtools-frontend 1.0.1650677 → 1.0.1651641

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`

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,

package/front_end/panels/elements/stylesSidebarPane.css

@@ -326,3 +326,37 @@
 .section-block-expand-icon {
   margin-bottom: -4px;
 }
+
+.selector-specificity-tooltip-summary {
+  white-space: nowrap;
+}
+
+.selector-specificity-tooltip-disclosure {
+  > summary {
+    cursor: pointer;
+    white-space: nowrap;
+  }
+}
+
+.selector-specificity-tooltip-list {
+  margin: var(--sys-size-3) 0 0;
+  padding: 0;
+  list-style: none;
+
+  > li {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+
+    &::before {
+      content: "";
+      flex: none;
+      width: var(--sys-size-3);
+      height: var(--sys-size-3);
+      border-radius: 50%;
+      background-color: currentcolor;
+      /* Aligns the bullet's center with the disclosure triangle above. */
+      margin-left: var(--sys-size-2);
+    }
+  }
+}

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -266,7 +264,6 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
-    this.contentElement.classList.add('paint-profiler-overview');
     this.#view = view;
 
     this.innerBarWidth = 4 * window.devicePixelRatio;

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 2f1db9960be2f98ba060d8856277091dc61ee03d
+Revision: f4d1d27cc2ccb4e6be93ee3be8a52050a6273550
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/package.json

@@ -91,5 +91,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1650677"
+  "version": "1.0.1651641"
 }