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

Command line interface for rapid qg-minigame development

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 Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as Bindings from"../../models/bindings/bindings.js";import*as TimelineModel from"../../models/timeline_model/timeline_model.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{CountersGraph}from"./CountersGraph.js";import{Events as PerformanceModelEvents}from"./PerformanceModel.js";import{TimelineDetailsView}from"./TimelineDetailsView.js";import{TimelineRegExp}from"./TimelineFilters.js";import{Events as TimelineFlameChartDataProviderEvents,TimelineFlameChartDataProvider}from"./TimelineFlameChartDataProvider.js";import{TimelineFlameChartNetworkDataProvider}from"./TimelineFlameChartNetworkDataProvider.js";import{TimelineSelection}from"./TimelineSelection.js";import{AggregatedTimelineTreeView}from"./TimelineTreeView.js";import{TimelineUIUtils}from"./TimelineUIUtils.js";const UIStrings={sAtS:"{PH1} at {PH2}"},str_=i18n.i18n.registerUIStrings("panels/timeline/TimelineFlameChartView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class TimelineFlameChartView extends UI.Widget.VBox{delegate;model;searchResults;eventListeners;showMemoryGraphSetting;networkSplitWidget;mainDataProvider;mainFlameChart;networkFlameChartGroupExpansionSetting;networkDataProvider;networkFlameChart;networkPane;splitResizer;chartSplitWidget;countersView;detailsSplitWidget;detailsView;onMainEntrySelected;onNetworkEntrySelected;boundRefresh;#e;groupBySetting;searchableView;needsResizeToPreferredHeights;selectedSearchResult;searchRegex;#t;constructor(e){super(),this.element.classList.add("timeline-flamechart"),this.delegate=e,this.model=null,this.eventListeners=[],this.#t=null,this.showMemoryGraphSetting=Common.Settings.Settings.instance().createSetting("timelineShowMemory",!1),this.networkSplitWidget=new UI.SplitWidget.SplitWidget(!1,!1,"timelineFlamechartMainView",150),this.networkSplitWidget.sidebarElement().style.zIndex="120";const t=Common.Settings.Settings.instance().createSetting("timelineFlamechartMainViewGroupExpansion",{});this.mainDataProvider=new TimelineFlameChartDataProvider,this.mainDataProvider.addEventListener(TimelineFlameChartDataProviderEvents.DataChanged,(()=>this.mainFlameChart.scheduleUpdate())),this.mainFlameChart=new PerfUI.FlameChart.FlameChart(this.mainDataProvider,this,t),this.mainFlameChart.alwaysShowVerticalScroll(),this.mainFlameChart.enableRuler(!1),this.networkFlameChartGroupExpansionSetting=Common.Settings.Settings.instance().createSetting("timelineFlamechartNetworkViewGroupExpansion",{}),this.networkDataProvider=new TimelineFlameChartNetworkDataProvider,this.networkFlameChart=new PerfUI.FlameChart.FlameChart(this.networkDataProvider,this,this.networkFlameChartGroupExpansionSetting),this.networkFlameChart.alwaysShowVerticalScroll(),this.networkPane=new UI.Widget.VBox,this.networkPane.setMinimumSize(23,23),this.networkFlameChart.show(this.networkPane.element),this.splitResizer=this.networkPane.element.createChild("div","timeline-flamechart-resizer"),this.networkSplitWidget.hideDefaultResizer(!0),this.networkSplitWidget.installResizer(this.splitResizer),this.networkSplitWidget.setMainWidget(this.mainFlameChart),this.networkSplitWidget.setSidebarWidget(this.networkPane),this.chartSplitWidget=new UI.SplitWidget.SplitWidget(!1,!0,"timelineCountersSplitViewState"),this.countersView=new CountersGraph(this.delegate),this.chartSplitWidget.setMainWidget(this.networkSplitWidget),this.chartSplitWidget.setSidebarWidget(this.countersView),this.chartSplitWidget.hideDefaultResizer(),this.chartSplitWidget.installResizer(this.countersView.resizerElement()),this.updateCountersGraphToggle(),this.detailsSplitWidget=new UI.SplitWidget.SplitWidget(!1,!0,"timelinePanelDetailsSplitViewState"),this.detailsSplitWidget.element.classList.add("timeline-details-split"),this.detailsView=new TimelineDetailsView(e),this.detailsSplitWidget.installResizer(this.detailsView.headerElement()),this.detailsSplitWidget.setMainWidget(this.chartSplitWidget),this.detailsSplitWidget.setSidebarWidget(this.detailsView),this.detailsSplitWidget.show(this.element),this.onMainEntrySelected=this.onEntrySelected.bind(this,this.mainDataProvider),this.onNetworkEntrySelected=this.onEntrySelected.bind(this,this.networkDataProvider),this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected,this.onMainEntrySelected,this),this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryInvoked,this.onMainEntrySelected,this),this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected,this.onNetworkEntrySelected,this),this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryInvoked,this.onNetworkEntrySelected,this),this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryHighlighted,this.onEntryHighlighted,this),this.boundRefresh=this.refresh.bind(this),this.#e=null,this.mainDataProvider.setEventColorMapping(TimelineUIUtils.eventColor),this.groupBySetting=Common.Settings.Settings.instance().createSetting("timelineTreeGroupBy",AggregatedTimelineTreeView.GroupBy.None),this.groupBySetting.addChangeListener(this.updateColorMapper,this),this.updateColorMapper()}isNetworkTrackShownForTests(){return this.networkSplitWidget.showMode()!==UI.SplitWidget.ShowMode.OnlyMain}updateColorMapper(){this.model&&(this.mainDataProvider.setEventColorMapping(TimelineUIUtils.eventColor),this.mainFlameChart.update())}onWindowChanged(e){const{window:t,animate:i}=e.data;this.mainFlameChart.setWindowTimes(t.left,t.right,i),this.networkFlameChart.setWindowTimes(t.left,t.right,i),this.networkDataProvider.setWindowTimes(t.left,t.right),this.updateSearchResults(!1,!1)}windowChanged(e,t,i){this.model&&this.model.setWindow({left:e,right:t},i)}updateRangeSelection(e,t){this.delegate.select(TimelineSelection.fromRange(e,t))}updateSelectedGroup(e,t){e===this.mainFlameChart&&(this.#e=t?this.mainDataProvider.groupTreeEvents(t):null,this.updateTrack())}setModel(e,t){if(e!==this.model){if(this.#t=t,Common.EventTarget.removeEventListeners(this.eventListeners),this.model=e,this.#e=null,this.mainDataProvider.setModel(this.model,t),this.networkDataProvider.setModel(t),this.model){this.eventListeners=[this.model.addEventListener(PerformanceModelEvents.WindowChanged,this.onWindowChanged,this)];const e=this.model.window();this.mainFlameChart.setWindowTimes(e.left,e.right),this.networkFlameChart.setWindowTimes(e.left,e.right),this.networkDataProvider.setWindowTimes(e.left,e.right),this.updateSearchResults(!1,!1)}this.updateColorMapper(),this.updateTrack(),this.refresh()}}updateTrack(){this.countersView.setModel(this.model,this.#e),this.detailsView.setModel(this.model,this.#t,this.#e)}refresh(){this.networkDataProvider.isEmpty()?(this.mainFlameChart.enableRuler(!0),this.networkSplitWidget.hideSidebar()):(this.mainFlameChart.enableRuler(!1),this.networkSplitWidget.showBoth(),this.resizeToPreferredHeights()),this.mainFlameChart.reset(),this.networkFlameChart.reset(),this.updateSearchResults(!1,!1)}onEntryHighlighted(e){SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();const t=e.data,i=this.mainDataProvider.eventByIndex(t);if(!i)return;const s=this.model&&this.model.timelineModel().targetByEvent(i);if(!s)return;let r;if(i instanceof TraceEngine.Legacy.Event){r=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(i).backendNodeIds}else if(TraceEngine.Types.TraceEvents.isTraceEventLayoutShift(i)){r=(i.args.data?.impacted_nodes??[]).map((e=>e.node_id))}if(r)for(let e=0;e<r.length;++e)new SDK.DOMModel.DeferredDOMNode(s,r[e]).highlight()}highlightEvent(e){const t=e?this.mainDataProvider.entryIndexForSelection(TimelineSelection.fromTraceEvent(e)):-1;t>=0?this.mainFlameChart.highlightEntry(t):this.mainFlameChart.hideHighlight()}willHide(){this.networkFlameChartGroupExpansionSetting.removeChangeListener(this.resizeToPreferredHeights,this),this.showMemoryGraphSetting.removeChangeListener(this.updateCountersGraphToggle,this),Bindings.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.boundRefresh)}wasShown(){this.networkFlameChartGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights,this),this.showMemoryGraphSetting.addChangeListener(this.updateCountersGraphToggle,this),Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.boundRefresh),this.needsResizeToPreferredHeights&&this.resizeToPreferredHeights(),this.mainFlameChart.scheduleUpdate(),this.networkFlameChart.scheduleUpdate()}updateCountersGraphToggle(){this.showMemoryGraphSetting.get()?this.chartSplitWidget.showBoth():this.chartSplitWidget.hideSidebar()}setSelection(e){let t=this.mainDataProvider.entryIndexForSelection(e);this.mainFlameChart.setSelectedEntry(t),t=this.networkDataProvider.entryIndexForSelection(e),this.networkFlameChart.setSelectedEntry(t),this.detailsView&&this.detailsView.setSelection(e)}onEntrySelected(e,t){const i=t.data;Root.Runtime.experiments.isEnabled("timelineEventInitiators")&&e===this.mainDataProvider&&this.mainDataProvider.buildFlowForInitiator(i)&&this.mainFlameChart.scheduleUpdate(),this.delegate.select(e.createSelection(i))}resizeToPreferredHeights(){this.isShowing()?(this.needsResizeToPreferredHeights=!1,this.networkPane.element.classList.toggle("timeline-network-resizer-disabled",!this.networkDataProvider.isExpanded()),this.networkSplitWidget.setSidebarSize(this.networkDataProvider.preferredHeight()+this.splitResizer.clientHeight+PerfUI.FlameChart.HeaderHeight+2)):this.needsResizeToPreferredHeights=!0}setSearchableView(e){this.searchableView=e}jumpToNextSearchResult(){if(!this.searchResults||!this.searchResults.length)return;const e=void 0!==this.selectedSearchResult?this.searchResults.indexOf(this.selectedSearchResult):-1;this.selectSearchResult(Platform.NumberUtilities.mod(e+1,this.searchResults.length))}jumpToPreviousSearchResult(){if(!this.searchResults||!this.searchResults.length)return;const e=void 0!==this.selectedSearchResult?this.searchResults.indexOf(this.selectedSearchResult):0;this.selectSearchResult(Platform.NumberUtilities.mod(e-1,this.searchResults.length))}supportsCaseSensitiveSearch(){return!0}supportsRegexSearch(){return!0}selectSearchResult(e){this.searchableView.updateCurrentMatchIndex(e),this.searchResults&&(this.selectedSearchResult=this.searchResults[e],this.delegate.select(this.mainDataProvider.createSelection(this.selectedSearchResult)))}updateSearchResults(e,t){const i=this.selectedSearchResult;if(delete this.selectedSearchResult,this.searchResults=[],!this.searchRegex||!this.model)return;const s=new TimelineRegExp(this.searchRegex),r=this.model.window();if(this.searchResults=this.mainDataProvider.search(r.left,r.right,s),this.searchableView.updateSearchMatchesCount(this.searchResults.length),!e||!this.searchResults.length)return;let a=this.searchResults.indexOf(i);-1===a&&(a=t?this.searchResults.length-1:0),this.selectSearchResult(a)}getSearchResults(){return this.searchResults}onSearchCanceled(){void 0!==this.selectedSearchResult&&this.delegate.select(null),delete this.searchResults,delete this.selectedSearchResult,delete this.searchRegex}performSearch(e,t,i){this.searchRegex=e.toSearchRegex().regex,this.updateSearchResults(t,i)}}export class Selection{timelineSelection;entryIndex;constructor(e,t){this.timelineSelection=e,this.entryIndex=t}}export const FlameChartStyle={textColor:"#333"};export class TimelineFlameChartMarker{startTimeInternal;startOffset;style;constructor(e,t,i){this.startTimeInternal=e,this.startOffset=t,this.style=i}startTime(){return this.startTimeInternal}color(){return this.style.color}title(){if(this.style.lowPriority)return null;const e=i18n.TimeUtilities.millisToString(this.startOffset);return i18nString(UIStrings.sAtS,{PH1:this.style.title,PH2:e})}draw(e,t,i,s){this.style.lowPriority&&s<4||(e.save(),this.style.tall&&(e.strokeStyle=this.style.color,e.lineWidth=this.style.lineWidth,e.translate(this.style.lineWidth<1||1&this.style.lineWidth?.5:0,.5),e.beginPath(),e.moveTo(t,0),e.setLineDash(this.style.dashStyle),e.lineTo(t,e.canvas.height),e.stroke()),e.restore())}}export var ColorBy;!function(e){e.URL="URL"}(ColorBy||(ColorBy={}));