@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"../../../../core/root/root.js";import*as o from"../../../components/render_coordinator/render_coordinator.js";import*as a from"../../legacy.js";import*as l from"../../../../core/host/host.js";import*as h from"../../../../models/bindings/bindings.js";import*as d from"../../../../models/trace/trace.js";import*as c from"../../../components/buttons/buttons.js";import*as u from"../../../visual_logging/visual_logging.js";import*as m from"../../../../core/sdk/sdk.js";import*as g from"../../../../models/workspace/workspace.js";import"../source_frame/source_frame.js";import*as p from"../../../components/icon_button/icon_button.js";import*as f from"../../../lit-html/lit-html.js";const v={congrats:"Congrats, you win!",ps:"PS: You can also open the game by typing `fixme`"},w=e.i18n.registerUIStrings("ui/legacy/components/perf_ui/BrickBreaker.ts",v),b=e.i18n.getLocalizedString.bind(void 0,w),T=15,y=10,E=[{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 x 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);#g=this.#p.bind(this);#f=this.#v.bind(this);#w=t.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();#b=0;#T=!1;#y=devicePixelRatio;#E=0;#x=0;#C=0;#S=0;#L=0;#k=!1;#P=!1;#D=0;#I=0;#R=0;#M=150;#H=150;#O=1500;#B=this.#O-this.#H;#A=0;#G=0;#F;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()*E.length);this.#F=E[t],this.#r=this.createChild("div"),this.#r.classList.add("scorePanel"),this.#r.style.borderImage="linear-gradient("+this.#F.mediumDarker+","+this.#F.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.#F.dark,e.style.boxShadow=this.#F.dark+" 1px 1px, "+this.#F.mediumDarker+" 3px 3px, "+this.#F.mediumLighter+" 5px 5px",e.addEventListener("click",this.#p.bind(this)),this.appendChild(e)}connectedCallback(){this.#T=!0,this.#z(),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.#g),document.addEventListener("mousemove",this.#f,!1),this.tabIndex=1,this.focus()}disconnectedCallback(){this.#w.removeEventListener("keydown",this.#l),window.removeEventListener("resize",this.#g),document.removeEventListener("keydown",this.#l,!1),document.removeEventListener("keyup",this.#d,!1),window.removeEventListener("resize",this.#g),document.removeEventListener("keypress",this.#u,!1),document.removeEventListener("mousemove",this.#f,!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"}#p(){this.#T=!1,this.remove()}#z(){this.#W(),this.#A=Math.max(.1,(this.offsetHeight-this.#H)/this.#B),this.#G=10*this.#A;const e=this.timelineFlameChart.drawTrackOnCanvas("Main",this.#t,y);if(null===e||0===e.visibleEntries.size)return console.error("Could not draw game"),void this.#p();this.#n=e.top,this.#o=e.visibleEntries,this.#b=this.#n+this.timelineFlameChart.getCanvas().getBoundingClientRect().top-this.timelineFlameChart.getScrollOffset(),requestAnimationFrame((()=>this.#N(e.top,e.height)))}#N(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.#N(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.#p(),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())}#v(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-y,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.#R=this.#o.size,this.#I=Math.max(Math.round(this.#R/17),2),this.#_()}#V(){this.#E=this.offsetWidth/2,this.#x=this.offsetHeight-T-y,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,y);e.addColorStop(.3,this.#F.mediumLighter),e.addColorStop(.6,this.#F.mediumDarker),e.addColorStop(1,this.#F.dark),this.#t.beginPath(),this.#t.arc(this.#E,this.#x,y,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.#F.dark),e.addColorStop(1,this.#F.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()}#_(){if(this.#y!==devicePixelRatio&&(this.#T=!1),0===this.#I)return window.alert("GAME OVER"),void this.#p();if(0===this.#R)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.#F.dark}'>&#x2764;&#xfe0f; ${this.#I}</span></b></div>`,t=`<div><b><span style='font-size: 1.3em; color: ${this.#F.dark}'> 🧱 ${this.#R}</span></b></div>`;if(this.#r.innerHTML=e+t,this.#R=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-y||this.#E+this.#C<y)&&(this.#C=-this.#C),this.#x+this.#S<y)this.#S=-this.#S;else if(this.#x+this.#S>this.offsetHeight-y&&this.#S>0)if(this.#E>this.#L-y&&this.#E<this.#L+this.#M+y){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.#V(),this.#L=(this.offsetWidth-this.#M)/2,this.#I--;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.#T&&requestAnimationFrame(this.#_.bind(this))}#Y(){const e=this.timelineFlameChart.getCanvas().getBoundingClientRect(),t=this.#x+this.#b-e.top,i=this.timelineFlameChart.coordinatesToEntryIndex(this.#E,t+y),s=this.timelineFlameChart.coordinatesToEntryIndex(this.#E,t-y),r=this.timelineFlameChart.coordinatesToEntryIndex(this.#E+y,t),n=this.timelineFlameChart.coordinatesToEntryIndex(this.#E-y,t),o=y/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(`${b(v.congrats)}\n${b(v.ps)}`),s.forEach((e=>clearTimeout(e))),this.#p())};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",x);var C=Object.freeze({__proto__:null,BrickBreaker:x}),S={cssContent:".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=chartViewport.css */\n"};let L=null;function k(){if(L)return L;const e=getComputedStyle(document.body);return L=e.fontFamily?e.fontFamily:l.Platform.fontFamily(),L}const P="11px";var D=Object.freeze({__proto__:null,getFontFamilyForCanvas:k,DEFAULT_FONT_SIZE:P});const I=8,R=2,M=4,H=12,O="8px";function B(e,t,i){e.moveTo(0,i),e.lineTo(t,i)}function A(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()}function G(e,t,s,r,n){e.save(),e.beginPath(),e.fillStyle=r,function(e,t,i,s,r,n){e.save();const o=i+r,a=t+s,l=.25*n;e.beginPath(),e.moveTo(t+n,i),e.lineTo(a-n,i),e.bezierCurveTo(a-l,i,a,i+l,a,i+n),e.lineTo(a,o-n),e.bezierCurveTo(a,o-l,a-l,o,a-n,o),e.lineTo(t+n,o),e.bezierCurveTo(t+l,o,t,o-l,t,o-n),e.lineTo(t,i+n),e.bezierCurveTo(t,i+l,t+l,i,t+n,i),e.closePath(),e.restore()}(e,t,s,I,I,R),e.fill(),e.textBaseline="top",e.fillStyle=i.ThemeSupport.instance().getComputedValue("--color-text-primary"),e.font=`${O} ${k()}`,e.fillText(n,t+I+M,s);const o=e.measureText(n).width,a=t+I+M+o;return e.restore(),a+H}var F={cssContent:'.flame-chart-main-pane{overflow:hidden;--selected-group-background:hsl(215deg 85% 98%);--selected-group-border:hsl(216deg 68% 54%)}:host-context(.theme-with-dark-background) .flame-chart-main-pane{--selected-group-background:hsl(215deg 85% 15%);--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)}.flame-chart-search-element{position:absolute;pointer-events:none;outline:1px solid var(--sys-color-on-surface-subtle);background-color:var(--sys-color-state-ripple-neutral-on-subtle)}.chart-cursor-element{position:absolute;top:0;bottom:0;z-index:100;width:2px;background-color:var(--sys-color-primary);pointer-events:none;&.using-new-overlays{background-color:var(--ref-palette-pink50)}}.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=flameChart.css */\n'},z={cssContent:".resources-dividers{position:absolute;left:0;right:0;top:0;z-index:-100;bottom:0}.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=timelineGrid.css */\n"};const W=new Map;class N{element;dividersElementInternal;gridHeaderElement;eventDividersElement;dividersLabelBarElementInternal;constructor(){this.element=document.createElement("div"),i.ThemeSupport.instance().appendStyle(this.element,z),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=`${P} ${k()}`;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}removeDividers(){this.dividersElementInternal.removeChildren(),this.dividersLabelBarElementInternal.removeChildren()}updateDividers(e,t){const i=N.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",W.set(a,e),a.appendChild(e),this.dividersLabelBarElementInternal.appendChild(a)}const i=s[t].time,l=s[t].position;if(a){const t=W.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")}hideDividers(){this.dividersElementInternal.classList.add("hidden")}showDividers(){this.dividersElementInternal.classList.remove("hidden")}setScrollTop(e){this.dividersLabelBarElementInternal.style.top=e+"px",this.eventDividersElement.style.top=e+"px"}}var U=Object.freeze({__proto__:null,TimelineGrid:N});const _={flameChart:"Flame Chart",sHovered:"{PH1} hovered",sSelected:"{PH1} selected",sExpanded:"{PH1} expanded",sCollapsed:"{PH1} collapsed",hideFunction:"Hide function",hideChildren:"Hide children",hideRepeatingChildren:"Hide repeating children",removeScriptFromIgnoreList:"Remove script from ignore list",addScriptToIgnoreList:"Add script to ignore list",resetChildren:"Reset children",resetTrace:"Reset trace",enterTrackConfigurationMode:"Configure tracks…",exitTrackConfigurationMode:"Finish configuring tracks"},V=e.i18n.registerUIStrings("ui/legacy/components/perf_ui/FlameChart.ts",_),X=e.i18n.getLocalizedString.bind(void 0,V),$=8,K=6+$/2,j=16;class Y extends(s.ObjectWrapper.eventMixin(a.Widget.VBox)){groupExpansionSetting;groupExpansionState;groupHiddenState;flameChartDelegate;chartViewport;dataProvider;candyStripePattern;contextMenu;viewportElement;canvas;popoverElement;markerHighlighElement;highlightElement;revealDescendantsArrowHighlightElement;selectedElement=null;rulerEnabled;barHeight;hitMarginPx;textBaseline;textPadding;highlightedMarkerIndex;highlightedEntryIndex;selectedEntryIndex;rawTimelineDataLength;markerPositions;lastMouseOffsetX;selectedGroupIndex;keyboardFocusedGroup;offsetWidth;offsetHeight;dragStartX;dragStartY;lastMouseOffsetY;minimumBoundaryInternal;maxDragOffset;timelineLevels;visibleLevelOffsets;visibleLevels;visibleLevelHeights;groupOffsets;rawTimelineData;forceDecorationCache;entryColorsCache;totalTime;lastPopoverState;#Q=0;#J;#ee;#te;#ie=[];#se=!1;#re=null;#ne=!0;constructor(e,t,s={}){super(!0),this.#J=`${P} ${k()}`,this.registerRequiredCSS(F),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 ie(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=null,this.canvas.tabIndex=0,a.ARIAUtils.setLabel(this.canvas,X(_.flameChart)),a.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("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),a.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=-1,this.rawTimelineDataLength=0,this.markerPositions=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=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()}highlightEntry(e){this.highlightedEntryIndex!==e&&this.dataProvider.entryColor(e)&&(this.highlightedEntryIndex=e,this.updateElementPosition(this.highlightElement,this.highlightedEntryIndex),this.dispatchEventToListeners("EntryHighlighted",e))}highlightAllEntries(e){for(const t of e){const e=this.viewportElement.createChild("div","flame-chart-search-element");this.#ie.push(e),e.id=t.toString(),this.updateElementPosition(e,t)}}removeSearchResultHighlights(){for(const e of this.#ie)e.remove();this.#ie=[]}hideHighlight(){-1===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("EntryHighlighted",-1))}createCandyStripePattern(){const e=17,t=document.createElement("canvas");t.width=e,t.height=e;const i=t.getContext("2d");i.translate(8.5,8.5),i.rotate(.25*Math.PI),i.translate(-8.5,-8.5),i.fillStyle="rgba(255, 0, 0, 0.8)";for(let e=-17;e<34;e+=3)i.fillRect(e,-17,1,51);return i.createPattern(t,"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}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){this.#te=-1;const t=e;if(this.lastMouseOffsetX=t.offsetX,this.lastMouseOffsetY=t.offsetY,!this.enabled())return;if(this.chartViewport.isDragging())return;const i=d.Types.Timing.MilliSeconds(this.chartViewport.pixelToTime(t.offsetX));this.dispatchEventToListeners("MouseMove",{mouseEvent:t,timeInMicroSeconds:d.Helpers.Timing.millisecondsToMicroseconds(i)});const{groupIndex:s,hoverType:r}=this.coordinatesToGroupIndexAndHoverType(t.offsetX,t.offsetY);switch(r){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.#oe(s,r);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":return void this.updateHighlight()}}#oe(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(i)?"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","timeline-info-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.#ae(e),void(e>=0&&this.rawTimelineData&&this.rawTimelineData.groups&&this.rawTimelineData.groups[e].selectable?this.viewportElement.style.cursor="pointer":this.viewportElement.style.cursor="default")}this.chartViewport.isDragging()||(this.#le(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.#le(e)}#le(e){const t=this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX,e);if(e===this.lastPopoverState.entryIndex&&t===this.lastPopoverState.hiddenEntriesPopover)return this.updatePopoverOffset();this.popoverElement.removeChildren();const i=this.timelineData();if(!i)return;const s=i.groups.at(this.selectedGroupIndex),r=t&&s?this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo&&this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo(e):this.dataProvider.prepareHighlightedEntryInfo(e);r&&(this.popoverElement.appendChild(r),this.updatePopoverOffset()),this.lastPopoverState={entryIndex:e,groupIndex:-1,hiddenEntriesPopover:t}}#ae(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(-1!==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;let a,l;for(let h=0;h<4;++h){const d=2&h?-10-n:10,c=1&h?-6-o:6;if(a=r.NumberUtilities.clamp(e+d,0,i-n),l=r.NumberUtilities.clamp(t+c,0,s-o),a>=e||e>=a+n||l>=t||t>=l+o)break}this.popoverElement.style.left=a+"px",this.popoverElement.style.top=(l||0)+this.#Q+"px"}onClick(e){const t=e;this.focus();if(this.maxDragOffset>5)return;const{groupIndex:i,hoverType:s}=this.coordinatesToGroupIndexAndHoverType(t.offsetX,t.offsetY);if(i>=0)switch(s){case"TRACK_CONFIG_UP_BUTTON":return void this.moveGroupUp(i);case"TRACK_CONFIG_DOWN_BUTTON":return void this.moveGroupDown(i);case"TRACK_CONFIG_HIDE_BUTTON":if(this.groupIsLastVisibleTopLevel(this.rawTimelineData?.groups[i]))return;return void this.hideGroup(i);case"TRACK_CONFIG_SHOW_BUTTON":return void this.showGroup(i);case"INSIDE_TRACK_HEADER":return this.#he(i),void this.toggleGroupExpand(i);case"INSIDE_TRACK":{this.#he(i);const e=this.timelineData(),s=l.Platform.isMac()?t.metaKey:t.ctrlKey;if(t.shiftKey&&-1!==this.highlightedEntryIndex&&e){const t=e.entryStartTimes[this.highlightedEntryIndex],i=t+e.entryTotalTimes[this.highlightedEntryIndex];this.chartViewport.setRangeSelection(t,i)}else s&&-1!==this.highlightedEntryIndex&&e?this.dispatchEventToListeners("AnnotateEntry",this.highlightedEntryIndex):(this.chartViewport.onClick(t),this.dispatchEventToListeners("EntryInvoked",this.highlightedEntryIndex));return}}}#he(e){if(e<0||this.selectedGroupIndex===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.selectedGroupIndex=e,this.flameChartDelegate.updateSelectedGroup(this,t[e]),this.draw(),a.ARIAUtils.alert(X(_.sSelected,{PH1:i}))):(this.deselectAllGroups(),a.ARIAUtils.alert(X(_.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&&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?X(_.sExpanded,{PH1:t}):X(_.sCollapsed,{PH1:t});a.ARIAUtils.alert(i)}}moveGroupUp(e){if(!(e<0)&&this.rawTimelineData&&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&&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.#de(e,!0)}showGroup(e){this.#de(e,!1)}#de(e,t){if(e<0)return;if(!this.rawTimelineData||!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?.(t,e),this.dataProvider.timelineData(!0),this.dataProvider.buildFlowForInitiator?.(t),this.update())}getPossibleActions(){const e=this.timelineData();if(!e)return;const t=e.groups.at(this.selectedGroupIndex);return t&&t.expanded&&t.showStackContextMenu?this.dataProvider.findPossibleContextMenuActions?.(this.selectedEntryIndex):void 0}#ce(e){if(this.#se)return;this.contextMenu=new a.ContextMenu.ContextMenu(e,{useSoftMenu:!0});const t=X(_.enterTrackConfigurationMode);this.contextMenu.defaultSection().appendItem(t,(()=>{this.#ue()}),{jslogContext:"track-configuration-enter"}),this.contextMenu.show()}#me(e){if(!1===this.#se)return;this.contextMenu=new a.ContextMenu.ContextMenu(e,{useSoftMenu:!0});const t=X(_.exitTrackConfigurationMode);this.contextMenu.defaultSection().appendItem(t,(()=>{this.#ge()}),{jslogContext:"track-configuration-exit"}),this.contextMenu.show()}#pe(){return Boolean(this.dataProvider.hasTrackConfigurationMode&&this.dataProvider.hasTrackConfigurationMode())}onContextMenu(e){const{groupIndex:t,hoverType:i}=this.coordinatesToGroupIndexAndHoverType(e.offsetX,e.offsetY);if(this.#se)return void this.#me(e);if("INSIDE_TRACK_HEADER"===i&&this.#pe()&&this.#ce(e),-1===this.highlightedEntryIndex)return;if(this.dispatchEventToListeners("EntryInvoked",this.highlightedEntryIndex),this.setSelectedEntry(this.highlightedEntryIndex),this.#he(t),this.dataProvider.customizedContextMenu&&(this.contextMenu=this.dataProvider.customizedContextMenu(e,this.highlightedEntryIndex),this.contextMenu))return void this.contextMenu.show();if(!this.dataProvider.modifyTree)return;const s=this.getPossibleActions();if(!s)return;this.contextMenu=new a.ContextMenu.ContextMenu(e,{useSoftMenu:!0});this.contextMenu.defaultSection().appendItem(X(_.hideFunction),(()=>{this.modifyTree("MERGE_FUNCTION",this.selectedEntryIndex)}),{disabled:!s?.MERGE_FUNCTION,jslogContext:"hide-function"}).setShortcut("H");this.contextMenu.defaultSection().appendItem(X(_.hideChildren),(()=>{this.modifyTree("COLLAPSE_FUNCTION",this.selectedEntryIndex)}),{disabled:!s?.COLLAPSE_FUNCTION,jslogContext:"hide-children"}).setShortcut("C");this.contextMenu.defaultSection().appendItem(X(_.hideRepeatingChildren),(()=>{this.modifyTree("COLLAPSE_REPEATING_DESCENDANTS",this.selectedEntryIndex)}),{disabled:!s?.COLLAPSE_REPEATING_DESCENDANTS,jslogContext:"hide-repeating-children"}).setShortcut("R");this.contextMenu.defaultSection().appendItem(X(_.resetChildren),(()=>{this.modifyTree("RESET_CHILDREN",this.selectedEntryIndex)}),{disabled:!s?.RESET_CHILDREN,jslogContext:"reset-children"}).setShortcut("U"),this.contextMenu.defaultSection().appendItem(X(_.resetTrace),(()=>{this.modifyTree("UNDO_ALL_ACTIONS",this.selectedEntryIndex)}),{disabled:!s?.UNDO_ALL_ACTIONS,jslogContext:"reset-trace"});const r=this.dataProvider.eventByIndex?.(this.selectedEntryIndex);if(r&&r instanceof d.Handlers.ModelHandlers.Frames.TimelineFrame==!1){const e=d.Types.TraceEvents.isProfileCall(r)?r.callFrame.url:void 0;e&&(h.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(e)?this.contextMenu.defaultSection().appendItem(X(_.removeScriptFromIgnoreList),(()=>{h.IgnoreListManager.IgnoreListManager.instance().unIgnoreListURL(e)}),{jslogContext:"remove-from-ignore-list"}):this.contextMenu.defaultSection().appendItem(X(_.addScriptToIgnoreList),(()=>{h.IgnoreListManager.IgnoreListManager.instance().ignoreListURL(e)}),{jslogContext:"add-to-ignore-list"}))}this.contextMenu.show()}handleFlameChartTransformEvent(e){if(-1===this.selectedEntryIndex)return;const t=this.getPossibleActions();if(!t)return;const i=e;let s=!1;"KeyH"===i.code&&t.MERGE_FUNCTION?(this.modifyTree("MERGE_FUNCTION",this.selectedEntryIndex),s=!0):"KeyC"===i.code&&t.COLLAPSE_FUNCTION?(this.modifyTree("COLLAPSE_FUNCTION",this.selectedEntryIndex),s=!0):"KeyR"===i.code&&t.COLLAPSE_REPEATING_DESCENDANTS?(this.modifyTree("COLLAPSE_REPEATING_DESCENDANTS",this.selectedEntryIndex),s=!0):"KeyU"===i.code&&(this.modifyTree("RESET_CHILDREN",this.selectedEntryIndex),s=!0),s&&i.consume(!0)}onKeyDown(e){if(!a.KeyboardShortcut.KeyboardShortcut.hasNoModifiers(e)||!this.timelineData())return;let t=this.handleSelectionNavigation(e);!t&&this.rawTimelineData&&this.rawTimelineData.groups&&(t=this.handleKeyboardGroupNavigation(e)),t||this.handleFlameChartTransformEvent(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],{colorBuckets:g,titleIndices:p}=this.getDrawableData(t,s),f=e=>{const t=Math.min(this.#fe(s,e),r);return s.entryLevels[e]>=d&&s.entryLevels[e]<c&&t>i};let v=[];for(const[e,{indexes:i}]of g){const r=i.filter(f);v=[...v,...r],this.#ve(t,s,e,r)}const w=p.filter(f);return this.drawEventTitles(t,s,w,r),t.restore(),{top:l[h],height:m-u,visibleEntries:new Set(v)}}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].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.#he(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.#he(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.#he(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=a.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),!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.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||!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.#we(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||!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.#se?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.#se)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"}}#ue(){const e=document.createElement("div");e.classList.add("flame-chart-edit-confirm");const t=new c.Button.Button;t.data={variant:"primary",jslogContext:"track-configuration-exit"},t.innerText=X(_.exitTrackConfigurationMode),e.appendChild(t),t.addEventListener("click",(()=>{this.#ge()})),this.viewportElement.appendChild(e),this.#se=!0,this.updateLevelPositions(),this.draw()}#be(){const e=this.viewportElement.querySelector(".flame-chart-edit-confirm");e&&this.viewportElement.removeChild(e)}#ge(){this.#be(),this.#se=!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:d.Helpers.Timing.traceWindowFromMilliSeconds(this.minimumBoundary(),this.maximumBoundary())});const t=this.offsetWidth,s=this.offsetHeight,r=this.canvas.getContext("2d");r.save();const n=window.devicePixelRatio,o=this.chartViewport.scrollOffset();r.scale(n,n),r.fillStyle="rgba(0, 0, 0, 0)",r.fillRect(0,0,t,s),r.translate(0,-o),r.font=this.#J;const{markerIndices:a,colorBuckets:l,titleIndices:h}=this.getDrawableData(r,e);r.save(),this.forEachGroupInViewport(((e,s,n,o,a)=>{this.isGroupFocused(s)&&(r.fillStyle=i.ThemeSupport.instance().getComputedValue("--selected-group-background",this.contentElement),r.fillRect(0,e,t,a-n.style.padding))})),r.restore();const c=this.rawTimelineData?.groups