@yuebai008/cli/dist/cli-server/client/front_end/panels/timeline/TimelineDetailsView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as TimelineModel from"../../models/timeline_model/timeline_model.js";import*as Components from"../../ui/legacy/components/utils/utils.js";import*as UI from"../../ui/legacy/legacy.js";import*as TraceEngine from"../../models/trace/trace.js";import{EventsTimelineTreeView}from"./EventsTimelineTreeView.js";import{Events}from"./PerformanceModel.js";import{TimelineLayersView}from"./TimelineLayersView.js";import{TimelinePaintProfilerView}from"./TimelinePaintProfilerView.js";import{TimelineSelection}from"./TimelineSelection.js";import{BottomUpTimelineTreeView,CallTreeTimelineTreeView}from"./TimelineTreeView.js";import{TimelineDetailsContentHelper,TimelineUIUtils}from"./TimelineUIUtils.js";const UIStrings={summary:"Summary",bottomup:"Bottom-Up",callTree:"Call Tree",eventLog:"Event Log",layers:"Layers",paintProfiler:"Paint Profiler",rangeSS:"Range:  {PH1} – {PH2}"},str_=i18n.i18n.registerUIStrings("panels/timeline/TimelineDetailsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class TimelineDetailsView extends UI.Widget.VBox{detailsLinkifier;tabbedPane;defaultDetailsWidget;defaultDetailsContentElement;rangeDetailViews;model;#e;lazyPaintProfilerView;lazyLayersView;preferredTabId;selection;#i=null;#t=null;constructor(e){super(),this.element.classList.add("timeline-details"),this.detailsLinkifier=new Components.Linkifier.Linkifier,this.tabbedPane=new UI.TabbedPane.TabbedPane,this.tabbedPane.show(this.element),this.defaultDetailsWidget=new UI.Widget.VBox,this.defaultDetailsWidget.element.classList.add("timeline-details-view"),this.defaultDetailsContentElement=this.defaultDetailsWidget.element.createChild("div","timeline-details-view-body vbox"),this.appendTab(Tab.Details,i18nString(UIStrings.summary),this.defaultDetailsWidget),this.setPreferredTab(Tab.Details),this.rangeDetailViews=new Map;const i=new BottomUpTimelineTreeView;this.appendTab(Tab.BottomUp,i18nString(UIStrings.bottomup),i),this.rangeDetailViews.set(Tab.BottomUp,i);const t=new CallTreeTimelineTreeView;this.appendTab(Tab.CallTree,i18nString(UIStrings.callTree),t),this.rangeDetailViews.set(Tab.CallTree,t);const n=new EventsTimelineTreeView(e);this.appendTab(Tab.EventLog,i18nString(UIStrings.eventLog),n),this.rangeDetailViews.set(Tab.EventLog,n),this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected,this.tabSelected,this)}getDetailsContentElementForTest(){return this.defaultDetailsContentElement}async setModel(e,i,t){this.model!==e&&(this.model&&this.model.removeEventListener(Events.WindowChanged,this.onWindowChanged,this),this.model=e,this.model&&this.model.addEventListener(Events.WindowChanged,this.onWindowChanged,this)),this.#i=i,i&&(this.#t=TraceEngine.Extras.FilmStrip.fromTraceData(i)),this.#e=t,this.tabbedPane.closeTabs([Tab.PaintProfiler,Tab.LayerViewer],!1);for(const n of this.rangeDetailViews.values())n.setModelWithEvents(e,t,i);this.lazyPaintProfilerView=null,this.lazyLayersView=null,await this.setSelection(null)}setContent(e){const i=this.tabbedPane.otherTabs(Tab.Details);for(let e=0;e<i.length;++e)this.rangeDetailViews.has(i[e])||this.tabbedPane.closeTab(i[e]);this.defaultDetailsContentElement.removeChildren(),this.defaultDetailsContentElement.appendChild(e)}updateContents(){const e=this.rangeDetailViews.get(this.tabbedPane.selectedTabId||"");if(e){const i=this.model.window();e.updateContents(this.selection||TimelineSelection.fromRange(i.left,i.right))}}appendTab(e,i,t,n){this.tabbedPane.appendTab(e,i,t,void 0,void 0,n),this.preferredTabId!==this.tabbedPane.selectedTabId&&this.tabbedPane.selectTab(e)}headerElement(){return this.tabbedPane.headerElement()}setPreferredTab(e){this.preferredTabId=e}onWindowChanged(){this.selection||this.updateContentsFromWindow()}updateContentsFromWindow(){if(!this.model)return void this.setContent(UI.Fragment.html`<div/>`);const e=this.model.window();this.updateSelectedRangeStats(e.left,e.right),this.updateContents()}#n(e){if(!this.#t)return null;const i=TraceEngine.Types.Timing.MilliSeconds(e.idle?e.startTime:e.endTime),t=TraceEngine.Helpers.Timing.millisecondsToMicroseconds(i),n=TraceEngine.Extras.FilmStrip.frameClosestToTimestamp(this.#t,t);if(!n)return null;return TraceEngine.Helpers.Timing.microSecondsToMilliseconds(n.screenshotEvent.ts)-e.endTime<10?n:null}async setSelection(e){if(this.detailsLinkifier.reset(),this.selection=e,!this.selection)return void this.updateContentsFromWindow();const i=this.selection.object;if(TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(i)){const e=i,t=await TimelineUIUtils.buildSyntheticNetworkRequestDetails(e,this.model.timelineModel(),this.detailsLinkifier);this.setContent(t)}else if(TimelineSelection.isTraceEventSelection(i)){const e=i,t=await TimelineUIUtils.buildTraceEventDetails(e,this.model.timelineModel(),this.detailsLinkifier,!0,this.#i);this.appendDetailsTabsForTraceEventAndShowDetails(e,t)}else if(TimelineSelection.isFrameObject(i)){const e=i,t=this.#n(e);if(this.setContent(TimelineUIUtils.generateDetailsContentForFrame(e,this.#t,t)),e.layerTree){const i=this.layersView();i.showLayerTree(e.layerTree),this.tabbedPane.hasTab(Tab.LayerViewer)||this.appendTab(Tab.LayerViewer,i18nString(UIStrings.layers),i)}}else TimelineSelection.isRangeSelection(i)&&this.updateSelectedRangeStats(this.selection.startTime,this.selection.endTime);this.updateContents()}tabSelected(e){e.data.isUserGesture&&(this.setPreferredTab(e.data.tabId),this.updateContents())}layersView(){return this.lazyLayersView||(this.lazyLayersView=new TimelineLayersView(this.model.timelineModel(),this.showSnapshotInPaintProfiler.bind(this))),this.lazyLayersView}paintProfilerView(){return this.lazyPaintProfilerView||(this.lazyPaintProfilerView=new TimelinePaintProfilerView(this.model.frameModel())),this.lazyPaintProfilerView}showSnapshotInPaintProfiler(e){const i=this.paintProfilerView();i.setSnapshot(e),this.tabbedPane.hasTab(Tab.PaintProfiler)||this.appendTab(Tab.PaintProfiler,i18nString(UIStrings.paintProfiler),i,!0),this.tabbedPane.selectTab(Tab.PaintProfiler,!0)}appendDetailsTabsForTraceEventAndShowDetails(e,i){this.setContent(i),TraceEngine.Legacy.eventIsFromNewEngine(e)||e.name!==TimelineModel.TimelineModel.RecordType.Paint&&e.name!==TimelineModel.TimelineModel.RecordType.RasterTask||this.showEventInPaintProfiler(e)}showEventInPaintProfiler(e){const i=SDK.TargetManager.TargetManager.instance().models(SDK.PaintProfiler.PaintProfilerModel)[0];if(!i)return;const t=this.paintProfilerView();t.setEvent(i,e)&&(this.tabbedPane.hasTab(Tab.PaintProfiler)||this.appendTab(Tab.PaintProfiler,i18nString(UIStrings.paintProfiler),t))}updateSelectedRangeStats(e,i){if(!this.model||!this.#e)return;const t=TimelineUIUtils.statsForTimeRange(this.#e,e,i),n=e-this.model.timelineModel().minimumRecordTime(),s=i-this.model.timelineModel().minimumRecordTime(),a=new TimelineDetailsContentHelper(null,null);a.addSection(i18nString(UIStrings.rangeSS,{PH1:i18n.TimeUtilities.millisToString(n),PH2:i18n.TimeUtilities.millisToString(s)}));const l=TimelineUIUtils.generatePieChart(t);a.appendElementRow("",l),this.setContent(a.fragment)}}export var Tab;!function(e){e.Details="Details",e.EventLog="EventLog",e.CallTree="CallTree",e.BottomUp="BottomUp",e.PaintProfiler="PaintProfiler",e.LayerViewer="LayerViewer"}(Tab||(Tab={}));