From db6207a441bc12e54cb93f71df99b148e58cfb24 Mon Sep 17 00:00:00 2001
From: Ergun Erdogmus <ergunsh@chromium.org>
Date: Wed, 4 Dec 2024 13:07:23 +0100
Subject: [PATCH] [Elements] Rename `ComputedStyleChanged` event to
 `CSSModelChanged`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`ComputedStyleChanged` event does not directly reflect
the occasions where this event is emitted.

For example, it might be that a new StyleSheet added
to the CSSModel that didn't change the computed
styles of the node. So, we rename the event to be
`CSSModelChanged`.

Bug: 349566291
Change-Id: I341713ed591e0d88c1842ed5f6bb3cc0c32fae41
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6069996
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
---
 .../panels/elements/ComputedStyleModel.ts     | 35 +++++++++----------
 .../panels/elements/ComputedStyleWidget.ts    |  2 +-
 .../panels/elements/ElementsSidebarPane.ts    |  6 ++--
 .../panels/elements/PlatformFontsWidget.ts    |  2 +-
 .../panels/elements/StylesSidebarPane.ts      |  4 +--
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/front_end/panels/elements/ComputedStyleModel.ts b/front_end/panels/elements/ComputedStyleModel.ts
index 47d7232b59..d383b7a9b9 100644
--- a/front_end/panels/elements/ComputedStyleModel.ts
+++ b/front_end/panels/elements/ComputedStyleModel.ts
@@ -31,7 +31,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   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);
   }
 
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
@@ -44,21 +44,21 @@ 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.ComputedStyleUpdated, 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.onCSSModelChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
       ];
     }
   }
 
-  private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|null): void {
+  private onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>|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 +66,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
       return;
     }
 
-    this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
+    this.dispatchEventToListeners(Events.CSS_MODEL_CHANGED, event?.data ?? null);
   }
 
   private onDOMModelChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
@@ -77,12 +77,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 +128,14 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 }
 
 export const enum Events {
-  COMPUTED_STYLE_CHANGED = 'ComputedStyleChanged',
+  CSS_MODEL_CHANGED = 'CSSModelChanged',
 }
 
-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|SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
 
 export type EventTypes = {
-  [Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,
+  [Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent,
 };
 
 export class ComputedStyle {
diff --git a/front_end/panels/elements/ComputedStyleWidget.ts b/front_end/panels/elements/ComputedStyleWidget.ts
index b91c0c83e5..36acc8418a 100644
--- a/front_end/panels/elements/ComputedStyleWidget.ts
+++ b/front_end/panels/elements/ComputedStyleWidget.ts
@@ -248,7 +248,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
     this.computedStyleModel = new ComputedStyleModel();
-    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
 
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
diff --git a/front_end/panels/elements/ElementsSidebarPane.ts b/front_end/panels/elements/ElementsSidebarPane.ts
index bff355c57c..19bf6ecf10 100644
--- a/front_end/panels/elements/ElementsSidebarPane.ts
+++ b/front_end/panels/elements/ElementsSidebarPane.ts
@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type ComputedStyleChangedEvent, ComputedStyleModel, Events} from './ComputedStyleModel.js';
+import {ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
@@ -16,7 +16,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     super(true, delegatesFocus);
     this.element.classList.add('flex-none');
     this.computedStyleModelInternal = new ComputedStyleModel();
-    this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onCSSModelChanged, this);
+    this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
 
     this.updateThrottler = new Common.Throttler.Throttler(100);
     this.updateWhenVisible = false;
@@ -57,6 +57,6 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent|null>): void {
+  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
 }
diff --git a/front_end/panels/elements/PlatformFontsWidget.ts b/front_end/panels/elements/PlatformFontsWidget.ts
index 1eca2c3e53..cf8f0851a2 100644
--- a/front_end/panels/elements/PlatformFontsWidget.ts
+++ b/front_end/panels/elements/PlatformFontsWidget.ts
@@ -80,7 +80,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
     super(true);
 
     this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.sharedModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
 
     this.sectionTitle = document.createElement('div');
     this.sectionTitle.classList.add('title');
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
index ee3aef237c..6d2234f904 100644
--- a/front_end/panels/elements/StylesSidebarPane.ts
+++ b/front_end/panels/elements/StylesSidebarPane.ts
@@ -53,7 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
-import {type ComputedStyleChangedEvent, ComputedStyleModel} from './ComputedStyleModel.js';
+import {ComputedStyleModel, type CSSModelChangedEvent} from './ComputedStyleModel.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -859,7 +859,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>): void {
+  override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>): void {
     const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
     if (edit) {
       for (const section of this.allSections()) {