diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 7e847032d7..1464f729ee 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -2030,6 +2030,7 @@ grd_files_debug_sources = [ "front_end/ui/legacy/components/perf_ui/OverviewGrid.js", "front_end/ui/legacy/components/perf_ui/PieChart.js", "front_end/ui/legacy/components/perf_ui/TimelineGrid.js", + "front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.js", "front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.js", "front_end/ui/legacy/components/perf_ui/chartViewport.css.legacy.js", "front_end/ui/legacy/components/perf_ui/filmStripView.css.legacy.js", diff --git a/front_end/panels/network/NetworkOverview.ts b/front_end/panels/network/NetworkOverview.ts index 1f69eed3eb..f09521c6ab 100644 --- a/front_end/panels/network/NetworkOverview.ts +++ b/front_end/panels/network/NetworkOverview.ts @@ -4,9 +4,10 @@ import type * as Common from '../../core/common/common.js'; import * as SDK from '../../core/sdk/sdk.js'; +import * as TraceEngine from '../../models/trace/trace.js'; +import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js'; import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js'; import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js'; -import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js'; import {NetworkLogView} from './NetworkLogView.js'; import {NetworkTimeBoundary} from './NetworkTimeCalculator.js'; @@ -102,8 +103,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie this.onResize(); } - override calculator(): PerfUI.TimelineOverviewPane.TimelineOverviewCalculator { - return super.calculator() as PerfUI.TimelineOverviewPane.TimelineOverviewCalculator; + override calculator(): PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator { + return super.calculator() as PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator; } override onResize(): void { @@ -147,7 +148,10 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie this.span *= 1.25; } - calculator.setBounds(calculator.minimumBoundary(), calculator.minimumBoundary() + this.span); + calculator.setBounds( + calculator.minimumBoundary(), + TraceEngine.Types.Timing.MilliSeconds(calculator.minimumBoundary() + this.span)); + this.lastBoundary = new NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary()); } @@ -172,8 +176,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie if (endTime === Number.MAX_VALUE) { endTime = calculator.maximumBoundary(); } - const startX = calculator.computePosition(startTime); - const endX = calculator.computePosition(endTime) + 1; + const startX = calculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(startTime)); + const endX = calculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(endTime)) + 1; context.fillRect(startX, y, endX - startX, _bandHeight); context.strokeRect(startX, y, endX - startX, _bandHeight); } @@ -232,8 +236,10 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--legacy-selection-bg-color'); - const start = timeRanges[0].start * 1000; - const end = timeRanges[0].end * 1000; + // The network overview works in seconds, but the calcululator deals in + // milliseconds, hence the multiplication by 1000. + const start = TraceEngine.Types.Timing.MilliSeconds(timeRanges[0].start * 1000); + const end = TraceEngine.Types.Timing.MilliSeconds(timeRanges[0].end * 1000); context.fillRect( calculator.computePosition(start) - borderSize, y - size / 2 - borderSize, calculator.computePosition(end) - calculator.computePosition(start) + 1 + 2 * borderSize, size * borderSize); @@ -246,8 +252,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie ThemeSupport.ThemeSupport.instance().getComputedValue(RequestTimeRangeNameToColor[type]); context.lineWidth = size; - const start = timeRanges[j].start * 1000; - const end = timeRanges[j].end * 1000; + const start = TraceEngine.Types.Timing.MilliSeconds(timeRanges[j].start * 1000); + const end = TraceEngine.Types.Timing.MilliSeconds(timeRanges[j].end * 1000); context.moveTo(calculator.computePosition(start) - 0, y); context.lineTo(calculator.computePosition(end) + 1, y); context.stroke(); @@ -260,7 +266,9 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie context.beginPath(); context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getDCLEventColor()); for (let i = this.domContentLoadedEvents.length - 1; i >= 0; --i) { - const x = Math.round(calculator.computePosition(this.domContentLoadedEvents[i])) + 0.5; + const position = + calculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(this.domContentLoadedEvents[i])); + const x = Math.round(position) + 0.5; context.moveTo(x, 0); context.lineTo(x, height); } @@ -269,7 +277,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie context.beginPath(); context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getLoadEventColor()); for (let i = this.loadEvents.length - 1; i >= 0; --i) { - const x = Math.round(calculator.computePosition(this.loadEvents[i])) + 0.5; + const position = calculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(this.loadEvents[i])); + const x = Math.round(position) + 0.5; context.moveTo(x, 0); context.lineTo(x, height); } @@ -279,7 +288,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie context.lineWidth = 2; context.beginPath(); context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--network-frame-divider-color'); - const x = Math.round(calculator.computePosition(this.selectedFilmStripTime)); + const timeInMilliseconds = TraceEngine.Types.Timing.MilliSeconds(this.selectedFilmStripTime); + const x = Math.round(calculator.computePosition(timeInMilliseconds)); context.moveTo(x, 0); context.lineTo(x, height); context.stroke(); diff --git a/front_end/panels/network/NetworkPanel.ts b/front_end/panels/network/NetworkPanel.ts index fac9312c35..7763dc178c 100644 --- a/front_end/panels/network/NetworkPanel.ts +++ b/front_end/panels/network/NetworkPanel.ts @@ -49,15 +49,13 @@ import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js'; import * as Search from '../search/search.js'; import {BlockedURLsPane} from './BlockedURLsPane.js'; - import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js'; import {NetworkItemView} from './NetworkItemView.js'; import {NetworkLogView} from './NetworkLogView.js'; import {NetworkOverview} from './NetworkOverview.js'; import networkPanelStyles from './networkPanel.css.js'; import {NetworkSearchScope} from './NetworkSearchScope.js'; - -import {NetworkTransferTimeCalculator, type NetworkTimeCalculator} from './NetworkTimeCalculator.js'; +import {type NetworkTimeCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js'; const UIStrings = { /** @@ -780,7 +778,9 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi const request = event.data; this.calculator.updateBoundaries(request); // FIXME: Unify all time units across the frontend! - this.overviewPane.setBounds(this.calculator.minimumBoundary() * 1000, this.calculator.maximumBoundary() * 1000); + this.overviewPane.setBounds( + TraceEngine.Types.Timing.MilliSeconds(this.calculator.minimumBoundary() * 1000), + TraceEngine.Types.Timing.MilliSeconds(this.calculator.maximumBoundary() * 1000)); this.networkOverview.updateRequest(request); this.overviewPane.scheduleUpdate(); } diff --git a/front_end/panels/timeline/TimelineMiniMap.ts b/front_end/panels/timeline/TimelineMiniMap.ts index 427c854195..28bd1a4859 100644 --- a/front_end/panels/timeline/TimelineMiniMap.ts +++ b/front_end/panels/timeline/TimelineMiniMap.ts @@ -58,7 +58,7 @@ export class TimelineMiniMap extends this.#overviewComponent.reset(); } - setBounds(min: number, max: number): void { + setBounds(min: TraceEngine.Types.Timing.MilliSeconds, max: TraceEngine.Types.Timing.MilliSeconds): void { this.#overviewComponent.setBounds(min, max); } diff --git a/front_end/panels/timeline/TimelinePanel.ts b/front_end/panels/timeline/TimelinePanel.ts index 5e8f885ff9..c10c4d02c7 100644 --- a/front_end/panels/timeline/TimelinePanel.ts +++ b/front_end/panels/timeline/TimelinePanel.ts @@ -1098,7 +1098,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod if (model && this.performanceModel) { this.performanceModel.addEventListener(Events.WindowChanged, this.onModelWindowChanged, this); this.#minimapComponent.setBounds( - model.timelineModel().minimumRecordTime(), model.timelineModel().maximumRecordTime()); + TraceEngine.Types.Timing.MilliSeconds(model.timelineModel().minimumRecordTime()), + TraceEngine.Types.Timing.MilliSeconds(model.timelineModel().maximumRecordTime())); PerfUI.LineLevelProfile.Performance.instance().reset(); for (const profile of model.timelineModel().cpuProfiles()) { PerfUI.LineLevelProfile.Performance.instance().appendCPUProfile(profile.cpuProfileData, profile.target); diff --git a/front_end/ui/components/docs/performance_panel/overview.ts b/front_end/ui/components/docs/performance_panel/overview.ts index dc88b7309b..b6a9e3495f 100644 --- a/front_end/ui/components/docs/performance_panel/overview.ts +++ b/front_end/ui/components/docs/performance_panel/overview.ts @@ -4,6 +4,7 @@ import * as EnvironmentHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js'; import * as TraceLoader from '../../../../../test/unittests/front_end/helpers/TraceLoader.js'; +import * as TraceEngine from '../../../../models/trace/trace.js'; import * as Timeline from '../../../../panels/timeline/timeline.js'; import * as ComponentSetup from '../../helpers/helpers.js'; @@ -28,7 +29,10 @@ async function renderMiniMap(containerSelector: string, options: {showMemory: bo const models = await TraceLoader.TraceLoader.allModels(null, fileName); - minimap.setBounds(models.timelineModel.minimumRecordTime(), models.timelineModel.maximumRecordTime()); + minimap.setBounds( + TraceEngine.Types.Timing.MilliSeconds(models.timelineModel.minimumRecordTime()), + TraceEngine.Types.Timing.MilliSeconds(models.timelineModel.maximumRecordTime()), + ); minimap.setWindowTimes(models.performanceModel.window().left, models.performanceModel.window().right); minimap.setData({ traceParsedData: models.traceParsedData, diff --git a/front_end/ui/legacy/components/perf_ui/BUILD.gn b/front_end/ui/legacy/components/perf_ui/BUILD.gn index 95f91c7c88..d3dee582a2 100644 --- a/front_end/ui/legacy/components/perf_ui/BUILD.gn +++ b/front_end/ui/legacy/components/perf_ui/BUILD.gn @@ -39,6 +39,7 @@ devtools_module("perf_ui") { "OverviewGrid.ts", "PieChart.ts", "TimelineGrid.ts", + "TimelineOverviewCalculator.ts", "TimelineOverviewPane.ts", ] diff --git a/front_end/ui/legacy/components/perf_ui/FlameChart.ts b/front_end/ui/legacy/components/perf_ui/FlameChart.ts index 0f6b637544..1d7c866fae 100644 --- a/front_end/ui/legacy/components/perf_ui/FlameChart.ts +++ b/front_end/ui/legacy/components/perf_ui/FlameChart.ts @@ -37,10 +37,9 @@ import * as UI from '../../legacy.js'; import * as ThemeSupport from '../../theme_support/theme_support.js'; import {ChartViewport, type ChartViewportDelegate} from './ChartViewport.js'; - -import {TimelineGrid, type Calculator} from './TimelineGrid.js'; import flameChartStyles from './flameChart.css.legacy.js'; import {DEFAULT_FONT_SIZE, getFontFamilyForCanvas} from './Font.js'; +import {type Calculator, TimelineGrid} from './TimelineGrid.js'; const UIStrings = { /** @@ -2090,20 +2089,20 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin { if (!this.calculator) { return; } - const startValue = this.calculator.formatValue(this.getRawSliderValue(/* leftSlider */ true)); - const endValue = this.calculator.formatValue(this.getRawSliderValue(/* leftSlider */ false)); + const startValue = this.calculator.formatValue( + TraceEngine.Types.Timing.MilliSeconds(this.getRawSliderValue(/* leftSlider */ true))); + const endValue = this.calculator.formatValue( + TraceEngine.Types.Timing.MilliSeconds(this.getRawSliderValue(/* leftSlider */ false))); UI.ARIAUtils.setAriaValueText(this.leftResizeElement, String(startValue)); UI.ARIAUtils.setAriaValueText(this.rightResizeElement, String(endValue)); } diff --git a/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.ts b/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.ts new file mode 100644 index 0000000000..4402e53172 --- /dev/null +++ b/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.ts @@ -0,0 +1,81 @@ +// Copyright 2023 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. +import * as i18n from '../../../../core/i18n/i18n.js'; +import * as TraceEngine from '../../../../models/trace/trace.js'; + +import {type Calculator} from './TimelineGrid.js'; + +export class TimelineOverviewCalculator implements Calculator { + #minimumBoundary: TraceEngine.Types.Timing.MilliSeconds = TraceEngine.Types.Timing.MilliSeconds(0); + #maximumBoundary: TraceEngine.Types.Timing.MilliSeconds = TraceEngine.Types.Timing.MilliSeconds(100); + + private workingArea!: number; + private navStartTimes?: readonly TraceEngine.Types.TraceEvents.TraceEventNavigationStart[]; + + computePosition(time: TraceEngine.Types.Timing.MilliSeconds): number { + return (time - this.#minimumBoundary) / this.boundarySpan() * this.workingArea; + } + + positionToTime(position: number): number { + return position / this.workingArea * this.boundarySpan() + this.#minimumBoundary; + } + + setBounds( + minimumBoundary: TraceEngine.Types.Timing.MilliSeconds, + maximumBoundary: TraceEngine.Types.Timing.MilliSeconds): void { + this.#minimumBoundary = minimumBoundary; + this.#maximumBoundary = maximumBoundary; + } + + setNavStartTimes(navStartTimes: readonly TraceEngine.Types.TraceEvents.TraceEventNavigationStart[]): void { + this.navStartTimes = navStartTimes; + } + + setDisplayWidth(clientWidth: number): void { + this.workingArea = clientWidth; + } + + reset(): void { + this.setBounds( + TraceEngine.Types.Timing.MilliSeconds(0), + TraceEngine.Types.Timing.MilliSeconds(100), + ); + } + + formatValue(value: number, precision?: number): string { + // If there are nav start times the value needs to be remapped. + if (this.navStartTimes) { + // Find the latest possible nav start time which is considered earlier + // than the value passed through. + for (let i = this.navStartTimes.length - 1; i >= 0; i--) { + const startTimeMilliseconds = TraceEngine.Helpers.Timing.microSecondsToMilliseconds( + this.navStartTimes[i].ts, + ); + + if (value > startTimeMilliseconds) { + value -= (startTimeMilliseconds - this.zeroTime()); + break; + } + } + } + + return i18n.TimeUtilities.preciseMillisToString(value - this.zeroTime(), precision); + } + + maximumBoundary(): TraceEngine.Types.Timing.MilliSeconds { + return this.#maximumBoundary; + } + + minimumBoundary(): TraceEngine.Types.Timing.MilliSeconds { + return this.#minimumBoundary; + } + + zeroTime(): TraceEngine.Types.Timing.MilliSeconds { + return this.#minimumBoundary; + } + + boundarySpan(): TraceEngine.Types.Timing.MilliSeconds { + return TraceEngine.Types.Timing.MilliSeconds(this.#maximumBoundary - this.#minimumBoundary); + } +} diff --git a/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts b/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts index d345ef945e..36d2056712 100644 --- a/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts +++ b/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts @@ -29,12 +29,11 @@ */ import * as Common from '../../../../core/common/common.js'; -import * as i18n from '../../../../core/i18n/i18n.js'; import * as TraceEngine from '../../../../models/trace/trace.js'; import * as UI from '../../legacy.js'; import {Events as OverviewGridEvents, OverviewGrid, type WindowChangedWithPositionEvent} from './OverviewGrid.js'; -import {type Calculator} from './TimelineGrid.js'; +import {TimelineOverviewCalculator} from './TimelineOverviewCalculator.js'; import timelineOverviewInfoStyles from './timelineOverviewInfo.css.js'; export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin( @@ -141,7 +140,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin(); for (const time of this.markers.keys()) { const marker = this.markers.get(time) as HTMLElement; - const position = Math.round(this.overviewCalculator.computePosition(time)); + const position = Math.round(this.overviewCalculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(time))); // Limit the number of markers to one per pixel. if (filteredMarkers.has(position)) { continue; @@ -269,78 +270,6 @@ export type EventTypes = { [Events.WindowChanged]: WindowChangedEvent, }; -export class TimelineOverviewCalculator implements Calculator { - private minimumBoundaryInternal!: number; - private maximumBoundaryInternal!: number; - private workingArea!: number; - private navStartTimes?: readonly TraceEngine.Types.TraceEvents.TraceEventNavigationStart[]; - - constructor() { - this.reset(); - } - - computePosition(time: number): number { - return (time - this.minimumBoundaryInternal) / this.boundarySpan() * this.workingArea; - } - - positionToTime(position: number): number { - return position / this.workingArea * this.boundarySpan() + this.minimumBoundaryInternal; - } - - setBounds(minimumBoundary: number, maximumBoundary: number): void { - this.minimumBoundaryInternal = minimumBoundary; - this.maximumBoundaryInternal = maximumBoundary; - } - - setNavStartTimes(navStartTimes: readonly TraceEngine.Types.TraceEvents.TraceEventNavigationStart[]): void { - this.navStartTimes = navStartTimes; - } - - setDisplayWidth(clientWidth: number): void { - this.workingArea = clientWidth; - } - - reset(): void { - this.setBounds(0, 100); - } - - formatValue(value: number, precision?: number): string { - // If there are nav start times the value needs to be remapped. - if (this.navStartTimes) { - // Find the latest possible nav start time which is considered earlier - // than the value passed through. - for (let i = this.navStartTimes.length - 1; i >= 0; i--) { - const startTimeMilliseconds = TraceEngine.Helpers.Timing.microSecondsToMilliseconds( - this.navStartTimes[i].ts, - ); - - if (value > startTimeMilliseconds) { - value -= (startTimeMilliseconds - this.zeroTime()); - break; - } - } - } - - return i18n.TimeUtilities.preciseMillisToString(value - this.zeroTime(), precision); - } - - maximumBoundary(): number { - return this.maximumBoundaryInternal; - } - - minimumBoundary(): number { - return this.minimumBoundaryInternal; - } - - zeroTime(): number { - return this.minimumBoundaryInternal; - } - - boundarySpan(): number { - return this.maximumBoundaryInternal - this.minimumBoundaryInternal; - } -} - export interface TimelineOverview { show(parentElement: Element, insertBefore?: Element|null): void; update(): void; diff --git a/front_end/ui/legacy/components/perf_ui/perf_ui.ts b/front_end/ui/legacy/components/perf_ui/perf_ui.ts index 64c776759b..7ac1533333 100644 --- a/front_end/ui/legacy/components/perf_ui/perf_ui.ts +++ b/front_end/ui/legacy/components/perf_ui/perf_ui.ts @@ -13,6 +13,7 @@ import * as NetworkPriorities from './NetworkPriorities.js'; import * as OverviewGrid from './OverviewGrid.js'; import * as PieChart from './PieChart.js'; import * as TimelineGrid from './TimelineGrid.js'; +import * as TimelineOverviewCalculator from './TimelineOverviewCalculator.js'; import * as TimelineOverviewPane from './TimelineOverviewPane.js'; export { @@ -27,5 +28,6 @@ export { OverviewGrid, PieChart, TimelineGrid, + TimelineOverviewCalculator, TimelineOverviewPane, }; diff --git a/test/unittests/front_end/panels/network/NetworkOverview_test.ts b/test/unittests/front_end/panels/network/NetworkOverview_test.ts index a84f1a5c5a..f5b6815520 100644 --- a/test/unittests/front_end/panels/network/NetworkOverview_test.ts +++ b/test/unittests/front_end/panels/network/NetworkOverview_test.ts @@ -3,13 +3,12 @@ // found in the LICENSE file. import type * as Common from '../../../../../front_end/core/common/common.js'; -import * as Network from '../../../../../front_end/panels/network/network.js'; import type * as Platform from '../../../../../front_end/core/platform/platform.js'; +import {assertNotNullOrUndefined} from '../../../../../front_end/core/platform/platform.js'; import * as SDK from '../../../../../front_end/core/sdk/sdk.js'; +import * as Network from '../../../../../front_end/panels/network/network.js'; import * as Coordinator from '../../../../../front_end/ui/components/render_coordinator/render_coordinator.js'; import type * as PerfUI from '../../../../../front_end/ui/legacy/components/perf_ui/perf_ui.js'; - -import {assertNotNullOrUndefined} from '../../../../../front_end/core/platform/platform.js'; import {createTarget} from '../../helpers/EnvironmentHelpers.js'; import {describeWithMockConnection} from '../../helpers/MockConnection.js'; @@ -40,7 +39,8 @@ describeWithMockConnection('NetworkOverview', () => { zeroTime: sinon.stub(), boundarySpan: sinon.stub(), }; - networkOverview.setCalculator(calculator as unknown as PerfUI.TimelineOverviewPane.TimelineOverviewCalculator); + networkOverview.setCalculator( + calculator as unknown as PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator); networkOverview.markAsRoot(); networkOverview.show(document.body); const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel); diff --git a/test/unittests/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator_test.ts b/test/unittests/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator_test.ts index 0bd1b2d31b..f2c0a02999 100644 --- a/test/unittests/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator_test.ts +++ b/test/unittests/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator_test.ts @@ -2,49 +2,51 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import type * as TraceEngine from '../../../../../../../front_end/models/trace/trace.js'; +import * as TraceEngine from '../../../../../../../front_end/models/trace/trace.js'; import * as PerfUI from '../../../../../../../front_end/ui/legacy/components/perf_ui/perf_ui.js'; import {describeWithLocale} from '../../../../helpers/EnvironmentHelpers.js'; const {assert} = chai; +const {MilliSeconds} = TraceEngine.Types.Timing; + describeWithLocale('TimelineOverviewCalculator', () => { it('can calculate pixels for a given time', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); - assert.strictEqual(calculator.computePosition(50), 100); + assert.strictEqual(calculator.computePosition(MilliSeconds(50)), 100); }); it('can calculate the time position for a pixel value', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); assert.strictEqual(calculator.positionToTime(100), 50); }); it('formats time values', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); const result = calculator.formatValue(55.234); assert.deepEqual(result, '55\u00A0ms'); }); it('formats time values with custom precision', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); const result = calculator.formatValue(55.234, 2); assert.deepEqual(result, '55.23\u00A0ms'); }); it('adjusts times based on navigaton start times', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); const fakeNavStart = { // TraceEngine events are in microseconds ts: 100_000, @@ -56,9 +58,9 @@ describeWithLocale('TimelineOverviewCalculator', () => { }); it('returns the correct range', async () => { - const calculator = new PerfUI.TimelineOverviewPane.TimelineOverviewCalculator(); + const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator(); calculator.setDisplayWidth(200); - calculator.setBounds(0, 100); + calculator.setBounds(MilliSeconds(0), MilliSeconds(100)); assert.strictEqual(calculator.boundarySpan(), 100); }); });