chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -47,6 +47,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
 
   constructor() {
     super(true);
+    this.registerRequiredCSS(classesPaneWidgetStyles);
     this.contentElement.className = 'styles-element-classes-pane';
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('elements-classes')}`);
     const container = this.contentElement.createChild('div', 'title-container');
@@ -154,10 +155,9 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   override wasShown(): void {
     super.wasShown();
     this.update();
-    this.registerCSSFiles([classesPaneWidgetStyles]);
   }
 
-  override update(): void {
+  update(): void {
     if (!this.isShowing()) {
       return;
     }

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

@@ -0,0 +1,63 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import {describeWithEnvironment, setupActionRegistry} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {getMatchedStyles} from '../../testing/StyleHelpers.js';
+import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
+import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
+
+import * as Elements from './elements.js';
+
+describeWithMockConnection('ColorSwatchPopoverIcon', () => {
+  describeWithEnvironment('', () => {
+    setupActionRegistry();
+    beforeEach(() => {
+      const workspace = Workspace.Workspace.WorkspaceImpl.instance({forceNew: true});
+      const resourceMapping =
+          new Bindings.ResourceMapping.ResourceMapping(SDK.TargetManager.TargetManager.instance(), workspace);
+      Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance(
+          {forceNew: true, resourceMapping, targetManager: SDK.TargetManager.TargetManager.instance()});
+    });
+    it('correctly reports changed colors with custom property color names', async () => {
+      const property = new SDK.CSSProperty.CSSProperty(
+          sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration), 0, 'color', 'red', true, false, true,
+          false, '', undefined, []);
+      const treeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
+        stylesPane:
+            new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel()),
+        section: sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection),
+        matchedStyles: await getMatchedStyles(),
+        property,
+        isShorthand: false,
+        inherited: false,
+        overloaded: false,
+        newProperty: true,
+      });
+
+      const helper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
+      const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
+      swatch.setColor(Common.Color.parse('red')!);
+      const showPopoverStub = sinon.stub(helper, 'show');
+      const icon = new Elements.ColorSwatchPopoverIcon.ColorSwatchPopoverIcon(treeElement, helper, swatch);
+      const iconColorChanged = sinon.stub<[Common.EventTarget.EventTargetEvent<
+          Common.Color.Color, Elements.ColorSwatchPopoverIcon.ColorSwatchPopoverIconEventTypes>]>();
+      icon.addEventListener(
+          Elements.ColorSwatchPopoverIcon.ColorSwatchPopoverIconEvents.COLOR_CHANGED, iconColorChanged);
+      icon.showPopover();
+      assert.isTrue(showPopoverStub.calledOnce);
+      const spectrum = showPopoverStub.args[0][0];
+      assert.instanceOf(spectrum, ColorPicker.Spectrum.Spectrum);
+      sinon.stub(spectrum, 'colorName').returns('--yellow');
+      spectrum.dispatchEventToListeners(ColorPicker.Spectrum.Events.COLOR_CHANGED, 'yellow');
+      assert.isTrue(iconColorChanged.calledOnce);
+      assert.strictEqual(iconColorChanged.args[0][0].data.asString(), '#ffff00');
+      assert.strictEqual(iconColorChanged.args[0][0].data.getAuthoredText(), 'var(--yellow)');
+    });
+  });
+});

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -117,9 +117,9 @@ export const enum ColorSwatchPopoverIconEvents {
   COLOR_CHANGED = 'colorchanged',
 }
 
-export type ColorSwatchPopoverIconEventTypes = {
-  [ColorSwatchPopoverIconEvents.COLOR_CHANGED]: string,
-};
+export interface ColorSwatchPopoverIconEventTypes {
+  [ColorSwatchPopoverIconEvents.COLOR_CHANGED]: Common.Color.Color;
+}
 
 export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<ColorSwatchPopoverIconEventTypes> {
   private treeElement: StylePropertyTreeElement;
@@ -223,26 +223,52 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
   }
 
   private async spectrumChanged(event: Common.EventTarget.EventTargetEvent<string>): Promise<void> {
-    const color = Common.Color.parse(event.data);
+    const getColor = (colorText: string): Common.Color.Color|null => {
+      const color = Common.Color.parse(colorText);
+      const customProperty = this.spectrum?.colorName()?.startsWith('--') && `var(${this.spectrum.colorName()})`;
+      if (!color || !customProperty) {
+        return color;
+      }
+      if (color.is(Common.Color.Format.HEX) || color.is(Common.Color.Format.HEXA) ||
+          color.is(Common.Color.Format.RGB) || color.is(Common.Color.Format.RGBA)) {
+        return new Common.Color.Legacy(color.rgba(), color.format(), customProperty);
+      }
+      if (color.is(Common.Color.Format.HSL)) {
+        return new Common.Color.HSL(color.h, color.s, color.l, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.HWB)) {
+        return new Common.Color.HWB(color.h, color.w, color.b, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.LCH)) {
+        return new Common.Color.LCH(color.l, color.c, color.h, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.OKLCH)) {
+        return new Common.Color.Oklch(color.l, color.c, color.h, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.LAB)) {
+        return new Common.Color.Lab(color.l, color.a, color.b, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.OKLAB)) {
+        return new Common.Color.Oklab(color.l, color.a, color.b, color.alpha, customProperty);
+      }
+      if (color.is(Common.Color.Format.SRGB) || color.is(Common.Color.Format.SRGB_LINEAR) ||
+          color.is(Common.Color.Format.DISPLAY_P3) || color.is(Common.Color.Format.A98_RGB) ||
+          color.is(Common.Color.Format.PROPHOTO_RGB) || color.is(Common.Color.Format.REC_2020) ||
+          color.is(Common.Color.Format.XYZ) || color.is(Common.Color.Format.XYZ_D50) ||
+          color.is(Common.Color.Format.XYZ_D65)) {
+        return new Common.Color.ColorFunction(
+            color.colorSpace, color.p0, color.p1, color.p2, color.alpha, customProperty);
+      }
+      throw new Error(`Forgot to handle color format ${color.format()}`);
+    };
+
+    const color = getColor(event.data);
     if (!color) {
       return;
     }
 
-    const colorName = this.spectrum ? this.spectrum.colorName() : undefined;
-    const text =
-        colorName && colorName.startsWith('--') ? `var(${colorName})` : (color.getAuthoredText() ?? color.asString());
-
     this.swatch.renderColor(color);
-    const value = this.swatch.firstElementChild;
-    if (value) {
-      value.remove();
-      this.swatch.createChild('span').textContent = text;
-    }
-
-    // `asString` somehow can return null.
-    if (text) {
-      this.dispatchEventToListeners(ColorSwatchPopoverIconEvents.COLOR_CHANGED, text);
-    }
+    this.dispatchEventToListeners(ColorSwatchPopoverIconEvents.COLOR_CHANGED, color);
   }
 
   private onScroll(_event: Event): void {

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -196,10 +196,10 @@ export const enum Events {
 export type CSSModelChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|SDK.CSSModel.StyleSheetChangedEvent|
                                    SDK.CSSModel.PseudoStateForcedEvent|null|void;
 
-export type EventTypes = {
-  [Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent,
-  [Events.COMPUTED_STYLE_CHANGED]: void,
-};
+export interface EventTypes {
+  [Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent;
+  [Events.COMPUTED_STYLE_CHANGED]: void;
+}
 
 export class ComputedStyle {
   node: SDK.DOMModel.DOMNode;

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

@@ -0,0 +1,153 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
+
+import * as Elements from './elements.js';
+
+async function waitForTraceElement(treeOutline: TreeOutline.TreeOutline.TreeOutline<unknown>): Promise<HTMLElement> {
+  const element = treeOutline.shadowRoot?.querySelector('devtools-computed-style-trace');
+  if (element) {
+    return element;
+  }
+
+  return new Promise<HTMLElement>(resolve => {
+    requestAnimationFrame(async () => {
+      const result = await waitForTraceElement(treeOutline);
+      resolve(result);
+    });
+  });
+}
+
+describeWithMockConnection('ComputedStyleWidget', () => {
+  let computedStyleWidget: Elements.ComputedStyleWidget.ComputedStyleWidget;
+  afterEach(() => {
+    computedStyleWidget.detach();
+  });
+
+  describe('trace element', () => {
+    function createComputedStyleWidgetForTest(
+        cssStyleDeclarationType: SDK.CSSStyleDeclaration.Type, cssStyleDeclarationName?: string,
+        parentRule?: SDK.CSSRule.CSSRule): Elements.ComputedStyleWidget.ComputedStyleWidget {
+      const node = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+      node.id = 1 as Protocol.DOM.NodeId;
+
+      const stubCSSStyle = {
+        styleSheetId: 'STYLE_SHEET_ID' as Protocol.CSS.StyleSheetId,
+        cssProperties: [{
+          name: 'color',
+          value: 'red',
+          disabled: false,
+          implicit: false,
+          longhandProperties: [],
+          range: {startLine: 1, startColumn: 4, endLine: 1, endColumn: 20},
+          text: 'color: red;',
+        }],
+        shorthandEntries: [],
+      } as Protocol.CSS.CSSStyle;
+
+      const cssMatchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles, {
+        node,
+        propertyState: SDK.CSSMatchedStyles.PropertyState.ACTIVE,
+        nodeStyles: [
+          new SDK.CSSStyleDeclaration.CSSStyleDeclaration(
+              {} as SDK.CSSModel.CSSModel, parentRule ?? null, stubCSSStyle, cssStyleDeclarationType,
+              cssStyleDeclarationName),
+        ]
+      });
+
+      const computedStyleModel = sinon.createStubInstance(Elements.ComputedStyleModel.ComputedStyleModel, {
+        fetchComputedStyle: Promise.resolve({node, computedStyle: new Map([['color', 'red']])}),
+        cssModel: sinon.createStubInstance(
+            SDK.CSSModel.CSSModel, {cachedMatchedCascadeForNode: Promise.resolve(cssMatchedStyles)}),
+        node,
+      });
+      const computedStyleWidget = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
+      computedStyleWidget.markAsRoot();
+      computedStyleWidget.show(document.body);
+
+      return computedStyleWidget;
+    }
+
+    it('renders trace element with correct selector for declarations coming from animations', async () => {
+      computedStyleWidget =
+          createComputedStyleWidgetForTest(SDK.CSSStyleDeclaration.Type.Animation, '--animation-name');
+
+      computedStyleWidget.update();
+      await computedStyleWidget.updateComplete;
+
+      const treeOutline = computedStyleWidget.contentElement.querySelector('devtools-tree-outline') as
+          TreeOutline.TreeOutline.TreeOutline<unknown>;
+      await treeOutline.expandRecursively(2);
+
+      const traceElement = await waitForTraceElement(treeOutline);
+      const traceSelector = traceElement.shadowRoot?.querySelector('.trace-selector');
+      assert.strictEqual(traceSelector?.textContent, '--animation-name animation');
+    });
+
+    it('renders trace element with correct selector for declarations coming from WAAPI animations', async () => {
+      computedStyleWidget = createComputedStyleWidgetForTest(SDK.CSSStyleDeclaration.Type.Animation);
+
+      computedStyleWidget.update();
+      await computedStyleWidget.updateComplete;
+
+      const treeOutline = computedStyleWidget.contentElement.querySelector('devtools-tree-outline') as
+          TreeOutline.TreeOutline.TreeOutline<unknown>;
+      await treeOutline.expandRecursively(2);
+
+      const traceElement = await waitForTraceElement(treeOutline);
+      const traceSelector = traceElement.shadowRoot?.querySelector('.trace-selector');
+      assert.strictEqual(traceSelector?.textContent, 'animation style');
+    });
+
+    it('renders trace element with correct selector for declarations transitions', async () => {
+      computedStyleWidget = createComputedStyleWidgetForTest(SDK.CSSStyleDeclaration.Type.Transition);
+
+      computedStyleWidget.update();
+      await computedStyleWidget.updateComplete;
+
+      const treeOutline = computedStyleWidget.contentElement.querySelector('devtools-tree-outline') as
+          TreeOutline.TreeOutline.TreeOutline<unknown>;
+      await treeOutline.expandRecursively(2);
+
+      const traceElement = await waitForTraceElement(treeOutline);
+      const traceSelector = traceElement.shadowRoot?.querySelector('.trace-selector');
+      assert.strictEqual(traceSelector?.textContent, 'transitions style');
+    });
+
+    it('renders trace element with correct selector for declarations coming from CSS rules', async () => {
+      computedStyleWidget = createComputedStyleWidgetForTest(
+          SDK.CSSStyleDeclaration.Type.Regular, undefined,
+          SDK.CSSRule.CSSStyleRule.createDummyRule({} as SDK.CSSModel.CSSModel, '.container'));
+
+      computedStyleWidget.update();
+      await computedStyleWidget.updateComplete;
+
+      const treeOutline = computedStyleWidget.contentElement.querySelector('devtools-tree-outline') as
+          TreeOutline.TreeOutline.TreeOutline<unknown>;
+      await treeOutline.expandRecursively(5);
+
+      const traceElement = await waitForTraceElement(treeOutline);
+      const traceSelector = traceElement.shadowRoot?.querySelector('.trace-selector');
+      assert.strictEqual(traceSelector?.textContent, '.container');
+    });
+
+    it('renders trace element with correct selector for declarations coming from inline styles', async () => {
+      computedStyleWidget = createComputedStyleWidgetForTest(SDK.CSSStyleDeclaration.Type.Inline);
+
+      computedStyleWidget.update();
+      await computedStyleWidget.updateComplete;
+
+      const treeOutline = computedStyleWidget.contentElement.querySelector('devtools-tree-outline') as
+          TreeOutline.TreeOutline.TreeOutline<unknown>;
+      await treeOutline.expandRecursively(5);
+
+      const traceElement = await waitForTraceElement(treeOutline);
+      const traceSelector = traceElement.shadowRoot?.querySelector('.trace-selector');
+      assert.strictEqual(traceSelector?.textContent, 'element.style');
+    });
+  });
+});

package/front_end/panels/elements/ComputedStyleWidget.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 i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -39,19 +41,18 @@ import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import * as ElementsComponents from './components/components.js';
 import {type ComputedStyle, type ComputedStyleModel, Events} from './ComputedStyleModel.js';
 import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
-import {type ColorMatch, ColorMatcher} from './PropertyMatchers.js';
 import {categorizePropertyName, type Category, DefaultCategoryOrder} from './PropertyNameCategories.js';
-import {type MatchRenderer, Renderer, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
+import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
-const {html} = LitHtml;
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -122,7 +123,7 @@ function renderPropertyContents(
 const createPropertyElement =
     (node: SDK.DOMModel.DOMNode, propertyName: string, propertyValue: string, traceable: boolean, inherited: boolean,
      activeProperty: SDK.CSSProperty.CSSProperty|undefined,
-     onContextMenu: ((event: Event) => void)): LitHtml.TemplateResult => {
+     onContextMenu: ((event: Event) => void)): Lit.TemplateResult => {
       const {name, value} = renderPropertyContents(node, propertyName, propertyValue);
       // clang-format off
       return html`<devtools-computed-style-property
@@ -156,8 +157,19 @@ const createTraceElement =
       if (rule) {
         ruleOriginNode = StylePropertiesSection.createRuleOriginNode(matchedStyles, linkifier, rule);
       }
+
+      let selector = 'element.style';
+      if (rule) {
+        selector = rule.selectorText();
+      } else if (property.ownerStyle.type === SDK.CSSStyleDeclaration.Type.Animation) {
+        selector = property.ownerStyle.animationName() ? `${property.ownerStyle.animationName()} animation` :
+                                                         'animation style';
+      } else if (property.ownerStyle.type === SDK.CSSStyleDeclaration.Type.Transition) {
+        selector = 'transitions style';
+      }
+
       trace.data = {
-        selector: rule ? rule.selectorText() : 'element.style',
+        selector,
         active: !isPropertyOverloaded,
         onNavigateToSource: navigateToSource.bind(null, property),
         ruleOriginNode,
@@ -166,8 +178,10 @@ const createTraceElement =
       return trace;
     };
 
-class ColorRenderer implements MatchRenderer<ColorMatch> {
-  render(match: ColorMatch, context: RenderingContext): Node[] {
+// clang-format off
+class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
+  // clang-format on
+  override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {
     const color = Common.Color.parse(match.text);
     if (!color) {
       return [document.createTextNode(match.text)];
@@ -190,8 +204,8 @@ class ColorRenderer implements MatchRenderer<ColorMatch> {
     return [swatch];
   }
 
-  matcher(): ColorMatcher {
-    return new ColorMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.ColorMatcher {
+    return new SDK.CSSPropertyParserMatchers.ColorMatcher();
   }
 }
 
@@ -244,6 +258,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
 
   constructor(computedStyleModel: ComputedStyleModel) {
     super(true);
+    this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
@@ -261,7 +276,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     });
 
     const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
-    const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
+    const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
     const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
@@ -300,7 +315,6 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   override wasShown(): void {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, this);
     super.wasShown();
-    this.registerCSSFiles([computedStyleSidebarPaneStyles]);
   }
 
   override willHide(): void {
@@ -465,7 +479,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       ):
       (node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>,
-       state: {isExpanded: boolean}) => LitHtml.TemplateResult {
+       state: {isExpanded: boolean}) => Lit.TemplateResult {
     return node => {
       const data = node.treeNodeData;
       if (data.tag === 'property') {

package/front_end/panels/elements/DOMLinkifier.ts

@@ -109,7 +109,7 @@ export const linkifyNodeReference = function(node: SDK.DOMModel.DOMNode|null, op
 
   const root = document.createElement('span');
   root.classList.add('monospace');
-  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles]});
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: domLinkifierStyles});
   const link = shadowRoot.createChild('button', 'node-link text-button link-style');
   link.classList.toggle('dynamic-link', options.isDynamicLink);
   link.setAttribute('jslog', `${VisualLogging.link('node').track({click: true, keydown: 'Enter'})}`);
@@ -136,7 +136,7 @@ export const linkifyDeferredNodeReference = function(
       preventKeyboardFocus: undefined,
     }): Node {
   const root = document.createElement('div');
-  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles]});
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: domLinkifierStyles});
   const link = shadowRoot.createChild('button', 'node-link text-button link-style');
   link.setAttribute('jslog', `${VisualLogging.link('node').track({click: true})}`);
   link.createChild('slot');

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

@@ -16,24 +16,10 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   let view: Elements.ElementStatePaneWidget.ElementStatePaneWidget;
 
   const pseudoClasses = [
-    'enabled',
-    'disabled',
-    'valid',
-    'invalid',
-    'user-valid',
-    'user-invalid',
-    'required',
-    'optional',
-    'read-only',
-    'read-write',
-    'in-range',
-    'out-of-range',
-    'visited',
-    'link',
-    'checked',
-    'indeterminate',
-    'placeholder-shown',
-    'autofill',
+    'enabled',       'disabled',          'valid',    'invalid',   'user-valid',
+    'user-invalid',  'required',          'optional', 'read-only', 'read-write',
+    'in-range',      'out-of-range',      'visited',  'link',      'checked',
+    'indeterminate', 'placeholder-shown', 'autofill', 'open',
   ];
 
   beforeEach(() => {
@@ -165,6 +151,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'read-only',
           'placeholder-shown',
           'autofill',
+          'open',
         ],
     );
   });
@@ -241,7 +228,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for select', async () => {
     await assertExpectedPseudoClasses(
         'select',
-        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write'],
+        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write', 'open'],
     );
   });
 
@@ -342,6 +329,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'autofill',
           'checked',
           'indeterminate',
+          'open',
         ],
         false,
         ['type', 'checkbox'],
@@ -360,6 +348,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'autofill',
           'checked',
           'indeterminate',
+          'open',
         ],
         false,
         ['type', 'radio'],

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -64,6 +64,7 @@ enum SpecificPseudoStates {
   INDETERMINATE = 'indeterminate',
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
+  OPEN = 'open',
 }
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
@@ -77,6 +78,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
   constructor() {
     super(true);
+    this.registerRequiredCSS(elementStatePaneWidgetStyles);
     this.contentElement.className = 'styles-element-state-pane';
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('element-states')}`);
     const inputs: HTMLInputElement[] = [];
@@ -218,6 +220,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.PLACEHOLDER_SHOWN, createElementStateCheckbox(SpecificPseudoStates.PLACEHOLDER_SHOWN));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.AUTOFILL, createElementStateCheckbox(SpecificPseudoStates.AUTOFILL));
+    this.specificPseudoStateDivs.set(SpecificPseudoStates.OPEN, createElementStateCheckbox(SpecificPseudoStates.OPEN));
 
     this.specificPseudoStateDivs.forEach(div => {
       elementSpecificContainer.appendChild(div);
@@ -260,10 +263,9 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
   }
   override wasShown(): void {
     super.wasShown();
-    this.registerCSSFiles([elementStatePaneWidgetStyles]);
     this.update();
   }
-  override update(): void {
+  update(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
@@ -415,6 +417,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       hideSpecificCheckbox(SpecificPseudoStates.AUTOFILL, true);
     }
 
+    if (isElementOfTypes(node, ['input', 'select', 'dialog', 'details'])) {
+      hideSpecificCheckbox(SpecificPseudoStates.OPEN, false);
+    } else {
+      hideSpecificCheckbox(SpecificPseudoStates.OPEN, true);
+    }
+
     this.specificHeader.hidden = showedACheckbox ? false : true;
     this.updateElementSpecificStatesTableForTest();
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -171,7 +171,7 @@ const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement =>
   button.data = {
     active: isActive,
     variant: Buttons.Button.Variant.TOOLBAR,
-    iconUrl: new URL('../../Images/person.svg', import.meta.url).toString(),
+    iconName: 'person',
     title,
     jslogContext: 'toggle-accessibility-tree',
   };
@@ -229,6 +229,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   constructor() {
     super('elements');
+    this.registerRequiredCSS(elementsPanelStyles);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'elements-panel-split-view-state', 325, 325);
     this.splitWidget.addEventListener(
@@ -480,7 +481,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   override wasShown(): void {
     super.wasShown();
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
-    this.registerCSSFiles([elementsPanelStyles]);
 
     for (const treeOutline of this.treeOutlines) {
       // Attach heavy component lazily

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -17,6 +17,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     this.element.classList.add('flex-none');
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
+    this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);
 
     this.updateThrottler = new Common.Throttler.Throttler(100);
     this.updateWhenVisible = false;
@@ -34,11 +35,11 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  override async doUpdate(): Promise<void> {
+  async doUpdate(): Promise<void> {
     return;
   }
 
-  override update(): void {
+  update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;
@@ -59,4 +60,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
 
   onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
+
+  onComputedStyleChanged(): void {
+  }
 }