@quick-game/cli
Version:
Command line interface for rapid qg development
89 lines • 4.47 kB
JavaScript
// 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 Common from '../../core/common/common.js';
import * as TraceEngine from '../../models/trace/trace.js';
import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
import * as UI from '../../ui/legacy/legacy.js';
import { TimelineEventOverviewCPUActivity, TimelineEventOverviewMemory, TimelineEventOverviewNetwork, TimelineEventOverviewResponsiveness, TimelineFilmStripOverview, } from './TimelineEventOverview.js';
import miniMapStyles from './timelineMiniMap.css.js';
import { TimelineUIUtils } from './TimelineUIUtils.js';
/**
* This component wraps the generic PerfUI Overview component and configures it
* specifically for the Performance Panel, including injecting the CSS we use
* to customise how the components render within the Performance Panel.
*/
export class TimelineMiniMap extends Common.ObjectWrapper.eventMixin(UI.Widget.VBox) {
#overviewComponent = new PerfUI.TimelineOverviewPane.TimelineOverviewPane('timeline');
#controls = [];
constructor() {
super();
this.element.classList.add('timeline-minimap');
this.#overviewComponent.show(this.element);
// Push the event up into the parent component so the panel knows when the window is changed.
this.#overviewComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.WindowChanged, event => {
this.dispatchEventToListeners(PerfUI.TimelineOverviewPane.Events.WindowChanged, event.data);
});
}
wasShown() {
super.wasShown();
this.registerCSSFiles([miniMapStyles]);
}
reset() {
this.#overviewComponent.reset();
}
setBounds(min, max) {
this.#overviewComponent.setBounds(min, max);
}
setWindowTimes(left, right) {
this.#overviewComponent.setWindowTimes(left, right);
}
#setMarkers(traceParsedData) {
const markers = new Map();
const { Meta, PageLoadMetrics } = traceParsedData;
// Add markers for navigation start times.
const navStartEvents = Meta.mainFrameNavigations;
const minTimeInMilliseconds = TraceEngine.Helpers.Timing.microSecondsToMilliseconds(Meta.traceBounds.min);
for (const event of navStartEvents) {
const { startTime } = TraceEngine.Legacy.timesForEventInMilliseconds(event);
markers.set(startTime, TimelineUIUtils.createEventDivider(event, minTimeInMilliseconds));
}
// Now add markers for the page load events
for (const event of PageLoadMetrics.allMarkerEvents) {
const { startTime } = TraceEngine.Legacy.timesForEventInMilliseconds(event);
markers.set(startTime, TimelineUIUtils.createEventDivider(event, minTimeInMilliseconds));
}
this.#overviewComponent.setMarkers(markers);
}
#setNavigationStartEvents(traceParsedData) {
this.#overviewComponent.setNavStartTimes(traceParsedData.Meta.mainFrameNavigations);
}
setData(data) {
this.#controls = [];
if (data.traceParsedData) {
this.#setMarkers(data.traceParsedData);
this.#setNavigationStartEvents(data.traceParsedData);
this.#controls.push(new TimelineEventOverviewResponsiveness(data.traceParsedData));
}
// CPU Activity is the only component that relies on the old model and will
// do so until we have finished migrating the Main Thread track to the new
// trace engine
if (data.performanceModel) {
this.#controls.push(new TimelineEventOverviewCPUActivity(data.performanceModel));
}
if (data.traceParsedData) {
this.#controls.push(new TimelineEventOverviewNetwork(data.traceParsedData));
}
if (data.settings.showScreenshots && data.traceParsedData) {
const filmStrip = TraceEngine.Extras.FilmStrip.fromTraceData(data.traceParsedData);
if (filmStrip.frames.length) {
this.#controls.push(new TimelineFilmStripOverview(filmStrip));
}
}
if (data.settings.showMemory && data.traceParsedData) {
this.#controls.push(new TimelineEventOverviewMemory(data.traceParsedData));
}
this.#overviewComponent.setOverviewControls(this.#controls);
}
}
//# sourceMappingURL=TimelineMiniMap.js.map