chrome-devtools-frontend 1.0.921565 → 1.0.922044

package/front_end/panels/emulation/AdvancedApp.ts

@@ -7,21 +7,11 @@ import * as Host from '../../core/host/host.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {DeviceModeWrapper} from './DeviceModeWrapper.js';
+import type {Bounds} from './InspectedPagePlaceholder.js';
 import {Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let appInstance: AdvancedApp;
 
-interface Event {
-  data: {
-    to: UI.DockController.DockState,
-    from: UI.DockController.DockState|undefined,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-  };
-}
-
 export class AdvancedApp implements Common.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
   private deviceModeView!: DeviceModeWrapper;
@@ -170,7 +160,7 @@ export class AdvancedApp implements Common.App.App {
     return UI.DockController.DockController.instance().dockSide() !== UI.DockController.DockState.UNDOCKED;
   }
 
-  private onSetInspectedPageBounds(event: Event): void {
+  private onSetInspectedPageBounds(event: Common.EventTarget.EventTargetEvent<Bounds>): void {
     if (this.changingDockSide) {
       return;
     }

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -2,11 +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 UI from '../../ui/legacy/legacy.js';
 
 let inspectedPagePlaceholderInstance: InspectedPagePlaceholder;
 
-export class InspectedPagePlaceholder extends UI.Widget.Widget {
+export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) {
   private updateId?: number;
   constructor() {
     super(true);
@@ -81,3 +83,14 @@ export class InspectedPagePlaceholder extends UI.Widget.Widget {
 export const enum Events {
   Update = 'Update',
 }
+
+export interface Bounds {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+
+export type EventTypes = {
+  [Events.Update]: Bounds,
+};

package/front_end/panels/layer_viewer/LayerDetailsView.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 SDK from '../../core/sdk/sdk.js';
@@ -155,7 +156,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
+export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
@@ -470,6 +472,10 @@ export enum Events {
   PaintProfilerRequested = 'PaintProfilerRequested',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+};
+
 export const slowScrollRectNames = new Map([
   [SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable, i18nLazyString(UIStrings.nonFastScrollable)],
   [SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler, i18nLazyString(UIStrings.touchEventHandler)],

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -99,7 +99,8 @@ const uniformSamplerLocations = new Map<WebGLProgram, WebGLUniformLocation|null>
 
 const imageForTexture = new Map<WebGLTexture, HTMLImageElement>();
 
-export class Layers3DView extends UI.Widget.VBox implements LayerView {
+export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements LayerView {
   private readonly failBanner: UI.Widget.VBox;
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;
@@ -892,6 +893,11 @@ export enum Events {
   ScaleChanged = 'ScaleChanged',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+  [Events.ScaleChanged]: void,
+};
+
 export const enum ChromeTexture {
   Left = 0,
   Middle = 1,

package/front_end/panels/layer_viewer/PaintProfilerView.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 PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -75,7 +76,8 @@ let categories: {[x: string]: PaintProfilerCategory}|null = null;
 
 let logItemCategoriesMap: {[x: string]: PaintProfilerCategory}|null = null;
 
-export class PaintProfilerView extends UI.Widget.HBox {
+export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(
+    UI.Widget.HBox) {
   private canvasContainer: HTMLElement;
   private readonly progressBanner: HTMLElement;
   private pieChart: PerfUI.PieChart.PieChart;
@@ -422,6 +424,10 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export type EventTypes = {
+  [Events.WindowChanged]: void,
+};
+
 export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget {
   private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private log: SDK.PaintProfiler.PaintProfilerLogItem[];

package/front_end/panels/network/NetworkPanel.ts

@@ -369,7 +369,8 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.throttlingSelect;
   }
 
-  private onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>):
+      void {
     const startTime = Math.max(this.calculator.minimumBoundary(), event.data.startTime / 1000);
     const endTime = Math.min(this.calculator.maximumBoundary(), event.data.endTime / 1000);
     this.networkLogView.setWindow(startTime, endTime);
@@ -766,18 +767,18 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     appendRevealItem.call(this, request);
   }
 
-  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.overviewPane.setWindowTimes(0, timestamp);
   }
 
-  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.networkOverview.selectFilmStripFrame(timestamp);
     this.networkLogView.selectFilmStripFrame(timestamp / 1000);
   }
 
-  private onFilmFrameExit(_event: Common.EventTarget.EventTargetEvent): void {
+  private onFilmFrameExit(): void {
     this.networkOverview.clearFilmStripFrame();
     this.networkLogView.clearFilmStripFrame();
   }

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -190,9 +190,9 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.overviewPane.selectRange(timeLeft, timeRight);
   }
 
-  onEntrySelected(event: Common.EventTarget.EventTargetEvent): void {
+  onEntrySelected(event: Common.EventTarget.EventTargetEvent<void|number>): void {
     if (event.data) {
-      const eventIndex = Number(event.data);
+      const eventIndex = event.data;
       this.mainPane.setSelectedEntry(eventIndex);
       if (eventIndex === -1) {
         this.entrySelected = false;
@@ -205,7 +205,7 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     }
   }
 
-  onEntryInvoked(event: Common.EventTarget.EventTargetEvent): void {
+  onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): void {
     this.onEntrySelected(event);
     this.dispatchEventToListeners(PerfUI.FlameChart.Events.EntryInvoked, event.data);
   }

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -66,7 +66,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/ProfileLauncherView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ProfileLauncherView extends UI.Widget.VBox {
+export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   readonly panel: ProfilesPanel;
   private contentElementInternal: HTMLElement;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
@@ -232,3 +233,7 @@ export class ProfileLauncherView extends UI.Widget.VBox {
 export enum Events {
   ProfileTypeSelected = 'ProfileTypeSelected',
 }
+
+export type EventTypes = {
+  [Events.ProfileTypeSelected]: ProfileType,
+};

package/front_end/panels/profiler/ProfileView.ts

@@ -413,7 +413,7 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     });
   }
 
-  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): Promise<void> {
     if (!this.dataProvider) {
       return;
     }

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -282,8 +282,8 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     this.launcherView.profileFinished();
   }
 
-  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent): void {
-    this.selectedProfileType = (event.data as ProfileType);
+  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent<ProfileType>): void {
+    this.selectedProfileType = event.data;
     this.updateProfileTypeSpecificUI();
   }
 

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -45,13 +45,13 @@ export class InplaceFormatterEditorAction implements EditorAction {
     return inplaceFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
   }
 
-  private editorClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const wasSelected = (event.data.wasSelected as boolean);
+  private editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
+    const {wasSelected} = event.data;
     if (wasSelected) {
       this.updateButton(null);
     }

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -48,8 +48,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     return scriptFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
 
     if (this.isFormattableScript(uiSourceCode) && this.pathsToFormatOnLoad.has(uiSourceCode.url()) &&
@@ -58,9 +58,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     }
   }
 
-  private async editorClosed(event: Common.EventTarget.EventTargetEvent): Promise<void> {
-    const uiSourceCode = (event.data.uiSourceCode as Workspace.UISourceCode.UISourceCode);
-    const wasSelected = (event.data.wasSelected as boolean);
+  private async editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): Promise<void> {
+    const {uiSourceCode, wasSelected} = event.data;
 
     if (wasSelected) {
       this.updateButton(null);

package/front_end/panels/sources/SourcesPanel.ts

@@ -643,8 +643,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     if (this.editorView.mainWidget() &&
         Common.Settings.Settings.instance().moduleSetting('autoRevealInNavigator').get()) {
       this.revealInNavigator(uiSourceCode, true);

package/front_end/panels/sources/SourcesView.ts

@@ -40,8 +40,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable,
-                                                           UI.SearchableView.Replaceable {
+export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
   private placeholderOptionArray: {
     element: HTMLElement,
     handler: Function,
@@ -446,7 +446,10 @@ export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainer
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 
-    this.dispatchEventToListeners(Events.EditorSelected, this.editorContainer.currentFile());
+    const currentFile = this.editorContainer.currentFile();
+    if (currentFile) {
+      this.dispatchEventToListeners(Events.EditorSelected, currentFile);
+    }
   }
 
   private removeToolbarChangedListener(): void {
@@ -581,6 +584,16 @@ export  // TODO(crbug.com/1167717): Make this a const enum again
       EditorSelected = 'EditorSelected',
     }
 
+export interface EditorClosedEvent {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  wasSelected: boolean;
+}
+
+export type EventTypes = {
+  [Events.EditorClosed]: EditorClosedEvent,
+  [Events.EditorSelected]: Workspace.UISourceCode.UISourceCode,
+};
+
 /**
  * @interface
  */

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -51,7 +51,9 @@ import {ScriptOriginPlugin} from './ScriptOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
-export class UISourceCodeFrame extends SourceFrame.SourceFrame.SourceFrameImpl {
+export class UISourceCodeFrame extends
+    Common.ObjectWrapper.eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
+        SourceFrame.SourceFrame.SourceFrameImpl) {
   private uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
   private readonly diff: SourceFrame.SourceCodeDiff.SourceCodeDiff|undefined;
   private muteSourceCodeEvents: boolean;
@@ -919,3 +921,7 @@ function messageLevelComparator(a: Workspace.UISourceCode.Message, b: Workspace.
 export enum Events {
   ToolbarItemsChanged = 'ToolbarItemsChanged',
 }
+
+export type EventTypes = {
+  [Events.ToolbarItemsChanged]: void,
+};

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,17 +7,12 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  right: 6px;
+  right: 16px;
   cursor: pointer;
   opacity: 0%;
-  min-width: 20px;
 }
 
 .watch-expression-header:hover .watch-expression-delete-button {
-  opacity: 50%;
-}
-
-.watch-expression-header:hover .watch-expression-delete-button:hover {
   opacity: 100%;
 }
 
@@ -101,7 +96,7 @@ li.watch-expression-tree-item {
 }
 
 li.watch-expression-tree-item:hover {
-  background-color: var(--color-background-elevation-2);
+  background-color: var(--color-background-elevation-1);
 }
 
 .watch-expression-header:focus-visible {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -150,8 +150,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   private readonly countersView: CountersGraph;
   private readonly detailsSplitWidget: UI.SplitWidget.SplitWidget;
   private readonly detailsView: TimelineDetailsView;
-  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
-  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent) => void;
+  private readonly onMainEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
+  private readonly onNetworkEntrySelected: (event?: Common.EventTarget.EventTargetEvent<number>) => void;
   private nextExtensionIndex: number;
   private readonly boundRefresh: () => void;
   private selectedTrack: TimelineModel.TimelineModel.Track|null;
@@ -361,9 +361,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.scheduleUpdate();
   }
 
-  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent): void {
+  private onEntryHighlighted(commonEvent: Common.EventTarget.EventTargetEvent<number>): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
-    const entryIndex = (commonEvent.data as number);
+    const entryIndex = commonEvent.data;
     const event = this.mainDataProvider.eventByIndex(entryIndex);
     if (!event) {
       return;

package/front_end/panels/timeline/TimelineLayersView.ts

@@ -63,13 +63,13 @@ export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
     }
   }
 
-  private onPaintProfilerRequested(event: Common.EventTarget.EventTargetEvent): void {
-    const selection = (event.data as LayerViewer.LayerViewHost.Selection);
-    this.layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
-      if (snapshotWithRect) {
-        this.showPaintProfilerCallback(snapshotWithRect.snapshot);
-      }
-    });
+  private async onPaintProfilerRequested(
+      event: Common.EventTarget.EventTargetEvent<LayerViewer.LayerViewHost.Selection>): Promise<void> {
+    const selection = event.data;
+    const snapshotWithRect = await this.layers3DView.snapshotForSelection(selection);
+    if (snapshotWithRect) {
+      this.showPaintProfilerCallback(snapshotWithRect.snapshot);
+    }
   }
 
   private update(): void {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -448,7 +448,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.loader = TimelineLoader.loadFromEvents(events, this);
   }
 
-  private onOverviewWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onOverviewWindowChanged(
+      event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>): void {
     if (!this.performanceModel) {
       return;
     }