chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -40,11 +40,10 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @attribute striped
  * @attribute displayName
  */
-class DataGridElement extends HTMLElement {
+class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes = ['striped', 'name', 'inline'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
-  #mutationObserver = new MutationObserver(this.#onChange.bind(this));
   #resizeObserver = new ResizeObserver(() => {
     if (!this.inline) {
       this.#dataGrid.onResize();
@@ -94,10 +93,9 @@ class DataGridElement extends HTMLElement {
       }
     });
 
-    this.#mutationObserver.observe(this, {childList: true, attributes: true, subtree: true, characterData: true});
     this.#resizeObserver.observe(this);
     this.#updateColumns();
-    this.#addNodes(this.querySelectorAll('tr'));
+    this.addNodes(this.querySelectorAll('tr'));
   }
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
@@ -248,7 +246,7 @@ class DataGridElement extends HTMLElement {
     return null;
   }
 
-  #addNodes(nodes: NodeList): void {
+  override addNodes(nodes: NodeList): void {
     for (const element of this.#getDataRows(nodes)) {
       const parentNode = this.#dataGrid.rootNode();  // TODO(dsv): support nested nodes
       const nextNode = this.#findNextExistingNode(element);
@@ -270,7 +268,7 @@ class DataGridElement extends HTMLElement {
     }
   }
 
-  #removeNodes(nodes: NodeList): void {
+  override removeNodes(nodes: NodeList): void {
     for (const element of this.#getDataRows(nodes)) {
       const node = DataGridElementNode.get(element);
       if (node) {
@@ -279,7 +277,7 @@ class DataGridElement extends HTMLElement {
     }
   }
 
-  #updateNode(node: Node, attributeName: string|null): void {
+  override updateNode(node: Node, attributeName: string|null): void {
     while (node?.parentNode && !(node instanceof HTMLElement)) {
       node = node.parentNode;
     }
@@ -322,17 +320,11 @@ class DataGridElement extends HTMLElement {
     }
   }
 
-  #onChange(mutationList: MutationRecord[]): void {
+  override onChange(mutationList: MutationRecord[]): void {
     if (this.#needUpdateColumns(mutationList)) {
       this.#updateColumns();
     }
     this.#updateCreationNode();
-
-    for (const mutation of mutationList) {
-      this.#removeNodes(mutation.removedNodes);
-      this.#addNodes(mutation.addedNodes);
-      this.#updateNode(mutation.target, mutation.attributeName);
-    }
   }
 
   #editCallback(

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as UI from '../../legacy.js';
+import * as Geometry from '../../../../models/geometry/geometry.js';
 
 import {CSSLinearEasingModel} from './CSSLinearEasingModel.js';
 
@@ -21,8 +21,8 @@ export abstract class AnimationTimingModel {
       return cssLinearEasingModel;
     }
 
-    return UI.Geometry.CubicBezier.parse(text) || null;
+    return Geometry.CubicBezier.parse(text) || null;
   }
 }
 
-export const LINEAR_BEZIER = UI.Geometry.LINEAR_BEZIER;
+export const LINEAR_BEZIER = Geometry.LINEAR_BEZIER;

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

@@ -4,6 +4,7 @@
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Platform from '../../../../core/platform/platform.js';
+import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -15,18 +16,18 @@ const DOUBLE_CLICK_DELAY = 500;
 
 interface Params {
   container: Element;
-  bezier: UI.Geometry.CubicBezier;
-  onBezierChange: (bezier: UI.Geometry.CubicBezier) => void;
+  bezier: Geometry.CubicBezier;
+  onBezierChange: (bezier: Geometry.CubicBezier) => void;
 }
 
 class BezierCurveUI {
   #curveUI: BezierUI;
-  #bezier: UI.Geometry.CubicBezier;
+  #bezier: Geometry.CubicBezier;
   #curve: Element;
-  #mouseDownPosition?: UI.Geometry.Point;
-  #controlPosition?: UI.Geometry.Point;
+  #mouseDownPosition?: Geometry.Point;
+  #controlPosition?: Geometry.Point;
   #selectedPoint?: number;
-  #onBezierChange: (bezier: UI.Geometry.CubicBezier) => void;
+  #onBezierChange: (bezier: Geometry.CubicBezier) => void;
 
   constructor({bezier, container, onBezierChange}: Params) {
     this.#bezier = bezier;
@@ -46,9 +47,9 @@ class BezierCurveUI {
   }
 
   private dragStart(event: MouseEvent): boolean {
-    this.#mouseDownPosition = new UI.Geometry.Point(event.x, event.y);
+    this.#mouseDownPosition = new Geometry.Point(event.x, event.y);
     const ui = this.#curveUI;
-    this.#controlPosition = new UI.Geometry.Point(
+    this.#controlPosition = new Geometry.Point(
         Platform.NumberUtilities.clamp((event.offsetX - ui.radius) / ui.curveWidth(), 0, 1),
         (ui.curveHeight() + ui.marginTop + ui.radius - event.offsetY) / ui.curveHeight());
 
@@ -70,7 +71,7 @@ class BezierCurveUI {
     }
     const deltaX = (mouseX - this.#mouseDownPosition.x) / this.#curveUI.curveWidth();
     const deltaY = (mouseY - this.#mouseDownPosition.y) / this.#curveUI.curveHeight();
-    const newPosition = new UI.Geometry.Point(
+    const newPosition = new Geometry.Point(
         Platform.NumberUtilities.clamp(this.#controlPosition.x + deltaX, 0, 1), this.#controlPosition.y - deltaY);
     this.#bezier.controlPoints[this.#selectedPoint] = newPosition;
   }
@@ -85,7 +86,7 @@ class BezierCurveUI {
     this.#onBezierChange(this.#bezier);
   }
 
-  setBezier(bezier: UI.Geometry.CubicBezier): void {
+  setBezier(bezier: Geometry.CubicBezier): void {
     this.#bezier = bezier;
     this.draw();
   }
@@ -327,7 +328,7 @@ export class PresetUI {
   draw(model: AnimationTimingModel, svg: Element): void {
     if (model instanceof CSSLinearEasingModel) {
       this.#linearEasingPresentation.draw(model, svg);
-    } else if (model instanceof UI.Geometry.CubicBezier) {
+    } else if (model instanceof Geometry.CubicBezier) {
       this.#bezierPresentation.drawCurve(model, svg);
     }
   }
@@ -363,7 +364,7 @@ export class AnimationTimingUI {
     this.#model = model;
     this.#onChange = onChange;
 
-    if (this.#model instanceof UI.Geometry.CubicBezier) {
+    if (this.#model instanceof Geometry.CubicBezier) {
       this.#bezierCurveUI =
           new BezierCurveUI({bezier: this.#model, container: this.#bezierContainer, onBezierChange: this.#onChange});
     } else if (this.#model instanceof CSSLinearEasingModel) {
@@ -381,7 +382,7 @@ export class AnimationTimingUI {
 
   setModel(model: AnimationTimingModel): void {
     this.#model = model;
-    if (this.#model instanceof UI.Geometry.CubicBezier) {
+    if (this.#model instanceof Geometry.CubicBezier) {
       if (this.#bezierCurveUI) {
         this.#bezierCurveUI.setBezier(this.#model);
       } else {
@@ -402,7 +403,7 @@ export class AnimationTimingUI {
 
   draw(): void {
     this.#linearEasingContainer.classList.toggle('hidden', !(this.#model instanceof CSSLinearEasingModel));
-    this.#bezierContainer.classList.toggle('hidden', !(this.#model instanceof UI.Geometry.CubicBezier));
+    this.#bezierContainer.classList.toggle('hidden', !(this.#model instanceof Geometry.CubicBezier));
 
     if (this.#bezierCurveUI) {
       this.#bezierCurveUI.draw();

package/front_end/ui/legacy/components/inline_editor/BezierUI.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 Geometry from '../../../../models/geometry/geometry.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -28,7 +29,7 @@ export class BezierUI {
     this.shouldDrawLine = shouldDrawLine;
   }
 
-  static drawVelocityChart(bezier: UI.Geometry.CubicBezier, path: Element, width: number): void {
+  static drawVelocityChart(bezier: Geometry.CubicBezier, path: Element, width: number): void {
     const height = Height;
     let pathBuilder: Array<string|number>|Array<string|number> = ['M', 0, height];
     /** @constant */ const sampleSize = 1 / 40;
@@ -72,7 +73,7 @@ export class BezierUI {
     circle.setAttribute('r', String(this.radius));
   }
 
-  drawCurve(bezier: UI.Geometry.CubicBezier|null, svg: Element): void {
+  drawCurve(bezier: Geometry.CubicBezier|null, svg: Element): void {
     if (!bezier) {
       return;
     }
@@ -89,13 +90,13 @@ export class BezierUI {
 
     const curve = UI.UIUtils.createSVGChild(group, 'path', 'bezier-path');
     const curvePoints = [
-      new UI.Geometry.Point(
+      new Geometry.Point(
           bezier.controlPoints[0].x * width + this.radius,
           (1 - bezier.controlPoints[0].y) * height + this.radius + this.marginTop),
-      new UI.Geometry.Point(
+      new Geometry.Point(
           bezier.controlPoints[1].x * width + this.radius,
           (1 - bezier.controlPoints[1].y) * height + this.radius + this.marginTop),
-      new UI.Geometry.Point(width + this.radius, this.marginTop + this.radius),
+      new Geometry.Point(width + this.radius, this.marginTop + this.radius),
     ];
     curve.setAttribute(
         'd', 'M' + this.radius + ',' + (height + this.radius + this.marginTop) + ' C' + curvePoints.join(' '));

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../../../core/platform/platform.js';
+import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as UI from '../../legacy.js';
 
 export const CSSAngleRegex = /(?<value>[+-]?\d*\.?\d+)(?<unit>deg|grad|rad|turn)/;
@@ -35,13 +36,13 @@ export const getAngleFromRadians = (rad: number, targetUnit: AngleUnit): Angle =
   let value = rad;
   switch (targetUnit) {
     case AngleUnit.GRAD:
-      value = UI.Geometry.radiansToGradians(rad);
+      value = Geometry.radiansToGradians(rad);
       break;
     case AngleUnit.DEG:
-      value = UI.Geometry.radiansToDegrees(rad);
+      value = Geometry.radiansToDegrees(rad);
       break;
     case AngleUnit.TURN:
-      value = UI.Geometry.radiansToTurns(rad);
+      value = Geometry.radiansToTurns(rad);
       break;
   }
 
@@ -54,11 +55,11 @@ export const getAngleFromRadians = (rad: number, targetUnit: AngleUnit): Angle =
 export const getRadiansFromAngle = (angle: Angle): number => {
   switch (angle.unit) {
     case AngleUnit.DEG:
-      return UI.Geometry.degreesToRadians(angle.value);
+      return Geometry.degreesToRadians(angle.value);
     case AngleUnit.GRAD:
-      return UI.Geometry.gradiansToRadians(angle.value);
+      return Geometry.gradiansToRadians(angle.value);
     case AngleUnit.TURN:
-      return UI.Geometry.turnsToRadians(angle.value);
+      return Geometry.turnsToRadians(angle.value);
   }
 
   return angle.value;

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

@@ -6,6 +6,7 @@
 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 Geometry from '../../../../models/geometry/geometry.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -108,7 +109,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   private spreadInput: HTMLInputElement;
   private spreadSlider: HTMLInputElement;
   private model!: CSSShadowModel;
-  private canvasOrigin!: UI.Geometry.Point;
+  private canvasOrigin!: Geometry.Point;
   private changedElement?: HTMLInputElement|null;
   constructor() {
     super({useShadowDom: true});
@@ -368,10 +369,10 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   private dragStart(event: MouseEvent): boolean {
     this.xySlider.focus();
     this.updateCanvas(true);
-    this.canvasOrigin = new UI.Geometry.Point(
+    this.canvasOrigin = new Geometry.Point(
         this.xySlider.getBoundingClientRect().left + this.halfCanvasSize,
         this.xySlider.getBoundingClientRect().top + this.halfCanvasSize);
-    const clickedPoint = new UI.Geometry.Point(event.x - this.canvasOrigin.x, event.y - this.canvasOrigin.y);
+    const clickedPoint = new Geometry.Point(event.x - this.canvasOrigin.x, event.y - this.canvasOrigin.y);
     const thumbPoint = this.sliderThumbPosition();
     if (clickedPoint.distanceTo(thumbPoint) >= sliderThumbRadius) {
       this.dragMove(event);
@@ -380,7 +381,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private dragMove(event: MouseEvent): void {
-    let point: UI.Geometry.Point = new UI.Geometry.Point(event.x - this.canvasOrigin.x, event.y - this.canvasOrigin.y);
+    let point: Geometry.Point = new Geometry.Point(event.x - this.canvasOrigin.x, event.y - this.canvasOrigin.y);
     if (event.shiftKey) {
       point = this.snapToClosestDirection(point);
     }
@@ -454,20 +455,20 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.dispatchEventToListeners(Events.SHADOW_CHANGED, this.model);
   }
 
-  private constrainPoint(point: UI.Geometry.Point, max: number): UI.Geometry.Point {
+  private constrainPoint(point: Geometry.Point, max: number): Geometry.Point {
     if (Math.abs(point.x) <= max && Math.abs(point.y) <= max) {
-      return new UI.Geometry.Point(point.x, point.y);
+      return new Geometry.Point(point.x, point.y);
     }
     return point.scale(max / Math.max(Math.abs(point.x), Math.abs(point.y)));
   }
 
-  private snapToClosestDirection(point: UI.Geometry.Point): UI.Geometry.Point {
+  private snapToClosestDirection(point: Geometry.Point): Geometry.Point {
     let minDistance: number = Number.MAX_VALUE;
-    let closestPoint: UI.Geometry.Point = point;
+    let closestPoint: Geometry.Point = point;
 
     const directions = [
-      new UI.Geometry.Point(0, -1), new UI.Geometry.Point(1, -1), new UI.Geometry.Point(1, 0),
-      new UI.Geometry.Point(1, 1),  // Southeast
+      new Geometry.Point(0, -1), new Geometry.Point(1, -1), new Geometry.Point(1, 0),
+      new Geometry.Point(1, 1),  // Southeast
     ];
 
     for (const direction of directions) {
@@ -482,10 +483,10 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     return closestPoint;
   }
 
-  private sliderThumbPosition(): UI.Geometry.Point {
+  private sliderThumbPosition(): Geometry.Point {
     const x = (this.model.offsetX().amount / maxRange) * this.innerCanvasSize;
     const y = (this.model.offsetY().amount / maxRange) * this.innerCanvasSize;
-    return this.constrainPoint(new UI.Geometry.Point(x, y), this.innerCanvasSize);
+    return this.constrainPoint(new Geometry.Point(x, y), this.innerCanvasSize);
   }
 }
 

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

@@ -33,6 +33,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as UI from '../../legacy.js';
 import * as Components from '../utils/utils.js';
 
@@ -102,7 +103,7 @@ export class ObjectPopoverHelper {
         popoverContentElement.appendChild(section.element);
       }
       popoverContentElement.dataset.stableNameForTest = 'object-popover-content';
-      popover.setMaxContentSize(new UI.Geometry.Size(300, 250));
+      popover.setMaxContentSize(new Geometry.Size(300, 250));
       popover.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_SIZE);
       popover.contentElement.appendChild(popoverContentElement);
       return new ObjectPopoverHelper(linkifier, resultHighlightedAsDOM);

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

@@ -1645,24 +1645,23 @@ export class Renderer implements UI.UIUtils.Renderer {
     return rendererInstance;
   }
 
-  async render(object: Object, options?: UI.UIUtils.Options): Promise<{
-    node: Node,
-    tree: UI.TreeOutline.TreeOutline|null,
-  }|null> {
+  async render(object: Object, options?: UI.UIUtils.Options): Promise<UI.UIUtils.RenderedObject|null> {
     if (!(object instanceof SDK.RemoteObject.RemoteObject)) {
       throw new Error('Can\'t render ' + object);
     }
-    options = options || {title: undefined, editable: undefined};
-    const title = options.title;
+    const title = options?.title;
     const section = new ObjectPropertiesSection(object, title);
     if (!title) {
       section.titleLessMode();
     }
-    section.editable = Boolean(options.editable);
-    return {node: section.element, tree: section} as {
-      node: Node,
-      tree: UI.TreeOutline.TreeOutline | null,
-    } | null;
+    section.editable = Boolean(options?.editable);
+    if (options?.expand) {
+      section.firstChild()?.expand();
+    }
+    return {
+      element: section.element,
+      forceSelect: section.forceSelect.bind(section),
+    };
   }
 }
 

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

@@ -33,6 +33,7 @@
 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 type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
@@ -43,7 +44,7 @@ import {drawExpansionArrow, drawIcon, horizontalLine} from './CanvasHelper.js';
 import {ChartViewport, type ChartViewportDelegate} from './ChartViewport.js';
 import flameChartStyles from './flameChart.css.js';
 import {DEFAULT_FONT_SIZE, getFontFamilyForCanvas} from './Font.js';
-import {type Calculator, TimelineGrid} from './TimelineGrid.js';
+import {TimelineGrid} from './TimelineGrid.js';
 
 /**
  * Set as the `details` value on the fake context menu event we dispatch to
@@ -256,7 +257,7 @@ export type DrawOverride =
      timeToPosition: (time: number) => number, transformColor: (color: string) => string) => PositionOverride;
 
 export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements Calculator, ChartViewportDelegate {
+    implements NetworkTimeCalculator.Calculator, ChartViewportDelegate {
   private readonly flameChartDelegate: FlameChartDelegate;
   private chartViewport: ChartViewport;
   private dataProvider: FlameChartDataProvider;

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

@@ -32,12 +32,13 @@
 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 type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import overviewGridStyles from './overviewGrid.css.js';
-import {type Calculator, TimelineGrid} from './TimelineGrid.js';
+import {TimelineGrid} from './TimelineGrid.js';
 
 const UIStrings = {
   /**
@@ -61,7 +62,7 @@ export class OverviewGrid {
   // The |window| will manage the html element of resizers, the left/right blue-colour curtain, and handle the resizing,
   // zooming, and breadcrumb creation.
   private readonly window: Window;
-  constructor(prefix: string, calculator?: Calculator) {
+  constructor(prefix: string, calculator?: NetworkTimeCalculator.Calculator) {
     this.element = document.createElement('div');
     this.element.id = prefix + '-overview-container';
 
@@ -86,7 +87,7 @@ export class OverviewGrid {
     return this.element.clientWidth;
   }
 
-  updateDividers(calculator: Calculator): void {
+  updateDividers(calculator: NetworkTimeCalculator.Calculator): void {
     this.grid.updateDividers(calculator);
   }
 
@@ -154,7 +155,7 @@ const OffsetFromWindowEnds = 10;
 
 export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private parentElement: Element;
-  private calculator: Calculator|undefined;
+  private calculator: NetworkTimeCalculator.Calculator|undefined;
   private leftResizeElement: HTMLElement;
   private rightResizeElement: HTMLElement;
   private leftCurtainElement: HTMLElement;
@@ -180,7 +181,8 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private resizerParentOffsetLeft?: number;
   #breadcrumbsEnabled = false;
   #mouseOverGridOverview = false;
-  constructor(parentElement: HTMLElement, dividersLabelBarElement?: Element, calculator?: Calculator) {
+  constructor(
+      parentElement: HTMLElement, dividersLabelBarElement?: Element, calculator?: NetworkTimeCalculator.Calculator) {
     super();
     this.parentElement = parentElement;
     this.parentElement.classList.add('parent-element');

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

@@ -34,6 +34,7 @@
  */
 
 import * as Platform from '../../../../core/platform/platform.js';
+import type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import {DEFAULT_FONT_SIZE, getFontFamilyForCanvas} from './Font.js';
@@ -61,7 +62,7 @@ export class TimelineGrid {
     this.element.appendChild(this.gridHeaderElement);
   }
 
-  static calculateGridOffsets(calculator: Calculator, freeZoneAtLeft?: number): DividersData {
+  static calculateGridOffsets(calculator: NetworkTimeCalculator.Calculator, freeZoneAtLeft?: number): DividersData {
     const minGridSlicePx = 64;  // minimal distance between grid lines.
 
     const clientWidth = calculator.computePosition(calculator.maximumBoundary());
@@ -166,7 +167,7 @@ export class TimelineGrid {
     return this.dividersLabelBarElementInternal;
   }
 
-  updateDividers(calculator: Calculator, freeZoneAtLeft?: number): boolean {
+  updateDividers(calculator: NetworkTimeCalculator.Calculator, freeZoneAtLeft?: number): boolean {
     const dividersData = TimelineGrid.calculateGridOffsets(calculator, freeZoneAtLeft);
     const dividerOffsets = dividersData.offsets;
     const precision = dividersData.precision;
@@ -260,17 +261,6 @@ export class TimelineGrid {
   }
 }
 
-// The TimelineGrid is used in the Performance panel and Memory panel -> Allocating sampling, so the value can be either
-// milliseconds or bytes
-export interface Calculator {
-  computePosition(value: number): number;
-  formatValue(value: number, precision?: number): string;
-  minimumBoundary(): number;
-  zeroTime(): number;
-  maximumBoundary(): number;
-  boundarySpan(): number;
-}
-
 export interface DividersData {
   offsets: Array<{
     position: number,

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

@@ -2,11 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../../../models/trace/trace.js';
 
-import type {Calculator} from './TimelineGrid.js';
-
-export class TimelineOverviewCalculator implements Calculator {
+export class TimelineOverviewCalculator implements NetworkTimeCalculator.Calculator {
   #minimumBoundary: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(0);
   #maximumBoundary: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(100);
 

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

@@ -6,6 +6,7 @@
 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 Geometry from '../../../../models/geometry/geometry.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
@@ -171,7 +172,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
 
     this.dialog = new UI.Dialog.Dialog('quick-open');
     UI.ARIAUtils.setLabel(this.dialog.contentElement, dialogTitle);
-    this.dialog.setMaxContentSize(new UI.Geometry.Size(576, 320));
+    this.dialog.setMaxContentSize(new Geometry.Size(576, 320));
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     this.dialog.setContentPosition(null, 22);
     this.dialog.contentElement.style.setProperty('border-radius', 'var(--sys-shape-corner-medium)');