chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/network/components/WebBundleInfoView.ts

@@ -2,22 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/data_grid/data_grid.js';
+import '../../../ui/legacy/components/data_grid/data_grid.js';
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import {PanelUtils} from '../../../panels/utils/utils.js';
-import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import webBundleInfoViewStyles from './WebBundleInfoView.css.js';
+import webBundleInfoViewStylesRaw from './WebBundleInfoView.css.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const webBundleInfoViewStyles = new CSSStyleSheet();
+webBundleInfoViewStyles.replaceSync(webBundleInfoViewStylesRaw.cssContent);
+
+const {mimeFromURL, fromMimeTypeOverride, fromMimeType} = Common.ResourceType.ResourceType;
+const {iconDataForResourceType} = PanelUtils;
+
+type IconData = IconButton.Icon.IconData;
 
 const UIStrings = {
   /**
@@ -49,34 +55,11 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
   }
 
   override async render(): Promise<void> {
-    const rows = this.#webBundleInfo.resourceUrls?.map(url => {
-      const mimeType = Common.ResourceType.ResourceType.mimeFromURL(url) || null;
-      const resourceType = Common.ResourceType.ResourceType.fromMimeTypeOverride(mimeType) ||
-          Common.ResourceType.ResourceType.fromMimeType(mimeType);
-      const iconData = PanelUtils.iconDataForResourceType(resourceType);
-      return {
-        cells: [
-          {
-            columnId: 'url',
-            value: null,
-            renderer(): LitHtml.TemplateResult {
-              return html`
-                <div style="display: flex;">
-                  <devtools-icon class="icon"
-                    .data=${{...iconData, width: '20px'} as IconButton.Icon.IconData}>
-                  </devtools-icon>
-                  <span>${url}</span>
-                </div>`;
-            },
-          },
-        ],
-      };
-    });
-    render(
-        html`
+    // clang-format off
+    render(html`
       <div class="header">
         <devtools-icon class="icon"
-          .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconButton.Icon.IconData}>
+          .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconData}>
         </devtools-icon>
         <span>${this.#webBundleName}</span>
         <x-link href="https://web.dev/web-bundles/#explaining-web-bundles"
@@ -84,28 +67,28 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
           click: true,
         })}>
           <devtools-icon class="icon"
-            .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconButton.Icon.IconData}>
+            .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconData}>
           </devtools-icon>
         </x-link>
       </div>
-      <div>
-        <devtools-data-grid
-          .data=${{
-          columns: [
-            {
-              id: 'url',
-              title: i18nString(UIStrings.bundledResource),
-              widthWeighting: 1,
-              visible: true,
-              hideable: false,
-            },
-          ],
-          rows,
-          activeSort: null,
-        } as DataGrid.DataGrid.DataGridData}>
-        </devtools-data-grid>
-      </div>`,
+      <devtools-data-grid striped>
+        <table>
+          <tr><th id="url">${i18nString(UIStrings.bundledResource)}</th></tr>
+          ${this.#webBundleInfo.resourceUrls?.map(url => {
+            const mimeType = mimeFromURL(url) || null;
+            const resourceType = fromMimeTypeOverride(mimeType) || fromMimeType(mimeType);
+            const iconData = iconDataForResourceType(resourceType);
+            return html`<tr><td>
+                <div style="display: flex;">
+                  <devtools-icon class="icon" .data=${{...iconData, width: '20px'} as IconData}>
+                  </devtools-icon>
+                  <span>${url}</span>
+                </div></td></tr>`;
+        })}
+        </table>
+      </devtools-data-grid>`,
         this.#shadow, {host: this});
+    // clang-format on
   }
 }
 

package/front_end/panels/network/network-meta.ts

@@ -5,11 +5,11 @@
 import * as Common from '../../core/common/common.js';
 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 * as Extensions from '../../models/extensions/extensions.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import * as NetworkForward from './forward/forward.js';
 import type * as Network from './network.js';
@@ -144,6 +144,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStr
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 let loadedNetworkModule: (typeof Network|undefined);
 
+const isNode = Root.Runtime.Runtime.isNode();
+
 async function loadNetworkModule(): Promise<typeof Network> {
   if (!loadedNetworkModule) {
     loadedNetworkModule = await import('./network.js');
@@ -164,6 +166,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showNetwork),
   title: i18nLazyString(UIStrings.network),
   order: 40,
+  isPreviewFeature: isNode,
   async loadView() {
     const Network = await loadNetworkModule();
     return Network.NetworkPanel.NetworkPanel.instance();
@@ -439,7 +442,7 @@ UI.ContextMenu.registerProvider({
       SDK.NetworkRequest.NetworkRequest,
       SDK.Resource.Resource,
       Workspace.UISourceCode.UISourceCode,
-      TimelineUtils.NetworkRequest.TimelineNetworkRequest,
+      SDK.TraceObject.RevealableNetworkRequest,
     ];
   },
   async loadProvider() {

package/front_end/panels/network/networkConfigView.css

@@ -54,7 +54,7 @@
 }
 /* Network throttling */
 
-.network-config-throttling .chrome-select {
+.network-config-throttling select {
   width: 100%;
   max-width: 250px;
 }
@@ -74,11 +74,11 @@
 }
 
 .network-config-ua input[type="text"],
-.network-config-ua .chrome-select {
+.network-config-ua select {
   margin-top: 8px;
 }
 
-.network-config-ua .chrome-select {
+.network-config-ua select {
   width: calc(100% - 20px);
   max-width: 250px;
 }

package/front_end/panels/network/networkLogView.css

@@ -57,7 +57,7 @@
   user-select: text;
 }
 
-.panel.network .toolbar.network-summary-bar {
+.panel.network devtools-toolbar.network-summary-bar {
   border-bottom: 0;
 }
 

package/front_end/panels/network/networkManageCustomHeadersView.css

@@ -6,17 +6,14 @@
 
 .custom-headers-list {
   height: 272px;
-  width: 250px;
-}
-
-.custom-headers-wrapper {
-  margin: 10px;
+  width: var(--sys-size-29);
+  margin: 0 var(--sys-size-8);
 }
 
 .header {
-  padding: 0 0 6px;
-  font-size: 18px;
-  font-weight: normal;
+  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
+  padding-top: var(--sys-size-3);
+  font: var(--sys-typescale-body2-medium);
   flex: none;
 }
 
@@ -33,7 +30,6 @@
 }
 
 .add-button {
-  width: 150px;
-  margin: auto;
-  margin-top: 5px;
+  margin: var(--sys-size-6) auto var(--sys-size-8) var(--sys-size-8);
+  align-items: flex-start;
 }

package/front_end/panels/network/networkPanel.css

@@ -147,30 +147,27 @@
 }
 
 .network-settings-pane {
+  display: grid;
+  grid-template-columns: 50% 50%;
   flex: none;
   background-color: var(--sys-color-cdt-base-container);
-}
-
-.network-settings-pane .toolbar {
-  flex: 1 1;
+  border-bottom: 1px solid var(--sys-color-divider);
 }
 
 .network-toolbar-container {
   display: flex;
+  align-items: flex-start;
   flex: none;
-}
-
-.network-toolbar-container > :first-child {
-  flex: 1 1 auto;
-}
-
-.panel.network .toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
+
+  & > :first-child {
+    flex: 1 1 auto;
+  }
 }
 
 @media (forced-colors: active) {
-  .panel.network .toolbar {
+  .panel.network devtools-toolbar {
     background-color: canvas;
   }
 }

package/front_end/panels/network/requestInitiatorView.css

@@ -5,6 +5,6 @@
  */
 
 .request-initiator-view {
-  display: block;
+  display: flex;
   margin: 6px;
 }

package/front_end/panels/network/webSocketFrameView.css

@@ -47,6 +47,6 @@
   color: var(--sys-color-on-surface-error);
 }
 
-.websocket-frame-view .toolbar {
+.websocket-frame-view devtools-toolbar {
   border-bottom: 1px solid var(--sys-color-divider);
 }

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -77,6 +77,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
 
   constructor(pollIntervalMs: number = 500) {
     super(true);
+    this.registerRequiredCSS(performanceMonitorStyles);
 
     this.element.setAttribute('jslog', `${VisualLogging.panel('performance.monitor').track({resize: true})}`);
 
@@ -106,7 +107,6 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     if (!this.model) {
       return;
     }
-    this.registerCSSFiles([performanceMonitorStyles]);
     this.controlPane.instantiateMetricData();
     const themeSupport = ThemeSupport.ThemeSupport.instance();
     themeSupport.addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
@@ -619,9 +619,9 @@ const enum Events {
   METRIC_CHANGED = 'MetricChanged',
 }
 
-type EventTypes = {
-  [Events.METRIC_CHANGED]: void,
-};
+interface EventTypes {
+  [Events.METRIC_CHANGED]: void;
+}
 
 let numberFormatter: Intl.NumberFormat;
 let percentFormatter: Intl.NumberFormat;

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -153,11 +153,11 @@ export namespace DetachedElementsProfileType {
     DETACHED_ELEMENTS_OBTAINED = 'DetachedElementsObtained',
   }
 
-  export type EventTypes = {
-    [Events.RECORDING_STOPPED]: void,
-    [Events.STATS_UPDATE]: Protocol.HeapProfiler.SamplingHeapProfile|null,
-    [Events.DETACHED_ELEMENTS_OBTAINED]: Protocol.DOM.DetachedElementInfo[]|null,
-  };
+  export interface EventTypes {
+    [Events.RECORDING_STOPPED]: void;
+    [Events.STATS_UPDATE]: Protocol.HeapProfiler.SamplingHeapProfile|null;
+    [Events.DETACHED_ELEMENTS_OBTAINED]: Protocol.DOM.DetachedElementInfo[]|null;
+  }
 }
 
 export class DetachedElementsProfileHeader extends WritableProfileHeader {

package/front_end/panels/profiler/HeapProfileView.ts

@@ -28,11 +28,11 @@ const UIStrings = {
   /**
    *@description Name of column header that reports the size (in terms of bytes) used for a particular part of the heap, excluding the size of the children nodes of this part of the heap
    */
-  selfSizeBytes: 'Self size (bytes)',
+  selfSizeBytes: 'Self size',
   /**
    *@description Name of column header that reports the total size (in terms of bytes) used for a particular part of the heap
    */
-  totalSizeBytes: 'Total size (bytes)',
+  totalSizeBytes: 'Total size',
   /**
    *@description Button text to stop profiling the heap
    */
@@ -431,10 +431,10 @@ export namespace SamplingHeapProfileType {
     STATS_UPDATE = 'StatsUpdate',
   }
 
-  export type EventTypes = {
-    [Events.RECORDING_STOPPED]: void,
-    [Events.STATS_UPDATE]: Protocol.HeapProfiler.SamplingHeapProfile|null,
-  };
+  export interface EventTypes {
+    [Events.RECORDING_STOPPED]: void;
+    [Events.STATS_UPDATE]: Protocol.HeapProfiler.SamplingHeapProfile|null;
+  }
 }
 
 export class SamplingHeapProfileHeader extends WritableProfileHeader {
@@ -588,7 +588,7 @@ export class NodeFormatter implements Formatter {
   }
 
   formatValue(value: number): string {
-    return Platform.NumberUtilities.withThousandsSeparator(value);
+    return i18n.ByteUtilities.bytesToString(value);
   }
 
   formatValueAccessibleText(value: number): string {

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -418,11 +418,11 @@ export enum HeapSnapshotSortableDataGridEvents {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type EventTypes = {
-  [HeapSnapshotSortableDataGridEvents.ContentShown]: HeapSnapshotSortableDataGrid,
-  [HeapSnapshotSortableDataGridEvents.SortingComplete]: void,
-  [HeapSnapshotSortableDataGridEvents.ExpandRetainersComplete]: void,
-};
+export interface EventTypes {
+  [HeapSnapshotSortableDataGridEvents.ContentShown]: HeapSnapshotSortableDataGrid;
+  [HeapSnapshotSortableDataGridEvents.SortingComplete]: void;
+  [HeapSnapshotSortableDataGridEvents.ExpandRetainersComplete]: void;
+}
 
 export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
   topPaddingHeight: number;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -536,9 +536,9 @@ export namespace HeapSnapshotGridNode {
     /* eslint-enable @typescript-eslint/naming-convention */
   }
 
-  export type EventTypes = {
-    [Events.PopulateComplete]: void,
-  };
+  export interface EventTypes {
+    [Events.PopulateComplete]: void;
+  }
 }
 
 export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode {
@@ -582,10 +582,11 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
     const snapshot = (dataGrid.snapshot as HeapSnapshotProxy);
     const shallowSizePercent = this.shallowSize / snapshot.totalSize * 100.0;
     const retainedSizePercent = this.retainedSize / snapshot.totalSize * 100.0;
+
     this.data = {
       distance: this.toUIDistance(this.distance),
-      shallowSize: Platform.NumberUtilities.withThousandsSeparator(this.shallowSize),
-      retainedSize: Platform.NumberUtilities.withThousandsSeparator(this.retainedSize),
+      shallowSize: i18n.ByteUtilities.bytesToString(this.shallowSize),
+      retainedSize: i18n.ByteUtilities.bytesToString(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
     };
@@ -1035,10 +1036,10 @@ export class HeapSnapshotInstanceNode extends HeapSnapshotGenericObjectNode {
       data['addedCount'] = '';
       data['addedSize'] = '';
       data['removedCount'] = '\u2022';
-      data['removedSize'] = Platform.NumberUtilities.withThousandsSeparator(this.shallowSize || 0);
+      data['removedSize'] = i18n.ByteUtilities.bytesToString(this.shallowSize || 0);
     } else {
       data['addedCount'] = '\u2022';
-      data['addedSize'] = Platform.NumberUtilities.withThousandsSeparator(this.shallowSize || 0);
+      data['addedSize'] = i18n.ByteUtilities.bytesToString(this.shallowSize || 0);
       data['removedCount'] = '';
       data['removedSize'] = '';
     }
@@ -1132,8 +1133,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
       object: this.nameInternal,
       count: Platform.NumberUtilities.withThousandsSeparator(this.count),
       distance: this.toUIDistance(this.distance),
-      shallowSize: Platform.NumberUtilities.withThousandsSeparator(this.shallowSize),
-      retainedSize: Platform.NumberUtilities.withThousandsSeparator(this.retainedSize),
+      shallowSize: i18n.ByteUtilities.bytesToString(this.shallowSize),
+      retainedSize: i18n.ByteUtilities.bytesToString(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
     };
@@ -1301,10 +1302,9 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
       removedCount: Platform.NumberUtilities.withThousandsSeparator(this.removedCount),
       countDelta: this.signForDelta(this.countDelta) +
           Platform.NumberUtilities.withThousandsSeparator(Math.abs(this.countDelta)),
-      addedSize: Platform.NumberUtilities.withThousandsSeparator(this.addedSize),
-      removedSize: Platform.NumberUtilities.withThousandsSeparator(this.removedSize),
-      sizeDelta:
-          this.signForDelta(this.sizeDelta) + Platform.NumberUtilities.withThousandsSeparator(Math.abs(this.sizeDelta)),
+      addedSize: i18n.ByteUtilities.bytesToString(this.addedSize),
+      removedSize: i18n.ByteUtilities.bytesToString(this.removedSize),
+      sizeDelta: this.signForDelta(this.sizeDelta) + i18n.ByteUtilities.bytesToString(Math.abs(this.sizeDelta)),
     };
   }
 
@@ -1400,8 +1400,8 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
     this.data = {
       liveCount: Platform.NumberUtilities.withThousandsSeparator(data.liveCount),
       count: Platform.NumberUtilities.withThousandsSeparator(data.count),
-      liveSize: Platform.NumberUtilities.withThousandsSeparator(data.liveSize),
-      size: Platform.NumberUtilities.withThousandsSeparator(data.size),
+      liveSize: i18n.ByteUtilities.bytesToString(data.liveSize),
+      size: i18n.ByteUtilities.bytesToString(data.size),
       name: data.name,
     };
   }

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -210,9 +210,9 @@ export namespace HeapSnapshotWorkerProxy {
     WAIT = 'Wait',
   }
 
-  export type EventTypes = {
-    [Events.WAIT]: boolean,
-  };
+  export interface EventTypes {
+    [Events.WAIT]: boolean;
+  }
 }
 
 export class HeapSnapshotProxyObject {

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -124,6 +124,14 @@ const UIStrings = {
    *@description Label on a pie chart in the statistics view for the Heap Snapshot tool
    */
   systemObjects: 'System objects',
+  /**
+   *@description Label on a pie chart in the statistics view for the Heap Snapshot tool
+   */
+  otherJSObjects: 'Other JS objects',
+  /**
+   *@description Label on a pie chart in the statistics view for the Heap Snapshot tool
+   */
+  otherNonJSObjects: 'Other non-JS objects (such as HTML and CSS)',
   /**
    *@description The reported total size used in the selected time frame of the allocation sampling profile
    *@example {3 MB} PH1
@@ -584,13 +592,25 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   async retrieveStatistics(heapSnapshotProxy: HeapSnapshotProxy):
       Promise<HeapSnapshotModel.HeapSnapshotModel.Statistics> {
     const statistics = await heapSnapshotProxy.getStatistics();
+    const {v8heap, native} = statistics;
+    const otherJSObjectsSize = v8heap.total - v8heap.code - v8heap.strings - v8heap.jsArrays - v8heap.system;
 
     const records = [
-      {value: statistics.code, color: '#f77', title: i18nString(UIStrings.code)},
-      {value: statistics.strings, color: '#5e5', title: i18nString(UIStrings.strings)},
-      {value: statistics.jsArrays, color: '#7af', title: i18nString(UIStrings.jsArrays)},
-      {value: statistics.native, color: '#fc5', title: i18nString(UIStrings.typedArrays)},
-      {value: statistics.system, color: '#98f', title: i18nString(UIStrings.systemObjects)},
+      {value: v8heap.code, color: 'var(--app-color-code)', title: i18nString(UIStrings.code)},
+      {value: v8heap.strings, color: 'var(--app-color-strings)', title: i18nString(UIStrings.strings)},
+      {value: v8heap.jsArrays, color: 'var(--app-color-js-arrays)', title: i18nString(UIStrings.jsArrays)},
+      {value: native.typedArrays, color: 'var(--app-color-typed-arrays)', title: i18nString(UIStrings.typedArrays)},
+      {value: v8heap.system, color: 'var(--app-color-system)', title: i18nString(UIStrings.systemObjects)},
+      {
+        value: otherJSObjectsSize,
+        color: 'var(--app-color-other-js-objects)',
+        title: i18nString(UIStrings.otherJSObjects)
+      },
+      {
+        value: native.total - native.typedArrays,
+        color: 'var(--app-color-other-non-js-objects)',
+        title: i18nString(UIStrings.otherNonJSObjects)
+      },
     ];
     this.statisticsView.setTotalAndRecords(statistics.total, records);
     return statistics;
@@ -1315,9 +1335,8 @@ export class HeapSnapshotProfileType extends
   override customContent(): Element|null {
     const showOptionToExposeInternalsInHeapSnapshot =
         Root.Runtime.experiments.isEnabled('show-option-tp-expose-internals-in-heap-snapshot');
-    const omitParagraphElement = true;
-    const exposeInternalsInHeapSnapshotCheckbox = UI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.exposeInternals), this.exposeInternals, omitParagraphElement);
+    const exposeInternalsInHeapSnapshotCheckbox =
+        UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox as UI.UIUtils.CheckboxLabel;
     return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
   }
@@ -1409,9 +1428,9 @@ export const enum HeapSnapshotProfileTypeEvents {
   SNAPSHOT_RECEIVED = 'SnapshotReceived',
 }
 
-export type HeapSnapshotProfileTypeEventTypes = {
-  [HeapSnapshotProfileTypeEvents.SNAPSHOT_RECEIVED]: ProfileHeader,
-};
+export interface HeapSnapshotProfileTypeEventTypes {
+  [HeapSnapshotProfileTypeEvents.SNAPSHOT_RECEIVED]: ProfileHeader;
+}
 
 export class TrackingHeapSnapshotProfileType extends
     Common.ObjectWrapper.eventMixin<TrackingHeapSnapshotProfileTypeEventTypes, typeof HeapSnapshotProfileType>(
@@ -1513,7 +1532,7 @@ export class TrackingHeapSnapshotProfileType extends
 
   override customContent(): Element|null {
     const checkboxSetting = UI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal, true);
+        i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
     this.customContentInternal = (checkboxSetting as UI.UIUtils.CheckboxLabel);
     return checkboxSetting;
   }
@@ -1617,11 +1636,11 @@ export const enum TrackingHeapSnapshotProfileTypeEvents {
   TRACKING_STOPPED = 'TrackingStopped',
 }
 
-export type TrackingHeapSnapshotProfileTypeEventTypes = {
-  [TrackingHeapSnapshotProfileTypeEvents.HEAP_STATS_UPDATE]: Samples,
-  [TrackingHeapSnapshotProfileTypeEvents.TRACKING_STARTED]: void,
-  [TrackingHeapSnapshotProfileTypeEvents.TRACKING_STOPPED]: void,
-};
+export interface TrackingHeapSnapshotProfileTypeEventTypes {
+  [TrackingHeapSnapshotProfileTypeEvents.HEAP_STATS_UPDATE]: Samples;
+  [TrackingHeapSnapshotProfileTypeEvents.TRACKING_STARTED]: void;
+  [TrackingHeapSnapshotProfileTypeEvents.TRACKING_STOPPED]: void;
+}
 
 export class HeapProfileHeader extends ProfileHeader {
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -214,7 +214,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     this.windowWidthRatio = this.windowRightRatio - this.windowLeftRatio;
   }
 
-  override update(): void {
+  update(): void {
     this.updateTimerId = null;
     if (!this.isShowing()) {
       return;
@@ -263,9 +263,9 @@ export interface IdsRangeChangedEvent {
   size: number;
 }
 
-export type EventTypes = {
-  [Events.IDS_RANGE_CHANGED]: IdsRangeChangedEvent,
-};
+export interface EventTypes {
+  [Events.IDS_RANGE_CHANGED]: IdsRangeChangedEvent;
+}
 
 export class SmoothScale {
   lastUpdate: number;

package/front_end/panels/profiler/IsolateSelector.ts

@@ -232,7 +232,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         SDK.CPUProfilerModel.CPUProfilerModel, model && model.target().model(SDK.CPUProfilerModel.CPUProfilerModel));
   }
 
-  override update(): void {
+  update(): void {
     this.updateTotal();
     this.list.invalidateRange(0, this.items.length);
   }

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -67,9 +69,10 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
   private constructor() {
     super(true);
     this.gridNodeByUrl = new Map();
+    this.registerRequiredCSS(liveHeapProfileStyles);
 
     this.setting = Common.Settings.Settings.instance().moduleSetting('memory-live-heap-profile');
-    const toolbar = new UI.Toolbar.Toolbar('live-heap-profile-toolbar', this.contentElement);
+    const toolbar = this.contentElement.createChild('devtools-toolbar', 'live-heap-profile-toolbar');
     this.toggleRecordAction =
         UI.ActionRegistry.ActionRegistry.instance().getAction('live-heap-profile.toggle-recording');
     this.toggleRecordButton =
@@ -171,7 +174,6 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
     void this.poll();
-    this.registerCSSFiles([liveHeapProfileStyles]);
     this.setting.addChangeListener(this.settingChanged, this);
   }
 
@@ -204,7 +206,7 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
     } while (this.currentPollId === pollId);
   }
 
-  override update(
+  update(
       isolates: SDK.IsolateManager.Isolate[] = [],
       profiles: (Protocol.HeapProfiler.SamplingHeapProfile|null)[] = []): void {
     const dataByUrl = new Map<string, {

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -29,10 +29,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
-import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
-
 import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {