chrome-devtools-frontend 1.0.1602348 → 1.0.1603822

package/front_end/panels/application/BackgroundServiceView.ts

@@ -384,15 +384,15 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   }
 
   private createDataGrid(): DataGrid.DataGrid.DataGridImpl<EventData> {
-    const columns = ([
-      {id: 'id', title: '#', weight: 1},
-      {id: 'timestamp', title: i18nString(UIStrings.timestamp), weight: 7},
-      {id: 'event-name', title: i18nString(UIStrings.event), weight: 8},
-      {id: 'origin', title: i18nString(UIStrings.origin), weight: 8},
-      {id: 'storage-key', title: i18nString(UIStrings.storageKey), weight: 8},
-      {id: 'sw-scope', title: i18nString(UIStrings.swScope), weight: 4},
-      {id: 'instance-id', title: i18nString(UIStrings.instanceId), weight: 8},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
+      {id: 'id', title: '#' as Common.UIString.LocalizedString, weight: 1, sortable: false},
+      {id: 'timestamp', title: i18nString(UIStrings.timestamp), weight: 7, sortable: false},
+      {id: 'event-name', title: i18nString(UIStrings.event), weight: 8, sortable: false},
+      {id: 'origin', title: i18nString(UIStrings.origin), weight: 8, sortable: false},
+      {id: 'storage-key', title: i18nString(UIStrings.storageKey), weight: 8, sortable: false},
+      {id: 'sw-scope', title: i18nString(UIStrings.swScope), weight: 4, sortable: false},
+      {id: 'instance-id', title: i18nString(UIStrings.instanceId), weight: 8, sortable: false},
+    ];
     const dataGrid = new DataGrid.DataGrid.DataGridImpl({
       displayName: i18nString(UIStrings.backgroundServices),
       columns,

package/front_end/panels/application/FrameDetailsView.ts

@@ -268,7 +268,7 @@ export interface FrameDetailsReportViewData {
   adScriptAncestry: Protocol.Network.AdAncestry|null;
 }
 
-interface FrameDetailsViewInput {
+export interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
   creationStackTrace: StackTrace.StackTrace.StackTrace|null;
@@ -282,9 +282,9 @@ interface FrameDetailsViewInput {
   onRevealInSources: () => void;
 }
 
-type View = (input: FrameDetailsViewInput, output: undefined, target: HTMLElement) => void;
+export type View = (input: FrameDetailsViewInput, output: undefined, target: HTMLElement) => void;
 
-const DEFAULT_VIEW: View = (input, _output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   if (!input.frame) {
     return;
   }
@@ -892,16 +892,7 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
     const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
     if (result && result.ancestryChain.length > 0) {
       this.#adScriptAncestry = result;
-
-      // Obtain the Target associated with the first ad script, because in most scenarios all
-      // scripts share the same debuggerId. However, discrepancies might arise when content scripts
-      // from browser extensions are involved. We will monitor the debugging experiences and revisit
-      // this approach if it proves problematic.
-      const firstScript = this.#adScriptAncestry.ancestryChain[0];
-      const debuggerModel = firstScript?.debuggerId ?
-          await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(firstScript.debuggerId) :
-          null;
-      this.#target = debuggerModel?.target() ?? null;
+      this.#target = this.#frame?.resourceTreeModel().target() ?? null;
     }
 
     const frame = this.#frame;

package/front_end/panels/application/IndexedDBViews.ts

@@ -320,7 +320,7 @@ export class IDBDataView extends UI.View.SimpleView {
   private createDataGrid(): DataGrid.DataGrid.DataGridImpl<unknown> {
     const keyPath = this.isIndex && this.index ? this.index.keyPath : this.objectStore.keyPath;
 
-    const columns = ([] as DataGrid.DataGrid.ColumnDescriptor[]);
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
 
     // Create column defaults so that we avoid repetition below.
     const columnDefaults: Partial<DataGrid.DataGrid.ColumnDescriptor> = {

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -210,8 +210,8 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
   }
 
   private createDataGrid(): DataGrid.DataGrid.DataGridImpl<DataGridNode> {
-    const columns = ([
-      {id: 'number', title: '#', sortable: false, width: '3px'},
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
+      {id: 'number', title: '#' as Common.UIString.LocalizedString, sortable: false, width: '3px'},
       {id: 'name', title: i18nString(UIStrings.name), weight: 4, sortable: true},
       {
         id: 'response-type',
@@ -237,7 +237,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
         sortable: true,
       },
       {id: 'vary-header', title: i18n.i18n.lockedString('Vary Header'), weight: 1, sortable: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
     const dataGrid = new DataGrid.DataGrid.DataGridImpl({
       displayName: i18nString(UIStrings.serviceWorkerCache),
       columns,

package/front_end/panels/application/components/PermissionsPolicySection.ts

@@ -219,7 +219,7 @@ export class PermissionsPolicySection extends UI.Widget.Widget {
   #view: View;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
-    super(element, {useShadowDom: true});
+    super(element, {useShadowDom: false});
     this.#view = view;
   }
 

package/front_end/panels/application/components/permissionsPolicySection.css

@@ -4,56 +4,58 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: contents;
-}
-
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: 2px;
-}
-
-button.link {
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-.policies-list {
-  padding-top: 3px;
-}
-
-.permissions-row {
-  display: flex;
-  line-height: 22px;
-}
-
-.permissions-row div {
-  padding-right: 5px;
-}
-
-.feature-name {
-  width: 135px;
-}
-
-.allowed-icon {
-  vertical-align: sub;
-}
-
-.block-reason {
-  width: 215px;
-}
-
-.disabled-features-button {
-  padding-left: var(--sys-size-3);
+@scope to (devtools-widget > *) {
+  :scope {
+    display: contents;
+  }
+
+  .text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: 2px;
+  }
+
+  button.link {
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .policies-list {
+    padding-top: 3px;
+  }
+
+  .permissions-row {
+    display: flex;
+    line-height: 22px;
+  }
+
+  .permissions-row div {
+    padding-right: 5px;
+  }
+
+  .feature-name {
+    width: 135px;
+  }
+
+  .allowed-icon {
+    vertical-align: sub;
+  }
+
+  .block-reason {
+    width: 215px;
+  }
+
+  .disabled-features-button {
+    padding-left: var(--sys-size-3);
+  }
 }

package/front_end/panels/application/frameDetailsReportView.css

@@ -79,6 +79,18 @@ button.text-link {
   display: flex;
 }
 
+.inline-items devtools-button {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.inline-items .text-ellipsis {
+  flex: 0 1 auto;
+  min-width: 0;
+  padding-left: 2px;
+}
+
 .span-cols {
   grid-column-start: span 2;
   margin-left: var(--sys-size-9);
@@ -115,4 +127,4 @@ button.text-link {
     color: linktext;
     text-decoration-color: linktext;
   }
-}
+}

package/front_end/panels/common/ThrottlingUtils.ts

@@ -0,0 +1,46 @@
+// Copyright 2026 The Chromium Authors
+// 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 * as CrUXManager from '../../models/crux-manager/crux-manager.js';
+
+export interface ThrottlingRecommendations {
+  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
+  networkConditions: SDK.NetworkManager.Conditions|null;
+}
+
+/**
+ * Computes the recommended CPU and network throttling presets based on CrUX
+ * field metric data.
+ */
+export function getThrottlingRecommendations(): ThrottlingRecommendations {
+  const cruxManager = CrUXManager.CrUXManager.instance();
+  const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+
+  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
+      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+  if (cpuOption.rate() === 0) {
+    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
+  }
+
+  const networkConditions = getRecommendedNetworkConditions(roundTripTimeMetricData);
+
+  return {
+    cpuOption,
+    networkConditions,
+  };
+}
+
+/**
+ * Computes the recommended network throttling preset based on CrUX RTT field
+ * metric data. Returns null if no RTT data is available or no preset matches.
+ */
+export function getRecommendedNetworkConditions(roundTripTimeMetricData?: CrUXManager.MetricResponse):
+    SDK.NetworkManager.Conditions|null {
+  if (roundTripTimeMetricData?.percentiles) {
+    const rtt = Number(roundTripTimeMetricData.percentiles.p75);
+    return SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
+  }
+  return null;
+}

package/front_end/panels/common/common.ts

@@ -109,5 +109,6 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
+export * as ThrottlingUtils from './ThrottlingUtils.js';
 export * as ExtensionIframe from './ExtensionView.js';
 export {CopyChangesToPrompt} from './CopyChangesToPrompt.js';

package/front_end/panels/elements/CSSValueTraceView.ts

@@ -128,6 +128,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       expandPercentagesInShorthands: boolean,
       shorthandPositionOffset: number,
       focus: boolean,
+      signal?: AbortSignal,
       ): Promise<void> {
     const matchedResult = subexpression === null ?
         property.parseValue(matchedStyles, computedStyles) :
@@ -136,7 +137,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       return undefined;
     }
     return await this.#showTrace(
-        property, matchedResult, renderers, expandPercentagesInShorthands, shorthandPositionOffset, focus);
+        property, matchedResult, renderers, expandPercentagesInShorthands, shorthandPositionOffset, focus, signal);
   }
 
   async #showTrace(
@@ -146,6 +147,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       expandPercentagesInShorthands: boolean,
       shorthandPositionOffset: number,
       focus: boolean,
+      signal?: AbortSignal,
       ): Promise<void> {
     this.#highlighting = new Highlighting();
     const rendererMap = new Map(renderers.map(r => [r.matchType, r]));
@@ -165,6 +167,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           /* cssControls */ undefined,
           /* options */ {},
           tracing,
+          signal,
       );
       substitutions.push(Renderer.render(matchedResult.ast.tree, context).nodes);
     }
@@ -180,6 +183,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           /* cssControls */ undefined,
           /* options */ {},
           tracing,
+          signal,
       );
       evaluations.push(Renderer.render(matchedResult.ast.tree, context).nodes);
       asyncCallbackResults.push(tracing.runAsyncEvaluations());
@@ -199,6 +203,10 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           property,
           rendererMap,
           matchedResult,
+          undefined,
+          {},
+          undefined,
+          signal,
       );
       this.#evaluations.push(Renderer.render(matchedResult.ast.tree, context).nodes);
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -331,6 +331,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
+  #enableNarrowViewResizing = true;
   readonly #view: View;
 
   /**
@@ -378,10 +379,19 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   override onResize(): void {
-    const isNarrow = this.contentElement.offsetWidth < 260;
+    const isNarrow = this.#enableNarrowViewResizing && this.contentElement.offsetWidth < 260;
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
+  get enableNarrowViewResizing(): boolean {
+    return this.#enableNarrowViewResizing;
+  }
+
+  set enableNarrowViewResizing(enable: boolean) {
+    this.#enableNarrowViewResizing = enable;
+    this.onResize();
+  }
+
   get filterText(): RegExp|string {
     if (this.#filterIsRegex) {
       return new RegExp(this.#filterText);

package/front_end/panels/elements/PropertiesWidget.ts

@@ -40,7 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import propertiesWidgetStyles from './propertiesWidget.css.js';
@@ -48,6 +48,7 @@ import propertiesWidgetStyles from './propertiesWidget.css.js';
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
 const {bindToSetting} = UI.UIUtils;
+const {repeat} = Directives;
 
 const UIStrings = {
   /**
@@ -75,7 +76,6 @@ interface PropertiesWidgetInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
   onRegexToggled: () => void;
   isRegex: boolean;
-  treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
   allChildrenFiltered: boolean;
 }
@@ -103,7 +103,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       ${input.objectTree && input.allChildrenFiltered ? html`
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
-      ${input.treeOutline.element}
+      <devtools-tree .template=${html`
+        <ul role=tree class="source-code object-properties-section">
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>;
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>;
+          ${repeat(ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(
+                        input.objectTree?.children ?? {},
+                        true /* skipProto */,
+                        true /* skipGettersAndSetters */),
+                   node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
+        </ul>
+      `}></devtools-tree>
     </div>`, target);
   // clang-format on
 };
@@ -218,15 +228,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
 
   override async performUpdate(): Promise<void> {
     await this.#updateNodeIfRequired();
-    if (!this.#objectTree) {
-      this.treeOutline.removeChildren();
-    } else {
-      const treeElement = this.treeOutline.rootElement();
-      treeElement.removeChildren();
-      ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, await this.#objectTree.populateChildrenIfNeeded(), true /* skipProto */,
-          true /* skipGettersAndSetters */);
-    }
+    await this.#objectTree?.populateChildrenIfNeeded();
     const allChildrenFiltered =
         !(this.#objectTree?.children?.accessors?.some(c => !c.isFiltered) ||
           this.#objectTree?.children?.arrayRanges?.some(() => true) ||
@@ -237,7 +239,6 @@ export class PropertiesWidget extends UI.Widget.VBox {
           onFilterChanged: this.onFilterChanged.bind(this),
           onRegexToggled: this.onRegexToggled.bind(this),
           isRegex: this.#isRegex,
-          treeOutline: this.treeOutline,
           allChildrenFiltered,
           objectTree: this.#objectTree,
         },

package/front_end/panels/elements/PropertyRenderer.ts

@@ -354,7 +354,7 @@ export class RenderingContext {
               MatchRenderer<SDK.CSSPropertyParser.Match>>,
       readonly matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
       readonly cssControls?: SDK.CSSPropertyParser.CSSControlMap, readonly options: {readonly?: boolean} = {},
-      readonly tracing?: TracingContext) {
+      readonly tracing?: TracingContext, readonly signal?: AbortSignal) {
   }
 
   addControl(cssType: string, control: HTMLElement): void {
@@ -414,11 +414,12 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
         readonly?: boolean,
       },
       tracing: TracingContext|undefined,
+      signal: AbortSignal|undefined,
   ) {
     super(ast);
     this.#matchedResult = matchedResult;
     this.#context =
-        new RenderingContext(this.ast, property, renderers, this.#matchedResult, cssControls, options, tracing);
+        new RenderingContext(this.ast, property, renderers, this.#matchedResult, cssControls, options, tracing, signal);
   }
 
   static render(nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[], context: RenderingContext):
@@ -430,7 +431,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     const renderers = nodeOrNodes.map(
         node => this.walkExcludingSuccessors(
             context.ast.subtree(node), context.property, context.renderers, context.matchedResult, cssControls,
-            context.options, context.tracing));
+            context.options, context.tracing, context.signal));
     const nodes = renderers.map(node => node.#output).reduce(mergeWithSpacing, []);
     return {nodes, cssControls};
   }
@@ -491,8 +492,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   static renderValueElement(
       property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
       matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
-      tracing?: TracingContext): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+      signal?: AbortSignal): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     const valueElement = document.createElement('span');
     valueElement.setAttribute(
         'jslog', `${VisualLogging.value().track({
@@ -502,7 +503,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     UI.ARIAUtils.setLabel(valueElement, i18nString(UIStrings.cssPropertyValue, {PH1: property.value}));
     valueElement.className = 'value';
     valueElement.tabIndex = -1;
-    const {nodes, cssControls} = this.renderValueNodes(property, matchedResult, renderers, tracing);
+    const {nodes, cssControls} = this.renderValueNodes(property, matchedResult, renderers, tracing, signal);
     nodes.forEach(node => valueElement.appendChild(node));
     valueElement.normalize();
     return {valueElement, cssControls};
@@ -511,8 +512,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   static renderValueNodes(
       property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
       matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
-      tracing?: TracingContext): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+      signal?: AbortSignal): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     if (!matchedResult) {
       return {nodes: [document.createTextNode(property.value)], cssControls: new Map()};
     }
@@ -524,7 +525,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
 
     const context = new RenderingContext(
         matchedResult.ast, property instanceof SDK.CSSProperty.CSSProperty ? property : null, rendererMap,
-        matchedResult, undefined, {}, tracing);
+        matchedResult, undefined, {}, tracing, signal);
     return Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context);
   }
 }

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -114,10 +114,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     return this.#webCustomData;
   }
 
-  async #updateSections(): Promise<void> {
-    for (const section of this.#sections) {
-      section.dispose();
-    }
+  async #updateSections(signal?: AbortSignal): Promise<void> {
     const node = this.node();
     if (!node) {
       this.#sections = [];
@@ -126,6 +123,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
 
     const cssModel = node.domModel().cssModel();
     const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    if (signal?.aborted) {
+      return;
+    }
+
     const parentNodeId = matchedStyles?.getParentLayoutNodeId();
 
     const [parentStyles, computedStyles, extraStyles] = await Promise.all([
@@ -133,6 +134,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       cssModel.getComputedStyleExtraFields(node.id)
     ]);
 
+    if (signal?.aborted) {
+      return;
+    }
+
     if (!matchedStyles) {
       return;
     }
@@ -142,6 +147,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     for (const style of matchedStyles.nodeStyles()) {
       const section = new StylePropertiesSection(
           this, matchedStyles, style, sectionIdx++, computedStyles, parentStyles, extraStyles);
+      section.update(true);
       newSections.push(section);
       this.sectionByElement.set(section.element, section);
     }
@@ -150,7 +156,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     this.swatchPopoverHelper().reposition();
   }
 
-  override async performUpdate(): Promise<void> {
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    await this.#updateSections(signal);
+    signal?.throwIfAborted();
+
     const viewInput: ViewInput = {
       sections: this.#sections.filter(section => !section.isHidden()),
     };
@@ -178,6 +187,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
     this.#computedStyleModelInternal.node = node;
+    this.forceUpdate();
   }
 
   set filter(regex: RegExp|null) {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -44,7 +44,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
@@ -375,55 +374,12 @@ export class StylePropertiesSection {
     this.markSelectorMatches();
     this.onpopulate();
     this.#updateCollapsedState();
-
-    this.stylesContainer.computedStyleModel().addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
   }
 
   setComputedStyles(computedStyles: Map<string, string>|null): void {
     this.computedStyles = computedStyles;
   }
 
-  #onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>):
-      void {
-    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
-    if (edit) {
-      this.styleSheetEdited(edit);
-      void this.refreshComputedValues();
-      return;
-    }
-
-    if (this.stylesContainer.isEditingStyle || this.stylesContainer.userOperation) {
-      void this.refreshComputedValues();
-    }
-  }
-
-  async refreshComputedValues(): Promise<void> {
-    const node = this.stylesContainer.node();
-    if (!node) {
-      return;
-    }
-
-    const cssModel = node.domModel().cssModel();
-    const computedStyleModel = this.stylesContainer.computedStyleModel();
-
-    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
-    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
-
-    const [computedStyles, parentsComputedStyles] = await Promise.all([
-      computedStyleModel.fetchComputedStyle(),
-      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null,
-    ]);
-
-    if (computedStyles) {
-      this.setComputedStyles(computedStyles.computedStyle);
-    }
-    if (parentsComputedStyles) {
-      this.setParentsComputedStyles(parentsComputedStyles);
-    }
-    this.updateAuthoringHint();
-  }
-
   setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
     this.parentsComputedStyles = parentsComputedStyles;
   }
@@ -444,11 +400,6 @@ export class StylePropertiesSection {
     }
   }
 
-  dispose(): void {
-    this.stylesContainer.computedStyleModel().removeEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
-  }
-
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();