chrome-devtools-frontend 1.0.921086 → 1.0.922671

package/front_end/panels/console/ConsoleSidebar.ts

@@ -51,7 +51,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ConsoleSidebar extends UI.Widget.VBox {
+export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly tree: UI.TreeOutline.TreeOutlineInShadow;
   private selectedTreeElement: UI.TreeOutline.TreeElement|null;
   private readonly treeElements: FilterTreeElement[];
@@ -146,6 +146,10 @@ export const enum Events {
   FilterSelected = 'FilterSelected',
 }
 
+export type EventTypes = {
+  [Events.FilterSelected]: void,
+};
+
 class ConsoleSidebarTreeElement extends UI.TreeOutline.TreeElement {
   protected filterInternal: ConsoleFilter;
 

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -200,7 +200,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     element: HTMLElement,
     forceSelect: () => void,
   }[];
-  private readonly messageResized: (arg0: Common.EventTarget.EventTargetEvent) => void;
+  private readonly messageResized: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void;
   protected elementInternal: HTMLElement|null;
   private readonly previewFormatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private searchRegexInternal: RegExp|null;
@@ -227,7 +227,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent) => void) {
+      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     this.message = consoleMessage;
     this.linkifier = linkifier;
     this.requestResolver = requestResolver;

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,8 +17,8 @@ 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 {Events} 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';
 
@@ -246,7 +246,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.elementContainer = new DetailsView();
 
     // If closing the last tab, collapse the sidebar.
-    this.elementContainer.addEventListener(UI.TabbedPane.Events.TabClosed, evt => {
+    this.elementContainer.addEventListener(Events.TabClosed, evt => {
       if (evt.data === 0) {
         this.mainContainer.setSidebarMinimized(true);
       }
@@ -285,8 +285,8 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
 
     this.sideBar.addEventListener(SidebarEvents.ItemSelected, this.sideBarItemSelected, this);
     this.sideBar.addEventListener(SidebarEvents.Reset, this.sideBarReset, this);
-    this.controller.addEventListener(Events.Reset, this.reset, this);
-    this.controller.addEventListener(Events.PopulateNodes, this.createElementsView, this);
+    this.controller.addEventListener(CSSOverViewControllerEvents.Reset, this.reset, this);
+    this.controller.addEventListener(CSSOverViewControllerEvents.PopulateNodes, this.createElementsView, this);
     this.resultsContainer.element.addEventListener('click', this.onClick.bind(this));
 
     this.data = null;
@@ -300,8 +300,8 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     // TODO(paullewis): update the links in the panels in case source has been .
   }
 
-  private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const data = (event.data as string);
+  private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
+    const {data} = event;
     const section = (this.fragment as UI.Fragment.Fragment).$(data);
     if (!section) {
       return;
@@ -311,7 +311,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   }
 
   private sideBarReset(): void {
-    this.controller.dispatchEventToListeners(Events.Reset);
+    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.Reset);
   }
 
   private reset(): void {
@@ -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;
@@ -451,7 +451,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     }
 
     evt.consume();
-    this.controller.dispatchEventToListeners(Events.PopulateNodes, payload);
+    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.PopulateNodes, {payload});
     this.mainContainer.setSidebarMinimized(false);
   }
 
@@ -464,7 +464,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     }
 
     const backendNodeId = Number(node.dataset.backendNodeId);
-    this.controller.dispatchEventToListeners(Events.RequestNodeHighlight, backendNodeId);
+    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.RequestNodeHighlight, backendNodeId);
   }
 
   private async render(data: OverviewData): Promise<void> {
@@ -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);
     }
 
@@ -832,7 +832,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   static readonly pushedNodes = new Set<Protocol.DOM.BackendNodeId>();
 }
-export class DetailsView extends UI.Widget.VBox {
+export class DetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private tabbedPane: UI.TabbedPane.TabbedPane;
   constructor() {
     super();
@@ -840,7 +840,7 @@ export class DetailsView extends UI.Widget.VBox {
     this.tabbedPane = new UI.TabbedPane.TabbedPane();
     this.tabbedPane.show(this.element);
     this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, () => {
-      this.dispatchEventToListeners(UI.TabbedPane.Events.TabClosed, this.tabbedPane.tabIds().length);
+      this.dispatchEventToListeners(Events.TabClosed, this.tabbedPane.tabIds().length);
     });
   }
 
@@ -857,6 +857,14 @@ export class DetailsView extends UI.Widget.VBox {
   }
 }
 
+export const enum Events {
+  TabClosed = 'TabClosed',
+}
+
+export type EventTypes = {
+  [Events.TabClosed]: number,
+};
+
 export class ElementDetailsView extends UI.Widget.Widget {
   private readonly controller: OverviewController;
   private domModel: SDK.DOMModel.DOMModel;
@@ -984,11 +992,10 @@ export class ElementDetailsView extends UI.Widget.Widget {
     }
 
     const backendNodeId = Number(node.dataset.backendNodeId);
-    this.controller.dispatchEventToListeners(Events.RequestNodeHighlight, backendNodeId);
+    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) {
@@ -997,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: number}[]).reduce((prev, curr) => {
+        const nodeId = curr.nodeId as Protocol.DOM.BackendNodeId;
+        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 as Protocol.DOM.BackendNodeId);
         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);
     }
@@ -1043,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: number}[],
+}|{
+  type: 'unused-declarations',
+  declaration: string,
+  nodes: UnusedDeclaration[],
+}|{
+  type: 'media-queries',
+  text: string,
+  nodes: Protocol.CSS.CSSMedia[],
+}|{
+  type: 'font-info',
+  name: string,
+  nodes: {nodeId: number}[],
+};
+
+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/CSSOverviewPanel.ts

@@ -100,7 +100,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     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));
   }
 

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -2,6 +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 * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -16,7 +17,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewSidebarPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
+export class CSSOverviewSidebarPanel extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   static get ITEM_CLASS_NAME(): string {
     return 'overview-sidebar-panel-item';
@@ -97,3 +99,8 @@ export const enum SidebarEvents {
   ItemSelected = 'ItemSelected',
   Reset = 'Reset',
 }
+
+export type EventTypes = {
+  [SidebarEvents.ItemSelected]: string,
+  [SidebarEvents.Reset]: void,
+};

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -33,7 +33,7 @@ export class BezierPopoverIcon {
   private treeElement: StylePropertyTreeElement;
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
   private swatch: InlineEditor.Swatches.BezierSwatch;
-  private readonly boundBezierChanged: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly boundBezierChanged: (event: Common.EventTarget.EventTargetEvent<string>) => void;
   private readonly boundOnScroll: (event: Event) => void;
   private bezierEditor?: InlineEditor.BezierEditor.BezierEditor;
   private scrollerElement?: Element;
@@ -84,8 +84,8 @@ export class BezierPopoverIcon {
     }
   }
 
-  private bezierChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.swatch.setBezierText((event.data as string));
+  private bezierChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
+    this.swatch.setBezierText(event.data);
     this.treeElement.applyStyleText(this.treeElement.renderedPropertyText(), false);
   }
 
@@ -115,7 +115,7 @@ export class ColorSwatchPopoverIcon {
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
   private swatch: InlineEditor.ColorSwatch.ColorSwatch;
   private contrastInfo: ColorPicker.ContrastInfo.ContrastInfo|null;
-  private readonly boundSpectrumChanged: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly boundSpectrumChanged: (event: Common.EventTarget.EventTargetEvent<string>) => void;
   private readonly boundOnScroll: (event: Event) => void;
   private spectrum?: ColorPicker.Spectrum.Spectrum;
   private scrollerElement?: Element;
@@ -206,12 +206,12 @@ export class ColorSwatchPopoverIcon {
     }
   }
 
-  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 color = Common.Color.Color.parse((event.data as string));
+  private spectrumChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
+    const color = Common.Color.Color.parse(event.data);
     if (!color) {
       return;
     }
@@ -255,7 +255,8 @@ export class ShadowSwatchPopoverHelper {
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
   private readonly shadowSwatch: InlineEditor.Swatches.CSSShadowSwatch;
   private iconElement: HTMLSpanElement;
-  private readonly boundShadowChanged: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly boundShadowChanged:
+      (event: Common.EventTarget.EventTargetEvent<InlineEditor.CSSShadowModel.CSSShadowModel>) => void;
   private readonly boundOnScroll: (event: Event) => void;
   private cssShadowEditor?: InlineEditor.CSSShadowEditor.CSSShadowEditor;
   private scrollerElement?: Element;
@@ -308,8 +309,8 @@ export class ShadowSwatchPopoverHelper {
     }
   }
 
-  private shadowChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.shadowSwatch.setCSSShadow((event.data as InlineEditor.CSSShadowModel.CSSShadowModel));
+  private shadowChanged(event: Common.EventTarget.EventTargetEvent<InlineEditor.CSSShadowModel.CSSShadowModel>): void {
+    this.shadowSwatch.setCSSShadow(event.data);
     this.treeElement.applyStyleText(this.treeElement.renderedPropertyText(), false);
   }
 
@@ -342,7 +343,8 @@ export class FontEditorSectionManager {
   private parentPane: StylesSidebarPane|null;
   private fontEditor: InlineEditor.FontEditor.FontEditor|null;
   private scrollerElement: Element|null;
-  private readonly boundFontChanged: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly boundFontChanged:
+      (event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>) => void;
   private readonly boundOnScroll: () => void;
   private readonly boundResized: () => void;
   constructor(
@@ -364,7 +366,7 @@ export class FontEditorSectionManager {
     this.boundResized = this.fontEditorResized.bind(this);
   }
 
-  private fontChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private fontChanged(event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>): void {
     const {propertyName, value} = event.data;
     const treeElement = this.treeElementMap.get(propertyName);
     this.updateFontProperty(propertyName, value, treeElement);

package/front_end/panels/elements/ElementsPanel.ts

@@ -56,6 +56,7 @@ import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
 import {Events as StylesSidebarPaneEvents, StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesUpdateCompletedEvent} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**
@@ -479,14 +480,15 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.updateTreeOutlineVisibleWidth();
   }
 
-  private selectedNodeChanged(event: Common.EventTarget.EventTargetEvent): void {
-    let selectedNode: null|(SDK.DOMModel.DOMNode | null) = (event.data.node as SDK.DOMModel.DOMNode | null);
+  private selectedNodeChanged(
+      event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>): void {
+    let selectedNode = event.data.node;
 
     // If the selectedNode is a pseudoNode, we want to ensure that it has a valid parentNode
     if (selectedNode && (selectedNode.pseudoType() && !selectedNode.parentNode)) {
       selectedNode = null;
     }
-    const focus = (event.data.focus as boolean);
+    const {focus} = event.data;
     for (const treeOutline of this.treeOutlines) {
       if (!selectedNode || ElementsTreeOutline.forDOMModel(selectedNode.domModel()) !== treeOutline) {
         treeOutline.selectDOMNode(null);
@@ -775,8 +777,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  private updateBreadcrumbIfNeeded(event: Common.EventTarget.EventTargetEvent): void {
-    const nodes = (event.data as SDK.DOMModel.DOMNode[]);
+  private updateBreadcrumbIfNeeded(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>): void {
+    const nodes = event.data;
     /* If we don't have a selected node then we can tell the breadcrumbs that & bail. */
     const selectedNode = this.selectedDOMNode();
     if (!selectedNode) {
@@ -972,12 +974,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     let skippedInitialTabSelectedEvent = false;
 
-    const toggleMetricsWidget = (event: Common.EventTarget.EventTargetEvent): void => {
+    const toggleMetricsWidget = (event: Common.EventTarget.EventTargetEvent<StylesUpdateCompletedEvent>): void => {
       this.metricsWidget.toggleVisibility(event.data.hasMatchedStyles);
     };
 
-    const tabSelected = (event: Common.EventTarget.EventTargetEvent): void => {
-      const tabId = (event.data.tabId as string);
+    const tabSelected = (event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void => {
+      const {tabId} = event.data;
       if (tabId === i18nString(UIStrings.computed)) {
         computedStylePanesWrapper.show(computedView.element);
         showMetricsWidgetInComputedPane();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -74,7 +74,9 @@ const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, Element
 
 const populatedTreeElements = new Set<ElementsTreeElement>();
 
-export class ElementsTreeOutline extends UI.TreeOutline.TreeOutline {
+export class ElementsTreeOutline extends
+    Common.ObjectWrapper.eventMixin<ElementsTreeOutline.EventTypes, typeof UI.TreeOutline.TreeOutline>(
+        UI.TreeOutline.TreeOutline) {
   treeElementByNode: WeakMap<SDK.DOMModel.DOMNode, ElementsTreeElement>;
   private readonly shadowRoot: ShadowRoot;
   readonly elementInternal: HTMLElement;
@@ -1426,6 +1428,11 @@ export namespace ElementsTreeOutline {
     SelectedNodeChanged = 'SelectedNodeChanged',
     ElementsTreeUpdated = 'ElementsTreeUpdated',
   }
+
+  export type EventTypes = {
+    [Events.SelectedNodeChanged]: {node: SDK.DOMModel.DOMNode|null, focus: boolean},
+    [Events.ElementsTreeUpdated]: SDK.DOMModel.DOMNode[],
+  };
 }
 
 // clang-format off

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -192,7 +192,8 @@ let _stylesSidebarPaneInstance: StylesSidebarPane;
 const STYLE_TAG = '<' +
     'style>';
 
-export class StylesSidebarPane extends ElementsSidebarPane {
+export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof ElementsSidebarPane>(
+    ElementsSidebarPane) {
   private currentToolbarPane: UI.Widget.Widget|null;
   private animatedToolbarPane: UI.Widget.Widget|null;
   private pendingWidget: UI.Widget.Widget|null;
@@ -800,7 +801,7 @@ export class StylesSidebarPane extends ElementsSidebarPane {
     // Record the elements tool load time after the sidepane has loaded.
     Host.userMetrics.panelLoaded('elements', 'DevTools.Launch.Elements');
 
-    this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasStyle: true});
+    this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasMatchedStyles: false});
   }
 
   private nodeStylesUpdatedForTest(_node: SDK.DOMModel.DOMNode, _rebuild: boolean): void {
@@ -1060,6 +1061,15 @@ export const enum Events {
   StylesUpdateCompleted = 'StylesUpdateCompleted',
 }
 
+export interface StylesUpdateCompletedEvent {
+  hasMatchedStyles: boolean;
+}
+
+export type EventTypes = {
+  [Events.InitialUpdateCompleted]: void,
+  [Events.StylesUpdateCompleted]: StylesUpdateCompletedEvent,
+};
+
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const _maxLinkLength = 23;

package/front_end/panels/elements/layoutPane.css

@@ -54,6 +54,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  min-width: 40px;
 }
 
 .checkbox-settings .checkbox-label {