chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/linear_memory_inspector/components/linearMemoryViewer.css

@@ -7,7 +7,7 @@
 :host {
   flex: auto;
   display: flex;
-  min-height: 20px;
+  min-height: var(--sys-size-9);
 }
 
 .view {
@@ -20,13 +20,13 @@
 
 .row {
   display: flex;
-  height: 20px;
+  height: var(--sys-size-9);
   align-items: center;
 }
 
 .cell {
   text-align: center;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
   border-radius: 2px;
 
   &.focused-area {
@@ -51,7 +51,7 @@
 }
 
 .text-cell {
-  min-width: 14px;
+  min-width: var(--sys-size-7);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -65,10 +65,10 @@
 }
 
 .divider {
-  width: 1px;
+  width: var(--sys-size-1);
   height: inherit;
   background-color: var(--sys-color-divider);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .highlight-area {

package/front_end/panels/linear_memory_inspector/components/valueInterpreterDisplay.css

@@ -13,10 +13,10 @@
   width: 100%;
   display: grid;
   grid-template-columns: auto auto 1fr;
-  gap: 4px 24px;
-  min-height: 24px;
+  gap: var(--sys-size-3) var(--sys-size-11);
+  min-height: var(--sys-size-11);
   overflow: hidden;
-  padding: 2px 12px;
+  padding: var(--sys-size-2) var(--sys-size-6);
   align-items: baseline;
   justify-content: start;
 }
@@ -27,7 +27,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 24px;
+  min-height: var(--sys-size-11);
 }
 
 .value-type-value-with-link {
@@ -40,10 +40,10 @@
 }
 
 .signed-divider {
-  width: 1px;
+  width: var(--sys-size-1);
   height: 15px;
   background-color: var(--sys-color-divider);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .selectable-text {

package/front_end/panels/linear_memory_inspector/components/valueInterpreterSettings.css

@@ -8,13 +8,13 @@
   :scope {
     flex: auto;
     display: flex;
-    min-height: 20px;
+    min-height: var(--sys-size-9);
   }
 
   .settings {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 12px 12px;
+    margin: 0 var(--sys-size-6) var(--sys-size-6);
     gap: 15px 45px;
   }
 

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -176,8 +176,12 @@ export function getRecommendedNetworkConditions(roundTripTimeMetricData?: CrUXMa
   return null;
 }
 
-export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const NetworkThrottlingSelectBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class NetworkThrottlingSelect extends NetworkThrottlingSelectBase {
   readonly #settings: Common.Settings.Settings;
   #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
   #jslogContext?: string;

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -88,17 +88,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingMan
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let throttlingManagerInstance: ThrottlingManager;
 
-class PromiseQueue<T> {
-  #promise = Promise.resolve();
-
-  push(promise: Promise<T>): Promise<T> {
-    return new Promise(r => {
-      this.#promise = this.#promise.then(async () => r(await promise));
-    });
-  }
-}
-
-export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<ThrottlingManager.EventTypes> {
+export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<void> {
   private readonly cpuThrottlingControls: Set<UI.Toolbar.ToolbarComboBox>;
   private readonly cpuThrottlingOptions: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
   private readonly customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
@@ -111,7 +101,6 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
   #hardwareConcurrencyOverrideEnabled = false;
   #currentCPUThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption =
       PanelsCommon.CPUThrottlingOption.NoThrottlingOption;
-  readonly #emulationQueue = new PromiseQueue<void>();
   get hardwareConcurrencyOverrideEnabled(): boolean {
     return this.#hardwareConcurrencyOverrideEnabled;
   }
@@ -302,19 +291,6 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     };
   }
 
-  setSaveDataOverride(selectedIndex: number): void {
-    let override = SDK.EmulationModel.DataSaverOverride.UNSET;
-    if (selectedIndex === 1) {
-      override = SDK.EmulationModel.DataSaverOverride.ENABLED;
-    } else if (selectedIndex === 2) {
-      override = SDK.EmulationModel.DataSaverOverride.DISABLED;
-    }
-    for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
-      void this.#emulationQueue.push(emulationModel.setDataSaverOverride(override));
-    }
-    this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, selectedIndex);
-  }
-
   createSaveDataOverrideSelector(className?: string): HTMLSelectElement {
     const select = document.createElement('select');
     select.title = i18nString(UIStrings.saveDataSettingTooltip);
@@ -408,8 +384,8 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 }
 
 export interface SaveDataOverrideViewInput {
-  selectedIndex: number;
-  onSelect: (index: number) => void;
+  selectedOption: SDK.EmulationModel.DataSaverOverride;
+  onSelect: (selectedOption: SDK.EmulationModel.DataSaverOverride) => void;
 }
 
 export type SaveDataOverrideViewFunction =
@@ -418,48 +394,43 @@ export type SaveDataOverrideViewFunction =
 export const DEFAULT_SAVE_DATA_VIEW: SaveDataOverrideViewFunction = (input, _output, target) => {
   // clang-format off
   render(html`
-    <option value="unset" ?selected=${input.selectedIndex === 0}>${i18nString(UIStrings.noSaveDataOverride)}</option>
-    <option value="enabled" ?selected=${input.selectedIndex === 1}>${i18nString(UIStrings.saveDataOn)}</option>
-    <option value="disabled" ?selected=${input.selectedIndex === 2}>${i18nString(UIStrings.saveDataOff)}</option>
-  `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).selectedIndex)}}});
+    <option value=${SDK.EmulationModel.DataSaverOverride.UNSET} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.UNSET}>${i18nString(UIStrings.noSaveDataOverride)}</option>
+    <option value=${SDK.EmulationModel.DataSaverOverride.ENABLED} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.ENABLED}>${i18nString(UIStrings.saveDataOn)}</option>
+    <option value=${SDK.EmulationModel.DataSaverOverride.DISABLED} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.DISABLED}>${i18nString(UIStrings.saveDataOff)}</option>
+  `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).value as SDK.EmulationModel.DataSaverOverride)}}});
   // clang-format on
 };
 
-export class SaveDataOverrideSelect extends
-    Common.ObjectWrapper.eventMixin<ThrottlingManager.EventTypes, typeof UI.Widget.Widget<HTMLSelectElement>>(
-        UI.Widget.Widget) {
-  #selectedIndex = 0;
+export class SaveDataOverrideSelect extends UI.Widget.Widget<HTMLSelectElement> {
+  readonly #setting: Common.Settings.Setting<SDK.EmulationModel.DataSaverOverride>;
   readonly #view: SaveDataOverrideViewFunction;
 
   constructor(element: HTMLElement, view = DEFAULT_SAVE_DATA_VIEW) {
     super(element);
     this.#view = view;
-    ThrottlingManager.instance().addEventListener(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => {
-      this.#selectedIndex = data;
-      this.requestUpdate();
-    });
+    this.#setting = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.dataSaverSettingDescriptor);
     this.performUpdate();
   }
 
-  override performUpdate(): void {
-    this.#view(
-        {
-          selectedIndex: this.#selectedIndex,
-          onSelect: index => {
-            ThrottlingManager.instance().setSaveDataOverride(index);
-          },
-        },
-        undefined, this.contentElement);
+  override wasShown(): void {
+    super.wasShown();
+    this.#setting.addChangeListener(this.requestUpdate, this);
+    this.requestUpdate();
   }
-}
 
-export namespace ThrottlingManager {
-  export const enum Events {
-    SAVE_DATA_OVERRIDE_CHANGED = 'SaveDataOverrideChanged',
+  override willHide(): void {
+    super.willHide();
+    this.#setting.removeChangeListener(this.requestUpdate, this);
   }
 
-  export interface EventTypes {
-    [Events.SAVE_DATA_OVERRIDE_CHANGED]: number;
+  override performUpdate(): void {
+    this.#view({
+      selectedOption: this.#setting.get(),
+      onSelect: selectedOption => {
+        this.#setting.set(selectedOption);
+      },
+    },
+               undefined, this.contentElement);
   }
 }
 

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -986,15 +986,17 @@ export class NetworkRequestNode extends NetworkNode {
     return aValue.localeCompare(bValue) || aRequest.identityCompare(bRequest);
   }
 
-  static readonly ResponseHeaderStringComparator = NetworkRequestNode.HeaderStringComparator.bind(
-      null,
-      (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.responseHeaderValue(name),
-  );
-
-  static readonly RequestHeaderStringComparator = NetworkRequestNode.HeaderStringComparator.bind(
-      null,
-      (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.requestHeaderValue(name),
-  );
+  static readonly ResponseHeaderStringComparator:
+      (propertyName: string, a: NetworkNode, b: NetworkNode) => number = NetworkRequestNode.HeaderStringComparator.bind(
+          null,
+          (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.responseHeaderValue(name),
+      );
+
+  static readonly RequestHeaderStringComparator:
+      (propertyName: string, a: NetworkNode, b: NetworkNode) => number = NetworkRequestNode.HeaderStringComparator.bind(
+          null,
+          (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.requestHeaderValue(name),
+      );
 
   static ResponseHeaderNumberComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(allada) Handle this properly for group nodes.

package/front_end/panels/network/NetworkLogView.ts

@@ -553,8 +553,13 @@ const enum FetchStyle {
   NODE_JS = 1,
 }
 
-export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
+const NetworkLogViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class NetworkLogView extends NetworkLogViewBase implements
+    SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideDataURLSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideChromeExtensions: Common.Settings.Setting<boolean>;
@@ -1146,7 +1151,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         jslogContext: actionName,
         variant: Buttons.Button.Variant.TONAL,
       });
-      this.recordingHint.contentElement.appendChild(button);
+      this.recordingHint.element.appendChild(button);
     }
 
     this.recordingHint.show(this.element);
@@ -1686,7 +1691,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Scheme, String(request.scheme));
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.StatusCode, String(request.statusCode));
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.ResourceType, request.resourceType().name());
-    this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Url, request.securityOrigin());
+    const requestURLSecurityOrigin = request.requestURLSecurityOrigin();
+    if (!requestURLSecurityOrigin.isOpaque()) {
+      this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Url, requestURLSecurityOrigin.siteId());
+    }
 
     const priority = request.priority();
     if (priority) {

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -383,7 +383,7 @@ export class AffectedCountWidget extends UI.Widget.Widget {
   #condition?: SDK.NetworkManager.RequestCondition;
   #lookUpRequestCount?: (condition: SDK.NetworkManager.RequestCondition) => number;
 
-  constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: AffectedCountView = AFFECTED_COUNT_DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }
@@ -459,7 +459,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox {
   #viewOutput: ViewOutput = {itemRefs: new Map()};
   #editingCondition?: SDK.NetworkManager.RequestCondition;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {
       jslog: `${VisualLogging.panel('network.blocked-urls').track({resize: true})}`,
       useShadowDom: true,

package/front_end/panels/network/RequestHeadersView.ts

@@ -268,7 +268,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
     this.#addEventListeners();
   }
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
   }

package/front_end/panels/network/RequestPayloadView.ts

@@ -365,7 +365,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #viewQueryParamSource = false;
   #refreshFormDataPromiseForTest = Promise.resolve();
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
   }

package/front_end/panels/network/RequestResponseView.ts

@@ -82,7 +82,7 @@ export class RequestResponseView extends UI.Widget.VBox {
   #view: View;
   #revealPosition?: (position: SourceFrame.SourceFrame.RevealPosition) => Promise<void>;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest, view = DEFAULT_VIEW) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
     super();
     this.request = request;
     this.#view = view;

package/front_end/panels/network/RequestTimingView.ts

@@ -614,7 +614,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   #calculator?: NetworkTimeCalculator.NetworkTimeCalculator;
   #lastMinimumBoundary = -1;
   readonly #view: View;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -61,7 +61,7 @@ export class ShowMoreDetailsWidget extends UI.Widget.Widget {
   #text = '';
   #showMore = false;
   #copy: CopyMenuItem|null = null;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/panels/network/components/RequestHeadersView.css

@@ -21,6 +21,11 @@
   background-color: var(--sys-color-state-header-hover);
 }
 
+.header:focus-visible {
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
+}
+
 details[open] .header-count {
   display: none;
 }

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

@@ -87,7 +87,7 @@ export interface ResponseHeaderSectionData {
 }
 
 class ResponseHeaderSectionBase extends HTMLElement {
-  protected readonly shadow = this.attachShadow({mode: 'open'});
+  protected readonly shadow: ShadowRoot = this.attachShadow({mode: 'open'});
   protected headerDetails: HeaderDetailsDescriptor[] = [];
 
   protected setHeaders(headers: SDK.NetworkRequest.NameValue[]): void {

package/front_end/panels/network/networkLogView.css

@@ -416,6 +416,10 @@ td.time-column {
   z-index: 1;
 }
 
+.empty-widget-container devtools-button {
+  margin-top: var(--sys-size-7);
+}
+
 @media (forced-colors: active) {
   .initiator-column .devtools-link {
     color: linktext;

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -24,6 +24,8 @@
 
 .request-initiator-view-section-title:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
 }
 
 @media (forced-colors: active) {

package/front_end/panels/performance_monitor/performanceMonitor.css

@@ -46,14 +46,14 @@
   display: flex;
   flex: initial;
   flex-direction: column;
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   overflow: hidden auto;
 }
 
 .perfmon-chart-container {
   display: flex;
   flex: 1 1;
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
   overflow-y: auto;
 }
 
@@ -63,7 +63,7 @@
 
 .perfmon-indicator {
   padding: 3px 9px;
-  margin: -1px 0;
+  margin: calc(-1 * var(--sys-size-1)) 0;
   display: flex;
   flex-shrink: 0;
   width: 210px;

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -91,8 +91,13 @@ export class DetachedElementsProfileView extends UI.View.SimpleView implements D
   }
 }
 
-export class DetachedElementsProfileType extends
-    Common.ObjectWrapper.eventMixin<DetachedElementsProfileType.EventTypes, typeof ProfileType>(ProfileType) {
+const DetachedElementsProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<DetachedElementsProfileType.EventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class DetachedElementsProfileType extends DetachedElementsProfileTypeBase {
   constructor(typeId?: string, description?: string) {
     super(
         typeId || i18nString(UIStrings.detachedElementsTitle),

package/front_end/panels/profiler/HeapProfileView.ts

@@ -924,8 +924,13 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 }
 
-export class SamplingHeapProfileTypeBase extends
-    Common.ObjectWrapper.eventMixin<SamplingHeapProfileType.EventTypes, typeof ProfileType>(ProfileType) {
+const SamplingHeapProfileTypeBaseBase:
+    Common.ObjectWrapper.EventMixin<SamplingHeapProfileType.EventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class SamplingHeapProfileTypeBase extends SamplingHeapProfileTypeBaseBase {
   recording: boolean;
   clearedDuringRecording: boolean;
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -122,11 +122,15 @@ const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotDataGrids.
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const adjacencyMap = new WeakMap<DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode>, HeapSnapshotGridNode[]>();
 
-class HeapSnapshotSortableDataGridBase extends DataGrid.DataGrid.DataGridImpl<HeapSnapshotGridNode> {}
+class HeapSnapshotSortableDataGridRawBase extends DataGrid.DataGrid.DataGridImpl<HeapSnapshotGridNode> {}
 
-export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
-                                                      .eventMixin<EventTypes, typeof HeapSnapshotSortableDataGridBase>(
-                                                          HeapSnapshotSortableDataGridBase) {
+const HeapSnapshotSortableDataGridBase:
+    Common.ObjectWrapper.EventMixin<EventTypes, typeof HeapSnapshotSortableDataGridRawBase> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotSortableDataGridRawBase,
+    );
+
+export class HeapSnapshotSortableDataGrid extends HeapSnapshotSortableDataGridBase {
   snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy|null = null;
   override selectedNode: HeapSnapshotGridNode|null = null;
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -129,11 +129,15 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotGridNodes.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-class HeapSnapshotGridNodeBase extends DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode> {}
+class HeapSnapshotGridNodeRawBase extends DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode> {}
 
-export class HeapSnapshotGridNode extends
-    Common.ObjectWrapper.eventMixin<HeapSnapshotGridNode.EventTypes, typeof HeapSnapshotGridNodeBase>(
-        HeapSnapshotGridNodeBase) {
+const HeapSnapshotGridNodeBase:
+    Common.ObjectWrapper.EventMixin<HeapSnapshotGridNode.EventTypes, typeof HeapSnapshotGridNodeRawBase> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotGridNodeRawBase,
+    );
+
+export class HeapSnapshotGridNode extends HeapSnapshotGridNodeBase {
   dataGridInternal: HeapSnapshotSortableDataGrid;
   instanceCount = 0;
   readonly savedChildren = new Map<number, HeapSnapshotGridNode>();

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1391,9 +1391,14 @@ export class StatisticsPerspective extends Perspective {
   }
 }
 
-export class HeapSnapshotProfileType extends
-    Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
-        implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
+const HeapSnapshotProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class HeapSnapshotProfileType extends HeapSnapshotProfileTypeBase implements
+    SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
   customContentInternal: UI.UIUtils.CheckboxLabel|null;
   constructor(id?: string, title?: string) {
     super(id || HeapSnapshotProfileType.TypeId, title || i18nString(UIStrings.heapSnapshot));
@@ -1531,9 +1536,13 @@ export interface HeapSnapshotProfileTypeEventTypes {
   [HeapSnapshotProfileTypeEvents.SNAPSHOT_RECEIVED]: ProfileHeader;
 }
 
-export class TrackingHeapSnapshotProfileType extends
-    Common.ObjectWrapper.eventMixin<TrackingHeapSnapshotProfileTypeEventTypes, typeof HeapSnapshotProfileType>(
-        HeapSnapshotProfileType) {
+const TrackingHeapSnapshotProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<TrackingHeapSnapshotProfileTypeEventTypes, typeof HeapSnapshotProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotProfileType,
+    );
+
+export class TrackingHeapSnapshotProfileType extends TrackingHeapSnapshotProfileTypeBase {
   readonly recordAllocationStacksSettingInternal: Common.Settings.Setting<boolean>;
   override customContentInternal: UI.UIUtils.CheckboxLabel|null;
   recording: boolean;

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -12,8 +12,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const HeapTimelineOverviewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class HeapTimelineOverview extends HeapTimelineOverviewBase {
   readonly overviewCalculator: OverviewCalculator;
   overviewContainer: HTMLElement;
   overviewGrid: PerfUI.OverviewGrid.OverviewGrid;

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -131,9 +131,12 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
   }
 }
 
-export class ProfileFlameChart extends
-    Common.ObjectWrapper.eventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-        implements UI.SearchableView.Searchable {
+const ProfileFlameChartBase: Common.ObjectWrapper.EventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ProfileFlameChart extends ProfileFlameChartBase implements UI.SearchableView.Searchable {
   readonly searchableView: UI.SearchableView.SearchableView;
   readonly overviewPane: OverviewPane;
   readonly mainPane: PerfUI.FlameChart.FlameChart;
@@ -311,8 +314,12 @@ export class OverviewCalculator implements NetworkTimeCalculator.Calculator {
   }
 }
 
-export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
+const OverviewPaneBase: Common.ObjectWrapper.EventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class OverviewPane extends OverviewPaneBase implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
   readonly overviewGrid: PerfUI.OverviewGrid.OverviewGrid;

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -133,8 +133,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 // clang-format on
 
-export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const ProfileLauncherViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ProfileLauncherView extends ProfileLauncherViewBase {
   readonly panel: ProfilesPanel;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
   readonly #view: View;