chrome-devtools-frontend 1.0.921565 → 1.0.922782

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+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';
@@ -155,7 +156,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
+export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
@@ -470,6 +472,10 @@ export enum Events {
   PaintProfilerRequested = 'PaintProfilerRequested',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+};
+
 export const slowScrollRectNames = new Map([
   [SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable, i18nLazyString(UIStrings.nonFastScrollable)],
   [SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler, i18nLazyString(UIStrings.touchEventHandler)],

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -28,7 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.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 * as UI from '../../ui/legacy/legacy.js';
@@ -54,8 +54,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class LayerTreeOutline extends UI.TreeOutline.TreeOutline implements Common.EventTarget.EventTarget<EventTypes>,
-                                                                            LayerView {
+export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.TreeOutline.TreeOutline>(
+    UI.TreeOutline.TreeOutline) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
   private layerViewHost: LayerViewHost;
   private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private lastHoveredNode: LayerTreeElement|null;
@@ -220,7 +220,7 @@ export class LayerTreeOutline extends UI.TreeOutline.TreeOutline implements Comm
       if (this.layerSnapshotMap.has(layer)) {
         contextMenu.defaultSection().appendItem(
             i18nString(UIStrings.showPaintProfiler),
-            () => this.dispatchEventToListeners(Events.PaintProfilerRequested, selection), false);
+            () => this.dispatchEventToListeners(Events.PaintProfilerRequested, selection as Selection), false);
       }
     }
     this.layerViewHost.showContextMenu(contextMenu, selection);

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -99,7 +99,8 @@ const uniformSamplerLocations = new Map<WebGLProgram, WebGLUniformLocation|null>
 
 const imageForTexture = new Map<WebGLTexture, HTMLImageElement>();
 
-export class Layers3DView extends UI.Widget.VBox implements LayerView {
+export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements LayerView {
   private readonly failBanner: UI.Widget.VBox;
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;
@@ -892,6 +893,11 @@ export enum Events {
   ScaleChanged = 'ScaleChanged',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+  [Events.ScaleChanged]: void,
+};
+
 export const enum ChromeTexture {
   Left = 0,
   Middle = 1,

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+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 PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -75,7 +76,8 @@ let categories: {[x: string]: PaintProfilerCategory}|null = null;
 
 let logItemCategoriesMap: {[x: string]: PaintProfilerCategory}|null = null;
 
-export class PaintProfilerView extends UI.Widget.HBox {
+export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(
+    UI.Widget.HBox) {
   private canvasContainer: HTMLElement;
   private readonly progressBanner: HTMLElement;
   private pieChart: PerfUI.PieChart.PieChart;
@@ -422,6 +424,10 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export type EventTypes = {
+  [Events.WindowChanged]: void,
+};
+
 export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget {
   private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private log: SDK.PaintProfiler.PaintProfilerLogItem[];

package/front_end/panels/layers/LayersPanel.ts

@@ -197,7 +197,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     });
   }
 
-  private onTabClosed(event: Common.EventTarget.EventTargetEvent): void {
+  private onTabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (event.data.tabId !== DetailsViewTabs.Profiler || !this.layerBeingProfiled) {
       return;
     }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -12,7 +11,7 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 let lastId = 1;
 
-export class ProtocolService extends Common.ObjectWrapper.ObjectWrapper {
+export class ProtocolService {
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -53,6 +53,10 @@
   text-align: left;
 }
 
+.conditions-edit-row .conditions-list-text:last-child {
+  text-align: right;
+}
+
 .conditions-list-title {
   text-align: start;
   display: flex;

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -245,100 +245,49 @@ export enum Events {
   RequestActivated = 'RequestActivated',
 }
 
-export abstract class NetworkLogViewInterface {
-  async onLoadFromFile(file: File): Promise<void> {
-  }
-
-  abstract nodeForRequest(request: SDK.NetworkRequest.NetworkRequest): NetworkRequestNode|null;
-
-  abstract headerHeight(): number;
-
-  setRecording(recording: boolean): void {
-  }
-
-  setWindow(start: number, end: number): void {
-  }
-
-  resetFocus(): void {
-  }
-
-  columnExtensionResolved(): void {
-  }
-
-  hoveredNode(): NetworkNode|null {
-    throw new Error('not implemented');
-  }
-
-  scheduleRefresh(): void {
-  }
-
-  addFilmStripFrames(times: number[]): void {
-  }
-
-  selectFilmStripFrame(time: number): void {
-  }
-
-  clearFilmStripFrame(): void {
-  }
-  timeCalculator(): NetworkTimeCalculator {
-    throw new Error('not implemented');
-  }
-
-  calculator(): NetworkTimeCalculator {
-    throw new Error('not implemented');
-  }
-
-  setCalculator(x: NetworkTimeCalculator): void {
-  }
-
-  flatNodesList(): NetworkNode[] {
-    throw new Error('not implemented');
-  }
-
-  updateNodeBackground(): void {
-  }
-
-  updateNodeSelectedClass(isSelected: boolean): void {
-  }
-
-  stylesChanged(): void {
-  }
-
-  setTextFilterValue(filterString: string): void {
-  }
-
-  rowHeight(): number {
-    throw new Error('not implemented');
-  }
+export interface RequestActivatedEvent {
+  showPanel: boolean;
+  takeFocus?: boolean;
+  tab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+}
 
-  switchViewMode(gridMode: boolean): void {
-  }
+export type EventTypes = {
+  [Events.RequestSelected]: SDK.NetworkRequest.NetworkRequest,
+  [Events.RequestActivated]: RequestActivatedEvent,
+};
 
+export interface NetworkLogViewInterface extends Common.EventTarget.EventTarget<EventTypes> {
+  onLoadFromFile(file: File): Promise<void>;
+  nodeForRequest(request: SDK.NetworkRequest.NetworkRequest): NetworkRequestNode|null;
+  headerHeight(): number;
+  setRecording(recording: boolean): void;
+  setWindow(start: number, end: number): void;
+  resetFocus(): void;
+  columnExtensionResolved(): void;
+  hoveredNode(): NetworkNode|null;
+  scheduleRefresh(): void;
+  addFilmStripFrames(times: number[]): void;
+  selectFilmStripFrame(time: number): void;
+  clearFilmStripFrame(): void;
+  timeCalculator(): NetworkTimeCalculator;
+  calculator(): NetworkTimeCalculator;
+  setCalculator(x: NetworkTimeCalculator): void;
+  flatNodesList(): NetworkNode[];
+  updateNodeBackground(): void;
+  updateNodeSelectedClass(isSelected: boolean): void;
+  stylesChanged(): void;
+  setTextFilterValue(filterString: string): void;
+  rowHeight(): number;
+  switchViewMode(gridMode: boolean): void;
   handleContextMenuForRequest(contextMenu: UI.ContextMenu.ContextMenu, request: SDK.NetworkRequest.NetworkRequest):
-      void {
-  }
-
-  async exportAll(): Promise<void> {
-  }
-
-  revealAndHighlightRequest(request: SDK.NetworkRequest.NetworkRequest): void {
-  }
-
-  selectRequest(request: SDK.NetworkRequest.NetworkRequest): void {
-  }
-
-  removeAllNodeHighlights(): void {
-  }
-
-  modelAdded(model: SDK.NetworkManager.NetworkManager): void {
-  }
-
-  modelRemoved(model: SDK.NetworkManager.NetworkManager): void {
-  }
-
-  linkifier(): Components.Linkifier.Linkifier {
-    throw new Error('not implemented');
-  }
+      void;
+  exportAll(): Promise<void>;
+  revealAndHighlightRequest(request: SDK.NetworkRequest.NetworkRequest): void;
+  selectRequest(request: SDK.NetworkRequest.NetworkRequest): void;
+  removeAllNodeHighlights(): void;
+  modelAdded(model: SDK.NetworkManager.NetworkManager): void;
+  modelRemoved(model: SDK.NetworkManager.NetworkManager): void;
+  linkifier(): Components.Linkifier.Linkifier;
 }
 
 export class NetworkNode extends DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode> {
@@ -1003,9 +952,7 @@ export class NetworkRequestNode extends NetworkNode {
 
   select(supressSelectedEvent?: boolean): void {
     super.select(supressSelectedEvent);
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this.parentView() as any).dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
+    this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }
 
   highlightMatchedSubstring(regexp: RegExp|null): Object[] {
@@ -1056,9 +1003,7 @@ export class NetworkRequestNode extends NetworkNode {
       this.nameCell = cell;
       cell.addEventListener('dblclick', this.openInNewTab.bind(this), false);
       cell.addEventListener('click', () => {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.parentView() as any).dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
+        this.parentView().dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
       });
       let iconElement;
       if (this.requestInternal.resourceType() === Common.ResourceType.resourceTypes.Image) {
@@ -1190,9 +1135,7 @@ export class NetworkRequestNode extends NetworkNode {
       if (displayShowHeadersLink) {
         this.setTextAndTitleAsLink(
             cell, i18nString(UIStrings.blockeds, {PH1: reason}), i18nString(UIStrings.blockedTooltip), () => {
-              // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              (this.parentView() as any).dispatchEventToListeners(Events.RequestActivated, {
+              this.parentView().dispatchEventToListeners(Events.RequestActivated, {
                 showPanel: true,
                 tab: NetworkForward.UIRequestLocation.UIRequestTabs.Headers,
               });
@@ -1398,10 +1341,9 @@ export class NetworkGroupNode extends NetworkNode {
   select(supressSelectedEvent?: boolean): void {
     super.select(supressSelectedEvent);
     const firstChildNode = (this.traverseNextNode(false, undefined, true) as NetworkNode);
-    if (firstChildNode && firstChildNode.request()) {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (this.parentView() as any).dispatchEventToListeners(Events.RequestSelected, firstChildNode.request());
+    const request = firstChildNode?.request();
+    if (request) {
+      this.parentView().dispatchEventToListeners(Events.RequestSelected, request);
     }
   }
 }

package/front_end/panels/network/NetworkItemView.ts

@@ -274,15 +274,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
-  private tabSelected(event: {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any,
-  }): void {
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;
     }
-    this.resourceViewTabSetting.set(event.data.tabId);
+    this.resourceViewTabSetting.set(event.data.tabId as NetworkForward.UIRequestLocation.UIRequestTabs);
   }
 
   request(): SDK.NetworkRequest.NetworkRequest {

package/front_end/panels/network/NetworkLogView.ts

@@ -52,7 +52,7 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import networkLogViewStyles from './networkLogView.css.js';
 
-import type {NetworkLogViewInterface, NetworkNode} from './NetworkDataGridNode.js';
+import type {NetworkLogViewInterface, NetworkNode, EventTypes} from './NetworkDataGridNode.js';
 import {Events, NetworkGroupNode, NetworkRequestNode} from './NetworkDataGridNode.js';
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
@@ -351,8 +351,8 @@ const enum FetchStyle {
   NodeJs = 1,
 }
 
-export class NetworkLogView extends UI.Widget.VBox implements
-    SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
+export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideDataURLSetting: Common.Settings.Setting<boolean>;
   private readonly networkShowIssuesOnlySetting: Common.Settings.Setting<boolean>;
@@ -864,7 +864,7 @@ export class NetworkLogView extends UI.Widget.VBox implements
     this.textFilterUI.setSuggestionProvider(this.suggestionBuilder.completions.bind(this.suggestionBuilder));
   }
 
-  private filterChanged(_event: Common.EventTarget.EventTargetEvent): void {
+  private filterChanged(): void {
     this.removeAllNodeHighlights();
     this.parseFilterQuery(this.textFilterUI.value(), this.invertFilterUI.checked());
     this.filterRequests();

package/front_end/panels/network/NetworkPanel.ts

@@ -48,6 +48,7 @@ import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
 
 import {BlockedURLsPane} from './BlockedURLsPane.js';
+import type {RequestActivatedEvent} from './NetworkDataGridNode.js';
 import {Events} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
 import {NetworkLogView} from './NetworkLogView.js';
@@ -369,7 +370,8 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.throttlingSelect;
   }
 
-  private onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>):
+      void {
     const startTime = Math.max(this.calculator.minimumBoundary(), event.data.startTime / 1000);
     const endTime = Math.min(this.calculator.maximumBoundary(), event.data.endTime / 1000);
     this.networkLogView.setWindow(startTime, endTime);
@@ -649,18 +651,10 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     this.updateNetworkItemView();
   }
 
-  private onRequestActivated(event: {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any,
-  }): void {
-    const eventData = (event.data as {
-      showPanel: boolean,
-      tab: NetworkForward.UIRequestLocation.UIRequestTabs,
-      takeFocus: (boolean | undefined),
-    });
-    if (eventData.showPanel) {
-      this.showRequestPanel(eventData.tab, /* takeFocus */ eventData.takeFocus);
+  private onRequestActivated(event: Common.EventTarget.EventTargetEvent<RequestActivatedEvent>): void {
+    const {showPanel, tab, takeFocus} = event.data;
+    if (showPanel) {
+      this.showRequestPanel(tab, takeFocus);
     } else {
       this.hideRequestPanel();
     }
@@ -766,18 +760,18 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     appendRevealItem.call(this, request);
   }
 
-  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.overviewPane.setWindowTimes(0, timestamp);
   }
 
-  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.networkOverview.selectFilmStripFrame(timestamp);
     this.networkLogView.selectFilmStripFrame(timestamp / 1000);
   }
 
-  private onFilmFrameExit(_event: Common.EventTarget.EventTargetEvent): void {
+  private onFilmFrameExit(): void {
     this.networkOverview.clearFilmStripFrame();
     this.networkLogView.clearFilmStripFrame();
   }

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -171,7 +171,7 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.mainPane.addEventListener(PerfUI.FlameChart.Events.EntryInvoked, this.onEntryInvoked, this);
     this.entrySelected = false;
     this.mainPane.addEventListener(PerfUI.FlameChart.Events.CanvasFocused, this.onEntrySelected, this);
-    this.overviewPane.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged, this.onWindowChanged, this);
+    this.overviewPane.addEventListener(OverviewPaneEvents.WindowChanged, this.onWindowChanged, this);
     this.dataProvider = dataProvider;
     this.searchResults = [];
   }
@@ -180,9 +180,8 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.mainPane.focus();
   }
 
-  onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const windowLeft = event.data.windowTimeLeft;
-    const windowRight = event.data.windowTimeRight;
+  onWindowChanged(event: Common.EventTarget.EventTargetEvent<OverviewPaneWindowChangedEvent>): void {
+    const {windowTimeLeft: windowLeft, windowTimeRight: windowRight} = event.data;
     this.mainPane.setWindowTimes(windowLeft, windowRight, /* animate */ true);
   }
 
@@ -190,9 +189,9 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.overviewPane.selectRange(timeLeft, timeRight);
   }
 
-  onEntrySelected(event: Common.EventTarget.EventTargetEvent): void {
+  onEntrySelected(event: Common.EventTarget.EventTargetEvent<void|number>): void {
     if (event.data) {
-      const eventIndex = Number(event.data);
+      const eventIndex = event.data;
       this.mainPane.setSelectedEntry(eventIndex);
       if (eventIndex === -1) {
         this.entrySelected = false;
@@ -205,7 +204,7 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     }
   }
 
-  onEntryInvoked(event: Common.EventTarget.EventTargetEvent): void {
+  onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): void {
     this.onEntrySelected(event);
     this.dispatchEventToListeners(PerfUI.FlameChart.Events.EntryInvoked, event.data);
   }
@@ -308,7 +307,8 @@ export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
   }
 }
 
-export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate {
+export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEvents, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
   readonly overviewGrid: PerfUI.OverviewGrid.OverviewGrid;
@@ -329,7 +329,8 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
         (this.overviewContainer.createChild('canvas', 'cpu-profile-flame-chart-overview-canvas') as HTMLCanvasElement);
     this.overviewContainer.appendChild(this.overviewGrid.element);
     this.dataProvider = dataProvider;
-    this.overviewGrid.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged, this.onWindowChanged, this);
+    this.overviewGrid.addEventListener(
+        PerfUI.OverviewGrid.Events.WindowChangedWithPosition, this.onWindowChanged, this);
   }
 
   windowChanged(windowStartTime: number, windowEndTime: number): void {
@@ -348,12 +349,13 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
     this.overviewGrid.setWindow((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
   }
 
-  onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.OverviewGrid.WindowChangedWithPositionEvent>):
+      void {
     const windowPosition = {windowTimeLeft: event.data.rawStartValue, windowTimeRight: event.data.rawEndValue};
     this.windowTimeLeft = windowPosition.windowTimeLeft;
     this.windowTimeRight = windowPosition.windowTimeRight;
 
-    this.dispatchEventToListeners(PerfUI.OverviewGrid.Events.WindowChanged, windowPosition);
+    this.dispatchEventToListeners(OverviewPaneEvents.WindowChanged, windowPosition);
   }
 
   timelineData(): PerfUI.FlameChart.TimelineData|null {
@@ -445,3 +447,16 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
     this.overviewCanvas.style.height = height + 'px';
   }
 }
+
+export const enum OverviewPaneEvents {
+  WindowChanged = 'WindowChanged',
+}
+
+export interface OverviewPaneWindowChangedEvent {
+  windowTimeLeft: number;
+  windowTimeRight: number;
+}
+
+export type OVerviewPaneEventTypes = {
+  [OverviewPaneEvents.WindowChanged]: OverviewPaneWindowChangedEvent,
+};

package/front_end/panels/profiler/HeapProfileView.ts

@@ -14,8 +14,8 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import {ProfileFlameChartDataProvider} from './CPUProfileFlameChart.js';
 
-import type {Samples} from './HeapTimelineOverview.js';
-import {HeapTimelineOverview, IdsRangeChanged} from './HeapTimelineOverview.js';
+import type {Samples, IdsRangeChangedEvent} from './HeapTimelineOverview.js';
+import {Events, HeapTimelineOverview} from './HeapTimelineOverview.js';
 import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
 import type {ProfileHeader} from './ProfileHeader.js';
 import {ProfileType, ProfileEvents} from './ProfileHeader.js';
@@ -155,7 +155,7 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     this.timelineOverview = new HeapTimelineOverview();
 
     if (Root.Runtime.experiments.isEnabled('samplingHeapProfilerTimeline')) {
-      this.timelineOverview.addEventListener(IdsRangeChanged, this.onIdsRangeChanged.bind(this));
+      this.timelineOverview.addEventListener(Events.IdsRangeChanged, this.onIdsRangeChanged.bind(this));
       this.timelineOverview.show(this.element, this.element.firstChild);
       this.timelineOverview.start();
 
@@ -172,9 +172,8 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     return [...await super.toolbarItems(), this.selectedSizeText];
   }
 
-  onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const minId = (event.data.minId as number);
-    const maxId = (event.data.maxId as number);
+  onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
+    const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
         i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
     this.setSelectionRange(minId, maxId);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -49,7 +49,8 @@ import type {AllocationGridNode, HeapSnapshotGridNode} from './HeapSnapshotGridN
 import {HeapSnapshotGenericObjectNode} from './HeapSnapshotGridNodes.js';
 import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import {HeapSnapshotWorkerProxy} from './HeapSnapshotProxy.js';
-import {HeapTimelineOverview, IdsRangeChanged, Samples} from './HeapTimelineOverview.js';
+import type {IdsRangeChangedEvent} from './HeapTimelineOverview.js';
+import {HeapTimelineOverview, Events, Samples} from './HeapTimelineOverview.js';
 import * as ModuleUIStrings from './ModuleUIStrings.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';
 import {Events as ProfileHeaderEvents, ProfileEvents as ProfileTypeEvents, ProfileHeader, ProfileType} from './ProfileHeader.js';
@@ -441,7 +442,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   createOverview(): void {
     const profileType = this.profile.profileType();
     this.trackingOverviewGrid = new HeapTimelineOverview();
-    this.trackingOverviewGrid.addEventListener(IdsRangeChanged, this.onIdsRangeChanged.bind(this));
+    this.trackingOverviewGrid.addEventListener(Events.IdsRangeChanged, this.onIdsRangeChanged.bind(this));
     if (!this.profile.fromFile() && profileType.profileBeingRecorded() === this.profile) {
       profileType.addEventListener(TrackingHeapSnapshotProfileType.HeapStatsUpdate, this.onHeapStatsUpdate, this);
       profileType.addEventListener(TrackingHeapSnapshotProfileType.TrackingStopped, this.onStopTracking, this);
@@ -550,9 +551,8 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     return statistics;
   }
 
-  onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const minId = event.data.minId;
-    const maxId = event.data.maxId;
+  onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
+    const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
         i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
     if (this.constructorsDataGrid.snapshot) {
@@ -988,7 +988,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     }
     this.onStopTracking();
     if (this.trackingOverviewGrid) {
-      this.trackingOverviewGrid.removeEventListener(IdsRangeChanged, this.onIdsRangeChanged.bind(this));
+      this.trackingOverviewGrid.removeEventListener(Events.IdsRangeChanged, this.onIdsRangeChanged.bind(this));
     }
   }
 }

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-export class HeapTimelineOverview extends UI.Widget.VBox {
+export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   readonly overviewCalculator: OverviewCalculator;
   overviewContainer: HTMLElement;
   overviewGrid: PerfUI.OverviewGrid.OverviewGrid;
@@ -246,11 +248,23 @@ export class HeapTimelineOverview extends UI.Widget.VBox {
     const minId = minIndex > 0 ? ids[minIndex - 1] : 0;
     const maxId = maxIndex < ids.length ? ids[maxIndex] : Infinity;
 
-    this.dispatchEventToListeners(IdsRangeChanged, {minId, maxId, size});
+    this.dispatchEventToListeners(Events.IdsRangeChanged, {minId, maxId, size});
   }
 }
 
-export const IdsRangeChanged = Symbol('IdsRangeChanged');
+export const enum Events {
+  IdsRangeChanged = 'IdsRangeChanged',
+}
+
+export interface IdsRangeChangedEvent {
+  minId: number;
+  maxId: number;
+  size: number;
+}
+
+export type EventTypes = {
+  [Events.IdsRangeChanged]: IdsRangeChangedEvent,
+};
 
 export class SmoothScale {
   lastUpdate: number;