chrome-devtools-frontend 1.0.921086 → 1.0.922671

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;

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -66,7 +66,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/ProfileLauncherView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ProfileLauncherView extends UI.Widget.VBox {
+export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   readonly panel: ProfilesPanel;
   private contentElementInternal: HTMLElement;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
@@ -232,3 +233,7 @@ export class ProfileLauncherView extends UI.Widget.VBox {
 export enum Events {
   ProfileTypeSelected = 'ProfileTypeSelected',
 }
+
+export type EventTypes = {
+  [Events.ProfileTypeSelected]: ProfileType,
+};

package/front_end/panels/profiler/ProfileView.ts

@@ -413,7 +413,7 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     });
   }
 
-  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): Promise<void> {
     if (!this.dataProvider) {
       return;
     }

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -282,8 +282,8 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     this.launcherView.profileFinished();
   }
 
-  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent): void {
-    this.selectedProfileType = (event.data as ProfileType);
+  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent<ProfileType>): void {
+    this.selectedProfileType = event.data;
     this.updateProfileTypeSpecificUI();
   }
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -193,8 +193,8 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     this.tabbedLocation.tabbedPane().selectTab(name, /* userGesture */ true);
   }
 
-  private tabInvoked(event: Common.EventTarget.EventTargetEvent): void {
-    const eventData = event.data as UI.TabbedPane.EventData;
+  private tabInvoked(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
+    const eventData = event.data;
     if (!eventData.isUserGesture) {
       return;
     }

package/front_end/panels/sources/CSSPlugin.ts

@@ -261,12 +261,12 @@ export class CSSPlugin extends Plugin {
     this.swatchPopoverHelper.show(this.spectrum, swatch, this.swatchPopoverHidden.bind(this));
   }
 
-  private spectrumResized(_event: Common.EventTarget.EventTargetEvent): void {
+  private spectrumResized(_event: Common.EventTarget.EventTargetEvent<void>): void {
     this.swatchPopoverHelper.reposition();
   }
 
-  private spectrumChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const colorString = (event.data as string);
+  private spectrumChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
+    const colorString = event.data;
     const color = Common.Color.Color.parse(colorString);
     if (!color || !this.currentSwatch) {
       return;
@@ -291,8 +291,8 @@ export class CSSPlugin extends Plugin {
     this.swatchPopoverHelper.show(this.bezierEditor, swatch.iconElement(), this.swatchPopoverHidden.bind(this));
   }
 
-  private bezierChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const bezierString = (event.data as string);
+  private bezierChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
+    const bezierString = event.data;
     if (this.currentSwatch instanceof InlineEditor.Swatches.BezierSwatch) {
       this.currentSwatch.setBezierText(bezierString);
     }
@@ -313,7 +313,7 @@ export class CSSPlugin extends Plugin {
     }
   }
 
-  private onTextChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onTextChanged(event: Common.EventTarget.EventTargetEvent<UI.TextEditor.TextChangedEvent>): void {
     if (!this.muteSwatchProcessing) {
       this.updateSwatches(event.data.newRange.startLine, event.data.newRange.endLine);
     }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1812,17 +1812,16 @@ export class DebuggerPlugin extends Plugin {
     this.textEditor.attachInfobar(this.prettyPrintInfobar);
   }
 
-  private async handleGutterClick(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  private async handleGutterClick(
+      event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): Promise<void> {
     if (this.muted) {
       return;
     }
 
-    const eventData = (event.data as SourceFrame.SourcesTextEditor.GutterClickEventData);
-    if (eventData.gutterType !== SourceFrame.SourcesTextEditor.lineNumbersGutterType) {
+    const {gutterType, lineNumber: editorLineNumber, event: eventObject} = event.data;
+    if (gutterType !== SourceFrame.SourcesTextEditor.lineNumbersGutterType) {
       return;
     }
-    const editorLineNumber = eventData.lineNumber;
-    const eventObject = eventData.event;
 
     if (eventObject.button !== 0 || eventObject.altKey || eventObject.ctrlKey || eventObject.metaKey) {
       return;

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -51,12 +51,14 @@ export class EditingLocationHistoryManager {
         SourceFrame.SourcesTextEditor.Events.JumpHappened, this.onJumpHappened.bind(this));
   }
 
-  private onJumpHappened(event: Common.EventTarget.EventTargetEvent): void {
-    if (event.data.from) {
-      this.updateActiveState(event.data.from);
+  private onJumpHappened(event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.JumpHappenedEvent>):
+      void {
+    const {from, to} = event.data;
+    if (from) {
+      this.updateActiveState(from);
     }
-    if (event.data.to) {
-      this.pushActiveState(event.data.to);
+    if (to) {
+      this.pushActiveState(to);
     }
   }
 

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -45,13 +45,13 @@ export class InplaceFormatterEditorAction implements EditorAction {
     return inplaceFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
   }
 
-  private editorClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const wasSelected = (event.data.wasSelected as boolean);
+  private editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
+    const {wasSelected} = event.data;
     if (wasSelected) {
       this.updateButton(null);
     }

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -85,11 +85,16 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return -item.line - 1;
   }
 
-  renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
+  renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
     const item = this.items[itemIndex];
     titleElement.textContent = item.title + (item.subtitle ? item.subtitle : '');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query);
-    subtitleElement.textContent = ':' + (item.line + 1);
+
+    const tagElement = (titleElement.parentElement?.parentElement?.createChild('span', 'tag') as HTMLElement);
+    if (!tagElement) {
+      return;
+    }
+    tagElement.textContent = ':' + (item.line + 1);
   }
 
   selectItem(itemIndex: number|null, _promptValue: string): void {

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -48,8 +48,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     return scriptFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
 
     if (this.isFormattableScript(uiSourceCode) && this.pathsToFormatOnLoad.has(uiSourceCode.url()) &&
@@ -58,9 +58,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     }
   }
 
-  private async editorClosed(event: Common.EventTarget.EventTargetEvent): Promise<void> {
-    const uiSourceCode = (event.data.uiSourceCode as Workspace.UISourceCode.UISourceCode);
-    const wasSelected = (event.data.wasSelected as boolean);
+  private async editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): Promise<void> {
+    const {uiSourceCode, wasSelected} = event.data;
 
     if (wasSelected) {
       this.updateButton(null);

package/front_end/panels/sources/SourcesPanel.ts

@@ -643,8 +643,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     if (this.editorView.mainWidget() &&
         Common.Settings.Settings.instance().moduleSetting('autoRevealInNavigator').get()) {
       this.revealInNavigator(uiSourceCode, true);

package/front_end/panels/sources/SourcesView.ts

@@ -40,8 +40,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable,
-                                                           UI.SearchableView.Replaceable {
+export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
   private placeholderOptionArray: {
     element: HTMLElement,
     handler: Function,
@@ -446,7 +446,10 @@ export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainer
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 
-    this.dispatchEventToListeners(Events.EditorSelected, this.editorContainer.currentFile());
+    const currentFile = this.editorContainer.currentFile();
+    if (currentFile) {
+      this.dispatchEventToListeners(Events.EditorSelected, currentFile);
+    }
   }
 
   private removeToolbarChangedListener(): void {
@@ -581,6 +584,16 @@ export  // TODO(crbug.com/1167717): Make this a const enum again
       EditorSelected = 'EditorSelected',
     }
 
+export interface EditorClosedEvent {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  wasSelected: boolean;
+}
+
+export type EventTypes = {
+  [Events.EditorClosed]: EditorClosedEvent,
+  [Events.EditorSelected]: Workspace.UISourceCode.UISourceCode,
+};
+
 /**
  * @interface
  */

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -236,11 +236,10 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
         SourceFrame.SourcesTextEditor.Events.SelectionChanged, this.selectionChanged, this);
   }
 
-  private scrollChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private scrollChanged({data: lineNumber}: Common.EventTarget.EventTargetEvent<number>): void {
     if (this.scrollTimer) {
       clearTimeout(this.scrollTimer);
     }
-    const lineNumber = (event.data as number);
     this.scrollTimer = window.setTimeout(saveHistory.bind(this), 100);
     if (this.currentFileInternal) {
       this.history.updateScrollLineNumber(this.currentFileInternal.url(), lineNumber);
@@ -251,8 +250,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
-  private selectionChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const range = (event.data as TextUtils.TextRange.TextRange);
+  private selectionChanged({data: range}: Common.EventTarget.EventTargetEvent<TextUtils.TextRange.TextRange>): void {
     if (this.currentFileInternal) {
       this.history.updateSelectionRange(this.currentFileInternal.url(), range);
     }
@@ -511,10 +509,8 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
-  private tabClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const tabId = (event.data.tabId as string);
-    const userGesture = (event.data.isUserGesture as boolean);
-
+  private tabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
+    const {tabId, isUserGesture} = event.data;
     const uiSourceCode = this.files.get(tabId);
     if (this.currentFileInternal === uiSourceCode) {
       this.removeViewListeners();
@@ -531,19 +527,18 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
 
       this.dispatchEventToListeners(Events.EditorClosed, uiSourceCode);
 
-      if (userGesture) {
+      if (isUserGesture) {
         this.editorClosedByUserAction(uiSourceCode);
       }
     }
   }
 
-  private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const tabId = (event.data.tabId as string);
-    const userGesture = (event.data.isUserGesture as boolean);
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
+    const {tabId, isUserGesture} = event.data;
 
     const uiSourceCode = this.files.get(tabId);
     if (uiSourceCode) {
-      this.innerShowFile(uiSourceCode, userGesture);
+      this.innerShowFile(uiSourceCode, isUserGesture);
     }
   }
 

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -51,7 +51,9 @@ import {ScriptOriginPlugin} from './ScriptOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
-export class UISourceCodeFrame extends SourceFrame.SourceFrame.SourceFrameImpl {
+export class UISourceCodeFrame extends
+    Common.ObjectWrapper.eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
+        SourceFrame.SourceFrame.SourceFrameImpl) {
   private uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
   private readonly diff: SourceFrame.SourceCodeDiff.SourceCodeDiff|undefined;
   private muteSourceCodeEvents: boolean;
@@ -919,3 +921,7 @@ function messageLevelComparator(a: Workspace.UISourceCode.Message, b: Workspace.
 export enum Events {
   ToolbarItemsChanged = 'ToolbarItemsChanged',
 }
+
+export type EventTypes = {
+  [Events.ToolbarItemsChanged]: void,
+};

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,17 +7,12 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  right: 6px;
+  right: 16px;
   cursor: pointer;
   opacity: 0%;
-  min-width: 20px;
 }
 
 .watch-expression-header:hover .watch-expression-delete-button {
-  opacity: 50%;
-}
-
-.watch-expression-header:hover .watch-expression-delete-button:hover {
   opacity: 100%;
 }
 
@@ -101,7 +96,7 @@ li.watch-expression-tree-item {
 }
 
 li.watch-expression-tree-item:hover {
-  background-color: var(--color-background-elevation-2);
+  background-color: var(--color-background-elevation-1);
 }
 
 .watch-expression-header:focus-visible {

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -249,7 +249,7 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     this.updateContents();
   }
 
-  private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;
     }

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -150,8 +150,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   private readonly countersView: CountersGraph;
   private readonly detailsSplitWidget: UI.SplitWidget.SplitWidget;
   private readonly detailsView: TimelineDetailsView;
-  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
-  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
+  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
+  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
   private nextExtensionIndex: number;
   private readonly boundRefresh: () => void;
   private selectedTrack: TimelineModel.TimelineModel.Track|null;
@@ -361,9 +361,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.scheduleUpdate();
   }
 
-  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent): void {
+  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent<number>): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
-    const entryIndex = (commonEvent.data as number);
+    const entryIndex = commonEvent.data;
     const event = this.mainDataProvider.eventByIndex(entryIndex);
     if (!event) {
       return;

package/front_end/panels/timeline/TimelineLayersView.ts

@@ -63,13 +63,13 @@ export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
     }
   }
 
-  private onPaintProfilerRequested(event: Common.EventTarget.EventTargetEvent): void {
-    const selection = (event.data as LayerViewer.LayerViewHost.Selection);
-    this.layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
-      if (snapshotWithRect) {
-        this.showPaintProfilerCallback(snapshotWithRect.snapshot);
-      }
-    });
+  private async onPaintProfilerRequested(
+      event: Common.EventTarget.EventTargetEvent<LayerViewer.LayerViewHost.Selection>): Promise<void> {
+    const selection = event.data;
+    const snapshotWithRect = await this.layers3DView.snapshotForSelection(selection);
+    if (snapshotWithRect) {
+      this.showPaintProfilerCallback(snapshotWithRect.snapshot);
+    }
   }
 
   private update(): void {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -448,7 +448,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.loader = TimelineLoader.loadFromEvents(events, this);
   }
 
-  private onOverviewWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onOverviewWindowChanged(
+      event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>): void {
     if (!this.performanceModel) {
       return;
     }