chrome-devtools-frontend 1.0.1602348 → 1.0.1603822

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -831,6 +831,9 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
       lightControls: SDK.CSSPropertyParser.CSSControlMap,
       darkControls: SDK.CSSPropertyParser.CSSControlMap): Promise<void> {
     const activeColor = await this.#activeColor(match);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!activeColor) {
       return;
     }
@@ -967,6 +970,9 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
         context.addControl('color', swatch);
         const asyncEvalCallback = async(): Promise<boolean> => {
           const results = await this.#stylesContainer.cssModel()?.resolveValues(undefined, nodeId, colorMixText);
+          if (context.signal?.aborted) {
+            return false;
+          }
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
@@ -1702,6 +1708,10 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<boolean> {
     const pixelValue = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, match.text);
 
+    if (context.signal?.aborted) {
+      return false;
+    }
+
     if (pixelValue?.[0] && pixelValue?.[0] !== match.text) {
       valueElement.textContent = pixelValue[0];
       return true;
@@ -1726,6 +1736,9 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
   async getTooltipValue(
       tooltip: Tooltips.Tooltip.Tooltip, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
     const pixelValue = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, match.text);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!pixelValue) {
       return;
     }
@@ -1799,6 +1812,9 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       return null;
     });
     const evaled = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, value);
+    if (context.signal?.aborted) {
+      return false;
+    }
     if (!evaled?.[0] || evaled[0] === value) {
       return false;
     }
@@ -1815,6 +1831,9 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     const values = match.args.map(arg => context.matchedResult.getComputedTextRange(arg[0], arg[arg.length - 1]));
     values.unshift(context.matchedResult.getComputedText(match.node));
     const evaledArgs = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, ...values);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!evaledArgs) {
       return;
     }
@@ -3495,6 +3514,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
+      this.#clearGhostTextInValue();
     }
   }
 

package/front_end/panels/elements/StylesContainer.ts

@@ -17,7 +17,6 @@ export interface StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   readonly webCustomData: WebCustomData|undefined;
   isEditingStyle: boolean;
-  userOperation: boolean;
   readonly sectionByElement: WeakMap<Node, StylePropertiesSection>;
   readonly element: HTMLElement;
   readonly linkifier: Components.Linkifier.Linkifier;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -189,7 +189,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly decorator: StylePropertyHighlighter;
 
   private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
-  userOperation = false;
+  private userOperation = false;
   isEditingStyle = false;
   #filterRegex: RegExp|null = null;
   #isRegex = false;
@@ -212,6 +212,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   #updateAbortController?: AbortController;
+  #updateComputedStylesAbortController?: AbortController;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
@@ -318,7 +319,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   forceUpdate(): void {
     this.needsForceUpdate = true;
     this.#swatchPopoverHelper.hide();
-    this.#updateAbortController?.abort();
     this.resetCache();
     this.requestUpdate();
   }
@@ -507,10 +507,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.nodeStylesUpdatedForTest(node, false);
   }
 
-  override async performUpdate(): Promise<void> {
-    this.#updateAbortController?.abort();
-    this.#updateAbortController = new AbortController();
-    await this.#innerDoUpdate(this.#updateAbortController.signal);
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    await this.#innerDoUpdate(signal);
 
     // Hide all popovers when scrolling.
     // Styles and Computed panels both have popover (e.g. imagePreviewPopover),
@@ -526,10 +524,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  async #innerDoUpdate(signal: AbortSignal): Promise<void> {
+  async #innerDoUpdate(signal?: AbortSignal): Promise<void> {
     if (!this.initialUpdateCompleted) {
       window.setTimeout(() => {
-        if (signal.aborted) {
+        if (signal?.aborted) {
           return;
         }
         if (!this.initialUpdateCompleted) {
@@ -541,9 +539,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     const matchedStyles = await this.fetchMatchedCascade();
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     this.matchedStyles = matchedStyles;
     const nodeId = this.node()?.id;
@@ -554,16 +550,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.fetchComputedStyleExtraFieldsFor(nodeId)
     ]);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     await this.innerRebuildUpdate(
         signal, this.matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
@@ -698,9 +690,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   override onCSSModelChanged(
       event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>): 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) {
+    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
+    if (edit) {
+      for (const section of this.allSections()) {
+        section.styleSheetEdited(edit);
+      }
+      void this.#refreshComputedStyles();
       return;
     }
 
@@ -723,6 +718,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   #resetUpdateIfNotEditing(): void {
     if (this.userOperation || this.isEditingStyle) {
+      void this.#refreshComputedStyles();
       return;
     }
 
@@ -871,6 +867,28 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
+  async #refreshComputedStyles(): Promise<void> {
+    this.#updateComputedStylesAbortController?.abort();
+    this.#updateAbortController = new AbortController();
+    const signal = this.#updateAbortController.signal;
+    const matchedStyles = await this.fetchMatchedCascade();
+    const nodeId = this.node()?.id;
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
+
+    if (signal.aborted) {
+      return;
+    }
+
+    for (const section of this.allSections()) {
+      section.setComputedStyles(computedStyles);
+      section.setParentsComputedStyles(parentsComputedStyles);
+      section.updateAuthoringHint();
+    }
+  }
+
   focusedSectionIndex(): number {
     let index = 0;
     for (const block of this.sectionBlocks) {
@@ -897,7 +915,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private async innerRebuildUpdate(
-      signal: AbortSignal, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
+      signal: AbortSignal|undefined, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
       computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
@@ -913,9 +931,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     this.linkifier.reset();
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
-    for (const section of prevSections) {
-      section.dispose();
-    }
     this.sectionBlocks = [];
 
     const node = this.node();
@@ -928,12 +943,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     const blocks = await this.rebuildSectionsForMatchedStyleRules(
-        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
+        signal, (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
         computedStyleExtraFields);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     this.sectionBlocks = blocks;
 
@@ -1015,12 +1028,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     return this.rebuildSectionsForMatchedStyleRules(
-        matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
+        undefined, matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
   }
 
   private async rebuildSectionsForMatchedStyleRules(
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null,
+      signal: AbortSignal|undefined, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
@@ -1074,6 +1087,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock && (!isTransitionOrAnimationStyle || style.allProperties().length > 0)) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           const section = new StylePropertiesSection(
               this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
@@ -1147,6 +1163,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         addLayerSeparator(style);
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           const section = new HighlightPseudoStylePropertiesSection(
               this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
@@ -1159,6 +1178,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (const keyframe of keyframesRule.keyframes()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style, sectionIdx));
           sectionIdx++;
         });
@@ -1172,6 +1194,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createAtRuleBlock(expandedByDefault);
       for (const atRule of atRules) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new AtRuleSection(this, matchedStyles, atRule.style, sectionIdx, expandedByDefault));
           sectionIdx++;
         });
@@ -1182,6 +1207,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     for (const positionTryRule of matchedStyles.positionTryRules()) {
       const block = SectionBlock.createPositionTryBlock(positionTryRule.name().text);
       this.idleCallbackManager.schedule(() => {
+        if (signal?.aborted) {
+          return;
+        }
         block.sections.push(new PositionTryRuleSection(
             this, matchedStyles, positionTryRule.style, sectionIdx, positionTryRule.active()));
         sectionIdx++;
@@ -1194,6 +1222,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createRegisteredPropertiesBlock(expandedByDefault);
       for (const propertyRule of matchedStyles.registeredProperties()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new RegisteredPropertiesSection(
               this, matchedStyles, propertyRule.style(), sectionIdx, propertyRule.propertyName(), expandedByDefault));
           sectionIdx++;
@@ -1207,6 +1238,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createFunctionBlock(expandedByDefault);
       for (const functionRule of matchedStyles.functionRules()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new FunctionRuleSection(
               this, matchedStyles, functionRule.style, functionRule.children(), sectionIdx,
               functionRule.nameWithParameters(), expandedByDefault));

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -86,6 +86,11 @@
     font-style: italic;
     pointer-events: none;
   }
+
+  &.ghost-row {
+    /* As there is no checkbox to the left of the ghost rows, explicitly set padding-left */
+    padding-left: 56px;
+  }
 }
 
 .tree-outline > li {

package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts

@@ -85,8 +85,8 @@ export class AffectedSelectivePermissionsInterventionView extends AffectedResour
         <td class="affected-resource-cell">
           <div class="ad-ancestry-list">
             ${(details.adAncestry?.ancestryChain || []).map(script => {
-      const link = this.#linkifier.linkifyScriptLocation(
-          target, script.scriptId, script.name as Platform.DevToolsPath.UrlString, 0);
+      const link =
+          this.#linkifier.linkifyScriptLocation(target, script.scriptId, '' as Platform.DevToolsPath.UrlString, 0);
       return html`<div>${link}</div>`;
     })}
             ${

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -661,6 +661,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       const inspectedURL = await this.getInspectedURL({force: true});
       const categoryIDs = overrides?.categoryIds ?? this.getCategoryIDs();
       const flags = this.getFlags();
+      if (overrides?.mode) {
+        flags.mode = overrides.mode;
+      }
 
       this.recordMetrics(flags, categoryIDs);
 
@@ -783,7 +786,7 @@ export function getRuntimeSettings(): LighthouseModel.RunTypes.RuntimeSetting[]
         title: i18nLazyString(UIStrings.lighthouseMode),
         description: i18nLazyString(UIStrings.runLighthouseInMode),
         setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
-          flags.mode = value;
+          flags.mode = value as LighthouseModel.RunTypes.RunMode;
         },
         options: [
           {

package/front_end/panels/media/EventDisplayTable.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -156,10 +157,10 @@ export class PlayerEventsView extends UI.Widget.VBox {
   private static convertToGridDescriptor(columnConfig: EventDisplayColumnConfig): DataGrid.DataGrid.ColumnDescriptor {
     return {
       id: columnConfig.id,
-      title: columnConfig.title,
+      title: columnConfig.title as Common.UIString.LocalizedString,
       sortable: columnConfig.sortable,
       weight: columnConfig.weight || 0,
       sort: DataGrid.DataGrid.Order.Ascending,
-    } as DataGrid.DataGrid.ColumnDescriptor;
+    };
   }
 }

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -6,9 +6,11 @@ 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 CrUXManager from '../../models/crux-manager/crux-manager.js';
 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 PanelsCommon from '../common/common.js';
 
 import {ThrottlingManager} from './ThrottlingManager.js';
 import type {NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
@@ -185,6 +187,18 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
           select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
         });
+
+    // Subscribe to CrUX field data changes to show recommended throttling
+    // presets based on real-user RTT data.
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const updateRecommendation = (): void => {
+      const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+      select.recommendedConditions =
+          PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
+    };
+    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, updateRecommendation);
+    updateRecommendation();
+
     return select;
   }
 

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -86,12 +86,12 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
     }
     this.mainToolbar.appendToolbarItem(this.filterTextInput);
 
-    const columns = ([
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'id', title: i18nString(UIStrings.id), sortable: true, weight: 8},
       {id: 'type', title: i18nString(UIStrings.type), sortable: true, weight: 8},
       {id: 'data', title: i18nString(UIStrings.data), sortable: false, weight: 88},
       {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 8},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
 
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
       displayName: i18nString(UIStrings.eventSource),

package/front_end/panels/network/ResourceChunkView.ts

@@ -199,7 +199,7 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
         weight: 5,
       },
       {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 7},
-    ] as DataGrid.DataGrid.ColumnDescriptor[];
+    ];
   }
 
   chunkAdded(chunk: Chunk): void {

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -168,11 +168,16 @@ export class DetachedElementsProfileHeader extends WritableProfileHeader {
   readonly #heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null;
   readonly detachedElements: Protocol.DOM.DetachedElementInfo[]|null;
   constructor(
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: DetachedElementsProfileType,
-      detachedElements: Protocol.DOM.DetachedElementInfo[]|null, title?: string) {
+      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null,
+      type: DetachedElementsProfileType,
+      detachedElements: Protocol.DOM.DetachedElementInfo[]|null,
+      title?: string,
+  ) {
     super(
-        heapProfilerModel?.debuggerModel() ?? null, type,
-        title || i18nString(UIStrings.detachedElementProfile, {PH1: type.nextProfileUid()}));
+        heapProfilerModel?.debuggerModel() ?? null,
+        type,
+        title || i18nString(UIStrings.detachedElementProfile, {PH1: type.nextProfileUid()}),
+    );
     this.detachedElements = detachedElements;
     this.#heapProfilerModel = heapProfilerModel;
   }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -457,11 +457,15 @@ export class SamplingHeapProfileHeader extends WritableProfileHeader {
     nodes: never[],
   };
   constructor(
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: SamplingHeapProfileTypeBase,
-      title?: string) {
+      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null,
+      type: SamplingHeapProfileTypeBase,
+      title?: string,
+  ) {
     super(
-        heapProfilerModel?.debuggerModel() ?? null, type,
-        title || i18nString(UIStrings.profileD, {PH1: type.nextProfileUid()}));
+        heapProfilerModel?.debuggerModel() ?? null,
+        type,
+        title || i18nString(UIStrings.profileD, {PH1: type.nextProfileUid()}),
+    );
     this.heapProfilerModelInternal = heapProfilerModel;
     this.protocolProfileInternal = {
       head: {

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -622,28 +622,27 @@ export class HeapSnapshotContainmentDataGrid extends HeapSnapshotSortableDataGri
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate,
       displayName: string, columns?: DataGrid.DataGrid.ColumnDescriptor[]) {
-    columns =
-        columns || ([
-          {id: 'object', title: i18nString(UIStrings.object), disclosure: true, sortable: true},
-          {id: 'distance', title: i18nString(UIStrings.distance), width: '70px', sortable: true, fixedWidth: true},
-          {
-            id: 'shallowSize',
-            title: i18nString(UIStrings.shallowSize),
-            width: '110px',
-            sortable: true,
-            fixedWidth: true,
-          },
-          {
-            id: 'retainedSize',
-            title: i18nString(UIStrings.retainedSize),
-            width: '110px',
-            sortable: true,
-            fixedWidth: true,
-            sort: DataGrid.DataGrid.Order.Descending,
-          },
-        ] as DataGrid.DataGrid.ColumnDescriptor[]);
-    const dataGridParameters = ({displayName, columns} as DataGrid.DataGrid.Parameters);
-    super(heapProfilerModel, dataDisplayDelegate, dataGridParameters);
+    const defaultColumns: DataGrid.DataGrid.ColumnDescriptor[] = [
+      {id: 'object', title: i18nString(UIStrings.object), disclosure: true, sortable: true},
+      {id: 'distance', title: i18nString(UIStrings.distance), width: '70px', sortable: true, fixedWidth: true},
+      {
+        id: 'shallowSize',
+        title: i18nString(UIStrings.shallowSize),
+        width: '110px',
+        sortable: true,
+        fixedWidth: true,
+      },
+      {
+        id: 'retainedSize',
+        title: i18nString(UIStrings.retainedSize),
+        width: '110px',
+        sortable: true,
+        fixedWidth: true,
+        sort: DataGrid.DataGrid.Order.Descending,
+      },
+    ];
+    columns = columns || defaultColumns;
+    super(heapProfilerModel, dataDisplayDelegate, {displayName, columns});
   }
 
   override async setDataSource(snapshot: HeapSnapshotProxy, nodeIndex: number, nodeId?: number): Promise<void> {
@@ -671,7 +670,7 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
   resetRetainersButton: UI.Toolbar.ToolbarButton|undefined;
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate) {
-    const columns = ([
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'object', title: i18nString(UIStrings.object), disclosure: true, sortable: true},
       {
         id: 'distance',
@@ -683,7 +682,7 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
       },
       {id: 'shallowSize', title: i18nString(UIStrings.shallowSize), width: '110px', sortable: true, fixedWidth: true},
       {id: 'retainedSize', title: i18nString(UIStrings.retainedSize), width: '110px', sortable: true, fixedWidth: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
     super(heapProfilerModel, dataDisplayDelegate, i18nString(UIStrings.heapSnapshotRetainment), columns);
   }
 
@@ -751,11 +750,19 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
   filterInProgress?: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|null;
 
   constructor(
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate) {
-    const columns = ([
+      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null,
+      dataDisplayDelegate: DataDisplayDelegate,
+  ) {
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'object', title: i18nString(UIStrings.constructorString), disclosure: true, sortable: true},
       {id: 'distance', title: i18nString(UIStrings.distance), width: '70px', sortable: true, fixedWidth: true},
-      {id: 'shallowSize', title: i18nString(UIStrings.shallowSize), width: '110px', sortable: true, fixedWidth: true},
+      {
+        id: 'shallowSize',
+        title: i18nString(UIStrings.shallowSize),
+        width: '110px',
+        sortable: true,
+        fixedWidth: true,
+      },
       {
         id: 'retainedSize',
         title: i18nString(UIStrings.retainedSize),
@@ -764,7 +771,7 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
         sortable: true,
         fixedWidth: true,
       },
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
     super(
         heapProfilerModel, dataDisplayDelegate,
         ({displayName: i18nString(UIStrings.heapSnapshotConstructors).toString(), columns} as
@@ -845,7 +852,7 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
 
   aggregatesReceived(
       nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter,
-      aggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.Aggregate>,
+      aggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregatedInfo>,
       ): void {
     this.filterInProgress = null;
     if (this.nextRequestedFilter && this.snapshot) {
@@ -904,7 +911,7 @@ export class HeapSnapshotDiffDataGrid extends HeapSnapshotViewportDataGrid {
 
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate) {
-    const columns = ([
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'object', title: i18nString(UIStrings.constructorString), disclosure: true, sortable: true},
       {id: 'addedCount', title: i18nString(UIStrings.New), width: '75px', sortable: true, fixedWidth: true},
       {id: 'removedCount', title: i18nString(UIStrings.Deleted), width: '75px', sortable: true, fixedWidth: true},
@@ -919,7 +926,7 @@ export class HeapSnapshotDiffDataGrid extends HeapSnapshotViewportDataGrid {
       },
       {id: 'removedSize', title: i18nString(UIStrings.freedSize), width: '75px', sortable: true, fixedWidth: true},
       {id: 'sizeDelta', title: i18nString(UIStrings.sizeDelta), width: '75px', sortable: true, fixedWidth: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
     super(
         heapProfilerModel, dataDisplayDelegate,
         ({displayName: i18nString(UIStrings.heapSnapshotDiff).toString(), columns} as DataGrid.DataGrid.Parameters));
@@ -991,7 +998,7 @@ export class AllocationDataGrid extends HeapSnapshotViewportDataGrid {
 
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate) {
-    const columns = ([
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'liveCount', title: i18nString(UIStrings.liveCount), width: '75px', sortable: true, fixedWidth: true},
       {id: 'count', title: i18nString(UIStrings.count), width: '65px', sortable: true, fixedWidth: true},
       {id: 'liveSize', title: i18nString(UIStrings.liveSize), width: '75px', sortable: true, fixedWidth: true},
@@ -1004,7 +1011,7 @@ export class AllocationDataGrid extends HeapSnapshotViewportDataGrid {
         sort: DataGrid.DataGrid.Order.Descending,
       },
       {id: 'name', title: i18nString(UIStrings.function), disclosure: true, sortable: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
     super(
         heapProfilerModel, dataDisplayDelegate,
         ({displayName: i18nString(UIStrings.allocation).toString(), columns} as DataGrid.DataGrid.Parameters));

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1120,7 +1120,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
 
   constructor(
       dataGrid: HeapSnapshotConstructorsDataGrid, classKey: string,
-      aggregate: HeapSnapshotModel.HeapSnapshotModel.Aggregate,
+      aggregate: HeapSnapshotModel.HeapSnapshotModel.AggregatedInfo,
       nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter) {
     super(dataGrid, aggregate.count > 0);
     this.nameInternal = aggregate.name;

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -290,7 +290,7 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
   }
 
   aggregatesWithFilter(filter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter):
-      Promise<Record<string, HeapSnapshotModel.HeapSnapshotModel.Aggregate>> {
+      Promise<Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregatedInfo>> {
     return this.callMethodPromise('aggregatesWithFilter', filter);
   }