chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -31,6 +31,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -202,7 +204,7 @@ export class StylePropertiesSection {
 
     this.propertiesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this.propertiesTreeOutline.setFocusable(false);
-    this.propertiesTreeOutline.registerCSSFiles([stylePropertiesTreeOutlineStyles]);
+    this.propertiesTreeOutline.registerRequiredCSS(stylePropertiesTreeOutlineStyles);
     this.propertiesTreeOutline.element.classList.add('style-properties', 'matched-styles', 'monospace');
     this.#styleRuleElement.appendChild(this.propertiesTreeOutline.element);
 
@@ -244,14 +246,14 @@ export class StylePropertiesSection {
       newRuleButton.element.tabIndex = -1;
       if (!this.newStyleRuleToolbar) {
         this.newStyleRuleToolbar =
-            new UI.Toolbar.Toolbar('sidebar-pane-section-toolbar new-rule-toolbar', this.element);
+            this.element.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar new-rule-toolbar');
       }
       this.newStyleRuleToolbar.appendToolbarItem(newRuleButton);
-      UI.ARIAUtils.setHidden(this.newStyleRuleToolbar.element, true);
+      UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
     if (Root.Runtime.experiments.isEnabled('font-editor') && this.editable) {
-      this.fontEditorToolbar = new UI.Toolbar.Toolbar('sidebar-pane-section-toolbar', this.#styleRuleElement);
+      this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
       this.fontEditorSectionManager = new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(), this);
       this.fontEditorButton =
           new UI.Toolbar.ToolbarButton('Font Editor', 'custom-typography', undefined, 'font-editor');
@@ -268,10 +270,10 @@ export class StylePropertiesSection {
 
       if (this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Inline) {
         if (this.newStyleRuleToolbar) {
-          this.newStyleRuleToolbar.element.classList.add('shifted-toolbar');
+          this.newStyleRuleToolbar.classList.add('shifted-toolbar');
         }
       } else {
-        this.fontEditorToolbar.element.classList.add('font-toolbar-hidden');
+        this.fontEditorToolbar.classList.add('font-toolbar-hidden');
       }
     }
 
@@ -354,9 +356,9 @@ export class StylePropertiesSection {
       this.fontEditorSectionManager.registerFontProperty(treeElement);
     }
     if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.element.classList.remove('font-toolbar-hidden');
+      this.fontEditorToolbar.classList.remove('font-toolbar-hidden');
       if (this.newStyleRuleToolbar) {
-        this.newStyleRuleToolbar.element.classList.add('shifted-toolbar');
+        this.newStyleRuleToolbar.classList.add('shifted-toolbar');
       }
     }
   }
@@ -367,10 +369,10 @@ export class StylePropertiesSection {
       return;
     }
     if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.element.classList.add('font-toolbar-hidden');
+      this.fontEditorToolbar.classList.add('font-toolbar-hidden');
     }
     if (this.newStyleRuleToolbar) {
-      this.newStyleRuleToolbar.element.classList.remove('shifted-toolbar');
+      this.newStyleRuleToolbar.classList.remove('shifted-toolbar');
     }
   }
 
@@ -621,6 +623,13 @@ export class StylePropertiesSection {
       return this.matchedStyles.isInherited(this.styleInternal) ? i18nString(UIStrings.styleAttribute) :
                                                                   'element.style';
     }
+    if (this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Transition) {
+      return 'transitions style';
+    }
+
+    if (this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Animation) {
+      return this.styleInternal.animationName() ? `${this.styleInternal.animationName()} animation` : 'animation style';
+    }
     if (node && this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Attributes) {
       return i18nString(UIStrings.sattributesStyle, {PH1: node.nodeNameInCorrectCase()});
     }
@@ -1376,26 +1385,22 @@ export class StylePropertiesSection {
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copySelector), () => {
       const selectorText = this.headerText();
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(selectorText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.SELECTOR_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-selector'});
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyRule), () => {
       const ruleText = StylesSidebarPane.formatLeadingProperties(this).ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RULE_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-rule'});
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
       const allDeclarationText = StylesSidebarPane.formatLeadingProperties(this).allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ALL_DECLARATIONS_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-all-declarations'});
 
     // TODO(changhaohan): conditionally add this item only when there are changes to copy
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllCSSChanges), async () => {
       const allChanges = await this.parentPane.getFormattedChanges();
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ALL_CHANGES_VIA_STYLES_TAB);
     }, {jslogContext: 'copy-all-css-changes'});
     void contextMenu.show();
   }

package/front_end/panels/elements/StylePropertyHighlighter.test.ts

@@ -35,6 +35,9 @@ describeWithMockConnection('StylePropertyHighlighter', () => {
       cssPropertyRegistrations: [],
       fontPaletteValuesRule: undefined,
       activePositionFallbackIndex: -1,
+      animationStylesPayload: [],
+      transitionsStylePayload: null,
+      inheritedAnimatedPayload: [],
     });
     return {
       stylesSidebarPane,

package/front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -2,16 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type {SinonStub} from 'sinon';
+
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.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 {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
+import {
+  getMatchedStylesWithBlankRule,
+} from '../../testing/StyleHelpers.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as LegacyUI from '../../ui/legacy/legacy.js';
@@ -21,14 +25,26 @@ import * as Elements from './elements.js';
 
 describeWithMockConnection('StylePropertyTreeElement', () => {
   let stylesSidebarPane: Elements.StylesSidebarPane.StylesSidebarPane;
-  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
-  let mockStylePropertiesSection: sinon.SinonStubbedInstance<Elements.StylePropertiesSection.StylePropertiesSection>;
-  let mockCssStyleDeclaration: sinon.SinonStubbedInstance<SDK.CSSStyleDeclaration.CSSStyleDeclaration>;
-  let mockMatchedStyles: sinon.SinonStubbedInstance<SDK.CSSMatchedStyles.CSSMatchedStyles>;
   let mockVariableMap: Record<string, string>;
+  let matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  let fakeComputeCSSVariable: SinonStub<
+      [style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, variableName: string],
+      SDK.CSSMatchedStyles.CSSVariableValue|null>;
+
+  async function setUpCSSModel() {
+    stubNoopSettings();
+    setMockConnectionResponseHandler('CSS.enable', () => ({}));
+    const cssModel = new SDK.CSSModel.CSSModel(createTarget());
+    await cssModel.resumeModel();
+    const domModel = cssModel.domModel();
+    const node = new SDK.DOMModel.DOMNode(domModel);
+    node.id = 0 as Protocol.DOM.NodeId;
+    LegacyUI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    return {cssModel};
+  }
 
   beforeEach(async () => {
-    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+    const computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
     stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     mockVariableMap = {
       '--a': 'red',
@@ -41,20 +57,15 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       '--empty': '',
     };
 
-    mockStylePropertiesSection = sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection);
-    mockCssStyleDeclaration = sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration);
-    mockMatchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
-    mockMatchedStyles.keyframes.returns([]);
-    mockMatchedStyles.availableCSSVariables.returns(Object.keys(mockVariableMap));
-    mockMatchedStyles.computeCSSVariable.callsFake((style, name) => {
+    matchedStyles = await getMatchedStylesWithBlankRule(
+        new SDK.CSSModel.CSSModel(createTarget()), undefined, {startLine: 0, startColumn: 0, endLine: 0, endColumn: 1});
+    sinon.stub(matchedStyles, 'availableCSSVariables').returns(Object.keys(mockVariableMap));
+    fakeComputeCSSVariable = sinon.stub(matchedStyles, 'computeCSSVariable').callsFake((style, name) => {
       return {
         value: mockVariableMap[name],
         declaration: new SDK.CSSMatchedStyles.CSSValueSource(sinon.createStubInstance(SDK.CSSProperty.CSSProperty)),
       };
     });
-    mockCssStyleDeclaration.leadingProperties.returns([]);
-    mockCssStyleDeclaration.styleSheetId = 'stylesheet-id' as Protocol.CSS.StyleSheetId;
-    mockCssStyleDeclaration.range = new TextUtils.TextRange.TextRange(0, 0, 10, 10);
 
     const workspace = Workspace.Workspace.WorkspaceImpl.instance({forceNew: true});
     const resourceMapping =
@@ -63,13 +74,18 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         {forceNew: true, resourceMapping, targetManager: SDK.TargetManager.TargetManager.instance()});
   });
 
+  function addProperty(name: string, value: string, longhandProperties: Protocol.CSS.CSSProperty[] = []) {
+    return new SDK.CSSProperty.CSSProperty(
+        matchedStyles.nodeStyles()[0], matchedStyles.nodeStyles()[0].pastLastSourcePropertyIndex(), name, value, true,
+        false, true, false, '', undefined, longhandProperties);
+  }
+
   function getTreeElement(name: string, value: string, longhandProperties: Protocol.CSS.CSSProperty[] = []) {
-    const property = new SDK.CSSProperty.CSSProperty(
-        mockCssStyleDeclaration, 0, name, value, true, false, true, false, '', undefined, longhandProperties);
+    const property = addProperty(name, value, longhandProperties);
     return new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
       stylesPane: stylesSidebarPane,
-      section: mockStylePropertiesSection,
-      matchedStyles: mockMatchedStyles,
+      section: sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection),
+      matchedStyles,
       property,
       isShorthand: longhandProperties.length > 0,
       inherited: false,
@@ -105,6 +121,36 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
          assertNullSwatchOnChildAt(3, 'devtools-css-length');
        });
 
+    it('is able to expand longhands with vars', async () => {
+      await setUpCSSModel();
+      setMockConnectionResponseHandler(
+          'CSS.getLonghandProperties', (request: Protocol.CSS.GetLonghandPropertiesRequest) => {
+            if (request.shorthandName !== 'shorthand') {
+              return {getError: () => 'Invalid shorthand'};
+            }
+            const longhands = request.value.split(' ');
+            if (longhands.length !== 3) {
+              return {getError: () => 'Invalid value'};
+            }
+            return {
+              longhandProperties: [
+                {name: 'first', value: longhands[0]},
+                {name: 'second', value: longhands[1]},
+                {name: 'third', value: longhands[2]},
+              ]
+            };
+          });
+      const stylePropertyTreeElement = getTreeElement(
+          'shorthand', 'var(--a) var(--space)',
+          [{name: 'first', value: ''}, {name: 'second', value: ''}, {name: 'third', value: ''}]);
+      await stylePropertyTreeElement.onpopulate();
+      stylePropertyTreeElement.updateTitle();
+      stylePropertyTreeElement.expand();
+      const children = stylePropertyTreeElement.children().map(
+          child => (child as Elements.StylePropertyTreeElement.StylePropertyTreeElement).valueElement?.textContent);
+      assert.deepEqual(children, ['red', 'shorter', 'hue']);
+    });
+
     describe('color-mix swatch', () => {
       it('should show color mix swatch when color-mix is used with a color', () => {
         const stylePropertyTreeElement = getTreeElement('color', 'color-mix(in srgb, red, blue)');
@@ -170,19 +216,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
          });
 
       it('shows a popover with it\'s computed color as RGB if possible', () => {
-        const cssPropertyWithColorMix = new SDK.CSSProperty.CSSProperty(
-            mockCssStyleDeclaration, 0, 'color', 'color-mix(in srgb, red 50%, yellow)', true, false, true, false, '',
-            undefined);
-        const stylePropertyTreeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
-          stylesPane: stylesSidebarPane,
-          section: mockStylePropertiesSection,
-          matchedStyles: mockMatchedStyles,
-          property: cssPropertyWithColorMix,
-          isShorthand: false,
-          inherited: false,
-          overloaded: false,
-          newProperty: true,
-        });
+        const stylePropertyTreeElement = getTreeElement('color', 'color-mix(in srgb, red 50%, yellow)');
 
         const addPopoverSpy = sinon.spy(stylesSidebarPane, 'addPopover');
         stylePropertyTreeElement.updateTitle();
@@ -196,19 +230,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       });
 
       it('shows a popover with it\'s computed color as wide gamut if necessary', () => {
-        const cssPropertyWithColorMix = new SDK.CSSProperty.CSSProperty(
-            mockCssStyleDeclaration, 0, 'color', 'color-mix(in srgb, oklch(.5 .5 .5) 50%, yellow)', true, false, true,
-            false, '', undefined);
-        const stylePropertyTreeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
-          stylesPane: stylesSidebarPane,
-          section: mockStylePropertiesSection,
-          matchedStyles: mockMatchedStyles,
-          property: cssPropertyWithColorMix,
-          isShorthand: false,
-          inherited: false,
-          overloaded: false,
-          newProperty: true,
-        });
+        const stylePropertyTreeElement = getTreeElement('color', 'color-mix(in srgb, oklch(.5 .5 .5) 50%, yellow)');
 
         const addPopoverSpy = sinon.spy(stylesSidebarPane, 'addPopover');
         stylePropertyTreeElement.updateTitle();
@@ -222,20 +244,8 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       });
 
       it('propagates updates to outer color-mixes', () => {
-        const cssPropertyWithColorMix = new SDK.CSSProperty.CSSProperty(
-            mockCssStyleDeclaration, 0, 'color', 'color-mix(in srgb, color-mix(in oklch, red, green), blue)', true,
-            false, true, false, '', undefined);
-        const stylePropertyTreeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
-          stylesPane: stylesSidebarPane,
-          section: mockStylePropertiesSection,
-          matchedStyles: mockMatchedStyles,
-          property: cssPropertyWithColorMix,
-          isShorthand: false,
-          inherited: false,
-          overloaded: false,
-          newProperty: true,
-        });
-
+        const stylePropertyTreeElement =
+            getTreeElement('color', 'color-mix(in srgb, color-mix(in oklch, red, green), blue)');
         stylePropertyTreeElement.updateTitle();
 
         const outerColorMix = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-mix-swatch');
@@ -474,9 +484,8 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
   describe('custom-properties', () => {
     it('linkifies var functions to declarations', async () => {
-      const cssCustomPropertyDef = new SDK.CSSProperty.CSSProperty(
-          mockCssStyleDeclaration, 0, '--prop', 'value', true, false, true, false, '', undefined);
-      mockMatchedStyles.computeCSSVariable.callsFake(
+      const cssCustomPropertyDef = addProperty('--prop', 'value');
+      fakeComputeCSSVariable.callsFake(
           (_, name) => name === '--prop' ? {
             value: 'computedvalue',
             declaration: new SDK.CSSMatchedStyles.CSSValueSource(cssCustomPropertyDef),
@@ -506,8 +515,9 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       assert.isTrue(addElementPopoverHook.calledOnce);
 
       const registration = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSRegisteredProperty);
-      mockMatchedStyles.getRegisteredProperty.callsFake(name => name === '--prop' ? registration : undefined);
-      mockMatchedStyles.computeCSSVariable.returns({
+      sinon.stub(matchedStyles, 'getRegisteredProperty')
+          .callsFake(name => name === '--prop' ? registration : undefined);
+      fakeComputeCSSVariable.returns({
         value: 'computedvalue',
         declaration: new SDK.CSSMatchedStyles.CSSValueSource(sinon.createStubInstance(SDK.CSSProperty.CSSProperty)),
       });
@@ -523,7 +533,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     });
 
     it('linkifies var functions to initial-value registrations', async () => {
-      mockMatchedStyles.computeCSSVariable.returns({
+      fakeComputeCSSVariable.returns({
         value: 'computedvalue',
         declaration: new SDK.CSSMatchedStyles.CSSValueSource(
             sinon.createStubInstance(SDK.CSSMatchedStyles.CSSRegisteredProperty, {propertyName: '--prop'})),
@@ -689,81 +699,11 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     });
   });
 
-  function setUpStyles(
-      cssModel: SDK.CSSModel.CSSModel,
-      cssProperties: {name: string, value: string}[],
-      styleSheetId = '0' as Protocol.CSS.StyleSheetId,
-      origin = Protocol.CSS.StyleSheetOrigin.Regular,
-      selector = 'div',
-      ): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles> {
-    const matchedPayload: Protocol.CSS.RuleMatch[] = [{
-      rule: {
-        selectorList: {selectors: [{text: selector}], text: selector},
-        origin,
-        style: {cssProperties, shorthandEntries: []},
-      },
-      matchingSelectors: [0],
-    }];
-    if (cssModel.styleSheetHeaderForId(styleSheetId)) {
-      cssModel.styleSheetRemoved(styleSheetId);
-    }
-    cssModel.styleSheetAdded({
-      styleSheetId,
-      frameId: '' as Protocol.Page.FrameId,
-      sourceURL: '',
-      origin,
-      title: '',
-      disabled: false,
-      isInline: false,
-      isMutable: false,
-      isConstructed: false,
-      startLine: 0,
-      startColumn: 0,
-      length: 0,
-      endLine: 0,
-      endColumn: 0,
-    });
-    const node = sinon.createStubInstance(SDK.DOMModel.DOMNode);
-    node.id = 0 as Protocol.DOM.NodeId;
-    return SDK.CSSMatchedStyles.CSSMatchedStyles.create({
-      cssModel,
-      node,
-      inlinePayload: null,
-      attributesPayload: null,
-      matchedPayload,
-      pseudoPayload: [],
-      inheritedPayload: [],
-      inheritedPseudoPayload: [],
-      animationsPayload: [],
-      parentLayoutNodeId: undefined,
-      positionTryRules: [],
-      propertyRules: [],
-      cssPropertyRegistrations: [],
-      activePositionFallbackIndex: -1,
-      fontPaletteValuesRule: undefined,
-    });
-  }
-
   describe('VariableRenderer', () => {
     it('computes the text for var()s correctly', async () => {
-      const cssModel = new SDK.CSSModel.CSSModel(createTarget());
-
       async function matchProperty(value: string, name = 'color') {
-        const matchedStyles = await setUpStyles(cssModel, [
-          {name: '--blue', value: 'blue'},
-          {name, value},
-        ]);
-        const property = matchedStyles.nodeStyles()[0].leadingProperties()[1];
-        const stylePropertyTreeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
-          stylesPane: stylesSidebarPane,
-          section: mockStylePropertiesSection,
-          matchedStyles,
-          property,
-          isShorthand: false,
-          inherited: false,
-          overloaded: false,
-          newProperty: true,
-        });
+        addProperty('--blue', 'blue');
+        const stylePropertyTreeElement = getTreeElement(name, value);
 
         const ast =
             SDK.CSSPropertyParser.tokenizeDeclaration(stylePropertyTreeElement.name, stylePropertyTreeElement.value);
@@ -1246,7 +1186,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         };
       });
       const model = new Elements.StylePropertyTreeElement.ShadowModel(
-          Elements.PropertyMatchers.ShadowType.BOX_SHADOW, properties, renderingContext);
+          SDK.CSSPropertyParserMatchers.ShadowType.BOX_SHADOW, properties, renderingContext);
 
       const container = document.createElement('div');
       model.renderContents(container);
@@ -1452,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');
@@ -1569,23 +1509,15 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     });
   });
 
-  describe('LengthRenderer', () => {
-    it('renders the length tool', () => {
-      const stylePropertyTreeElement = getTreeElement('width', '100px');
-      stylePropertyTreeElement.updateTitle();
-      const swatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-length');
-      assert.exists(swatch);
-    });
-  });
-
   describe('CSSWideKeywordRenderer', () => {
     function mockResolvedKeyword(propertyName: string, keyword: SDK.CSSMetadata.CSSWideKeyword, propertyValue = ''):
         sinon.SinonStubbedInstance<SDK.CSSProperty.CSSProperty> {
       const originalDeclaration = sinon.createStubInstance(SDK.CSSProperty.CSSProperty);
-      mockMatchedStyles.resolveGlobalKeyword.callsFake(
-          (property, keyword) => property.name === propertyName && property.value === keyword ?
-              new SDK.CSSMatchedStyles.CSSValueSource(originalDeclaration) :
-              null);
+      sinon.stub(matchedStyles, 'resolveGlobalKeyword')
+          .callsFake(
+              (property, keyword) => property.name === propertyName && property.value === keyword ?
+                  new SDK.CSSMatchedStyles.CSSValueSource(originalDeclaration) :
+                  null);
       originalDeclaration.name = propertyName;
       originalDeclaration.value = propertyValue;
       originalDeclaration.ownerStyle = sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration);
@@ -1625,8 +1557,8 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
   describe('PositionTryRenderer', () => {
     it('renders the position-try fallback values with correct styles', () => {
-      mockMatchedStyles.activePositionFallbackIndex.returns(1);
-      mockMatchedStyles.positionTryRules.returns([]);
+      sinon.stub(matchedStyles, 'activePositionFallbackIndex').returns(1);
+      sinon.stub(matchedStyles, 'positionTryRules').returns([]);
       const stylePropertyTreeElement = getTreeElement('position-try-fallbacks', '--top, --left, --bottom');
       stylePropertyTreeElement.updateTitle();
       const values =
@@ -1634,14 +1566,14 @@ 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', () => {
-      mockMatchedStyles.activePositionFallbackIndex.returns(1);
-      mockMatchedStyles.positionTryRules.returns([]);
+      sinon.stub(matchedStyles, 'activePositionFallbackIndex').returns(1);
+      sinon.stub(matchedStyles, 'positionTryRules').returns([]);
       const stylePropertyTreeElement =
           getTreeElement('position-try', '/* comment */ most-height --top, --left, --bottom');
       stylePropertyTreeElement.updateTitle();
@@ -1650,25 +1582,92 @@ 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'));
+    });
+  });
+
+  describe('LengthRenderer', () => {
+    it('shows a popover with pixel values for relative units', async () => {
+      await setUpCSSModel();
+      setMockConnectionResponseHandler(
+          'CSS.resolveValues',
+          (request: Protocol.CSS.ResolveValuesRequest) =>
+              ({results: request.values.map(v => v === '2em' ? '15px' : v)}));
+      const cssModel = new SDK.CSSModel.CSSModel(createTarget());
+      const domModel = cssModel.domModel();
+      const node = new SDK.DOMModel.DOMNode(domModel);
+      node.id = 0 as Protocol.DOM.NodeId;
+      LegacyUI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+      const stylePropertyTreeElement = getTreeElement('margin', '5px 2em');
+      const addPopoverPromise = Promise.withResolvers<() => HTMLElement | undefined>();
+      sinon.stub(stylePropertyTreeElement.parentPane(), 'addPopover')
+          .callsFake((element, popover) => addPopoverPromise.resolve(popover.contents));
+      setMockConnectionResponseHandler('CSS.getComputedStyleForNode', () => ({computedStyle: {}}));
+
+      await stylePropertyTreeElement.onpopulate();
+      stylePropertyTreeElement.updateTitle();
+      const popover = (await addPopoverPromise.promise)();
+      assert.strictEqual(popover?.textContent, '15px');
+    });
+  });
+
+  describe('SelectFunctionRenderer', () => {
+    it('strikes out non-selected values', async () => {
+      await setUpCSSModel();
+      setMockConnectionResponseHandler(
+          'CSS.resolveValues',
+          (request: Protocol.CSS.ResolveValuesRequest) => ({
+            results: request.values.map(
+                value => value.startsWith('min') ? '4px' : value.trim().replaceAll(/(em|pt)$/g, 'px'))
+          }));
+      const strikeOutSpy =
+          sinon.spy(Elements.StylePropertyTreeElement.SelectFunctionRenderer.prototype, 'applySelectFunction');
+      const stylePropertyTreeElement = getTreeElement('width', 'min(5em, 4px, 8pt)');
+      stylePropertyTreeElement.updateTitle();
+
+      assert.isTrue(strikeOutSpy.calledOnce);
+      await strikeOutSpy.returnValues[0];
+      const args =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLSpanElement>;
+      assert.lengthOf(args, 3);
+      assert.deepEqual(
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [true, false, true]);
+    });
+  });
+
+  describe('AutoBaseRenderer', () => {
+    it('strikes out non-selected values', async () => {
+      await setUpCSSModel();
+
+      const stylePropertyTreeElement = getTreeElement('display', '-internal-auto-base(inline, block)');
+
+      stylePropertyTreeElement.updateTitle();
+
+      let args = stylePropertyTreeElement.valueElement?.querySelectorAll('span') as NodeListOf<HTMLSpanElement>;
+      assert.lengthOf(args, 3);
+      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.classList.contains('inactive-value')), [false, true, false]);
     });
   });
 
   describe('Autocompletion', function(this: Mocha.Suite) {
     let promptStub: sinon.SinonStub<Parameters<Elements.StylesSidebarPane.CSSPropertyPrompt['initialize']>>;
     beforeEach(async () => {
-      stubNoopSettings();
       promptStub = sinon.stub(Elements.StylesSidebarPane.CSSPropertyPrompt.prototype, 'initialize').resolves([]);
-      setMockConnectionResponseHandler('CSS.enable', () => ({}));
 
-      const cssModel = new SDK.CSSModel.CSSModel(createTarget());
-      await cssModel.resumeModel();
-      const domModel = cssModel.domModel();
-      const gridNode = new SDK.DOMModel.DOMNode(domModel);
-      gridNode.id = 0 as Protocol.DOM.NodeId;
-      const currentNode = new SDK.DOMModel.DOMNode(domModel);
+      const {cssModel} = await setUpCSSModel();
+      const gridNode = LegacyUI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+      const currentNode = new SDK.DOMModel.DOMNode(cssModel.domModel());
       currentNode.id = 1 as Protocol.DOM.NodeId;
       currentNode.parentNode = gridNode;
       LegacyUI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, currentNode);