Display css function rules in Elements panel

Eric Leese · Devtools-frontend LUCI CQ · commit 3bdc2297d696 · 2025-03-25T07:20:25.000-07:00
Bug: 392034817 Change-Id: I589055e527364996c346b37bb760c654a39bc1fd Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308828 Commit-Queue: Eric Leese <leese@chromium.org> Reviewed-by: Changhao Han <changhaohan@chromium.org>
diff --git a/front_end/core/sdk/CSSMatchedStyles.ts b/front_end/core/sdk/CSSMatchedStyles.ts
@@ -35,6 +35,7 @@ import {
 } from './CSSPropertyParserMatchers.js';
 import {
   CSSFontPaletteValuesRule,
+  CSSFunctionRule,
   CSSKeyframesRule,
   CSSPositionTryRule,
   CSSPropertyRule,
@@ -205,6 +206,7 @@ export interface CSSMatchedStylesPayload {
   animationStylesPayload: Protocol.CSS.CSSAnimationStyle[];
   transitionsStylePayload: Protocol.CSS.CSSStyle|null;
   inheritedAnimatedPayload: Protocol.CSS.InheritedAnimatedStyleEntry[];
+  functionRules: Protocol.CSS.CSSFunctionRule[];
 }
 
 export class CSSRegisteredProperty {
@@ -289,6 +291,7 @@ export class CSSMatchedStyles {
   #mainDOMCascade?: DOMInheritanceCascade;
   #pseudoDOMCascades?: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
   #customHighlightPseudoDOMCascades?: Map<string, DOMInheritanceCascade>;
+  #functionRules: CSSFunctionRule[];
   readonly #fontPaletteValuesRule: CSSFontPaletteValuesRule|undefined;
 
   static async create(payload: CSSMatchedStylesPayload): Promise<CSSMatchedStyles> {
@@ -307,6 +310,7 @@ export class CSSMatchedStyles {
     cssPropertyRegistrations,
     fontPaletteValuesRule,
     activePositionFallbackIndex,
+    functionRules,
   }: CSSMatchedStylesPayload) {
     this.#cssModelInternal = cssModel;
     this.#nodeInternal = node;
@@ -323,6 +327,7 @@ export class CSSMatchedStyles {
         fontPaletteValuesRule ? new CSSFontPaletteValuesRule(cssModel, fontPaletteValuesRule) : undefined;
 
     this.#activePositionFallbackIndex = activePositionFallbackIndex;
+    this.#functionRules = functionRules.map(rule => new CSSFunctionRule(cssModel, rule));
   }
 
   private async init({
@@ -759,6 +764,10 @@ export class CSSMatchedStyles {
     return this.#registeredPropertyMap.get(name);
   }
 
+  functionRules(): CSSFunctionRule[] {
+    return this.#functionRules;
+  }
+
   fontPaletteValuesRule(): CSSFontPaletteValuesRule|undefined {
     return this.#fontPaletteValuesRule;
   }
diff --git a/front_end/core/sdk/CSSModel.ts b/front_end/core/sdk/CSSModel.ts
@@ -392,6 +392,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       parentLayoutNodeId: matchedStylesResponse.parentLayoutNodeId,
       positionTryRules: matchedStylesResponse.cssPositionTryRules || [],
       propertyRules: matchedStylesResponse.cssPropertyRules ?? [],
+      functionRules: matchedStylesResponse.cssFunctionRules ?? [],
       cssPropertyRegistrations: matchedStylesResponse.cssPropertyRegistrations ?? [],
       fontPaletteValuesRule: matchedStylesResponse.cssFontPaletteValuesRule,
       activePositionFallbackIndex: matchedStylesResponse.activePositionFallbackIndex ?? -1,
diff --git a/front_end/core/sdk/CSSRule.ts b/front_end/core/sdk/CSSRule.ts
@@ -351,3 +351,78 @@ export class CSSPositionTryRule extends CSSRule {
     return this.#active;
   }
 }
+
+export interface CSSNestedStyleLeaf {
+  style: CSSStyleDeclaration;
+}
+
+export type CSSNestedStyleCondition = {
+  children: CSSNestedStyle[],
+}&({media: CSSMedia}|{container: CSSContainerQuery}|{supports: CSSSupports});
+
+export type CSSNestedStyle = CSSNestedStyleLeaf|CSSNestedStyleCondition;
+
+export class CSSFunctionRule extends CSSRule {
+  readonly #name: CSSValue;
+  readonly #parameters: string[];
+  readonly #children: CSSNestedStyle[];
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFunctionRule) {
+    super(
+        cssModel,
+        {origin: payload.origin, style: {cssProperties: [], shorthandEntries: []}, styleSheetId: payload.styleSheetId});
+    this.#name = new CSSValue(payload.name);
+    this.#parameters = payload.parameters.map(({name}) => name);
+    this.#children = this.protocolNodesToNestedStyles(payload.children);
+  }
+
+  functionName(): CSSValue {
+    return this.#name;
+  }
+
+  parameters(): string[] {
+    return this.#parameters;
+  }
+
+  children(): CSSNestedStyle[] {
+    return this.#children;
+  }
+
+  protocolNodesToNestedStyles(nodes: Protocol.CSS.CSSFunctionNode[]): CSSNestedStyle[] {
+    const result = [];
+    for (const node of nodes) {
+      const nestedStyle = this.protocolNodeToNestedStyle(node);
+      if (nestedStyle) {
+        result.push(nestedStyle);
+      }
+    }
+    return result;
+  }
+
+  protocolNodeToNestedStyle(node: Protocol.CSS.CSSFunctionNode): CSSNestedStyle|undefined {
+    if (node.style) {
+      return {style: new CSSStyleDeclaration(this.cssModelInternal, this, node.style, Type.Regular)};
+    }
+    if (node.condition) {
+      const children = this.protocolNodesToNestedStyles(node.condition.children);
+      if (node.condition.media) {
+        return {children, media: new CSSMedia(this.cssModelInternal, node.condition.media)};
+      }
+      if (node.condition.containerQueries) {
+        return {
+          children,
+          container: new CSSContainerQuery(this.cssModelInternal, node.condition.containerQueries),
+        };
+      }
+      if (node.condition.supports) {
+        return {
+          children,
+          supports: new CSSSupports(this.cssModelInternal, node.condition.supports),
+        };
+      }
+      console.error('A function rule condition must have a media, container, or supports');
+      return;
+    }
+    console.error('A function rule node must have a style or condition');
+    return;
+  }
+}
diff --git a/front_end/panels/elements/StylePropertiesSection.ts b/front_end/panels/elements/StylePropertiesSection.ts
@@ -786,7 +786,6 @@ export class StylePropertiesSection {
     let supportsIndex = 0;
     let nestingIndex = 0;
     this.nestingLevel = 0;
-    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
     for (const ruleType of rule.ruleTypes) {
       let ancestorRuleElement;
       switch (ruleType) {
@@ -808,11 +807,7 @@ export class StylePropertiesSection {
       }
       if (ancestorRuleElement) {
         this.#ancestorRuleListElement.prepend(ancestorRuleElement);
-        const closingBrace = document.createElement('div');
-        closingBrace.createChild('span', 'styles-clipboard-only').textContent = indent.repeat(this.nestingLevel);
-        closingBrace.style.paddingLeft = `${this.nestingLevel}ch`;
-        closingBrace.append('}');
-        this.#ancestorClosingBracesElement.prepend(closingBrace);
+        this.#ancestorClosingBracesElement.prepend(this.indentElement(this.createClosingBrace(), this.nestingLevel));
         this.nestingLevel++;
       }
     }
@@ -824,16 +819,30 @@ export class StylePropertiesSection {
 
     let curNestingLevel = 0;
     for (const element of this.#ancestorRuleListElement.children) {
-      const indentElement = document.createElement('span');
-      indentElement.classList.add('styles-clipboard-only');
-      indentElement.setAttribute('slot', 'indent');
-      indentElement.textContent = indent.repeat(curNestingLevel);
-      element.prepend(indentElement);
-      (element as HTMLElement).style.paddingLeft = `${curNestingLevel}ch`;
+      this.indentElement(element as HTMLElement, curNestingLevel);
       curNestingLevel++;
     }
   }
 
+  protected createClosingBrace(): HTMLElement {
+    const closingBrace = document.createElement('div');
+    closingBrace.append('}');
+    return closingBrace;
+  }
+
+  protected indentElement(element: HTMLElement, nestingLevel: number, clipboardOnly?: boolean): HTMLElement {
+    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
+    const indentElement = document.createElement('span');
+    indentElement.classList.add('styles-clipboard-only');
+    indentElement.setAttribute('slot', 'indent');
+    indentElement.textContent = indent.repeat(nestingLevel);
+    element.prepend(indentElement);
+    if (!clipboardOnly) {
+      element.style.paddingLeft = `${nestingLevel}ch`;
+    }
+    return element;
+  }
+
   protected createMediaElement(media: SDK.CSSMedia.CSSMedia): ElementsComponents.CSSQuery.CSSQuery|undefined {
     // Don't display trivial non-print media types.
     const isMedia = !media.text || !media.text.includes('(') && media.text !== 'print';
@@ -1072,7 +1081,10 @@ export class StylePropertiesSection {
     this.parentPane.setActiveProperty(null);
     this.nextEditorTriggerButtonIdx = 1;
     this.propertiesTreeOutline.removeChildren();
-    const style = this.styleInternal;
+    this.populateStyle(this.styleInternal, this.propertiesTreeOutline);
+  }
+
+  populateStyle(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, parent: TreeElementParent): void {
     let count = 0;
     const properties = style.leadingProperties();
     const maxProperties = DEFAULT_MAX_PROPERTIES + properties.length - this.originalPropertiesCount;
@@ -1100,7 +1112,7 @@ export class StylePropertiesSection {
       });
       item.setComputedStyles(this.computedStyles);
       item.setParentsComputedStyles(this.parentsComputedStyles);
-      this.propertiesTreeOutline.appendChild(item);
+      parent.appendChild(item);
     }
 
     if (count < properties.length) {
@@ -1750,6 +1762,68 @@ export class RegisteredPropertiesSection extends StylePropertiesSection {
   }
 }
 
+export class FunctionRuleSection extends StylePropertiesSection {
+  constructor(
+      stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, children: SDK.CSSRule.CSSNestedStyle[], sectionIdx: number,
+      functionName: string, parameters: string[], expandedByDefault: boolean) {
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, `${functionName}(${parameters.join(', ')})`);
+    if (!expandedByDefault) {
+      this.element.classList.add('hidden');
+    }
+    this.selectorElement.className = 'function-key';
+    this.addChildren(children, this.propertiesTreeOutline);
+  }
+
+  createConditionElement(condition: SDK.CSSRule.CSSNestedStyleCondition): HTMLElement|undefined {
+    if ('media' in condition) {
+      return this.createMediaElement(condition.media);
+    }
+    if ('container' in condition) {
+      return this.createContainerQueryElement(condition.container);
+    }
+    if ('supports' in condition) {
+      return this.createSupportsElement(condition.supports);
+    }
+    return;
+  }
+
+  positionNestingElement(element: HTMLElement): HTMLElement {
+    // Add this class to get the same margins as a property and syntax highlighting.
+    element.classList.add('css-function-inline-block');
+    // Also add the clipboard text, but don't add additional margins because
+    // the tree nesting takes care of that.
+    return this.indentElement(element, this.nestingLevel, true);
+  }
+
+  addChildren(children: SDK.CSSRule.CSSNestedStyle[], parent: TreeElementParent): void {
+    for (const child of children) {
+      if ('style' in child) {
+        this.populateStyle(child.style, parent);
+      } else if ('children' in child) {
+        const conditionElement = this.createConditionElement(child);
+        let newParent = parent;
+        this.nestingLevel++;
+        if (conditionElement) {
+          const treeElement = new UI.TreeOutline.TreeElement();
+          treeElement.listItemElement.appendChild(this.positionNestingElement(conditionElement));
+          treeElement.setExpandable(true);
+          treeElement.setCollapsible(false);
+          parent.appendChild(treeElement);
+          newParent = treeElement;
+        }
+        this.addChildren(child.children, newParent);
+        if (conditionElement) {
+          const treeElement = new UI.TreeOutline.TreeElement();
+          treeElement.listItemElement.appendChild(this.positionNestingElement(this.createClosingBrace()));
+          parent.appendChild(treeElement);
+        }
+        this.nestingLevel--;
+      }
+    }
+  }
+}
+
 export class FontPaletteValuesRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -1832,3 +1906,7 @@ export class HighlightPseudoStylePropertiesSection extends StylePropertiesSectio
     return false;
   }
 }
+
+interface TreeElementParent {
+  appendChild(child: UI.TreeOutline.TreeElement): void;
+}
diff --git a/front_end/panels/elements/StylePropertyHighlighter.test.ts b/front_end/panels/elements/StylePropertyHighlighter.test.ts
@@ -38,6 +38,7 @@ describeWithMockConnection('StylePropertyHighlighter', () => {
       animationStylesPayload: [],
       transitionsStylePayload: null,
       inheritedAnimatedPayload: [],
+      functionRules: [],
     });
     return {
       stylesSidebarPane,
diff --git a/front_end/panels/elements/StylesSidebarPane.test.ts b/front_end/panels/elements/StylesSidebarPane.test.ts
@@ -120,6 +120,77 @@ describe('StylesSidebarPane', () => {
       assert.instanceOf(sectionBlocks[1].sections[0], Elements.StylePropertiesSection.FontPaletteValuesRuleSection);
     });
 
+    it('should add @function section to the end', async () => {
+      const stylesSidebarPane =
+          new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel());
+      const matchedStyles = await getMatchedStyles({
+        cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
+        node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
+        functionRules: [{
+          name: {text: '--f'},
+          parameters: [{name: '--x', type: '*'}, {name: '--y', type: '*'}],
+          origin: Protocol.CSS.StyleSheetOrigin.Regular,
+          children: [
+            {
+              condition: {
+                media: {
+                  text: '(width > 400px)',
+                  source: Protocol.CSS.CSSMediaSource.MediaRule,
+                },
+                conditionText: '<unused>',
+                children: [
+                  {
+                    condition: {
+                      containerQueries: {
+                        text: '(width > 300px)',
+                      },
+                      conditionText: '<unused>',
+                      children: [
+                        {
+                          condition: {
+                            supports: {
+                              text: '(color: red)',
+                              active: true,
+                            },
+                            conditionText: '<unused>',
+                            children: [
+                              {
+                                style: {
+                                  cssProperties: [{name: 'result', value: 'var(--y)'}],
+                                  shorthandEntries: [],
+                                }
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              style: {
+                cssProperties: [{name: 'result', value: 'var(--x)'}],
+                shorthandEntries: [],
+              }
+            },
+          ],
+        }],
+      });
+
+      const sectionBlocks =
+          await stylesSidebarPane.rebuildSectionsForMatchedStyleRulesForTest(matchedStyles, new Map(), new Map());
+
+      assert.lengthOf(sectionBlocks, 2);
+      assert.strictEqual(sectionBlocks[1].titleElement()?.textContent, '@function');
+      assert.lengthOf(sectionBlocks[1].sections, 1);
+      assert.instanceOf(sectionBlocks[1].sections[0], Elements.StylePropertiesSection.FunctionRuleSection);
+      assert.strictEqual(
+          sectionBlocks[1].sections[0].element.deepTextContent().replaceAll(/\s+/g, ' ').trim(),
+          '--f(--x, --y) { @media (width > 400px) { @container (width > 300px) { @supports (color: red) { result: var(--y); } } } result: var(--x); }');
+    });
+
     describe('Animation styles', () => {
       function mockGetAnimatedComputedStyles(response: Partial<Protocol.CSS.GetAnimatedStylesForNodeResponse>) {
         setMockConnectionResponseHandler('CSS.getAnimatedStylesForNode', () => response);
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
diff --git a/front_end/panels/elements/stylePropertiesTreeOutline.css b/front_end/panels/elements/stylePropertiesTreeOutline.css
diff --git a/front_end/testing/StyleHelpers.ts b/front_end/testing/StyleHelpers.ts
