[styles] pretty-print binary expressions

Fixed: 399818714
Change-Id: Ifdc0d2707c5fb259ff526bbcb0f88ccda1605e6b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6311458
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSProperty.ts

@@ -18,6 +18,7 @@ import {
   AngleMatcher,
   AutoBaseMatcher,
   BezierMatcher,
+  BinOpMatcher,
   ColorMatcher,
   ColorMixMatcher,
   CSSWideKeywordMatcher,
@@ -138,6 +139,7 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       new LengthMatcher(),
       new MathFunctionMatcher(),
       new AutoBaseMatcher(),
+      new BinOpMatcher(),
     ];
 
     if (Root.Runtime.experiments.isEnabled('font-editor')) {

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -141,6 +141,22 @@ export class VariableMatcher extends matcherBase(VariableMatch) {
   }
 }
 
+export class BinOpMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode) {
+  }
+}
+
+// clang-format off
+export class BinOpMatcher extends matcherBase(BinOpMatch) {
+  // clang-format on
+  override accepts(): boolean {
+    return true;
+  }
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): BinOpMatch|null {
+    return node.name === 'BinaryExpression' ? new BinOpMatch(matching.ast.text(node), node) : null;
+  }
+}
+
 export class TextMatch implements Match {
   computedText?: () => string;
   constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode) {

front_end/panels/elements/PropertyRenderer.test.ts

@@ -54,6 +54,21 @@ describeWithEnvironment('PropertyRenderer', () => {
           Printer.walk(ast).get());
     });
 
+    it('nicely formats binary expressions', () => {
+      const property = 'calc((50 -(0* 4))* 1vmin)';
+      const rule = `*{--property: ${property};}`;
+      const tree = cssParser.parse(rule).topNode;
+      const ast = new SDK.CSSPropertyParser.SyntaxTree(property, rule, tree);
+      const matchedResult =
+          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new SDK.CSSPropertyParserMatchers.BinOpMatcher()]);
+      const renderer = new Elements.PropertyRenderer.BinOpRenderer();
+      const context =
+          new Elements.PropertyRenderer.RenderingContext(ast, new Map([[renderer.matchType, renderer]]), matchedResult);
+      assert.deepEqual(
+          textFragments(Elements.PropertyRenderer.Renderer.render(tree, context).nodes).join(''),
+          '*{--property: calc((50 - (0 * 4)) * 1vmin);}', Printer.walk(ast).get());
+    });
+
     it('correctly renders subtrees', () => {
       const property = '2px var(--double, var(--fallback, black)) #32a1ce rgb(124 125 21 0)';
       const rule = `*{--property: ${property};}`;

front_end/panels/elements/PropertyRenderer.ts

@@ -355,10 +355,6 @@ export class URLRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.URLM
     UI.UIUtils.createTextChild(container, ')');
     return [container];
   }
-
-  matcher(): SDK.CSSPropertyParserMatchers.URLMatcher {
-    return new SDK.CSSPropertyParserMatchers.URLMatcher();
-  }
 }
 
 // clang-format off
@@ -370,8 +366,15 @@ export class StringRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
     UI.Tooltip.Tooltip.install(element, unescapeCssString(match.text));
     return [element];
   }
+}
+
+// clang-format off
+export class BinOpRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BinOpMatch) {
+  // clang-format on
+  override render(match: SDK.CSSPropertyParserMatchers.BinOpMatch, context: RenderingContext): Node[] {
+    const [lhs, binop, rhs] =
+        SDK.CSSPropertyParser.ASTUtils.children(match.node).map(child => Renderer.render(child, context).nodes);
 
-  matcher(): SDK.CSSPropertyParserMatchers.StringMatcher {
-    return new SDK.CSSPropertyParserMatchers.StringMatcher();
+    return [lhs, document.createTextNode(' '), binop, document.createTextNode(' '), rhs].flat();
   }
 }

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -29,6 +29,7 @@ import {cssRuleValidatorsMap, type Hint} from './CSSRuleValidator.js';
 import {CSSValueTraceView} from './CSSValueTraceView.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {
+  BinOpRenderer,
   type MatchRenderer,
   Renderer,
   rendererBase,
@@ -1485,6 +1486,7 @@ export function getPropertyRenderers(
     new LengthRenderer(stylesPane),
     new MathFunctionRenderer(stylesPane),
     new AutoBaseRenderer(computedStyles),
+    new BinOpRenderer(),
   ];
 }