Revert "[css value tracing] evaluate percentages in longhands"

This reverts commit a0c4c4a.

Reason for revert: The change breaks a bunch of non-percentage evaluations.

Original change's description:
> [css value tracing] evaluate percentages in longhands
>
> This adds support for evaluating <percentage> units in css value
> tracing, but only for longhands. For shorthands, we need additional reasoning about which longhand the unit pertains to in order to understand whether it's relative to a width or a height.
>
> Bug: 401213719
> Change-Id: I823ef9d52bb12ab40e7bcabce770733ad36a51b7
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6376104
> Reviewed-by: Eric Leese <[email protected]>
> Auto-Submit: Philip Pfaffe <[email protected]>
> Commit-Queue: Eric Leese <[email protected]>

Bug: 401213719
Change-Id: I19d3567542f9b53e57efa9747f70d3aa529acec2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6405417
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Rubber Stamper <[email protected]>
Bot-Commit: Rubber Stamper <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSModel.ts

@@ -43,7 +43,6 @@ import * as Root from '../root/root.js';
 import {CSSFontFace} from './CSSFontFace.js';
 import {CSSMatchedStyles} from './CSSMatchedStyles.js';
 import {CSSMedia} from './CSSMedia.js';
-import {cssMetadata} from './CSSMetadata.js';
 import {CSSStyleRule} from './CSSRule.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
 import {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
@@ -118,16 +117,9 @@ export class CSSModel extends SDKModel<EventTypes> {
     return this.#colorScheme;
   }
 
-  async resolveValues(propertyName: string|undefined, nodeId: Protocol.DOM.NodeId, ...values: string[]):
-      Promise<string[]|null> {
-    if (propertyName && cssMetadata().getLonghands(propertyName)?.length) {
-      return null;
-    }
-    const response = await this.agent.invoke_resolveValues({values, nodeId, propertyName});
-    if (response.getError()) {
-      return null;
-    }
-    return response.results;
+  async resolveValues(nodeId: Protocol.DOM.NodeId, ...values: string[]): Promise<string[]|null> {
+    const response = await this.agent.invoke_resolveValues({values, nodeId});
+    return response.getError() ? null : response.results;
   }
 
   headersForSourceURL(sourceURL: Platform.DevToolsPath.UrlString): CSSStyleSheetHeader[] {

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -684,10 +684,10 @@ export class LengthMatch implements Match {
 export class LengthMatcher extends matcherBase(LengthMatch) {
   // clang-format on
   static readonly LENGTH_UNITS = new Set([
-    'em',    'ex',    'ch',  'cap', 'ic',    'lh',    'rem',   'rex',   'rch',  'rlh',  'ric', 'rcap', 'pt',    'pc',
-    'in',    'cm',    'mm',  'Q',   'vw',    'vh',    'vi',    'vb',    'vmin', 'vmax', 'dvw', 'dvh',  'dvi',   'dvb',
-    'dvmin', 'dvmax', 'svw', 'svh', 'svi',   'svb',   'svmin', 'svmax', 'lvw',  'lvh',  'lvi', 'lvb',  'lvmin', 'lvmax',
-    'cqw',   'cqh',   'cqi', 'cqb', 'cqmin', 'cqmax', 'cqem',  'cqlh',  'cqex', 'cqch', '%'
+    'em',  'ex',    'ch',    'cap',   'ic',  'lh',  'rem', 'rex',   'rch',   'rlh',   'ric',  'rcap', 'pt',
+    'pc',  'in',    'cm',    'mm',    'Q',   'vw',  'vh',  'vi',    'vb',    'vmin',  'vmax', 'dvw',  'dvh',
+    'dvi', 'dvb',   'dvmin', 'dvmax', 'svw', 'svh', 'svi', 'svb',   'svmin', 'svmax', 'lvw',  'lvh',  'lvi',
+    'lvb', 'lvmin', 'lvmax', 'cqw',   'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'cqem',  'cqlh', 'cqex', 'cqch',
   ]);
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): LengthMatch|null {
     if (node.name !== 'NumberLiteral') {

front_end/panels/elements/CSSValueTraceView.test.ts

@@ -73,7 +73,7 @@ async function showTrace(
   view.showTrace(
       property, null, matchedStyles, new Map(),
       Elements.StylePropertyTreeElement.getPropertyRenderers(
-          property.name, property.ownerStyle, treeElement.parentPane(), matchedStyles, treeElement,
+          property.ownerStyle, treeElement.parentPane(), matchedStyles, treeElement,
           treeElement.getComputedStyles() ?? new Map()));
   return await viewFunction.nextInput;
 }

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -286,7 +286,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         const {valueElement} = Elements.PropertyRenderer.Renderer.renderValueElement(
             property, matchedResult,
             Elements.StylePropertyTreeElement.getPropertyRenderers(
-                property.name, matchedStyles.nodeStyles()[0], stylesSidebarPane, matchedStyles, null, new Map()),
+                matchedStyles.nodeStyles()[0], stylesSidebarPane, matchedStyles, null, new Map()),
             context);
 
         const colorSwatch = valueElement.querySelector('devtools-color-swatch');
@@ -1655,7 +1655,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       const addPopoverPromise = Promise.withResolvers<void>();
       sinon.stub(Elements.StylePropertyTreeElement.LengthRenderer.prototype, 'popOverAttachedForTest')
           .callsFake(() => addPopoverPromise.resolve());
-      const stylePropertyTreeElement = getTreeElement('property', '5px 2em');
+      const stylePropertyTreeElement = getTreeElement('margin', '5px 2em');
       setMockConnectionResponseHandler('CSS.getComputedStyleForNode', () => ({computedStyle: {}}));
 
       await stylePropertyTreeElement.onpopulate();
@@ -1664,17 +1664,6 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       const popover = stylePropertyTreeElement.valueElement?.querySelector('devtools-tooltip');
       assert.strictEqual(popover?.innerText, '15px');
     });
-
-    it('passes the property name to evaluations', async () => {
-      const cssModel = stylesSidebarPane.cssModel();
-      assert.exists(cssModel);
-      const resolveValuesStub = sinon.stub(cssModel, 'resolveValues').resolves([]);
-      const stylePropertyTreeElement = getTreeElement('left', '2%');
-      stylePropertyTreeElement.updateTitle();
-
-      assert.isTrue(resolveValuesStub.calledOnce);
-      assert.strictEqual(resolveValuesStub.args[0][0], 'left');
-    });
   });
 
   describe('MathFunctionRenderer', () => {
@@ -1726,29 +1715,13 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       view.showTrace(
           property, null, matchedStyles, new Map(),
           Elements.StylePropertyTreeElement.getPropertyRenderers(
-              property.name, property.ownerStyle, stylesSidebarPane, matchedStyles, null, new Map()));
+              property.ownerStyle, stylesSidebarPane, matchedStyles, null, new Map()));
 
       assert.isTrue(evaluationSpy.calledOnce);
       const originalText = evaluationSpy.args[0][0].textContent;
       await evaluationSpy.returnValues[0];
       assert.strictEqual(originalText, evaluationSpy.args[0][0].textContent);
     });
-
-    it('shows the original text during tracing when evaluation fails', async () => {
-      const cssModel = stylesSidebarPane.cssModel();
-      assert.exists(cssModel);
-      const resolveValuesStub = sinon.stub(cssModel, 'resolveValues').resolves([]);
-      const property = addProperty('width', 'calc(1 + 1)');
-
-      const view = new Elements.CSSValueTraceView.CSSValueTraceView(undefined, () => {});
-      view.showTrace(
-          property, null, matchedStyles, new Map(),
-          Elements.StylePropertyTreeElement.getPropertyRenderers(
-              property.name, property.ownerStyle, stylesSidebarPane, matchedStyles, null, new Map()));
-
-      assert.isTrue(resolveValuesStub.calledOnce);
-      assert.strictEqual(resolveValuesStub.args[0][0], 'width');
-    });
   });
 
   describe('AutoBaseRenderer', () => {

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -256,7 +256,7 @@ function getTracingTooltip(
               ?.getWidget()
               ?.showTrace(
                 property, text, matchedStyles, computedStyles,
-                getPropertyRenderers(property.name,
+                getPropertyRenderers(
                   property.ownerStyle, stylesPane, matchedStyles, null,
                   computedStyles));
           }
@@ -308,8 +308,7 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
         const {nodes, cssControls} = Renderer.renderValueNodes(
             {name: declaration.name, value: declaration.value ?? ''},
             substitution.cachedParsedValue(declaration.declaration, this.#matchedStyles, this.#computedStyles),
-            getPropertyRenderers(
-                declaration.name, declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+            getPropertyRenderers(declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
             substitution);
         cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
         return nodes;
@@ -698,7 +697,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
       context.addControl('color', swatch);
       const nodeId = this.#pane.node()?.id;
       if (nodeId !== undefined) {
-        void this.#pane.cssModel()?.resolveValues(undefined, nodeId, colorMixText).then(results => {
+        void this.#pane.cssModel()?.resolveValues(nodeId, colorMixText).then(results => {
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
@@ -1292,13 +1291,11 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 
 // clang-format off
 export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LengthMatch) {
-  // clang-format on
   readonly #stylesPane: StylesSidebarPane;
-  readonly #propertyName: string;
-  constructor(stylesPane: StylesSidebarPane, propertyName: string) {
+  // clang-format on
+  constructor(stylesPane: StylesSidebarPane) {
     super();
     this.#stylesPane = stylesPane;
-    this.#propertyName = propertyName;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.LengthMatch, context: RenderingContext): Node[] {
@@ -1321,7 +1318,7 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       return;
     }
 
-    const pixelValue = await this.#stylesPane.cssModel()?.resolveValues(this.#propertyName, nodeId, value);
+    const pixelValue = await this.#stylesPane.cssModel()?.resolveValues(nodeId, value);
 
     if (pixelValue) {
       valueElement.textContent = pixelValue[0];
@@ -1334,7 +1331,7 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       return;
     }
 
-    const pixelValue = await this.#stylesPane.cssModel()?.resolveValues(this.#propertyName, nodeId, value);
+    const pixelValue = await this.#stylesPane.cssModel()?.resolveValues(nodeId, value);
     if (!pixelValue) {
       return;
     }
@@ -1354,19 +1351,17 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
 
 // clang-format off
 export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.MathFunctionMatch) {
-  // clang-format on
   readonly #stylesPane: StylesSidebarPane;
-  #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
-  #computedStyles: Map<string, string>;
-  #propertyName: string;
+    #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+    #computedStyles: Map<string, string>;
+  // clang-format on
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, propertyName: string) {
+      computedStyles: Map<string, string>) {
     super();
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
     this.#stylesPane = stylesPane;
-    this.#propertyName = propertyName;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.MathFunctionMatch, context: RenderingContext): Node[] {
@@ -1402,7 +1397,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     if (nodeId === undefined) {
       return;
     }
-    const evaled = await this.#stylesPane.cssModel()?.resolveValues(this.#propertyName, nodeId, value);
+    const evaled = await this.#stylesPane.cssModel()?.resolveValues(nodeId, value);
     if (!evaled?.[0] || evaled[0] === value) {
       return;
     }
@@ -1418,7 +1413,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     // and compare the function result to the values of all its arguments. Evaluating the arguments eliminates nested
     // function calls and normalizes all units to px.
     values.unshift(functionText);
-    const evaledArgs = await this.#stylesPane.cssModel()?.resolveValues(this.#propertyName, nodeId, ...values);
+    const evaledArgs = await this.#stylesPane.cssModel()?.resolveValues(nodeId, ...values);
     if (!evaledArgs) {
       return;
     }
@@ -1560,7 +1555,7 @@ export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatch
 }
 
 export function getPropertyRenderers(
-    propertyName: string, style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, stylesPane: StylesSidebarPane,
+    style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, stylesPane: StylesSidebarPane,
     matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, treeElement: StylePropertyTreeElement|null,
     computedStyles: Map<string, string>): Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
   return [
@@ -1581,8 +1576,8 @@ export function getPropertyRenderers(
     new PositionAnchorRenderer(stylesPane),
     new FlexGridRenderer(stylesPane, treeElement),
     new PositionTryRenderer(matchedStyles),
-    new LengthRenderer(stylesPane, propertyName),
-    new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName),
+    new LengthRenderer(stylesPane),
+    new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles),
     new AutoBaseRenderer(computedStyles),
     new BinOpRenderer(),
   ];
@@ -1981,11 +1976,10 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.expandElement.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
     }
 
-    const renderers = this.property.parsedOk ?
-        getPropertyRenderers(
-            this.name, this.style, this.parentPaneInternal, this.matchedStylesInternal, this,
-            this.getComputedStyles() ?? new Map()) :
-        [];
+    const renderers = this.property.parsedOk ? getPropertyRenderers(
+                                                   this.style, this.parentPaneInternal, this.matchedStylesInternal,
+                                                   this, this.getComputedStyles() ?? new Map()) :
+                                               [];
 
     if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
       renderers.push(new FontRenderer(this));