@browserless.io/browserless 2.2.0-beta-6 → 2.2.0

package/static/devtools/perf_ui/perf_ui.js

@@ -0,0 +1,152 @@
+import{Color as e,SegmentedRange as t,Settings as i,ObjectWrapper as s,Throttler as r}from"../common/common.js";import{NumberUtilities as n,ArrayUtilities as o}from"../platform/platform.js";import{Utils as a,Widget as l,ARIAUtils as h,UIUtils as d,KeyboardShortcut as c,Tooltip as _,Fragment as m,Dialog as u,GlassPane as g}from"../ui/ui.js";import{Platform as f,InspectorFrontendHost as p}from"../host/host.js";import{i18n as v}from"../i18n/i18n.js";import{Runtime as w}from"../root/root.js";import{ThemeSupport as E}from"../theme_support/theme_support.js";import{SDKModel as y,HeapProfilerModel as T,DebuggerModel as S,ResourceTreeModel as b}from"../sdk/sdk.js";import{LiveLocation as x,DebuggerWorkspaceBinding as L}from"../bindings/bindings.js";import{Workspace as C}from"../workspace/workspace.js";import*as P from"../third_party/lit-html/lit-html.js";const D=new Map;class R{constructor(){this.element=document.createElement("div"),a.appendStyle(this.element,"perf_ui/timelineGrid.css",{enableLegacyPatching:!0}),this._dividersElement=this.element.createChild("div","resources-dividers"),this._gridHeaderElement=document.createElement("div"),this._gridHeaderElement.classList.add("timeline-grid-header"),this._eventDividersElement=this._gridHeaderElement.createChild("div","resources-event-dividers"),this._dividersLabelBarElement=this._gridHeaderElement.createChild("div","resources-dividers-label-bar"),this.element.appendChild(this._gridHeaderElement)}static calculateGridOffsets(e,t){const i=e.computePosition(e.maximumBoundary());let s=i/64,r=e.boundarySpan()/s;const n=i/e.boundarySpan(),o=Math.ceil(Math.log(r)/Math.LN10);r=Math.pow(10,o),r*n>=320&&(r/=5),r*n>=128&&(r/=2);const a=Math.ceil((e.minimumBoundary()-e.zeroTime())/r)*r+e.zeroTime();let l=e.maximumBoundary();l+=64/n,s=Math.ceil((l-a)/r),r||(s=0);const h=[];for(let i=0;i<s;++i){const s=a+r*i;e.computePosition(s)<(t||0)||h.push({position:Math.floor(e.computePosition(s)),time:s})}return{offsets:h,precision:Math.max(0,-Math.floor(Math.log(1.01*r)/Math.LN10))}}static drawCanvasGrid(e,t){e.save(),e.scale(window.devicePixelRatio,window.devicePixelRatio);const i=Math.floor(e.canvas.height/window.devicePixelRatio);e.strokeStyle=E.instance().patchColorText("rgba(0, 0, 0, 0.1)",E.ColorUsage.Foreground),e.lineWidth=1,e.translate(.5,.5),e.beginPath();for(const s of t.offsets)e.moveTo(s.position,0),e.lineTo(s.position,i);e.stroke(),e.restore()}static drawCanvasHeaders(e,t,i,s,r,n){e.save(),e.scale(window.devicePixelRatio,window.devicePixelRatio);const o=Math.ceil(e.canvas.width/window.devicePixelRatio);e.beginPath(),e.fillStyle=E.instance().patchColorText("rgba(255, 255, 255, 0.5)",E.ColorUsage.Background),e.fillRect(0,0,o,r),e.fillStyle=E.instance().patchColorText("#333",E.ColorUsage.Foreground),e.textBaseline="hanging",e.font="11px "+f.fontFamily();for(const r of t.offsets){const t=i(r.time),o=e.measureText(t).width,a=r.position-o-4;(!n||n<a)&&e.fillText(t,a,s)}e.restore()}get dividersElement(){return this._dividersElement}get dividersLabelBarElement(){return this._dividersLabelBarElement}removeDividers(){this._dividersElement.removeChildren(),this._dividersLabelBarElement.removeChildren()}updateDividers(e,t){const i=R.calculateGridOffsets(e,t),s=i.offsets,r=i.precision,n=this._dividersElement.clientWidth;let o=this._dividersElement.firstChild,a=this._dividersLabelBarElement.firstChild;for(let t=0;t<s.length;++t){if(!o){o=document.createElement("div"),o.className="resources-divider",this._dividersElement.appendChild(o),a=document.createElement("div"),a.className="resources-divider";const e=document.createElement("div");e.className="resources-divider-label",D.set(a,e),a.appendChild(e),this._dividersLabelBarElement.appendChild(a)}const i=s[t].time,l=s[t].position;if(a){const t=D.get(a);t&&(t.textContent=e.formatValue(i,r))}const h=100*l/n;o.style.left=h+"%",a&&(a.style.left=h+"%"),o=o.nextSibling,a&&(a=a.nextSibling)}for(;o;){const e=o.nextSibling;if(this._dividersElement.removeChild(o),!e)break;o=e}for(;a;){const e=a.nextSibling;if(this._dividersLabelBarElement.removeChild(a),!e)break;a=e}return!0}addEventDivider(e){this._eventDividersElement.appendChild(e)}addEventDividers(e){this._gridHeaderElement.removeChild(this._eventDividersElement);for(const t of e)this._eventDividersElement.appendChild(t);this._gridHeaderElement.appendChild(this._eventDividersElement)}removeEventDividers(){this._eventDividersElement.removeChildren()}hideEventDividers(){this._eventDividersElement.classList.add("hidden")}showEventDividers(){this._eventDividersElement.classList.remove("hidden")}hideDividers(){this._dividersElement.classList.add("hidden")}showDividers(){this._dividersElement.classList.remove("hidden")}setScrollTop(e){this._dividersLabelBarElement.style.top=e+"px",this._eventDividersElement.style.top=e+"px"}}var k=Object.freeze({__proto__:null,TimelineGrid:R,Calculator:class{computePosition(e){throw new Error("Not implemented")}formatValue(e,t){throw new Error("Not implemented")}minimumBoundary(){throw new Error("Not implemented")}zeroTime(){throw new Error("Not implemented")}maximumBoundary(){throw new Error("Not implemented")}boundarySpan(){throw new Error("Not implemented")}},DividersData:undefined});const M={flameChart:"Flame Chart",sHovered:"{PH1} hovered",sSelected:"{PH1} selected",sExpanded:"{PH1} expanded",sCollapsed:"{PH1} collapsed"},G=v.registerUIStrings("perf_ui/FlameChart.js",M),F=v.getLocalizedString.bind(void 0,G);class B extends l.VBox{constructor(e,t,i){super(!0),this.registerRequiredCSS("perf_ui/flameChart.css",{enableLegacyPatching:!0}),this.contentElement.classList.add("flame-chart-main-pane"),this._groupExpansionSetting=i,this._groupExpansionState=i&&i.get()||{},this._flameChartDelegate=t,this._useWebGL=w.experiments.isEnabled("timelineWebGL"),this._chartViewport=new H(this),this._chartViewport.show(this.contentElement),this._dataProvider=e,this._candyStripeCanvas=document.createElement("canvas"),this._createCandyStripePattern(),this._viewportElement=this._chartViewport.viewportElement,this._useWebGL&&(this._canvasGL=this._viewportElement.createChild("canvas","fill"),this._initWebGL()),this._canvas=this._viewportElement.createChild("canvas","fill"),this._canvas.tabIndex=0,h.setAccessibleName(this._canvas,F(M.flameChart)),h.markAsTree(this._canvas),this.setDefaultFocusedElement(this._canvas),this._canvas.classList.add("flame-chart-canvas"),this._canvas.addEventListener("mousemove",this._onMouseMove.bind(this),!1),this._canvas.addEventListener("mouseout",this._onMouseOut.bind(this),!1),this._canvas.addEventListener("click",this._onClick.bind(this),!1),this._canvas.addEventListener("keydown",this._onKeyDown.bind(this),!1),this._entryInfo=this._viewportElement.createChild("div","flame-chart-entry-info"),this._markerHighlighElement=this._viewportElement.createChild("div","flame-chart-marker-highlight-element"),this._highlightElement=this._viewportElement.createChild("div","flame-chart-highlight-element"),this._selectedElement=this._viewportElement.createChild("div","flame-chart-selected-element"),this._canvas.addEventListener("focus",(()=>{this._selectedElement.classList.remove("flame-chart-unfocused-selected-element"),this.dispatchEventToListeners(z.CanvasFocused)}),!1),this._canvas.addEventListener("blur",(()=>{this._selectedElement.classList.add("flame-chart-unfocused-selected-element")}),!1),d.installDragHandle(this._viewportElement,this._startDragging.bind(this),this._dragging.bind(this),this._endDragging.bind(this),null),this._rulerEnabled=!0,this._rangeSelectionStart=0,this._rangeSelectionEnd=0,this._barHeight=17,this._textBaseline=5,this._textPadding=5,this._markerRadius=6,this._chartViewport.setWindowTimes(e.minimumBoundary(),e.minimumBoundary()+e.totalTime()),this._headerLeftPadding=6,this._arrowSide=8,this._expansionArrowIndent=this._headerLeftPadding+this._arrowSide/2,this._headerLabelXPadding=3,this._headerLabelYPadding=2,this._highlightedMarkerIndex=-1,this._highlightedEntryIndex=-1,this._selectedEntryIndex=-1,this._rawTimelineDataLength=0,this._textWidth=new Map,this._markerPositions=new Map,this._lastMouseOffsetX=0,this._selectedGroup=-1,this._keyboardFocusedGroup=-1,this._selectedGroupBackroundColor=E.instance().patchColorText(W.SelectedGroupBackground,E.ColorUsage.Background),this._selectedGroupBorderColor=E.instance().patchColorText(W.SelectedGroupBorder,E.ColorUsage.Background),this._offsetWidth,this._offsetHeight,this._canvasGL,this._dragStartX,this._dragStartY,this._lastMouseOffsetX,this._lastMouseOffsetY,this._minimumBoundary}willHide(){this.hideHighlight()}setBarHeight(e){this._barHeight=e}setTextBaseline(e){this._textBaseline=e}setTextPadding(e){this._textPadding=e}enableRuler(e){this._rulerEnabled=e}alwaysShowVerticalScroll(){this._chartViewport.alwaysShowVerticalScroll()}disableRangeSelection(){this._chartViewport.disableRangeSelection()}highlightEntry(e){this._highlightedEntryIndex!==e&&this._dataProvider.entryColor(e)&&(this._highlightedEntryIndex=e,this._updateElementPosition(this._highlightElement,this._highlightedEntryIndex),this.dispatchEventToListeners(z.EntryHighlighted,e))}hideHighlight(){this._entryInfo.removeChildren(),this._highlightedEntryIndex=-1,this._updateElementPosition(this._highlightElement,this._highlightedEntryIndex),this.dispatchEventToListeners(z.EntryHighlighted,-1)}_createCandyStripePattern(){const e=17;this._candyStripeCanvas.width=e,this._candyStripeCanvas.height=e;const t=this._candyStripeCanvas.getContext("2d");if(t){t.translate(8.5,8.5),t.rotate(.25*Math.PI),t.translate(-8.5,-8.5),t.fillStyle="rgba(255, 0, 0, 0.4)";for(let e=-17;e<34;e+=3)t.fillRect(e,-17,1,51)}}_resetCanvas(){const e=window.devicePixelRatio,t=Math.round(this._offsetWidth*e),i=Math.round(this._offsetHeight*e);this._canvas.width=t,this._canvas.height=i,this._canvas.style.width=t/e+"px",this._canvas.style.height=i/e+"px",this._useWebGL&&(this._canvasGL.width=t,this._canvasGL.height=i,this._canvasGL.style.width=t/e+"px",this._canvasGL.style.height=i/e+"px")}windowChanged(e,t,i){this._flameChartDelegate.windowChanged(e,t,i)}updateRangeSelection(e,t){this._flameChartDelegate.updateRangeSelection(e,t)}setSize(e,t){this._offsetWidth=e,this._offsetHeight=t}_startDragging(e){return this.hideHighlight(),this._maxDragOffset=0,this._dragStartX=e.pageX,this._dragStartY=e.pageY,!0}_dragging(e){const t=e.pageX-this._dragStartX,i=e.pageY-this._dragStartY;this._maxDragOffset=Math.max(this._maxDragOffset,Math.sqrt(t*t+i*i))}_endDragging(e){this._updateHighlight()}_timelineData(){if(!this._dataProvider)return null;const e=this._dataProvider.timelineData();return(e!==this._rawTimelineData||e&&e.entryStartTimes.length!==this._rawTimelineDataLength)&&this._processTimelineData(e),this._rawTimelineData||null}_revealEntry(e){const t=this._timelineData();if(!t)return;const i=this._chartViewport.windowLeftTime(),s=this._chartViewport.windowRightTime(),r=t.entryStartTimes[e],n=t.entryTotalTimes[e],o=r+n;let a=Math.min(n,s-i);const l=t.entryLevels[e];this._chartViewport.setScrollOffset(this._levelToOffset(l),this._levelHeight(l));const h=(s-i)/this._offsetWidth;if(a=Math.max(a,30*h),i>o){const e=i-o+a;this.windowChanged(i-e,s-e,!0)}else if(s<r){const e=r-s+a;this.windowChanged(i+e,s+e,!0)}}setWindowTimes(e,t,i){this._chartViewport.setWindowTimes(e,t,i),this._updateHighlight()}_onMouseMove(e){const t=e;if(this._lastMouseOffsetX=t.offsetX,this._lastMouseOffsetY=t.offsetY,this._enabled()&&!this._chartViewport.isDragging())return this._coordinatesToGroupIndex(t.offsetX,t.offsetY,!0)>=0?(this.hideHighlight(),void(this._viewportElement.style.cursor="pointer")):void this._updateHighlight()}_updateHighlight(){const e=this._coordinatesToEntryIndex(this._lastMouseOffsetX,this._lastMouseOffsetY);if(-1!==e)this._chartViewport.isDragging()||(this._updatePopover(e),this._viewportElement.style.cursor=this._dataProvider.canJumpToEntry(e)?"pointer":"default",this.highlightEntry(e));else{this.hideHighlight();const e=this._coordinatesToGroupIndex(this._lastMouseOffsetX,this._lastMouseOffsetY,!1);e>=0&&this._rawTimelineData&&this._rawTimelineData.groups&&this._rawTimelineData.groups[e].selectable?this._viewportElement.style.cursor="pointer":this._viewportElement.style.cursor="default"}}_onMouseOut(){this._lastMouseOffsetX=-1,this._lastMouseOffsetY=-1,this.hideHighlight()}_updatePopover(e){if(e===this._highlightedEntryIndex)return void this._updatePopoverOffset();this._entryInfo.removeChildren();const t=this._dataProvider.prepareHighlightedEntryInfo(e);t&&(this._entryInfo.appendChild(t),this._updatePopoverOffset())}_updatePopoverOffset(){const e=this._lastMouseOffsetX,t=this._lastMouseOffsetY,i=this._entryInfo.parentElement?this._entryInfo.parentElement.clientWidth:0,s=this._entryInfo.parentElement?this._entryInfo.parentElement.clientHeight:0,r=this._entryInfo.clientWidth,o=this._entryInfo.clientHeight;let a,l;for(let h=0;h<4;++h){const d=2&h?-10-r:10,c=1&h?-6-o:6;if(a=n.clamp(e+d,0,i-r),l=n.clamp(t+c,0,s-o),a>=e||e>=a+r||l>=t||t>=l+o)break}this._entryInfo.style.left=a+"px",this._entryInfo.style.top=l+"px"}_onClick(e){const t=e;this.focus();if(this._maxDragOffset>5)return;this._selectGroup(this._coordinatesToGroupIndex(t.offsetX,t.offsetY,!1)),this._toggleGroupExpand(this._coordinatesToGroupIndex(t.offsetX,t.offsetY,!0));const i=this._timelineData();if(t.shiftKey&&-1!==this._highlightedEntryIndex&&i){const e=i.entryStartTimes[this._highlightedEntryIndex],t=e+i.entryTotalTimes[this._highlightedEntryIndex];this._chartViewport.setRangeSelection(e,t)}else this._chartViewport.onClick(t),this.dispatchEventToListeners(z.EntryInvoked,this._highlightedEntryIndex)}_selectGroup(e){if(e<0||this._selectedGroup===e)return;if(!this._rawTimelineData)return;const t=this._rawTimelineData.groups;if(!t)return;this._keyboardFocusedGroup=e,this._scrollGroupIntoView(e);const i=t[e].name;t[e].selectable?(this._selectedGroup=e,this._flameChartDelegate.updateSelectedGroup(this,t[e]),this._resetCanvas(),this._draw(),h.alert(F(M.sSelected,{PH1:i}),this._canvas)):(this._deselectAllGroups(),h.alert(F(M.sHovered,{PH1:i}),this._canvas))}_deselectAllGroups(){this._selectedGroup=-1,this._flameChartDelegate.updateSelectedGroup(this,null),this._resetCanvas(),this._draw()}_deselectAllEntries(){this._selectedEntryIndex=-1,this._resetCanvas(),this._draw()}_isGroupFocused(e){return e===this._selectedGroup||e===this._keyboardFocusedGroup}_scrollGroupIntoView(e){if(e<0)return;if(!this._rawTimelineData)return;const t=this._rawTimelineData.groups,i=this._groupOffsets;if(!i||!t)return;const s=i[e];let r=i[e+1];e===t.length-1&&(r+=t[e].style.padding);const n=0===e?0:s,o=Math.min(r-n,this._chartViewport.chartHeight());this._chartViewport.setScrollOffset(n,o)}_toggleGroupExpand(e){e<0||!this._isGroupCollapsible(e)||this._rawTimelineData&&this._rawTimelineData.groups&&this._expandGroup(e,!this._rawTimelineData.groups[e].expanded)}_expandGroup(e,t=!0,i=!1){if(e<0||!this._isGroupCollapsible(e))return;if(!this._rawTimelineData)return;const s=this._rawTimelineData.groups;if(!s)return;const r=s[e];if(r.expanded=t,this._groupExpansionState[r.name]=r.expanded,this._groupExpansionSetting&&this._groupExpansionSetting.set(this._groupExpansionState),this._updateLevelPositions(),this._updateHighlight(),!r.expanded){const t=this._timelineData();if(t){const i=t.entryLevels[this._selectedEntryIndex];this._selectedEntryIndex>=0&&i>=r.startLevel&&(e>=s.length-1||s[e+1].startLevel>i)&&(this._selectedEntryIndex=-1)}}if(this._updateHeight(),this._resetCanvas(),this._draw(),this._scrollGroupIntoView(e),!i){const t=s[e].name,i=r.expanded?F(M.sExpanded,{PH1:t}):F(M.sCollapsed,{PH1:t});h.alert(i,this._canvas)}}_onKeyDown(e){if(!c.KeyboardShortcut.hasNoModifiers(e)||!this._timelineData())return;!this._handleSelectionNavigation(e)&&this._rawTimelineData&&this._rawTimelineData.groups&&this._handleKeyboardGroupNavigation(e)}bindCanvasEvent(e,t){this._canvas.addEventListener(e,t)}_handleKeyboardGroupNavigation(e){const t=e;let i=!1,s=!1;"ArrowUp"===t.code?i=this._selectPreviousGroup():"ArrowDown"===t.code?i=this._selectNextGroup():"ArrowLeft"===t.code?this._keyboardFocusedGroup>=0&&(this._expandGroup(this._keyboardFocusedGroup,!1),i=!0):"ArrowRight"===t.code?this._keyboardFocusedGroup>=0&&(this._expandGroup(this._keyboardFocusedGroup,!0),this._selectFirstChild(),i=!0):"Enter"===t.key&&(s=this._selectFirstEntryInCurrentGroup(),i=s),i&&!s&&this._deselectAllEntries(),i&&t.consume(!0)}_selectFirstEntryInCurrentGroup(){if(!this._rawTimelineData)return!1;const e=this._rawTimelineData.groups;if(this._keyboardFocusedGroup<0||!e)return!1;const t=e[this._keyboardFocusedGroup].startLevel;if(t<0)return!1;if(this._keyboardFocusedGroup<e.length-1&&e[this._keyboardFocusedGroup+1].startLevel===t)return!1;if(!this._timelineLevels)return!1;const i=this._timelineLevels[t][0];return this._expandGroup(this._keyboardFocusedGroup,!0),this.setSelectedEntry(i),!0}_selectPreviousGroup(){if(this._keyboardFocusedGroup<=0)return!1;const e=this._getGroupIndexToSelect(-1);return this._selectGroup(e),!0}_selectNextGroup(){if(!this._rawTimelineData||!this._rawTimelineData.groups)return!1;if(this._keyboardFocusedGroup>=this._rawTimelineData.groups.length-1)return!1;const e=this._getGroupIndexToSelect(1);return this._selectGroup(e),!0}_getGroupIndexToSelect(e){if(!this._rawTimelineData||!this._rawTimelineData.groups)throw new Error("No raw timeline data");const t=this._rawTimelineData.groups;let i,s,r=this._keyboardFocusedGroup;do{r+=e,i=this._rawTimelineData.groups[r].name,s=-1!==this._keyboardFocusedGroup&&t[r].style.nestingLevel>t[this._keyboardFocusedGroup].style.nestingLevel}while(r>0&&r<t.length-1&&(!i||s));return r}_selectFirstChild(){if(!this._rawTimelineData||!this._rawTimelineData.groups)return;const e=this._rawTimelineData.groups;if(this._keyboardFocusedGroup<0||this._keyboardFocusedGroup>=e.length-1)return;const t=this._keyboardFocusedGroup+1;e[t].style.nestingLevel>e[this._keyboardFocusedGroup].style.nestingLevel&&this._selectGroup(t)}_handleSelectionNavigation(e){if(-1===this._selectedEntryIndex)return!1;const t=this._timelineData();if(!t)return!1;function i(e,i){if(!t)throw new Error("No timeline data");const s=t.entryStartTimes[e],r=t.entryStartTimes[i],n=s+t.entryTotalTimes[e];return s<r+t.entryTotalTimes[i]&&r<n}const s=e,r=c.Keys;if(s.keyCode===r.Left.code||s.keyCode===r.Right.code){const i=t.entryLevels[this._selectedEntryIndex],n=this._timelineLevels?this._timelineLevels[i]:[];let o=n.lowerBound(this._selectedEntryIndex);return o+=s.keyCode===r.Left.code?-1:1,e.consume(!0),o>=0&&o<n.length&&this.dispatchEventToListeners(z.EntrySelected,n[o]),!0}if(s.keyCode===r.Up.code||s.keyCode===r.Down.code){let e=t.entryLevels[this._selectedEntryIndex];if(e+=s.keyCode===r.Up.code?-1:1,e<0||this._timelineLevels&&e>=this._timelineLevels.length)return this._deselectAllEntries(),s.consume(!0),!0;const n=t.entryStartTimes[this._selectedEntryIndex]+t.entryTotalTimes[this._selectedEntryIndex]/2,a=this._timelineLevels?this._timelineLevels[e]:[];let l=o.upperBound(a,n,(function(e,i){if(!t)throw new Error("No timeline data");return e-t.entryStartTimes[i]}))-1;return!i(this._selectedEntryIndex,a[l])&&(++l,l>=a.length||!i(this._selectedEntryIndex,a[l]))?"ArrowDown"!==s.code&&(this._deselectAllEntries(),s.consume(!0),!0):(s.consume(!0),this.dispatchEventToListeners(z.EntrySelected,a[l]),!0)}return"Enter"===e.key&&(e.consume(!0),this.dispatchEventToListeners(z.EntryInvoked,this._selectedEntryIndex),!0)}_coordinatesToEntryIndex(e,t){if(e<0||t<0)return-1;const i=this._timelineData();if(!i)return-1;if(t+=this._chartViewport.scrollOffset(),!this._visibleLevelOffsets)throw new Error("No visible level offsets");const s=o.upperBound(this._visibleLevelOffsets,t,o.DEFAULT_COMPARATOR)-1;if(s<0||this._visibleLevels&&!this._visibleLevels[s])return-1;if(t-this._visibleLevelOffsets[s]>this._levelHeight(s))return-1;for(const[t,r]of this._markerPositions)if(i.entryLevels[t]===s&&r.x<=e&&e<r.x+r.width)return t;const r=i.entryStartTimes,n=this._timelineLevels?this._timelineLevels[s]:[];if(!n||!n.length)return-1;const a=this._chartViewport.pixelToTime(e),l=Math.max(o.upperBound(n,a,((e,t)=>e-r[t]))-1,0);function h(t){if(void 0===t)return!1;if(!i)return!1;const s=r[t],n=i.entryTotalTimes[t],o=this._chartViewport.timeToPosition(s),a=this._chartViewport.timeToPosition(s+n);return o-3<e&&e<a+3}let d=n[l];return h.call(this,d)?d:(d=n[l+1],h.call(this,d)?d:-1)}_coordinatesToGroupIndex(e,t,i){if(!this._rawTimelineData||!this._rawTimelineData.groups||!this._groupOffsets)return-1;if(e<0||t<0)return-1;t+=this._chartViewport.scrollOffset();const s=this._rawTimelineData.groups||[],r=o.upperBound(this._groupOffsets,t,o.DEFAULT_COMPARATOR)-1;if(r<0||r>=s.length)return-1;const n=i?s[r].style.height:this._groupOffsets[r+1]-this._groupOffsets[r];if(t-this._groupOffsets[r]>=n)return-1;if(!i)return r;const a=this._canvas.getContext("2d");a.save(),a.font=s[r].style.font;const l=this._headerLeftPadding+this._labelWidthForGroup(a,s[r]);return a.restore(),e>l?-1:r}_markerIndexAtPosition(e){const t=this._timelineData();if(!t)return-1;const i=t.markers;if(!i)return-1;const s=this._chartViewport.pixelToTime(e),r=this._chartViewport.pixelToTime(e-4),n=this._chartViewport.pixelToTime(e+4);let o=-1,a=1/0;for(let e=this._markerIndexBeforeTime(r);e<i.length&&i[e].startTime()<n;e++){const t=Math.abs(i[e].startTime()-s);t<a&&(o=e,a=t)}return o}_markerIndexBeforeTime(e){const t=this._timelineData();if(!t)throw new Error("No timeline data");if(!t.markers)throw new Error("No timeline markers");return o.lowerBound(t.markers,e,((e,t)=>e-t.startTime()))}_draw(){const e=this._timelineData();if(!e)return;const t=this._visibleLevelOffsets?this._visibleLevelOffsets:new Uint32Array,i=this._offsetWidth,s=this._offsetHeight,r=this._canvas.getContext("2d");r.save();const n=window.devicePixelRatio,a=this._chartViewport.scrollOffset();r.scale(n,n),r.fillStyle="rgba(0, 0, 0, 0)",r.fillRect(0,0,i,s),r.translate(0,-a);const l="11px "+f.fontFamily();r.font=l;const h=r.createPattern(this._candyStripeCanvas,"repeat"),c=e.entryTotalTimes,_=e.entryStartTimes,m=e.entryLevels,u=this._chartViewport.timeToPixel(),g=[],p=[],v=this._textPadding,w=2*v+d.measureTextWidth(r,"…"),E=this._chartViewport.pixelToTimeOffset(w),y=Math.max(o.upperBound(t,a,o.DEFAULT_COMPARATOR)-1,0);this._markerPositions.clear();let T=-1;if("groups"in e&&Array.isArray(e.groups)){const t=e.groups.find((e=>!!e.track&&"CrRendererMain"===e.track.name));t&&(T=t.startLevel)}const S=new Map;for(let e=y;e<this._dataProvider.maxStackDepth()&&!(this._levelToOffset(e)>a+s);++e){if(!this._visibleLevels||!this._visibleLevels[e])continue;if(!this._timelineLevels)continue;const t=this._timelineLevels[e];let i=1/0;for(let e=o.lowerBound(t,this._chartViewport.windowRightTime(),((e,t)=>e-_[t]))-1;e>=0;--e){const s=t[e],r=c[s];if(isNaN(r)){p.push(s);continue}(r>=E||this._forceDecorationCache&&this._forceDecorationCache[s])&&g.push(s);const n=_[s];if(n+r<=this._chartViewport.windowLeftTime())break;if(this._useWebGL)continue;const o=this._timeToPositionClipped(n);if(!(o>=i)&&(i=o,this._entryColorsCache)){const e=this._entryColorsCache[s];let t=S.get(e);t||(t={indexes:[]},S.set(e,t)),t.indexes.push(s)}}}if(this._useWebGL)this._drawGL();else{r.save(),this._forEachGroupInViewport(((e,t,s,n,o)=>{this._isGroupFocused(t)&&(r.fillStyle=this._selectedGroupBackroundColor,r.fillRect(0,e,i,o-s.style.padding))})),r.restore();for(const[e,{indexes:t}]of S){r.beginPath();for(let e=0;e<t.length;++e){const i=t[e],s=c[i];if(isNaN(s))continue;const n=_[i],o=this._timeToPositionClipped(n),a=m[i],l=this._levelHeight(a),h=this._levelToOffset(a),d=this._timeToPositionClipped(n+s),u=Math.max(d-o,1);r.rect(o,h,u-.4,l-1)}r.fillStyle=e,r.fill(),r.beginPath();for(let e=0;e<t.length;++e){const i=t[e],s=c[i];if(!(m[i]===T))continue;if(isNaN(s)||s<50)continue;const n=_[i],o=this._timeToPositionClipped(n+50),a=m[i],l=this._levelHeight(a),h=this._levelToOffset(a),d=this._timeToPositionClipped(n+s),u=Math.max(d-o,1);r.rect(o,h,u-.4,l-1)}h&&(r.fillStyle=h,r.fill())}}r.textBaseline="alphabetic",r.beginPath();let b=-1,x=-1/0;for(let e=p.length-1;e>=0;--e){const t=p[e],i=this._dataProvider.entryTitle(t);if(!i)continue;const s=_[t],n=m[t];b!==n&&(x=-1/0);const o=Math.max(this._chartViewport.timeToPosition(s),x),a=this._levelToOffset(n),l=this._levelHeight(n),h=4,c=Math.ceil(d.measureTextWidth(r,i))+2*h;x=o+c+1,b=n,this._markerPositions.set(t,{x:o,width:c}),r.fillStyle=this._dataProvider.entryColor(t),r.fillRect(o,a,c,l-1),r.fillStyle="white",r.fillText(i,o+h,a+l-this._textBaseline)}r.strokeStyle="rgba(0, 0, 0, 0.2)",r.stroke();for(let e=0;e<g.length;++e){const t=g[e],s=_[t],n=this._timeToPositionClipped(s),o=Math.min(this._timeToPositionClipped(s+c[t]),i)+1-n,a=m[t],h=this._levelToOffset(a);let f=this._dataProvider.entryTitle(t);f&&f.length&&(r.font=this._dataProvider.entryFont(t)||l,f=d.trimTextMiddle(r,f,o-2*v));const p=this._chartViewport.timeToPosition(s),w=this._levelHeight(a);this._dataProvider.decorateEntry(t,r,f,n,h,o,w,p,u)||f&&f.length&&(r.fillStyle=this._dataProvider.textColor(t),r.fillText(f,n+v,h+w-this._textBaseline))}r.restore(),this._drawGroupHeaders(i,s),this._drawFlowEvents(r,i,s),this._drawMarkers();const L=R.calculateGridOffsets(this),C=Array.from(this._dataProvider.navStartTimes().values());let P=0;const D=e=>{if(0===C.length)return this.formatValue(e,L.precision);C.length>P+1&&e>C[P+1].startTime&&P++;const t=C[P];return t&&(e-=t.startTime-this.zeroTime()),this.formatValue(e,L.precision)};R.drawCanvasGrid(r,L),this._rulerEnabled&&R.drawCanvasHeaders(r,L,D,3,I),this._updateElementPosition(this._highlightElement,this._highlightedEntryIndex),this._updateElementPosition(this._selectedElement,this._selectedEntryIndex),this._updateMarkerHighlight()}_initWebGL(){const e=this._canvasGL.getContext("webgl");if(!e)return console.error("Failed to obtain WebGL context."),void(this._useWebGL=!1);function t(e,t,i){const s=e.createShader(t);return s?(e.shaderSource(s,i),e.compileShader(s),e.getShaderParameter(s,e.COMPILE_STATUS)?s:(console.error("Shader compile error: "+e.getShaderInfoLog(s)),e.deleteShader(s),null)):null}const i=t(e,e.VERTEX_SHADER,"\n      attribute vec2 aVertexPosition;\n      attribute float aVertexColor;\n\n      uniform vec2 uScalingFactor;\n      uniform vec2 uShiftVector;\n\n      varying mediump vec2 vPalettePosition;\n\n      void main() {\n        vec2 shiftedPosition = aVertexPosition - uShiftVector;\n        gl_Position = vec4(shiftedPosition * uScalingFactor + vec2(-1.0, 1.0), 0.0, 1.0);\n        vPalettePosition = vec2(aVertexColor, 0.5);\n      }"),s=t(e,e.FRAGMENT_SHADER,"\n      varying mediump vec2 vPalettePosition;\n      uniform sampler2D uSampler;\n\n      void main() {\n        gl_FragColor = texture2D(uSampler, vPalettePosition);\n      }"),r=e.createProgram();if(!r||!i||!s)return;if(e.attachShader(r,i),e.attachShader(r,s),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS))throw this._shaderProgram=null,new Error("Unable to initialize the shader program: "+e.getProgramInfoLog(r));this._shaderProgram=r,e.useProgram(r),this._vertexBuffer=e.createBuffer(),this._colorBuffer=e.createBuffer(),this._uScalingFactor=e.getUniformLocation(r,"uScalingFactor"),this._uShiftVector=e.getUniformLocation(r,"uShiftVector");const n=e.getUniformLocation(r,"uSampler");e.uniform1i(n,0),this._aVertexPosition=e.getAttribLocation(this._shaderProgram,"aVertexPosition"),this._aVertexColor=e.getAttribLocation(this._shaderProgram,"aVertexColor"),e.enableVertexAttribArray(this._aVertexPosition),e.enableVertexAttribArray(this._aVertexColor)}_setupGLGeometry(){const t=this._canvasGL.getContext("webgl");if(!t)return;const i=this._timelineData();if(!i)return;const s=i.entryTotalTimes,r=i.entryStartTimes,n=i.entryLevels,o=new Float32Array(6*s.length*2);let a=new Uint8Array(6*s.length),l=0;const h=new Map,d=[],c=this._visibleLevels||[],_=this._rawTimelineData||{groups:[]},m=new Array(c.length),u=_.groups||[];this._forEachGroup(((e,t,i)=>{if(i.style.useFirstLineForOverview||!this._isGroupCollapsible(t)||i.expanded)return;let s=t+1;for(;s<u.length&&u[s].style.nestingLevel>i.style.nestingLevel;)++s;const r=s<u.length?u[s].startLevel:this._dataProvider.maxStackDepth();for(let t=i.startLevel;t<r;++t)m[t]=e}));for(let t=0;t<s.length;++t){const i=n[t],_=m[i];if(!c[i]&&!_)continue;if(!this._entryColorsCache)continue;const u=this._entryColorsCache[t];if(!u)continue;let g=h.get(u);if(void 0===g){const t=e.Color.parse(u);if(t){const e=t.canonicalRGBA();e[3]=Math.round(255*e[3]),g=d.length/4,d.push(...e),256===g&&(a=new Uint8Array(a))}g&&h.set(u,g)}for(let e=0;e<6;++e)g&&(a[l+e]=g);const f=2*l,p=r[t]-this._minimumBoundary,v=p+s[t],w=_||this._levelToOffset(i),E=w+this._levelHeight(i)-1;o[f+0]=p,o[f+1]=w,o[f+2]=v,o[f+3]=w,o[f+4]=p,o[f+5]=E,o[f+6]=p,o[f+7]=E,o[f+8]=v,o[f+9]=w,o[f+10]=v,o[f+11]=E,l+=6}this._vertexCount=l;const g=t.createTexture();t.bindTexture(t.TEXTURE_2D,g),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.activeTexture(t.TEXTURE0);const f=d.length/4,p=f>=256,v=p?Math.min(65536,t.getParameter(t.MAX_TEXTURE_SIZE)):256;console.assert(f<=v,"Too many colors");const w=p?t.UNSIGNED_SHORT:t.UNSIGNED_BYTE;if(p){const e=65536/v;for(let t=0;t<l;++t)a[t]*=e}const E=new Uint8Array(4*v);E.set(d),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,v,1,0,t.RGBA,t.UNSIGNED_BYTE,E),this._vertexBuffer&&this._aVertexPosition&&(t.bindBuffer(t.ARRAY_BUFFER,this._vertexBuffer),t.bufferData(t.ARRAY_BUFFER,o,t.STATIC_DRAW),t.vertexAttribPointer(this._aVertexPosition,2,t.FLOAT,!1,0,0)),this._colorBuffer&&this._aVertexColor&&(t.bindBuffer(t.ARRAY_BUFFER,this._colorBuffer),t.bufferData(t.ARRAY_BUFFER,a,t.STATIC_DRAW),t.vertexAttribPointer(this._aVertexColor,1,w,!0,0,0))}_drawGL(){const e=this._canvasGL.getContext("webgl");if(!e)return;const t=this._timelineData();if(!t)return;if(this._prevTimelineData&&t.entryTotalTimes===this._prevTimelineData.entryTotalTimes||(this._prevTimelineData=t,this._setupGLGeometry()),e.viewport(0,0,this._canvasGL.width,this._canvasGL.height),!this._vertexCount)return;const i=[2/this.boundarySpan(),-2*window.devicePixelRatio/this._canvasGL.height],s=[this.minimumBoundary()-this.zeroTime(),this._chartViewport.scrollOffset()];this._uScalingFactor&&e.uniform2fv(this._uScalingFactor,i),this._uShiftVector&&e.uniform2fv(this._uShiftVector,s),e.drawArrays(e.TRIANGLES,0,this._vertexCount)}_drawGroupHeaders(t,i){const s=this._canvas.getContext("2d"),r=this._chartViewport.scrollOffset(),n=window.devicePixelRatio;if(!this._rawTimelineData)return;const o=this._rawTimelineData.groups||[];if(!o.length)return;const a=this._groupOffsets;if(null==a)return;const l=a[a.length-1],h=E.ColorUsage;s.save(),s.scale(n,n),s.translate(0,-r);const d="11px "+f.fontFamily();function c(e){s.moveTo(0,e),s.lineTo(t,e)}function _(e,t,i){const r=this._arrowSide*Math.sqrt(3)/2,n=Math.round(r/2);s.save(),s.translate(e,t),s.rotate(i?Math.PI/2:0),s.moveTo(-n,-this._arrowSide/2),s.lineTo(-n,this._arrowSide/2),s.lineTo(r-n,0),s.restore()}s.font=d,s.fillStyle=E.instance().patchColorText("#fff",h.Background),this._forEachGroupInViewport(((e,i,r)=>{const n=r.style.padding;n<5||s.fillRect(0,e-n+2,t,n-4)})),o.length&&l<r+i&&s.fillRect(0,l+2,t,r+i-l),s.strokeStyle=E.instance().patchColorText("#eee",h.Background),s.beginPath(),this._forEachGroupInViewport(((e,t,i,s)=>{s||i.style.padding<4||c(e-2.5)})),c(l+1.5),s.stroke(),this._forEachGroupInViewport(((e,i,r)=>{if(r.style.useFirstLineForOverview)return;if(!this._isGroupCollapsible(i)||r.expanded)return void(!r.style.shareHeaderLine&&this._isGroupFocused(i)&&(s.fillStyle=r.style.backgroundColor,s.fillRect(0,e,t,r.style.height)));if(this._useWebGL)return;let n=i+1;for(;n<o.length&&o[n].style.nestingLevel>r.style.nestingLevel;)n++;const a=n<o.length?o[n].startLevel:this._dataProvider.maxStackDepth();this._drawCollapsedOverviewForGroup(r,e,a)})),s.save(),this._forEachGroupInViewport(((t,i,r)=>{if(s.font=r.style.font,this._isGroupCollapsible(i)&&!r.expanded||r.style.shareHeaderLine){const n=this._labelWidthForGroup(s,r)+2;if(this._isGroupFocused(i))s.fillStyle=this._selectedGroupBackroundColor;else{const t=e.Color.parse(r.style.backgroundColor);t&&(s.fillStyle=t.setAlpha(.8).asString(null))}s.fillRect(this._headerLeftPadding-this._headerLabelXPadding,t+this._headerLabelYPadding,n,r.style.height-2*this._headerLabelYPadding)}s.fillStyle=r.style.color,s.fillText(r.name,Math.floor(this._expansionArrowIndent*(r.style.nestingLevel+1)+this._arrowSide),t+r.style.height-this._textBaseline)})),s.restore(),s.fillStyle=E.instance().patchColorText("#6e6e6e",h.Foreground),s.beginPath(),this._forEachGroupInViewport(((e,t,i)=>{this._isGroupCollapsible(t)&&_.call(this,this._expansionArrowIndent*(i.style.nestingLevel+1),e+i.style.height-this._textBaseline-this._arrowSide/2,Boolean(i.expanded))})),s.fill(),s.strokeStyle=E.instance().patchColorText("#ddd",h.Background),s.beginPath(),s.stroke(),this._forEachGroupInViewport(((e,t,i,r,n)=>{if(this._isGroupFocused(t)){const t=2,r=10;s.fillStyle=this._selectedGroupBorderColor,s.fillRect(0,e-t,t,n-i.style.padding+2*t),s.fillRect(0,e-t,r,t),s.fillRect(0,e+n-i.style.padding,r,t)}})),s.restore()}_forEachGroup(e){if(!this._rawTimelineData)return;const t=this._rawTimelineData.groups||[];if(!t.length)return;const i=this._groupOffsets;if(!i)return;const s=[{nestingLevel:-1,visible:!0}];for(let r=0;r<t.length;++r){const n=i[r],o=t[r];let a=!0,l=s[s.length-1];for(;l&&l.nestingLevel>=o.style.nestingLevel;)s.pop(),a=!1,l=s[s.length-1];l=s[s.length-1];const h=!!l&&l.visible,d=h&&(!this._isGroupCollapsible(r)||o.expanded);s.push({nestingLevel:o.style.nestingLevel,visible:Boolean(d)});const c=r===t.length-1?i[r+1]+o.style.padding:i[r+1];h&&e(n,r,o,a,c-n)}}_forEachGroupInViewport(e){const t=this._chartViewport.scrollOffset();this._forEachGroup(((i,s,r,n,o)=>{i-r.style.padding>t+this._offsetHeight||i+o<t||e(i,s,r,n,o)}))}_labelWidthForGroup(e,t){return d.measureTextWidth(e,t.name)+this._expansionArrowIndent*(t.style.nestingLevel+1)+2*this._headerLabelXPadding}_drawCollapsedOverviewForGroup(e,i,s){const r=new t.SegmentedRange((function(e,t){return e.data===t.data&&e.end+.4>t.end?e:null})),n=this._chartViewport.windowLeftTime(),a=this._chartViewport.windowRightTime(),l=this._canvas.getContext("2d"),h=e.style.height;if(!this._rawTimelineData)return;const d=this._rawTimelineData.entryStartTimes,c=this._rawTimelineData.entryTotalTimes,_=this._chartViewport.timeToPixel();for(let m=e.startLevel;m<s;++m){const s=this._timelineLevels?this._timelineLevels[m]:[];let u=1/0;for(let m=o.lowerBound(s,a,((e,t)=>e-d[t]))-1;m>=0;--m){const o=s[m],a=d[o],g=this._timeToPositionClipped(a),f=a+c[o];if(isNaN(f)||g>=u)continue;if(f<=n)break;u=g;const p=this._entryColorsCache?this._entryColorsCache[o]:"",v=this._timeToPositionClipped(f);if(e.style.useDecoratorsForOverview&&this._dataProvider.forceDecoration(o)){const e=this._chartViewport.timeToPosition(a),t=v-g;l.beginPath(),l.fillStyle=p,l.fillRect(g,i,t,h-1),this._dataProvider.decorateEntry(o,l,"",g,i,t,h,e,_)}else r.append(new t.Segment(g,v,p))}}const m=r.segments().slice().sort(((e,t)=>e.data.localeCompare(t.data)));let u;l.beginPath();for(let e=0;e<m.length;++e){const t=m[e];u!==m[e].data&&(l.fill(),l.beginPath(),u=m[e].data,l.fillStyle=u),l.rect(t.begin,i,t.end-t.begin,h)}l.fill()}_drawFlowEvents(e,t,i){e.save();const s=window.devicePixelRatio,r=this._chartViewport.scrollOffset();e.scale(s,s),e.translate(0,-r),e.fillStyle="#7f5050",e.strokeStyle="#7f5050";const n=this._timelineData();if(!n)return;const a=o.lowerBound(n.flowStartTimes,this._chartViewport.windowRightTime(),o.DEFAULT_COMPARATOR);e.lineWidth=.5;for(let t=0;t<a;++t){if(!n.flowEndTimes[t]||n.flowEndTimes[t]<this._chartViewport.windowLeftTime())continue;const i=this._chartViewport.timeToPosition(n.flowStartTimes[t]),s=this._chartViewport.timeToPosition(n.flowEndTimes[t]),r=n.flowStartLevels[t],o=n.flowEndLevels[t],a=this._levelToOffset(r)+this._levelHeight(r)/2,l=this._levelToOffset(o)+this._levelHeight(o)/2,h=Math.min((s-i)/4,40),d=(l-a)/10,c=30,_=n.flowEndTimes[t]-n.flowStartTimes[t]<1?a:c+Math.max(0,a+d*(t%c)),m=[];m.push({x:i,y:a}),m.push({x:i+6,y:a}),m.push({x:i+h+12,y:a}),m.push({x:i+h,y:_}),m.push({x:i+2*h,y:_}),m.push({x:s-2*h,y:_}),m.push({x:s-h,y:_}),m.push({x:s-h-12,y:l}),m.push({x:s-6,y:l}),e.beginPath(),e.moveTo(m[0].x,m[0].y),e.lineTo(m[1].x,m[1].y),e.bezierCurveTo(m[2].x,m[2].y,m[3].x,m[3].y,m[4].x,m[4].y),e.lineTo(m[5].x,m[5].y),e.bezierCurveTo(m[6].x,m[6].y,m[7].x,m[7].y,m[8].x,m[8].y),e.stroke(),e.beginPath(),e.arc(i,a,2,-Math.PI/2,Math.PI/2,!1),e.fill(),e.beginPath(),e.moveTo(s,l),e.lineTo(s-6,l-3),e.lineTo(s-6,l+3),e.fill()}e.restore()}_drawMarkers(){const e=this._timelineData();if(!e)return;const t=e.markers,i=this._markerIndexBeforeTime(this.minimumBoundary()),s=this.maximumBoundary(),r=this._chartViewport.timeToPixel(),n=this._canvas.getContext("2d");n.save();const o=window.devicePixelRatio;n.scale(o,o),n.translate(0,3);const a=I-1;for(let e=i;e<t.length;e++){const i=t[e].startTime();if(i>s)break;t[e].draw(n,this._chartViewport.timeToPosition(i),a,r)}n.restore()}_updateMarkerHighlight(){const e=this._markerHighlighElement;e.parentElement&&e.remove();const t=this._highlightedMarkerIndex;if(-1===t)return;const i=this._timelineData();if(!i)return;const s=i.markers[t],r=this._timeToPositionClipped(s.startTime());_.Tooltip.install(e,s.title()||"");const n=e.style;n.left=r+"px",n.backgroundColor=s.color(),this._viewportElement.appendChild(e)}_processTimelineData(e){if(!e)return this._timelineLevels=null,this._visibleLevelOffsets=null,this._visibleLevels=null,this._groupOffsets=null,this._rawTimelineData=null,this._forceDecorationCache=null,this._entryColorsCache=null,this._rawTimelineDataLength=0,this._selectedGroup=-1,this._keyboardFocusedGroup=-1,void this._flameChartDelegate.updateSelectedGroup(this,null);this._rawTimelineData=e,this._rawTimelineDataLength=e.entryStartTimes.length,this._forceDecorationCache=new Int8Array(this._rawTimelineDataLength),this._entryColorsCache=new Array(this._rawTimelineDataLength);for(let e=0;e<this._rawTimelineDataLength;++e)this._forceDecorationCache[e]=this._dataProvider.forceDecoration(e)?1:0,this._entryColorsCache[e]=this._dataProvider.entryColor(e);const t=new Uint32Array(this._dataProvider.maxStackDepth()+1);for(let i=0;i<e.entryLevels.length;++i)++t[e.entryLevels[i]];const i=new Array(t.length);for(let e=0;e<i.length;++e)i[e]=new Uint32Array(t[e]),t[e]=0;for(let s=0;s<e.entryLevels.length;++s){const r=e.entryLevels[s];i[r][t[r]++]=s}this._timelineLevels=i;const s=this._rawTimelineData.groups||[];for(let e=0;e<s.length;++e){const t=this._groupExpansionState[s[e].name];void 0!==t&&(s[e].expanded=t)}this._updateLevelPositions(),this._updateHeight(),this._selectedGroup=e.selectedGroup?s.indexOf(e.selectedGroup):-1,this._keyboardFocusedGroup=this._selectedGroup,this._flameChartDelegate.updateSelectedGroup(this,e.selectedGroup)}_updateLevelPositions(){const e=this._dataProvider.maxStackDepth(),t=this._rawTimelineData&&this._rawTimelineData.groups||[];this._visibleLevelOffsets=new Uint32Array(e+1),this._visibleLevelHeights=new Uint32Array(e),this._visibleLevels=new Uint16Array(e),this._groupOffsets=new Uint32Array(t.length+1);let i=-1,s=this._rulerEnabled?I+2:2,r=!0;const n=[{nestingLevel:-1,visible:!0}],o=Math.max(e,t.length?t[t.length-1].startLevel+1:0);let a;for(a=0;a<o;++a){let o,l=!0;for(;i<t.length-1&&a===t[i+1].startLevel;){++i,o=t[i].style;let e=!0,a=n[n.length-1];for(;a&&a.nestingLevel>=o.nestingLevel;)n.pop(),e=!1,a=n[n.length-1];const h=!(i>=0&&this._isGroupCollapsible(i))||t[i].expanded;a=n[n.length-1],l=!!a&&a.visible,r=Boolean(h)&&l,n.push({nestingLevel:o.nestingLevel,visible:r}),l&&(s+=e?0:o.padding),this._groupOffsets[i]=s,l&&!o.shareHeaderLine&&(s+=o.height)}if(a>=e)continue;const h=i>=0&&a===t[i].startLevel,d=l&&(r||h&&t[i].style.useFirstLineForOverview);let c;if(i>=0){const e=t[i],s=e.style;c=h&&!s.shareHeaderLine||s.collapsible&&!e.expanded?s.height:s.itemsHeight||this._barHeight}else c=this._barHeight;this._visibleLevels[a]=d?1:0,this._visibleLevelOffsets[a]=s,this._visibleLevelHeights[a]=c,(d||l&&o&&o.shareHeaderLine&&h)&&(s+=this._visibleLevelHeights[a])}i>=0&&(this._groupOffsets[i+1]=s),this._visibleLevelOffsets[a]=s,this._useWebGL&&this._setupGLGeometry()}_isGroupCollapsible(e){if(!this._rawTimelineData)return;const t=this._rawTimelineData.groups||[],i=t[e].style;if(!i.shareHeaderLine||!i.collapsible)return Boolean(i.collapsible);const s=e+1>=t.length;if(!s&&t[e+1].style.nestingLevel>i.nestingLevel)return!0;return(s?this._dataProvider.maxStackDepth():t[e+1].startLevel)!==t[e].startLevel+1||i.height!==i.itemsHeight}setSelectedEntry(e){this._selectedEntryIndex!==e&&(-1!==e&&this._chartViewport.hideRangeSelection(),this._selectedEntryIndex=e,this._revealEntry(e),this._updateElementPosition(this._selectedElement,this._selectedEntryIndex))}_updateElementPosition(e,t){if(e.classList.add("hidden"),-1===t)return;const i=this._timelineData();if(!i)return;const s=i.entryStartTimes[t],r=i.entryTotalTimes[t];let n=0,o=0,a=!0;if(Number.isNaN(r)){const e=this._markerPositions.get(t);e?(n=e.x,o=e.width):a=!1}else n=this._chartViewport.timeToPosition(s),o=r*this._chartViewport.timeToPixel();if(n+o<=0||n>=this._offsetWidth)return;const l=n+o/2;o=Math.max(o,2),n=l-o/2;const h=i.entryLevels[t],d=this._levelToOffset(h)-this._chartViewport.scrollOffset(),c=this._levelHeight(h),_=e.style;_.left=n+"px",_.top=d+"px",_.width=o+"px",_.height=c-1+"px",e.classList.toggle("hidden",!a),this._viewportElement.appendChild(e)}_timeToPositionClipped(e){return n.clamp(this._chartViewport.timeToPosition(e),0,this._offsetWidth)}_levelToOffset(e){if(!this._visibleLevelOffsets)throw new Error("No visible level offsets");return this._visibleLevelOffsets[e]}_levelHeight(e){if(!this._visibleLevelHeights)throw new Error("No visible level heights");return this._visibleLevelHeights[e]}_updateBoundaries(){this._totalTime=this._dataProvider.totalTime(),this._minimumBoundary=this._dataProvider.minimumBoundary(),this._chartViewport.setBoundaries(this._minimumBoundary,this._totalTime)}_updateHeight(){const e=this._levelToOffset(this._dataProvider.maxStackDepth())+2;this._chartViewport.setContentHeight(e)}onResize(){this.scheduleUpdate()}update(){this._timelineData()&&(this._resetCanvas(),this._updateHeight(),this._updateBoundaries(),this._draw(),this._chartViewport.isDragging()||this._updateHighlight())}reset(){this._chartViewport.reset(),this._rawTimelineData=null,this._rawTimelineDataLength=0,this._highlightedMarkerIndex=-1,this._highlightedEntryIndex=-1,this._selectedEntryIndex=-1,this._textWidth=new Map,this._chartViewport.scheduleUpdate()}scheduleUpdate(){this._chartViewport.scheduleUpdate()}_enabled(){return 0!==this._rawTimelineDataLength}computePosition(e){return this._chartViewport.timeToPosition(e)}formatValue(e,t){return this._dataProvider.formatValue(e-this.zeroTime(),t)}maximumBoundary(){return this._chartViewport.windowRightTime()}minimumBoundary(){return this._chartViewport.windowLeftTime()}zeroTime(){return this._dataProvider.minimumBoundary()}boundarySpan(){return this.maximumBoundary()-this.minimumBoundary()}}const I=15;const z={CanvasFocused:Symbol("CanvasFocused"),EntryInvoked:Symbol("EntryInvoked"),EntrySelected:Symbol("EntrySelected"),EntryHighlighted:Symbol("EntryHighlighted")},W={SelectedGroupBackground:"hsl(215, 85%, 98%)",SelectedGroupBorder:"hsl(216, 68%, 54%)"};var O=Object.freeze({__proto__:null,UIStrings:M,FlameChartDelegate:class{windowChanged(e,t,i){}updateRangeSelection(e,t){}updateSelectedGroup(e,t){}},FlameChart:B,HeaderHeight:I,MinimalTimeWindowMs:.5,TimelineData:class{constructor(e,t,i,s){this.entryLevels=e,this.entryTotalTimes=t,this.entryStartTimes=i,this.groups=s||[],this.markers=[],this.flowStartTimes=[],this.flowStartLevels=[],this.flowEndTimes=[],this.flowEndLevels=[],this.selectedGroup=null}},FlameChartDataProvider:class{minimumBoundary(){throw new Error("Not implemented")}totalTime(){throw new Error("Not implemented")}formatValue(e,t){throw new Error("Not implemented")}maxStackDepth(){throw new Error("Not implemented")}timelineData(){throw new Error("Not implemented")}prepareHighlightedEntryInfo(e){throw new Error("Not implemented")}canJumpToEntry(e){throw new Error("Not implemented")}entryTitle(e){throw new Error("Not implemented")}entryFont(e){throw new Error("Not implemented")}entryColor(e){throw new Error("Not implemented")}decorateEntry(e,t,i,s,r,n,o,a,l){throw new Error("Not implemented")}forceDecoration(e){throw new Error("Not implemented")}textColor(e){throw new Error("Not implemented")}navStartTimes(){throw new Error("Not implemented")}},FlameChartMarker:class{startTime(){throw new Error("Not implemented")}color(){throw new Error("Not implemented")}title(){throw new Error("Not implemented")}draw(e,t,i,s){throw new Error("Not implemented")}},Events:z,Colors:W,Group:undefined,GroupStyle:undefined});class H extends l.VBox{constructor(e){super(),this.registerRequiredCSS("perf_ui/chartViewport.css",{enableLegacyPatching:!0}),this._delegate=e,this.viewportElement=this.contentElement.createChild("div","fill"),this.viewportElement.addEventListener("mousemove",this._updateCursorPosition.bind(this),!1),this.viewportElement.addEventListener("mouseout",this._onMouseOut.bind(this),!1),this.viewportElement.addEventListener("wheel",this._onMouseWheel.bind(this),!1),this.viewportElement.addEventListener("keydown",this._onChartKeyDown.bind(this),!1),this.viewportElement.addEventListener("keyup",this._onChartKeyUp.bind(this),!1),d.installDragHandle(this.viewportElement,this._startDragging.bind(this),this._dragging.bind(this),this._endDragging.bind(this),"-webkit-grabbing",null),d.installDragHandle(this.viewportElement,this._startRangeSelection.bind(this),this._rangeSelectionDragging.bind(this),this._endRangeSelection.bind(this),"text",null),this._alwaysShowVerticalScroll=!1,this._rangeSelectionEnabled=!0,this._vScrollElement=this.contentElement.createChild("div","chart-viewport-v-scroll"),this._vScrollContent=this._vScrollElement.createChild("div"),this._vScrollElement.addEventListener("scroll",this._onScroll.bind(this),!1),this._selectionOverlay=this.contentElement.createChild("div","chart-viewport-selection-overlay hidden"),this._selectedTimeSpanLabel=this._selectionOverlay.createChild("div","time-span"),this._cursorElement=this.contentElement.createChild("div","chart-cursor-element hidden"),this.reset(),this._isDragging,this._totalHeight,this._offsetHeight,this._vScrollElement.scrollTop,this._scrollTop,this._rangeSelectionStart=null,this._rangeSelectionEnd=null,this._dragStartPointX,this._dragStartPointY,this._dragStartScrollTop,this._visibleLeftTime,this._visibleRightTime,this._offsetWidth,this._targetLeftTime,this._targetRightTime,this._selectionOffsetShiftX,this._selectionOffsetShiftY,this._selectionStartX,this._lastMouseOffsetX,this._minimumBoundary,this._totalTime}alwaysShowVerticalScroll(){this._alwaysShowVerticalScroll=!0,this._vScrollElement.classList.add("always-show-scrollbar")}disableRangeSelection(){this._rangeSelectionEnabled=!1,this._rangeSelectionStart=null,this._rangeSelectionEnd=null,this._updateRangeSelectionOverlay()}isDragging(){return this._isDragging}elementsToRestoreScrollPositionsFor(){return[this._vScrollElement]}_updateScrollBar(){const e=this._alwaysShowVerticalScroll||this._totalHeight>this._offsetHeight;this._vScrollElement.classList.contains("hidden")===e&&(this._vScrollElement.classList.toggle("hidden",!e),this._updateContentElementSize())}onResize(){this._updateScrollBar(),this._updateContentElementSize(),this.scheduleUpdate()}reset(){this._vScrollElement.scrollTop=0,this._scrollTop=0,this._rangeSelectionStart=null,this._rangeSelectionEnd=null,this._isDragging=!1,this._dragStartPointX=0,this._dragStartPointY=0,this._dragStartScrollTop=0,this._visibleLeftTime=0,this._visibleRightTime=0,this._offsetWidth=0,this._offsetHeight=0,this._totalHeight=0,this._targetLeftTime=0,this._targetRightTime=0,this._updateContentElementSize()}_updateContentElementSize(){let e=this._vScrollElement.offsetLeft;e||(e=this.contentElement.offsetWidth),this._offsetWidth=e,this._offsetHeight=this.contentElement.offsetHeight,this._delegate.setSize(this._offsetWidth,this._offsetHeight)}setContentHeight(e){this._totalHeight=e,this._vScrollContent.style.height=e+"px",this._updateScrollBar(),this._updateContentElementSize(),this._scrollTop+this._offsetHeight<=e||(this._scrollTop=Math.max(0,e-this._offsetHeight),this._vScrollElement.scrollTop=this._scrollTop)}setScrollOffset(e,t){t=t||0,this._vScrollElement.scrollTop>e?this._vScrollElement.scrollTop=e:this._vScrollElement.scrollTop<e-this._offsetHeight+t&&(this._vScrollElement.scrollTop=e-this._offsetHeight+t)}scrollOffset(){return this._vScrollElement.scrollTop}chartHeight(){return this._offsetHeight}setBoundaries(e,t){this._minimumBoundary=e,this._totalTime=t}_onMouseWheel(e){const t=e,s=t.shiftKey!==("zoom"===i.Settings.instance().moduleSetting("flamechartMouseWheelAction").get()),r=!s&&(t.deltaY||53===Math.abs(t.deltaX)),n=s&&Math.abs(t.deltaX)>Math.abs(t.deltaY);if(r)this._vScrollElement.scrollTop+=(t.deltaY||t.deltaX)/53*this._offsetHeight/8;else if(n)this._handlePanGesture(t.deltaX,!0);else{const e=1/53;this._handleZoomGesture(Math.pow(1.2,(t.deltaY||t.deltaX)*e)-1)}e.consume(!0)}_startDragging(e){return!e.shiftKey&&(this._isDragging=!0,this._dragStartPointX=e.pageX,this._dragStartPointY=e.pageY,this._dragStartScrollTop=this._vScrollElement.scrollTop,this.viewportElement.style.cursor="",!0)}_dragging(e){const t=this._dragStartPointX-e.pageX;this._dragStartPointX=e.pageX,this._handlePanGesture(t);const i=this._dragStartPointY-e.pageY;this._vScrollElement.scrollTop=this._dragStartScrollTop+i}_endDragging(){this._isDragging=!1}_startRangeSelection(e){if(!e.shiftKey||!this._rangeSelectionEnabled)return!1;this._isDragging=!0,this._selectionOffsetShiftX=e.offsetX-e.pageX,this._selectionOffsetShiftY=e.offsetY-e.pageY,this._selectionStartX=e.offsetX;const t=this._selectionOverlay.style;return t.left=this._selectionStartX+"px",t.width="1px",this._selectedTimeSpanLabel.textContent="",this._selectionOverlay.classList.remove("hidden"),!0}_endRangeSelection(){this._isDragging=!1,this._selectionStartX=null}hideRangeSelection(){this._selectionOverlay.classList.add("hidden"),this._rangeSelectionStart=null,this._rangeSelectionEnd=null}setRangeSelection(e,t){this._rangeSelectionEnabled&&(this._rangeSelectionStart=Math.min(e,t),this._rangeSelectionEnd=Math.max(e,t),this._updateRangeSelectionOverlay(),this._delegate.updateRangeSelection(this._rangeSelectionStart,this._rangeSelectionEnd))}onClick(e){const t=e,i=this.pixelToTime(t.offsetX);null!==this._rangeSelectionStart&&null!==this._rangeSelectionEnd&&i>=this._rangeSelectionStart&&i<=this._rangeSelectionEnd||this.hideRangeSelection()}_rangeSelectionDragging(e){const t=n.clamp(e.pageX+this._selectionOffsetShiftX,0,this._offsetWidth),i=this.pixelToTime(this._selectionStartX||0),s=this.pixelToTime(t);this.setRangeSelection(i,s)}_updateRangeSelectionOverlay(){const e=this._rangeSelectionStart||0,t=this._rangeSelectionEnd||0,i=100,s=n.clamp(this.timeToPosition(e),-100,this._offsetWidth+i),r=n.clamp(this.timeToPosition(t),-100,this._offsetWidth+i),o=this._selectionOverlay.style;o.left=s+"px",o.width=r-s+"px";const a=t-e;this._selectedTimeSpanLabel.textContent=Number.preciseMillisToString(a,2)}_onScroll(){this._scrollTop=this._vScrollElement.scrollTop,this.scheduleUpdate()}_onMouseOut(){this._lastMouseOffsetX=-1,this._showCursor(!1)}_updateCursorPosition(e){const t=e;this._showCursor(t.shiftKey),this._cursorElement.style.left=t.offsetX+"px",this._lastMouseOffsetX=t.offsetX}pixelToTime(e){return this.pixelToTimeOffset(e)+this._visibleLeftTime}pixelToTimeOffset(e){return e*(this._visibleRightTime-this._visibleLeftTime)/this._offsetWidth}timeToPosition(e){return Math.floor((e-this._visibleLeftTime)/(this._visibleRightTime-this._visibleLeftTime)*this._offsetWidth)}timeToPixel(){return this._offsetWidth/(this._visibleRightTime-this._visibleLeftTime)}_showCursor(e){this._cursorElement.classList.toggle("hidden",!e||this._isDragging)}_onChartKeyDown(e){const t=e;this._showCursor(t.shiftKey),this._handleZoomPanKeys(e)}_onChartKeyUp(e){const t=e;this._showCursor(t.shiftKey)}_handleZoomPanKeys(e){if(!c.KeyboardShortcut.hasNoModifiers(e))return;const t=e,i=t.shiftKey?.8:.3,s=t.shiftKey?320:160;switch(t.code){case"KeyA":this._handlePanGesture(-s,!0);break;case"KeyD":this._handlePanGesture(s,!0);break;case"KeyW":this._handleZoomGesture(-i);break;case"KeyS":this._handleZoomGesture(i);break;default:return}e.consume(!0)}_handleZoomGesture(e){const t={left:this._targetLeftTime,right:this._targetRightTime},i=this.pixelToTime(this._lastMouseOffsetX);t.left+=(t.left-i)*e,t.right+=(t.right-i)*e,this._requestWindowTimes(t,!0)}_handlePanGesture(e,t){const i={left:this._targetLeftTime,right:this._targetRightTime},s=n.clamp(this.pixelToTimeOffset(e),this._minimumBoundary-i.left,this._totalTime+this._minimumBoundary-i.right);i.left+=s,i.right+=s,this._requestWindowTimes(i,Boolean(t))}_requestWindowTimes(e,t){const i=this._minimumBoundary+this._totalTime;e.left<this._minimumBoundary?(e.right=Math.min(e.right+this._minimumBoundary-e.left,i),e.left=this._minimumBoundary):e.right>i&&(e.left=Math.max(e.left-e.right+i,this._minimumBoundary),e.right=i),e.right-e.left<.5||this._delegate.windowChanged(e.left,e.right,t)}scheduleUpdate(){this._updateTimerId||this._cancelWindowTimesAnimation||(this._updateTimerId=this.element.window().requestAnimationFrame((()=>{this._updateTimerId=0,this._update()})))}_update(){this._updateRangeSelectionOverlay(),this._delegate.update()}setWindowTimes(e,t,i){if(e!==this._targetLeftTime||t!==this._targetRightTime){if(!i||0===this._visibleLeftTime||this._visibleRightTime===1/0||0===e&&t===1/0||e===1/0&&t===1/0)return this._targetLeftTime=e,this._targetRightTime=t,this._visibleLeftTime=e,this._visibleRightTime=t,void this.scheduleUpdate();this._cancelWindowTimesAnimation&&(this._cancelWindowTimesAnimation(),this._visibleLeftTime=this._targetLeftTime,this._visibleRightTime=this._targetRightTime),this._targetLeftTime=e,this._targetRightTime=t,this._cancelWindowTimesAnimation=d.animateFunction(this.element.window(),function(e,t){this._visibleLeftTime=e,this._visibleRightTime=t,this._update()}.bind(this),[{from:this._visibleLeftTime,to:e},{from:this._visibleRightTime,to:t}],100,(()=>{this._cancelWindowTimesAnimation=null}))}}windowLeftTime(){return this._visibleLeftTime}windowRightTime(){return this._visibleRightTime}}var A=Object.freeze({__proto__:null,ChartViewportDelegate:class{windowChanged(e,t,i){}updateRangeSelection(e,t){}setSize(e,t){}update(){}},ChartViewport:H});const V={doubleclickToZoomImageClickTo:"Doubleclick to zoom image. Click to view preceding requests.",screenshotForSSelectToView:"Screenshot for {PH1} - select to view preceding requests.",screenshot:"Screenshot",previousFrame:"Previous frame",nextFrame:"Next frame"},N=v.registerUIStrings("perf_ui/FilmStripView.js",V),U=v.getLocalizedString.bind(void 0,N);class X extends l.HBox{constructor(){super(!0),this.registerRequiredCSS("perf_ui/filmStripView.css",{enableLegacyPatching:!0}),this.contentElement.classList.add("film-strip-view"),this._statusLabel=this.contentElement.createChild("div","label"),this.reset(),this.setMode(Y.TimeBased),this._zeroTime,this._spanTime,this._model}static _setImageData(e,t){t&&(e.src="data:image/jpg;base64,"+t)}setMode(e){this._mode=e,this.contentElement.classList.toggle("time-based",e===Y.TimeBased),this.update()}setModel(e,t,i){this._model=e,this._zeroTime=t,this._spanTime=i;e.frames().length?this.update():this.reset()}createFrameElement(e){const t=e.timestamp,i=Number.millisToString(t-this._zeroTime),s=document.createElement("div");s.classList.add("frame"),_.Tooltip.install(s,U(V.doubleclickToZoomImageClickTo)),s.createChild("div","time").textContent=i,s.tabIndex=0,s.setAttribute("aria-label",U(V.screenshotForSSelectToView,{PH1:i})),h.markAsButton(s);const r=s.createChild("div","thumbnail").createChild("img");return r.alt=U(V.screenshot),s.addEventListener("mousedown",this._onMouseEvent.bind(this,$.FrameSelected,t),!1),s.addEventListener("mouseenter",this._onMouseEvent.bind(this,$.FrameEnter,t),!1),s.addEventListener("mouseout",this._onMouseEvent.bind(this,$.FrameExit,t),!1),s.addEventListener("dblclick",this._onDoubleClick.bind(this,e),!1),s.addEventListener("focusin",this._onMouseEvent.bind(this,$.FrameEnter,t),!1),s.addEventListener("focusout",this._onMouseEvent.bind(this,$.FrameExit,t),!1),s.addEventListener("keydown",(e=>{"Enter"!==e.code&&"Space"!==e.code||this._onMouseEvent($.FrameSelected,t)})),e.imageDataPromise().then(X._setImageData.bind(null,r)).then((function(){return s}))}frameByTime(e){const t=this._model.frames();return t[Math.max(o.upperBound(t,e,(function(e,t){return e-t.timestamp}))-1,0)]}update(){if(!this._model)return;const e=this._model.frames();if(!e.length)return;if(this._mode===Y.FrameBased)return void Promise.all(e.map(this.createFrameElement.bind(this))).then(s.bind(this));const t=this.contentElement.clientWidth,i=this._spanTime/t;function s(e){this.contentElement.removeChildren();for(let t=0;t<e.length;++t)this.contentElement.appendChild(e[t])}this.createFrameElement(e[0]).then(function(e){const r=Math.ceil(d.measurePreferredSize(e,this.contentElement).width);if(!r)return;const n=[];for(let e=r;e<t;e+=r){const t=e*i+this._zeroTime;n.push(this.createFrameElement(this.frameByTime(t)).then(o))}function o(e){return e.style.width=r+"px",e}Promise.all(n).then(s.bind(this))}.bind(this))}onResize(){this._mode!==Y.FrameBased&&this.update()}_onMouseEvent(e,t){this.dispatchEventToListeners(e,t)}_onDoubleClick(e){new K(e,this._zeroTime)}reset(){this._zeroTime=0,this.contentElement.removeChildren(),this.contentElement.appendChild(this._statusLabel)}setStatusText(e){this._statusLabel.textContent=e}}const $={FrameSelected:Symbol("FrameSelected"),FrameEnter:Symbol("FrameEnter"),FrameExit:Symbol("FrameExit")},Y={TimeBased:"TimeBased",FrameBased:"FrameBased"};class K{constructor(e,t){const i=d.createTextButton("◀",this._onPrevFrame.bind(this));_.Tooltip.install(i,U(V.previousFrame));const s=d.createTextButton("▶",this._onNextFrame.bind(this));_.Tooltip.install(s,U(V.nextFrame)),this._fragment=m.Fragment.build`
+      <x-widget flex=none margin=12px>
+        <x-hbox overflow=auto border='1px solid #ddd'>
+          <img $=image style="max-height: 80vh; max-width: 80vw"></img>
+        </x-hbox>
+        <x-hbox x-center justify-content=center margin-top=10px>
+          ${i}
+          <x-hbox $=time margin=8px></x-hbox>
+          ${s}
+        </x-hbox>
+      </x-widget>
+    `,this._widget=this._fragment.element(),this._widget.tabIndex=0,this._widget.addEventListener("keydown",this._keyDown.bind(this),!1),this._frames=e.model().frames(),this._index=e.index,this._zeroTime=t||e.model().zeroTime(),this._dialog=null,this._render()}_resize(){this._dialog||(this._dialog=new u.Dialog,this._dialog.contentElement.appendChild(this._widget),this._dialog.setDefaultFocusedElement(this._widget),this._dialog.show()),this._dialog.setSizeBehavior(g.SizeBehavior.MeasureContent)}_keyDown(e){const t=e;switch(t.key){case"ArrowLeft":f.isMac()&&t.metaKey?this._onFirstFrame():this._onPrevFrame();break;case"ArrowRight":f.isMac()&&t.metaKey?this._onLastFrame():this._onNextFrame();break;case"Home":this._onFirstFrame();break;case"End":this._onLastFrame()}}_onPrevFrame(){this._index>0&&--this._index,this._render()}_onNextFrame(){this._index<this._frames.length-1&&++this._index,this._render()}_onFirstFrame(){this._index=0,this._render()}_onLastFrame(){this._index=this._frames.length-1,this._render()}_render(){const e=this._frames[this._index];return this._fragment.$("time").textContent=Number.millisToString(e.timestamp-this._zeroTime),e.imageDataPromise().then((()=>{const e=this._fragment.$("image");return X._setImageData(e,null)})).then(this._resize.bind(this))}}var j=Object.freeze({__proto__:null,UIStrings:V,FilmStripView:X,Events:$,Modes:Y,Dialog:K});var q=Object.freeze({__proto__:null,GCActionDelegate:class{handleAction(e,t){for(const e of y.TargetManager.instance().models(T.HeapProfilerModel))e.collectGarbage();return!0}}});const Z={ms:"ms",mb:"MB",kb:"kB"},J=v.registerUIStrings("perf_ui/LineLevelProfile.js",Z),Q=v.getLocalizedString.bind(void 0,J);let ee,te;class ie{constructor(){this._helper=new re("performance")}static instance(e={forceNew:null}){const{forceNew:t}=e;return ee&&!t||(ee=new ie),ee}reset(){this._helper.reset()}_appendLegacyCPUProfile(e){const t=e.target(),i=[e.profileHead],s=(e.profileEndTime-e.profileStartTime)/e.totalHitCount;for(;i.length;){const e=i.pop().children;for(let r=0;r<e.length;++r){const n=e[r];if(i.push(n),n.url&&n.positionTicks)for(let e=0;e<n.positionTicks.length;++e){const i=n.positionTicks[e],r=i.line,o=i.ticks*s;this._helper.addLineData(t,n.url,r,o)}}}}appendCPUProfile(e){if(!e.lines)return this._appendLegacyCPUProfile(e),void this._helper.scheduleUpdate();const t=e.target();if(e.samples){for(let i=1;i<e.samples.length;++i){const s=e.lines[i];if(!s)continue;const r=e.nodeByIndex(i);if(!r)continue;const n=r.scriptId||r.url;if(!n)continue;const o=e.timestamps[i]-e.timestamps[i-1];this._helper.addLineData(t,n,s,o)}this._helper.scheduleUpdate()}}}class se{constructor(){this._helper=new re("memory")}static instance(e={forceNew:null}){const{forceNew:t}=e;return te&&!t||(te=new se),te}reset(){this._helper.reset()}appendHeapProfile(e,t){const i=this._helper;!function e(s){if(s.children.forEach(e),!s.selfSize)return;const r=Number(s.callFrame.scriptId)||s.callFrame.url;if(!r)return;const n=s.callFrame.lineNumber+1;i.addLineData(t,r,n,s.selfSize)}(e.head),i.scheduleUpdate()}}class re{constructor(e){this._type=e,this._locationPool=new x.LiveLocationPool,this._updateTimer=null,this.reset(),this._lineData}reset(){this._lineData=new Map,this.scheduleUpdate()}addLineData(e,t,i,s){let r=this._lineData.get(e);r||(r=new Map,this._lineData.set(e,r));let n=r.get(t);n||(n=new Map,r.set(t,n)),n.set(i,(n.get(i)||0)+s)}scheduleUpdate(){this._updateTimer||(this._updateTimer=setTimeout((()=>{this._updateTimer=null,this._doUpdate()}),0))}_doUpdate(){this._locationPool.disposeAll(),C.WorkspaceImpl.instance().uiSourceCodes().forEach((e=>e.removeDecorationsForType(this._type)));for(const e of this._lineData){const t=e[0],i=t?t.model(S.DebuggerModel):null,s=e[1];for(const e of s){const t=e[0],s=e[1],r=i||"string"!=typeof t?null:C.WorkspaceImpl.instance().uiSourceCodeForURL(t);if(i||r)for(const e of s){const s=e[0]-1,n=e[1];if(r)r.addLineDecoration(s,this._type,n);else if(i){const e="string"==typeof t?i.createRawLocationByURL(t,s,0):i.createRawLocationByScriptId(String(t),s,0);e&&new ne(e,this._type,n,this._locationPool)}}}}}}class ne{constructor(e,t,i,s){this._type=t,this._time=i,this._uiLocation=null,L.DebuggerWorkspaceBinding.instance().createLiveLocation(e,this.updateLocation.bind(this),s)}async updateLocation(e){this._uiLocation&&this._uiLocation.uiSourceCode.removeDecorationsForType(this._type),this._uiLocation=await e.uiLocation(),this._uiLocation&&this._uiLocation.uiSourceCode.addLineDecoration(this._uiLocation.lineNumber,this._type,this._time)}}var oe=Object.freeze({__proto__:null,UIStrings:Z,Performance:ie,Memory:se,Helper:re,Presentation:ne,LineDecorator:class{decorate(e,t,i){const s="CodeMirror-gutter-"+i,r=e.decorationsForType(i);if(t.uninstallGutter(s),r&&r.size){t.installGutter(s,!1);for(const e of r){const r=e.data(),n=this._createElement(i,r);t.setGutterDecoration(e.range().startLine,s,n)}}}_createElement(e,t){const i=document.createElement("div");if(i.classList.add("text-editor-line-marker-text"),"performance"===e){const e=n.clamp(Math.log10(1+10*t)/5,.02,1);i.textContent=t.toFixed(1),i.style.backgroundColor=`hsla(44, 100%, 50%, ${e.toFixed(3)})`,i.createChild("span","line-marker-units").textContent=Q(Z.ms)}else{const e=n.clamp(Math.log10(1+.002*t)/5,.02,1);let s,r;i.style.backgroundColor=`hsla(217, 100%, 70%, ${e.toFixed(3)})`,(t/=1e3)>=1e3?(s=Q(Z.mb),r=(t/=1e3)>=20?0:1):(s=Q(Z.kb),r=0),i.textContent=t.toFixed(r),i.createChild("span","line-marker-units").textContent=s}return i}}});var ae=Object.freeze({__proto__:null,LiveHeapProfile:class{constructor(){this._running=!1,this._sessionId=0,this._loadEventCallback=()=>{},this._setting=i.Settings.instance().moduleSetting("memoryLiveHeapProfile"),this._setting.addChangeListener((e=>e.data?this._startProfiling():this._stopProfiling())),this._setting.get()&&this._startProfiling()}run(){return Promise.resolve()}modelAdded(e){e.startSampling(1e4)}modelRemoved(e){}async _startProfiling(){if(this._running)return;this._running=!0;const e=this._sessionId;y.TargetManager.instance().observeModels(T.HeapProfilerModel,this),y.TargetManager.instance().addModelListener(b.ResourceTreeModel,b.Events.Load,this._loadEventFired,this);do{const t=y.TargetManager.instance().models(T.HeapProfilerModel),i=await Promise.all(t.map((e=>e.getSamplingProfile())));if(e!==this._sessionId)break;se.instance().reset();for(let e=0;e<i.length;++e){const s=i[e];s&&se.instance().appendHeapProfile(s,t[e].target())}await Promise.race([new Promise((e=>setTimeout(e,p.isUnderTest()?10:5e3))),new Promise((e=>{this._loadEventCallback=e}))])}while(e===this._sessionId);y.TargetManager.instance().unobserveModels(T.HeapProfilerModel,this),y.TargetManager.instance().removeModelListener(b.ResourceTreeModel,b.Events.Load,this._loadEventFired,this);for(const e of y.TargetManager.instance().models(T.HeapProfilerModel))e.stopSampling();se.instance().reset()}_stopProfiling(){this._running&&(this._running=!1,this._sessionId++)}_loadEventFired(){this._loadEventCallback()}}});const le={lowest:"Lowest",low:"Low",medium:"Medium",high:"High",highest:"Highest"},he=v.registerUIStrings("perf_ui/NetworkPriorities.js",le),de=v.getLocalizedString.bind(void 0,he);const ce=new Map;let _e;function me(){if(_e)return _e;const e=new Map;return e.set(Protocol.Network.ResourcePriority.VeryLow,de(le.lowest)),e.set(Protocol.Network.ResourcePriority.Low,de(le.low)),e.set(Protocol.Network.ResourcePriority.Medium,de(le.medium)),e.set(Protocol.Network.ResourcePriority.High,de(le.high)),e.set(Protocol.Network.ResourcePriority.VeryHigh,de(le.highest)),_e=e,e}const ue=new Map;var ge=Object.freeze({__proto__:null,UIStrings:le,uiLabelForNetworkPriority:function(e){return me().get(e)||""},uiLabelToNetworkPriority:function(e){return 0===ce.size&&me().forEach(((e,t)=>ce.set(e,t))),ce.get(e)||""},priorityUILabelMap:me,networkPriorityWeight:function(e){return 0===ue.size&&(ue.set(Protocol.Network.ResourcePriority.VeryLow,1),ue.set(Protocol.Network.ResourcePriority.Low,2),ue.set(Protocol.Network.ResourcePriority.Medium,3),ue.set(Protocol.Network.ResourcePriority.High,4),ue.set(Protocol.Network.ResourcePriority.VeryHigh,5)),ue.get(e)||0}});const fe={overviewGridWindow:"Overview grid window",leftResizer:"Left Resizer",rightResizer:"Right Resizer"},pe=v.registerUIStrings("perf_ui/OverviewGrid.js",fe),ve=v.getLocalizedString.bind(void 0,pe);class we{constructor(e,t){this.element=document.createElement("div"),this.element.id=e+"-overview-container",this._grid=new R,this._grid.element.id=e+"-overview-grid",this._grid.setScrollTop(0),this.element.appendChild(this._grid.element),this._window=new Ee(this.element,this._grid.dividersLabelBarElement,t)}clientWidth(){return this.element.clientWidth}updateDividers(e){this._grid.updateDividers(e)}addEventDividers(e){this._grid.addEventDividers(e)}removeEventDividers(){this._grid.removeEventDividers()}reset(){this._window.reset()}windowLeft(){return this._window.windowLeft||0}windowRight(){return this._window.windowRight||0}setWindow(e,t){this._window._setWindow(e,t)}addEventListener(e,t,i){return this._window.addEventListener(e,t,i)}setClickHandler(e){this._window.setClickHandler(e)}zoom(e,t){this._window._zoom(e,t)}setResizeEnabled(e){this._window.setEnabled(e)}}class Ee extends s.ObjectWrapper{constructor(e,t,i){super(),this._parentElement=e,h.markAsGroup(this._parentElement),this._calculator=i,h.setAccessibleName(this._parentElement,ve(fe.overviewGridWindow)),d.installDragHandle(this._parentElement,this._startWindowSelectorDragging.bind(this),this._windowSelectorDragging.bind(this),this._endWindowSelectorDragging.bind(this),"text",null),t&&d.installDragHandle(t,this._startWindowDragging.bind(this),this._windowDragging.bind(this),null,"-webkit-grabbing","-webkit-grab"),this._parentElement.addEventListener("wheel",this._onMouseWheel.bind(this),!0),this._parentElement.addEventListener("dblclick",this._resizeWindowMaximum.bind(this),!0),a.appendStyle(this._parentElement,"perf_ui/overviewGrid.css",{enableLegacyPatching:!0}),this._leftResizeElement=e.createChild("div","overview-grid-window-resizer"),d.installDragHandle(this._leftResizeElement,this._resizerElementStartDragging.bind(this),this._leftResizeElementDragging.bind(this),null,"ew-resize"),this._rightResizeElement=e.createChild("div","overview-grid-window-resizer"),d.installDragHandle(this._rightResizeElement,this._resizerElementStartDragging.bind(this),this._rightResizeElementDragging.bind(this),null,"ew-resize"),h.setAccessibleName(this._leftResizeElement,ve(fe.leftResizer)),h.markAsSlider(this._leftResizeElement);this._leftResizeElement.addEventListener("keydown",(e=>this._handleKeyboardResizing(e,!1))),h.setAccessibleName(this._rightResizeElement,ve(fe.rightResizer)),h.markAsSlider(this._rightResizeElement);this._rightResizeElement.addEventListener("keydown",(e=>this._handleKeyboardResizing(e,!0))),this._rightResizeElement.addEventListener("focus",this._onRightResizeElementFocused.bind(this)),this._leftCurtainElement=e.createChild("div","window-curtain-left"),this._rightCurtainElement=e.createChild("div","window-curtain-right"),this.reset(),this._overviewWindowSelector,this._offsetLeft,this._dragStartPoint,this._dragStartLeft,this._dragStartRight}_onRightResizeElementFocused(){this._parentElement.scrollLeft=0}reset(){this.windowLeft=0,this.windowRight=1,this.setEnabled(!0),this._updateCurtains()}setEnabled(e){this._enabled=e,this._rightResizeElement.tabIndex=e?0:-1,this._leftResizeElement.tabIndex=e?0:-1}setClickHandler(e){this._clickHandler=e}_resizerElementStartDragging(e){const t=e,i=e.target;return!!this._enabled&&(this._resizerParentOffsetLeft=t.pageX-t.offsetX-i.offsetLeft,e.stopPropagation(),!0)}_leftResizeElementDragging(e){const t=e;this._resizeWindowLeft(t.pageX-(this._resizerParentOffsetLeft||0)),e.preventDefault()}_rightResizeElementDragging(e){const t=e;this._resizeWindowRight(t.pageX-(this._resizerParentOffsetLeft||0)),e.preventDefault()}_handleKeyboardResizing(e,t){const i=e,s=e.target;let r=!1;if("ArrowLeft"===i.key||"ArrowRight"===i.key){"ArrowRight"===i.key&&(r=!0);const n=this._getNewResizerPosition(s.offsetLeft,r,i.ctrlKey);t?this._resizeWindowRight(n):this._resizeWindowLeft(n),e.consume(!0)}}_getNewResizerPosition(e,t,i){let s,r=i?10:2;r=t?r:-Math.abs(r);return s=e+3.5+r,t&&s<10?s=10:!t&&s>this._parentElement.clientWidth-10&&(s=this._parentElement.clientWidth-10),s}_startWindowSelectorDragging(e){if(!this._enabled)return!1;const t=e;this._offsetLeft=this._parentElement.totalOffsetLeft();const i=t.x-this._offsetLeft;return this._overviewWindowSelector=new Te(this._parentElement,i),!0}_windowSelectorDragging(e){if(!this._overviewWindowSelector)return;const t=e;this._overviewWindowSelector._updatePosition(t.x-this._offsetLeft),e.preventDefault()}_endWindowSelectorDragging(e){if(!this._overviewWindowSelector)return;const t=e,i=this._overviewWindowSelector._close(t.x-this._offsetLeft);delete this._overviewWindowSelector;if(i.end-i.start<3){if(this._clickHandler&&this._clickHandler.call(null,e))return;const t=i.end;i.start=Math.max(0,t-7),i.end=Math.min(this._parentElement.clientWidth,t+7)}else i.end-i.start<14&&(this._parentElement.clientWidth-i.end>14?i.end=i.start+14:i.start=i.end-14);this._setWindowPosition(i.start,i.end)}_startWindowDragging(e){const t=e;return this._dragStartPoint=t.pageX,this._dragStartLeft=this.windowLeft||0,this._dragStartRight=this.windowRight||0,e.stopPropagation(),!0}_windowDragging(e){const t=e;t.preventDefault();let i=(t.pageX-this._dragStartPoint)/this._parentElement.clientWidth;this._dragStartLeft+i<0&&(i=-this._dragStartLeft),this._dragStartRight+i>1&&(i=1-this._dragStartRight),this._setWindow(this._dragStartLeft+i,this._dragStartRight+i)}_resizeWindowLeft(e){e<10?e=0:e>this._rightResizeElement.offsetLeft-4&&(e=this._rightResizeElement.offsetLeft-4),this._setWindowPosition(e,null)}_resizeWindowRight(e){e>this._parentElement.clientWidth-10?e=this._parentElement.clientWidth:e<this._leftResizeElement.offsetLeft+14&&(e=this._leftResizeElement.offsetLeft+14),this._setWindowPosition(null,e)}_resizeWindowMaximum(){this._setWindowPosition(0,this._parentElement.clientWidth)}_getRawSliderValue(e){if(!this._calculator)throw new Error("No calculator to calculate boundaries");const t=this._calculator.minimumBoundary(),i=this._calculator.maximumBoundary()-t;return e?t+i*(this.windowLeft||0):t+i*(this.windowRight||0)}_updateResizeElementPositionValue(e,t){const i=e.toFixed(2),s=t.toFixed(2);h.setAriaValueNow(this._leftResizeElement,i),h.setAriaValueNow(this._rightResizeElement,s);const r=Number(s)-.5,n=Number(i)+.5;h.setAriaValueMinMax(this._leftResizeElement,"0",r.toString()),h.setAriaValueMinMax(this._rightResizeElement,n.toString(),"100")}_updateResizeElementPositionLabels(){if(!this._calculator)return;const e=this._calculator.formatValue(this._getRawSliderValue(!0)),t=this._calculator.formatValue(this._getRawSliderValue(!1));h.setAriaValueText(this._leftResizeElement,String(e)),h.setAriaValueText(this._rightResizeElement,String(t))}_updateResizeElementPercentageLabels(e,t){h.setAriaValueText(this._leftResizeElement,e),h.setAriaValueText(this._rightResizeElement,t)}_calculateWindowPosition(){return{rawStartValue:Number(this._getRawSliderValue(!0)),rawEndValue:Number(this._getRawSliderValue(!1))}}_setWindow(e,t){let i;this.windowLeft=e,this.windowRight=t,this._updateCurtains(),this._calculator&&(i=this._calculateWindowPosition()),this.dispatchEventToListeners(ye.WindowChanged,i)}_updateCurtains(){const e=this.windowLeft||0,t=this.windowRight||0;let i=e,s=t;const r=s-i;if(0!==this._parentElement.clientWidth){const n=r*this._parentElement.clientWidth,o=7;if(n<o){const a=o/n;i=(t+e-r*a)/2,s=(t+e+r*a)/2}}const n=100*i,o=100*s,a=100-100*s,l=n+"%",h=o+"%";this._leftResizeElement.style.left=l,this._rightResizeElement.style.left=h,this._leftCurtainElement.style.width=l,this._rightCurtainElement.style.width=a+"%",this._updateResizeElementPositionValue(n,o),this._calculator?this._updateResizeElementPositionLabels():this._updateResizeElementPercentageLabels(l,h)}_setWindowPosition(e,t){const i=this._parentElement.clientWidth,s="number"==typeof e?e/i:this.windowLeft,r="number"==typeof t?t/i:this.windowRight;this._setWindow(s||0,r||0)}_onMouseWheel(e){const t=e;if(this._enabled){if(t.deltaY){const e=1.1,i=1/53,s=t.offsetX/this._parentElement.clientWidth;this._zoom(Math.pow(e,t.deltaY*i),s)}if(t.deltaX){let e=Math.round(.3*t.deltaX);const i=this._leftResizeElement.offsetLeft+3.5,s=this._rightResizeElement.offsetLeft+3.5;i-e<0&&(e=i),s-e>this._parentElement.clientWidth&&(e=s-this._parentElement.clientWidth),this._setWindowPosition(i-e,s-e),t.preventDefault()}}}_zoom(e,t){let i=this.windowLeft||0,s=this.windowRight||0;const r=s-i;let o=e*r;o>1&&(o=1,e=o/r),i=t+(i-t)*e,i=n.clamp(i,0,1-o),s=t+(s-t)*e,s=n.clamp(s,o,1),this._setWindow(i,s)}}const ye={WindowChanged:Symbol("WindowChanged")};class Te{constructor(e,t){this._startPosition=t,this._width=e.offsetWidth,this._windowSelector=document.createElement("div"),this._windowSelector.className="overview-grid-window-selector",this._windowSelector.style.left=this._startPosition+"px",this._windowSelector.style.right=this._width-this._startPosition+"px",e.appendChild(this._windowSelector)}_close(e){return e=Math.max(0,Math.min(e,this._width)),this._windowSelector.remove(),this._startPosition<e?{start:this._startPosition,end:e}:{start:e,end:this._startPosition}}_updatePosition(e){(e=Math.max(0,Math.min(e,this._width)))<this._startPosition?(this._windowSelector.style.left=e+"px",this._windowSelector.style.right=this._width-this._startPosition+"px"):(this._windowSelector.style.left=this._startPosition+"px",this._windowSelector.style.right=this._width-e+"px")}}var Se=Object.freeze({__proto__:null,UIStrings:fe,OverviewGrid:we,MinSelectableSize:14,WindowScrollSpeedFactor:.3,ResizerOffset:3.5,OffsetFromWindowEnds:10,Window:Ee,Events:ye,WindowSelector:Te});const{render:be,html:xe,svg:Le}=P,Ce={total:"Total"},Pe=v.registerUIStrings("perf_ui/PieChart.ts",Ce),De=v.getLocalizedString.bind(void 0,Pe);class Re extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.chartName="",this.size=0,this.formatter=e=>String(e),this.showLegend=!1,this.total=0,this.slices=[],this.totalSelected=!0,this.sliceSelected=-1,this.innerR=.618,this.lastAngle=-Math.PI/2}set data(e){this.chartName=e.chartName,this.size=e.size,this.formatter=e.formatter,this.showLegend=e.showLegend,this.total=e.total,this.slices=e.slices,this.render()}render(){this.lastAngle=-Math.PI/2;const e=xe`
+      <style>
+        .root {
+          align-items: center;
+          display: flex;
+          min-width: fit-content;
+          white-space: nowrap;
+        }
+
+        .chart-root {
+          position: relative;
+          overflow: hidden;
+        }
+
+        .pie-chart-foreground {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          z-index: 10;
+          top: 0;
+          display: flex;
+          pointer-events: none;
+        }
+
+        .pie-chart-total {
+          margin: auto;
+          padding: 2px 5px;
+          pointer-events: auto;
+        }
+
+        :focus {
+          outline-width: 0;
+        }
+
+        .pie-chart-total.selected {
+          font-weight: bold;
+        }
+
+        .chart-root .slice.selected {
+          stroke: var(--selection-bg-color);
+          stroke-opacity: 1;
+          stroke-width: 0.04;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+
+        .pie-chart-legend {
+          margin-left: 30px;
+        }
+
+        .pie-chart-legend-row {
+          margin: 5px 2px 5px auto;
+          padding-right: 25px;
+        }
+
+        .pie-chart-legend-row.selected {
+          font-weight: bold;
+        }
+
+        .pie-chart-legend-row:focus-visible {
+          box-shadow: 0 0 0 2px var(--selection-bg-color) !important;
+        }
+
+        .pie-chart-swatch {
+          display: inline-block;
+          width: 11px;
+          height: 11px;
+          margin: 0 6px;
+          top: 1px;
+          position: relative;
+          border: 1px solid rgb(100 100 100 / 20%);
+        }
+
+        .pie-chart-swatch.pie-chart-empty-swatch {
+          border: none;
+        }
+
+        .pie-chart-name {
+          display: inline-block;
+        }
+
+        .pie-chart-size {
+          display: inline-block;
+          text-align: right;
+          width: 70px;
+        }
+
+        @media (forced-colors: active) {
+          .pie-chart-swatch {
+            forced-color-adjust: none;
+            border-color: ButtonText;
+          }
+
+          .pie-chart-total {
+            forced-color-adjust: none;
+            background-color: canvas;
+          }
+        }
+      </style>
+      <div class="root" role="group" @keydown=${this.onKeyDown} aria-label=${this.chartName}>
+        <div class="chart-root" style="width: ${this.size}px; height: ${this.size}px;">
+          ${Le`
+          <svg>
+          <g transform="scale(${this.size/2}) translate(1, 1) scale(0.99, 0.99)">
+            <circle r="1" stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
+            <circle r=${this.innerR} stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
+            ${this.slices.map(((e,t)=>{const i=this.sliceSelected===t,s=i&&!this.showLegend?"0":"-1";return Le`<path class="slice ${i?"selected":""}"
+                  @click=${this.onSliceClicked(t)} tabIndex=${s}
+                  fill=${e.color} d=${this.getPathStringForSlice(e)}
+                  aria-label=${e.title} id=${i?"selectedSlice":""}></path>`}))}
+            <!-- This is so that the selected slice is re-drawn on top, to avoid re-ordering slices
+            just to render them properly. -->
+            <use href="#selectedSlice" />
+            </g>
+          </svg>
+          `}
+          <div class="pie-chart-foreground">
+            <div class="pie-chart-total ${this.totalSelected?"selected":""}" @click=${this.selectTotal}
+                tabIndex=${this.totalSelected&&!this.showLegend?"1":"-1"}>
+              ${this.total?this.formatter(this.total):""}
+            </div>
+          </div>
+        </div>
+        ${this.showLegend?xe`
+        <div class="pie-chart-legend">
+          ${this.slices.map(((e,t)=>{const i=this.sliceSelected===t;return xe`
+              <div class="pie-chart-legend-row ${i?"selected":""}"
+                  @click=${this.onSliceClicked(t)} tabIndex=${i?"0":"-1"}>
+                <div class="pie-chart-size">${this.formatter(e.value)}</div>
+                <div class="pie-chart-swatch" style="background-color: ${e.color};"></div>
+                <div class="pie-chart-name">${e.title}</div>
+              </div>`}))}
+          <div class="pie-chart-legend-row ${this.totalSelected?"selected":""}"
+              @click=${this.selectTotal} tabIndex=${this.totalSelected?"0":"-1"}>
+            <div class="pie-chart-size">${this.formatter(this.total)}</div>
+            <div class="pie-chart-swatch pie-chart-empty-swatch"></div>
+            <div class="pie-chart-name">${De(Ce.total)}</div>
+          </div>
+        </div>
+        `:""}
+    `;be(e,this.shadow,{eventContext:this})}onSliceClicked(e){return()=>{this.selectSlice(e)}}selectSlice(e){this.totalSelected=!1,this.sliceSelected=e,this.render()}selectTotal(){this.totalSelected=!0,this.sliceSelected=-1,this.render()}selectAndFocusTotal(){this.selectTotal();const e=this.shadow.querySelector(".pie-chart-legend > :last-child");e&&e.focus()}selectAndFocusSlice(e){this.selectSlice(e);const t=this.shadow.querySelector(`.pie-chart-legend > :nth-child(${e+1})`);t&&t.focus()}focusNextElement(){this.totalSelected?this.selectAndFocusSlice(0):this.sliceSelected===this.slices.length-1?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected+1)}focusPreviousElement(){this.totalSelected?this.selectAndFocusSlice(this.slices.length-1):0===this.sliceSelected?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected-1)}onKeyDown(e){let t=!1;"ArrowDown"===e.key?(this.focusNextElement(),t=!0):"ArrowUp"===e.key&&(this.focusPreviousElement(),t=!0),t&&(e.stopImmediatePropagation(),e.preventDefault())}getPathStringForSlice(e){let t=e.value/this.total*2*Math.PI;if(!isFinite(t))return;t=Math.min(t,2*Math.PI*.9999);const i=Math.cos(this.lastAngle),s=Math.sin(this.lastAngle);this.lastAngle+=t;const r=Math.cos(this.lastAngle),n=Math.sin(this.lastAngle),o=this.innerR,a=r*o,l=n*o,h=i*o,d=s*o,c=t>Math.PI?1:0;return`M${i},${s} A1,1,0,${c},1,${r},${n} L${a},${l} A${o},${o},0,${c},0,${h},${d} Z`}}customElements.get("devtools-perf-piechart")||customElements.define("devtools-perf-piechart",Re);var ke=Object.freeze({__proto__:null,UIStrings:Ce,PieChart:Re});class Me extends l.VBox{constructor(e){super(),this.element.id=e+"-overview-pane",this._overviewCalculator=new Fe,this._overviewGrid=new we(e,this._overviewCalculator),this.element.appendChild(this._overviewGrid.element),this._cursorArea=this._overviewGrid.element.createChild("div","overview-grid-cursor-area"),this._cursorElement=this._overviewGrid.element.createChild("div","overview-grid-cursor-position"),this._cursorArea.addEventListener("mousemove",this._onMouseMove.bind(this),!0),this._cursorArea.addEventListener("mouseleave",this._hideCursor.bind(this),!0),this._overviewGrid.setResizeEnabled(!1),this._overviewGrid.addEventListener(ye.WindowChanged,this._onWindowChanged,this),this._overviewGrid.setClickHandler(this._onClick.bind(this)),this._overviewControls=[],this._markers=new Map,this._overviewInfo=new Ie(this._cursorElement),this._updateThrottler=new r.Throttler(100),this._cursorEnabled=!1,this._cursorPosition=0,this._lastWidth=0,this._windowStartTime=0,this._windowEndTime=1/0,this._muteOnWindowChanged=!1}_onMouseMove(e){if(!this._cursorEnabled)return;const t=e,i=e.target;this._cursorPosition=t.offsetX+i.offsetLeft,this._cursorElement.style.left=this._cursorPosition+"px",this._cursorElement.style.visibility="visible",this._overviewInfo.setContent(this._buildOverviewInfo())}async _buildOverviewInfo(){const e=this.element.ownerDocument,t=this._cursorPosition,i=await Promise.all(this._overviewControls.map((e=>e.overviewInfoPromise(t)))),s=e.createDocumentFragment(),r=i.filter((e=>null!==e));return s.append(...r),s}_hideCursor(){this._cursorElement.style.visibility="hidden",this._overviewInfo.hide()}wasShown(){this._update()}willHide(){this._overviewInfo.hide()}onResize(){const e=this.element.offsetWidth;e!==this._lastWidth&&(this._lastWidth=e,this.scheduleUpdate())}setOverviewControls(e){for(let e=0;e<this._overviewControls.length;++e)this._overviewControls[e].dispose();for(let t=0;t<e.length;++t)e[t].setCalculator(this._overviewCalculator),e[t].show(this._overviewGrid.element);this._overviewControls=e,this._update()}setBounds(e,t){this._overviewCalculator.setBounds(e,t),this._overviewGrid.setResizeEnabled(!0),this._cursorEnabled=!0}setNavStartTimes(e){this._overviewCalculator.setNavStartTimes(e)}scheduleUpdate(){this._updateThrottler.schedule((async()=>{this._update()}))}_update(){if(this.isShowing()){this._overviewCalculator.setDisplayWidth(this._overviewGrid.clientWidth());for(let e=0;e<this._overviewControls.length;++e)this._overviewControls[e].update();this._overviewGrid.updateDividers(this._overviewCalculator),this._updateMarkers(),this._updateWindow()}}setMarkers(e){this._markers=e}_updateMarkers(){const e=new Map;for(const t of this._markers.keys()){const i=this._markers.get(t),s=Math.round(this._overviewCalculator.computePosition(t));e.has(s)||(e.set(s,i),i.style.left=s+"px")}this._overviewGrid.removeEventDividers(),this._overviewGrid.addEventDividers([...e.values()])}reset(){this._windowStartTime=0,this._windowEndTime=1/0,this._overviewCalculator.reset(),this._overviewGrid.reset(),this._overviewGrid.setResizeEnabled(!1),this._cursorEnabled=!1,this._hideCursor(),this._markers=new Map;for(const e of this._overviewControls)e.reset();this._overviewInfo.hide(),this.scheduleUpdate()}_onClick(e){return this._overviewControls.some((t=>t.onClick(e)))}_onWindowChanged(e){if(this._muteOnWindowChanged)return;if(!this._overviewControls.length)return;this._windowStartTime=e.data.rawStartValue,this._windowEndTime=e.data.rawEndValue;const t={startTime:this._windowStartTime,endTime:this._windowEndTime};this.dispatchEventToListeners(Ge.WindowChanged,t)}setWindowTimes(e,t){e===this._windowStartTime&&t===this._windowEndTime||(this._windowStartTime=e,this._windowEndTime=t,this._updateWindow(),this.dispatchEventToListeners(Ge.WindowChanged,{startTime:e,endTime:t}))}_updateWindow(){if(!this._overviewControls.length)return;const e=this._overviewCalculator.minimumBoundary(),t=this._overviewCalculator.maximumBoundary()-e,i=e>0,s=i&&this._windowStartTime?Math.min((this._windowStartTime-e)/t,1):0,r=i&&this._windowEndTime<1/0?(this._windowEndTime-e)/t:1;this._muteOnWindowChanged=!0,this._overviewGrid.setWindow(s,r),this._muteOnWindowChanged=!1}}const Ge={WindowChanged:Symbol("WindowChanged")};class Fe{constructor(){this.reset(),this._minimumBoundary,this._maximumBoundary,this._workingArea}computePosition(e){return(e-this._minimumBoundary)/this.boundarySpan()*this._workingArea}positionToTime(e){return e/this._workingArea*this.boundarySpan()+this._minimumBoundary}setBounds(e,t){this._minimumBoundary=e,this._maximumBoundary=t}setNavStartTimes(e){this._navStartTimes=e}setDisplayWidth(e){this._workingArea=e}reset(){this.setBounds(0,100)}formatValue(e,t){if(this._navStartTimes){const t=Array.from(this._navStartTimes.values());for(let i=t.length-1;i>=0;i--)if(e>t[i].startTime){e-=t[i].startTime-this.zeroTime();break}}return Number.preciseMillisToString(e-this.zeroTime(),t)}maximumBoundary(){return this._maximumBoundary}minimumBoundary(){return this._minimumBoundary}zeroTime(){return this._minimumBoundary}boundarySpan(){return this._maximumBoundary-this._minimumBoundary}}class Be extends l.VBox{constructor(){super(),this._calculator=null,this._canvas=this.element.createChild("canvas","fill"),this._context=this._canvas.getContext("2d")}width(){return this._canvas.width}height(){return this._canvas.height}context(){if(!this._context)throw new Error("Unable to retrieve canvas context");return this._context}calculator(){return this._calculator}update(){this.resetCanvas()}dispose(){this.detach()}reset(){}overviewInfoPromise(e){return Promise.resolve(null)}setCalculator(e){this._calculator=e}onClick(e){return!1}resetCanvas(){this.element.clientWidth&&this.setCanvasSize(this.element.clientWidth,this.element.clientHeight)}setCanvasSize(e,t){this._canvas.width=e*window.devicePixelRatio,this._canvas.height=t*window.devicePixelRatio}}class Ie{constructor(e){this._anchorElement=e,this._glassPane=new g.GlassPane,this._glassPane.setPointerEventsBehavior(g.PointerEventsBehavior.PierceContents),this._glassPane.setMarginBehavior(g.MarginBehavior.Arrow),this._glassPane.setSizeBehavior(g.SizeBehavior.MeasureContent),this._visible=!1,this._element=a.createShadowRootWithCoreStyles(this._glassPane.contentElement,{cssFile:"perf_ui/timelineOverviewInfo.css",enableLegacyPatching:!1,delegatesFocus:void 0}).createChild("div","overview-info")}async setContent(e){this._visible=!0;const t=await e;this._visible&&(this._element.removeChildren(),this._element.appendChild(t),this._glassPane.setContentAnchorBox(this._anchorElement.boxInWindow()),this._glassPane.isShowing()||this._glassPane.show(this._anchorElement.ownerDocument))}hide(){this._visible=!1,this._glassPane.hide()}}var ze=Object.freeze({__proto__:null,TimelineOverviewPane:Me,Events:Ge,TimelineOverviewCalculator:Fe,TimelineOverview:class{show(e,t){}update(){}dispose(){}reset(){}overviewInfoPromise(e){throw new Error("Not implemented")}onClick(e){throw new Error("Not implemented")}setCalculator(e){}},TimelineOverviewBase:Be,OverviewInfo:Ie});export{A as ChartViewport,j as FilmStripView,O as FlameChart,q as GCActionDelegate,oe as LineLevelProfile,ae as LiveHeapProfile,ge as NetworkPriorities,Se as OverviewGrid,ke as PieChart,k as TimelineGrid,ze as TimelineOverviewPane};

package/static/devtools/perf_ui/perf_ui_module.js

@@ -0,0 +1 @@
+import*as RootModule from'../root/root.js';RootModule.Runtime.cachedResources.set("perf_ui/chartViewport.css","/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.chart-viewport-v-scroll {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  overflow-x: hidden;\n  z-index: 200;\n  padding-left: 1px;\n}\n\n.chart-viewport-v-scroll.always-show-scrollbar {\n  overflow-y: scroll;\n}\n\n/* force non overlay scrollbars for Mac */\n\n:host-context(.platform-mac) .chart-viewport-v-scroll {\n  right: 2px;\n  top: 3px;\n  bottom: 3px;\n}\n\n:host-context(.platform-mac) ::-webkit-scrollbar {\n  width: 8px;\n}\n\n:host-context(.platform-mac) ::-webkit-scrollbar-thumb {\n  background-color: hsl(0deg 0% 56% / 60%);\n  border-radius: 50px;\n}\n\n:host-context(.platform-mac) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {\n  background-color: hsl(0deg 0% 25% / 60%);\n}\n\n/* force non overlay scrollbars for Aura Overlay Scrollbar enabled */\n\n:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar {\n  width: 10px;\n}\n\n:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar-thumb {\n  background-color: hsl(0deg 0% 0% / 50%);\n}\n\n:host-context(.overlay-scrollbar-enabled) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {\n  background-color: hsl(0deg 0% 0% / 70%);\n}\n\n.chart-viewport-selection-overlay {\n  position: absolute;\n  z-index: 100;\n  background-color: rgb(56 121 217 / 30%);\n  border-color: rgb(16 81 177);\n  border-width: 0 1px;\n  border-style: solid;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  text-align: center;\n}\n\n.chart-viewport-selection-overlay .time-span {\n  white-space: nowrap;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n/*# sourceURL=perf_ui/chartViewport.css */");RootModule.Runtime.cachedResources.set("perf_ui/filmStripView.css","/*\n * Copyright (c) 2015 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.film-strip-view {\n  overflow-x: auto;\n  overflow-y: hidden;\n  align-content: flex-start;\n  min-height: 81px;\n}\n\n.film-strip-view .frame .time {\n  font-size: 10px;\n  margin-top: 2px;\n}\n\n.film-strip-view.time-based .frame .time {\n  display: none;\n}\n\n.film-strip-view .label {\n  margin: auto;\n  font-size: 18px;\n  color: #999;\n}\n\n.film-strip-view .frame {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 4px;\n  flex: none;\n  cursor: pointer;\n}\n\n.film-strip-view .frame .thumbnail {\n  min-width: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  pointer-events: none;\n  margin: 4px 0 2px;\n  border: 2px solid transparent;\n}\n\n.film-strip-view .frame:hover .thumbnail,\n.film-strip-view .frame:focus .thumbnail {\n  border-color: #fbca46;\n}\n\n.film-strip-view .frame .thumbnail img {\n  height: auto;\n  width: auto;\n  max-width: 80px;\n  max-height: 50px;\n  pointer-events: none;\n  box-shadow: 0 0 3px #bbb;\n  flex: 0 0 auto;\n}\n\n.film-strip-view .frame:hover .thumbnail img,\n.film-strip-view .frame:focus .thumbnail img {\n  box-shadow: none;\n}\n\n/*# sourceURL=perf_ui/filmStripView.css */");RootModule.Runtime.cachedResources.set("perf_ui/flameChart.css","/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.flame-chart-main-pane {\n  overflow: hidden;\n}\n\n.flame-chart-marker-highlight-element {\n  position: absolute;\n  top: 1px;\n  height: 18px;\n  width: 6px;\n  margin: 0 -3px;\n  content: \"\";\n  display: block;\n}\n\n.flame-chart-canvas:focus-visible {\n  border-top: 1px solid var(--accent-color);\n  border-bottom: 1px solid var(--accent-color);\n}\n\n.flame-chart-highlight-element {\n  position: absolute;\n  pointer-events: none;\n  background-color: rgb(56 121 217 / 10%);\n}\n\n.flame-chart-selected-element {\n  position: absolute;\n  pointer-events: none;\n  outline: 2px solid var(--selection-bg-color);\n  background-color: rgb(56 121 217 / 10%);\n}\n\n.flame-chart-unfocused-selected-element {\n  outline: 2px solid rgb(123 123 123 / 100%);\n}\n\n.chart-cursor-element {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 100;\n  width: 2px;\n  background-color: var(--selection-bg-color);\n  pointer-events: none;\n}\n\n.flame-chart-entry-info:not(:empty) {\n  z-index: 2000;\n  position: absolute;\n  background-color: var(--color-background);\n  pointer-events: none;\n  padding: 4px 8px;\n  white-space: nowrap;\n  max-width: 80%;\n  box-shadow: var(--drop-shadow);\n}\n\n.flame-chart-entry-info table tr td:empty {\n  padding: 0;\n}\n\n.flame-chart-entry-info table tr td:not(:empty) {\n  padding: 0 5px;\n  white-space: nowrap;\n}\n\n.flame-chart-entry-info table tr td:first-child {\n  font-weight: bold;\n}\n\n.flame-chart-entry-info table tr td span {\n  margin-right: 5px;\n}\n\n/*# sourceURL=perf_ui/flameChart.css */");RootModule.Runtime.cachedResources.set("perf_ui/overviewGrid.css","/*\n * Copyright (c) 2014 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.overview-grid-window-selector {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background-color: rgb(125 173 217 / 50%);\n  z-index: 250;\n  pointer-events: none;\n}\n\n.overview-grid-window-resizer {\n  position: absolute;\n  top: -1px;\n  height: 20px;\n  width: 6px;\n  margin-left: -3px;\n  background-color: rgb(153 153 153);\n  border: 1px solid white;\n  z-index: 500;\n}\n\n.overview-grid-window-resizer:focus-visible {\n  background-color: var(--active-control-bg-color);\n}\n\n.overview-grid-cursor-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 20px;\n  bottom: 0;\n  z-index: 500;\n  cursor: text;\n}\n\n.overview-grid-cursor-position {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: hsl(220deg 95% 50% / 70%);\n  z-index: 500;\n  pointer-events: none;\n  visibility: hidden;\n  overflow: hidden;\n}\n\n.window-curtain-left,\n.window-curtain-right {\n  background-color: hsl(0deg 0% 80% / 50%);\n  position: absolute;\n  top: 0;\n  height: 100%;\n  z-index: 300;\n  pointer-events: none;\n  border: 1px none hsl(0deg 0% 70% / 50%);\n}\n\n.window-curtain-left {\n  left: 0;\n  border-right-style: solid;\n}\n\n.window-curtain-right {\n  right: 0;\n  border-left-style: solid;\n}\n\n@media (forced-colors: active) {\n  .overview-grid-cursor-position {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  .window-curtain-left,\n  .window-curtain-right {\n    background-color: transparent;\n    border-color: ButtonText;\n  }\n\n  .overview-grid-window-resizer {\n    background-color: ButtonText;\n  }\n\n  .overview-grid-window-resizer:hover,\n  .overview-grid-window-resizer:active,\n  .overview-grid-window-resizer:focus-visible {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n}\n\n/*# sourceURL=perf_ui/overviewGrid.css */");RootModule.Runtime.cachedResources.set("perf_ui/timelineGrid.css","/*\n * Copyright (c) 2015 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.resources-dividers {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  z-index: -100;\n  bottom: 0;\n}\n\n.resources-event-dividers {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 100%;\n  top: 0;\n  z-index: 300;\n  pointer-events: none;\n}\n\n.resources-dividers-label-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  background-color: rgb(255 255 255 / 85%);\n  background-clip: padding-box;\n  height: 20px;\n  z-index: 200;\n  pointer-events: none;\n  overflow: hidden;\n}\n\n.resources-divider {\n  position: absolute;\n  width: 1px;\n  top: 0;\n  bottom: 0;\n  background-color: rgb(0 0 0 / 10%);\n}\n\n.resources-event-divider {\n  position: absolute;\n  width: 1px;\n  top: 0;\n  bottom: 0;\n  z-index: 300;\n}\n\n.resources-divider-label {\n  position: absolute;\n  top: 4px;\n  right: 3px;\n  font-size: 80%;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.timeline-grid-header {\n  height: 20px;\n  pointer-events: none;\n}\n\n/*# sourceURL=perf_ui/timelineGrid.css */");RootModule.Runtime.cachedResources.set("perf_ui/timelineOverviewInfo.css","/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.overview-info:not(:empty) {\n  display: flex;\n  background: var(--color-background);\n  box-shadow: var(--drop-shadow);\n  padding: 3px;\n}\n\n.overview-info .frame .time {\n  display: none;\n}\n\n.overview-info .frame .thumbnail img {\n  max-width: 50vw;\n  max-height: 50vh;\n}\n\n/*# sourceURL=perf_ui/timelineOverviewInfo.css */");

package/static/devtools/performance_monitor/performance_monitor-legacy.js

@@ -0,0 +1 @@
+import{PerformanceMonitor as o}from"./performance_monitor.js";self.PerformanceMonitor=self.PerformanceMonitor||{},PerformanceMonitor=PerformanceMonitor||{},PerformanceMonitor.PerformanceMonitor=o.PerformanceMonitorImpl,PerformanceMonitor.PerformanceMonitor.Format=o.Format,PerformanceMonitor.PerformanceMonitor.ControlPane=o.ControlPane,PerformanceMonitor.PerformanceMonitor.ControlPane.Events=o.Events,PerformanceMonitor.PerformanceMonitor.MetricIndicator=o.MetricIndicator,PerformanceMonitor.PerformanceMonitor.MetricIndicator._format=o.format;

package/static/devtools/performance_monitor/performance_monitor-meta.js

@@ -0,0 +1 @@
+import{i18n as o}from"../i18n/i18n.js";import{Runtime as r}from"../root/root.js";import{ViewManager as e}from"../ui/ui.js";const t={performanceMonitor:"Performance monitor",performance:"performance",systemMonitor:"system monitor",monitor:"monitor",activity:"activity",metrics:"metrics",showPerformanceMonitor:"Show Performance monitor"},i=o.registerUIStrings("performance_monitor/performance_monitor-meta.ts",t),n=o.getLazilyComputedLocalizedString.bind(void 0,i);let m;e.registerViewExtension({location:"drawer-view",id:"performance.monitor",title:n(t.performanceMonitor),commandPrompt:n(t.showPerformanceMonitor),persistence:"closeable",order:100,loadView:async()=>(await async function(){return m||(await r.Runtime.instance().loadModulePromise("performance_monitor"),m=await import("./performance_monitor.js")),m}()).PerformanceMonitor.PerformanceMonitorImpl.instance(),tags:[n(t.performance),n(t.systemMonitor),n(t.monitor),n(t.activity),n(t.metrics)]});export{t as UIStrings};

package/static/devtools/performance_monitor/performance_monitor.js

@@ -0,0 +1 @@
+import{Color as t,ObjectWrapper as e,Settings as i}from"../common/common.js";import{Platform as s}from"../host/host.js";import{i18n as o}from"../i18n/i18n.js";import{NumberUtilities as r}from"../platform/platform.js";import{SDKModel as n,PerformanceMetricsModel as a}from"../sdk/sdk.js";import{ThemeSupport as l}from"../theme_support/theme_support.js";import{Widget as c,ARIAUtils as h,Icon as m}from"../ui/ui.js";const d={graphsDisplayingARealtimeViewOf:"Graphs displaying a real-time view of performance metrics",paused:"Paused",cpuUsage:"CPU usage",jsHeapSize:"JS heap size",domNodes:"DOM Nodes",jsEventListeners:"JS event listeners",documents:"Documents",documentFrames:"Document Frames",layoutsSec:"Layouts / sec",styleRecalcsSec:"Style recalcs / sec"},_=o.registerUIStrings("performance_monitor/PerformanceMonitor.ts",d),g=o.getLocalizedString.bind(void 0,_);let f,p,u;class v extends c.HBox{constructor(){super(!0),this.registerRequiredCSS("performance_monitor/performanceMonitor.css",{enableLegacyPatching:!0}),this.contentElement.classList.add("perfmon-pane"),this._metricsBuffer=[],this._pixelsPerMs=.01,this._pollIntervalMs=500,this._scaleHeight=16,this._graphHeight=90,this._gridColor=l.instance().patchColorText("rgba(0, 0, 0, 0.08)",l.ColorUsage.Foreground),this._controlPane=new w(this.contentElement);const t=this.contentElement.createChild("div","perfmon-chart-container");this._canvas=t.createChild("canvas"),this._canvas.tabIndex=-1,h.setAccessibleName(this._canvas,g(d.graphsDisplayingARealtimeViewOf)),this.contentElement.createChild("div","perfmon-chart-suspend-overlay fill").createChild("div").textContent=g(d.paused),this._controlPane.addEventListener("MetricChanged",this._recalcChartHeight,this),n.TargetManager.instance().observeModels(a.PerformanceMetricsModel,this)}static instance(t={forceNew:null}){const{forceNew:e}=t;return f&&!e||(f=new v),f}wasShown(){this._model&&(n.TargetManager.instance().addEventListener(n.Events.SuspendStateChanged,this._suspendStateChanged,this),this._model.enable(),this._suspendStateChanged())}willHide(){this._model&&(n.TargetManager.instance().removeEventListener(n.Events.SuspendStateChanged,this._suspendStateChanged,this),this._stopPolling(),this._model.disable())}modelAdded(t){this._model||(this._model=t,this.isShowing()&&this.wasShown())}modelRemoved(t){this._model===t&&(this.isShowing()&&this.willHide(),this._model=null)}_suspendStateChanged(){const t=n.TargetManager.instance().allTargetsSuspended();t?this._stopPolling():this._startPolling(),this.contentElement.classList.toggle("suspended",t)}_startPolling(){this._startTimestamp=0,this._pollTimer=window.setInterval((()=>this._poll()),this._pollIntervalMs),this.onResize();const t=()=>{this._draw(),this._animationId=this.contentElement.window().requestAnimationFrame((()=>{t()}))};t()}_stopPolling(){window.clearInterval(this._pollTimer),this.contentElement.window().cancelAnimationFrame(this._animationId),this._metricsBuffer=[]}async _poll(){if(!this._model)return;const t=await this._model.requestMetrics(),e=t.timestamp,i=t.metrics;this._metricsBuffer.push({timestamp:e,metrics:i});const s=this._width/this._pixelsPerMs,o=Math.ceil(s/this._pollIntervalMs*2);this._metricsBuffer.length>2*o&&this._metricsBuffer.splice(0,this._metricsBuffer.length-o),this._controlPane.updateMetrics(i)}_draw(){const t=this._canvas.getContext("2d");t.save(),t.scale(window.devicePixelRatio,window.devicePixelRatio),t.clearRect(0,0,this._width,this._height),t.save(),t.translate(0,this._scaleHeight);for(const e of this._controlPane.charts())this._controlPane.isActive(e.metrics[0].name)&&(this._drawChart(t,e,this._graphHeight),t.translate(0,this._graphHeight));t.restore(),this._drawHorizontalGrid(t),t.restore()}_drawHorizontalGrid(t){const e=l.instance().patchColorText("rgba(0, 0, 0, 0.02)",l.ColorUsage.Foreground);t.font="10px "+s.fontFamily(),t.fillStyle=l.instance().patchColorText("rgba(0, 0, 0, 0.55)",l.ColorUsage.Foreground);const i=Date.now()/1e3;for(let s=Math.ceil(i);;--s){const o=this._width-(1e3*(i-s)-this._pollIntervalMs)*this._pixelsPerMs;if(o<-50)break;t.beginPath(),t.moveTo(o,0),t.lineTo(o,this._height),s>=0&&s%10==0&&t.fillText(new Date(1e3*s).toLocaleTimeString(),o+4,12),t.strokeStyle=s%10?e:this._gridColor,t.stroke()}}_drawChart(e,i,o){e.save(),e.rect(0,0,this._width,o),e.clip();const r=1.05*this._calcMax(i),n=i.stacked?new Map:null,a=[];for(let t=i.metrics.length-1;t>=0;--t){const e=i.metrics[t];a.push({path:this._buildMetricPath(i,e,o-8,r,t?n:null),color:e.color})}const c=t.Color.parse(l.instance().patchColorText("white",l.ColorUsage.Background));if(c)for(const i of a.reverse()){const s=i.color;e.save();const o=t.Color.parse(s);o&&(e.fillStyle=c.blendWith(o.setAlpha(.2)).asString(null)||"",e.fill(i.path),e.strokeStyle=s,e.lineWidth=.5,e.stroke(i.path),e.restore())}e.fillStyle=l.instance().patchColorText("rgba(0, 0, 0, 0.55)",l.ColorUsage.Foreground),e.font="10px  "+s.fontFamily(),e.fillText(i.title,8,10),this._drawVerticalGrid(e,o-8,r,i),e.restore()}_calcMax(t){if(t.max)return t.max;const e=this._width,i=performance.now()-this._pollIntervalMs-e/this._pixelsPerMs;let s=-1/0;for(const e of t.metrics)for(let t=this._metricsBuffer.length-1;t>=0;--t){const o=this._metricsBuffer[t],r=o.metrics.get(e.name);if(void 0!==r&&(s=Math.max(s,r)),o.timestamp<i)break}if(!this._metricsBuffer.length)return 10;const o=Math.pow(10,Math.floor(Math.log10(s)));s=Math.ceil(s/o/2)*o*2;return t.currentMax=.2*s+.8*(t.currentMax||s),t.currentMax}_drawVerticalGrid(t,e,i,s){let o=Math.pow(10,Math.floor(Math.log10(i)));const r=Math.floor(i/o);1!==r&&r%2==1&&(o*=2);let n=Math.floor(i/o)*o;const a=i,c=e-18;t.fillStyle=l.instance().patchColorText("rgba(0, 0, 0, 0.55)",l.ColorUsage.Foreground),t.strokeStyle=this._gridColor,t.beginPath();for(let e=0;e<2;++e){const e=h(n),i=C._formatNumber(n,s);t.moveTo(0,e),t.lineTo(4,e),t.moveTo(t.measureText(i).width+12,e),t.lineTo(this._width,e),t.fillText(i,8,h(n)+3),n/=2}function h(t){return Math.round(e-c*t/a)+.5}t.stroke(),t.beginPath(),t.moveTo(0,e+.5),t.lineTo(this._width,e+.5),t.strokeStyle=l.instance().patchColorText("rgba(0, 0, 0, 0.2)",l.ColorUsage.Foreground),t.stroke()}_buildMetricPath(t,e,i,s,o){const n=new Path2D,a=i-18;if(a<1)return n;const l=s,c=e.name,h=this._pixelsPerMs,m=performance.now()-this._pollIntervalMs-this._width/h,d=t.smooth;let _=0,g=0,f=0;this._metricsBuffer.length&&(_=(this._metricsBuffer[0].timestamp-m)*h,n.moveTo(_,p(0)),n.lineTo(this._width+5,p(0)),g=p(this._metricsBuffer[this._metricsBuffer.length-1].metrics.get(c)||0),f=this._width+5,n.lineTo(f,g));for(let t=this._metricsBuffer.length-1;t>=0;--t){const e=this._metricsBuffer[t],i=e.timestamp;let s=e.metrics.get(c)||0;o&&(s+=o.get(i)||0,s=r.clamp(s,0,1),o.set(i,s));const a=p(s);if(_=(i-m)*h,d){const t=(f+_)/2;n.bezierCurveTo(t,g,t,a,_,a)}else n.lineTo(_,g),n.lineTo(_,a);if(f=_,g=a,i<m)break}return n;function p(t){return Math.round(i-a*t/l)+.5}}onResize(){super.onResize(),this._width=this._canvas.offsetWidth,this._canvas.width=Math.round(this._width*window.devicePixelRatio),this._recalcChartHeight()}_recalcChartHeight(){let t=this._scaleHeight;for(const e of this._controlPane.charts())this._controlPane.isActive(e.metrics[0].name)&&(t+=this._graphHeight);this._height=Math.ceil(t*window.devicePixelRatio),this._canvas.height=this._height,this._canvas.style.height=this._height/window.devicePixelRatio+"px"}}class w extends e.ObjectWrapper{constructor(t){super(),this.element=t.createChild("div","perfmon-control-pane"),this._enabledChartsSetting=i.Settings.instance().createSetting("perfmonActiveIndicators2",["TaskDuration","JSHeapTotalSize","Nodes"]),this._enabledCharts=new Set(this._enabledChartsSetting.get());const e={color:void 0,format:void 0,currentMax:void 0,max:void 0,smooth:void 0,stacked:void 0};this._chartsInfo=[{...e,title:g(d.cpuUsage),metrics:[{name:"TaskDuration",color:"#999"},{name:"ScriptDuration",color:"orange"},{name:"LayoutDuration",color:"blueviolet"},{name:"RecalcStyleDuration",color:"violet"}],format:"Percent",smooth:!0,stacked:!0,color:"red",max:1,currentMax:void 0},{...e,title:g(d.jsHeapSize),metrics:[{name:"JSHeapTotalSize",color:"#99f"},{name:"JSHeapUsedSize",color:"blue"}],format:"Bytes",color:"blue"},{...e,title:g(d.domNodes),metrics:[{name:"Nodes",color:"green"}]},{...e,title:g(d.jsEventListeners),metrics:[{name:"JSEventListeners",color:"yellowgreen"}]},{...e,title:g(d.documents),metrics:[{name:"Documents",color:"darkblue"}]},{...e,title:g(d.documentFrames),metrics:[{name:"Frames",color:"darkcyan"}]},{...e,title:g(d.layoutsSec),metrics:[{name:"LayoutCount",color:"hotpink"}]},{...e,title:g(d.styleRecalcsSec),metrics:[{name:"RecalcStyleCount",color:"deeppink"}]}];for(const t of this._chartsInfo){t.color&&(t.color=l.instance().patchColorText(t.color,l.ColorUsage.Foreground));for(const e of t.metrics)e.color=l.instance().patchColorText(e.color,l.ColorUsage.Foreground)}this._indicators=new Map;for(const t of this._chartsInfo){const e=t.metrics[0].name,i=this._enabledCharts.has(e),s=new C(this.element,t,i,this._onToggle.bind(this,e));this._indicators.set(e,s)}}_onToggle(t,e){e?this._enabledCharts.add(t):this._enabledCharts.delete(t),this._enabledChartsSetting.set(Array.from(this._enabledCharts)),this.dispatchEventToListeners("MetricChanged")}charts(){return this._chartsInfo}isActive(t){return this._enabledCharts.has(t)}updateMetrics(t){for(const e of this._indicators.keys()){const i=t.get(e);if(void 0!==i){const t=this._indicators.get(e);t&&t.setValue(i)}}}}class C{constructor(t,e,i,s){const o=e.color||e.metrics[0].color;this._info=e,this._active=i,this._onToggle=s,this.element=t.createChild("div","perfmon-indicator"),this._swatchElement=m.Icon.create("smallicon-checkmark-square","perfmon-indicator-swatch"),this._swatchElement.style.backgroundColor=o,this.element.appendChild(this._swatchElement),this.element.createChild("div","perfmon-indicator-title").textContent=e.title,this._valueElement=this.element.createChild("div","perfmon-indicator-value"),this._valueElement.style.color=o,this.element.addEventListener("click",(()=>this._toggleIndicator())),this.element.addEventListener("keypress",(t=>this._handleKeypress(t))),this.element.classList.toggle("active",i),h.markAsCheckbox(this.element),h.setChecked(this.element,this._active),this.element.tabIndex=0}static _formatNumber(t,e){switch(p||(p=new Intl.NumberFormat("en-US",{maximumFractionDigits:1}),u=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"})),e.format){case"Percent":return u.format(t);case"Bytes":return r.bytesToString(t);default:return p.format(t)}}setValue(t){this._valueElement.textContent=C._formatNumber(t,this._info)}_toggleIndicator(){this._active=!this._active,this.element.classList.toggle("active",this._active),h.setChecked(this.element,this._active),this._onToggle(this._active)}_handleKeypress(t){const e=t;" "!==e.key&&"Enter"!==e.key||this._toggleIndicator()}}const S=new Intl.NumberFormat("en-US",{maximumFractionDigits:1});var M=Object.freeze({__proto__:null,UIStrings:d,PerformanceMonitorImpl:v,ControlPane:w,MetricIndicator:C,format:S});export{M as PerformanceMonitor};

package/static/devtools/performance_monitor/performance_monitor_module.js

@@ -0,0 +1 @@
+import*as RootModule from'../root/root.js';RootModule.Runtime.cachedResources.set("performance_monitor/performanceMonitor.css","/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.perfmon-pane {\n  overflow: hidden;\n}\n\n.perfmon-pane.suspended {\n  opacity: 40%;\n  pointer-events: none;\n}\n\n.perfmon-pane .perfmon-chart-suspend-overlay {\n  display: none;\n  font-size: 26px;\n  align-items: center;\n  justify-content: center;\n}\n\n.perfmon-pane.suspended .perfmon-chart-suspend-overlay {\n  display: flex;\n}\n\n.perfmon-control-pane {\n  display: flex;\n  flex-direction: column;\n  padding: 6px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.perfmon-chart-container {\n  display: flex;\n  flex: 1 1;\n  border-left: 1px solid #ccc;\n  overflow-y: auto;\n}\n\n.perfmon-chart-container canvas {\n  width: 100%;\n}\n\n.perfmon-indicator {\n  padding: 6px 12px;\n  margin: -1px 0;\n  display: flex;\n  flex-shrink: 0;\n  width: 210px;\n}\n\n.perfmon-indicator:hover {\n  background-color: #f8f8f8;\n}\n\n.perfmon-indicator:focus-visible {\n  background-color: #f8f8f8;\n}\n\n.perfmon-indicator-swatch {\n  margin-right: 6px;\n}\n\n.perfmon-indicator:not(.active) .perfmon-indicator-swatch {\n  background-color: #eee !important;\n}\n\n.perfmon-indicator-title {\n  flex: 0 0 115px;\n}\n\n.perfmon-indicator:not(.active) .perfmon-indicator-title {\n  color: #aaa;\n}\n\n.perfmon-indicator-value {\n  flex: 0 0 55px;\n  text-align: right;\n  overflow: visible;\n}\n\n.perfmon-indicator:not(.active) .perfmon-indicator-value {\n  opacity: 0%;\n}\n\n/*# sourceURL=performance_monitor/performanceMonitor.css */");