@react-native/debugger-frontend/dist/third-party/front_end/ui/legacy/components/perf_ui/perf_ui.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../../../core/i18n/i18n.js";import*as t from"../../../../services/window_bounds/window_bounds.js";import*as i from"../../theme_support/theme_support.js";import*as s from"../../../../core/common/common.js";import*as r from"../../../../core/platform/platform.js";import*as n from"../../../components/render_coordinator/render_coordinator.js";import*as o from"../../legacy.js";import*as a from"../../../../models/trace/trace.js";import*as l from"../../../visual_logging/visual_logging.js";import*as h from"../../../components/buttons/buttons.js";import*as d from"../../../../core/host/host.js";import*as c from"../../../../core/sdk/sdk.js";import*as u from"../../../../models/bindings/bindings.js";import*as m from"../../../../models/workspace/workspace.js";import"../source_frame/source_frame.js";import*as p from"../../../components/icon_button/icon_button.js";import{html as g,svg as v,render as f}from"../../../lit/lit.js";const w={congrats:"Congrats, you win!",ps:"PS: You can also open the game by typing `fixme`"},b=e.i18n.registerUIStrings("ui/legacy/components/perf_ui/BrickBreaker.ts",w),y=e.i18n.getLocalizedString.bind(void 0,b),T=15,E=10,x=[{light:"rgb(224,240,255)",mediumLighter:"rgb(176,208,255)",mediumDarker:"rgb(112,160,221)",dark:"rgb(0,92,153)"},{light:"rgb(253, 216, 229)",mediumLighter:"rgb(250, 157, 188)",mediumDarker:"rgb(249, 98, 154)",dark:"rgb(254, 5, 105)"},{light:"rgb(254, 234, 234)",mediumLighter:"rgb(255, 216, 216)",mediumDarker:"rgb(255, 195, 195)",dark:"rgb(235, 125, 138)"},{light:"rgb(226,183,206)",mediumLighter:"rgb(219,124,165)",mediumDarker:"rgb(146,60,129)",dark:"rgb(186, 85, 255)"},{light:"rgb(206,255,206)",mediumLighter:"rgb(128,255,128)",mediumDarker:"rgb(0,246,0)",dark:"rgb(0,187,0)"},{light:"rgb(255, 188, 181)",mediumLighter:"rgb(254, 170, 170)",mediumDarker:"rgb(215, 59, 43)",dark:"rgb(187, 37, 23)"},{light:"rgb(236, 254, 250)",mediumLighter:"rgb(204, 255, 245)",mediumDarker:"rgb(164, 240, 233)",dark:"rgb(72,189,144)"},{light:"rgb(255, 225, 185)",mediumLighter:"rgb(255, 204, 141)",mediumDarker:"rgb(240, 140, 115)",dark:"rgb(211, 96, 117)"},{light:"rgb(218, 255, 248)",mediumLighter:"rgb(177, 235, 236)",mediumDarker:"rgb(112, 214, 214)",dark:"rgb(34, 205, 181)"}];class C extends HTMLElement{timelineFlameChart;#e;#t;#i;#s;#r;#n=0;#o=new Set;#a=new Map;#l=this.#h.bind(this);#d=this.#c.bind(this);#u=this.#m.bind(this);#p=this.#g.bind(this);#v=this.#f.bind(this);#w=t.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();#b=0;#y=!1;#T=devicePixelRatio;#E=0;#x=0;#C=0;#S=0;#L=0;#k=!1;#P=!1;#D=0;#R=0;#I=0;#M=150;#H=150;#B=1500;#O=this.#B-this.#H;#A=0;#G=0;#z;constructor(e){super(),this.timelineFlameChart=e,this.#e=this.createChild("canvas","fill"),this.#t=this.#e.getContext("2d"),this.#i=document.createElement("canvas"),this.#s=this.#i.getContext("2d");const t=Math.floor(Math.random()*x.length);this.#z=x[t],this.#r=this.createChild("div"),this.#r.classList.add("scorePanel"),this.#r.style.borderImage="linear-gradient("+this.#z.mediumDarker+","+this.#z.dark+") 1",this.initButton()}initButton(){const e=this.createChild("div");e.classList.add("game-close-button"),e.innerHTML="<b><span style='font-size: 1.2em; color: white'>x</span></b>",e.style.background=this.#z.dark,e.style.boxShadow=this.#z.dark+" 1px 1px, "+this.#z.mediumDarker+" 3px 3px, "+this.#z.mediumLighter+" 5px 5px",e.addEventListener("click",this.#g.bind(this)),this.appendChild(e)}connectedCallback(){this.#y=!0,this.#V(),this.#w.addEventListener("keydown",this.#l),document.addEventListener("keydown",this.#l,!1),document.addEventListener("keyup",this.#d,!1),document.addEventListener("keypress",this.#u,!1),window.addEventListener("resize",this.#p),document.addEventListener("mousemove",this.#v,!1),this.tabIndex=1,this.focus()}disconnectedCallback(){this.#w.removeEventListener("keydown",this.#l),window.removeEventListener("resize",this.#p),document.removeEventListener("keydown",this.#l,!1),document.removeEventListener("keyup",this.#d,!1),window.removeEventListener("resize",this.#p),document.removeEventListener("keypress",this.#u,!1),document.removeEventListener("mousemove",this.#v,!1)}#W(){const e=window.devicePixelRatio,t=Math.round(this.offsetHeight*e),i=Math.round(this.offsetWidth*e);this.#e.height=t,this.#e.width=i,this.#e.style.height=t/e+"px",this.#e.style.width=i/e+"px"}#g(){this.#y=!1,this.remove()}#V(){this.#W(),this.#A=Math.max(.1,(this.offsetHeight-this.#H)/this.#O),this.#G=10*this.#A;const e=this.timelineFlameChart.drawTrackOnCanvas("Main",this.#t,E);if(null===e||0===e.visibleEntries.size)return console.error("Could not draw game"),void this.#g();this.#n=e.top,this.#o=e.visibleEntries,this.#b=this.#n+this.timelineFlameChart.getCanvas().getBoundingClientRect().top-this.timelineFlameChart.getScrollOffset(),requestAnimationFrame((()=>this.#F(e.top,e.height)))}#F(e,t){if(0===e)return void this.#U();const i=window.devicePixelRatio,s=Math.round(e*i),r=Math.max(e-4,0),n=Math.round(r*i),o=this.#e;this.#i.height=o.height,this.#i.width=o.width,this.#i.style.height=o.style.height,this.#i.style.width=o.style.width,this.#s.drawImage(o,0,s,o.width,t*i,0,n,o.width,t*i),this.#W(),this.#t.drawImage(this.#i,0,0),requestAnimationFrame((()=>this.#F(r,t)))}#c(e){"Right"===e.key||"ArrowRight"===e.key||"d"===e.key?(this.#k=!1,e.preventDefault()):"Left"===e.key||"ArrowLeft"===e.key||"a"===e.key?(this.#P=!1,e.preventDefault()):e.stopImmediatePropagation()}#m(e){e.stopImmediatePropagation(),e.preventDefault()}#h(e){"Escape"===e.key?(this.#g(),e.stopImmediatePropagation()):"Right"===e.key||"ArrowRight"===e.key||"d"===e.key?(this.#k=!0,e.preventDefault()):"Left"===e.key||"ArrowLeft"===e.key||"a"===e.key?(this.#P=!0,e.preventDefault()):(e.preventDefault(),e.stopImmediatePropagation())}#f(e){this.#L=Math.max(e.offsetX-this.#M/2,0),this.#L=Math.min(this.#L,this.offsetWidth-this.#M)}#U(){this.#E=this.offsetWidth/2,this.#x=this.offsetHeight-T-E,this.#C=0,this.#S=-Math.SQRT2*this.#G,this.#L=(this.#e.width-this.#M)/2,this.#k=!1,this.#P=!1,this.#D=this.timelineFlameChart.getBarHeight(),this.#I=this.#o.size,this.#R=Math.max(Math.round(this.#I/17),2),this.#N()}#_(){this.#E=this.offsetWidth/2,this.#x=this.offsetHeight-T-E,this.#C=0,this.#S=-Math.SQRT2*this.#G}#X(){if(!this.#t)return;const e=this.#t.createRadialGradient(this.#E+2.5,this.#x-2.5,0,this.#E+2.5,this.#x-2.5,E);e.addColorStop(.3,this.#z.mediumLighter),e.addColorStop(.6,this.#z.mediumDarker),e.addColorStop(1,this.#z.dark),this.#t.beginPath(),this.#t.arc(this.#E,this.#x,E,0,2*Math.PI),this.#t.fillStyle=e,this.#t.fill(),this.#t.closePath()}#$(){if(!this.#t)return;const e=this.#t.createRadialGradient(this.#L+this.#M/3,this.offsetHeight-T-3.75,0,this.#L+this.#M/3,this.offsetHeight-T-3.75,this.#M/2);e.addColorStop(.3,this.#z.dark),e.addColorStop(1,this.#z.mediumDarker),this.#t.beginPath(),this.#t.rect(this.#L,this.offsetHeight-T,this.#M,T),this.#t.fillStyle=e,this.#t.fill(),this.#t.closePath()}#K(){if(this.#t)for(const e of this.#a.values())this.#t.beginPath(),this.#t.rect(e.x,e.y,e.width+.5,this.#D+.5),this.#t.fillStyle=i.ThemeSupport.instance().getComputedValue("--sys-color-neutral-container",this),this.#t.fill(),this.#t.closePath()}#N(){if(this.#T!==devicePixelRatio&&(this.#y=!1),0===this.#R)return window.alert("GAME OVER"),void this.#g();if(0===this.#I)return void this.#j();this.#t.clearRect(0,0,this.#e.width,this.#e.height),this.#t.drawImage(this.#i,0,0),this.#t.save(),this.#t.scale(devicePixelRatio,devicePixelRatio),this.#s.save(),this.#s.scale(devicePixelRatio,devicePixelRatio),this.#K(),this.#X(),this.#$(),this.#Y();const e=`<div><b><span style='font-size: 1.3em; color:  ${this.#z.dark}'>&#x2764;&#xfe0f; ${this.#R}</span></b></div>`,t=`<div><b><span style='font-size: 1.3em; color: ${this.#z.dark}'> 🧱 ${this.#I}</span></b></div>`;if(this.#r.innerHTML=e+t,this.#I=this.#o.size-this.#a.size,this.#G=(10+6*this.#a.size/this.#o.size)*this.#A,this.#M=150-65*this.#a.size/this.#o.size,(this.#E+this.#C>this.offsetWidth-E||this.#E+this.#C<E)&&(this.#C=-this.#C),this.#x+this.#S<E)this.#S=-this.#S;else if(this.#x+this.#S>this.offsetHeight-E&&this.#S>0)if(this.#E>this.#L-E&&this.#E<this.#L+this.#M+E){let e=Math.min(this.#E,this.#L+this.#M);e=Math.max(e,this.#L);const t=(e-this.#L)*this.#G*2/this.#M;this.#C=-this.#G+t,this.#S=-Math.sqrt(2*Math.pow(this.#G,2)-Math.pow(this.#C,2))}else this.#_(),this.#L=(this.offsetWidth-this.#M)/2,this.#R--;const i=Math.round(this.clientWidth/60);this.#k&&this.#L<this.offsetWidth-this.#M?this.#L+=i:this.#P&&this.#L>0&&(this.#L-=i),this.#E+=Math.round(this.#C),this.#x+=Math.round(this.#S),this.#t.restore(),this.#s.restore(),this.#y&&requestAnimationFrame(this.#N.bind(this))}#Y(){const e=this.timelineFlameChart.getCanvas().getBoundingClientRect(),t=this.#x+this.#b-e.top,i=this.timelineFlameChart.coordinatesToEntryIndex(this.#E,t+E),s=this.timelineFlameChart.coordinatesToEntryIndex(this.#E,t-E),r=this.timelineFlameChart.coordinatesToEntryIndex(this.#E+E,t),n=this.timelineFlameChart.coordinatesToEntryIndex(this.#E-E,t),o=E/Math.SQRT2,a=this.timelineFlameChart.coordinatesToEntryIndex(this.#E+o,t+o),l=this.timelineFlameChart.coordinatesToEntryIndex(this.#E-o,t+o),h=this.timelineFlameChart.coordinatesToEntryIndex(this.#E+o,t-o),d=this.timelineFlameChart.coordinatesToEntryIndex(this.#E-o,t-o),c=t=>{const i=this.timelineFlameChart.entryIndexToCoordinates(t);if(i){const s=Math.max(i.x-e.left,0);this.#a.set(t,{x:s-.5,y:i.y-this.#b-.5,width:this.timelineFlameChart.entryWidth(t)})}};if(i>-1&&!this.#a.has(i)&&this.#o.has(i))return this.#S=-this.#S,void c(i);if(s>-1&&!this.#a.has(s)&&this.#o.has(s))return this.#S=-this.#S,void c(s);if(r>-1&&!this.#a.has(r)&&this.#o.has(r))return this.#C=-this.#C,void c(r);if(n>-1&&!this.#a.has(n)&&this.#o.has(n))return this.#C=-this.#C,void c(n);const u=[a,l,h,d];for(const e of u)if(e>-1&&!this.#a.has(e)&&this.#o.has(e))return this.#C=-this.#C,this.#S=-this.#S,void c(e)}#Z(e,t){return Math.floor(Math.random()*(t-e)+e)}#j(){this.#W();let e=0;const t=this.offsetWidth/15,i=.7*this.offsetHeight/15,s=[],r=()=>40*Math.random()-20,n=()=>{for(let e=0;e<75;e++){const n=document.createElement("span");n.className="confetti-100",n.append(this.#q(e%15*t+r(),e%5*i+r())),s.push(window.setTimeout((()=>this.append(n)),100*Math.random())),s.push(window.setTimeout((()=>{n.remove()}),1e3))}++e<6?setTimeout(n,100*Math.random()+400):(window.alert(`${y(w.congrats)}\n${y(w.ps)}`),s.forEach((e=>clearTimeout(e))),this.#g())};n()}#q(e,t){const i=400,s=["💯","🎉","🎊"],r=document.createElement("span");return r.textContent=s[this.#Z(0,s.length)],r.className="confetti-100-particle",r.style.setProperty("--rotation",this.#Z(-1080,1080)+"deg"),r.style.setProperty("--to-X",this.#Z(-400,i)+"px"),r.style.setProperty("--to-Y",this.#Z(-400,i)+"px"),r.style.left=e+"px",r.style.top=t+"px",r}}customElements.define("brick-breaker",C);var S=Object.freeze({__proto__:null,BrickBreaker:C}),L={cssText:`.chart-viewport-v-scroll{position:absolute;top:0;right:0;bottom:0;overflow-x:hidden;z-index:200;padding-left:1px}.chart-viewport-v-scroll.always-show-scrollbar{overflow-y:scroll}:host-context(.platform-mac) .chart-viewport-v-scroll{right:2px;top:3px;bottom:3px}:host-context(.platform-mac) ::-webkit-scrollbar{width:8px}:host-context(.platform-mac) ::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar-mac);border-radius:50px}:host-context(.platform-mac) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar-mac-hover)}:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar{width:10px}:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar-other)}:host-context(.overlay-scrollbar-enabled) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar-other-hover)}.chart-viewport-selection-overlay{position:absolute;z-index:100;background-color:var(--sys-color-state-ripple-primary);border-color:var(--sys-color-primary);border-width:0 1px;border-style:solid;pointer-events:none;top:0;bottom:0;text-align:center}.chart-viewport-selection-overlay .time-span{white-space:nowrap;position:absolute;left:0;right:0;bottom:0}\n/*# sourceURL=${import.meta.resolve("./chartViewport.css")} */\n`};function k(e,t,i){e.moveTo(0,i),e.lineTo(t,i)}function P(e,t,s,r,n,o="--sys-color-on-surface"){const a=new Path2D(n);e.save(),e.translate(t,s),e.fillStyle=i.ThemeSupport.instance().getComputedValue("--sys-color-cdt-base-container"),e.fillRect(0,0,r,r),e.fillStyle=i.ThemeSupport.instance().getComputedValue(o);const l=r/20;e.scale(l,l),e.fill(a),e.restore()}var D={cssText:`.flame-chart-main-pane{overflow:hidden;--selected-group-border:hsl(216deg 68% 54%)}:host-context(.theme-with-dark-background) .flame-chart-main-pane{--selected-group-border:hsl(216deg 68% 46%)}.flame-chart-marker-highlight-element{position:absolute;top:1px;height:18px;width:6px;margin:0 -3px;content:"";display:block}.flame-chart-canvas:focus-visible{border-top:1px solid var(--sys-color-state-focus-ring);border-bottom:1px solid var(--sys-color-state-focus-ring)}.flame-chart-highlight-element{position:absolute;pointer-events:none;background-color:var(--sys-color-state-hover-on-subtle)}.reveal-descendants-arrow-highlight-element{position:absolute;pointer-events:none;background-color:var(--sys-color-state-hover-on-subtle)}.flame-chart-selected-element{position:absolute;pointer-events:none;outline:2px solid var(--sys-color-primary);background-color:var(--sys-color-state-ripple-primary)}.chart-cursor-element{position:absolute;top:0;bottom:0;z-index:100;width:2px;background-color:var(--ref-palette-pink50);pointer-events:none}.flame-chart-entry-info:not(:empty){z-index:2000;position:absolute;contain:content;background-color:var(--sys-color-cdt-base-container);pointer-events:none;padding:4px 8px;white-space:nowrap;max-width:80%;box-shadow:var(--drop-shadow)}.flame-chart-entry-info table tr td:empty{padding:0}.flame-chart-entry-info table tr td:not(:empty){padding:0 5px;white-space:nowrap}.flame-chart-entry-info table tr td:first-child{font-weight:bold}.flame-chart-entry-info table tr td span{margin-right:5px}.flame-chart-edit-confirm{position:fixed;bottom:10px;right:10px}\n/*# sourceURL=${import.meta.resolve("./flameChart.css")} */\n`};let R=null;function I(){if(R)return R;const e=getComputedStyle(document.body);return R=e.fontFamily?e.fontFamily:d.Platform.fontFamily(),R}const M="11px";var H=Object.freeze({__proto__:null,DEFAULT_FONT_SIZE:M,getFontFamilyForCanvas:I}),B={cssText:`.resources-dividers{position:absolute;inset:0;z-index:-100}.resources-event-dividers{position:absolute;left:0;right:0;height:100%;top:0;z-index:300;pointer-events:none}.resources-dividers-label-bar{position:absolute;top:0;left:0;right:0;background-clip:padding-box;height:20px;z-index:200;pointer-events:none;overflow:hidden}.resources-divider{position:absolute;width:1px;top:0;bottom:0;background-color:var(--sys-color-divider)}.resources-event-divider{position:absolute;width:1px;top:0;bottom:0;z-index:300}.resources-divider-label{position:absolute;top:4px;right:3px;font-size:80%;white-space:nowrap;pointer-events:none}.timeline-grid-header{height:20px;pointer-events:none}\n/*# sourceURL=${import.meta.resolve("./timelineGrid.css")} */\n`};const O=new Map;class A{element;dividersElementInternal;gridHeaderElement;eventDividersElement;dividersLabelBarElementInternal;constructor(){this.element=document.createElement("div"),i.ThemeSupport.instance().appendStyle(this.element,B),this.dividersElementInternal=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.dividersLabelBarElementInternal=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+100*r*i/100,n=e.computePosition(s);n<(t||0)||h.push({position:Math.floor(n),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=getComputedStyle(document.body).getPropertyValue("--app-color-strokestyle"),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,s,r,n,o){e.save(),e.scale(window.devicePixelRatio,window.devicePixelRatio);const a=Math.ceil(e.canvas.width/window.devicePixelRatio);e.beginPath(),e.fillStyle=i.ThemeSupport.instance().getComputedValue("--color-background-opacity-50"),e.fillRect(0,0,a,n),e.fillStyle=i.ThemeSupport.instance().getComputedValue("--sys-color-on-surface"),e.textBaseline="hanging",e.font=`${M} ${I()}`;for(const i of t.offsets){const t=s(i.time),n=e.measureText(t).width,a=i.position-n-4;(!o||o<a)&&e.fillText(t,a,r)}e.restore()}get dividersElement(){return this.dividersElementInternal}get dividersLabelBarElement(){return this.dividersLabelBarElementInternal}updateDividers(e,t){const i=A.calculateGridOffsets(e,t),s=i.offsets,r=i.precision,n=this.dividersElementInternal.clientWidth;let o=this.dividersElementInternal.firstChild,a=this.dividersLabelBarElementInternal.firstChild;for(let t=0;t<s.length;++t){if(!o){o=document.createElement("div"),o.className="resources-divider",this.dividersElementInternal.appendChild(o),a=document.createElement("div"),a.className="resources-divider";const e=document.createElement("div");e.className="resources-divider-label",O.set(a,e),a.appendChild(e),this.dividersLabelBarElementInternal.appendChild(a)}const i=s[t].time,l=s[t].position;if(a){const t=O.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.dividersElementInternal.removeChild(o),!e)break;o=e}for(;a;){const e=a.nextSibling;if(this.dividersLabelBarElementInternal.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")}setScrollTop(e){this.dividersLabelBarElementInternal.style.top=e+"px",this.eventDividersElement.style.top=e+"px"}}var G=Object.freeze({__proto__:null,TimelineGrid:A});const z={eventSelectedFromGroup:'Selected a {PH1} event within {PH2}. Press "enter" to focus this event.',flameChart:"Flame Chart",sHovered:"{PH1} hovered",sSelected:"{PH1} selected",sExpanded:"{PH1} expanded",sCollapsed:"{PH1} collapsed",labelEntry:"Label entry",linkEntries:"Link entries",deleteAnnotations:"Delete annotations",enterTrackConfigurationMode:"Configure tracks",exitTrackConfigurationMode:"Finish configuring tracks"},V=e.i18n.registerUIStrings("ui/legacy/components/perf_ui/FlameChart.ts",z),W=e.i18n.getLocalizedString.bind(void 0,V),F=8,U=6+F/2,N=16;class _ extends(s.ObjectWrapper.eventMixin(o.Widget.VBox)){groupExpansionSetting;groupExpansionState;groupHiddenState;flameChartDelegate;chartViewport;dataProvider;candyStripePattern;candyStripePatternGray;contextMenu;viewportElement;canvas;popoverElement;markerHighlighElement;highlightElement;revealDescendantsArrowHighlightElement;selectedElement=null;rulerEnabled;barHeight;hitMarginPx;textBaseline;textPadding;highlightedMarkerIndex;highlightedEntryIndex;selectedEntryIndex;rawTimelineDataLength;markerPositions;customDrawnPositions;lastMouseOffsetX;selectedGroupIndex;keyboardFocusedGroup;offsetWidth;offsetHeight;dragStartX;dragStartY;lastMouseOffsetY;minimumBoundaryInternal;maxDragOffset;timelineLevels;visibleLevelOffsets;visibleLevels;visibleLevelHeights;groupOffsets;rawTimelineData;forceDecorationCache;entryColorsCache;colorDimmingCache=new Map;totalTime;lastPopoverState;dimIndices;dimShouldOutlineUndimmedEntries=!1;#Q=0;#J;#ee;#te=null;#ie=!1;#se=!1;#re=null;#ne=!0;#oe=new Map;constructor(e,t,s={}){super(!0),this.#J=`${M} ${I()}`,this.registerRequiredCSS(D),this.contentElement.classList.add("flame-chart-main-pane"),"boolean"==typeof s.selectedElementOutline&&(this.#ne=s.selectedElementOutline),this.groupExpansionSetting=s.groupExpansionSetting,this.groupExpansionState=s.groupExpansionSetting?.get()||{},this.groupHiddenState={},this.flameChartDelegate=t;let r=!0;"boolean"==typeof s.useOverlaysForCursorRuler&&(r=!s.useOverlaysForCursorRuler),this.chartViewport=new Z(this,{enableCursorElement:r}),this.chartViewport.show(this.contentElement),this.dataProvider=e,this.viewportElement=this.chartViewport.viewportElement,this.canvas=this.viewportElement.createChild("canvas","fill"),this.candyStripePattern=this.candyStripePatternGray=null,this.canvas.tabIndex=0,o.ARIAUtils.setLabel(this.canvas,W(z.flameChart)),o.ARIAUtils.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("dblclick",this.#ae.bind(this),!1),this.canvas.addEventListener("keydown",this.onKeyDown.bind(this),!1),this.canvas.addEventListener("contextmenu",this.onContextMenu.bind(this),!1),this.popoverElement=s.tooltipElement||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.revealDescendantsArrowHighlightElement=this.viewportElement.createChild("div","reveal-descendants-arrow-highlight-element"),this.#ne&&(this.selectedElement=this.viewportElement.createChild("div","flame-chart-selected-element")),this.canvas.addEventListener("focus",(()=>{this.dispatchEventToListeners("CanvasFocused")}),!1),o.UIUtils.installDragHandle(this.viewportElement,this.startDragging.bind(this),this.dragging.bind(this),this.endDragging.bind(this),null),this.rulerEnabled=!0,this.barHeight=17,this.hitMarginPx=3,this.textBaseline=5,this.textPadding=5,this.chartViewport.setWindowTimes(e.minimumBoundary(),e.minimumBoundary()+e.totalTime()),this.highlightedMarkerIndex=-1,this.highlightedEntryIndex=-1,this.selectedEntryIndex=-1,this.#te=null,this.rawTimelineDataLength=0,this.markerPositions=new Map,this.customDrawnPositions=new Map,this.lastMouseOffsetX=0,this.selectedGroupIndex=-1,this.lastPopoverState={entryIndex:-1,groupIndex:-1,hiddenEntriesPopover:!1},this.keyboardFocusedGroup=-1,i.ThemeSupport.instance().addEventListener(i.ThemeChangeEvent.eventName,(()=>{this.scheduleUpdate()}))}willHide(){this.hideHighlight()}canvasBoundingClientRect(){return this.#re&&this.#re.width>0&&this.#re.height>0||(this.#re=this.canvas.getBoundingClientRect()),this.#re}setTooltipYPixelAdjustment(e){e!==this.#Q&&(this.#Q=e,this.popoverElement.children.length&&this.updatePopoverOffset())}getBarHeight(){return this.barHeight}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()}#le(e){return!!this.dimIndices&&0!==this.dimIndices[e]}#he(e){return!(!this.isDimming()||this.#le(e))&&(ArrayBuffer.isView(this.dimShouldOutlineUndimmedEntries)?0!==this.dimShouldOutlineUndimmedEntries[e]:this.dimShouldOutlineUndimmedEntries)}#de(e,t){const i=new Uint8Array(this.rawTimelineDataLength);if(t)for(const t of e)i[t]=1;else{i.fill(1);for(const t of e)i[t]=0}return i}enableDimming(e,t,i){this.dimIndices=this.#de(e,t),this.dimShouldOutlineUndimmedEntries=Array.isArray(i)?this.#de(i,!0):i,this.draw()}disableDimming(){this.dimIndices=null,this.dimShouldOutlineUndimmedEntries=!1,this.draw()}isDimming(){return Boolean(this.dimIndices)}#ce(e,t){if(this.#le(e)){let e=this.colorDimmingCache.get(t);if(e)return e;const i=s.Color.parse(t);return e=i?i.asLegacyColor().grayscale().asString():"lightgrey",this.colorDimmingCache.set(t,e),e}return t}getColorForEntry(e){return this.entryColorsCache?this.#ce(e,this.entryColorsCache[e]):""}highlightEntry(e){this.highlightedEntryIndex!==e&&this.dataProvider.entryColor(e)&&(this.highlightedEntryIndex=e,this.updateElementPosition(this.highlightElement,this.highlightedEntryIndex),this.dispatchEventToListeners("EntryHovered",e))}hideHighlight(){null===this.#te&&(this.popoverElement.removeChildren(),this.lastPopoverState={entryIndex:-1,groupIndex:-1,hiddenEntriesPopover:!1}),-1!==this.highlightedEntryIndex&&(this.highlightedEntryIndex=-1,this.updateElementPosition(this.highlightElement,this.highlightedEntryIndex),this.dispatchEventToListeners("EntryHovered",-1))}createCandyStripePattern(e){const t=17,i=document.createElement("canvas");i.width=t,i.height=t;const s=i.getContext("2d");s.translate(8.5,8.5),s.rotate(.25*Math.PI),s.translate(-8.5,-8.5),s.fillStyle=e;for(let e=-17;e<34;e+=3)s.fillRect(e,-17,1,51);return s.createPattern(i,"repeat")}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"}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(e){if(!this.dataProvider)return null;const t=this.dataProvider.timelineData(e);return(t!==this.rawTimelineData||t&&t.entryStartTimes.length!==this.rawTimelineDataLength)&&this.processTimelineData(t),this.rawTimelineData||null}revealEntryVertically(e){const t=this.timelineData();if(!t)return;const i=t.entryLevels[e];this.chartViewport.setScrollOffset(this.levelToOffset(i),this.levelHeight(i),!0)}revealEntry(e){const t=this.timelineData();if(!t)return;const i=this.chartViewport.windowLeftTime(),s=this.chartViewport.windowRightTime(),r=t.entryStartTimes[e];let n=t.entryTotalTimes[e];Number.isNaN(n)&&(n=1);const 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){if(this.#te=null,this.lastMouseOffsetX=e.offsetX,this.lastMouseOffsetY=e.offsetY,!this.enabled())return;if(this.chartViewport.isDragging())return;const t=a.Types.Timing.Milli(this.chartViewport.pixelToTime(e.offsetX));this.dispatchEventToListeners("MouseMove",{mouseEvent:e,timeInMicroSeconds:a.Helpers.Timing.milliToMicro(t)});const{groupIndex:i,hoverType:s}=this.coordinatesToGroupIndexAndHoverType(e.offsetX,e.offsetY);switch(s){case"TRACK_CONFIG_UP_BUTTON":case"TRACK_CONFIG_DOWN_BUTTON":case"TRACK_CONFIG_HIDE_BUTTON":case"TRACK_CONFIG_SHOW_BUTTON":{this.hideHighlight(),this.viewportElement.style.cursor="pointer";const e=this.#ue(i,s);return void(e&&(this.popoverElement.appendChild(e),this.updatePopoverOffset()))}case"INSIDE_TRACK_HEADER":return this.updateHighlight(),void(this.viewportElement.style.cursor="pointer");case"INSIDE_TRACK":case"OUTSIDE_TRACKS":return void this.updateHighlight();case"ERROR":return;default:r.assertNever(s,`Invalid hovering type: ${s}`)}}#ue(e,t){const i=this.rawTimelineData?.groups[e];if(!i)return null;const s=r.StringUtilities.trimMiddle(i.name,20);let n="";switch(t){case"TRACK_CONFIG_UP_BUTTON":n=`Move ${s} track up`;break;case"TRACK_CONFIG_DOWN_BUTTON":n=`Move ${s} track down`;break;case"TRACK_CONFIG_HIDE_BUTTON":n=this.groupIsLastVisibleTopLevel(e)?"Can not hide the last top level track":`Hide ${s} track`;break;case"TRACK_CONFIG_SHOW_BUTTON":n=`Show ${s} track`;break;default:return null}const o=document.createElement("div");return o.createChild("span","popoverinfo-title").textContent=n,o}updateHighlight(){const e=this.coordinatesToEntryIndex(this.lastMouseOffsetX,this.lastMouseOffsetY);if(this.updateHiddenChildrenArrowHighlighPosition(e),-1===e){this.hideHighlight();const{groupIndex:e,hoverType:t}=this.coordinatesToGroupIndexAndHoverType(this.lastMouseOffsetX,this.lastMouseOffsetY);return"INSIDE_TRACK_HEADER"===t&&this.#me(e),void(e>=0&&this.rawTimelineData?.groups?.[e].selectable?this.viewportElement.style.cursor="pointer":this.viewportElement.style.cursor="default")}this.chartViewport.isDragging()||(this.#pe(e),this.viewportElement.style.cursor=this.dataProvider.canJumpToEntry(e)?"pointer":"default",this.highlightEntry(e))}onMouseOut(){this.lastMouseOffsetX=-1,this.lastMouseOffsetY=-1,this.hideHighlight()}showPopoverForSearchResult(e){this.#te=e,this.#pe(e)}#pe(e){const t=null!==e&&this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX,e);if(e===this.lastPopoverState.entryIndex&&t===this.lastPopoverState.hiddenEntriesPopover)return this.updatePopoverOffset();const i=this.timelineData();if(!i)return;const s=i.groups.at(this.selectedGroupIndex),r=t&&s?this.dataProvider.preparePopoverForCollapsedArrow?.(e):null!==e&&this.dataProvider.preparePopoverElement(e);r&&this.updatePopoverContents(r),this.lastPopoverState={entryIndex:e,groupIndex:-1,hiddenEntriesPopover:t}}updatePopoverContents(e){this.popoverElement.removeChildren(),this.popoverElement.appendChild(e),this.updatePopoverOffset(),this.lastPopoverState.entryIndex=-1}updateMouseOffset(e,t){this.lastMouseOffsetX=e,this.lastMouseOffsetY=t}#me(e){if(e===this.lastPopoverState.groupIndex)return this.updatePopoverOffset();this.popoverElement.removeChildren();const t=this.timelineData();if(!t)return;const i=t.groups.at(e);i?.description&&(this.popoverElement.innerText=i?.description,this.updatePopoverOffset()),this.lastPopoverState={groupIndex:e,entryIndex:-1,hiddenEntriesPopover:!1}}updatePopoverOffset(){let e=this.lastMouseOffsetX,t=this.lastMouseOffsetY;if(null!==this.#te){const i=this.entryIndexToCoordinates(this.selectedEntryIndex),{x:s,y:r}=this.canvas.getBoundingClientRect();e=i?.x?i.x-s:e,t=i?.y?i.y-r:t}const i=this.popoverElement.parentElement?this.popoverElement.parentElement.clientWidth:0,s=this.popoverElement.parentElement?this.popoverElement.parentElement.clientHeight:0,n=this.popoverElement.clientWidth,o=this.popoverElement.clientHeight,a=6+this.#Q;let l,h;for(let d=0;d<2;++d)for(let c=0;c<4;++c){const u=2&c?-10-n:10,m=1&c?-a-o:a;l=r.NumberUtilities.clamp(e+u,0,i-n),h=r.NumberUtilities.clamp(t+m,0,s-o);if(0===d?(l>=e||e>=l+n)&&(h>=t||t>=h+o):l>=e||e>=l+n||h>=t||t>=h+o)break}this.popoverElement.style.left=l+"px",this.popoverElement.style.top=h+"px"}#ae(e){this.focus();const{groupIndex:t}=this.coordinatesToGroupIndexAndHoverType(e.offsetX,e.offsetY);if(-1!==this.highlightedEntryIndex){this.#ge(t),this.dispatchEventToListeners("EntryLabelAnnotationAdded",{entryIndex:this.highlightedEntryIndex,withLinkCreationButton:!0});const i=this.flameChartDelegate.containingElement?.();i&&l.logClick(i,e,{doubleClick:!0})}}onClick(e){this.focus();if(this.maxDragOffset>5)return;const{groupIndex:t,hoverType:i}=this.coordinatesToGroupIndexAndHoverType(e.offsetX,e.offsetY);switch(i){case"TRACK_CONFIG_UP_BUTTON":return void this.moveGroupUp(t);case"TRACK_CONFIG_DOWN_BUTTON":return void this.moveGroupDown(t);case"TRACK_CONFIG_HIDE_BUTTON":if(this.groupIsLastVisibleTopLevel(t))return;return void this.hideGroup(t);case"TRACK_CONFIG_SHOW_BUTTON":return void this.showGroup(t);case"INSIDE_TRACK_HEADER":return this.#ge(t),void this.toggleGroupExpand(t);case"INSIDE_TRACK":case"OUTSIDE_TRACKS":{this.#ge(t);const i=this.timelineData();if(e.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(e),this.dispatchEventToListeners("EntryInvoked",this.highlightedEntryIndex);return}}}setLinkSelectionAnnotationIsInProgress(e){this.#se=e}#ge(e){if(e<0||this.selectedGroupIndex===e)return;if(!this.rawTimelineData)return;const t=this.rawTimelineData.groups;if(!t)return;this.keyboardFocusedGroup=e,this.#se||this.scrollGroupIntoView(e);const i=t[e].name;t[e].selectable?(this.selectedGroupIndex=e,this.flameChartDelegate.updateSelectedGroup(this,t[e]),this.draw(),o.ARIAUtils.alert(W(z.sSelected,{PH1:i}))):(this.deselectAllGroups(),o.ARIAUtils.alert(W(z.sHovered,{PH1:i})))}deselectAllGroups(){this.selectedGroupIndex=-1,this.flameChartDelegate.updateSelectedGroup(this,null),this.draw()}deselectAllEntries(){this.selectedEntryIndex=-1,this.rawTimelineData?.resetFlowData(),this.draw()}isGroupFocused(e){return e===this.selectedGroupIndex||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?.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,this.rawTimelineData.resetFlowData())}}if(this.updateHeight(),this.draw(),this.scrollGroupIntoView(e),!i){const t=s[e].name,i=r.expanded?W(z.sExpanded,{PH1:t}):W(z.sCollapsed,{PH1:t});o.ARIAUtils.alert(i)}}moveGroupUp(e){if(!(e<0)&&this.rawTimelineData?.groups&&this.#ee){for(let t=0;t<this.#ee.children.length;t++){const i=this.#ee.children[t];if(i.index===e&&t>=1){this.#ee.children[t]=this.#ee.children[t-1],this.#ee.children[t-1]=i;break}}this.updateLevelPositions(),this.updateHighlight(),this.updateHeight(),this.draw()}}moveGroupDown(e){if(!(e<0)&&this.rawTimelineData?.groups&&this.#ee){for(let t=0;t<this.#ee.children.length;t++){const i=this.#ee.children[t];if(i.index===e&&t<=this.#ee.children.length-2){this.#ee.children[t]=this.#ee.children[t+1],this.#ee.children[t+1]=i;break}}this.updateLevelPositions(),this.updateHighlight(),this.updateHeight(),this.draw()}}hideGroup(e){this.#ve(e,!0)}showGroup(e){this.#ve(e,!1)}#ve(e,t){if(e<0)return;if(!this.rawTimelineData?.groups)return;const i=this.rawTimelineData.groups;if(!i)return;const s=i[e];s.hidden=t,this.groupHiddenState[s.name]=s.hidden,this.updateLevelPositions(),this.updateHighlight(),this.updateHeight(),this.draw()}modifyTree(e,t){this.timelineData()&&this.dataProvider.modifyTree&&(this.dataProvider.modifyTree(e,t),this.update())}#fe(e){if(this.#ie)return;this.contextMenu=new o.ContextMenu.ContextMenu(e);const t=W(z.enterTrackConfigurationMode);this.contextMenu.defaultSection().appendItem(t,(()=>{this.#we()}),{jslogContext:"track-configuration-enter"}),this.contextMenu.show()}#be(e){if(!1===this.#ie)return;this.contextMenu=new o.ContextMenu.ContextMenu(e);const t=W(z.exitTrackConfigurationMode);this.contextMenu.defaultSection().appendItem(t,(()=>{this.#ye()}),{jslogContext:"track-configuration-exit"}),this.contextMenu.show()}#Te(){return Boolean(this.dataProvider.hasTrackConfigurationMode?.())}onContextMenu(e){const{groupIndex:t,hoverType:i}=this.coordinatesToGroupIndexAndHoverType(e.offsetX,e.offsetY);if(this.#ie)return void this.#be(e);"INSIDE_TRACK_HEADER"===i&&this.#Te()&&this.#fe(e);const s=-1===e.detail,r=s?this.selectedEntryIndex:this.highlightedEntryIndex;if(-1===r)return;s||(this.dispatchEventToListeners("EntryInvoked",r),this.setSelectedEntry(r),this.#ge(t)),this.contextMenu=this.dataProvider.customizedContextMenu?.(e,this.selectedEntryIndex,t)??new o.ContextMenu.ContextMenu(e);const n=this.contextMenu.annotationSection();n.appendItem(W(z.labelEntry),(()=>{this.dispatchEventToListeners("EntryLabelAnnotationAdded",{entryIndex:this.selectedEntryIndex,withLinkCreationButton:!1})}),{jslogContext:"timeline.annotations.create-entry-label"}),n.appendItem(W(z.linkEntries),(()=>{this.dispatchEventToListeners("EntriesLinkAnnotationCreated",{entryFromIndex:this.selectedEntryIndex})}),{jslogContext:"timeline.annotations.create-entries-link"}),n.appendItem(W(z.deleteAnnotations),(()=>{this.dataProvider.deleteAnnotationsForEntry?.(this.selectedEntryIndex)}),{disabled:!this.dataProvider.entryHasAnnotations?.(this.selectedEntryIndex),jslogContext:"timeline.annotations.delete-entry-annotations"}),this.contextMenu.show()}#Ee(e){-1!==this.selectedEntryIndex&&this.dataProvider.handleFlameChartTransformKeyboardEvent?.(e,this.selectedEntryIndex,this.selectedGroupIndex)}#xe(){const e=this.timelineData()?.entryStartTimes[this.selectedEntryIndex],t=this.timelineData()?.entryLevels[this.selectedEntryIndex];if(!e||!t)return;const i=this.canvasBoundingClientRect();if(!i)return;const s=this.chartViewport.timeToPosition(e)+i.left,r=this.levelToOffset(t)-this.getScrollOffset()+i.top,n=new MouseEvent("contextmenu",{clientX:s,clientY:r,detail:-1});this.canvas.dispatchEvent(n)}onKeyDown(e){if(o.KeyboardShortcut.KeyboardShortcut.hasAtLeastOneModifier(e)||!this.timelineData())return;" "===e.key&&this.selectedEntryIndex>-1&&this.#xe();let t=this.handleSelectionNavigation(e);!t&&this.rawTimelineData?.groups&&(t=this.handleKeyboardGroupNavigation(e)),t||this.#Ee(e)}bindCanvasEvent(e,t){this.canvas.addEventListener(e,t)}drawTrackOnCanvas(e,t,i){const s=this.timelineData();if(!s)return null;const r=this.offsetWidth,n=this.offsetHeight;t.save();const o=window.devicePixelRatio;t.scale(o,o),t.fillStyle="rgba(0, 0, 0, 0)",t.fillRect(0,0,r,n),t.font=this.#J;const a=this.rawTimelineData?.groups||[],l=this.groupOffsets;if(!a.length||!l)return null;const h=a.findIndex((t=>t.name.includes(e)));if(h<0)return null;this.scrollGroupIntoView(h);const d=a[h].startLevel,c=a[h+1].startLevel,u=l[h],m=l[h+1],{drawBatches:p,titleIndices:g}=this.getDrawBatches(t,s),v=e=>{const t=Math.min(this.#Ce(s,e),r);return s.entryLevels[e]>=d&&s.entryLevels[e]<c&&t>i};let f=[];for(const[{color:e,outline:i},{indexes:r}]of p){const n=r.filter(v);f=[...f,...n],this.#Se(t,s,e,n,i)}const w=g.filter(v);return this.drawEventTitles(t,s,w,r),t.restore(),{top:l[h],height:m-u,visibleEntries:new Set(f)}}handleKeyboardGroupNavigation(e){const t=e;let i=!1,s=!1;return"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),i}selectFirstEntryInCurrentGroup(){if(!this.rawTimelineData)return!1;const e=this.rawTimelineData.groups;if(this.keyboardFocusedGroup<0||!e)return!1;const t=e[this.keyboardFocusedGroup],i=t.startLevel;if(i<0)return!1;if(this.keyboardFocusedGroup<e.length-1&&e[this.keyboardFocusedGroup+1].startLevel===i)return!1;if(!this.timelineLevels)return!1;const s=this.timelineData();if(!s)return!1;const r=a.Types.Timing.Milli(1);let n=this.timelineLevels[i].find((e=>{const t=s.entryTotalTimes[e];return!Number.isNaN(t)&&t>=r}));void 0===n&&(n=this.timelineLevels[i][0]),this.expandGroup(this.keyboardFocusedGroup,!0);const l=this.dataProvider.entryTitle(n);return l&&o.ARIAUtils.alert(W(z.eventSelectedFromGroup,{PH1:l,PH2:t.name})),this.setSelectedEntry(n),!0}selectPreviousGroup(){if(this.keyboardFocusedGroup<=0)return!1;const e=this.getGroupIndexToSelect(-1);return this.#ge(e),!0}selectNextGroup(){if(!this.rawTimelineData?.groups)return!1;if(this.keyboardFocusedGroup>=this.rawTimelineData.groups.length-1)return!1;const e=this.getGroupIndexToSelect(1);return this.#ge(e),!0}getGroupIndexToSelect(e){if(!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?.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.#ge(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,n=o.KeyboardShortcut.Keys;if(s.keyCode===n.Left.code||s.keyCode===n.Right.code){const i=t.entryLevels[this.selectedEntryIndex],o=this.timelineLevels?this.timelineLevels[i]:[];let a=r.ArrayUtilities.lowerBound(o,this.selectedEntryIndex,((e,t)=>e-t));return a+=s.keyCode===n.Left.code?-1:1,e.consume(!0),a>=0&&a<o.length&&this.dispatchEventToListeners("EntrySelected",o[a]),!0}if(s.keyCode===n.Up.code||s.keyCode===n.Down.code){let e=t.entryLevels[this.selectedEntryIndex];if(e+=s.keyCode===n.Up.code?-1:1,e<0||this.timelineLevels&&e>=this.timelineLevels.length)return this.deselectAllEntries(),s.consume(!0),!0;const o=t.entryStartTimes[this.selectedEntryIndex]+t.entryTotalTimes[this.selectedEntryIndex]/2,a=this.timelineLevels?this.timelineLevels[e]:[];let l=r.ArrayUtilities.upperBound(a,o,(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("EntrySelected",a[l]),!0)}return"Enter"===e.key&&(e.consume(!0),this.dispatchEventToListeners("EntryInvoked",this.selectedEntryIndex),this.dispatchEventToListeners("EntryLabelAnnotationAdded",{entryIndex:this.selectedEntryIndex,withLinkCreationButton:!0}),!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||!this.visibleLevelHeights||!this.visibleLevels)throw new Error("No visible level offsets or heights");let s=-1;for(let e=0;e<this.dataProvider.maxStackDepth();e++)if(t>=this.visibleLevelOffsets[e]&&t<this.visibleLevelOffsets[e]+(this.visibleLevels[e]?this.visibleLevelHeights[e]:0)){s=e;break}if(s<0||!this.visibleLevels[s])return-1;if(t-this.visibleLevelOffsets[s]>this.levelHeight(s))return-1;for(const[t,r]of this.customDrawnPositions)if(i.entryLevels[t]===s&&r.x<=e&&e<r.x+r.width)return t;for(const[t,r]of this.markerPositions)if(i.entryLevels[t]===s&&r.x<=e&&e<r.x+r.width)return t;const n=i.entryStartTimes,o=this.timelineLevels?this.timelineLevels[s]:[];if(!o?.length)return-1;const a=this.chartViewport.pixelToTime(e),l=Math.max(r.ArrayUtilities.upperBound(o,a,((e,t)=>e-n[t]))-1,0);function h(t){if(void 0===t)return!1;if(!i)return!1;const s=n[t],r=i.entryTotalTimes[t],o=this.chartViewport.timeToPosition(s),a=this.chartViewport.timeToPosition(s+r);return o-this.hitMarginPx<e&&e<a+this.hitMarginPx}let d=o[l];return h.call(this,d)?d:(d=o[l+1],h.call(this,d)?d:-1)}isMouseOverRevealChildrenArrow(e,t){if(!this.entryHasDecoration(t,"HIDDEN_DESCENDANTS_ARROW"))return!1;const i=this.timelineData();if(!i)return!1;const s=i.entryStartTimes[t],r=i.entryTotalTimes[t],n=this.chartViewport.timeToPosition(s+r);return n-this.#Le(i,t)-this.hitMarginPx<e&&e<n+this.hitMarginPx}entryIndexToCoordinates(e){const t=this.timelineData(),{x:i,y:s}=this.canvas.getBoundingClientRect();if(!t||!this.visibleLevelOffsets)return null;return{x:this.chartViewport.timeToPosition(t.entryStartTimes[e])+i,y:this.visibleLevelOffsets[t.entryLevels[e]]-this.chartViewport.scrollOffset()+s}}entryTitle(e){return this.dataProvider.entryTitle(e)}getCanvasOffset(){return this.canvas.getBoundingClientRect()}getCanvas(){return this.canvas}getScrollOffset(){return this.chartViewport.scrollOffset()}getContextMenu(){return this.contextMenu}coordinatesToGroupIndexAndHoverType(e,t){if(!this.rawTimelineData?.groups||!this.groupOffsets)return{groupIndex:-1,hoverType:"ERROR"};if(e<0||t<0)return{groupIndex:-1,hoverType:"ERROR"};t+=this.chartViewport.scrollOffset();const i=this.rawTimelineData.groups||[];if(this.#ee){const s=[];function r(e){s.push(e.index);for(const t of e.children)r(t)}if(r(this.#ee),s.shift(),s.length!==i.length)return console.warn("The data from the group tree doesn't match the data from DataProvider."),{groupIndex:-1,hoverType:"ERROR"};s.push(i.length);for(let n=0;n<s.length;n++){const o=s[n],a=s[n+1]??s.length;if(t>=this.groupOffsets[o]&&t<this.groupOffsets[a]){const l=this.canvas.getContext("2d");l.save(),l.font=this.#J;const h=6+(this.#ie?63:0)+this.labelWidthForGroup(l,i[o]);l.restore();const d=t>=this.groupOffsets[o]&&t<this.groupOffsets[o]+i[o].style.height;if(!this.#ie)return d&&e<=h?{groupIndex:o,hoverType:"INSIDE_TRACK_HEADER"}:{groupIndex:o,hoverType:"INSIDE_TRACK"};if(d){if(6<=e&&e<22)return{groupIndex:o,hoverType:"TRACK_CONFIG_UP_BUTTON"};if(25<=e&&e<41)return{groupIndex:o,hoverType:"TRACK_CONFIG_DOWN_BUTTON"};if(44<=e&&e<60)return{groupIndex:o,hoverType:i[o].hidden?"TRACK_CONFIG_SHOW_BUTTON":"TRACK_CONFIG_HIDE_BUTTON"};if(d&&e<=h)return{groupIndex:o,hoverType:"INSIDE_TRACK_HEADER"}}}}}return{groupIndex:-1,hoverType:"OUTSIDE_TRACKS"}}#we(){const e=document.createElement("div");e.classList.add("flame-chart-edit-confirm");const t=new h.Button.Button;t.data={variant:"primary",jslogContext:"track-configuration-exit"},t.innerText=W(z.exitTrackConfigurationMode),e.appendChild(t),t.addEventListener("click",(()=>{this.#ye()})),this.viewportElement.appendChild(e),this.#ie=!0,this.dispatchEventToListeners("TracksReorderStateChange",!0),this.updateLevelPositions(),this.draw()}#ke(){const e=this.viewportElement.querySelector(".flame-chart-edit-confirm");e&&this.viewportElement.removeChild(e)}#ye(){this.#ke(),this.#ie=!1,this.dispatchEventToListeners("TracksReorderStateChange",!1),this.updateLevelPositions(),this.draw()}markerIndexBeforeTime(e){const t=this.timelineData();if(!t)throw new Error("No timeline data");if(!t.markers)throw new Error("No timeline markers");return r.ArrayUtilities.lowerBound(t.markers,e,((e,t)=>e-t.startTime()))}draw(){const e=this.timelineData();if(!e)return;this.resetCanvas(),this.dispatchEventToListeners("LatestDrawDimensions",{chart:{widthPixels:this.offsetWidth,heightPixels:this.offsetHeight,scrollOffsetPixels:this.chartViewport.scrollOffset(),allGroupsCollapsed:this.rawTimelineData?.groups.every((e=>!e.expanded))??!0},traceWindow:a.Helpers.Timing.traceWindowFromMilliSeconds(this.minimumBoundary(),this.maximumBoundary())});const t=this.offsetWidth,i=this.offsetHeight,s=this.canvas.getContext("2d");s.save();const r=window.devicePixelRatio,n=this.chartViewport.scrollOffset();s.scale(r,r),s.fillStyle="rgba(0, 0, 0, 0)",s.fillRect(0,0,t,i),s.translate(0,-n),s.font=this.#J;const{markerIndices:o,drawBatches:l,titleIndices:h}=this.getDrawBatches(s,e),d=this.rawTimelineData?.groups||[],c=d.findIndex((e=>e.name.includes("Main"))),u=d.at(c),m=u?.startLevel,p=d.at(c+1)?.startLevel,g=i=>{if(c<0||void 0===m||void 0===p)return!1;const s=Math.min(this.#Ce(e,i),t);return e.entryLevels[i]>=m&&e.entryLevels[i]<p&&s>10};let v=!1;for(const[{color:t,outline:i},{indexes:r}]of l)v||(v=r.some(g)),this.#Se(s,e,t,r,i);this.dispatchEventToListeners("ChartPlayableStateChange",v),this.#ie||(this.#Pe(s,e),this.drawMarkers(s,e,o)),this.drawEventTitles(s,e,h,t);const f=Array.from(l.values()).map((e=>e.indexes)).flat();this.#De(s,e,f),s.restore(),this.drawGroupHeaders(t,i),this.drawFlowEvents(s,e),this.drawMarkerLines();const w=A.calculateGridOffsets(this),b=this.dataProvider.mainFrameNavigationStartEvents?.()||[];let y=0;const T=e=>{if(0===b.length)return this.formatValue(e,w.precision);if(b.length>y+1){const t=b[y+1];e>a.Helpers.Timing.microToMilli(t.ts)&&y++}const t=b[y];if(t){e-=a.Helpers.Timing.microToMilli(t.ts)-this.zeroTime()}return this.formatValue(e,w.precision)};A.drawCanvasGrid(s,w),this.rulerEnabled&&A.drawCanvasHeaders(s,w,T,3,X),this.updateElementPositi