[css value tracing] Fix highlighting in BinOps

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

Author: pfaffe

front_end/panels/elements/PropertyRenderer.ts

@@ -498,9 +498,12 @@ export class StringRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
 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);
+    const [lhs, binop, rhs] = SDK.CSSPropertyParser.ASTUtils.children(match.node).map(child => {
+      const span = document.createElement('span');
+      Renderer.renderInto(child, context, span);
+      return span;
+    });
 
-    return [lhs, document.createTextNode(' '), binop, document.createTextNode(' '), rhs].flat();
+    return [lhs, document.createTextNode(' '), binop, document.createTextNode(' '), rhs];
   }
 }