[css] show crossed-out values on hover

In the styles pane we cross out values that are unused, e.g., fallbacks
in a var(), colors in light-dark(), values in min(), and so forth.
Crossed out values are hard to read, so we remove the line-through when
hovering the values.

Bug: None
Change-Id: I7843a88ec72ed890f27c863b1387e2651c310132
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6243916
Auto-Submit: Philip Pfaffe <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: pfaffe

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -1392,8 +1392,8 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.exists(dark);
         const active = colorScheme === SDK.CSSModel.ColorScheme.LIGHT ? light : dark;
         const inactive = colorScheme === SDK.CSSModel.ColorScheme.LIGHT ? dark : light;
-        assert.strictEqual(inactive.parentElement?.style.textDecoration, 'line-through');
-        assert.strictEqual(active.parentElement?.style.textDecoration, '');
+        assert.isTrue(inactive.parentElement?.classList.contains('inactive-value'));
+        assert.isFalse(active.parentElement?.classList.contains('inactive-value'));
       }
 
       await check(SDK.CSSModel.ColorScheme.LIGHT, 'red', 'blue');
@@ -1566,9 +1566,9 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
           undefined;
       assert.exists(values);
       assert.strictEqual(values?.length, 3);
-      assert.strictEqual(values[0].style.textDecoration, 'line-through');
-      assert.strictEqual(values[1].style.textDecoration, '');
-      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+      assert.isTrue(values[0].classList.contains('inactive-value'));
+      assert.isFalse(values[1].classList.contains('inactive-value'));
+      assert.isTrue(values[2].classList.contains('inactive-value'));
     });
 
     it('renders the position-try correctly with keyword', () => {
@@ -1582,9 +1582,9 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
           undefined;
       assert.exists(values);
       assert.strictEqual(values?.length, 3);
-      assert.strictEqual(values[0].style.textDecoration, 'line-through');
-      assert.strictEqual(values[1].style.textDecoration, '');
-      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+      assert.isTrue(values[0].classList.contains('inactive-value'));
+      assert.isFalse(values[1].classList.contains('inactive-value'));
+      assert.isTrue(values[2].classList.contains('inactive-value'));
     });
   });
 
@@ -1633,7 +1633,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
           stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLSpanElement>;
       assert.lengthOf(args, 3);
       assert.deepEqual(
-          Array.from(args.values()).map(arg => arg.style.textDecoration), ['line-through', '', 'line-through']);
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [true, false, true]);
     });
   });
 
@@ -1647,14 +1647,16 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
       let args = stylePropertyTreeElement.valueElement?.querySelectorAll('span') as NodeListOf<HTMLSpanElement>;
       assert.lengthOf(args, 3);
-      assert.deepEqual(Array.from(args.values()).map(arg => arg.style.textDecoration), ['', '', 'line-through']);
+      assert.deepEqual(
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [false, false, true]);
 
       stylePropertyTreeElement.setComputedStyles(new Map([['appearance', 'base-select']]));
       stylePropertyTreeElement.updateTitle();
 
       args = stylePropertyTreeElement.valueElement?.querySelectorAll('span') as NodeListOf<HTMLSpanElement>;
       assert.lengthOf(args, 3);
-      assert.deepEqual(Array.from(args.values()).map(arg => arg.style.textDecoration), ['', 'line-through', '']);
+      assert.deepEqual(
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [false, true, false]);
     });
   });
 

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -521,7 +521,7 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
     const inactiveColor = (activeColor === match.light) ? dark : light;
     const colorText = context.matchedResult.getComputedTextRange(activeColor[0], activeColor[activeColor.length - 1]);
     const color = colorText && Common.Color.parse(colorText);
-    inactiveColor.style.textDecoration = 'line-through';
+    inactiveColor.classList.add('inactive-value');
     if (color) {
       colorSwatch.renderColor(color);
     }
@@ -851,9 +851,9 @@ export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
 
     const activeAppearance = this.#treeElement.getComputedStyle('appearance');
     if (activeAppearance?.startsWith('base')) {
-      auto.style.textDecoration = 'line-through';
+      auto.classList.add('inactive-value');
     } else {
-      base.style.textDecoration = 'line-through';
+      base.classList.add('inactive-value');
     }
 
     return [content];
@@ -1314,7 +1314,7 @@ export class SelectFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMa
     }
     for (let i = 0; i < renderedArgs.length; ++i) {
       if (evaledArgs.results[i] !== functionResult) {
-        renderedArgs[i].style.textDecoration = 'line-through';
+        renderedArgs[i].classList.add('inactive-value');
       }
     }
   }
@@ -1443,7 +1443,7 @@ export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatch
         fallbackContent.appendChild(document.createTextNode(', '));
       }
       if (i !== this.#treeElement.matchedStyles().activePositionFallbackIndex()) {
-        fallbackContent.style.textDecoration = 'line-through';
+        fallbackContent.classList.add('inactive-value');
       }
       Renderer.renderInto(fallback, context, fallbackContent);
 

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -8,6 +8,10 @@
   color: inherit;
 }
 
+.inactive-value:not(:hover) {
+  text-decoration: line-through;
+}
+
 .tree-outline {
   padding: 0;
 }