chrome-devtools-frontend 1.0.922782 → 1.0.923788

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -561,8 +561,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.addCookieDocument(frame);
   }
 
-  private databaseAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const database = (event.data as DatabaseModelDatabase);
+  private databaseAdded({data: database}: Common.EventTarget.EventTargetEvent<DatabaseModelDatabase>): void {
     const databaseTreeElement = new DatabaseTreeElement(this, database);
     this.databaseTreeElements.set(database, databaseTreeElement);
     this.databasesListTreeElement.appendChild(databaseTreeElement);
@@ -1113,9 +1112,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     }
   }
 
-  private indexedDBAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const model = (event.data.model as IndexedDBModel);
+  private indexedDBAdded({
+    data: {databaseId, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, model: IndexedDBModel}>): void {
     this.addIndexedDB(model, databaseId);
   }
 
@@ -1126,10 +1125,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     model.refreshDatabase(databaseId);
   }
 
-  private indexedDBRemoved(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const model = (event.data.model as IndexedDBModel);
-
+  private indexedDBRemoved({
+    data: {databaseId, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, model: IndexedDBModel}>): void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, databaseId);
     if (!idbDatabaseTreeElement) {
       return;
@@ -1144,11 +1142,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     this.setExpandable(this.childCount() > 0);
   }
 
-  private indexedDBLoaded(event: Common.EventTarget.EventTargetEvent): void {
-    const database = (event.data.database as IndexedDBModelDatabase);
-    const model = (event.data.model as IndexedDBModel);
-    const entriesUpdated = (event.data.entriesUpdated as boolean);
-
+  private indexedDBLoaded(
+      {data: {database, model, entriesUpdated}}: Common.EventTarget
+          .EventTargetEvent<{database: IndexedDBModelDatabase, model: IndexedDBModel, entriesUpdated: boolean}>): void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, database.databaseId);
     if (!idbDatabaseTreeElement) {
       return;
@@ -1161,11 +1157,10 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     // For sniffing in tests.
   }
 
-  private indexedDBContentUpdated(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const objectStoreName = (event.data.objectStoreName as string);
-    const model = (event.data.model as IndexedDBModel);
-
+  private indexedDBContentUpdated({
+    data: {databaseId, objectStoreName, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, objectStoreName: string, model: IndexedDBModel}>):
+      void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, databaseId);
     if (!idbDatabaseTreeElement) {
       return;

package/front_end/panels/application/BackForwardCacheView.ts

@@ -60,8 +60,9 @@ const UIStrings = {
    */
   chromeSupportNeeded: 'The last navigation was not cached because',
   /**
-   * @description Explanation text for the reasons which will be supported in a future version
-   * of Chrome.
+   * @description Explanation text appended to a reason why the usage of the back-forward cache
+   * is not possible, if in a future version of Chrome this reason will not prevent the usage
+   * of the back-forward cache anymore.
    */
   willBeSupported: '(Supported in a future version of Chrome)',
 };
@@ -157,7 +158,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
             i18nString(UIStrings.pageSupportNeeded)
           }</${ReportView.ReportView.ReportKey.litTagName}>
           <${ReportView.ReportView.ReportValue.litTagName}>${
-            pageSupportNeeded.map(explanation => this.renderExplanation(explanation))
+            pageSupportNeeded.concat(supportPending).map(explanation => this.renderExplanation(explanation))
           }</${ReportView.ReportView.ReportValue.litTagName}>
         ` : LitHtml.nothing}
       ${circumstantial.length > 0 ?

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -99,9 +99,9 @@ export class DOMStorageItemsView extends StorageItemsView {
       refreshCallback: this.refreshItems.bind(this),
     });
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, event => {
-      this.previewEntry((event.data as DataGrid.DataGrid.DataGridNode<unknown>));
+      this.previewEntry(event.data);
     });
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DeselectedNode, _event => {
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DeselectedNode, () => {
       this.previewEntry(null);
     });
     this.dataGrid.setStriped(true);

package/front_end/panels/application/DatabaseModel.ts

@@ -125,7 +125,7 @@ export class Database {
   }
 }
 
-export class DatabaseModel extends SDK.SDKModel.SDKModel {
+export class DatabaseModel extends SDK.SDKModel.SDKModel<EventTypes> {
   private databasesInternal: Database[];
   readonly agent: ProtocolProxyApi.DatabaseApi;
   private enabled?: boolean;
@@ -178,6 +178,11 @@ export enum Events {
   DatabasesRemoved = 'DatabasesRemoved',
 }
 
+export type EventTypes = {
+  [Events.DatabaseAdded]: Database,
+  [Events.DatabasesRemoved]: void,
+};
+
 export class DatabaseDispatcher implements ProtocolProxyApi.DatabaseDispatcher {
   private readonly model: DatabaseModel;
   constructor(model: DatabaseModel) {

package/front_end/panels/application/IndexedDBModel.ts

@@ -33,7 +33,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 
-export class IndexedDBModel extends SDK.SDKModel.SDKModel implements ProtocolProxyApi.StorageDispatcher {
+export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.StorageDispatcher {
   private readonly securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager|null;
   private readonly indexedDBAgent: ProtocolProxyApi.IndexedDBApi;
   private readonly storageAgent: ProtocolProxyApi.StorageApi;
@@ -424,6 +424,14 @@ export enum Events {
   IndexedDBContentUpdated = 'IndexedDBContentUpdated',
 }
 
+export type EventTypes = {
+  [Events.DatabaseAdded]: {model: IndexedDBModel, databaseId: DatabaseId},
+  [Events.DatabaseRemoved]: {model: IndexedDBModel, databaseId: DatabaseId},
+  [Events.DatabaseLoaded]: {model: IndexedDBModel, database: Database, entriesUpdated: boolean},
+  [Events.DatabaseNamesRefreshed]: void,
+  [Events.IndexedDBContentUpdated]: {model: IndexedDBModel, databaseId: DatabaseId, objectStoreName: string},
+};
+
 export class Entry {
   key: SDK.RemoteObject.RemoteObject;
   primaryKey: SDK.RemoteObject.RemoteObject;

package/front_end/panels/application/IndexedDBViews.ts

@@ -343,7 +343,7 @@ export class IDBDataView extends UI.View.SimpleView {
       editCallback: undefined,
     });
     dataGrid.setStriped(true);
-    dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, _vent => this.updateToolbarEnablement(), this);
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, () => this.updateToolbarEnablement(), this);
     return dataGrid;
   }
 

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -216,7 +216,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     dataGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this.sortingChanged, this);
 
     dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, event => {
-      this.previewCachedResponse(event.data.data);
+      this.previewCachedResponse(event.data.data as SDK.NetworkRequest.NetworkRequest);
     }, this);
     dataGrid.setStriped(true);
     return dataGrid;

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -172,8 +172,9 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
     this.executionContextDestroyed(executionContext);
   }
 
-  private executionContextChangedExternally(event: Common.EventTarget.EventTargetEvent): void {
-    const executionContext = (event.data as SDK.RuntimeModel.ExecutionContext | null);
+  private executionContextChangedExternally({
+    data: executionContext,
+  }: Common.EventTarget.EventTargetEvent<SDK.RuntimeModel.ExecutionContext|null>): void {
     this.dropDown.selectItem(executionContext);
   }
 

package/front_end/panels/console/ConsolePinPane.ts

@@ -168,7 +168,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
 
 let consolePinNumber = 0;
 
-export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
+export class ConsolePin {
   private readonly pinElement: Element;
   private readonly pinPreview: HTMLElement;
   private lastResult: SDK.RuntimeModel.EvaluationResult|null;
@@ -181,7 +181,6 @@ export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
   private consolePinNumber: number;
 
   constructor(expression: string, pinPane: ConsolePinPane) {
-    super();
     this.consolePinNumber = ++consolePinNumber;
     const deletePinIcon = (document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton);
     deletePinIcon.gray = true;

package/front_end/panels/console/ConsoleView.ts

@@ -620,11 +620,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
 
   private registerWithMessageSink(): void {
     Common.Console.Console.instance().messages().forEach(this.addSinkMessage, this);
-    Common.Console.Console.instance().addEventListener(Common.Console.Events.MessageAdded, messageAdded, this);
-
-    function messageAdded(this: ConsoleView, event: Common.EventTarget.EventTargetEvent): void {
-      this.addSinkMessage((event.data as Common.Console.Message));
-    }
+    Common.Console.Console.instance().addEventListener(Common.Console.Events.MessageAdded, ({data: message}) => {
+      this.addSinkMessage(message);
+    }, this);
   }
 
   private addSinkMessage(message: Common.Console.Message): void {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -729,7 +729,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           targetFunction, functionElement, true, includePreview);
       result.appendChild(functionElement);
       if (targetFunction !== func) {
-        const note = result.createChild('span', 'object-info-state-note');
+        const note = result.createChild('span', 'object-state-note info-note');
         UI.Tooltip.Tooltip.install(note, i18nString(UIStrings.functionWasResolvedFromBound));
       }
       result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, targetFunction), false);

package/front_end/panels/coverage/CoverageModel.ts

@@ -494,7 +494,7 @@ function locationCompare(a: string, b: string): number {
       Number.parseInt(aPos, 10) - Number.parseInt(bPos, 10);
 }
 
-export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper {
+export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCoverageInfo.EventTypes> {
   private readonly urlInternal: string;
   private coverageInfoByLocation: Map<string, CoverageInfo>;
   private sizeInternal: number;
@@ -673,8 +673,14 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper {
 }
 
 export namespace URLCoverageInfo {
-  export const Events = {
-    SizesChanged: Symbol('SizesChanged'),
+  // TODO(crbug.com/1167717): Make this a const enum again
+  // eslint-disable-next-line rulesdir/const_enum
+  export enum Events {
+    SizesChanged = 'SizesChanged',
+  }
+
+  export type EventTypes = {
+    [Events.SizesChanged]: void,
   };
 }
 

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -178,7 +178,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export type NodeStyleStats = Map<string, Set<number>>;
 
 export interface ContrastIssue {
-  nodeId: number;
+  nodeId: Protocol.DOM.BackendNodeId;
   contrastRatio: number;
   textColor: Common.Color.Color;
   backgroundColor: Common.Color.Color;
@@ -189,18 +189,18 @@ export interface ContrastIssue {
   };
 }
 export interface OverviewData {
-  backgroundColors: Map<string, Set<number>>;
-  textColors: Map<string, Set<number>>;
+  backgroundColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  textColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   textColorContrastIssues: Map<string, ContrastIssue[]>;
-  fillColors: Map<string, Set<number>>;
-  borderColors: Map<string, Set<number>>;
+  fillColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  borderColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   globalStyleStats: {
     styleRules: number,
     inlineStyles: number,
     externalSheets: number,
     stats: {type: number, class: number, id: number, universal: number, attribute: number, nonSimple: number},
   };
-  fontInfo: Map<string, Map<string, Map<string, number[]>>>;
+  fontInfo: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
   elementCount: number;
   mediaQueries: Map<string, Protocol.CSS.CSSMedia[]>;
   unusedDeclarations: Map<string, UnusedDeclaration[]>;
@@ -435,7 +435,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
           return;
         }
 
-        const nodesIds = (fontMetricInfo.get(value) as number[]);
+        const nodesIds = fontMetricInfo.get(value);
         if (!nodesIds) {
           return;
         }
@@ -1013,8 +1013,8 @@ export class ElementDetailsView extends UI.Widget.Widget {
     if ('nodeId' in firstItem && visibility.has('nodeId')) {
       // Grab the nodes from the frontend, but only those that have not been
       // retrieved already.
-      const nodeIds = (data as {nodeId: number}[]).reduce((prev, curr) => {
-        const nodeId = curr.nodeId as Protocol.DOM.BackendNodeId;
+      const nodeIds = (data as {nodeId: Protocol.DOM.BackendNodeId}[]).reduce((prev, curr) => {
+        const nodeId = curr.nodeId;
         if (CSSOverviewCompletedView.pushedNodes.has(nodeId)) {
           return prev;
         }
@@ -1030,7 +1030,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
         if (!relatedNodesMap) {
           continue;
         }
-        frontendNode = relatedNodesMap.get(item.nodeId as Protocol.DOM.BackendNodeId);
+        frontendNode = relatedNodesMap.get(item.nodeId);
         if (!frontendNode) {
           continue;
         }

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -38,7 +38,7 @@ export type PopulateNodesEvent = {
   type: 'color',
   color: string,
   section: string | undefined,
-  nodes: {nodeId: number}[],
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
 }|{
   type: 'unused-declarations',
   declaration: string,
@@ -50,7 +50,7 @@ export type PopulateNodesEvent = {
 }|{
   type: 'font-info',
   name: string,
-  nodes: {nodeId: number}[],
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
 };
 
 export type PopulateNodesEventNodes = PopulateNodesEvent['nodes'];

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -15,12 +15,12 @@ import {CSSOverviewUnusedDeclarations} from './CSSOverviewUnusedDeclarations.js'
 
 interface NodeStyleStats {
   elementCount: number;
-  backgroundColors: Map<string, Set<number>>;
-  textColors: Map<string, Set<number>>;
+  backgroundColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  textColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   textColorContrastIssues: Map<string, ContrastIssue[]>;
-  fillColors: Map<string, Set<number>>;
-  borderColors: Map<string, Set<number>>;
-  fontInfo: Map<string, Map<string, Map<string, number[]>>>;
+  fillColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  borderColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  fontInfo: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
   unusedDeclarations: Map<string, UnusedDeclaration[]>;
 }
 

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -27,17 +27,17 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   private readonly startView: CSSOverviewStartView;
   private readonly processingView: CSSOverviewProcessingView;
   private readonly completedView: CSSOverviewCompletedView;
-  private backgroundColors?: Map<string, Set<number>>;
-  private textColors?: Map<string, Set<number>>;
-  private fillColors?: Map<string, Set<number>>;
-  private borderColors?: Map<string, Set<number>>;
-  private fontInfo?: Map<string, Map<string, Map<string, number[]>>>;
-  private mediaQueries?: Map<string, Protocol.CSS.CSSMedia[]>;
-  private unusedDeclarations?: Map<string, UnusedDeclaration[]>;
-  private elementCount?: number;
+  private backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private borderColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private fontInfo!: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
+  private mediaQueries!: Map<string, Protocol.CSS.CSSMedia[]>;
+  private unusedDeclarations!: Map<string, UnusedDeclaration[]>;
+  private elementCount!: number;
   private cancelled?: boolean;
-  private globalStyleStats?: GlobalStyleStats;
-  private textColorContrastIssues?: Map<string, ContrastIssue[]>;
+  private globalStyleStats!: GlobalStyleStats;
+  private textColorContrastIssues!: Map<string, ContrastIssue[]>;
 
   private constructor() {
     super('css_overview');
@@ -97,6 +97,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
         nonSimple: 0,
       },
     };
+    this.textColorContrastIssues = new Map();
     this.renderInitialView();
   }
 
@@ -124,16 +125,16 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
 
     this.completedView.show(this.contentElement);
     this.completedView.setOverviewData({
-      backgroundColors: (this.backgroundColors as Map<string, Set<number>>),
-      textColors: (this.textColors as Map<string, Set<number>>),
-      textColorContrastIssues: (this.textColorContrastIssues as Map<string, ContrastIssue[]>),
-      fillColors: (this.fillColors as Map<string, Set<number>>),
-      borderColors: (this.borderColors as Map<string, Set<number>>),
-      globalStyleStats: this.globalStyleStats as GlobalStyleStats,
-      fontInfo: (this.fontInfo as Map<string, Map<string, Map<string, number[]>>>),
-      elementCount: (this.elementCount as number),
-      mediaQueries: (this.mediaQueries as Map<string, Protocol.CSS.CSSMedia[]>),
-      unusedDeclarations: (this.unusedDeclarations as Map<string, UnusedDeclaration[]>),
+      backgroundColors: this.backgroundColors,
+      textColors: this.textColors,
+      textColorContrastIssues: this.textColorContrastIssues,
+      fillColors: this.fillColors,
+      borderColors: this.borderColors,
+      globalStyleStats: this.globalStyleStats,
+      fontInfo: this.fontInfo,
+      elementCount: this.elementCount,
+      mediaQueries: this.mediaQueries,
+      unusedDeclarations: this.unusedDeclarations,
     });
   }
 

package/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
@@ -38,20 +39,22 @@ const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewUnusedD
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface UnusedDeclaration {
   declaration: string;
-  nodeId: number;
+  nodeId: Protocol.DOM.BackendNodeId;
 }
 
 export class CSSOverviewUnusedDeclarations {
-  private static add(
-      target: Map<string, UnusedDeclaration[]>, key: string, item: {declaration: string, nodeId: number}): void {
+  private static add(target: Map<string, UnusedDeclaration[]>, key: string, item: {
+    declaration: string,
+    nodeId: Protocol.DOM.BackendNodeId,
+  }): void {
     const values = target.get(key) || [];
     values.push(item);
     target.set(key, values);
   }
 
   static checkForUnusedPositionValues(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], positionIdx: number,
-      topIdx: number, leftIdx: number, rightIdx: number, bottomIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      positionIdx: number, topIdx: number, leftIdx: number, rightIdx: number, bottomIdx: number): void {
     if (strings[positionIdx] !== 'static') {
       return;
     }
@@ -90,8 +93,8 @@ export class CSSOverviewUnusedDeclarations {
   }
 
   static checkForUnusedWidthAndHeightValues(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], displayIdx: number,
-      widthIdx: number, heightIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      displayIdx: number, widthIdx: number, heightIdx: number): void {
     if (strings[displayIdx] !== 'inline') {
       return;
     }
@@ -114,8 +117,8 @@ export class CSSOverviewUnusedDeclarations {
   }
 
   static checkForInvalidVerticalAlignment(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], displayIdx: number,
-      verticalAlignIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      displayIdx: number, verticalAlignIdx: number): void {
     if (!strings[displayIdx] || strings[displayIdx] === 'inline' || strings[displayIdx].startsWith('table')) {
       return;
     }

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -140,12 +140,12 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this.update();
   }
 
-  private onSelectedNodeChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onSelectedNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     if (this.previousTarget && this.prompt.text()) {
       this.input.textContent = '';
       this.installNodeClasses(this.previousTarget);
     }
-    this.previousTarget = (event.data as SDK.DOMModel.DOMNode | null);
+    this.previousTarget = event.data;
     this.update();
   }
 

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -28,8 +28,8 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     return this.cssModelInternal && this.cssModelInternal.isEnabled() ? this.cssModelInternal : null;
   }
 
-  private onNodeChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.nodeInternal = (event.data as SDK.DOMModel.DOMNode | null);
+  private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
+    this.nodeInternal = event.data;
     this.updateModel(this.nodeInternal ? this.nodeInternal.domModel().cssModel() : null);
     this.onComputedStyleChanged(null);
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -1099,9 +1099,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         SDK.CSSModel.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated, this.trackedCSSPropertiesUpdated, this);
   }
 
-  private trackedCSSPropertiesUpdated(event: Common.EventTarget.EventTargetEvent): void {
-    const domNodes = (event.data.domNodes as (SDK.DOMModel.DOMNode | null)[]);
-
+  private trackedCSSPropertiesUpdated({data: domNodes}:
+                                          Common.EventTarget.EventTargetEvent<(SDK.DOMModel.DOMNode | null)[]>): void {
     for (const domNode of domNodes) {
       if (!domNode) {
         continue;

package/front_end/panels/elements/PropertiesWidget.ts

@@ -84,8 +84,8 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     return propertiesWidgetInstance;
   }
 
-  private setNode(event: Common.EventTarget.EventTargetEvent): void {
-    this.node = (event.data as SDK.DOMModel.DOMNode | null);
+  private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
+    this.node = event.data;
     this.update();
   }
 

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -895,7 +895,7 @@ export enum Events {
 
 export type EventTypes = {
   [Events.PaintProfilerRequested]: Selection,
-  [Events.ScaleChanged]: void,
+  [Events.ScaleChanged]: number,
 };
 
 export const enum ChromeTexture {

package/front_end/panels/media/PlayerMessagesView.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 * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -70,8 +70,7 @@ interface SelectableLevel {
   overwrite?: boolean;
 }
 
-class MessageLevelSelector extends Common.ObjectWrapper.ObjectWrapper implements
-    UI.SoftDropDown.Delegate<SelectableLevel> {
+class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel> {
   private readonly items: UI.ListModel.ListModel<SelectableLevel>;
   private readonly view: PlayerMessagesView;
   private readonly itemMap: Map<number, SelectableLevel>;
@@ -84,7 +83,6 @@ class MessageLevelSelector extends Common.ObjectWrapper.ObjectWrapper implements
   elementsForItems: WeakMap<SelectableLevel, HTMLElement>;
 
   constructor(items: UI.ListModel.ListModel<SelectableLevel>, view: PlayerMessagesView) {
-    super();
     this.items = items;
     this.view = view;
     this.itemMap = new Map();

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -312,7 +312,8 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
     this.refresh();
   }
 
-  private async onFrameSelected(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  private async onFrameSelected(event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<unknown>>):
+      Promise<void> {
     this.currentSelectedNode = (event.data as ResourceWebSocketFrameNode);
     const content = this.currentSelectedNode.dataText();
 
@@ -333,7 +334,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
             this.request.url(), Common.ResourceType.resourceTypes.WebSocket, content)));
   }
 
-  private onFrameDeselected(_event: Common.EventTarget.EventTargetEvent): void {
+  private onFrameDeselected(): void {
     this.currentSelectedNode = null;
     this.splitWidget.setSidebarWidget(this.frameEmptyWidget);
   }

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -145,7 +145,9 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
   }
 }
 
-export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.SearchableView.Searchable {
+export class CPUProfileFlameChart extends
+    Common.ObjectWrapper.eventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements UI.SearchableView.Searchable {
   readonly searchableView: UI.SearchableView.SearchableView;
   readonly overviewPane: OverviewPane;
   readonly mainPane: PerfUI.FlameChart.FlameChart;
@@ -307,7 +309,7 @@ export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
   }
 }
 
-export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEvents, typeof UI.Widget.VBox>(
+export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
@@ -457,6 +459,6 @@ export interface OverviewPaneWindowChangedEvent {
   windowTimeRight: number;
 }
 
-export type OVerviewPaneEventTypes = {
+export type OverviewPaneEventTypes = {
   [OverviewPaneEvents.WindowChanged]: OverviewPaneWindowChangedEvent,
 };