[Elements] Create one ComputedStyleModel instance per ElementsPanel

We're going to track ComputedStyleUpdated events for nodes
when the Styles tab is open now too in addition to tracking
it only when the ComputedStylesWidget is open.

So, for managing this behavior, I'm moving `ComputedStyleModel`
creation to ElementsPanel and will use the common model
to manage the tracking of computed style updated events
for nodes (Calling `trackComputedStyleUpdatesForNode`).

Bug: 349566291
Change-Id: I2cededce15d6f1c6178218246144a484012b3a31
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6089092
Reviewed-by: Changhao Han <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Changhao Han <[email protected]>

Author: ergunsh

front_end/panels/elements/ComputedStyleModel.ts

@@ -14,9 +14,9 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   private computedStylePromise?: Promise<ComputedStyle|null>;
   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);
   }
 

front_end/panels/elements/ComputedStyleWidget.test.ts

@@ -11,12 +11,14 @@ import * as Elements from './elements.js';
 
 describeWithMockConnection('ComputedStyleWidget', () => {
   let target: SDK.Target.Target;
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
   let view: Elements.ComputedStyleWidget.ComputedStyleWidget;
   let trackComputedStyleUpdatesForNodeSpy: sinon.SinonSpy;
 
   beforeEach(() => {
     stubNoopSettings();
     target = createTarget();
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
     UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
     trackComputedStyleUpdatesForNodeSpy =
         sinon.spy(SDK.CSSModel.CSSModel.prototype, 'trackComputedStyleUpdatesForNode');
@@ -34,7 +36,7 @@ describeWithMockConnection('ComputedStyleWidget', () => {
     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 = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
     view.markAsRoot();
     view.show(document.body);
 
@@ -46,7 +48,7 @@ describeWithMockConnection('ComputedStyleWidget', () => {
     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 = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
     view.markAsRoot();
     view.show(document.body);
 
@@ -62,7 +64,7 @@ describeWithMockConnection('ComputedStyleWidget', () => {
     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 = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
     view.markAsRoot();
     view.show(document.body);
     view.hideWidget();

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,12 @@ 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.showInheritedComputedStylePropertiesSetting =

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';
@@ -279,9 +280,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    this.stylesWidget = new StylesSidebarPane();
-    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')

front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,16 +6,16 @@ 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 {ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
+import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
   private readonly updateThrottler: Common.Throttler.Throttler;
   private updateWhenVisible: boolean;
-  constructor(delegatesFocus?: boolean) {
+  constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
     super(true, delegatesFocus);
     this.element.classList.add('flex-none');
-    this.computedStyleModelInternal = new ComputedStyleModel();
+    this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
 
     this.updateThrottler = new Common.Throttler.Throttler(100);

front_end/panels/elements/MetricsSidebarPane.ts

@@ -36,6 +36,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
@@ -51,8 +52,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   }[];
   private isEditingMetrics?: boolean;
 
-  constructor() {
-    super();
+  constructor(computedStyleModel: ComputedStyleModel) {
+    super(computedStyleModel);
 
     this.originalPropertyData = null;
     this.previousPropertyDataCandidate = null;

front_end/panels/elements/StylePropertiesSection.test.ts

@@ -82,6 +82,11 @@ function setUpStyles(
 }
 
 describeWithMockConnection('StylesPropertySection', () => {
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
+  beforeEach(() => {
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+  });
+
   it('displays the proper sourceURL origin for constructed stylesheets', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
@@ -161,7 +166,7 @@ describeWithMockConnection('StylesPropertySection', () => {
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').set('  ');
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -214,7 +219,7 @@ describeWithMockConnection('StylesPropertySection', () => {
   it('updates property rule property names', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -274,7 +279,7 @@ describeWithMockConnection('StylesPropertySection', () => {
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').set('  ');
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -302,7 +307,7 @@ describeWithMockConnection('StylesPropertySection', () => {
   it('renders active and inactive position-try rule sections correctly', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};

front_end/panels/elements/StylePropertyHighlighter.test.ts

@@ -17,7 +17,8 @@ describeWithMockConnection('StylePropertyHighlighter', () => {
   }> {
     const target = createTarget();
     UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, sinon.createStubInstance(SDK.DOMModel.DOMNode));
-    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    const computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
       cssModel: target.model(SDK.CSSModel.CSSModel)!,
       node: stylesSidebarPane.node() as SDK.DOMModel.DOMNode,

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -21,13 +21,15 @@ import * as Elements from './elements.js';
 
 describeWithMockConnection('StylePropertyTreeElement', () => {
   let stylesSidebarPane: Elements.StylesSidebarPane.StylesSidebarPane;
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
   let mockStylePropertiesSection: sinon.SinonStubbedInstance<Elements.StylePropertiesSection.StylePropertiesSection>;
   let mockCssStyleDeclaration: sinon.SinonStubbedInstance<SDK.CSSStyleDeclaration.CSSStyleDeclaration>;
   let mockMatchedStyles: sinon.SinonStubbedInstance<SDK.CSSMatchedStyles.CSSMatchedStyles>;
   let mockVariableMap: Record<string, string>;
 
   beforeEach(async () => {
-    stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+    stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     mockVariableMap = {
       '--a': 'red',
       '--b': 'blue',

front_end/panels/elements/StylesSidebarPane.test.ts

@@ -49,7 +49,8 @@ describe('StylesSidebarPane', () => {
 
     describe('rebuildSectionsForMatchedStyleRulesForTest', () => {
       it('should add @position-try section', async () => {
-        const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+        const stylesSidebarPane =
+            new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel());
         const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
           cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
           node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
@@ -87,7 +88,8 @@ describe('StylesSidebarPane', () => {
     });
 
     it('should add @font-palette-values section to the end', async () => {
-      const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
+      const stylesSidebarPane =
+          new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel());
       const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
         cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
         node: sinon.createStubInstance(SDK.DOMModel.DOMNode),