chrome-devtools-frontend 1.0.921086 → 1.0.922671

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 {

package/front_end/ui/legacy/FilterBar.ts

@@ -69,7 +69,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/FilterBar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class FilterBar extends HBox implements Common.EventTarget.EventTarget<FilterBarEventTypes> {
+export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTypes, typeof HBox>(HBox) {
   private enabled: boolean;
   private readonly stateSetting: Common.Settings.Setting<boolean>;
   private readonly filterButtonInternal: ToolbarSettingToggle;
@@ -185,7 +185,7 @@ export type FilterBarEventTypes = {
   [FilterBarEvents.Changed]: void,
 };
 
-export interface FilterUI extends Common.EventTarget.EventTarget {
+export interface FilterUI extends Common.EventTarget.EventTarget<FilterUIEventTypes> {
   isActive(): boolean;
   element(): Element;
 }
@@ -194,7 +194,11 @@ export const enum FilterUIEvents {
   FilterChanged = 'FilterChanged',
 }
 
-export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
+export type FilterUIEventTypes = {
+  [FilterUIEvents.FilterChanged]: void,
+};
+
+export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filterElement: HTMLDivElement;
   private readonly filterInputElement: HTMLElement;
   private prompt: TextPrompt;
@@ -261,7 +265,7 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper implements
   }
 
   private valueChanged(): void {
-    this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
+    this.dispatchEventToListeners(FilterUIEvents.FilterChanged);
     this.updateEmptyStyles();
   }
 
@@ -274,7 +278,7 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper implements
   }
 }
 
-export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
+export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filtersElement: HTMLDivElement;
   private readonly typeFilterElementTypeNames: WeakMap<HTMLElement, string>;
   private allowedTypes: Set<string>;
@@ -350,7 +354,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper impl
       element.classList.toggle('selected', active);
       ARIAUtils.setSelected(element, active);
     }
-    this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
+    this.dispatchEventToListeners(FilterUIEvents.FilterChanged);
   }
 
   private addBit(name: string, label: string, title?: string): void {
@@ -447,7 +451,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper impl
   static readonly ALL_TYPES = 'all';
 }
 
-export class CheckboxFilterUI extends Common.ObjectWrapper.ObjectWrapper implements FilterUI {
+export class CheckboxFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filterElement: HTMLDivElement;
   private readonly activeWhenChecked: boolean;
   private label: CheckboxLabel;
@@ -490,7 +494,7 @@ export class CheckboxFilterUI extends Common.ObjectWrapper.ObjectWrapper impleme
   }
 
   private fireUpdated(): void {
-    this.dispatchEventToListeners(FilterUIEvents.FilterChanged, null);
+    this.dispatchEventToListeners(FilterUIEvents.FilterChanged);
   }
 
   setColor(backgroundColor: string, borderColor: string): void {

package/front_end/ui/legacy/InspectorView.ts

@@ -45,7 +45,7 @@ import {KeyboardShortcut} from './KeyboardShortcut.js';
 import type {Panel} from './Panel.js';
 import {SplitWidget} from './SplitWidget.js';
 import {Events as TabbedPaneEvents} from './TabbedPane.js';
-import type {TabbedPane, TabbedPaneTabDelegate} from './TabbedPane.js';
+import type {EventData, TabbedPane, TabbedPaneTabDelegate} from './TabbedPane.js';
 import {ToolbarButton} from './Toolbar.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
 import {ViewManager} from './ViewManager.js';
@@ -381,8 +381,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.tabbedPane.headerResized();
   }
 
-  private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const tabId = (event.data['tabId'] as string);
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<EventData>): void {
+    const {tabId} = event.data;
     Host.userMetrics.panelShown(tabId);
   }
 

package/front_end/ui/legacy/SplitWidget.ts

@@ -38,7 +38,7 @@ import {ToolbarButton} from './Toolbar.js';
 import {Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
-export class SplitWidget extends Widget {
+export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
   private sidebarElementInternal: HTMLElement;
   private mainElement: HTMLElement;
   private resizerElementInternal: HTMLElement;
@@ -869,6 +869,11 @@ export enum Events {
   ShowModeChanged = 'ShowModeChanged',
 }
 
+export type EventTypes = {
+  [Events.SidebarSizeChanged]: number,
+  [Events.ShowModeChanged]: string,
+};
+
 const MinPadding = 20;
 export interface SettingForOrientation {
   showMode: string;

package/front_end/ui/legacy/TabbedPane.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
@@ -72,7 +73,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TabbedPane extends VBox {
+export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof VBox>(VBox) {
   private readonly headerElementInternal: HTMLElement;
   private readonly headerContentsElement: HTMLElement;
   tabSlider: HTMLDivElement;
@@ -956,6 +957,13 @@ export enum Events {
   TabOrderChanged = 'TabOrderChanged',
 }
 
+export type EventTypes = {
+  [Events.TabInvoked]: EventData,
+  [Events.TabSelected]: EventData,
+  [Events.TabClosed]: EventData,
+  [Events.TabOrderChanged]: EventData,
+};
+
 export class TabbedPaneTab {
   closeable: boolean;
   private readonly tabbedPane: TabbedPane;

package/front_end/ui/legacy/TextEditor.ts

@@ -13,7 +13,7 @@ export interface TextEditorFactory {
   createEditor(options: Options): TextEditor;
 }
 
-export interface TextEditor extends Common.EventTarget.EventTarget {
+export interface TextEditor extends Common.EventTarget.EventTarget<EventTypes> {
   widget(): Widget;
   fullRange(): TextUtils.TextRange.TextRange;
   selection(): TextUtils.TextRange.TextRange;
@@ -46,6 +46,17 @@ export enum Events {
   SuggestionChanged = 'SuggestionChanged',
 }
 
+export interface TextChangedEvent {
+  newRange: TextUtils.TextRange.TextRange;
+  oldRange: TextUtils.TextRange.TextRange;
+}
+
+export type EventTypes = {
+  [Events.CursorChanged]: void,
+  [Events.TextChanged]: TextChangedEvent,
+  [Events.SuggestionChanged]: void,
+};
+
 export interface Options {
   bracketMatchingSetting?: Common.Settings.Setting<boolean>;
   devtoolsAccessibleName?: string;

package/front_end/ui/legacy/Treeoutline.ts

@@ -48,7 +48,25 @@ import {deepElementFromPoint, enclosingNodeOrSelfWithNodeNameInArray, isEditing}
 
 const nodeToParentTreeElementMap = new WeakMap<Node, TreeElement>();
 
-export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper {
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum Events {
+  ElementAttached = 'ElementAttached',
+  ElementsDetached = 'ElementsDetached',
+  ElementExpanded = 'ElementExpanded',
+  ElementCollapsed = 'ElementCollapsed',
+  ElementSelected = 'ElementSelected',
+}
+
+export type EventTypes = {
+  [Events.ElementAttached]: TreeElement,
+  [Events.ElementsDetached]: void,
+  [Events.ElementExpanded]: TreeElement,
+  [Events.ElementCollapsed]: TreeElement,
+  [Events.ElementSelected]: TreeElement,
+};
+
+export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly rootElementInternal: TreeElement;
   renderSelection: boolean;
   selectedTreeElement: TreeElement|null;
@@ -360,16 +378,6 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper {
   }
 }
 
-// TODO(crbug.com/1167717): Make this a const enum again
-// eslint-disable-next-line rulesdir/const_enum
-export enum Events {
-  ElementAttached = 'ElementAttached',
-  ElementsDetached = 'ElementsDetached',
-  ElementExpanded = 'ElementExpanded',
-  ElementCollapsed = 'ElementCollapsed',
-  ElementSelected = 'ElementSelected',
-}
-
 export class TreeOutlineInShadow extends TreeOutline {
   element: HTMLElement;
   shadowRoot: ShadowRoot;

package/front_end/ui/legacy/ViewManager.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu} from './ContextMenu.js';
 import {Icon} from './Icon.js';
+import type {EventData} from './TabbedPane.js';
 import {Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
 import type {ToolbarItem} from './Toolbar.js';
 import {Toolbar, ToolbarMenuButton} from './Toolbar.js';
@@ -771,21 +772,21 @@ export class _TabbedLocation extends Location implements TabbedViewLocation {
     this.views.delete(view.viewId());
   }
 
-  private tabSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const tabId = (event.data.tabId as string);
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<EventData>): void {
+    const {tabId} = event.data;
     if (this.lastSelectedTabSetting && event.data['isUserGesture']) {
       this.lastSelectedTabSetting.set(tabId);
     }
   }
 
-  private tabClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const id = (event.data['tabId'] as string);
+  private tabClosed(event: Common.EventTarget.EventTargetEvent<EventData>): void {
+    const {tabId} = event.data;
     const tabs = this.closeableTabSetting.get();
-    if (tabs[id]) {
-      tabs[id] = false;
+    if (tabs[tabId]) {
+      tabs[tabId] = false;
       this.closeableTabSetting.set(tabs);
     }
-    const view = this.views.get(id);
+    const view = this.views.get(tabId);
     if (view) {
       view.disposeView();
     }

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -125,7 +125,7 @@ const colorElementToMutable = new WeakMap<HTMLElement, boolean>();
 
 const colorElementToColor = new WeakMap<HTMLElement, string>();
 
-export class Spectrum extends UI.Widget.VBox {
+export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private colorElement: HTMLElement;
   private colorDragElement: HTMLElement;
   private dragX: number;
@@ -1212,6 +1212,11 @@ export enum Events {
   SizeChanged = 'SizeChanged',
 }
 
+export type EventTypes = {
+  [Events.ColorChanged]: string,
+  [Events.SizeChanged]: void,
+};
+
 const COLOR_CHIP_SIZE = 24;
 const ITEMS_PER_PALETTE_ROW = 8;
 const GeneratedPaletteTitle = 'Page colors';

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -2,12 +2,13 @@
 // 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 Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
 import {BezierUI} from './BezierUI.js';
 
-export class BezierEditor extends UI.Widget.VBox {
+export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private bezierInternal: UI.Geometry.CubicBezier;
   private previewElement: HTMLElement;
   private readonly previewOnion: HTMLElement;
@@ -245,6 +246,10 @@ export enum Events {
   BezierChanged = 'BezierChanged',
 }
 
+export type EventTypes = {
+  [Events.BezierChanged]: string,
+};
+
 export const Presets = [
   [
     {name: 'ease-in-out', value: 'ease-in-out'},

package/front_end/ui/legacy/components/inline_editor/CSSShadowEditor.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 Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
@@ -40,7 +41,8 @@ const defaultUnit: string = 'px';
 const sliderThumbRadius: number = 6;
 const canvasSize: number = 88;
 
-export class CSSShadowEditor extends UI.Widget.VBox {
+export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   private readonly typeField: HTMLElement;
   private readonly outsetButton: HTMLElement;
   private readonly insetButton: HTMLElement;
@@ -429,3 +431,7 @@ export class CSSShadowEditor extends UI.Widget.VBox {
 export enum Events {
   ShadowChanged = 'ShadowChanged',
 }
+
+export type EventTypes = {
+  [Events.ShadowChanged]: CSSShadowModel,
+};

package/front_end/ui/legacy/components/inline_editor/FontEditor.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 SDK from '../../../../core/sdk/sdk.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
@@ -113,7 +114,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/FontEditor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class FontEditor extends UI.Widget.VBox {
+export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly selectedNode: SDK.DOMModel.DOMNode|null;
   private readonly propertyMap: Map<string, string>;
   private readonly fontSelectorSection: HTMLElement;
@@ -428,6 +429,16 @@ export enum Events {
   FontEditorResized = 'FontEditorResized',
 }
 
+export interface FontChangedEvent {
+  propertyName: string;
+  value: string;
+}
+
+export type EventTypes = {
+  [Events.FontChanged]: FontChangedEvent,
+  [Events.FontEditorResized]: void,
+};
+
 class FontPropertyInputs {
   private showSliderMode: boolean;
   private errorText: HTMLElement;