chrome-devtools-frontend 1.0.921086 → 1.0.922671

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

@@ -1294,7 +1294,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
       {value: toIndex},
       {value: ArrayGroupingTreeElement.bucketThreshold},
       {value: ArrayGroupingTreeElement.sparseIterationThreshold},
-      {value: ArrayGroupingTreeElement.getOwnPropertyNamesThreshold},
     ]);
 
     await callback(jsonValue);
@@ -1303,22 +1302,19 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
      * Note: must declare params as optional.
      */
     function packRanges(
-        this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number, sparseIterationThreshold?: number,
-        getOwnPropertyNamesThreshold?: number): {
+        this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number,
+        sparseIterationThreshold?: number): {
       ranges: number[][],
-      skipGetOwnPropertyNames: boolean,
     }|undefined {
       if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined ||
-          getOwnPropertyNamesThreshold === undefined || bucketThreshold === undefined) {
+          bucketThreshold === undefined) {
         return;
       }
       let ownPropertyNames: string[]|null = null;
       const consecutiveRange = (toIndex - fromIndex >= sparseIterationThreshold) && ArrayBuffer.isView(this);
-      const skipGetOwnPropertyNames = consecutiveRange && (toIndex - fromIndex >= getOwnPropertyNamesThreshold);
 
       function* arrayIndexes(object: Object): Generator<number, void, unknown> {
-        if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined ||
-            getOwnPropertyNamesThreshold === undefined) {
+        if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined) {
           return;
         }
 
@@ -1388,13 +1384,10 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
         }
       }
 
-      return {ranges: ranges, skipGetOwnPropertyNames: skipGetOwnPropertyNames};
+      return {ranges: ranges};
     }
 
-    async function callback(result: {
-      ranges: Array<Array<number>>,
-      skipGetOwnPropertyNames: boolean,
-    }|undefined): Promise<void> {
+    async function callback(result: {ranges: Array<Array<number>>}|undefined): Promise<void> {
       if (!result) {
         return;
       }
@@ -1420,8 +1413,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
       if (topLevel) {
         // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
         // @ts-ignore
-        await ArrayGroupingTreeElement.populateNonIndexProperties(
-            treeNode, object, result.skipGetOwnPropertyNames, linkifier);
+        await ArrayGroupingTreeElement.populateNonIndexProperties(treeNode, object, linkifier);
       }
     }
   }
@@ -1489,57 +1481,14 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 
   private static async populateNonIndexProperties(
       this: ArrayGroupingTreeElement, treeNode: UI.TreeOutline.TreeElement, object: SDK.RemoteObject.RemoteObject,
-      skipGetOwnPropertyNames: boolean, linkifier?: Components.Linkifier.Linkifier): Promise<void> {
-    // The definition of callFunction expects an unknown, and setting to `any` causes Closure to fail.
-    // However, leaving this as unknown also causes TypeScript to fail, so for now we leave this as unchecked.
-    // @ts-ignore  TODO(crbug.com/1011811): Fix after Closure is removed.
-    const result = await object.callFunction(buildObjectFragment, [{value: skipGetOwnPropertyNames}]);
-    if (!result.object || result.wasThrown) {
-      return;
-    }
-    const allProperties = await result.object.getOwnProperties(true /* generatePreview */);
-    result.object.release();
-    if (!allProperties.properties) {
+      linkifier?: Components.Linkifier.Linkifier): Promise<void> {
+    const {properties, internalProperties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(
+        object, true /* generatePreview */, true /* nonIndexedPropertiesOnly */);
+    if (!properties) {
       return;
     }
-    const properties = allProperties.properties;
-    properties.sort(ObjectPropertiesSection.compareProperties);
-    for (const property of properties) {
-      parentMap.set(property, this.object);
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (!ObjectPropertiesSection.isDisplayableProperty(property, (treeNode as any).property)) {
-        continue;
-      }
-      const childTreeElement = new ObjectPropertyTreeElement(property, linkifier);
-      childTreeElement.readOnly = true;
-      treeNode.appendChild(childTreeElement);
-    }
-
-    function buildObjectFragment(this: Object, skipGetOwnPropertyNames?: boolean): {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/naming-convention
-      __proto__: any,
-    } {
-      // @ts-ignore __proto__ exists on Object.
-      const result = {__proto__: this.__proto__};
-      if (skipGetOwnPropertyNames) {
-        return result;
-      }
-      const names = Object.getOwnPropertyNames(this);
-      for (let i = 0; i < names.length; ++i) {
-        const name = names[i];
-        // Array index check according to the ES5-15.4.
-        if (String(Number(name) >>> 0) === name && Number(name) >>> 0 !== 0xffffffff) {
-          continue;
-        }
-        const descriptor = Object.getOwnPropertyDescriptor(this, name);
-        if (descriptor) {
-          Object.defineProperty(result, name, descriptor);
-        }
-      }
-      return result;
-    }
+    ObjectPropertyTreeElement.populateWithProperties(
+        treeNode, properties, internalProperties, false, false, object, linkifier);
   }
 
   async onpopulate(): Promise<void> {
@@ -1559,7 +1508,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 
   private static bucketThreshold = 100;
   private static sparseIterationThreshold = 250000;
-  private static getOwnPropertyNamesThreshold = 500000;
 }
 
 export class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {
@@ -1599,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('');
     });
 

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -75,10 +75,12 @@
 }
 
 .filtered-list-widget-item-wrapper {
-  display: inline-flex;
-  width: 502px;
+  color: var(--color-text-primary);
+  display: flex;
   border-bottom: 1px solid var(--color-details-hairline-light);
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   padding-left: 8px;
+  padding-right: 8px;
 }
 
 .filtered-list-widget-item-wrapper devtools-icon {
@@ -95,16 +97,18 @@
   text-overflow: ellipsis;
   overflow: hidden;
   align-self: center;
-  color: var(--color-text-primary);
   max-width: 446px;
   font-size: 12px;
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
-.filtered-list-widget-item span.highlight {
+.filtered-list-widget-item.two-rows span.highlight {
   color: var(--color-primary);
 }
 
+.filtered-list-widget-item.one-row span.highlight {
+  font-weight: bold;
+}
+
 .filtered-list-widget-item .filtered-list-widget-title {
   flex: auto;
   overflow: hidden;
@@ -126,13 +130,22 @@
   text-overflow: ellipsis;
 }
 
+.filtered-list-widget-item-wrapper .tag {
+  padding: 0 12px;
+  border-radius: 4px;
+  line-height: 24px;
+  height: 24px;
+  align-self: center;
+}
+
 .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item span.highlight {
   color: var(--color-background);
   background-color: var(--override-filtered-list-widget-highlight-text-background-color);
 }
 
 .filtered-list-widget-item-wrapper.selected .filtered-list-widget-title,
-.filtered-list-widget-item-wrapper.selected .filtered-list-widget-subtitle {
+.filtered-list-widget-item-wrapper.selected .filtered-list-widget-subtitle,
+.filtered-list-widget-item-wrapper.selected .tag {
   color: var(--color-background);
 }
 
@@ -174,6 +187,15 @@
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
+  flex: auto;
+}
+
+.filtered-list-widget-item.one-row .filtered-list-widget-title {
+  flex: none;
+}
+
+.filtered-list-widget-item.one-row .filtered-list-widget-subtitle::before {
+  content: ' ';
 }
 
 .filtered-list-widget-item.two-rows {
@@ -186,22 +208,10 @@
   font-weight: bold;
 }
 
-.tag {
-  color: var(--color-background);
-  padding: 1px 3px;
-  margin-right: 5px;
-  border-radius: 2px;
-  line-height: 18px;
-}
-
-.filtered-list-widget-item .tag .highlight {
-  color: var(--color-background);
-}
-
 .not-found-text {
   height: 34px;
   line-height: 34px;
-  padding-left: 4px;
+  padding-left: 8px;
   font-style: italic;
   color: var(--color-text-disabled);
   background: var(--color-background-elevation-0);

package/front_end/ui/legacy/components/source_frame/SourcesTextEditor.ts

@@ -9,7 +9,9 @@ import * as TextEditor from '../text_editor/text_editor.js';
 
 const whitespaceStyleInjectedSet = new WeakSet<Document>();
 
-export class SourcesTextEditor extends TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor {
+export class SourcesTextEditor extends
+    Common.ObjectWrapper.eventMixin<EventTypes, typeof TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor>(
+        TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor) {
   private readonly delegate: SourcesTextEditorDelegate;
   private readonly gutterMouseMove: (event: Event) => void;
   private readonly gutterMouseOut: () => void;
@@ -486,7 +488,7 @@ export class SourcesTextEditor extends TextEditor.CodeMirrorTextEditor.CodeMirro
     if (from && to && from.equal(to)) {
       return;
     }
-    this.dispatchEventToListeners(Events.JumpHappened, {from: from, to: to});
+    this.dispatchEventToListeners(Events.JumpHappened, {from, to});
   }
 
   private scroll(): void {
@@ -696,6 +698,20 @@ export enum Events {
   JumpHappened = 'JumpHappened',
 }
 
+export interface JumpHappenedEvent {
+  from: TextUtils.TextRange.TextRange|null;
+  to: TextUtils.TextRange.TextRange|null;
+}
+
+export type EventTypes = {
+  [Events.GutterClick]: GutterClickEventData,
+  [Events.SelectionChanged]: TextUtils.TextRange.TextRange,
+  [Events.ScrollChanged]: number,
+  [Events.EditorFocused]: void,
+  [Events.EditorBlurred]: void,
+  [Events.JumpHappened]: JumpHappenedEvent,
+};
+
 export class SourcesTextEditorDelegate {
   populateLineGutterContextMenu(_contextMenu: UI.ContextMenu.ContextMenu, _lineNumber: number): Promise<void> {
     throw new Error('Not implemented');

package/front_end/ui/legacy/components/text_editor/CodeMirrorTextEditor.ts

@@ -64,7 +64,9 @@ export interface Coordinates {
 // https://crbug.com/1151919 * = CodeMirror.Editor
 const editorToDevtoolsWrapper = new WeakMap<any, CodeMirrorTextEditor>();
 
-export class CodeMirrorTextEditor extends UI.Widget.VBox implements UI.TextEditor.TextEditor {
+export class CodeMirrorTextEditor extends
+    Common.ObjectWrapper.eventMixin<UI.TextEditor.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements UI.TextEditor.TextEditor {
   private options: UI.TextEditor.Options;
   // https://crbug.com/1151919 * = CodeMirror.Editor
   private codeMirrorInternal: any;

package/front_end/ui/legacy/splitWidget.css

@@ -52,7 +52,7 @@
   top: 0;
   bottom: 0;
   width: 6px;
-  z-index: 500;
+  z-index: 4000;
 }
 
 .shadow-split-widget.vbox > .shadow-split-widget-resizer {
@@ -60,7 +60,7 @@
   left: 0;
   right: 0;
   height: 6px;
-  z-index: 500;
+  z-index: 4000;
 }
 
 .shadow-split-widget.vbox > .shadow-split-widget-sidebar.no-default-splitter {

package/inspector_overlay/common.ts

@@ -38,7 +38,7 @@ interface ViewportSize {
 
 export interface ResetData {
   viewportSize: ViewportSize;
-  visualViewportSize?: ViewportSize;
+  viewportSizeForMediaQueries?: ViewportSize;
   deviceScaleFactor: number;
   pageScaleFactor: number;
   pageZoomFactor: number;
@@ -52,7 +52,7 @@ export interface ResetData {
 // Old logic is kept temporarily while the tools are being migrated.
 export class Overlay {
   protected viewportSize = {width: 800, height: 600};
-  protected visualViewportSize?: ViewportSize;
+  protected viewportSizeForMediaQueries?: ViewportSize;
   protected deviceScaleFactor = 1;
   protected emulationScaleFactor = 1;
   protected pageScaleFactor = 1;
@@ -104,7 +104,7 @@ export class Overlay {
   reset(resetData?: ResetData) {
     if (resetData) {
       this.viewportSize = resetData.viewportSize;
-      this.visualViewportSize = resetData.visualViewportSize;
+      this.viewportSizeForMediaQueries = resetData.viewportSizeForMediaQueries;
       this.deviceScaleFactor = resetData.deviceScaleFactor;
       this.pageScaleFactor = resetData.pageScaleFactor;
       this.pageZoomFactor = resetData.pageZoomFactor;

package/inspector_overlay/tool_viewport_size.ts

@@ -29,7 +29,7 @@ export class ViewportSizeOverlay extends Overlay {
   }
 
   drawViewSize() {
-    const viewportSize = this.visualViewportSize || this.viewportSize;
+    const viewportSize = this.viewportSizeForMediaQueries || this.viewportSize;
     const text = `${formatNumber(viewportSize.width)}px \xD7 ${formatNumber(viewportSize.height)}px`;
     const canvasWidth = this.canvasWidth || 0;
     this.context.save();

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.921086"
+  "version": "1.0.922671"
 }

package/scripts/build/generate_css_js_files.js

@@ -21,6 +21,7 @@ for (const fileName of filenames) {
       `// Copyright ${new Date().getFullYear()} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+// IMPORTANT: this file is auto generated. Please do not edit this file.
 const styles = new CSSStyleSheet();
 styles.replaceSync(
 \`${isDebug ? output : cleanCSS.minify(output).styles}