chrome-devtools-frontend 1.0.1571573 → 1.0.1573331

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -3,38 +3,26 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ComputedStyleWidget} from './ComputedStyleWidget.js';
-import {StylesSidebarPane} from './StylesSidebarPane.js';
 
+/**
+ * A thin wrapper around the CSS Model to gather up changes in CSS files that
+ * could impact a node's computed styles.
+ * Callers are expected to initiate tracking of the Node themselves via the CSS
+ * Model trackComputedStyleUpdatesForNode method.
+ */
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #node: SDK.DOMModel.DOMNode|null;
   #cssModel: SDK.CSSModel.CSSModel|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
-  private currentTrackedNodeId?: number;
 
   constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
     this.#cssModel = null;
     this.eventListeners = [];
     this.#node = node ?? null;
-
-    UI.Context.Context.instance().addFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-  }
-
-  dispose(): void {
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
   }
 
   get node(): SDK.DOMModel.DOMNode|null {
@@ -45,48 +33,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     this.#node = node;
     this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
     this.onCSSModelChanged(null);
-    this.evaluateTrackingComputedStyleUpdatesForNode();
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
-  // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
-  // For that case, we want to only run this function once.
-  private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
-    if (!this.#node) {
-      // There isn't a node selected now, so let's stop tracking computed style updates for the previously tracked node.
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
-    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
-    const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
-        (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
-    // There is a selected node but not the computed style widget nor the styles tab is visible.
-    // If there is a previously tracked node let's stop tracking computed style updates for that node.
-    if (!shouldTrackComputedStyleUpdates) {
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    // Either computed style widget or styles tab is visible
-    // if the currently tracked node id is not the same as the selected node
-    // let's start tracking the currently selected node.
-    if (this.currentTrackedNodeId !== this.#node.id) {
-      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.#node.id);
-      this.currentTrackedNodeId = this.#node.id;
-    }
-  }, 100);
-
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -95,6 +47,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     this.#cssModel = cssModel;
     const domModel = cssModel ? cssModel.domModel() : null;
     const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
+
     if (cssModel && domModel && resourceTreeModel) {
       this.eventListeners = [
         cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),

package/front_end/panels/elements/ElementsPanel.ts

@@ -199,6 +199,8 @@ const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement =>
 
 let elementsPanelInstance: ElementsPanel;
 
+export const DEFAULT_COMPUTED_STYLES_DEBOUNCE_MS = 100;
+
 export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.Searchable,
                                                              SDK.TargetManager.SDKModelObserver<SDK.DOMModel.DOMModel>,
                                                              UI.View.ViewLocationResolver {
@@ -240,6 +242,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
+  #computedStyleModel: ComputedStyleModel;
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
@@ -263,7 +266,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       this.initializeFullAccessibilityTreeView();
     }
     this.mainContainer.appendChild(this.domTreeContainer);
@@ -299,13 +302,20 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    const computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    this.#computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, event => {
-      computedStyleModel.node = event.data;
+      this.#computedStyleModel.node = event.data;
+      this.evaluateTrackingComputedStyleUpdatesForNode();
     });
-    this.stylesWidget = new StylesSidebarPane(computedStyleModel);
-    this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
-    this.metricsWidget = new MetricsSidebarPane(computedStyleModel);
+
+    UI.Context.Context.instance().addFlavorChangeListener(
+        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+
+    this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
+    this.computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
     Common.Settings.Settings.instance()
         .moduleSetting('sidebar-position')
@@ -346,6 +356,23 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
+  // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
+  // For that case, we want to only run this function once.
+  private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
+    const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    if (!selectedNode) {
+      return;
+    }
+
+    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
+    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
+    const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
+        (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
+
+    void selectedNode.domModel()?.cssModel()?.trackComputedStyleUpdatesForNode(
+        shouldTrackComputedStyleUpdates ? selectedNode.id : undefined);
+  }, 100);
+
   private handleElementExpanded(): void {
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -606,7 +606,7 @@ export class ElementsTreeOutline extends
                 return html`
                   <div class="squiggles-content-item">
                   <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
-                  <x-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</x-link>
+                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
                   <span>${elementIssueDetails.tooltip}</span>
                   </div>`;})}
             </div>`, popover.contentElement);

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -128,6 +128,7 @@ export class StylePropertiesSection {
   readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   private computedStyles: Map<string, string>|null;
   private parentsComputedStyles: Map<string, string>|null;
+  private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   editable: boolean;
   private hoverTimer: number|null = null;
   private willCauseCancelEditing = false;
@@ -168,7 +169,8 @@ export class StylePropertiesSection {
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null, customHeaderText?: string) {
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null, customHeaderText?: string) {
     this.#customHeaderText = customHeaderText;
     this.parentPane = parentPane;
     this.sectionIdx = sectionIdx;
@@ -176,6 +178,7 @@ export class StylePropertiesSection {
     this.matchedStyles = matchedStyles;
     this.computedStyles = computedStyles;
     this.parentsComputedStyles = parentsComputedStyles;
+    this.computedStyleExtraFields = computedStyleExtraFields;
     this.editable = Boolean(style.styleSheetId && style.range);
     this.originalPropertiesCount = style.leadingProperties().length;
     this.customPopulateCallback = () => this.populateStyle(this.styleInternal, this.propertiesTreeOutline);
@@ -257,7 +260,7 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.editable) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.editable) {
       this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
       this.fontEditorSectionManager = new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(), this);
       this.fontEditorButton =
@@ -330,6 +333,10 @@ export class StylePropertiesSection {
     this.parentsComputedStyles = parentsComputedStyles;
   }
 
+  setComputedStyleExtraFields(computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): void {
+    this.computedStyleExtraFields = computedStyleExtraFields;
+  }
+
   updateAuthoringHint(): void {
     let child = this.propertiesTreeOutline.firstChild();
     while (child) {
@@ -1165,6 +1172,7 @@ export class StylePropertiesSection {
       });
       item.setComputedStyles(this.computedStyles);
       item.setParentsComputedStyles(this.parentsComputedStyles);
+      item.setComputedStyleExtraFields(this.computedStyleExtraFields);
       parent.appendChild(item);
     }
 
@@ -1677,7 +1685,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
       insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null, null);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetHeader = styleSheetHeader;
@@ -1779,7 +1787,7 @@ export class RegisteredPropertiesSection extends StylePropertiesSection {
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, propertyName: string,
       expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null, propertyName);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null, propertyName);
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
     }
@@ -1814,7 +1822,7 @@ export class FunctionRuleSection extends StylePropertiesSection {
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, children: SDK.CSSRule.CSSNestedStyle[], sectionIdx: number,
       functionName: string, expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null, functionName);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null, functionName);
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
     }
@@ -1876,7 +1884,7 @@ export class AtRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'font-palette-values-key';
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
@@ -1888,7 +1896,7 @@ export class PositionTryRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, active: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'position-try-values-key';
     this.propertiesTreeOutline.element.classList.toggle('no-affect', !active);
   }
@@ -1898,7 +1906,7 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -170,7 +171,8 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
   // clang-format on
   constructor(
       readonly treeElement: StylePropertyTreeElement|null,
-      readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, readonly computedStyles: Map<string, string>) {
+      readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, readonly computedStyles: Map<string, string>,
+      readonly computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
   }
   override render(match: SDK.CSSPropertyParserMatchers.EnvFunctionMatch, context: RenderingContext): Node[] {
@@ -187,7 +189,8 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
 
     const span = document.createElement('span');
     const func =
-        this.treeElement?.getTracingTooltip('env', match.node, this.matchedStyles, this.computedStyles, context) ??
+        this.treeElement?.getTracingTooltip(
+            'env', match.node, this.matchedStyles, this.computedStyles, this.computedStyleExtraFields, context) ??
         'env';
     const valueClass = classMap({'inactive-value': !match.varNameIsValid});
     const fallbackClass = classMap({'inactive-value': match.varNameIsValid});
@@ -315,14 +318,17 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   constructor(
       stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
     this.#treeElement = treeElement;
     this.#stylesPane = stylesPane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.VariableMatch, context: RenderingContext): Node[] {
@@ -343,7 +349,8 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
             {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),
+                declaration.name, declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles,
+                this.#computedStyleExtraFields),
             substitution);
         cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
         return nodes;
@@ -355,8 +362,8 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
 
     const renderedFallback = match.fallback ? Renderer.render(match.fallback, context) : undefined;
 
-    const varCall =
-        this.#treeElement?.getTracingTooltip('var', match.node, this.#matchedStyles, this.#computedStyles, context);
+    const varCall = this.#treeElement?.getTracingTooltip(
+        'var', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields, context);
     const tooltipContents =
         this.#stylesPane.getVariablePopoverContents(this.#matchedStyles, match.name, variableValue ?? null);
     const tooltipId = this.#treeElement?.getTooltipId('custom-property-var');
@@ -427,14 +434,17 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   constructor(
       stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
     this.#treeElement = treeElement;
     this.#stylesPane = stylesPane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.AttributeMatch, context: RenderingContext): Node[] {
@@ -473,7 +483,8 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
             .renderValueNodes(
                 {name: '--property', value: match.substitutionText}, matching,
                 getPropertyRenderers(
-                    '--property', match.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+                    '--property', match.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles,
+                    this.#computedStyleExtraFields),
                 substitution)
             .nodes;
       }
@@ -481,8 +492,8 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
 
     const renderedFallback = match.fallback ? Renderer.render(match.fallback, context) : undefined;
 
-    const attrCall =
-        this.#treeElement?.getTracingTooltip('attr', match.node, this.#matchedStyles, this.#computedStyles, context);
+    const attrCall = this.#treeElement?.getTracingTooltip(
+        'attr', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields, context);
     const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
     const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
@@ -636,7 +647,7 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
         html`${
             this.#treeElement?.getTracingTooltip(
                 func, match.node, this.#treeElement.matchedStyles(), this.#treeElement.getComputedStyles() ?? new Map(),
-                renderingContext) ??
+                this.#treeElement.getComputedStyleExtraFields(), renderingContext) ??
             func}${nodes}`,
         valueChild);
 
@@ -871,15 +882,18 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   readonly #pane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   readonly #treeElement: StylePropertyTreeElement|null;
 
   constructor(
       pane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, treeElement: StylePropertyTreeElement|null) {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      treeElement: StylePropertyTreeElement|null) {
     super();
     this.#pane = pane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
     this.#treeElement = treeElement;
   }
 
@@ -915,7 +929,8 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     render(
         html`${
             this.#treeElement?.getTracingTooltip(
-                'color-mix', match.node, this.#matchedStyles, this.#computedStyles, context) ??
+                'color-mix', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields,
+                context) ??
             'color-mix'}(${Renderer.render(match.space, childRenderingContexts[0]).nodes}, ${color1.nodes}, ${
             color2.nodes})`,
         contentChild);
@@ -1190,12 +1205,13 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
 
 // clang-format off
 export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AutoBaseMatch) {
-  readonly #computedStyle: Map<string, string>;
+  readonly #computedStyleExtraFields : Protocol.CSS.ComputedStyleExtraFields|null;
   // clang-format on
 
-  constructor(computedStyle: Map<string, string>) {
+  constructor(
+      computedStyle: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
-    this.#computedStyle = computedStyle;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.AutoBaseMatch, context: RenderingContext): Node[] {
@@ -1209,8 +1225,9 @@ export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     Renderer.renderInto(match.auto, context, auto);
     Renderer.renderInto(match.base, context, base);
 
-    const activeAppearance = this.#computedStyle.get('appearance');
-    if (activeAppearance?.startsWith('base')) {
+    // TODO(crbug.com/475522248): Consider cases with nested elements which
+    // support base appearance and ensure the logic matches StyleAdjuster in blink.
+    if (this.#computedStyleExtraFields?.isAppearanceBase) {
       auto.classList.add('inactive-value');
     } else {
       base.classList.add('inactive-value');
@@ -1668,14 +1685,17 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   readonly #stylesPane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #propertyName: string;
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, propertyName: string, treeElement: StylePropertyTreeElement|null) {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      propertyName: string, treeElement: StylePropertyTreeElement|null) {
     super();
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
     this.#stylesPane = stylesPane;
     this.#treeElement = treeElement;
     this.#propertyName = propertyName;
@@ -1694,7 +1714,8 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     render(
         html`${
             this.#treeElement?.getTracingTooltip(
-                match.func, match.node, this.#matchedStyles, this.#computedStyles, context) ??
+                match.func, match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields,
+                context) ??
             match.func}(${renderedArgs.map((arg, idx) => idx === 0 ? [arg] : [html`, `, arg]).flat()})`,
         span);
 
@@ -1911,11 +1932,12 @@ export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatch
 export function getPropertyRenderers(
     propertyName: string, style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, stylesPane: StylesSidebarPane,
     matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, treeElement: StylePropertyTreeElement|null,
-    computedStyles: Map<string, string>): Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
+    computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null):
+    Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
   return [
-    new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
+    new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new ColorRenderer(stylesPane, treeElement),
-    new ColorMixRenderer(stylesPane, matchedStyles, computedStyles, treeElement),
+    new ColorMixRenderer(stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, treeElement),
     new URLRenderer(style.parentRule, stylesPane.node()),
     new AngleRenderer(treeElement),
     new LinkableNameRenderer(matchedStyles, stylesPane),
@@ -1929,15 +1951,17 @@ export function getPropertyRenderers(
     new AnchorFunctionRenderer(stylesPane),
     new PositionAnchorRenderer(stylesPane),
     new FlexGridRenderer(stylesPane, treeElement),
-    new EnvFunctionRenderer(treeElement, matchedStyles, computedStyles),
+    new EnvFunctionRenderer(treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new PositionTryRenderer(matchedStyles),
     new LengthRenderer(stylesPane, propertyName, treeElement),
-    new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
-    new CustomFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
-    new AutoBaseRenderer(computedStyles),
+    new MathFunctionRenderer(
+        stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
+    new CustomFunctionRenderer(
+        stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
+    new AutoBaseRenderer(computedStyles, computedStyleExtraFields),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
-    new AttributeRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
+    new AttributeRenderer(stylesPane, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
   ];
 }
 
@@ -1962,6 +1986,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private lastComputedValue: string|null = null;
   private computedStyles: Map<string, string>|null = null;
   private parentsComputedStyles: Map<string, string>|null = null;
+  private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null = null;
   private contextForTest!: Context|undefined;
   #gridNames: Set<string>|undefined = undefined;
   #tooltipKeyCounts = new Map<string, number>();
@@ -2070,6 +2095,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return this.computedStyles;
   }
 
+  setComputedStyleExtraFields(computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): void {
+    this.computedStyleExtraFields = computedStyleExtraFields;
+  }
+
+  getComputedStyleExtraFields(): Protocol.CSS.ComputedStyleExtraFields|null {
+    return this.computedStyleExtraFields;
+  }
+
   setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
     this.parentsComputedStyles = parentsComputedStyles;
   }
@@ -2345,10 +2378,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const renderers = this.property.parsedOk ?
         getPropertyRenderers(
-            this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
+            this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map(),
+            this.getComputedStyleExtraFields()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
       renderers.push(new FontRenderer(this));
     }
     this.listItemElement.removeChildren();
@@ -2544,7 +2578,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   getTracingTooltip(
       functionName: string, node: CodeMirror.SyntaxNode, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, context: RenderingContext): Lit.TemplateResult {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      context: RenderingContext): Lit.TemplateResult {
     if (context.tracing || !context.property) {
       return html`${functionName}`;
     }
@@ -2569,7 +2604,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
                   ?.showTrace(
                     property, text, matchedStyles, computedStyles,
                     getPropertyRenderers(property.name,
-                      property.ownerStyle, stylesPane, matchedStyles, null, computedStyles),
+                      property.ownerStyle, stylesPane, matchedStyles, null, computedStyles, computedStyleExtraFields),
                     expandPercentagesInShorthands, shorthandPositionOffset, this.openedViaHotkey);
               }
             }}