chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -11,7 +11,9 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import type {AiWidget, ComputedStyleAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type {
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -24,6 +26,8 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
+import * as TimelineComponents from '../../timeline/components/components.js';
+import * as TimelineUtils from '../../timeline/utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
@@ -278,6 +282,7 @@ export interface MessageInput {
     isExpanded: boolean,
     onToggle: (isOpen: boolean) => void,
     isInlined: boolean,
+    activeMessage: ModelChatMessage|null,
   };
 }
 
@@ -483,14 +488,18 @@ function renderStepDetails({
 
 function renderWalkthroughSidebarButton(
     input: ChatMessageViewInput,
-    lastStep: Step,
+    steps: Step[],
     ): Lit.LitTemplate {
   const {message, walkthrough} = input;
-  if (walkthrough.isInlined) {
+  const lastStep = steps.at(-1);
+  if (walkthrough.isInlined || !lastStep) {
     return Lit.nothing;
   }
+
+  const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
   const title = walkthroughTitle({
     isLoading: input.isLoading,
+    hasWidgets: hasOneStepWithWidget,
     lastStep,
   });
 
@@ -505,7 +514,7 @@ function renderWalkthroughSidebarButton(
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.isExpanded) {
+          if(walkthrough.activeMessage === input.message && walkthrough.isExpanded) {
             walkthrough.onToggle(false);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -535,7 +544,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
-      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, lastStep) : Lit.nothing;
+      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, steps) : Lit.nothing;
 
   // If there are side-effect steps, and the walkthrough is not open, we render
   // those inline so that the user can see them and approve them.
@@ -554,6 +563,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 
   // If the walkthrough is inlined (narrow width screens), render it here.
   // Note that we force it open if there is a side-effect.
+
+  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message) ||
+      steps.some(s => s.requestApproval);
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
@@ -562,9 +574,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         isLoading: input.isLoading && input.isLastMessage,
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
-        isExpanded: input.isLastMessage &&
-            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.requestApproval))),
+        isExpanded,
         onToggle: input.walkthrough.onToggle,
+        onOpen: input.walkthrough.onOpen,
       })}></devtools-widget>
     </div>
   ` : Lit.nothing;
@@ -649,37 +661,55 @@ interface WidgetMakerResponse {
   revealable: unknown;
 }
 
+const computedStyleNodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  if (!target) {
-    return null;
-  }
-  const node = new SDK.DOMModel.DeferredDOMNode(
-      target,
-      widgetData.data.backendNodeId,
-  );
-  const resolved = await node.resolvePromise();
-  if (!resolved) {
-    return null;
+  let domNodeForId = computedStyleNodeCache.get(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return null;
+    }
+    const node = new SDK.DOMModel.DeferredDOMNode(
+        target,
+        widgetData.data.backendNodeId,
+    );
+    const resolved = await node.resolvePromise();
+    if (!resolved) {
+      return null;
+    }
+    domNodeForId = resolved;
+    computedStyleNodeCache.set(widgetData.data.backendNodeId, resolved);
   }
-  const model = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(resolved);
-  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(resolved, widgetData.data.computedStyles);
+  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
   const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
     nodeStyle: styles,
     matchedStyles: widgetData.data.matchedCascade,
     // This disables showing the nested traces and detailed information in the widget.
     propertyTraces: null,
-    computedStyleModel: model,
     allowUserControl: false,
     filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
   });
 
   // clang-format off
-    const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(resolved)};
+  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
+}
+
+async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
+  const widgetConfig = UI.Widget.widgetConfig(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data});
+
+  // clang-format off
+  const widget = html`<devtools-widget class="core-vitals-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  // clang-format on
+
+  return {
+    renderedWidget: widget,
+    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)
+  };
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -696,15 +726,17 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class="widget-content-container">
-      ${response.renderedWidget}
-    </div>
-    <div class="widget-reveal-container">
-      <devtools-button class="widget-reveal"
-        .iconName=${'tab-move'}
-        .variant=${Buttons.Button.Variant.TEXT}
-        @click=${onReveal}
-      >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+    <div class="widget-and-revealer-container">
+      <div class="widget-content-container">
+        ${response.renderedWidget}
+      </div>
+      <div class="widget-reveal-container">
+        <devtools-button class="widget-reveal"
+          .iconName=${'tab-move'}
+          .variant=${Buttons.Button.Variant.TEXT}
+          @click=${onReveal}
+        >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+      </div>
     </div>
     `;
   // clang-format on
@@ -716,10 +748,11 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
  * iterates through the `step.widgets` array. For each widget, it determines
  * the appropriate rendering logic based on the `widgetData.name`.
  *
- * Currently, only 'COMPUTED_STYLES' widgets are supported. For these, the
- * `makeComputedStyleWidget` function is called to construct the necessary
+ * Currently, only 'COMPUTED_STYLES' and 'CORE_VITALS' widgets are supported. For these, the
+ * `makeComputedStyleWidget` and `makeCoreVitalsWidget` functions are called to construct the necessary
  * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
- * component. The widget is then rendered using the `<devtools-widget>`
+ * and `TimelineComponents.CWVMetrics.CWVMetrics`
+ * components. The widget is then rendered using the `<devtools-widget>`
  * custom element, which dynamically instantiates and displays the specified
  * UI.Widget subclass with the provided configuration.
  *
@@ -736,6 +769,10 @@ async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
       const response = await makeComputedStyleWidget(widgetData);
       return renderWidgetResponse(response);
     }
+    if (widgetData.name === 'CORE_VITALS') {
+      const response = await makeCoreVitalsWidget(widgetData);
+      return renderWidgetResponse(response);
+    }
     return Lit.nothing;
   }));
   return html`${ui}`;
@@ -994,6 +1031,7 @@ export class ChatMessage extends UI.Widget.Widget {
     onToggle: () => {},
     isInlined: false,
     isExpanded: false,
+    activeMessage: null,
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -25,11 +25,15 @@ const UIStrings = {
   /**
    * @description Title for the walkthrough view.
    */
-  title: 'Investigation steps',
+  title: 'Agent walkthrough',
   /**
-   * @description Title for the button that shows the thinking process (walkthrough).
+   * @description Title for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
   showThinking: 'Show thinking',
+  /**
+   * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
+   */
+  showAgentWalkthrough: 'Show agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -41,14 +45,21 @@ export interface ViewInput {
   isInlined: boolean;
   isExpanded: boolean;
   onToggle: (isOpen: boolean) => void;
+  onOpen: (message: ModelChatMessage) => void;
 }
 
 export function walkthroughTitle(input: {
   isLoading: boolean,
+  hasWidgets: boolean,
   lastStep: Step,
 }): string {
-  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
-  return title;
+  if (input.isLoading) {
+    return titleForStep(input.lastStep);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.showAgentWalkthrough);
+  }
+  return lockedString(UIStrings.showThinking);
 }
 
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
@@ -61,12 +72,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     input.onToggle((event.target as HTMLDetailsElement).open);
   }
 
+  const hasWidgets = steps.some(s => s.widgets?.length);
+
   // clang-format off
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -88,7 +101,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
          <devtools-button
           .data=${{
             variant: Buttons.Button.Variant.TOOLBAR,
-            iconName: 'right-panel-open',
+            iconName: 'cross',
             title: i18nString(UIStrings.close),
             jslogContext: 'close-walkthrough',
           } as Buttons.Button.ButtonData}
@@ -155,6 +168,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
   #onToggle: (isOpen: boolean) => void = () => {};
+  #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
 
@@ -185,6 +199,15 @@ export class WalkthroughView extends UI.Widget.Widget {
     return this.#message;
   }
 
+  get onOpen(): (message: ModelChatMessage) => void {
+    return this.#onOpen;
+  }
+
+  set onOpen(onOpen: (message: ModelChatMessage) => void) {
+    this.#onOpen = onOpen;
+    this.requestUpdate();
+  }
+
   set message(message: ModelChatMessage|null) {
     this.#message = message;
     this.requestUpdate();
@@ -214,6 +237,7 @@ export class WalkthroughView extends UI.Widget.Widget {
           isLoading: this.#isLoading,
           markdownRenderer: this.#markdownRenderer,
           onToggle: this.#onToggle,
+          onOpen: this.#onOpen,
           isInlined: this.#isInlined,
           isExpanded: this.#isExpanded,
           message: this.#message,

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -364,10 +364,13 @@
 
   .step-widgets-wrapper {
     width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sys-size-5);
   }
 
   .widget-reveal-container {
-    width: 100%;
     background: var(--sys-color-surface5);
     border-bottom-right-radius: var(--sys-shape-corner-medium);
     border-bottom-left-radius: var(--sys-shape-corner-medium);
@@ -378,7 +381,6 @@
     padding: var(--sys-size-4);
     border-top-left-radius: var(--sys-shape-corner-medium);
     border-top-right-radius: var(--sys-shape-corner-medium);
-    width: 100%;
     overflow-x: auto;
     background-color: var(--sys-color-surface3);
 

package/front_end/panels/application/IndexedDBModel.ts

@@ -143,8 +143,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     }
 
     for (const [storageBucketName] of this.databaseNamesByStorageKeyAndBucket.get(storageKey) || []) {
-      const storageBucket =
-          this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+      const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
       if (storageBucket) {
         this.removeStorageBucket(storageBucket);
       }
@@ -169,8 +168,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     for (const [storageKey] of this.databaseNamesByStorageKeyAndBucket) {
       const storageBucketNames = this.databaseNamesByStorageKeyAndBucket.get(storageKey)?.keys() || [];
       for (const storageBucketName of storageBucketNames) {
-        const storageBucket =
-            this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+        const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
         if (storageBucket) {
           await this.loadDatabaseNamesByStorageBucket(storageBucket);
         }

package/front_end/panels/application/ServiceWorkersView.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -227,17 +228,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     othersView.show(othersDiv);
     const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
     const othersSectionRow = othersSection.appendRow();
-    const seeOthers =
-        UI.Fragment
-            .html`<a class="devtools-link" role="link" tabindex="0" href="chrome://serviceworker-internals" target="_blank" style="display: inline; cursor: pointer;">${
-                i18nString(UIStrings.seeAllRegistrations)}</a>`;
-    seeOthers.setAttribute('jslog', `${VisualLogging.link('view-all').track({click: true})}`);
-    self.onInvokeElement(seeOthers, event => {
-      const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-      rootTarget &&
-          void rootTarget.targetAgent().invoke_createTarget({url: 'chrome://serviceworker-internals?devtools'});
-      event.consume(true);
-    });
+    const seeOthers = Link.create(
+        'chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations), undefined, 'view-all');
     othersSectionRow.appendChild(seeOthers);
 
     this.toolbar.appendToolbarItem(

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -104,7 +104,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     if (!filter?.regex) {
       return '';
     }
-    const matches = filter.regex.exec(textContent ?? '');
+    const matches = filter.regex.exec(textContent);
     if (!matches?.length) {
       return '';
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -294,7 +294,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  /**
+   * We store these because they are used when calculating the dimensions for the image preview.
+   * When we need to get those dimensions, we try to resolve them against the
+   * node fresh (in case the dimensions have changed), but if that doesn't work,
+   * we fallback to the precomputed ones, which helps to deal with situations
+   * where the node might have been removed from the DOM.
+   */
+  #storedNodeFeatures: Components.ImagePreview.PrecomputedFeatures|null = null;
   #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
   #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   #propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>|null = null;
@@ -363,7 +370,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
           return null;
         },
         async () => {
-          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+          const liveFeatures = await Components.ImagePreview.loadPrecomputedFeatures(this.#nodeStyle?.node);
+          return liveFeatures ?? this.#storedNodeFeatures ?? undefined;
         });
 
     this.#updateView({hasMatches: true});
@@ -430,7 +438,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
   set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
     this.#nodeStyle = nodeStyle;
-    this.requestUpdate();
+    if (nodeStyle) {
+      // Make sure we get the node features before we request an update so we
+      // don't run the update before we have the features fetched.
+      void this.#storeNodeFeatures(nodeStyle.node).then(() => this.requestUpdate());
+    } else {
+      this.requestUpdate();
+    }
   }
 
   get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
@@ -447,13 +461,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
-    return this.#computedStyleModel;
-  }
-
-  set computedStyleModel(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
-    this.#computedStyleModel = computedStyleModel;
-    this.requestUpdate();
+  async #storeNodeFeatures(node: SDK.DOMModel.DOMNode|null): Promise<void> {
+    if (node) {
+      const features = await Components.ImagePreview.loadPrecomputedFeatures(node);
+      this.#storedNodeFeatures = features ?? null;
+    } else {
+      this.#storedNodeFeatures = null;
+    }
   }
 
   #shouldGroupStyles(): boolean {
@@ -483,10 +497,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.#computedStyleModel?.cssModel();
-    if (!cssModel) {
-      return;
-    }
 
     const uniqueProperties = [...nodeStyle.computedStyle.keys()];
     uniqueProperties.sort(propertySorter);
@@ -526,8 +536,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();
-    if (!nodeStyle || !matchedStyles || !cssModel) {
+    if (!nodeStyle || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
     }

package/front_end/panels/elements/ElementsPanel.ts

@@ -316,7 +316,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
     this.#computedStyleWidget = new ComputedStyleWidget();
-    this.#computedStyleWidget.computedStyleModel = this.#computedStyleModel;
     this.#computedStyleModel.addEventListener(
         ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
     this.#computedStyleModel.addEventListener(

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -40,7 +40,16 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       target);
 };
 
-export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesContainer {
+export const enum Events {
+  STYLES_UPDATE_COMPLETED = 'StylesUpdateCompleted',
+}
+
+export interface EventTypes {
+  [Events.STYLES_UPDATE_COMPLETED]: void;
+}
+
+export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   isEditingStyle = false;
   readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();
@@ -49,7 +58,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       new Components.Linkifier.Linkifier(23, /* useLinkDecorator */ true);
 
   #webCustomData: WebCustomData|undefined;
-  #userOperation = false;
+  userOperation = false;
   #sections: StylePropertiesSection[] = [];
   #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
   #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
@@ -58,10 +67,24 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
+    this.#computedStyleModelInternal.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
   }
 
-  get userOperation(): boolean {
-    return this.#userOperation;
+  async #onCSSModelChanged(
+      event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>):
+      Promise<void> {
+    // We only recreate sections if this update is more than an "edit" operation.
+    // Sections will pull their own updates in the case of an "edit".
+    if (event?.data && 'edit' in event.data && event?.data.edit) {
+      return;
+    }
+
+    if (this.isEditingStyle || this.userOperation) {
+      return;
+    }
+
+    this.requestUpdate();
   }
 
   get webCustomData(): WebCustomData|undefined {
@@ -73,10 +96,12 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   async #updateSections(): Promise<void> {
+    for (const section of this.#sections) {
+      section.dispose();
+    }
     const node = this.node();
     if (!node) {
       this.#sections = [];
-      this.requestUpdate();
       return;
     }
 
@@ -106,9 +131,8 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   override async performUpdate(): Promise<void> {
-    if (this.isEditingStyle || this.#userOperation) {
-      return;
-    }
+    this.hideAllPopovers();
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
 
     await this.#updateSections();
 
@@ -116,6 +140,11 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       sections: this.#sections,
     };
     this.#view(viewInput, undefined, this.contentElement);
+    this.#onUpdateFinished();
+  }
+
+  #onUpdateFinished(): void {
+    this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED);
   }
 
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
@@ -154,6 +183,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
     }
 
     if (this.isEditingStyle) {
+      this.#onUpdateFinished();
       return;
     }
 
@@ -161,6 +191,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       section.update(section === editedSection);
     }
     this.swatchPopoverHelper().reposition();
+    this.#onUpdateFinished();
   }
 
   filterRegex(): RegExp|null {
@@ -172,16 +203,19 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   setUserOperation(userOperation: boolean): void {
-    this.#userOperation = userOperation;
+    this.userOperation = userOperation;
   }
 
   forceUpdate(): void {
-    this.hideAllPopovers();
     this.requestUpdate();
   }
 
   hideAllPopovers(): void {
     this.#swatchPopoverHelper.hide();
+    if (this.activeCSSAngle) {
+      this.activeCSSAngle.minify();
+      this.activeCSSAngle = null;
+    }
   }
 
   allSections(): StylePropertiesSection[] {
@@ -246,9 +280,11 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
   }
 
-  addStyleUpdateListener(_listener: () => void): void {
+  addStyleUpdateListener(listener: () => void): void {
+    this.addEventListener(Events.STYLES_UPDATE_COMPLETED, listener);
   }
 
-  removeStyleUpdateListener(_listener: () => void): void {
+  removeStyleUpdateListener(listener: () => void): void {
+    this.removeEventListener(Events.STYLES_UPDATE_COMPLETED, listener);
   }
 }