chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/application/preloading/components/PreloadingGrid.test.ts

@@ -296,7 +296,7 @@ describeWithEnvironment('PreloadingGrid', () => {
     assert.isNotNull(grid.shadowRoot);
     const cell = getCellByIndexes(grid.shadowRoot, {row: 1, column: 3});
     const div = cell.querySelector('div');
-    assert.strictEqual(div!.getAttribute('style'), 'color: var(--sys-color-error);');
+    assert.strictEqual(div!.getAttribute('style'), 'color:var(--sys-color-error);');
     const icon = div!.children[0];
     assert.include(icon.shadowRoot!.innerHTML, 'cross-circle-filled');
   });

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -12,7 +12,6 @@ import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -114,9 +113,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format off
     render(html`
       <div class="preloading-container">
-        <devtools-data-grid-controller .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </devtools-data-grid-controller>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -142,7 +139,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
               color: 'var(--sys-color-error)',
               width: '16px',
               height: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             style=${LitHtml.Directives.styleMap({
               'vertical-align': 'sub',
             })}
@@ -151,7 +148,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
           ${statusString}
         </div>
       `;
-      // clang-format on
+              // clang-format on
     }
 
     assertNotNullOrUndefined(this.#data);

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts

@@ -95,9 +95,7 @@ export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper
     // clang-format off
       render(html`
         <div class="preloading-container">
-          <devtools-data-grid-controller .data=${
-              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </devtools-data-grid-controller>
+          <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -373,6 +373,10 @@ const UIStrings = {
    */
   prerenderFinalStatusAllPrerenderingCanceled:
       'All prerendered pages were unloaded by the browser for some reason (For example, WebViewCompat.addWebMessageListener() was called during prerendering.)',
+  /**
+   * Description text for PrenderFinalStatus::kWindowClosed.
+   */
+  prerenderFinalStatusWindowClosed: 'The prerendered page was unloaded because it called window.close().',
 
   /**
    *@description Text in grid and details: Preloading attempt is not yet triggered.
@@ -680,6 +684,7 @@ export function prerenderFailureReason(attempt: SDK.PreloadingModel.PrerenderAtt
     case Protocol.Preload.PrerenderFinalStatus.AllPrerenderingCanceled:
       return i18nString(UIStrings.prerenderFinalStatusAllPrerenderingCanceled);
     case Protocol.Preload.PrerenderFinalStatus.WindowClosed:
+      return i18nString(UIStrings.prerenderFinalStatusWindowClosed);
     case Protocol.Preload.PrerenderFinalStatus.SlowNetwork:
     case Protocol.Preload.PrerenderFinalStatus.OtherPrerenderedPageActivated:
     case Protocol.Preload.PrerenderFinalStatus.V8OptimizerDisabled:

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -8,7 +8,6 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
@@ -87,12 +86,12 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
             color: 'var(--icon-error)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}>
+          }}>
         </devtools-icon>
         <span id="error-message-text">${this.#data.errorMessage}</span>
       </div>
     `;
-    // clang-format on
+            // clang-format on
   }
 
   #renderSource(sourceText: string): LitHtml.LitTemplate {

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -12,7 +12,6 @@ import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -37,11 +36,11 @@ const UIStrings = {
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Elements panel
    */
-  buttonClickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Network panel
    */
-  buttonClickToRevealInNetworkPanel: 'Click to reveal in Network panel',
+  clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
    *@description Value of status, specifying rule set contains how many errors.
    */
@@ -113,9 +112,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
     LitHtml.render(html`
       <div class="ruleset-container"
       jslog=${VisualLogging.pane('preloading-rules')}>
-        <devtools-data-grid-controller .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </devtools-data-grid-controller>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -173,7 +170,7 @@ function ruleSetRenderer(
     return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInElements}
-        title=${i18nString(UIStrings.buttonClickToRevealInElementsPanel)}
+        title=${i18nString(UIStrings.clickToOpenInElementsPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -191,7 +188,7 @@ function ruleSetRenderer(
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}
@@ -228,7 +225,7 @@ function ruleSetRenderer(
     return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInNetwork}
-        title=${i18nString(UIStrings.buttonClickToRevealInNetworkPanel)}
+        title=${i18nString(UIStrings.clickToOpenInNetworkPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -245,7 +242,7 @@ function ruleSetRenderer(
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}

package/front_end/panels/autofill/AutofillView.ts

@@ -11,7 +11,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AutofillManager from '../../models/autofill_manager/autofill_manager.js';
-import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as Input from '../../ui/components/input/input.js';
@@ -102,7 +101,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/autofill/AutofillView.ts', UISt
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-autofill-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #autoOpenViewSetting: Common.Settings.Setting<boolean>;
@@ -368,8 +366,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
           @rowmouseenter=${this.#onGridRowMouseEnter}
           @rowmouseleave=${this.#onGridRowMouseLeave}
           class="filled-fields-grid"
-          .data=${gridData as DataGrid.DataGridController.DataGridControllerData}
-        >
+          .data=${gridData}>
         </devtools-data-grid-controller>
       </div>
     `;
@@ -450,7 +447,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     return html`
       ${autofillType}
       ${adornerContent.textContent ? html`
-          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent} as Adorners.Adorner.AdornerData}></devtools-adorner>
+          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent}}></devtools-adorner>
         `: LitHtml.nothing}
     `;
     // clang-format on

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -137,19 +137,20 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     UI.ARIAUtils.setLabel(inputElement, i18nString(UIStrings.urlBreakpoint));
     this.addListElement(inputElementContainer, this.#list.element.firstChild as Element | null);
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (_element: Element, newText: string): void => {
       this.removeListElement(inputElementContainer);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, true);
-        this.setBreakpoint(text);
-      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, true);
+      this.setBreakpoint(newText);
       this.update();
-    }
+    };
+
+    const cancel = (): void => {
+      this.removeListElement(inputElementContainer);
+      this.update();
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, undefined);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   heightForItem(_item: string): number {
@@ -336,33 +337,35 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       element.classList.add('hidden');
     }
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (inputElement: Element, newText: string, _oldText: string|null, element?: Element): void => {
       this.removeListElement(inputElement);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
-        this.removeBreakpoint(breakKeyword);
-        let enabled = true;
-        if (element) {
-          const breakpointEntryElement = containerToBreakpointEntry.get(element);
-          const checkboxElement =
-              breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
-          if (checkboxElement) {
-            enabled = checkboxElement.checked;
-          }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
+      this.removeBreakpoint(breakKeyword);
+      let enabled = true;
+      if (element) {
+        const breakpointEntryElement = containerToBreakpointEntry.get(element);
+        const checkboxElement =
+            breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
+        if (checkboxElement) {
+          enabled = checkboxElement.checked;
         }
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, enabled);
-        this.setBreakpoint(text);
-        this.#list.selectItem(text);
-      } else if (element) {
+      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, enabled);
+      this.setBreakpoint(newText);
+      this.#list.selectItem(newText);
+      this.focus();
+    };
+
+    const cancel = (inputElement: Element, element?: Element): void => {
+      this.removeListElement(inputElement);
+      if (element) {
         element.classList.remove('hidden');
       }
       this.focus();
-    }
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, element);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   flavorChanged(_object: Object|null): void {

package/front_end/panels/console/ConsoleView.ts

@@ -1363,7 +1363,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   private registerShortcuts(): void {
     this.shortcuts.set(
-        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl),
+        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl.value),
         this.clearPromptBackwards.bind(this));
   }
 

package/front_end/panels/coverage/CoverageView.ts

@@ -542,10 +542,10 @@ export class CoverageView extends UI.Widget.VBox {
       const used = total - unused;
       const percentUsed = total ? Math.round(100 * used / total) : 0;
       return i18nString(UIStrings.sOfSSUsedSoFarSUnused, {
-        PH1: Platform.NumberUtilities.bytesToString(used),
-        PH2: Platform.NumberUtilities.bytesToString(total),
+        PH1: i18n.ByteUtilities.bytesToString(used),
+        PH2: i18n.ByteUtilities.bytesToString(total),
         PH3: percentUsed,
-        PH4: Platform.NumberUtilities.bytesToString(unused),
+        PH4: i18n.ByteUtilities.bytesToString(unused),
       });
     }
   }

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -2,13 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import '../../../ui/components/panel_feedback/panel_feedback.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -56,7 +55,6 @@ export class OverviewStartRequestedEvent extends Event {
 }
 
 export class CSSOverviewStartView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -100,11 +98,11 @@ export class CSSOverviewStartView extends HTMLElement {
             feedbackUrl: FEEDBACK_LINK,
             quickStartUrl: DOC_LINK,
             quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
-          } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
+          }}>
         </devtools-panel-feedback>
         <devtools-feedback-button .data=${{
           feedbackUrl: FEEDBACK_LINK,
-          } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
+          }}>
         </devtools-feedback-button>
       </div>
     `, this.#shadow, {

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -9,8 +9,6 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
-import type * as ElementsComponents from './components/components.js';
-
 const {html} = LitHtml;
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
@@ -114,8 +112,6 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
   }];
 }
 
-type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
-
 export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateResult {
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
@@ -123,8 +119,10 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
   const id = getNodeId(sdkNode);
-  return html`<devtools-accessibility-tree-node .data=${
-      {name, role, ignored, properties, id} as Data}></devtools-accessibility-tree-node>`;
+  return html`<devtools-accessibility-tree-node .data=${{
+    name, role, ignored, properties, id,
+  }
+  }></devtools-accessibility-tree-node>`;
 }
 
 export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -304,11 +304,6 @@ export class GridItemValidator extends CSSRuleValidator {
       'grid-row',
       'grid-row-end',
       'grid-row-start',
-      // At the time of writing (November 2022), `justify-self` is only in effect in grid layout.
-      // There are no other browsers that support `justify-self` in other layouts.
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
-      // TODO: move `justify-self` to other validator or change pop-over text if Chrome supports CSS Align in other layouts.
-      'justify-self',
     ]);
   }
 

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
@@ -217,7 +216,6 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
     }
 
     UI.Context.Context.instance().setFlavor(ColorSwatchPopoverIcon, this);
-    Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.STYLES_TAB);
   }
 
   private spectrumResized(): void {

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -51,6 +51,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
         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.ComputedStyleUpdated, this.onComputedStyleChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
       ];
@@ -59,6 +60,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 
   private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|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.
+    if (event?.data && 'nodeId' in event.data && event.data.nodeId !== this.nodeInternal?.id) {
+      return;
+    }
+
     this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
   }
 
@@ -125,8 +132,8 @@ export const enum Events {
 }
 
 export type ComputedStyleChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|
-                                        SDK.CSSModel.StyleSheetChangedEvent|void|SDK.CSSModel.PseudoStateForcedEvent|
-                                        null;
+                                        SDK.CSSModel.StyleSheetChangedEvent|SDK.CSSModel.PseudoStateForcedEvent|
+                                        SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
 
 export type EventTypes = {
   [Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,

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

@@ -0,0 +1,72 @@
+// 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 {createTarget, 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';
+
+describeWithMockConnection('ComputedStyleWidget', () => {
+  let target: SDK.Target.Target;
+  let view: Elements.ComputedStyleWidget.ComputedStyleWidget;
+  let trackComputedStyleUpdatesForNodeSpy: sinon.SinonSpy;
+
+  beforeEach(() => {
+    stubNoopSettings();
+    target = createTarget();
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+    trackComputedStyleUpdatesForNodeSpy =
+        sinon.spy(SDK.CSSModel.CSSModel.prototype, 'trackComputedStyleUpdatesForNode');
+
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    sinon.stub(Elements.ComputedStyleModel.ComputedStyleModel.prototype, 'cssModel').returns(cssModel);
+  });
+
+  afterEach(() => {
+    view.detach();
+  });
+
+  it('tracks computed style updates for the node when the widget is shown', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+  });
+
+  it('tracks computed style updates for the node when the selected node is changed', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+    const newNode = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, newNode);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, newNode.id);
+  });
+
+  it('removes tracking computed style updates for the node when the widget is hidden', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+    view.hideWidget();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, undefined);
+  });
+});

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -291,6 +291,10 @@ 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);
@@ -299,6 +303,14 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   override wasShown(): void {
     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);
   }
 
   override async doUpdate(): Promise<void> {