@yuebai008/cli/dist/cli-server/client/front_end/panels/network/NetworkOverview.js

Command line interface for rapid qg-minigame development

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{NetworkLogView}from"./NetworkLogView.js";import{NetworkTimeBoundary}from"./NetworkTimeCalculator.js";import{RequestTimeRangeNames,RequestTimingView}from"./RequestTimingView.js";const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOverviewBase{selectedFilmStripTime;numBands;highlightedRequest;loadEvents;domContentLoadedEvents;nextBand;bandMap;requestsList;requestsSet;span;lastBoundary;constructor(){super(),this.selectedFilmStripTime=-1,this.element.classList.add("network-overview"),this.numBands=1,this.highlightedRequest=null,SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,SDK.ResourceTreeModel.Events.Load,this.loadEventFired,this,{scoped:!0}),SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,SDK.ResourceTreeModel.Events.DOMContentLoaded,this.domContentLoadedEventFired,this,{scoped:!0}),this.reset()}setHighlightedRequest(e){this.highlightedRequest=e,this.scheduleUpdate()}selectFilmStripFrame(e){this.selectedFilmStripTime=e,this.scheduleUpdate()}clearFilmStripFrame(){this.selectedFilmStripTime=-1,this.scheduleUpdate()}loadEventFired(e){const t=e.data.loadTime;t&&this.loadEvents.push(1e3*t),this.scheduleUpdate()}domContentLoadedEventFired(e){const{data:t}=e;t&&this.domContentLoadedEvents.push(1e3*t),this.scheduleUpdate()}bandId(e){if(!e||"0"===e)return-1;if(this.bandMap.has(e))return this.bandMap.get(e);const t=this.nextBand++;return this.bandMap.set(e,t),t}updateRequest(e){this.requestsSet.has(e)||(this.requestsSet.add(e),this.requestsList.push(e)),this.scheduleUpdate()}wasShown(){this.onResize()}calculator(){return super.calculator()}onResize(){const e=this.element.offsetWidth,t=this.element.offsetHeight;this.calculator().setDisplayWidth(e),this.resetCanvas();const i=(t-_padding-1)/_bandHeight-1|0;this.numBands=i>0?i:1,this.scheduleUpdate()}reset(){this.span=1,this.lastBoundary=null,this.nextBand=0,this.bandMap=new Map,this.requestsList=[],this.requestsSet=new Set,this.loadEvents=[],this.domContentLoadedEvents=[],this.resetCanvas()}scheduleUpdate(){this.isShowing()&&coordinator.write("NetworkOverview.render",this.update.bind(this))}update(){const e=this.calculator(),t=new NetworkTimeBoundary(e.minimumBoundary(),e.maximumBoundary());if(!this.lastBoundary||!t.equals(this.lastBoundary)){const t=e.boundarySpan();for(;this.span<t;)this.span*=1.25;e.setBounds(e.minimumBoundary(),TraceEngine.Types.Timing.MilliSeconds(e.minimumBoundary()+this.span)),this.lastBoundary=new NetworkTimeBoundary(e.minimumBoundary(),e.maximumBoundary())}const i=this.context(),n=new Map,o=_padding;function s(t){const s=n.get(t);if(!s)return;const r=s.length;i.beginPath(),i.strokeStyle=ThemeSupport.ThemeSupport.instance().getComputedValue("--color-background-opacity-80"),i.lineWidth=BORDER_WIDTH,i.fillStyle=ThemeSupport.ThemeSupport.instance().getComputedValue(RequestTimeRangeNameToColor[t]);for(let t=0;t<r;){const n=s[t++]*_bandHeight+o,r=s[t++];let a=s[t++];a===Number.MAX_VALUE&&(a=e.maximumBoundary());const d=e.computePosition(TraceEngine.Types.Timing.MilliSeconds(r)),m=e.computePosition(TraceEngine.Types.Timing.MilliSeconds(a))+1;i.fillRect(d,n,m-d,_bandHeight),i.strokeRect(d,n,m-d,_bandHeight)}}function r(e,t,i,o){let s=n.get(e);s||(s=[],n.set(e,s)),s.push(t,i,o)}const a=this.requestsList,d=a.length;for(let e=0;e<d;++e){const t=a[e],i=this.bandId(t.connectionId),n=-1===i?0:i%this.numBands+1,o=RequestTimingView.calculateRequestTimeRanges(t,this.calculator().minimumBoundary());for(let e=0;e<o.length;++e){const t=o[e].name;-1===i&&t!==RequestTimeRangeNames.Total||r(t,n,1e3*o[e].start,1e3*o[e].end)}}if(i.clearRect(0,0,this.width(),this.height()),i.save(),i.scale(window.devicePixelRatio,window.devicePixelRatio),i.lineWidth=2,s(RequestTimeRangeNames.Total),s(RequestTimeRangeNames.Blocking),s(RequestTimeRangeNames.Connecting),s(RequestTimeRangeNames.ServiceWorker),s(RequestTimeRangeNames.ServiceWorkerPreparation),s(RequestTimeRangeNames.ServiceWorkerRespondWith),s(RequestTimeRangeNames.Push),s(RequestTimeRangeNames.Proxy),s(RequestTimeRangeNames.DNS),s(RequestTimeRangeNames.SSL),s(RequestTimeRangeNames.Sending),s(RequestTimeRangeNames.Waiting),s(RequestTimeRangeNames.Receiving),this.highlightedRequest){const t=5,n=2,s=this.highlightedRequest,r=this.bandId(s.connectionId),a=(-1===r?0:r%this.numBands+1)*_bandHeight+o,d=RequestTimingView.calculateRequestTimeRanges(s,this.calculator().minimumBoundary());i.fillStyle=ThemeSupport.ThemeSupport.instance().getComputedValue("--legacy-selection-bg-color");const m=TraceEngine.Types.Timing.MilliSeconds(1e3*d[0].start),u=TraceEngine.Types.Timing.MilliSeconds(1e3*d[0].end);i.fillRect(e.computePosition(m)-n,a-t/2-n,e.computePosition(u)-e.computePosition(m)+1+2*n,t*n);for(let n=0;n<d.length;++n){const o=d[n].name;if(-1!==r||o===RequestTimeRangeNames.Total){i.beginPath(),i.strokeStyle=ThemeSupport.ThemeSupport.instance().getComputedValue(RequestTimeRangeNameToColor[o]),i.lineWidth=t;const s=TraceEngine.Types.Timing.MilliSeconds(1e3*d[n].start),r=TraceEngine.Types.Timing.MilliSeconds(1e3*d[n].end);i.moveTo(e.computePosition(s)-0,a),i.lineTo(e.computePosition(r)+1,a),i.stroke()}}}const m=this.element.offsetHeight;i.lineWidth=1,i.beginPath(),i.strokeStyle=ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getDCLEventColor());for(let t=this.domContentLoadedEvents.length-1;t>=0;--t){const n=e.computePosition(TraceEngine.Types.Timing.MilliSeconds(this.domContentLoadedEvents[t])),o=Math.round(n)+.5;i.moveTo(o,0),i.lineTo(o,m)}i.stroke(),i.beginPath(),i.strokeStyle=ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getLoadEventColor());for(let t=this.loadEvents.length-1;t>=0;--t){const n=e.computePosition(TraceEngine.Types.Timing.MilliSeconds(this.loadEvents[t])),o=Math.round(n)+.5;i.moveTo(o,0),i.lineTo(o,m)}if(i.stroke(),-1!==this.selectedFilmStripTime){i.lineWidth=2,i.beginPath(),i.strokeStyle=ThemeSupport.ThemeSupport.instance().getComputedValue("--network-frame-divider-color");const t=TraceEngine.Types.Timing.MilliSeconds(this.selectedFilmStripTime),n=Math.round(e.computePosition(t));i.moveTo(n,0),i.lineTo(n,m),i.stroke()}i.restore()}}export const RequestTimeRangeNameToColor={[RequestTimeRangeNames.Total]:"--override-network-overview-total",[RequestTimeRangeNames.Blocking]:"--override-network-overview-blocking",[RequestTimeRangeNames.Connecting]:"--override-network-overview-connecting",[RequestTimeRangeNames.ServiceWorker]:"--override-network-overview-service-worker",[RequestTimeRangeNames.ServiceWorkerPreparation]:"--override-network-overview-service-worker",[RequestTimeRangeNames.ServiceWorkerRespondWith]:"--override-network-overview-service-worker-respond-with",[RequestTimeRangeNames.Push]:"--override-network-overview-push",[RequestTimeRangeNames.Proxy]:"--override-network-overview-proxy",[RequestTimeRangeNames.DNS]:"--override-network-overview-dns",[RequestTimeRangeNames.SSL]:"--override-network-overview-ssl",[RequestTimeRangeNames.Sending]:"--override-network-overview-sending",[RequestTimeRangeNames.Waiting]:"--override-network-overview-waiting",[RequestTimeRangeNames.Receiving]:"--override-network-overview-receiving",[RequestTimeRangeNames.Queueing]:"--override-network-overview-queueing"};export const _bandHeight=3;export const _padding=5;const BORDER_WIDTH=1;