chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/coverage/CoverageView.test.ts

@@ -9,12 +9,10 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {activate, getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Coverage from './coverage.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 const isShowingLandingPage = (view: Coverage.CoverageView.CoverageView) => {
   return Boolean(view.contentElement.querySelector('.landing-page'));
 };
@@ -105,7 +103,7 @@ describeWithMockConnection('CoverageView', () => {
     assert.isTrue(startSpy.notCalled);
 
     await view.startRecording({reload: false, jsCoveragePerBlock: false});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isFalse(isShowingLandingPage(view));
     assert.isTrue(isShowingResults(view));
     assert.isFalse(isShowingPrerenderPage(view));
@@ -148,7 +146,7 @@ describeWithMockConnection('CoverageView', () => {
     assert.isTrue(startSpy.notCalled);
 
     await view.startRecording({reload: false, jsCoveragePerBlock: false});
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isFalse(isShowingLandingPage(view));
     assert.isTrue(isShowingResults(view));
     assert.isFalse(isShowingPrerenderPage(view));
@@ -158,7 +156,7 @@ describeWithMockConnection('CoverageView', () => {
     // Create 2nd target for the prerendered frame.
     const {startSpy: startSpy2, stopSpy: stopSpy2, target: target2} = setupTargetAndModels();
     activate(target2);
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isFalse(isShowingLandingPage(view));
     assert.isFalse(isShowingResults(view));
     assert.isTrue(isShowingPrerenderPage(view));

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -702,7 +702,7 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
 
     const total = values.reduce((prev, curr) => prev + curr[1].length, 0);
 
-    return UI.Fragment.Fragment.build`<ul>
+    return UI.Fragment.Fragment.build`<ul aria-label="${type}">
     ${values.map(([title, nodes]) => {
       const width = 100 * nodes.length / total;
       const itemLabel = i18nString(UIStrings.nOccurrences, {n: nodes.length});
@@ -710,7 +710,8 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
       return UI.Fragment.Fragment.build`<li>
         <div class="title">${title}</div>
         <button data-type="${type}" data-path="${path}" data-${dataLabel}="${title}"
-        jslog="${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}">
+        jslog="${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}"
+        aria-label="${title}: ${itemLabel}">
           <div class="details">${itemLabel}</div>
           <div class="bar-container">
             <div class="bar" style="width: ${width}%;"></div>

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -40,8 +40,7 @@ export class CSSOverviewSidebarPanel extends Common.ObjectWrapper.eventMixin<Eve
     // longest item, so that the selected item's background expands fully
     // even when the sidebar overflows.
     // Also see crbug/1408003
-    this.containerElement =
-        this.contentElement.createChild('div', 'overview-sidebar-panel-container') as HTMLDivElement;
+    this.containerElement = this.contentElement.createChild('div', 'overview-sidebar-panel-container');
     UI.ARIAUtils.setLabel(this.containerElement, i18nString(UIStrings.cssOverviewPanelSidebar));
     UI.ARIAUtils.markAsTree(this.containerElement);
 

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -135,6 +135,7 @@
   top: 0;
   width: 26px;
   height: 26px;
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-cssoverview_icons_2x);
   background-size: 104px 26px;
 }
@@ -247,12 +248,12 @@
 
   &:hover .details,
   &:focus .details {
-    color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
+    color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
   }
 
   &:hover .bar,
   &:focus .bar {
-    background-color: color-mix(in sRGB, var(--sys-color-primary-bright), var(--sys-color-state-hover-on-prominent) 6%);
+    background-color: color-mix(in srgb, var(--sys-color-primary-bright), var(--sys-color-state-hover-on-prominent) 6%);
     color: var(--sys-color-on-primary);
   }
 }

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -145,7 +145,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     }
   }
 
-  update(items: Iterable<SDK.PageResourceLoader.PageResource>): void {
+  override update(items: Iterable<SDK.PageResourceLoader.PageResource> = []): void {
     let hadUpdates = false;
     const rootNode = this.dataGrid.rootNode();
     for (const item of items) {
@@ -197,6 +197,10 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     }
   }
 
+  getNumberOfVisibleItems(): number {
+    return this.dataGrid.rootNode().children.length;
+  }
+
   private sortingChanged(): void {
     const columnId = this.dataGrid.sortColumnId();
     if (!columnId) {

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -41,6 +41,14 @@ const UIStrings = {
    * total. Resources are files related to the webpage.
    */
   resources: '{n, plural, =1 {# resource} other {# resources}}',
+  /**
+   * @description Nnumber of resource(s) match
+   */
+  numberOfResourceMatch: '{n, plural, =1 {# resource matches} other {# resources match}}',
+  /**
+   * @description No resource matches
+   */
+  noResourceMatches: 'No resource matches',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/developer_resources/DeveloperResourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -141,6 +149,15 @@ export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
     this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
+
+    const numberOfResourceMatch = this.listView.getNumberOfVisibleItems();
+    let resourceMatch = '';
+    if (numberOfResourceMatch === 0) {
+      resourceMatch = i18nString(UIStrings.noResourceMatches);
+    } else {
+      resourceMatch = i18nString(UIStrings.numberOfResourceMatch, {n: numberOfResourceMatch});
+    }
+    UI.ARIAUtils.alert(resourceMatch);
   }
 
   override wasShown(): void {

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

@@ -157,7 +157,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([classesPaneWidgetStyles]);
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       return;
     }
@@ -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>`;
     };
   }