chrome-devtools-frontend 1.0.922470 → 1.0.922671

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -37,7 +37,7 @@ const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/InspectorMa
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let inspectorMainImplInstance: InspectorMainImpl;
 
-export class InspectorMainImpl extends Common.ObjectWrapper.ObjectWrapper implements Common.Runnable.Runnable {
+export class InspectorMainImpl implements Common.Runnable.Runnable {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): InspectorMainImpl {

package/front_end/entrypoints/js_app/JsMain.ts

@@ -20,7 +20,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let jsMainImplInstance: JsMainImpl;
 
-export class JsMainImpl extends Common.ObjectWrapper.ObjectWrapper implements Common.Runnable.Runnable {
+export class JsMainImpl implements Common.Runnable.Runnable {
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): JsMainImpl {
     const {forceNew} = opts;
     if (!jsMainImplInstance || forceNew) {

package/front_end/entrypoints/node_main/NodeMain.ts

@@ -27,7 +27,7 @@ const str_ = i18n.i18n.registerUIStrings('entrypoints/node_main/NodeMain.ts', UI
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let nodeMainImplInstance: NodeMainImpl;
 
-export class NodeMainImpl extends Common.ObjectWrapper.ObjectWrapper implements Common.Runnable.Runnable {
+export class NodeMainImpl implements Common.Runnable.Runnable {
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeMainImpl {
     const {forceNew} = opts;
     if (!nodeMainImplInstance || forceNew) {

package/front_end/entrypoints/worker_app/WorkerMain.ts

@@ -20,7 +20,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let workerMainImplInstance: WorkerMainImpl;
 
-export class WorkerMainImpl extends Common.ObjectWrapper.ObjectWrapper implements Common.Runnable.Runnable {
+export class WorkerMainImpl implements Common.Runnable.Runnable {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): WorkerMainImpl {

package/front_end/panels/coverage/CoverageView.ts

@@ -614,10 +614,11 @@ export class LineDecorator implements SourceFrame.SourceFrame.LineDecorator {
     }
   }
 
-  makeGutterClickHandler(url: string): (arg0: Common.EventTarget.EventTargetEvent) => void {
-    function handleGutterClick(event: Common.EventTarget.EventTargetEvent): void {
-      const eventData = event.data as SourceFrame.SourcesTextEditor.GutterClickEventData;
-      if (eventData.gutterType !== LineDecorator.GUTTER_TYPE) {
+  makeGutterClickHandler(url: string):
+      (arg0: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>) => void {
+    function handleGutterClick(
+        event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): void {
+      if (event.data.gutterType !== LineDecorator.GUTTER_TYPE) {
         return;
       }
       const coverageViewId = 'coverage';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -17,7 +17,7 @@ import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {OverviewController} from './CSSOverviewController.js';
+import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
@@ -335,7 +335,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
       return;
     }
 
-    let payload;
+    let payload: PopulateNodesEvent;
     switch (type) {
       case 'contrast': {
         const section = dataset.section;
@@ -451,7 +451,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     }
 
     evt.consume();
-    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.PopulateNodes, payload);
+    this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.PopulateNodes, {payload});
     this.mainContainer.setSidebarMinimized(false);
   }
 
@@ -605,43 +605,43 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.resultsContainer.element.appendChild(this.fragment.element());
   }
 
-  private createElementsView(evt: Common.EventTarget.EventTargetEvent): void {
-    const {type, nodes} = evt.data;
+  private createElementsView(evt: Common.EventTarget.EventTargetEvent<{payload: PopulateNodesEvent}>): void {
+    const {payload} = evt.data;
 
     let id = '';
     let tabTitle = '';
 
-    switch (type) {
+    switch (payload.type) {
       case 'contrast': {
-        const {section, key} = evt.data;
+        const {section, key} = payload;
         id = `${section}-${key}`;
         tabTitle = i18nString(UIStrings.contrastIssues);
         break;
       }
 
       case 'color': {
-        const {section, color} = evt.data;
+        const {section, color} = payload;
         id = `${section}-${color}`;
         tabTitle = `${color.toUpperCase()} (${section})`;
         break;
       }
 
       case 'unused-declarations': {
-        const {declaration} = evt.data;
+        const {declaration} = payload;
         id = `${declaration}`;
         tabTitle = `${declaration}`;
         break;
       }
 
       case 'media-queries': {
-        const {text} = evt.data;
+        const {text} = payload;
         id = `${text}`;
         tabTitle = `${text}`;
         break;
       }
 
       case 'font-info': {
-        const {name} = evt.data;
+        const {name} = payload;
         id = `${name}`;
         tabTitle = `${name}`;
         break;
@@ -651,7 +651,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     let view = this.viewMap.get(id);
     if (!view) {
       view = new ElementDetailsView(this.controller, this.domModel, this.cssModel, this.linkifier);
-      view.populateNodes(nodes);
+      view.populateNodes(payload.nodes);
       this.viewMap.set(id, view);
     }
 
@@ -995,8 +995,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.controller.dispatchEventToListeners(CSSOverViewControllerEvents.RequestNodeHighlight, backendNodeId);
   }
 
-  async populateNodes(data: {nodeId: Protocol.DOM.BackendNodeId, hasChildren: boolean, [x: string]: unknown}[]):
-      Promise<void> {
+  async populateNodes(data: PopulateNodesEventNodes): Promise<void> {
     this.elementGrid.rootNode().removeChildren();
 
     if (!data.length) {
@@ -1005,39 +1004,39 @@ export class ElementDetailsView extends UI.Widget.Widget {
 
     const [firstItem] = data;
     const visibility = new Set<string>();
-    firstItem.nodeId && visibility.add('nodeId');
-    firstItem.declaration && visibility.add('declaration');
-    firstItem.sourceURL && visibility.add('sourceURL');
-    firstItem.contrastRatio && visibility.add('contrastRatio');
+    'nodeId' in firstItem && firstItem.nodeId && visibility.add('nodeId');
+    'declaration' in firstItem && firstItem.declaration && visibility.add('declaration');
+    'sourceURL' in firstItem && firstItem.sourceURL && visibility.add('sourceURL');
+    'contrastRatio' in firstItem && firstItem.contrastRatio && visibility.add('contrastRatio');
 
-    let relatedNodesMap;
-    if (visibility.has('nodeId')) {
+    let relatedNodesMap: Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>|null|undefined;
+    if ('nodeId' in firstItem && visibility.has('nodeId')) {
       // Grab the nodes from the frontend, but only those that have not been
       // retrieved already.
-      const nodeIds = (data.reduce((prev, curr) => {
-        if (CSSOverviewCompletedView.pushedNodes.has(curr.nodeId)) {
+      const nodeIds = (data as {nodeId: number}[]).reduce((prev, curr) => {
+        const nodeId = curr.nodeId as Protocol.DOM.BackendNodeId;
+        if (CSSOverviewCompletedView.pushedNodes.has(nodeId)) {
           return prev;
         }
-        CSSOverviewCompletedView.pushedNodes.add(curr.nodeId);
-        return prev.add(curr.nodeId);
-      }, new Set<Protocol.DOM.BackendNodeId>()));
+        CSSOverviewCompletedView.pushedNodes.add(nodeId);
+        return prev.add(nodeId);
+      }, new Set<Protocol.DOM.BackendNodeId>());
       relatedNodesMap = await this.domModel.pushNodesByBackendIdsToFrontend(nodeIds);
     }
 
     for (const item of data) {
-      if (visibility.has('nodeId')) {
+      let frontendNode;
+      if ('nodeId' in item && visibility.has('nodeId')) {
         if (!relatedNodesMap) {
           continue;
         }
-        const frontendNode = relatedNodesMap.get(item.nodeId);
+        frontendNode = relatedNodesMap.get(item.nodeId as Protocol.DOM.BackendNodeId);
         if (!frontendNode) {
           continue;
         }
-
-        item.node = frontendNode;
       }
 
-      const node = new ElementNode(item, this.linkifier, this.cssModel);
+      const node = new ElementNode(item, frontendNode, this.linkifier, this.cssModel);
       node.selectable = false;
       this.elementGrid.insertChild(node);
     }
@@ -1051,28 +1050,32 @@ export class ElementDetailsView extends UI.Widget.Widget {
 export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode<ElementNode> {
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly cssModel: SDK.CSSModel.CSSModel;
+  private readonly frontendNode: SDK.DOMModel.DOMNode|null|undefined;
 
   constructor(
-      data: {
-        hasChildren: boolean,
-        [x: string]: unknown,
-      },
+      data: PopulateNodesEventNodeTypes, frontendNode: SDK.DOMModel.DOMNode|null|undefined,
       linkifier: Components.Linkifier.Linkifier, cssModel: SDK.CSSModel.CSSModel) {
-    super(data, data.hasChildren);
+    super(data);
 
+    this.frontendNode = frontendNode;
     this.linkifier = linkifier;
     this.cssModel = cssModel;
   }
 
   createCell(columnId: string): HTMLElement {
     // Nodes.
+    const {frontendNode} = this;
     if (columnId === 'nodeId') {
       const cell = this.createTD(columnId);
       cell.textContent = '...';
 
-      Common.Linkifier.Linkifier.linkify(this.data.node).then(link => {
+      if (!frontendNode) {
+        throw new Error('Node entry is missing a related frontend node.');
+      }
+
+      Common.Linkifier.Linkifier.linkify(frontendNode).then(link => {
         cell.textContent = '';
-        (link as HTMLElement).dataset.backendNodeId = this.data.node.backendNodeId();
+        (link as HTMLElement).dataset.backendNodeId = frontendNode.backendNodeId().toString();
         cell.appendChild(link);
         const button = document.createElement('button');
         button.classList.add('show-element');

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -4,8 +4,12 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 
-export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
+import type {ContrastIssue} from './CSSOverviewCompletedView.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+
+export class OverviewController extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   currentUrl: string;
   constructor() {
     super();
@@ -25,11 +29,47 @@ export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
   }
 }
 
-export const Events = {
-  RequestOverviewStart: Symbol('RequestOverviewStart'),
-  RequestNodeHighlight: Symbol('RequestNodeHighlight'),
-  PopulateNodes: Symbol('PopulateNodes'),
-  RequestOverviewCancel: Symbol('RequestOverviewCancel'),
-  OverviewCompleted: Symbol('OverviewCompleted'),
-  Reset: Symbol('Reset'),
+export type PopulateNodesEvent = {
+  type: 'contrast',
+  key: string,
+  section: string|undefined,
+  nodes: ContrastIssue[],
+}|{
+  type: 'color',
+  color: string,
+  section: string | undefined,
+  nodes: {nodeId: number}[],
+}|{
+  type: 'unused-declarations',
+  declaration: string,
+  nodes: UnusedDeclaration[],
+}|{
+  type: 'media-queries',
+  text: string,
+  nodes: Protocol.CSS.CSSMedia[],
+}|{
+  type: 'font-info',
+  name: string,
+  nodes: {nodeId: number}[],
+};
+
+export type PopulateNodesEventNodes = PopulateNodesEvent['nodes'];
+export type PopulateNodesEventNodeTypes = PopulateNodesEventNodes[0];
+
+export const enum Events {
+  RequestOverviewStart = 'RequestOverviewStart',
+  RequestNodeHighlight = 'RequestNodeHighlight',
+  PopulateNodes = 'PopulateNodes',
+  RequestOverviewCancel = 'RequestOverviewCancel',
+  OverviewCompleted = 'OverviewCompleted',
+  Reset = 'Reset',
+}
+
+export type EventTypes = {
+  [Events.RequestOverviewStart]: void,
+  [Events.RequestNodeHighlight]: number,
+  [Events.PopulateNodes]: {payload: PopulateNodesEvent},
+  [Events.RequestOverviewCancel]: void,
+  [Events.OverviewCompleted]: void,
+  [Events.Reset]: void,
 };

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -100,7 +100,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     this.renderInitialView();
   }
 
-  private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent): void {
+  private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
     this.model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -2,7 +2,6 @@
 // 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 type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -12,7 +11,7 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 let lastId = 1;
 
-export class ProtocolService extends Common.ObjectWrapper.ObjectWrapper {
+export class ProtocolService {
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -53,6 +53,10 @@
   text-align: left;
 }
 
+.conditions-edit-row .conditions-list-text:last-child {
+  text-align: right;
+}
+
 .conditions-list-title {
   text-align: start;
   display: flex;

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -171,7 +171,7 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.mainPane.addEventListener(PerfUI.FlameChart.Events.EntryInvoked, this.onEntryInvoked, this);
     this.entrySelected = false;
     this.mainPane.addEventListener(PerfUI.FlameChart.Events.CanvasFocused, this.onEntrySelected, this);
-    this.overviewPane.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged, this.onWindowChanged, this);
+    this.overviewPane.addEventListener(OverviewPaneEvents.WindowChanged, this.onWindowChanged, this);
     this.dataProvider = dataProvider;
     this.searchResults = [];
   }
@@ -180,9 +180,8 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.mainPane.focus();
   }
 
-  onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const windowLeft = event.data.windowTimeLeft;
-    const windowRight = event.data.windowTimeRight;
+  onWindowChanged(event: Common.EventTarget.EventTargetEvent<OverviewPaneWindowChangedEvent>): void {
+    const {windowTimeLeft: windowLeft, windowTimeRight: windowRight} = event.data;
     this.mainPane.setWindowTimes(windowLeft, windowRight, /* animate */ true);
   }
 
@@ -308,7 +307,8 @@ export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
   }
 }
 
-export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate {
+export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEvents, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
   readonly overviewGrid: PerfUI.OverviewGrid.OverviewGrid;
@@ -329,7 +329,8 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
         (this.overviewContainer.createChild('canvas', 'cpu-profile-flame-chart-overview-canvas') as HTMLCanvasElement);
     this.overviewContainer.appendChild(this.overviewGrid.element);
     this.dataProvider = dataProvider;
-    this.overviewGrid.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged, this.onWindowChanged, this);
+    this.overviewGrid.addEventListener(
+        PerfUI.OverviewGrid.Events.WindowChangedWithPosition, this.onWindowChanged, this);
   }
 
   windowChanged(windowStartTime: number, windowEndTime: number): void {
@@ -348,12 +349,13 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
     this.overviewGrid.setWindow((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
   }
 
-  onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.OverviewGrid.WindowChangedWithPositionEvent>):
+      void {
     const windowPosition = {windowTimeLeft: event.data.rawStartValue, windowTimeRight: event.data.rawEndValue};
     this.windowTimeLeft = windowPosition.windowTimeLeft;
     this.windowTimeRight = windowPosition.windowTimeRight;
 
-    this.dispatchEventToListeners(PerfUI.OverviewGrid.Events.WindowChanged, windowPosition);
+    this.dispatchEventToListeners(OverviewPaneEvents.WindowChanged, windowPosition);
   }
 
   timelineData(): PerfUI.FlameChart.TimelineData|null {
@@ -445,3 +447,16 @@ export class OverviewPane extends UI.Widget.VBox implements PerfUI.FlameChart.Fl
     this.overviewCanvas.style.height = height + 'px';
   }
 }
+
+export const enum OverviewPaneEvents {
+  WindowChanged = 'WindowChanged',
+}
+
+export interface OverviewPaneWindowChangedEvent {
+  windowTimeLeft: number;
+  windowTimeRight: number;
+}
+
+export type OVerviewPaneEventTypes = {
+  [OverviewPaneEvents.WindowChanged]: OverviewPaneWindowChangedEvent,
+};

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1812,17 +1812,16 @@ export class DebuggerPlugin extends Plugin {
     this.textEditor.attachInfobar(this.prettyPrintInfobar);
   }
 
-  private async handleGutterClick(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  private async handleGutterClick(
+      event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): Promise<void> {
     if (this.muted) {
       return;
     }
 
-    const eventData = (event.data as SourceFrame.SourcesTextEditor.GutterClickEventData);
-    if (eventData.gutterType !== SourceFrame.SourcesTextEditor.lineNumbersGutterType) {
+    const {gutterType, lineNumber: editorLineNumber, event: eventObject} = event.data;
+    if (gutterType !== SourceFrame.SourcesTextEditor.lineNumbersGutterType) {
       return;
     }
-    const editorLineNumber = eventData.lineNumber;
-    const eventObject = eventData.event;
 
     if (eventObject.button !== 0 || eventObject.altKey || eventObject.ctrlKey || eventObject.metaKey) {
       return;

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -51,12 +51,14 @@ export class EditingLocationHistoryManager {
         SourceFrame.SourcesTextEditor.Events.JumpHappened, this.onJumpHappened.bind(this));
   }
 
-  private onJumpHappened(event: Common.EventTarget.EventTargetEvent): void {
-    if (event.data.from) {
-      this.updateActiveState(event.data.from);
+  private onJumpHappened(event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.JumpHappenedEvent>):
+      void {
+    const {from, to} = event.data;
+    if (from) {
+      this.updateActiveState(from);
     }
-    if (event.data.to) {
-      this.pushActiveState(event.data.to);
+    if (to) {
+      this.pushActiveState(to);
     }
   }
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -236,11 +236,10 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
         SourceFrame.SourcesTextEditor.Events.SelectionChanged, this.selectionChanged, this);
   }
 
-  private scrollChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private scrollChanged({data: lineNumber}: Common.EventTarget.EventTargetEvent<number>): void {
     if (this.scrollTimer) {
       clearTimeout(this.scrollTimer);
     }
-    const lineNumber = (event.data as number);
     this.scrollTimer = window.setTimeout(saveHistory.bind(this), 100);
     if (this.currentFileInternal) {
       this.history.updateScrollLineNumber(this.currentFileInternal.url(), lineNumber);
@@ -251,8 +250,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
-  private selectionChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const range = (event.data as TextUtils.TextRange.TextRange);
+  private selectionChanged({data: range}: Common.EventTarget.EventTargetEvent<TextUtils.TextRange.TextRange>): void {
     if (this.currentFileInternal) {
       this.history.updateSelectionRange(this.currentFileInternal.url(), range);
     }

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');
 

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,6 +33,7 @@ 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';
 
@@ -66,7 +67,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     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();
@@ -209,7 +210,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     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;
     }

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/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.922470"
+  "version": "1.0.922671"
 }