chrome-devtools-frontend 1.0.921565 → 1.0.922782

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;
     }

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -1000,7 +1000,8 @@ export class BottomUpTimelineTreeView extends AggregatedTimelineTreeView {
   }
 }
 
-export class TimelineStackView extends UI.Widget.VBox {
+export class TimelineStackView extends
+    Common.ObjectWrapper.eventMixin<TimelineStackView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly treeView: TimelineTreeView;
   private readonly dataGrid: DataGrid.ViewportDataGrid.ViewportDataGrid<unknown>;
 
@@ -1059,4 +1060,8 @@ export namespace TimelineStackView {
   export enum Events {
     SelectionChanged = 'SelectionChanged',
   }
+
+  export type EventTypes = {
+    [Events.SelectionChanged]: void,
+  };
 }

package/front_end/ui/components/docs/toggle_fonts.ts

@@ -6,7 +6,28 @@ const PLATFORM_MAC_CLASS = 'platform-mac';
 const PLATFORM_LINUX_CLASS = 'platform-linux';
 const PLATFORM_WINDOWS_CLASS = 'platform-windows';
 
+const urlParams = new URLSearchParams(window.location.search);
+
 export function init(): void {
+  // fontFamily is provided by the interaction tests.
+  // While platform-specific class names define multiple font-families,
+  // we want a single font-family to be used by the tests.
+  if (urlParams.has('fontFamily')) {
+    const div = document.createElement('div');
+    div.style.position = 'fixed';
+    div.style.bottom = '10px';
+    div.style.right = '230px';
+    div.style.width = '250px';
+    div.style.fontSize = '16px';
+    div.style.padding = '5px';
+    div.innerText = `font-family: ${urlParams.get('fontFamily')}`;
+    window.addEventListener('load', () => {
+      document.body.appendChild(div);
+    });
+    document.body.style.fontFamily = `${urlParams.get('fontFamily')}`;
+    return;
+  }
+
   document.body.classList.add(PLATFORM_LINUX_CLASS);
   const button = document.createElement('button');
 
@@ -17,7 +38,13 @@ export function init(): void {
   ];
 
   function toggleFonts(): void {
-    document.body.classList.toggle(loop[0]);
+    for (const className of loop) {
+      if (className === loop[0]) {
+        document.body.classList.add(className);
+      } else {
+        document.body.classList.remove(className);
+      }
+    }
     loop.push(loop.shift() as string);
     button.innerText = 'Turn on ' + loop[0] + ' fonts';
   }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -9,7 +9,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as UI from '../../legacy/legacy.js';
 
 import type {Settings} from './LinearMemoryInspector.js';
-import {LinearMemoryInspectorPaneImpl} from './LinearMemoryInspectorPane.js';
+import {Events as LmiEvents, LinearMemoryInspectorPaneImpl} from './LinearMemoryInspectorPane.js';
 import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 import {Endianness, getDefaultValueTypeMapping} from './ValueInterpreterDisplayUtils.js';
 
@@ -82,7 +82,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.RuntimeModel.RuntimeModel, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.GlobalObjectCleared, this.onGlobalObjectClear, this);
-    this.paneInstance.addEventListener('view-closed', this.viewClosed.bind(this));
+    this.paneInstance.addEventListener(LmiEvents.ViewClosed, this.viewClosed.bind(this));
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this.onDebuggerPause, this);
@@ -202,12 +202,11 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     this.modelRemoved(event.data.runtimeModel());
   }
 
-  private viewClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const bufferId = event.data;
+  private viewClosed({data: bufferId}: Common.EventTarget.EventTargetEvent<string>): void {
     const remoteObj = this.bufferIdToRemoteObject.get(bufferId);
     if (remoteObj) {
       remoteObj.release();
     }
-    this.bufferIdToRemoteObject.delete(event.data);
+    this.bufferIdToRemoteObject.delete(bufferId);
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 * as UI from '../../legacy/legacy.js';
 
@@ -48,7 +48,8 @@ export class Wrapper extends UI.Widget.VBox {
   }
 }
 
-export class LinearMemoryInspectorPaneImpl extends UI.Widget.VBox {
+export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   private readonly tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly tabIdToInspectorView: Map<string, LinearMemoryInspectorView>;
   constructor() {
@@ -105,13 +106,21 @@ export class LinearMemoryInspectorPaneImpl extends UI.Widget.VBox {
     view.refreshData();
   }
 
-  private tabClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const tabId = event.data.tabId;
+  private tabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
+    const {tabId} = event.data;
     this.tabIdToInspectorView.delete(tabId);
-    this.dispatchEventToListeners('view-closed', tabId);
+    this.dispatchEventToListeners(Events.ViewClosed, tabId);
   }
 }
 
+export const enum Events {
+  ViewClosed = 'ViewClosed',
+}
+
+export type EventTypes = {
+  [Events.ViewClosed]: string,
+};
+
 class LinearMemoryInspectorView extends UI.Widget.VBox {
   private memoryWrapper: LazyUint8Array;
   private address: number;

package/front_end/ui/legacy/Dialog.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Common from '../../core/common/common.js';
+
 import * as ARIAUtils from './ARIAUtils.js';
 import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
 import {InspectorView} from './InspectorView.js';
@@ -37,7 +39,7 @@ import type {DevToolsCloseButton} from './UIUtils.js';
 import type {WidgetElement} from './Widget.js';
 import {WidgetFocusRestorer} from './Widget.js';
 
-export class Dialog extends GlassPane {
+export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {
   private tabIndexBehavior: OutsideTabIndexBehavior;
   private tabIndexMap: Map<HTMLElement, number>;
   private focusRestorer: WidgetFocusRestorer|null;
@@ -94,7 +96,7 @@ export class Dialog extends GlassPane {
       this.targetDocument.removeEventListener('keydown', this.targetDocumentKeyDownHandler, true);
     }
     this.restoreTabIndexOnElements();
-    this.dispatchEventToListeners('hidden');
+    this.dispatchEventToListeners(Events.Hidden);
     Dialog.instance = null;
   }
 
@@ -198,6 +200,14 @@ export class Dialog extends GlassPane {
   private static instance: Dialog|null = null;
 }
 
+export const enum Events {
+  Hidden = 'hidden',
+}
+
+export type EventTypes = {
+  [Events.Hidden]: void,
+};
+
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum OutsideTabIndexBehavior {