[css value tracing] Evaluate color-mix()

This makes mixed colors appear as evaluation steps in color traces.

Bug: 396080529
Change-Id: I3c465387cb8783ca4a4b2ab2bf17540a216f233f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308808
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>

Author: pfaffe

front_end/panels/elements/ComputedStyleWidget.ts

@@ -116,9 +116,11 @@ function renderPropertyContents(
   }
   const name = Renderer.renderNameElement(propertyName);
   name.slot = 'name';
-  const value = Renderer.renderValueElement(
-      propertyName, propertyValue, matchProperty(propertyName, propertyValue),
-      [new ColorRenderer(), new URLRenderer(null, node), new StringRenderer()]);
+  const value = Renderer
+                    .renderValueElement(
+                        propertyName, propertyValue, matchProperty(propertyName, propertyValue),
+                        [new ColorRenderer(), new URLRenderer(null, node), new StringRenderer()])
+                    .valueElement;
   value.slot = 'value';
   propertyContentsCache.set(cacheKey, {name, value});
   return {name, value};
@@ -155,7 +157,7 @@ const createTraceElement =
      linkifier: Components.Linkifier.Linkifier): ElementsComponents.ComputedStyleTrace.ComputedStyleTrace => {
       const trace = new ElementsComponents.ComputedStyleTrace.ComputedStyleTrace();
 
-      const valueElement = Renderer.renderValueElement(
+      const {valueElement} = Renderer.renderValueElement(
           property.name, property.value, matchProperty(property.name, property.value),
           [new ColorRenderer(), new URLRenderer(null, node), new StringRenderer()]);
       valueElement.slot = 'trace-value';

front_end/panels/elements/PropertyRenderer.test.ts

@@ -24,15 +24,17 @@ describeWithEnvironment('PropertyRenderer', () => {
       // Prevent normaliztaion to get an accurate representation of the parser result.
       sinon.stub(Element.prototype, 'normalize');
       assert.deepEqual(
-          textFragments(Array.from(renderValueElement('--p', 'var(--v)').childNodes)), ['var', '(', '--v', ')']);
+          textFragments(Array.from(renderValueElement('--p', 'var(--v)').valueElement.childNodes)),
+          ['var', '(', '--v', ')']);
 
       assert.deepEqual(
-          textFragments(Array.from(renderValueElement('--p', '/* comments are text */ 1px solid 4').childNodes)),
+          textFragments(
+              Array.from(renderValueElement('--p', '/* comments are text */ 1px solid 4').valueElement.childNodes)),
           ['/* comments are text */', ' ', '1px', ' ', 'solid', ' ', '4']);
       assert.deepEqual(
           textFragments(Array.from(
               renderValueElement('--p', '2px var(--double, var(--fallback, black)) #32a1ce rgb(124 125 21 0)')
-                  .childNodes)),
+                  .valueElement.childNodes)),
           [
             '2px', ' ', 'var',     '(', '--double', ',', ' ',   'var', '(',   '--fallback', ',',  ' ', 'black', ')',
             ')',   ' ', '#32a1ce', ' ', 'rgb',      '(', '124', ' ',   '125', ' ',          '21', ' ', '0',     ')',
@@ -67,12 +69,14 @@ describeWithEnvironment('PropertyRenderer', () => {
 
     it('renders trailing comments', () => {
       const property = '/* color: red */ blue /* color: red */';
-      assert.strictEqual(textFragments(Array.from(renderValueElement('--p', property).childNodes)).join(''), property);
+      assert.strictEqual(
+          textFragments(Array.from(renderValueElement('--p', property).valueElement.childNodes)).join(''), property);
     });
 
     it('renders malformed comments', () => {
       const property = 'red /* foo: bar';
-      assert.strictEqual(textFragments(Array.from(renderValueElement('--p', property).childNodes)).join(''), property);
+      assert.strictEqual(
+          textFragments(Array.from(renderValueElement('--p', property).valueElement.childNodes)).join(''), property);
     });
   });
 });

front_end/panels/elements/PropertyRenderer.ts

@@ -293,7 +293,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   // unmatched text and around rendered matching results.
   static renderValueElement(
       name: string, value: string, matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext): HTMLElement {
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
+      tracing?: TracingContext): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     const valueElement = document.createElement('span');
     valueElement.setAttribute(
         'jslog', `${VisualLogging.value().track({
@@ -305,7 +306,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
 
     if (!matchedResult) {
       valueElement.appendChild(document.createTextNode(value));
-      return valueElement;
+      return {valueElement, cssControls: new Map()};
     }
     const rendererMap = new Map<
         SDK.CSSPropertyParser.Constructor<SDK.CSSPropertyParser.Match>, MatchRenderer<SDK.CSSPropertyParser.Match>>();
@@ -314,10 +315,10 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     }
 
     const context = new RenderingContext(matchedResult.ast, rendererMap, matchedResult, undefined, {}, tracing);
-    Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context)
-        .nodes.forEach(node => valueElement.appendChild(node));
+    const {nodes, cssControls} = Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context);
+    nodes.forEach(node => valueElement.appendChild(node));
     valueElement.normalize();
-    return valueElement;
+    return {valueElement, cssControls};
   }
 }
 

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -11,7 +11,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
-import {expectCall} from '../../testing/ExpectStubCall.js';
+import {expectCall, spyCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import {
   getMatchedStylesWithBlankRule,
@@ -272,6 +272,30 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.deepEqual(
             handler.args[1][0].data, {text: 'color-mix(in srgb, color-mix(in oklch, #ff0000, green), blue)'});
       });
+
+      it('supports evaluation during tracing', async () => {
+        const property = addProperty('color', 'color-mix(in srgb, black, white)');
+        setMockConnectionResponseHandler(
+            'CSS.resolveValues',
+            (request: Protocol.CSS.ResolveValuesRequest) =>
+                ({results: request.values.map(v => v === property.value ? 'grey' : v)}));
+        const matchedResult = property.parseValue(matchedStyles, new Map());
+
+        const context = new Elements.PropertyRenderer.TracingContext();
+        assert.isTrue(context.nextEvaluation());
+        const {valueElement} = Elements.PropertyRenderer.Renderer.renderValueElement(
+            property.name, property.value, matchedResult,
+            Elements.StylePropertyTreeElement.getPropertyRenderers(
+                matchedStyles.nodeStyles()[0], stylesSidebarPane, matchedStyles, null, new Map()),
+            context);
+
+        const colorSwatch = valueElement.querySelector('devtools-color-swatch');
+        assert.exists(colorSwatch);
+        const setColorTextCall = await spyCall(colorSwatch, 'setColorText');
+
+        assert.strictEqual(setColorTextCall.args[0].asString(), '#808080');
+        assert.strictEqual(valueElement.textContent, '#808080');
+      });
     });
 
     describe('animation-name', () => {
@@ -495,8 +519,9 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
 
       const varSwatch =
-          renderValueSpy.returnValues.find(value => value.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
-                  ?.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
+          renderValueSpy.returnValues
+                  .find(value => value.valueElement.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
+                  ?.valueElement.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
           undefined;
       assert.exists(varSwatch);
       const revealPropertySpy = sinon.spy(stylesSidebarPane, 'revealProperty');
@@ -541,8 +566,9 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
 
       const varSwatch =
-          renderValueSpy.returnValues.find(value => value.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
-                  ?.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
+          renderValueSpy.returnValues
+                  .find(value => value.valueElement.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
+                  ?.valueElement.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
           undefined;
       assert.exists(varSwatch);
       const jumpToPropertySpy = sinon.spy(stylesSidebarPane, 'jumpToProperty');
@@ -1632,7 +1658,6 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
   describe('AutoBaseRenderer', () => {
     it('strikes out non-selected values', async () => {
-
       const stylePropertyTreeElement = getTreeElement('display', '-internal-auto-base(inline, block)');
 
       stylePropertyTreeElement.updateTitle();

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -232,13 +232,14 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const substitution = context.tracing?.substitution();
     if (substitution) {
       if (declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
-        const valueElement = Renderer.renderValueElement(
+        const {valueElement, cssControls} = Renderer.renderValueElement(
             declaration.declaration.name, declaration.declaration.value,
             declaration.declaration.parseValue(this.#matchedStyles, this.#computedStyles),
             getPropertyRenderers(
                 declaration.declaration.ownerStyle, this.#stylesPane, this.#matchedStyles, this.#treeElement,
                 this.#computedStyles),
             substitution);
+        cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
         return [valueElement];
       }
       if (!declaration && match.fallback.length > 0) {
@@ -562,9 +563,11 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
 export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMixMatch) {
   // clang-format on
   readonly #pane: StylesSidebarPane;
-  constructor(pane: StylesSidebarPane) {
+  #treeElement: StylePropertyTreeElement|null;
+  constructor(pane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null) {
     super();
     this.#pane = pane;
+    this.#treeElement = treeElement;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.ColorMixMatch, context: RenderingContext): Node[] {
@@ -587,30 +590,55 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
       return false;
     };
 
+    const childTracingContexts = context.tracing?.evaluation([match.space, match.color1, match.color2]);
+    const childRenderingContexts =
+        childTracingContexts?.map(ctx => ctx.renderingContext(context)) ?? [context, context, context];
+
     const contentChild = document.createElement('span');
     contentChild.appendChild(document.createTextNode('color-mix('));
-    Renderer.renderInto(match.space, context, contentChild);
+    Renderer.renderInto(match.space, childRenderingContexts[0], contentChild);
     contentChild.appendChild(document.createTextNode(', '));
-    const color1 = Renderer.renderInto(match.color1, context, contentChild).cssControls.get('color') ?? [];
+    const color1 =
+        Renderer.renderInto(match.color1, childRenderingContexts[1], contentChild).cssControls.get('color') ?? [];
     contentChild.appendChild(document.createTextNode(', '));
-    const color2 = Renderer.renderInto(match.color2, context, contentChild).cssControls.get('color') ?? [];
+    const color2 =
+        Renderer.renderInto(match.color2, childRenderingContexts[2], contentChild).cssControls.get('color') ?? [];
     contentChild.appendChild(document.createTextNode(')'));
 
     if (context.matchedResult.hasUnresolvedVars(match.node) || color1.length !== 1 || color2.length !== 1) {
       return [contentChild];
     }
 
+    const space = match.space.map(space => context.matchedResult.getComputedText(space)).join(' ');
+    const color1Text = match.color1.map(color => context.matchedResult.getComputedText(color)).join(' ');
+    const color2Text = match.color2.map(color => context.matchedResult.getComputedText(color)).join(' ');
+    const colorMixText = `color-mix(${space}, ${color1Text}, ${color2Text})`;
+
+    if (childTracingContexts && context.tracing?.applyEvaluation(childTracingContexts)) {
+      const initialColor = Common.Color.parse('#000') as Common.Color.Color;
+      const swatch = new ColorRenderer(this.#pane, this.#treeElement).renderColorSwatch(initialColor);
+      context.addControl('color', swatch);
+      const nodeId = this.#pane.node()?.id;
+      if (nodeId !== undefined) {
+        void this.#pane.cssModel()?.resolveValues(nodeId, colorMixText).then(results => {
+          if (results) {
+            const color = Common.Color.parse(results[0]);
+            if (color) {
+              swatch.setColorText(color.as(Common.Color.Format.HEXA));
+            }
+          }
+        });
+        return [swatch];
+      }
+    }
+
     const swatch = new InlineEditor.ColorMixSwatch.ColorMixSwatch();
     if (!hookUpColorArg(color1[0], text => swatch.setFirstColor(text)) ||
         !hookUpColorArg(color2[0], text => swatch.setSecondColor(text))) {
       return [contentChild];
     }
-
-    const space = match.space.map(space => context.matchedResult.getComputedText(space)).join(' ');
-    const color1Text = match.color1.map(color => context.matchedResult.getComputedText(color)).join(' ');
-    const color2Text = match.color2.map(color => context.matchedResult.getComputedText(color)).join(' ');
     swatch.tabIndex = -1;
-    swatch.setColorMixText(`color-mix(${space}, ${color1Text}, ${color2Text})`);
+    swatch.setColorMixText(colorMixText);
     this.#pane.addPopover(swatch, {
       contents: () => {
         const color = swatch.mixedColor();
@@ -1439,7 +1467,7 @@ export function getPropertyRenderers(
   return [
     new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
     new ColorRenderer(stylesPane, treeElement),
-    new ColorMixRenderer(stylesPane),
+    new ColorMixRenderer(stylesPane, treeElement),
     new URLRenderer(style.parentRule, stylesPane.node()),
     new AngleRenderer(treeElement),
     new LinkableNameRenderer(matchedStyles, stylesPane),
@@ -1886,7 +1914,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     this.listItemElement.removeChildren();
     const matchedResult = this.property.parseValue(this.matchedStyles(), this.computedStyles);
-    this.valueElement = Renderer.renderValueElement(this.name, this.value, matchedResult, renderers);
+    this.valueElement = Renderer.renderValueElement(this.name, this.value, matchedResult, renderers).valueElement;
     this.nameElement = Renderer.renderNameElement(this.name);
     if (this.property.name.startsWith('--') && this.nameElement) {
       this.parentPaneInternal.addPopover(this.nameElement, {

front_end/testing/ExpectStubCall.ts

@@ -27,3 +27,19 @@ export function expectCalled<TArgs extends any[] = any[], TReturnValue = any>(
   }
   return expectCall(stub, {...options, callCount: remainingCalls});
 }
+
+type Args<T> = T extends(...args: infer TArgs) => unknown ? TArgs : never;
+type Ret<T> = T extends(...args: infer TArgs) => infer TRet ? TRet : never;
+
+export function spyCall<T, Fn extends keyof T>(obj: T, method: Fn): Promise<{args: Args<T[Fn]>, result: Ret<T[Fn]>}> {
+  const {promise, resolve} = Promise.withResolvers<{args: Args<T[Fn]>, result: Ret<T[Fn]>}>();
+
+  const original = obj[method] as (...args: Args<T[Fn]>) => Ret<T[Fn]>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sinon.stub(obj, method).callsFake(function(this: any, ...args: any) {
+    const result = original.apply(this, args);
+    resolve({args, result});
+  });
+
+  return promise;
+}

front_end/ui/legacy/components/inline_editor/colorMixSwatch.css

@@ -11,6 +11,7 @@
   grid: [stack] 1fr / [stack] 1fr;
   margin-left: 1px;
   margin-right: 1px;
+  vertical-align: -1px;
   color: var(--color);
 }