chrome-devtools-frontend 1.0.921565 → 1.0.922782

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;

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1547,20 +1547,20 @@ export class ObjectPropertiesSectionsTreeExpandController {
     }
   }
 
-  private elementAttached(event: Common.EventTarget.EventTargetEvent): void {
-    const element = (event.data as UI.TreeOutline.TreeElement);
+  private elementAttached(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
+    const element = event.data;
     if (element.isExpandable() && this.expandedProperties.has(this.propertyPath(element))) {
       element.expand();
     }
   }
 
-  private elementExpanded(event: Common.EventTarget.EventTargetEvent): void {
-    const element = (event.data as UI.TreeOutline.TreeElement);
+  private elementExpanded(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
+    const element = event.data;
     this.expandedProperties.add(this.propertyPath(element));
   }
 
-  private elementCollapsed(event: Common.EventTarget.EventTargetEvent): void {
-    const element = (event.data as UI.TreeOutline.TreeElement);
+  private elementCollapsed(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
+    const element = event.data;
     this.expandedProperties.delete(this.propertyPath(element));
   }
 

package/front_end/ui/legacy/components/perf_ui/FilmStripView.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 Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
@@ -33,7 +34,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/FilmStripView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class FilmStripView extends UI.Widget.HBox {
+export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(UI.Widget.HBox) {
   private statusLabel: HTMLElement;
   private zeroTime!: number;
   private spanTime!: number;
@@ -195,6 +196,12 @@ export enum Events {
   FrameExit = 'FrameExit',
 }
 
+export type EventTypes = {
+  [Events.FrameSelected]: number,
+  [Events.FrameEnter]: number,
+  [Events.FrameExit]: number,
+};
+
 export const Modes = {
   TimeBased: 'TimeBased',
   FrameBased: 'FrameBased',

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -85,7 +85,8 @@ interface GroupExpansionState {
   [key: string]: boolean;
 }
 
-export class FlameChart extends UI.Widget.VBox implements Calculator, ChartViewportDelegate {
+export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements Calculator, ChartViewportDelegate {
   private readonly groupExpansionSetting?: Common.Settings.Setting<GroupExpansionState>;
   private groupExpansionState: GroupExpansionState;
   private readonly flameChartDelegate: FlameChartDelegate;
@@ -2321,6 +2322,13 @@ export enum Events {
   EntryHighlighted = 'EntryHighlighted',
 }
 
+export type EventTypes = {
+  [Events.CanvasFocused]: number|void,
+  [Events.EntryInvoked]: number,
+  [Events.EntrySelected]: number,
+  [Events.EntryHighlighted]: number,
+};
+
 export const Colors = {
   SelectedGroupBackground: 'hsl(215, 85%, 98%)',
   SelectedGroupBorder: 'hsl(216, 68%, 54%)',

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -417,11 +417,10 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper {
     this.windowLeft = windowLeft;
     this.windowRight = windowRight;
     this.updateCurtains();
-    let windowPosition;
     if (this.calculator) {
-      windowPosition = this.calculateWindowPosition();
+      this.dispatchEventToListeners(Events.WindowChangedWithPosition, this.calculateWindowPosition());
     }
-    this.dispatchEventToListeners(Events.WindowChanged, windowPosition);
+    this.dispatchEventToListeners(Events.WindowChanged);
   }
 
   private updateCurtains(): void {
@@ -523,8 +522,19 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper {
 // eslint-disable-next-line rulesdir/const_enum
 export enum Events {
   WindowChanged = 'WindowChanged',
+  WindowChangedWithPosition = 'WindowChangedWithPosition',
 }
 
+export interface WindowChangedWithPositionEvent {
+  rawStartValue: number;
+  rawEndValue: number;
+}
+
+export type EventTypes = {
+  [Events.WindowChanged]: void,
+  [Events.WindowChangedWithPosition]: WindowChangedWithPositionEvent,
+};
+
 export class WindowSelector {
   private startPosition: number;
   private width: number;

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -33,10 +33,12 @@ import type * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 
+import type {WindowChangedWithPositionEvent} from './OverviewGrid.js';
 import {Events as OverviewGridEvents, OverviewGrid} from './OverviewGrid.js';
 import type {Calculator} from './TimelineGrid.js';
 
-export class TimelineOverviewPane extends UI.Widget.VBox {
+export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   private readonly overviewCalculator: TimelineOverviewCalculator;
   private readonly overviewGrid: OverviewGrid;
   private readonly cursorArea: HTMLElement;
@@ -65,7 +67,7 @@ export class TimelineOverviewPane extends UI.Widget.VBox {
     this.cursorArea.addEventListener('mouseleave', this.hideCursor.bind(this), true);
 
     this.overviewGrid.setResizeEnabled(false);
-    this.overviewGrid.addEventListener(OverviewGridEvents.WindowChanged, this.onWindowChanged, this);
+    this.overviewGrid.addEventListener(OverviewGridEvents.WindowChangedWithPosition, this.onWindowChanged, this);
     this.overviewGrid.setClickHandler(this.onClick.bind(this));
     this.overviewControls = [];
     this.markers = new Map();
@@ -208,7 +210,7 @@ export class TimelineOverviewPane extends UI.Widget.VBox {
     return this.overviewControls.some(control => control.onClick(event));
   }
 
-  private onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onWindowChanged(event: Common.EventTarget.EventTargetEvent<WindowChangedWithPositionEvent>): void {
     if (this.muteOnWindowChanged) {
       return;
     }
@@ -255,6 +257,15 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export interface WindowChangedEvent {
+  startTime: number;
+  endTime: number;
+}
+
+export type EventTypes = {
+  [Events.WindowChanged]: WindowChangedEvent,
+};
+
 export class TimelineOverviewCalculator implements Calculator {
   private minimumBoundaryInternal!: number;
   private maximumBoundaryInternal!: number;

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -271,14 +271,21 @@ export class CommandMenuProvider extends Provider {
 
   renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
     const command = this.commands[itemIndex];
+
     titleElement.removeChildren();
-    const tagElement = (titleElement.createChild('span', 'tag') as HTMLElement);
-    const index = Platform.StringUtilities.hashCode(command.category()) % MaterialPaletteColors.length;
-    tagElement.style.backgroundColor = MaterialPaletteColors[index];
-    tagElement.textContent = command.category();
     UI.UIUtils.createTextChild(titleElement, command.title());
     FilteredListWidget.highlightRanges(titleElement, query, true);
+
     subtitleElement.textContent = command.shortcut();
+
+    const tagElement = (titleElement.parentElement?.parentElement?.createChild('span', 'tag') as HTMLElement);
+    if (!tagElement) {
+      return;
+    }
+    const index = Platform.StringUtilities.hashCode(command.category()) % MaterialPaletteColors.length;
+    tagElement.style.backgroundColor = MaterialPaletteColors[index];
+    tagElement.style.color = 'var(--color-background)';
+    tagElement.textContent = command.category();
   }
 
   selectItem(itemIndex: number|null, _promptValue: string): void {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -5,6 +5,7 @@
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 
+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 TextUtils from '../../../../models/text_utils/text_utils.js';
@@ -28,7 +29,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/FilteredListWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class FilteredListWidget extends UI.Widget.VBox implements UI.ListControl.ListDelegate<number> {
+export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements UI.ListControl.ListDelegate<number> {
   private promptHistory: string[];
   private scoringTimer: number;
   private filterTimer: number;
@@ -160,8 +162,8 @@ export class FilteredListWidget extends UI.Widget.VBox implements UI.ListControl
     this.dialog.contentElement.style.setProperty('border-radius', '4px');
     this.show(this.dialog.contentElement);
     UI.ARIAUtils.setExpanded(this.contentElement, true);
-    this.dialog.once('hidden').then(() => {
-      this.dispatchEventToListeners('hidden');
+    this.dialog.once(UI.Dialog.Events.Hidden).then(() => {
+      this.dispatchEventToListeners(Events.Hidden);
     });
     // @ts-ignore
     this.dialog.show();
@@ -529,6 +531,14 @@ export class FilteredListWidget extends UI.Widget.VBox implements UI.ListControl
   }
 }
 
+export const enum Events {
+  Hidden = 'hidden',
+}
+
+export type EventTypes = {
+  [Events.Hidden]: void,
+};
+
 export class Provider {
   private refreshCallback!: () => void;
   constructor() {

package/front_end/ui/legacy/components/quick_open/QuickInput.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 
-import {FilteredListWidget, Provider} from './FilteredListWidget.js';
+import {Events as FilteredListWidgetEvents, FilteredListWidget, Provider} from './FilteredListWidget.js';
 
 const UIStrings = {
   /**
@@ -27,9 +27,8 @@ export class QuickInput {
     throw new ReferenceError('Instance type not implemented.');
   }
 
-  static show(options: QuickInputOptions): Promise<string|undefined> {
-    let canceledPromise: Promise<undefined> =
-        new Promise<undefined>(_r => {});  // Intentionally creates an unresolved promise
+  static show(options: QuickInputOptions): Promise<string|void> {
+    let canceledPromise = new Promise<void>(_r => {});  // Intentionally creates an unresolved promise
     const fulfilledPromise = new Promise<string>(resolve => {
       const provider = new QuickInputProvider(options, resolve);
       const widget = new FilteredListWidget(provider);
@@ -40,7 +39,7 @@ export class QuickInput {
 
       widget.setPromptTitle(options.placeHolder || options.prompt);
       widget.showAsDialog(options.prompt);
-      canceledPromise = (widget.once('hidden') as Promise<undefined>);
+      canceledPromise = widget.once(FilteredListWidgetEvents.Hidden);
 
       widget.setQuery(options.value || '');
       if (options.valueSelection) {

package/front_end/ui/legacy/components/quick_open/QuickPick.ts

@@ -4,7 +4,7 @@
 
 import * as Diff from '../../../../third_party/diff/diff.js';
 import * as UI from '../../legacy.js';
-import {FilteredListWidget, Provider} from './FilteredListWidget.js';
+import {Events as FilteredListWidgetEvents, FilteredListWidget, Provider} from './FilteredListWidget.js';
 export interface QuickPickItem {
   label: string;
   description?: string;
@@ -21,9 +21,8 @@ export class QuickPick {
     throw new ReferenceError('Instance type not implemented.');
   }
 
-  static show(items: QuickPickItem[], options: QuickPickOptions): Promise<QuickPickItem|undefined> {
-    let canceledPromise: Promise<undefined> =
-        new Promise<undefined>(_r => {});  // Intentionally creates an unresolved promise
+  static show(items: QuickPickItem[], options: QuickPickOptions): Promise<QuickPickItem|void> {
+    let canceledPromise = new Promise<void>(_r => {});  // Intentionally creates an unresolved promise
     const fulfilledPromise = new Promise<QuickPickItem>(resolve => {
       const provider =
           new QuickPickProvider(items, resolve, options.matchOnDescription ? 0.5 : 0, options.matchOnDetail ? 0.25 : 0);
@@ -31,7 +30,7 @@ export class QuickPick {
       widget.setHintElement(options.placeHolder);
       widget.setPromptTitle(options.placeHolder);
       widget.showAsDialog(options.placeHolder);
-      canceledPromise = (widget.once('hidden') as Promise<undefined>);
+      canceledPromise = widget.once(FilteredListWidgetEvents.Hidden);
       widget.setQuery('');
     });