[styles] Support evaluating env()

Fixed: 40196710
Change-Id: I6b7bc865d13841a90e0451ffcd26fb6866ba2f22
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6760832
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -4,7 +4,7 @@
 
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import {getMatchedStyles, ruleMatch} from '../../testing/StyleHelpers.js';
 
 import * as SDK from './sdk.js';
@@ -700,6 +700,7 @@ describe('CSSMatchedStyles', () => {
 
 describeWithMockConnection('NodeCascade', () => {
   it('correctly marks custom properties as Overloaded if they are registered as inherits: false', async () => {
+    setMockConnectionResponseHandler('CSS.getEnvironmentVariables', () => ({}));
     const target = createTarget();
     const cssModel = new SDK.CSSModel.CSSModel(target);
     const parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode);

front_end/core/sdk/CSSMatchedStyles.ts

@@ -19,6 +19,7 @@ import {
   BinOpMatcher,
   ColorMatcher,
   ColorMixMatcher,
+  EnvFunctionMatcher,
   FlexGridMatcher,
   GridTemplateMatcher,
   LengthMatcher,
@@ -296,6 +297,7 @@ export class CSSMatchedStyles {
   #functionRules: CSSFunctionRule[];
   #functionRuleMap = new Map<string, CSSFunctionRule>();
   readonly #fontPaletteValuesRule: CSSFontPaletteValuesRule|undefined;
+  #environmentVariables: Record<string, string> = {};
 
   static async create(payload: CSSMatchedStylesPayload): Promise<CSSMatchedStyles> {
     const cssMatchedStyles = new CSSMatchedStyles(payload);
@@ -349,6 +351,8 @@ export class CSSMatchedStyles {
       inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
     }
 
+    this.#environmentVariables = await this.cssModel().getEnvironmentVariales();
+
     this.#mainDOMCascade = await this.buildMainCascade(
         inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload,
         transitionsStylePayload, inheritedAnimatedPayload);
@@ -504,7 +508,7 @@ export class CSSMatchedStyles {
       nodeCascades.push(new NodeCascade(this, inheritedStyles, true /* #isInherited */));
     }
 
-    return new DOMInheritanceCascade(nodeCascades, this.#registeredProperties);
+    return new DOMInheritanceCascade(this, nodeCascades, this.#registeredProperties);
   }
 
   /**
@@ -632,12 +636,13 @@ export class CSSMatchedStyles {
     // Now that we've built the arrays of NodeCascades for each pseudo type, convert them into
     // DOMInheritanceCascades.
     for (const [pseudoType, nodeCascade] of pseudoCascades.entries()) {
-      pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(nodeCascade, this.#registeredProperties));
+      pseudoInheritanceCascades.set(
+          pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
     }
 
     for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
       customHighlightPseudoInheritanceCascades.set(
-          highlightName, new DOMInheritanceCascade(nodeCascade, this.#registeredProperties));
+          highlightName, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
     }
 
     return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
@@ -904,8 +909,13 @@ export class CSSMatchedStyles {
       new AutoBaseMatcher(),
       new BinOpMatcher(),
       new RelativeColorChannelMatcher(),
+      new EnvFunctionMatcher(this),
     ];
   }
+
+  environmentVariable(name: string): string|undefined {
+    return this.#environmentVariables[name];
+  }
 }
 
 class NodeCascade {
@@ -1085,8 +1095,11 @@ class DOMInheritanceCascade {
   #initialized = false;
   readonly #nodeCascades: NodeCascade[];
   #registeredProperties: CSSRegisteredProperty[];
-  constructor(nodeCascades: NodeCascade[], registeredProperties: CSSRegisteredProperty[]) {
+  readonly #matchedStyles: CSSMatchedStyles;
+  constructor(
+      matchedStyles: CSSMatchedStyles, nodeCascades: NodeCascade[], registeredProperties: CSSRegisteredProperty[]) {
     this.#nodeCascades = nodeCascades;
+    this.#matchedStyles = matchedStyles;
     this.#registeredProperties = registeredProperties;
 
     for (const nodeCascade of nodeCascades) {
@@ -1267,47 +1280,49 @@ class DOMInheritanceCascade {
     // bubbling up the minimum discovery time whenever we close a cycle.
     const record = sccRecord.add(nodeCascade, variableName);
 
-    const matching = PropertyParser.BottomUpTreeMatching.walk(
-        ast, [new BaseVariableMatcher(match => {
-          const parentStyle = definedValue.declaration.style;
-          const nodeCascade = this.#styleToNodeCascade.get(parentStyle);
-          if (!nodeCascade) {
+    const matching = PropertyParser.BottomUpTreeMatching.walk(ast, [
+      new BaseVariableMatcher(match => {
+        const parentStyle = definedValue.declaration.style;
+        const nodeCascade = this.#styleToNodeCascade.get(parentStyle);
+        if (!nodeCascade) {
+          return null;
+        }
+        const childRecord = sccRecord.get(nodeCascade, match.name);
+        if (childRecord) {
+          if (sccRecord.isInInProgressSCC(childRecord)) {
+            // Cycle detected, update the root.
+            record.updateRoot(childRecord);
             return null;
           }
-          const childRecord = sccRecord.get(nodeCascade, match.name);
-          if (childRecord) {
-            if (sccRecord.isInInProgressSCC(childRecord)) {
-              // Cycle detected, update the root.
-              record.updateRoot(childRecord);
-              return null;
-            }
 
-            // We've seen the variable before, so we can look up the text directly.
-            return this.#computedCSSVariables.get(nodeCascade)?.get(match.name)?.value ?? null;
-          }
+          // We've seen the variable before, so we can look up the text directly.
+          return this.#computedCSSVariables.get(nodeCascade)?.get(match.name)?.value ?? null;
+        }
 
-          const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
-          // Variable reference is resolved, so return it.
-          const newChildRecord = sccRecord.get(nodeCascade, match.name);
-          // The SCC record for the referenced variable may not exist if the var was already computed in a previous
-          // iteration. That means it's in a different SCC.
-          newChildRecord && record.updateRoot(newChildRecord);
-          if (cssVariableValue?.value !== undefined) {
-            return cssVariableValue.value;
-          }
+        const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
+        // Variable reference is resolved, so return it.
+        const newChildRecord = sccRecord.get(nodeCascade, match.name);
+        // The SCC record for the referenced variable may not exist if the var was already computed in a previous
+        // iteration. That means it's in a different SCC.
+        newChildRecord && record.updateRoot(newChildRecord);
+        if (cssVariableValue?.value !== undefined) {
+          return cssVariableValue.value;
+        }
 
-          // Variable reference is not resolved, use the fallback.
-          if (!match.fallback) {
-            return null;
-          }
-          if (match.fallback.length === 0) {
-            return '';
-          }
-          if (match.matching.hasUnresolvedVarsRange(match.fallback[0], match.fallback[match.fallback.length - 1])) {
-            return null;
-          }
-          return match.matching.getComputedTextRange(match.fallback[0], match.fallback[match.fallback.length - 1]);
-        })]);
+        // Variable reference is not resolved, use the fallback.
+        if (!match.fallback) {
+          return null;
+        }
+        if (match.fallback.length === 0) {
+          return '';
+        }
+        if (match.matching.hasUnresolvedVarsRange(match.fallback[0], match.fallback[match.fallback.length - 1])) {
+          return null;
+        }
+        return match.matching.getComputedTextRange(match.fallback[0], match.fallback[match.fallback.length - 1]);
+      }),
+      new EnvFunctionMatcher(this.#matchedStyles)
+    ]);
 
     const decl = PropertyParser.ASTUtils.siblings(PropertyParser.ASTUtils.declValue(matching.ast.tree));
     const computedText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';

front_end/core/sdk/CSSModel.ts

@@ -432,6 +432,14 @@ export class CSSModel extends SDKModel<EventTypes> {
     };
   }
 
+  async getEnvironmentVariales(): Promise<Record<string, string>> {
+    const response = await this.agent.invoke_getEnvironmentVariables();
+    if (response.getError()) {
+      return {};
+    }
+    return response.environmentVariables;
+  }
+
   async getBackgroundColors(nodeId: Protocol.DOM.NodeId): Promise<ContrastInfo|null> {
     const response = await this.agent.invoke_getBackgroundColors({nodeId});
     if (response.getError()) {

front_end/core/sdk/CSSPropertyParserMatchers.test.ts

@@ -732,4 +732,35 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
         new SDK.CSSPropertyParserMatchers.ColorMatch(expected.getAuthoredText() ?? expected.asString(), match.node);
     assert.isNull(match.getColorChannelValue({baseColor, colorSpace: expected.format()}));
   });
+
+  it('match env() functions', () => {
+    // Matched when the var resolves
+    for (const good of ['env(a)', 'env(a, d)', 'env(a /* aa */, b c)', 'env(a, b, c)']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      matchedStyles.environmentVariable.callsFake(name => name === 'a' ? 'A' : 'B');
+      const {match, text} =
+          matchSingleValue('--env', good, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.exists(match, text);
+      assert.strictEqual(match.varName, 'a');
+      assert.strictEqual(match.value, 'A');
+    }
+    // Matched when the var is not resolved
+    for (const good of ['env(a)', 'env(a, d)', 'env(a /* aa */, b c)', 'env(a, b, c)']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      matchedStyles.environmentVariable.callsFake(name => name === 'a' ? undefined : 'B');
+      const {match, text} =
+          matchSingleValue('--env', good, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.exists(match, text);
+      assert.strictEqual(match.varName, 'a');
+      assert.oneOf(match.value, [null, 'd', 'b c', 'b, c']);
+    }
+    // Not matched
+    for (const bad of ['env', 'env()']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      const {match, ast, text} =
+          matchSingleValue('--env', bad, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.notExists(match, text);
+      assert.exists(ast, text);
+    }
+  });
 });

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -1193,3 +1193,40 @@ export class PositionTryMatcher extends matcherBase(PositionTryMatch) {
     return new PositionTryMatch(valueText, node, preamble, fallbacks);
   }
 }
+
+export class EnvFunctionMatch implements Match {
+  constructor(
+      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly varName: string,
+      readonly value: string|null, readonly varNameIsValid: boolean) {
+  }
+
+  computedText(): string|null {
+    return this.value;
+  }
+}
+
+// clang-format off
+export class EnvFunctionMatcher extends matcherBase(EnvFunctionMatch) {
+  // clang-format on
+  constructor(readonly matchedStyles: CSSMatchedStyles) {
+    super();
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): EnvFunctionMatch|null {
+    if (node.name !== 'CallExpression' || matching.ast.text(node.getChild('Callee')) !== 'env') {
+      return null;
+    }
+
+    const [valueNodes, ...fallbackNodes] = ASTUtils.callArgs(node);
+    if (!valueNodes?.length) {
+      return null;
+    }
+
+    const fallbackValue =
+        fallbackNodes.length > 0 ? matching.getComputedTextRange(...ASTUtils.range(fallbackNodes.flat())) : undefined;
+    const varName = matching.getComputedTextRange(...ASTUtils.range(valueNodes)).trim();
+    const value = this.matchedStyles.environmentVariable(varName);
+
+    return new EnvFunctionMatch(matching.ast.text(node), node, varName, value ?? fallbackValue ?? null, Boolean(value));
+  }
+}

front_end/panels/elements/CSSValueTraceView.test.ts

@@ -16,14 +16,15 @@ import * as Elements from './elements.js';
 async function setUpStyles() {
   stubNoopSettings();
   setMockConnectionResponseHandler('CSS.enable', () => ({}));
+  setMockConnectionResponseHandler('CSS.getEnvironmentVariables', () => ({}));
   const computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
   const cssModel = new SDK.CSSModel.CSSModel(createTarget());
   await cssModel.resumeModel();
   const domModel = cssModel.domModel();
   const node = new SDK.DOMModel.DOMNode(domModel);
   node.id = 0 as Protocol.DOM.NodeId;
   UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
-  const matchedStyles = await getMatchedStylesWithBlankRule(cssModel);
+  const matchedStyles = await getMatchedStylesWithBlankRule({cssModel});
   const stylesPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
 
   return {matchedStyles, stylesPane};

front_end/panels/elements/PropertyRenderer.ts

@@ -183,7 +183,8 @@ export class TracingContext {
     this.#highlighting = highlighting;
     this.#hasMoreSubstitutions =
         matchedResult?.hasMatches(
-            SDK.CSSPropertyParserMatchers.VariableMatch, SDK.CSSPropertyParserMatchers.BaseVariableMatch) ??
+            SDK.CSSPropertyParserMatchers.VariableMatch, SDK.CSSPropertyParserMatchers.BaseVariableMatch,
+            SDK.CSSPropertyParserMatchers.EnvFunctionMatch) ??
         false;
     this.#propertyName = matchedResult?.ast.propertyName ?? null;
     this.#longhandOffset = initialLonghandOffset;

front_end/panels/elements/StylePropertiesSection.test.ts

@@ -21,7 +21,7 @@ describeWithMockConnection('StylesPropertySection', () => {
 
   it('contains specificity information', async () => {
     const specificity = {a: 0, b: 1, c: 0};
-    const matchedStyles = await getMatchedStylesWithBlankRule(new SDK.CSSModel.CSSModel(createTarget()));
+    const matchedStyles = await getMatchedStylesWithBlankRule({cssModel: new SDK.CSSModel.CSSModel(createTarget())});
     const section = new Elements.StylePropertiesSection.StylePropertiesSection(
         new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel), matchedStyles,
         matchedStyles.nodeStyles()[0], 0, new Map(), new Map());
@@ -32,7 +32,7 @@ describeWithMockConnection('StylesPropertySection', () => {
   });
 
   it('renders selectors correctly', async () => {
-    const matchedStyles = await getMatchedStylesWithBlankRule(new SDK.CSSModel.CSSModel(createTarget()));
+    const matchedStyles = await getMatchedStylesWithBlankRule({cssModel: new SDK.CSSModel.CSSModel(createTarget())});
     const section = new Elements.StylePropertiesSection.StylePropertiesSection(
         new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel), matchedStyles,
         matchedStyles.nodeStyles()[0], 0, new Map(), new Map());
@@ -69,7 +69,7 @@ describeWithMockConnection('StylesPropertySection', () => {
       matchingSelectors: [0],
     }];
     const matchedStyles =
-        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, header, {matchedPayload});
+        await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...header, matchedPayload});
 
     const rule = matchedStyles.nodeStyles()[0].parentRule;
     const linkifier = sinon.createStubInstance(Components.Linkifier.Linkifier);
@@ -108,7 +108,7 @@ describeWithMockConnection('StylesPropertySection', () => {
       content: url === header.sourceMapURL ? '{"sources": []}' : '',
     }));
     const matchedStyles =
-        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, header, {matchedPayload});
+        await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...header, matchedPayload});
 
     const styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
     assert.exists(styleSheetHeader);
@@ -152,7 +152,7 @@ describeWithMockConnection('StylesPropertySection', () => {
         matchingSelectors: [0],
       }];
       const matchedStyles =
-          await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
+          await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...range, matchedPayload});
       const declaration = matchedStyles.nodeStyles()[0];
       assert.exists(declaration);
       const section = new Elements.StylePropertiesSection.StylePropertiesSection(
@@ -175,7 +175,7 @@ describeWithMockConnection('StylesPropertySection', () => {
         matchingSelectors: [0],
       }];
       const matchedStyles =
-          await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
+          await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...range, matchedPayload});
       const declaration = matchedStyles.nodeStyles()[0];
       assert.exists(declaration);
       const section = new Elements.StylePropertiesSection.StylePropertiesSection(
@@ -216,8 +216,8 @@ describeWithMockConnection('StylesPropertySection', () => {
       matchingSelectors: [0],
     }];
 
-    const matchedStyles = await getMatchedStylesWithStylesheet(
-        cssModel, origin, styleSheetId, {...range}, {propertyRules, matchedPayload});
+    const matchedStyles =
+        await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...range, propertyRules, matchedPayload});
 
     function assertIsPropertyRule(rule: SDK.CSSRule.CSSRule|null): asserts rule is SDK.CSSRule.CSSPropertyRule {
       assert.instanceOf(rule, SDK.CSSRule.CSSPropertyRule);
@@ -265,7 +265,7 @@ describeWithMockConnection('StylesPropertySection', () => {
       },
     };
     const matchedStyles =
-        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {fontPaletteValuesRule});
+        await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...range, fontPaletteValuesRule});
     const declaration = matchedStyles.fontPaletteValuesRule()?.style;
     assert.exists(declaration);
     const section = new Elements.StylePropertiesSection.FontPaletteValuesRuleSection(
@@ -309,7 +309,7 @@ describeWithMockConnection('StylesPropertySection', () => {
       },
     ];
     const matchedStyles =
-        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {positionTryRules});
+        await getMatchedStylesWithStylesheet({cssModel, origin, styleSheetId, ...range, positionTryRules});
     const declaration1 = matchedStyles.positionTryRules()[0].style;
     const declaration2 = matchedStyles.positionTryRules()[1].style;
     assert.exists(declaration1);