ComputedStylesWidget is given styles rather than fetching them.

This CL updates the ComputedStylesWidget so that it does not fetch data
from the model directly. Instead it is provided the latest set of
styles.

This opens the path for using this widget in AI Assistance where we want
to use it to snapshot styles on a node at a point in time.

Bug: 477241796
Change-Id: If14820a45b90a7251916211696b0c1ca24b963e7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7572408
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>

Author: jackfranklin

front_end/models/computed_style/ComputedStyleModel.test.ts

@@ -103,51 +103,47 @@ describeWithMockConnection('ComputedStyleModel', () => {
     sinon.assert.callCount(computedStyleListener, 0);
   });
 
-  it('fetchAllComputedStyleInfo calls the backend and returns the data', async () => {
+  it('fetchMatchedCascade returns null for matchedStyles if the node does not match', async () => {
     const cssModel = domNode1.domModel().cssModel();
     assert.isOk(cssModel);
     computedStyleModel.node = domNode1;
 
-    const mockComputedStyle = new Map([['color', 'red']]);
-    const getComputedStyleStub = sinon.stub(cssModel, 'getComputedStyle').resolves(mockComputedStyle);
-
-    const mockMatchedStyles = await getMatchedStyles({
-      node: domNode1,
+    const domNode2 = createNode(target, {nodeId: 2 as Protocol.DOM.NodeId});
+    const mockMatchedStylesForNode2 = await getMatchedStyles({
+      node: domNode2,
     });
     const cachedMatchedCascadeForNodeStub =
-        sinon.stub(cssModel, 'cachedMatchedCascadeForNode').resolves(mockMatchedStyles);
+        sinon.stub(cssModel, 'cachedMatchedCascadeForNode').resolves(mockMatchedStylesForNode2);
 
-    const result = await computedStyleModel.fetchAllComputedStyleInfo();
-
-    sinon.assert.calledOnce(getComputedStyleStub);
+    const matchedStyles = await computedStyleModel.fetchMatchedCascade();
     sinon.assert.calledOnce(cachedMatchedCascadeForNodeStub);
-
-    assert.deepEqual(result.computedStyle?.computedStyle, mockComputedStyle);
-    assert.deepEqual(result.matchedStyles, mockMatchedStyles);
+    assert.isNull(matchedStyles);
   });
 
-  it('fetchAllComputedStyleInfo returns null for matchedStyles if the node does not match', async () => {
+  it('fetchComputedStyle returns null if the node has become outdated', async () => {
     const cssModel = domNode1.domModel().cssModel();
     assert.isOk(cssModel);
     computedStyleModel.node = domNode1;
 
-    const mockComputedStyle = new Map([['color', 'red']]);
-    const getComputedStyleStub =
-        sinon.stub(cssModel, 'getComputedStyle').resolves(mockComputedStyle as Map<string, string>);
-
     const domNode2 = createNode(target, {nodeId: 2 as Protocol.DOM.NodeId});
-    const mockMatchedStyles = await getMatchedStyles({
-      node: domNode2,
+    // We need to control when this promise resolves, hence using callsFake and
+    // providing the promise manually.
+    const computedStylePromise = Promise.withResolvers<Map<string, string>>();
+    const getComputedStyleStub = sinon.stub(cssModel, 'getComputedStyle').callsFake(() => {
+      return computedStylePromise.promise;
     });
-    const cachedMatchedCascadeForNodeStub =
-        sinon.stub(cssModel, 'cachedMatchedCascadeForNode').resolves(mockMatchedStyles);
-
-    const result = await computedStyleModel.fetchAllComputedStyleInfo();
 
+    // To emulate this scenario we need to:
+    // 1. Set the node to ID=1, and make the fetchComputedStyle() call.
+    const stylesPromise = computedStyleModel.fetchComputedStyle();
+    // 2. Before that resolves, set the node to ID = 2
+    computedStyleModel.node = domNode2;
+    // 3. Resolve the getComputedStyle promise, at which point the node check
+    //    will see that the nodes are different.
+    const mockComputedStyle = new Map([['color', 'red']]);
+    computedStylePromise.resolve(mockComputedStyle);
+    const styles = await stylesPromise;
     sinon.assert.calledOnce(getComputedStyleStub);
-    sinon.assert.calledOnce(cachedMatchedCascadeForNodeStub);
-
-    assert.deepEqual(result.computedStyle?.computedStyle, mockComputedStyle);
-    assert.isNull(result.matchedStyles);
+    assert.isNull(styles);
   });
 });

front_end/models/computed_style/ComputedStyleModel.ts

@@ -125,20 +125,33 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
 
     if (!this.computedStylePromise) {
-      this.computedStylePromise = cssModel.getComputedStyle(nodeId).then(verifyOutdated.bind(this, elementNode));
+      this.computedStylePromise = cssModel.getComputedStyle(nodeId).then(style => {
+        return this.#validateNodeStyles(elementNode, style);
+      });
     }
 
     return await this.computedStylePromise;
+  }
 
-    function verifyOutdated(
-        this: ComputedStyleModel, elementNode: SDK.DOMModel.DOMNode, style: Map<string, string>|null): ComputedStyle|
-        null {
-      return elementNode === this.elementNode() && style ? new ComputedStyle(elementNode, style) :
-                                                           null as ComputedStyle | null;
+  /**
+   * Once we fetch the node's CSS styles, we validate them to ensure that the
+   * active Node didn't change between initiating the request to fetch the
+   * styles and the request returning. If it did, we discard these styles as
+   * outdated.
+   */
+  #validateNodeStyles(node: SDK.DOMModel.DOMNode, styles: Map<string, string>|null): ComputedStyle|null {
+    if (node === this.elementNode() && styles) {
+      return new ComputedStyle(node, styles);
     }
+    return null;
   }
 
-  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
+  /**
+   * Fetches the CSS cascade for the node, including matched rules, inherited
+   * styles, and pseudo-elements.
+   * This allows determining which properties are active or overridden.
+   */
+  async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
     const node = this.node;
     if (!node || !this.cssModel()) {
       return null;
@@ -155,14 +168,6 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
     return matchedStyles.node() === this.node ? matchedStyles : null;
   }
-
-  async fetchAllComputedStyleInfo(): Promise<{
-    computedStyle: ComputedStyle | null,
-    matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
-  }> {
-    const [computedStyle, matchedStyles] = await Promise.all([this.fetchComputedStyle(), this.fetchMatchedCascade()]);
-    return {computedStyle, matchedStyles};
-  }
 }
 
 export const enum Events {

front_end/panels/elements/ComputedStyleWidget.test.ts

@@ -72,6 +72,9 @@ describeWithMockConnection('ComputedStyleWidget', () => {
       const computedStyleWidget = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
       renderElementIntoDOM(computedStyleWidget);
 
+      computedStyleWidget.nodeStyle = {node, computedStyle: new Map([['color', 'red']])};
+      computedStyleWidget.matchedStyles = cssMatchedStyles;
+
       return computedStyleWidget;
     }
 

front_end/panels/elements/ComputedStyleWidget.ts

@@ -38,7 +38,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
+import type * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -296,17 +296,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         >${i18nString(UIStrings.group)}</devtools-checkbox>
       </devtools-toolbar>
     </div>
-    <div class="computed-style-tree-outline-container">
-      ${input.computedStylesTree}
-    </div>
+    ${input.computedStylesTree}
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
     <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
   `, target);
   // clang-format on
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
+  #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null;
@@ -324,11 +324,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
-    this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.#computedStyleModel = computedStyleModel;
 
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
@@ -340,16 +336,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     });
 
     this.filterRegex = null;
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
       const link = event.composedPath()[0];
       if (link instanceof Element) {
         return link;
       }
       return null;
-    }, () => this.computedStyleModel.node);
+    }, () => this.#computedStyleModel.node);
 
     this.#updateView({hasMatches: true});
   }
@@ -377,7 +371,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         {
           computedStylesTree: this.#computedStylesTree,
           hasMatches,
-          computedStyleModel: this.computedStyleModel,
+          computedStyleModel: this.#computedStyleModel,
           showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
           groupComputedStylesSetting: this.groupComputedStylesSetting,
           onFilterChanged: this.onFilterChanged.bind(this),
@@ -386,8 +380,27 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         null, this.contentElement);
   }
 
+  get nodeStyle(): ComputedStyleModule.ComputedStyleModel.ComputedStyle|null {
+    return this.#nodeStyle;
+  }
+
+  set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
+    this.#nodeStyle = nodeStyle;
+    this.requestUpdate();
+  }
+
+  get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
+    return this.#matchedStyles;
+  }
+
+  set matchedStyles(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null) {
+    this.#matchedStyles = matchedStyles;
+    this.requestUpdate();
+  }
+
   override async performUpdate(): Promise<void> {
-    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
+    const nodeStyles = this.#nodeStyle;
+    const matchedStyles = this.#matchedStyles;
     if (!nodeStyles || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
@@ -405,7 +418,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel.cssModel();
     if (!cssModel) {
       return;
     }
@@ -448,7 +461,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
       this.#updateView({hasMatches: false});
       return;

front_end/panels/elements/ElementsPanel.test.ts

@@ -9,7 +9,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import {raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
-import {expectCall} from '../../testing/ExpectStubCall.js';
+import {expectCall, expectCalled} from '../../testing/ExpectStubCall.js';
 import {
   describeWithMockConnection,
   dispatchEvent,
@@ -213,7 +213,7 @@ describeWithMockConnection('ElementsPanel', () => {
     panel.detach();
   });
 
-  describe('tracking Computed styles', () => {
+  describe('tracking and updating Computed styles', () => {
     const StylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane;
     const ComputedStyleModel = ComputedStyle.ComputedStyleModel.ComputedStyleModel;
     const ComputedStyleWidget = Elements.ComputedStyleWidget.ComputedStyleWidget;
@@ -222,12 +222,16 @@ describeWithMockConnection('ElementsPanel', () => {
       get: sinon.SinonSpy,
       set: sinon.SinonSpy,
     };
+    let computedStyleFetchStylesSpy: sinon.SinonStub;
+    let computedStyleFetchCascadeSpy: sinon.SinonStub;
     let panel: Elements.ElementsPanel.ElementsPanel;
     let node: SDK.DOMModel.DOMNode;
     let cssModel: sinon.SinonStubbedInstance<SDK.CSSModel.CSSModel>;
 
     beforeEach(() => {
       computedStyleNodeSpy = sinon.spy(ComputedStyleModel.prototype, 'node', ['get', 'set']);
+      computedStyleFetchStylesSpy = sinon.stub(ComputedStyleModel.prototype, 'fetchComputedStyle').resolves(null);
+      computedStyleFetchCascadeSpy = sinon.stub(ComputedStyleModel.prototype, 'fetchMatchedCascade').resolves(null);
       Common.Debouncer.enableTestOverride();
       panel = Elements.ElementsPanel.ElementsPanel.instance({forceNew: true});
 
@@ -256,6 +260,12 @@ describeWithMockConnection('ElementsPanel', () => {
       sinon.assert.calledOnceWithExactly(computedStyleNodeSpy.set, node);
     });
 
+    it('fetches the styles from the computed style model when the dom node changes', async () => {
+      UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+      await expectCalled(computedStyleFetchStylesSpy);
+      await expectCalled(computedStyleFetchCascadeSpy);
+    });
+
     it('enables tracking when a ComputedStyleWidget is created', async () => {
       UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
       const computedStylesWidget = sinon.createStubInstance(ComputedStyleWidget);

front_end/panels/elements/ElementsPanel.ts

@@ -212,7 +212,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private readonly accessibilityTreeView: AccessibilityTreeView|undefined;
   private breadcrumbs: ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs;
   stylesWidget: StylesSidebarPane;
-  private readonly computedStyleWidget: ComputedStyleWidget;
+  readonly #computedStyleWidget: ComputedStyleWidget;
   private readonly metricsWidget: MetricsSidebarPane;
   private searchResults!: Array<{
     domModel: SDK.DOMModel.DOMModel,
@@ -315,7 +315,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
-    this.computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.#computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#updateComputedStyles, this);
+
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
     Common.Settings.Settings.instance()
@@ -374,6 +379,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         shouldTrackComputedStyleUpdates ? selectedNode.id : undefined);
   }, 100);
 
+  async #updateComputedStyles(): Promise<void> {
+    const computedStyle = await this.#computedStyleModel.fetchComputedStyle();
+    const matchedCascade = await this.#computedStyleModel.fetchMatchedCascade();
+    this.#computedStyleWidget.nodeStyle = computedStyle;
+    this.#computedStyleWidget.matchedStyles = matchedCascade;
+  }
+
   private handleElementExpanded(): void {
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
@@ -1007,7 +1019,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const computedStylePanesWrapper = new UI.Widget.VBox();
     computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
     computedStylePanesWrapper.element.setAttribute('jslog', `${VisualLogging.pane('computed').track({resize: true})}`);
-    this.computedStyleWidget.show(computedStylePanesWrapper.element);
+    this.#computedStyleWidget.show(computedStylePanesWrapper.element);
 
     const stylesSplitWidget = new UI.SplitWidget.SplitWidget(
         true /* isVertical */, true /* secondIsSidebar */, 'elements.styles.sidebar.width', 100);
@@ -1024,7 +1036,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
 
     const showMetricsWidgetInComputedPane = (): void => {
-      this.metricsWidget.show(computedStylePanesWrapper.element, this.computedStyleWidget.element);
+      this.metricsWidget.show(computedStylePanesWrapper.element, this.#computedStyleWidget.element);
       this.stylesWidget.removeEventListener(StylesSidebarPaneEvents.STYLES_UPDATE_COMPLETED, toggleMetricsWidget);
     };
 
@@ -1147,7 +1159,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   getComputedStyleWidget(): ComputedStyleWidget {
-    return this.computedStyleWidget;
+    return this.#computedStyleWidget;
   }
 
   private setupStyleTracking(cssModel: SDK.CSSModel.CSSModel): void {

front_end/panels/elements/computedStyleWidget.css

@@ -14,12 +14,7 @@
     width: 100%;
   }
 
-  .styles-sidebar-computed-style-widget {
-    min-height: auto;
-  }
-
-  .computed-style-tree-outline-container {
-    flex-grow: 1;
+  devtools-tree-outline {
     flex-shrink: 0;
   }