chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -140,7 +140,7 @@ export abstract class CSSRuleValidator {
 
 export class AlignContentValidator extends CSSRuleValidator {
   constructor() {
-    super(['align-content']);
+    super(['align-content', 'place-content']);
   }
 
   override getMetricType(): Host.UserMetrics.CSSHintType {
@@ -339,8 +339,6 @@ export class GridItemValidator extends CSSRuleValidator {
 export class FlexOrGridItemValidator extends CSSRuleValidator {
   constructor() {
     super([
-      'place-self',
-      'align-self',
       'order',
     ]);
   }
@@ -377,11 +375,8 @@ export class FlexOrGridItemValidator extends CSSRuleValidator {
 
 export class FlexGridValidator extends CSSRuleValidator {
   constructor() {
-    super([
-      'justify-content',
-      'place-content',  // Shorthand	<'align-content'> <'justify-content'>?
-      'align-items',
-    ]);
+    // justify-content is specified to affect multicol, but we don't implement that yet.
+    super(['justify-content']);
   }
 
   override getMetricType(): Host.UserMetrics.CSSHintType {
@@ -401,8 +396,7 @@ export class FlexGridValidator extends CSSRuleValidator {
     if (parentComputedStyles && (isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles))) {
       const reasonContainerDisplayName = buildPropertyValue(parentComputedStyles.get('display') as string);
       const reasonPropertyName = buildPropertyName(propertyName);
-      const reasonAlternativePropertyName =
-          buildPropertyName(propertyName === 'justify-content' ? 'justify-self' : 'align-self');
+      const reasonAlternativePropertyName = buildPropertyName('justify-self');
       return new Hint(
           i18nString(UIStrings.flexGridContainerPropertyRuleReason, {
             CONTAINER_DISPLAY_NAME: reasonContainerDisplayName,

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -179,8 +179,8 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     const keys = [...classes.keys()];
     keys.sort(Platform.StringUtilities.caseInsensetiveComparator);
     for (const className of keys) {
-      const label =
-          UI.UIUtils.CheckboxLabel.create(className, classes.get(className), undefined, 'element-class', true);
+      const label = UI.UIUtils.CheckboxLabel.createWithStringLiteral(
+          className, classes.get(className), undefined, 'element-class', true);
       label.classList.add('monospace');
       label.checkboxElement.addEventListener('click', this.onClick.bind(this, className), false);
       this.classesContainer.appendChild(label);

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

@@ -0,0 +1,157 @@
+// 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 {createTarget, getGetHostConfigStub, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Elements from './elements.js';
+
+function createNode(target: SDK.Target.Target, {nodeId}: {nodeId: Protocol.DOM.NodeId}): SDK.DOMModel.DOMNode {
+  const domModel = target.model(SDK.DOMModel.DOMModel);
+  assert.exists(domModel);
+
+  return SDK.DOMModel.DOMNode.create(domModel, null, false, {
+    nodeId,
+    backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+    nodeType: Node.ELEMENT_NODE,
+    nodeName: 'div',
+    localName: 'div',
+    nodeValue: '',
+  });
+}
+
+describeWithMockConnection('ComputedStyleModel', () => {
+  let target: SDK.Target.Target;
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
+  let trackComputedStyleUpdatesForNodeSpy: sinon.SinonSpy;
+
+  async function waitForTrackComputedStyleUpdatesForNodeCall(): Promise<void> {
+    if (trackComputedStyleUpdatesForNodeSpy.getCalls().length > 0) {
+      return;
+    }
+
+    await new Promise<void>(resolve => {
+      requestAnimationFrame(async () => {
+        await waitForTrackComputedStyleUpdatesForNodeCall();
+        resolve();
+      });
+    });
+  }
+
+  beforeEach(() => {
+    stubNoopSettings();
+    target = createTarget();
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+
+    UI.Context.Context.instance().setFlavor(Elements.StylesSidebarPane.StylesSidebarPane, null);
+    UI.Context.Context.instance().setFlavor(Elements.ComputedStyleWidget.ComputedStyleWidget, null);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+
+    sinon.stub(Elements.ComputedStyleModel.ComputedStyleModel.prototype, 'cssModel').returns(cssModel);
+    trackComputedStyleUpdatesForNodeSpy =
+        sinon.spy(SDK.CSSModel.CSSModel.prototype, 'trackComputedStyleUpdatesForNode');
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+  });
+
+  afterEach(() => {
+    computedStyleModel.dispose();
+    trackComputedStyleUpdatesForNodeSpy.restore();
+  });
+
+  it('should track computed style updates when computed widget is shown', async () => {
+    UI.Context.Context.instance().setFlavor(
+        SDK.DOMModel.DOMNode, createNode(target, {nodeId: 1 as Protocol.DOM.NodeId}));
+    UI.Context.Context.instance().setFlavor(
+        Elements.ComputedStyleWidget.ComputedStyleWidget,
+        sinon.createStubInstance(Elements.ComputedStyleWidget.ComputedStyleWidget));
+
+    await waitForTrackComputedStyleUpdatesForNodeCall();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 1);
+  });
+
+  it('should track computed style updates when styles tab is shown and DevToolsAnimationStylesInStylesTab is enabled',
+     async () => {
+       const hostConfigStub = getGetHostConfigStub({
+         devToolsAnimationStylesInStylesTab: {
+           enabled: true,
+         },
+       });
+       UI.Context.Context.instance().setFlavor(
+           SDK.DOMModel.DOMNode, createNode(target, {nodeId: 1 as Protocol.DOM.NodeId}));
+       UI.Context.Context.instance().setFlavor(
+           Elements.StylesSidebarPane.StylesSidebarPane,
+           sinon.createStubInstance(Elements.StylesSidebarPane.StylesSidebarPane));
+
+       await waitForTrackComputedStyleUpdatesForNodeCall();
+
+       sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 1);
+       hostConfigStub.restore();
+     });
+
+  it('should track computed style updates when the node is changed', async () => {
+    UI.Context.Context.instance().setFlavor(
+        SDK.DOMModel.DOMNode, createNode(target, {nodeId: 1 as Protocol.DOM.NodeId}));
+    UI.Context.Context.instance().setFlavor(
+        Elements.ComputedStyleWidget.ComputedStyleWidget,
+        sinon.createStubInstance(Elements.ComputedStyleWidget.ComputedStyleWidget));
+
+    await waitForTrackComputedStyleUpdatesForNodeCall();
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 1);
+    trackComputedStyleUpdatesForNodeSpy.resetHistory();
+
+    UI.Context.Context.instance().setFlavor(
+        SDK.DOMModel.DOMNode, createNode(target, {nodeId: 2 as Protocol.DOM.NodeId}));
+    await waitForTrackComputedStyleUpdatesForNodeCall();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 2);
+  });
+
+  it('should stop tracking when computed widget is hidden', async () => {
+    UI.Context.Context.instance().setFlavor(
+        SDK.DOMModel.DOMNode, createNode(target, {nodeId: 1 as Protocol.DOM.NodeId}));
+    UI.Context.Context.instance().setFlavor(
+        Elements.ComputedStyleWidget.ComputedStyleWidget,
+        sinon.createStubInstance(Elements.ComputedStyleWidget.ComputedStyleWidget));
+
+    await waitForTrackComputedStyleUpdatesForNodeCall();
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 1);
+    trackComputedStyleUpdatesForNodeSpy.resetHistory();
+
+    UI.Context.Context.instance().setFlavor(Elements.ComputedStyleWidget.ComputedStyleWidget, null);
+    await waitForTrackComputedStyleUpdatesForNodeCall();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, undefined);
+  });
+
+  it('should stop tracking when computed widget is hidden and styles tab is shown but the flag is not enabled',
+     async () => {
+       const hostConfigStub = getGetHostConfigStub({
+         devToolsAnimationStylesInStylesTab: {
+           enabled: false,
+         },
+       });
+       UI.Context.Context.instance().setFlavor(
+           SDK.DOMModel.DOMNode, createNode(target, {nodeId: 1 as Protocol.DOM.NodeId}));
+       UI.Context.Context.instance().setFlavor(
+           Elements.ComputedStyleWidget.ComputedStyleWidget,
+           sinon.createStubInstance(Elements.ComputedStyleWidget.ComputedStyleWidget));
+
+       await waitForTrackComputedStyleUpdatesForNodeCall();
+       sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, 1);
+       trackComputedStyleUpdatesForNodeSpy.resetHistory();
+
+       UI.Context.Context.instance().setFlavor(Elements.ComputedStyleWidget.ComputedStyleWidget, null);
+       UI.Context.Context.instance().setFlavor(
+           Elements.StylesSidebarPane.StylesSidebarPane,
+           sinon.createStubInstance(Elements.StylesSidebarPane.StylesSidebarPane));
+       await waitForTrackComputedStyleUpdatesForNodeCall();
+
+       sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, undefined);
+       hostConfigStub.restore();
+     });
+});

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -6,18 +6,36 @@ import * as Common from '../../core/common/common.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';
+
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private nodeInternal: SDK.DOMModel.DOMNode|null;
   private cssModelInternal: SDK.CSSModel.CSSModel|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
+  private currentTrackedNodeId?: number;
+
   constructor() {
     super();
-    this.nodeInternal = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     this.cssModelInternal = null;
     this.eventListeners = [];
+    this.nodeInternal = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
+    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(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -28,10 +46,47 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     return this.cssModelInternal && this.cssModelInternal.isEnabled() ? this.cssModelInternal : 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.nodeInternal) {
+      // 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 hostConfig = Common.Settings.Settings.instance().getHostConfig();
+    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
+    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
+    const shouldTrackComputedStyleUpdates =
+        isComputedStyleWidgetVisible || (isStylesTabVisible && 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.nodeInternal.id) {
+      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.nodeInternal.id);
+      this.currentTrackedNodeId = this.nodeInternal.id;
+    }
+  }, 100);
+
   private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.nodeInternal = event.data;
     this.updateModel(this.nodeInternal ? this.nodeInternal.domModel().cssModel() : null);
-    this.onComputedStyleChanged(null);
+    this.onCSSModelChanged(null);
+    this.evaluateTrackingComputedStyleUpdatesForNode();
   }
 
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
@@ -44,13 +99,13 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
     if (cssModel && domModel && resourceTreeModel) {
       this.eventListeners = [
-        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.FontsUpdated, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onComputedStyleChanged, this),
-        cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onComputedStyleChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.FontsUpdated, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onCSSModelChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onComputedStyleChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
@@ -58,7 +113,13 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
   }
 
-  private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|null): void {
+  private onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>|null): void {
+    delete this.computedStylePromise;
+    this.dispatchEventToListeners(Events.CSS_MODEL_CHANGED, event?.data ?? null);
+  }
+
+  private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<SDK.CSSModel.ComputedStyleUpdatedEvent>|
+                                 null): void {
     delete this.computedStylePromise;
     // If the event contains `nodeId` and that's not the same as this node's id
     // we don't emit the COMPUTED_STYLE_CHANGED event.
@@ -66,7 +127,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
       return;
     }
 
-    this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
+    this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED);
   }
 
   private onDOMModelChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
@@ -77,12 +138,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
             !node.isAncestor(this.nodeInternal)) {
       return;
     }
-    this.onComputedStyleChanged(null);
+    this.onCSSModelChanged(null);
   }
 
   private onFrameResized(): void {
     function refreshContents(this: ComputedStyleModel): void {
-      this.onComputedStyleChanged(null);
+      this.onCSSModelChanged(null);
       delete this.frameResizedTimer;
     }
 
@@ -128,15 +189,16 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 }
 
 export const enum Events {
+  CSS_MODEL_CHANGED = 'CSSModelChanged',
   COMPUTED_STYLE_CHANGED = 'ComputedStyleChanged',
 }
 
-export type ComputedStyleChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|
-                                        SDK.CSSModel.StyleSheetChangedEvent|SDK.CSSModel.PseudoStateForcedEvent|
-                                        SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
+export type CSSModelChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|SDK.CSSModel.StyleSheetChangedEvent|
+                                   SDK.CSSModel.PseudoStateForcedEvent|null|void;
 
 export type EventTypes = {
-  [Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,
+  [Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent,
+  [Events.COMPUTED_STYLE_CHANGED]: void,
 };
 
 export class ComputedStyle {

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -42,7 +42,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
 import * as ElementsComponents from './components/components.js';
-import {type ComputedStyle, ComputedStyleModel, Events} from './ComputedStyleModel.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';
@@ -242,12 +242,13 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
 
-  constructor() {
+  constructor(computedStyleModel: ComputedStyleModel) {
     super(true);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
-    this.computedStyleModel = new ComputedStyleModel();
+    this.computedStyleModel = computedStyleModel;
+    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
     this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
 
     this.showInheritedComputedStylePropertiesSetting =
@@ -291,26 +292,19 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     fontsWidget.show(this.contentElement);
   }
 
-  #handleNodeChange(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(event.data?.id);
-  }
-
   override onResize(): void {
     const isNarrow = this.contentElement.offsetWidth < 260;
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
   override wasShown(): void {
+    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, this);
     super.wasShown();
     this.registerCSSFiles([computedStyleSidebarPaneStyles]);
-
-    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(this.computedStyleModel.node()?.id);
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
   }
 
   override willHide(): void {
-    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
+    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
   override async doUpdate(): Promise<void> {
@@ -496,7 +490,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
             'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, data.property));
         return html`${traceElement}`;
       }
-      return html`<span style="cursor: text; color: var(--sys-color-token-subtle);">${data.name}</span>`;
+      return html`<span style="cursor: text; color: var(--sys-color-on-surface-subtle);">${data.name}</span>`;
     };
   }
 

package/front_end/panels/elements/DOMLinkifier.ts

@@ -21,8 +21,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface Options extends Common.Linkifier.Options {
+  hiddenClassList?: string[];
+}
+
 export const decorateNodeLabel = function(
-    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Common.Linkifier.Options): void {
+    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Options): void {
   const originalNode = node;
   const isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
   if (isPseudo && node.parentNode) {
@@ -69,7 +73,7 @@ export const decorateNodeLabel = function(
       const classesElement = parentElement.createChild('span', 'extra node-label-class');
       for (let i = 0; i < classes.length; ++i) {
         const className = classes[i];
-        if (className && !foundClasses.has(className)) {
+        if (className && !options.hiddenClassList?.includes(className) && !foundClasses.has(className)) {
           const part = '.' + className;
           title += part;
           UI.UIUtils.createTextChild(classesElement, part);
@@ -93,22 +97,20 @@ export const decorateNodeLabel = function(
   UI.Tooltip.Tooltip.install(parentElement, options.tooltip || title);
 };
 
-export const linkifyNodeReference = function(
-    node: SDK.DOMModel.DOMNode|null, options: Common.Linkifier.Options|undefined = {
-      tooltip: undefined,
-      preventKeyboardFocus: undefined,
-      textContent: undefined,
-      isDynamicLink: false,
-    }): Node {
+export const linkifyNodeReference = function(node: SDK.DOMModel.DOMNode|null, options: Options|undefined = {
+  tooltip: undefined,
+  preventKeyboardFocus: undefined,
+  textContent: undefined,
+  isDynamicLink: false,
+}): Node {
   if (!node) {
     return document.createTextNode(i18nString(UIStrings.node));
   }
 
   const root = document.createElement('span');
   root.classList.add('monospace');
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles], delegatesFocus: undefined});
-  const link = (shadowRoot.createChild('button', 'node-link text-button link-style') as HTMLButtonElement);
+  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'})}`);
 
@@ -129,14 +131,13 @@ export const linkifyNodeReference = function(
 };
 
 export const linkifyDeferredNodeReference = function(
-    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Common.Linkifier.Options|undefined = {
+    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Options|undefined = {
       tooltip: undefined,
       preventKeyboardFocus: undefined,
     }): Node {
   const root = document.createElement('div');
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles], delegatesFocus: undefined});
-  const link = (shadowRoot.createChild('button', 'node-link text-button link-style') as HTMLDivElement);
+  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');
   link.addEventListener('click', deferredNode.resolve.bind(deferredNode, onDeferredNodeResolved), false);
@@ -166,7 +167,7 @@ export class Linkifier implements Common.Linkifier.Linkifier {
 
     return linkifierInstance;
   }
-  linkify(object: Object, options?: Common.Linkifier.Options): Node {
+  linkify(object: Object, options?: Options): Node {
     if (object instanceof SDK.DOMModel.DOMNode) {
       return linkifyNodeReference(object, options);
     }

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

@@ -106,7 +106,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
       const args = checkboxes.lastCall.args;
       assert.strictEqual(args[0], node, 'Called forcePseudoState with wrong node');
       assert.strictEqual(args[1], pseudoClass, 'Called forcePseudoState with wrong pseudo-state');
-      assert.strictEqual(args[2], true, 'Called forcePseudoState with wrong enable state');
+      assert.isTrue(args[2], 'Called forcePseudoState with wrong enable state');
     }
   });
 

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -109,7 +109,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const createElementStateCheckbox = (state: string): HTMLDivElement => {
       const div = document.createElement('div');
       div.id = state;
-      const label = UI.UIUtils.CheckboxLabel.create(':' + state, undefined, undefined, undefined, true);
+      const label =
+          UI.UIUtils.CheckboxLabel.createWithStringLiteral(':' + state, undefined, undefined, undefined, true);
       const input = label.checkboxElement;
       this.inputStates.set(input, state);
       input.addEventListener('click', (clickListener as EventListener), false);

package/front_end/panels/elements/ElementsPanel.ts

@@ -49,6 +49,7 @@ import type {AXTreeNodeData} from './AccessibilityTreeUtils.js';
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
+import {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
 import type {ElementsTreeElement} from './ElementsTreeElement.js';
@@ -145,6 +146,10 @@ const UIStrings = {
    * @description Accessible name for the DOM tree explorer view.
    */
   domTreeExplorer: 'DOM tree explorer',
+  /**
+   * @description A context menu item to reveal a submenu with badge settings.
+   */
+  adornerSettings: 'Badge settings',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
@@ -202,7 +207,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private currentSearchResultIndex: number;
   pendingNodeReveal: boolean;
   private readonly adornerManager: ElementsComponents.AdornerManager.AdornerManager;
-  private adornerSettingsPane: ElementsComponents.AdornerSettingsPane.AdornerSettingsPane|null;
   private readonly adornersByName: Map<string, Set<Adorners.Adorner.Adorner>>;
   accessibilityTreeButton?: HTMLElement;
   domTreeButton?: HTMLElement;
@@ -276,9 +280,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    this.stylesWidget = StylesSidebarPane.instance();
-    this.computedStyleWidget = new ComputedStyleWidget();
-    this.metricsWidget = new MetricsSidebarPane();
+    const computedStyleModel = new ComputedStyleModel();
+    this.stylesWidget = new StylesSidebarPane(computedStyleModel);
+    this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
+    this.metricsWidget = new MetricsSidebarPane(computedStyleModel);
 
     Common.Settings.Settings.instance()
         .moduleSetting('sidebar-position')
@@ -300,7 +305,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
         Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
-    this.adornerSettingsPane = null;
     this.adornersByName = new Map();
   }
 
@@ -1186,30 +1190,23 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  showAdornerSettingsPane(): void {
-    // Delay the initialization of the pane to the first showing
-    // since usually this pane won't be used.
-    if (!this.adornerSettingsPane) {
-      this.adornerSettingsPane = new ElementsComponents.AdornerSettingsPane.AdornerSettingsPane();
-      this.adornerSettingsPane.addEventListener('adornersettingupdated', (event: Event) => {
-        const {adornerName, isEnabledNow, newSettings} =
-            (event as ElementsComponents.AdornerSettingsPane.AdornerSettingUpdatedEvent).data;
-        const adornersToUpdate = this.adornersByName.get(adornerName);
+  populateAdornerSettingsContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const adornerSubMenu = contextMenu.viewSection().appendSubMenuItem(
+        i18nString(UIStrings.adornerSettings), false, 'show-adorner-settings');
+    const adornerSettings = this.adornerManager.getSettings();
+    for (const [adorner, isEnabled] of adornerSettings) {
+      adornerSubMenu.defaultSection().appendCheckboxItem(adorner, () => {
+        const updatedIsEnabled = !isEnabled;
+        const adornersToUpdate = this.adornersByName.get(adorner);
         if (adornersToUpdate) {
-          for (const adorner of adornersToUpdate) {
-            isEnabledNow ? adorner.show() : adorner.hide();
+          for (const adornerToUpdate of adornersToUpdate) {
+            updatedIsEnabled ? adornerToUpdate.show() : adornerToUpdate.hide();
           }
         }
-        this.adornerManager.updateSettings(newSettings);
-      });
-      this.searchableViewInternal.element.prepend(this.adornerSettingsPane);
+        this.adornerManager.getSettings().set(adorner, updatedIsEnabled);
+        this.adornerManager.updateSettings(adornerSettings);
+      }, {checked: isEnabled, jslogContext: adorner});
     }
-
-    const adornerSettings = this.adornerManager.getSettings();
-    this.adornerSettingsPane.data = {
-      settings: adornerSettings,
-    };
-    this.adornerSettingsPane.show();
   }
 
   isAdornerEnabled(adornerText: string): boolean {