chrome-devtools-frontend 1.0.922470 → 1.0.922924

package/front_end/panels/coverage/CoverageView.ts

@@ -614,10 +614,11 @@ export class LineDecorator implements SourceFrame.SourceFrame.LineDecorator {
     }
   }
 
-  makeGutterClickHandler(url: string): (arg0: Common.EventTarget.EventTargetEvent) => void {
-    function handleGutterClick(event: Common.EventTarget.EventTargetEvent): void {
-      const eventData = event.data as SourceFrame.SourcesTextEditor.GutterClickEventData;
-      if (eventData.gutterType !== LineDecorator.GUTTER_TYPE) {
+  makeGutterClickHandler(url: string):
+      (arg0: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>) => void {
+    function handleGutterClick(
+        event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): void {
+      if (event.data.gutterType !== LineDecorator.GUTTER_TYPE) {
         return;
       }
       const coverageViewId = 'coverage';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -17,7 +17,7 @@ import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {OverviewController} from './CSSOverviewController.js';
+import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
@@ -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[]>;
@@ -335,7 +335,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
       return;
     }
 
-    let payload;
+    let payload: PopulateNodesEvent;
     switch (type) {
       case 'contrast': {
         const section = dataset.section;
@@ -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;
         }
@@ -451,7 +451,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     }
 
     evt.consume();
-    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.PopulateNodes, payload);
+    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.PopulateNodes, {payload});
     this.mainContainer.setSidebarMinimized(false);
   }
 
@@ -605,43 +605,43 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.resultsContainer.element.appendChild(this.fragment.element());
   }
 
-  private createElementsView(evt: Common.EventTarget.EventTargetEvent): void {
-    const {type, nodes} = evt.data;
+  private createElementsView(evt: Common.EventTarget.EventTargetEvent<{payload: PopulateNodesEvent}>): void {
+    const {payload} = evt.data;
 
     let id = '';
     let tabTitle = '';
 
-    switch (type) {
+    switch (payload.type) {
       case 'contrast': {
-        const {section, key} = evt.data;
+        const {section, key} = payload;
         id = `${section}-${key}`;
         tabTitle = i18nString(UIStrings.contrastIssues);
         break;
       }
 
       case 'color': {
-        const {section, color} = evt.data;
+        const {section, color} = payload;
         id = `${section}-${color}`;
         tabTitle = `${color.toUpperCase()} (${section})`;
         break;
       }
 
       case 'unused-declarations': {
-        const {declaration} = evt.data;
+        const {declaration} = payload;
         id = `${declaration}`;
         tabTitle = `${declaration}`;
         break;
       }
 
       case 'media-queries': {
-        const {text} = evt.data;
+        const {text} = payload;
         id = `${text}`;
         tabTitle = `${text}`;
         break;
       }
 
       case 'font-info': {
-        const {name} = evt.data;
+        const {name} = payload;
         id = `${name}`;
         tabTitle = `${name}`;
         break;
@@ -651,7 +651,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     let view = this.viewMap.get(id);
     if (!view) {
       view = new ElementDetailsView(this.controller, this.domModel, this.cssModel, this.linkifier);
-      view.populateNodes(nodes);
+      view.populateNodes(payload.nodes);
       this.viewMap.set(id, view);
     }
 
@@ -995,8 +995,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.RequestNodeHighlight, backendNodeId);
   }
 
-  async populateNodes(data: {nodeId: Protocol.DOM.BackendNodeId, hasChildren: boolean, [x: string]: unknown}[]):
-      Promise<void> {
+  async populateNodes(data: PopulateNodesEventNodes): Promise<void> {
     this.elementGrid.rootNode().removeChildren();
 
     if (!data.length) {
@@ -1005,39 +1004,39 @@ export class ElementDetailsView extends UI.Widget.Widget {
 
     const [firstItem] = data;
     const visibility = new Set<string>();
-    firstItem.nodeId && visibility.add('nodeId');
-    firstItem.declaration && visibility.add('declaration');
-    firstItem.sourceURL && visibility.add('sourceURL');
-    firstItem.contrastRatio && visibility.add('contrastRatio');
+    'nodeId' in firstItem && firstItem.nodeId && visibility.add('nodeId');
+    'declaration' in firstItem && firstItem.declaration && visibility.add('declaration');
+    'sourceURL' in firstItem && firstItem.sourceURL && visibility.add('sourceURL');
+    'contrastRatio' in firstItem && firstItem.contrastRatio && visibility.add('contrastRatio');
 
-    let relatedNodesMap;
-    if (visibility.has('nodeId')) {
+    let relatedNodesMap: Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>|null|undefined;
+    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.reduce((prev, curr) => {
-        if (CSSOverviewCompletedView.pushedNodes.has(curr.nodeId)) {
+      const nodeIds = (data as {nodeId: Protocol.DOM.BackendNodeId}[]).reduce((prev, curr) => {
+        const nodeId = curr.nodeId;
+        if (CSSOverviewCompletedView.pushedNodes.has(nodeId)) {
           return prev;
         }
-        CSSOverviewCompletedView.pushedNodes.add(curr.nodeId);
-        return prev.add(curr.nodeId);
-      }, new Set<Protocol.DOM.BackendNodeId>()));
+        CSSOverviewCompletedView.pushedNodes.add(nodeId);
+        return prev.add(nodeId);
+      }, new Set<Protocol.DOM.BackendNodeId>());
       relatedNodesMap = await this.domModel.pushNodesByBackendIdsToFrontend(nodeIds);
     }
 
     for (const item of data) {
-      if (visibility.has('nodeId')) {
+      let frontendNode;
+      if ('nodeId' in item && visibility.has('nodeId')) {
         if (!relatedNodesMap) {
           continue;
         }
-        const frontendNode = relatedNodesMap.get(item.nodeId);
+        frontendNode = relatedNodesMap.get(item.nodeId);
         if (!frontendNode) {
           continue;
         }
-
-        item.node = frontendNode;
       }
 
-      const node = new ElementNode(item, this.linkifier, this.cssModel);
+      const node = new ElementNode(item, frontendNode, this.linkifier, this.cssModel);
       node.selectable = false;
       this.elementGrid.insertChild(node);
     }
@@ -1051,28 +1050,32 @@ export class ElementDetailsView extends UI.Widget.Widget {
 export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode<ElementNode> {
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly cssModel: SDK.CSSModel.CSSModel;
+  private readonly frontendNode: SDK.DOMModel.DOMNode|null|undefined;
 
   constructor(
-      data: {
-        hasChildren: boolean,
-        [x: string]: unknown,
-      },
+      data: PopulateNodesEventNodeTypes, frontendNode: SDK.DOMModel.DOMNode|null|undefined,
       linkifier: Components.Linkifier.Linkifier, cssModel: SDK.CSSModel.CSSModel) {
-    super(data, data.hasChildren);
+    super(data);
 
+    this.frontendNode = frontendNode;
     this.linkifier = linkifier;
     this.cssModel = cssModel;
   }
 
   createCell(columnId: string): HTMLElement {
     // Nodes.
+    const {frontendNode} = this;
     if (columnId === 'nodeId') {
       const cell = this.createTD(columnId);
       cell.textContent = '...';
 
-      Common.Linkifier.Linkifier.linkify(this.data.node).then(link => {
+      if (!frontendNode) {
+        throw new Error('Node entry is missing a related frontend node.');
+      }
+
+      Common.Linkifier.Linkifier.linkify(frontendNode).then(link => {
         cell.textContent = '';
-        (link as HTMLElement).dataset.backendNodeId = this.data.node.backendNodeId();
+        (link as HTMLElement).dataset.backendNodeId = frontendNode.backendNodeId().toString();
         cell.appendChild(link);
         const button = document.createElement('button');
         button.classList.add('show-element');

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -4,8 +4,12 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 
-export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
+import type {ContrastIssue} from './CSSOverviewCompletedView.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+
+export class OverviewController extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   currentUrl: string;
   constructor() {
     super();
@@ -25,11 +29,47 @@ export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
   }
 }
 
-export const Events = {
-  RequestOverviewStart: Symbol('RequestOverviewStart'),
-  RequestNodeHighlight: Symbol('RequestNodeHighlight'),
-  PopulateNodes: Symbol('PopulateNodes'),
-  RequestOverviewCancel: Symbol('RequestOverviewCancel'),
-  OverviewCompleted: Symbol('OverviewCompleted'),
-  Reset: Symbol('Reset'),
+export type PopulateNodesEvent = {
+  type: 'contrast',
+  key: string,
+  section: string|undefined,
+  nodes: ContrastIssue[],
+}|{
+  type: 'color',
+  color: string,
+  section: string | undefined,
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
+}|{
+  type: 'unused-declarations',
+  declaration: string,
+  nodes: UnusedDeclaration[],
+}|{
+  type: 'media-queries',
+  text: string,
+  nodes: Protocol.CSS.CSSMedia[],
+}|{
+  type: 'font-info',
+  name: string,
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
+};
+
+export type PopulateNodesEventNodes = PopulateNodesEvent['nodes'];
+export type PopulateNodesEventNodeTypes = PopulateNodesEventNodes[0];
+
+export const enum Events {
+  RequestOverviewStart = 'RequestOverviewStart',
+  RequestNodeHighlight = 'RequestNodeHighlight',
+  PopulateNodes = 'PopulateNodes',
+  RequestOverviewCancel = 'RequestOverviewCancel',
+  OverviewCompleted = 'OverviewCompleted',
+  Reset = 'Reset',
+}
+
+export type EventTypes = {
+  [Events.RequestOverviewStart]: void,
+  [Events.RequestNodeHighlight]: number,
+  [Events.PopulateNodes]: {payload: PopulateNodesEvent},
+  [Events.RequestOverviewCancel]: void,
+  [Events.OverviewCompleted]: void,
+  [Events.Reset]: void,
 };

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,10 +97,11 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
         nonSimple: 0,
       },
     };
+    this.textColorContrastIssues = new Map();
     this.renderInitialView();
   }
 
-  private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent): void {
+  private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
     this.model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
@@ -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/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/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/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/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;
@@ -171,7 +173,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 +182,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);
   }
 
@@ -308,7 +309,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<OverviewPaneEventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
   readonly overviewGrid: PerfUI.OverviewGrid.OverviewGrid;
@@ -329,7 +331,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 +351,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 +449,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/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);
     }
   }