ember-native-devtools 1.0.2

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/panels/timeline/components/insights/insights.js

@@ -0,0 +1,85 @@
+import*as e from"../../../../ui/lit-html/lit-html.js";import*as t from"../../../../ui/components/helpers/helpers.js";import*as i from"../../../../ui/components/buttons/buttons.js";import*as s from"../../../../ui/visual_logging/visual_logging.js";import*as n from"../../../../core/common/common.js";import*as o from"../../../../core/i18n/i18n.js";import*as a from"../../../../core/platform/platform.js";import*as r from"../../../../models/trace/trace.js";import*as d from"../../../../ui/components/icon_button/icon_button.js";const l=new CSSStyleSheet;l.replaceSync(".insight{display:block;position:relative;width:auto;height:auto;margin:10px 0;border-radius:var(--sys-shape-corner-extra-small);overflow:hidden;border:1px solid var(--sys-color-divider);background-color:var(--sys-color-base);&.closed{background-color:var(--sys-color-surface3);border:none}header{padding:10px;h3{font:var(--sys-typescale-body4-medium)}}}.insight-hover-icon{position:absolute;top:10px;right:10px;border:none;width:var(--sys-size-9);height:var(--sys-size-9);box-shadow:var(--sys-elevation-level1);border-radius:var(--sys-shape-corner-full);background:var(--sys-color-cdt-base-container);opacity:0%;transition:opacity 0.2s ease;.insight:hover &{opacity:100%}devtools-button{transition:transform 0.2s ease}&.active devtools-button{transform:rotate(180deg)}}.insight-body{padding:0 10px}.insight-title{color:var(--sys-color-on-base);margin-block:3px}.table-container dl{display:grid;grid-template-columns:2fr 1fr}.table-container dt{padding:3px}.table-container dd{display:grid;justify-items:end;margin-inline-start:auto}.insight-description{border-bottom:1px solid var(--sys-color-divider);padding-bottom:10px}.link{color:var(--sys-color-primary)}.dl-title{font-weight:bold}.dl-value{font-weight:bold}.metric-value-bad{color:var(--app-color-performance-bad)}.metric-value-good{color:var(--app-color-performance-good)}.insight-entry{font:var(--sys-typescale-body4-medium);padding-block:2px;display:flex;align-items:center}.insight-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-block:10px}.element-img{max-width:90%}.element-img-details{font:var(--sys-typescale-body4-regular);.element-img-details-size{color:var(--color-text-secondary)}}::slotted(*){font:var(--sys-typescale-body4-regular)}\n/*# sourceURL=sidebarInsight.css */\n");class c extends Event{name;navigationId;createOverlayFn;static eventName="insightactivated";constructor(e,t,i){super(c.eventName,{bubbles:!0,composed:!0}),this.name=e,this.navigationId=t,this.createOverlayFn=i}}class h extends Event{static eventName="insightdeactivated";constructor(){super(h.eventName,{bubbles:!0,composed:!0})}}class g extends HTMLElement{static litTagName=e.literal`devtools-performance-sidebar-insight`;#e=this.attachShadow({mode:"open"});#t=this.#i.bind(this);#s="";#n=!1;set data(e){this.#s=e.title,this.#n=e.expanded,t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[l],t.ScheduledRender.scheduleRender(this,this.#t)}#o(){this.dispatchEvent(new CustomEvent("insighttoggleclick"))}#a(t){const s=e.Directives.classMap({"insight-hover-icon":!0,active:t});return e.html`
+      <div class=${s} aria-hidden="true">
+        <${i.Button.Button.litTagName} .data=${{variant:"icon",iconName:"chevron-down",size:"SMALL"}}
+      ></${i.Button.Button.litTagName}>
+      </div>
+
+    `}#i(){const t=e.Directives.classMap({insight:!0,closed:!this.#n}),i=e.html`
+      <div class=${t}>
+        <header @click=${this.#o} jslog=${s.action("timeline.toggle-insight").track({click:!0})}>
+          ${this.#a(this.#n)}
+          <h3 class="insight-title">${this.#s}</h3>
+        </header>
+        ${this.#n?e.html`
+          <div class="insight-body">
+            <slot name="insight-description"></slot>
+            <slot name="insight-content"></slot>
+          </div>`:e.nothing}
+      </div>
+    `;e.render(i,this.#e,{host:this})}}customElements.define("devtools-performance-sidebar-insight",g);var p,m=Object.freeze({__proto__:null,InsightActivated:c,InsightDeactivated:h,SidebarInsight:g});!function(e){e.ALL="All",e.INP="INP",e.LCP="LCP",e.CLS="CLS",e.OTHER="Other"}(p||(p={}));var u=Object.freeze({__proto__:null,get InsightsCategories(){return p}});function v(e){return e.activeCategory===p.ALL||e.activeCategory===e.insightCategory}function y(e){const t=e.activeInsight&&e.activeInsight.name===e.insightName&&e.activeInsight.navigationId===e.insightNavigationId;return Boolean(t)}class b extends HTMLElement{shadow=this.attachShadow({mode:"open"});data={insights:null,navigationId:null,activeInsight:null,activeCategory:p.ALL};#t=this.render.bind(this);scheduleRender(){t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.shadow.adoptedStyleSheets.push(l)}set insights(e){this.data.insights=e,t.ScheduledRender.scheduleRender(this,this.#t)}set navigationId(e){this.data.navigationId=e,t.ScheduledRender.scheduleRender(this,this.#t)}set activeInsight(e){this.data.activeInsight=e,t.ScheduledRender.scheduleRender(this,this.#t)}set activeCategory(e){this.data.activeCategory=e,t.ScheduledRender.scheduleRender(this,this.#t)}onSidebarClick(){this.isActive()?this.dispatchEvent(new h):this.data.navigationId&&this.dispatchEvent(new c(this.internalName,this.data.navigationId,this.createOverlays.bind(this)))}isActive(){return y({activeInsight:this.data.activeInsight,insightName:this.internalName,insightNavigationId:this.data.navigationId})}}var f=Object.freeze({__proto__:null,shouldRenderForCategory:v,insightIsActive:y,BaseInsight:b});function T(e,t){if(!e||!t)return null;const i=e.get(t);if(!i)return null;const s=i.CumulativeLayoutShift;return s instanceof Error?null:s}class S extends b{static litTagName=e.literal`devtools-performance-cls-culprits`;insightCategory=p.CLS;internalName="cls-culprits";userVisibleTitle="Layout Shift Culprits";createOverlays(){return[]}#i(){return e.html`
+        <div class="insights">
+            <${g.litTagName} .data=${{title:this.userVisibleTitle,expanded:this.isActive()}}
+            @insighttoggleclick=${this.onSidebarClick}>
+                <div slot="insight-description" class="insight-description">
+                    <p>Layout shifts happen when existing elements unexpectedly move.
+                         Shifts are caused by nodes changing size or newly added. Investigate
+                         and fix these culprits.</p>
+                </div>
+            </${g}>
+        </div>`}render(){const t=T(this.data.insights,this.data.navigationId),i=t?.shifts&&t.shifts.size>0,s=v({activeCategory:this.data.activeCategory,insightCategory:this.insightCategory}),n=i&&s?this.#i():e.nothing;e.render(n,this.shadow,{host:this})}}customElements.define("devtools-performance-cls-culprits",S);var L=Object.freeze({__proto__:null,getCLSInsight:T,CLSCulprits:S});const C=new CSSStyleSheet;C.replaceSync(".discovery-delay{margin-top:0}.discovery-time-ms{color:var(--sys-color-error-bright)}ul.discovery-icon-results{list-style:none;margin:0;padding:0;li{display:flex;align-items:flex-start;justify-content:flex-start;gap:4px;span{padding-top:2px}}}\n/*# sourceURL=lcpDiscovery.css */\n");const I={lcpLoadDelay:"LCP image loaded {PH1} after earliest start point.",fetchPriorityApplied:"fetchpriority=high applied",requestDiscoverable:"Request is discoverable in initial document",lazyLoadNotApplied:"lazy load not applied"},R=o.i18n.registerUIStrings("panels/timeline/components/insights/LCPDiscovery.ts",I),D=o.i18n.getLocalizedString.bind(void 0,R);function x(e,t){if(!e||!t)return null;const i=e.get(t);if(!i)return null;const s=i.LargestContentfulPaint;return s instanceof Error?null:s}function $(e,t){const i=x(e,t);if(!i)return null;if(void 0===i.lcpResource)return null;const s=i.shouldIncreasePriorityHint,n=i.shouldPreloadImage,o=i.shouldRemoveLazyLoading;if(!(void 0!==s&&void 0!==n&&void 0!==o))return null;const a={shouldIncreasePriorityHint:s,shouldPreloadImage:n,shouldRemoveLazyLoading:o,resource:i.lcpResource,discoveryDelay:null};if(i.earliestDiscoveryTimeTs&&i.lcpResource){const e=i.lcpResource.ts-i.earliestDiscoveryTimeTs;a.discoveryDelay=r.Types.Timing.MicroSeconds(e)}return a}class P extends b{static litTagName=e.literal`devtools-performance-lcp-discovery`;insightCategory=p.LCP;internalName="lcp-discovery";userVisibleTitle="LCP request discovery";connectedCallback(){super.connectedCallback(),this.shadow.adoptedStyleSheets.push(C)}#r(t){const i=t?"clear":"check-circle";return e.html`
+      <${d.Icon.Icon.litTagName}
+      name=${i}
+      class=${t?"metric-value-bad":"metric-value-good"}
+      ></${d.Icon.Icon.litTagName}>
+    `}#d(e){const t=document.createElement("span");return t.classList.add("discovery-time-ms"),t.innerText=o.TimeUtilities.formatMicroSecondsTime(e),o.i18n.getFormatLocalizedString(R,I.lcpLoadDelay,{PH1:t})}createOverlays(){const e=$(this.data.insights,this.data.navigationId);if(!e||!e.discoveryDelay)return[];const t=r.Helpers.Timing.traceWindowFromMicroSeconds(r.Types.Timing.MicroSeconds(e.resource.ts-e.discoveryDelay),e.resource.ts),i=r.Helpers.Timing.microSecondsToMilliseconds(t.range);return[{type:"ENTRY_OUTLINE",entry:e.resource,outlineReason:"ERROR"},{type:"CANDY_STRIPED_TIME_RANGE",bounds:t,entry:e.resource},{type:"TIMESPAN_BREAKDOWN",sections:[{bounds:t,label:D(I.lcpLoadDelay,{PH1:o.TimeUtilities.preciseMillisToString(i,2)})}],entry:e.resource}]}#l(t){return e.html`
+        <div class="insights">
+          <${g.litTagName} .data=${{title:this.userVisibleTitle,expanded:this.isActive()}}
+          @insighttoggleclick=${this.onSidebarClick}
+        >
+          <div slot="insight-description" class="insight-description">
+          ${t.discoveryDelay?e.html`<p class="discovery-delay">${this.#d(t.discoveryDelay)}</p>`:e.nothing}
+            <ul class="insight-results discovery-icon-results">
+              <li class="insight-entry">
+                ${this.#r(t.shouldIncreasePriorityHint)}
+                <span>${D(I.fetchPriorityApplied)}</span>
+              </li>
+              <li class="insight-entry">
+                ${this.#r(t.shouldPreloadImage)}
+                <span>${D(I.requestDiscoverable)}</span>
+              </li>
+              <li class="insight-entry">
+                ${this.#r(t.shouldRemoveLazyLoading)}
+                <span>${D(I.lazyLoadNotApplied)}</span>
+              </li>
+            </ul>
+          </div>
+          <div slot="insight-content" class="insight-content">
+            <img class="element-img" data-src=${t.resource.args.data.url} src=${t.resource.args.data.url}>
+            <div class="element-img-details">
+              ${n.ParsedURL.ParsedURL.extractName(t.resource.args.data.url??"")}
+              <div class="element-img-details-size">${a.NumberUtilities.bytesToString(t.resource.args.data.decodedBodyLength??0)}</div>
+            </div>
+          </div>
+        </${g}>
+      </div>`}render(){const t=$(this.data.insights,this.data.navigationId),i=v({activeCategory:this.data.activeCategory,insightCategory:this.insightCategory}),s=t&&i?this.#l(t):e.nothing;e.render(s,this.shadow,{host:this})}}customElements.define("devtools-performance-lcp-discovery",P);var N=Object.freeze({__proto__:null,getLCPInsightData:x,LCPDiscovery:P});const w={timeToFirstByte:"Time to first byte",resourceLoadDelay:"Resource load delay",resourceLoadDuration:"Resource load duration",elementRenderDelay:"Element render delay"},M=o.i18n.registerUIStrings("panels/timeline/components/insights/LCPPhases.ts",w),_=o.i18n.getLocalizedString.bind(void 0,M);class E extends b{static litTagName=e.literal`devtools-performance-lcp-by-phases`;insightCategory=p.LCP;internalName="lcp-by-phase";userVisibleTitle="LCP by phase";#c(e,t){if(!e||!t)return[];const i=e.get(t);if(!i)return[];const s=i.LargestContentfulPaint;if(s instanceof Error)return[];const n=s.lcpMs,o=s.phases;if(!n||!o)return[];const{ttfb:a,loadDelay:r,loadTime:d,renderDelay:l}=o;if(r&&d){return[{phase:_(w.timeToFirstByte),timing:a,percent:`${(100*a/n).toFixed(0)}%`},{phase:_(w.resourceLoadDelay),timing:r,percent:`${(100*r/n).toFixed(0)}%`},{phase:_(w.resourceLoadDuration),timing:d,percent:`${(100*d/n).toFixed(0)}%`},{phase:_(w.elementRenderDelay),timing:l,percent:`${(100*l/n).toFixed(0)}%`}]}return[{phase:_(w.timeToFirstByte),timing:a,percent:`${(100*a/n).toFixed(0)}%`},{phase:_(w.elementRenderDelay),timing:l,percent:`${(100*l/n).toFixed(0)}%`}]}createOverlays(){if(!this.data.insights||!this.data.navigationId)return[];const{navigationId:e,insights:t}=this.data,i=t.get(e);if(!i)return[];const s=i.LargestContentfulPaint;if(s instanceof Error)return[];const n=s.phases,o=s.lcpTs;if(!n||!o)return[];const a=r.Types.Timing.MicroSeconds(r.Helpers.Timing.millisecondsToMicroseconds(o)),d=[];if(n?.loadDelay||n?.loadTime){if(n?.loadDelay&&n?.loadTime){const e=r.Types.Timing.MicroSeconds(a-r.Helpers.Timing.millisecondsToMicroseconds(n.renderDelay)),t=r.Helpers.Timing.traceWindowFromMicroSeconds(e,a),i=r.Types.Timing.MicroSeconds(e-r.Helpers.Timing.millisecondsToMicroseconds(n.loadTime)),s=r.Helpers.Timing.traceWindowFromMicroSeconds(i,e),o=r.Types.Timing.MicroSeconds(i-r.Helpers.Timing.millisecondsToMicroseconds(n.loadDelay)),l=r.Helpers.Timing.traceWindowFromMicroSeconds(o,i),c=r.Types.Timing.MicroSeconds(o-r.Helpers.Timing.millisecondsToMicroseconds(n.ttfb)),h=r.Helpers.Timing.traceWindowFromMicroSeconds(c,o);d.push({bounds:h,label:_(w.timeToFirstByte)},{bounds:l,label:_(w.resourceLoadDelay)},{bounds:s,label:_(w.resourceLoadDuration)},{bounds:t,label:_(w.elementRenderDelay)})}}else{const e=r.Types.Timing.MicroSeconds(a-r.Helpers.Timing.millisecondsToMicroseconds(n.renderDelay)),t=r.Helpers.Timing.traceWindowFromMicroSeconds(e,a),i=r.Types.Timing.MicroSeconds(e-r.Helpers.Timing.millisecondsToMicroseconds(n.ttfb)),s=r.Helpers.Timing.traceWindowFromMicroSeconds(i,e);d.push({bounds:s,label:_(w.timeToFirstByte)},{bounds:t,label:_(w.elementRenderDelay)})}return[{type:"TIMESPAN_BREAKDOWN",sections:d}]}#h(t){return e.html`
+    <div class="insights">
+      <${g.litTagName} .data=${{title:this.userVisibleTitle,expanded:this.isActive()}}
+        @insighttoggleclick=${this.onSidebarClick}
+      >
+        <div slot="insight-description" class="insight-description">
+          Each
+          <x-link class="link" href="https://web.dev/articles/optimize-lcp#lcp-breakdown">phase has specific recommendations to improve.</x-link>
+          In an ideal load, the two delay phases should be quite short.
+        </div>
+        <div slot="insight-content" class="table-container">
+          <dl>
+            <dt class="dl-title">Phase</dt>
+            <dd class="dl-title">% of LCP</dd>
+            ${t?.map((t=>e.html`
+              <dt>${t.phase}</dt>
+              <dd class="dl-value">${t.percent}</dd>
+            `))}
+          </dl>
+        </div>
+      </${m}>
+    </div>`}#g(e){return!!e&&e.length>0}render(){const t=this.#c(this.data.insights,this.data.navigationId),i=v({activeCategory:this.data.activeCategory,insightCategory:this.insightCategory})&&this.#g(t)?this.#h(t):e.nothing;e.render(i,this.shadow,{host:this})}}customElements.define("devtools-performance-lcp-by-phases",E);var k=Object.freeze({__proto__:null,LCPPhases:E});export{L as CLSCulprits,f as Helpers,N as LCPDiscovery,k as LCPPhases,m as SidebarInsight,u as Types};

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/panels/timeline/extensions/extensions.js

@@ -0,0 +1 @@
+import*as e from"../../../ui/legacy/theme_support/theme_support.js";var r=Object.freeze({__proto__:null,extensionEntryColor:function(r){let a="--ref-palette-primary70";switch(r.args.color){case"primary":a="--ref-palette-primary70";break;case"primary-light":a="--ref-palette-primary80";break;case"primary-dark":a="--ref-palette-primary60";break;case"secondary":a="--ref-palette-secondary70";break;case"secondary-light":a="--ref-palette-secondary80";break;case"secondary-dark":a="--ref-palette-secondary60";break;case"tertiary":a="--ref-palette-tertiary70";break;case"tertiary-light":a="--ref-palette-tertiary80";break;case"tertiary-dark":a="--ref-palette-tertiary60";break;case"error":a="--ref-palette-error50"}return e.ThemeSupport.instance().getComputedValue(a)}});export{r as ExtensionUI};

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/panels/timeline/overlays/components/components.js

@@ -0,0 +1,52 @@
+import*as e from"../../../../ui/components/helpers/helpers.js";import*as t from"../../../../ui/lit-html/lit-html.js";import*as n from"../../../../core/i18n/i18n.js";import*as i from"../../../../models/trace/trace.js";const s=new CSSStyleSheet;s.replaceSync(":host{display:flex;width:100%;height:100%}\n/*# sourceURL=entriesLinkOverlay.css */\n");class r extends HTMLElement{static litTagName=t.literal`devtools-entries-link-overlay`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#i;#s;#r=null;#a=null;constructor(e){super(),this.#n(),this.#i=e,this.#s=e,this.#r=this.#e.querySelector(".connectorContainer")??null,this.#a=this.#r?.querySelector("line")??null}connectedCallback(){this.#e.adoptedStyleSheets=[s]}set coordinateFrom(e){this.#i=e,this.#l()}set coordinateTo(e){this.#s=e,this.#l()}#l(){this.#a?(this.#a.setAttribute("x1",this.#i.x.toString()),this.#a.setAttribute("y1",this.#i.y.toString()),this.#a.setAttribute("x2",this.#s.x.toString()),this.#a.setAttribute("y2",this.#s.y.toString()),this.#a.setAttribute("stroke","black"),this.#a.setAttribute("stroke-width","2"),e.ScheduledRender.scheduleRender(this,this.#t)):console.error("`connector` element is missing.")}#n(){t.render(t.html`
+          <svg class="connectorContainer" width="100%" height="100%">
+            <defs>
+              <marker
+                id='arrow'
+                orient="auto"
+                markerWidth='3'
+                markerHeight='4'
+                refX='4'
+                refY='2'>
+                <path d='M0,0 V4 L4,2 Z' fill="black" />
+              </marker>
+            </defs>
+            <line marker-end='url(#arrow)'/>
+          </svg>
+        `,this.#e,{host:this})}}customElements.define("devtools-entries-link-overlay",r);var a=Object.freeze({__proto__:null,EntriesLinkOverlay:r});const l=new CSSStyleSheet;l.replaceSync(".label-parts-wrapper{transform:translate(-50%);display:flex;flex-direction:column;color:var(--color-selected-option);align-items:center}.label-box{pointer-events:auto;background-color:var(--sys-color-token-variable);border-radius:4px;font-family:var(--monospace-font-family);font-weight:bold;white-space:nowrap}.label-box:focus{background-color:var(--color-selected-option);color:var(--sys-color-token-variable)}.connectorContainer{overflow:visible}.entry-highlight-wrapper{box-sizing:border-box;border:2px solid var(--sys-color-token-variable);border-radius:7px}\n/*# sourceURL=entryLabelOverlay.css */\n");class o extends Event{static eventName="emptyentrylabelremoveevent";constructor(){super(o.eventName)}}class h extends Event{newLabel;static eventName="entrylabelchangeevent";constructor(e){super(h.eventName),this.newLabel=e}}class c extends HTMLElement{static LABEL_AND_CONNECTOR_SHIFT_LENGTH=8;static LABEL_CONNECTOR_HEIGHT=7;static LABEL_HEIGHT=17;static LABEL_PADDING=4;static LABEL_AND_CONNECTOR_HEIGHT=c.LABEL_HEIGHT+2*c.LABEL_PADDING+c.LABEL_CONNECTOR_HEIGHT;static MAX_LABEL_LENGTH=100;static litTagName=t.literal`devtools-entry-label-overlay`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#o=!0;#h=null;#c=null;#d=null;#b=null;#r=null;#p;#u;constructor(e,t){super(),this.#n(),this.#c=this.#e.querySelector(".label-parts-wrapper"),this.#d=this.#c?.querySelector(".label-box")??null,this.#r=this.#c?.querySelector(".connectorContainer")??null,this.#b=this.#c?.querySelector(".entry-highlight-wrapper")??null,this.#p=e,this.#u=t,this.#y(e),this.#g()}connectedCallback(){this.#e.adoptedStyleSheets=[l]}#x(){const e=this.#d?.textContent??"";e!==this.#p&&(this.#p=e,this.dispatchEvent(new h(this.#p)))}#m(e){if(!this.#d)return!1;return"Enter"===e.key||"Escape"===e.key?(this.#d.dispatchEvent(new FocusEvent("blur",{bubbles:!0})),!1):null!==this.#d.textContent&&this.#d.textContent.length<=c.MAX_LABEL_LENGTH||(!!["Backspace","Delete","ArrowLeft","ArrowRight"].includes(e.key)||(!(1!==e.key.length||!e.ctrlKey)||(e.preventDefault(),!1)))}#v(e){e.preventDefault();const t=e.clipboardData;if(!t||!this.#d)return;const n=t.getData("text"),i=(this.#d.textContent+n).slice(0,c.MAX_LABEL_LENGTH+1);this.#d.textContent=i;const s=window.getSelection(),r=document.createRange();r.selectNodeContents(this.#d),r.collapse(!1),s?.removeAllRanges(),s?.addRange(r)}set entryLabelParams(t){t.height===this.#h?.height&&t.width===this.#h?.width&&t.cutOffEntryHeight===this.#h?.cutOffEntryHeight||(this.#h=t,e.ScheduledRender.scheduleRender(this,this.#t),this.#L())}#g(){if(!this.#r)return void console.error("`connectorLineContainer` element is missing.");const e=this.#r.querySelector("line"),t=this.#r.querySelector("circle");e&&t?(this.#r.setAttribute("width",(2*c.LABEL_AND_CONNECTOR_SHIFT_LENGTH).toString()),this.#r.setAttribute("height",c.LABEL_CONNECTOR_HEIGHT.toString()),e.setAttribute("x1","0"),e.setAttribute("y1","0"),e.setAttribute("x2",c.LABEL_AND_CONNECTOR_SHIFT_LENGTH.toString()),e.setAttribute("y2",c.LABEL_CONNECTOR_HEIGHT.toString()),e.setAttribute("stroke","black"),e.setAttribute("stroke-width","2"),t.setAttribute("cx",c.LABEL_AND_CONNECTOR_SHIFT_LENGTH.toString()),t.setAttribute("cy",c.LABEL_CONNECTOR_HEIGHT.toString()),t.setAttribute("r","3"),t.setAttribute("fill","black")):console.error("Some entry label elements are missing.")}#y(e){this.#d?(this.#d.innerText=e,this.#d.style.height=`${c.LABEL_HEIGHT}px`,this.#d.style.padding=`${c.LABEL_PADDING}px`,this.#d.style.transform=`translateX(-${c.LABEL_AND_CONNECTOR_SHIFT_LENGTH}px)`,""!==e&&this.#w(!1)):console.error("`labelBox` element is missing.")}#L(){if(!(this.#b&&this.#h&&this.#d&&this.#r))return void console.error("Some elements required to draw `entryHighlightWrapper` are missing.");const{height:e,width:t,cutOffEntryHeight:n}=this.#h;this.#u?(this.#d.style.visibility=n>0?"hidden":"visible",this.#r.style.visibility=n>0?"hidden":"visible",this.#b.style.borderTopWidth=n>0?"0":"2px"):this.#b.style.borderBottomWidth=n>0?"0":"2px",this.#b.style.height=e-n+"px",this.#b.style.width=`${t}px`,this.#o&&this.#f()}#f(){this.#d?this.#d.focus():console.error("`labelBox` element is missing.")}#w(e){this.#o=e,this.#n(),e&&this.#f(),e||0!==this.#d?.innerText.length||this.dispatchEvent(new o)}#n(){t.render(t.html`
+        <span class="label-parts-wrapper">
+          <span
+            class="label-box"
+            @dblclick=${()=>this.#w(!0)}
+            @blur=${()=>this.#w(!1)}
+            @keydown=${this.#m}
+            @paste=${this.#v}
+            @keyup=${this.#x}
+            contenteditable=${this.#o}>
+          </span>
+          <svg class="connectorContainer">
+            <line/>
+            <circle/>
+          </svg>
+          <div class="entry-highlight-wrapper"/>
+        </span>`,this.#e,{host:this})}}customElements.define("devtools-entry-label-overlay",c);var d=Object.freeze({__proto__:null,EmptyEntryLabelRemoveEvent:o,EntryLabelChangeEvent:h,EntryLabelOverlay:c});const b=new CSSStyleSheet;b.replaceSync(":host{display:flex;overflow:hidden;flex-direction:column;justify-content:flex-end;width:100%;height:100%;box-sizing:border-box;padding-bottom:5px}.label{font-style:italic;text-align:center;box-sizing:border-box;width:max-content;max-width:250px;padding:0 3px;pointer-events:all;user-select:none;&.labelHidden{user-select:none;pointer-events:none;visibility:hidden}&.offScreenLeft{text-align:left}&.offScreenRight{text-align:right}}.label-text{text-overflow:ellipsis;max-height:40px;overflow:hidden;display:-webkit-box;white-space:break-spaces;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n/*# sourceURL=timeRangeOverlay.css */\n");class p extends Event{newLabel;static eventName="timerangelabelchange";constructor(e){super(p.eventName),this.newLabel=e}}class u extends Event{static eventName="timerangeremoveevent";constructor(){super(u.eventName)}}class y extends HTMLElement{static litTagName=t.literal`devtools-time-range-overlay`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#E=null;#R=null;#p;#o=!0;#S=null;#d=null;connectedCallback(){this.#e.adoptedStyleSheets=[b]}constructor(e){super(),this.#n(),this.#S=this.#e.querySelector(".label"),this.#d=this.#S?.querySelector(".label-text")??null,this.#p=e,this.#d?this.#d.innerText=e:console.error("`labelBox` element is missing.")}set canvasRect(t){this.#R=t,e.ScheduledRender.scheduleRender(this,this.#t)}set duration(t){t!==this.#E&&(this.#E=t,e.ScheduledRender.scheduleRender(this,this.#t))}#C(e){if(!this.#R)return 0;const{x:t,width:n}=e,i=t+n,s=this.#R.x,r=this.#R.x+this.#R.width,a=Math.max(s,t);return Math.min(r,i)-a}afterOverlayUpdate(){if(!this.#S)return;if(!this.#R)return;const e=this.getBoundingClientRect(),t=this.#S.getBoundingClientRect(),n=this.#C(e)-9<=t.width-9;if(this.#S.classList.toggle("labelHidden",n),n)return;const i=(e.width-t.width)/2,s=e.x+i<this.#R.x;this.#S.classList.toggle("offScreenLeft",s);const r=this.#R.x+this.#R.width,a=e.x+i+t.width>r;if(this.#S.classList.toggle("offScreenRight",a),s)this.#S.style.marginLeft=`${Math.abs(this.#R.x-e.x)+9}px`;else if(a){const n=r-t.width-e.x;this.#S.style.marginLeft=`${n}px`}else this.#S.style.marginLeft=`${i}px`;""===this.#d?.innerText&&this.#B(!0)}#f(){this.#d?this.#d.focus():console.error("`labelBox` element is missing.")}#B(e){""!==this.#d?.innerText?(this.#o=e,this.#n(),e&&this.#f()):this.#f()}#x(){const e=this.#d?.textContent??"";e!==this.#p&&(this.#p=e,this.dispatchEvent(new p(this.#p)))}#m(e){return"Enter"!==e.key&&"Escape"!==e.key||(""===this.#p&&this.dispatchEvent(new u),this.#d?.blur(),!1)}#n(){const e=this.#E?n.TimeUtilities.formatMicroSecondsTime(this.#E):"";t.render(t.html`
+          <span
+            class="label">
+            <span
+             class="label-text"
+             @focusout=${()=>this.#B(!1)}
+             @dblclick=${()=>this.#B(!0)}
+             @keydown=${this.#m}
+             @keyup=${this.#x}
+             contenteditable=${this.#o}>
+            </span>
+            <span
+            class="duration">${e}</span>
+          </span>
+          `,this.#e,{host:this})}}customElements.define("devtools-time-range-overlay",y);var g=Object.freeze({__proto__:null,TimeRangeLabelChangeEvent:p,TimeRangeRemoveEvent:u,TimeRangeOverlay:y});const x=new CSSStyleSheet;x.replaceSync(":host{display:flex;overflow:hidden;flex-direction:row;justify-content:flex-end;align-items:flex-end;width:100%;box-sizing:border-box}.timespan-breakdown-overlay-section{border:solid;border-color:var(--sys-color-on-surface);border-left-width:1px;border-right-width:1px;border-top-width:4px;border-bottom:none;align-content:flex-start;text-align:center;overflow:hidden;text-overflow:ellipsis;background-image:linear-gradient(180deg,var(--sys-color-on-primary),transparent);height:90px;&:nth-child(odd){height:100px}&:nth-child(even){border-left-width:0;border-right-width:0}&:first-child{border-left-width:1px}&:last-child{border-right-width:1px}}.timespan-breakdown-overlay-label{font-family:var(--default-font-family);font-size:var(--sys-typescale-body2-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-medium);color:var(--sys-color-on-surface);text-align:center;box-sizing:border-box;width:max-content;padding:0 3px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;.duration-text{text-overflow:ellipsis;overflow:hidden;text-wrap:nowrap;display:block}&.labelHidden{user-select:none;pointer-events:none;visibility:hidden}&.labelTruncated{max-width:100%}&.offScreenLeft{text-align:left}&.offScreenRight{text-align:right}}\n/*# sourceURL=timespanBreakdownOverlay.css */\n");class m extends HTMLElement{static litTagName=t.literal`devtools-timespan-breakdown-overlay`;static TIMESPAN_BREAKDOWN_OVERLAY_STAGGER_PX=5;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#R=null;#T=null;connectedCallback(){this.#e.adoptedStyleSheets=[x],this.#n()}set canvasRect(t){this.#R=t,e.ScheduledRender.scheduleRender(this,this.#t)}set sections(t){t!==this.#T&&(this.#T=t,e.ScheduledRender.scheduleRender(this,this.#t))}afterOverlayUpdate(){const e=this.#e.querySelectorAll(".timespan-breakdown-overlay-section");if(!e)return;if(!this.#R)return;const t=new Map;for(const n of e){const e=n.querySelector(".timespan-breakdown-overlay-label");if(!e)continue;const i=n.getBoundingClientRect(),s=e.getBoundingClientRect();t.set(n,{sectionRect:i,labelRect:s,label:e})}for(const n of e){const e=t.get(n);if(!e)break;const{labelRect:i,sectionRect:s,label:r}=e,a=s.width<30,l=s.width-5<=i.width;if(r.classList.toggle("labelHidden",a),r.classList.toggle("labelTruncated",l),a||l)continue;const o=(s.width-i.width)/2,h=s.x+o<this.#R.x;r.classList.toggle("offScreenLeft",h);const c=this.#R.x+this.#R.width,d=s.x+o+i.width>c;if(r.classList.toggle("offScreenRight",d),h)r.style.marginLeft=`${Math.abs(this.#R.x-s.x)+9}px`;else if(d){const e=c-i.width-s.x;r.style.marginLeft=`${e}px`}else r.style.marginLeft=`${o}px`}}renderSection(e){const s=i.Helpers.Timing.microSecondsToMilliseconds(e.bounds.range);return t.html`
+      <div class="timespan-breakdown-overlay-section">
+        <div class="timespan-breakdown-overlay-label">
+          <span class="duration-text">${n.TimeUtilities.preciseMillisToString(s,2)}</span>
+          ${e.label}
+        </div>
+      </div>`}#n(){t.render(t.html`${this.#T?.map(this.renderSection)}`,this.#e,{host:this})}}customElements.define("devtools-timespan-breakdown-overlay",m);var v=Object.freeze({__proto__:null,TimespanBreakdownOverlay:m});export{a as EntriesLinkOverlay,d as EntryLabelOverlay,g as TimeRangeOverlay,v as TimespanBreakdownOverlay};

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/panels/timeline/overlays/overlays.js

@@ -0,0 +1 @@
+import*as e from"../../../core/platform/platform.js";import*as t from"../../../models/trace/trace.js";import*as n from"./components/components.js";const i=t.Types.Timing.MicroSeconds(5e3);function s(e){return"CURSOR_TIMESTAMP_MARKER"===e.type||"ENTRY_SELECTED"===e.type}class r extends Event{overlay;action;static eventName="annotationoverlayactionsevent";constructor(e,t){super(r.eventName),this.overlay=e,this.action=t}}class o extends EventTarget{#e=new Map;#t=null;#n=null;#i;#s={trace:{visibleWindow:null},charts:{main:null,network:null}};#r;#o;#a;constructor(e){super(),this.#o=e.container,this.#a=e.flameChartsContainer,this.#r=e.charts,this.#i=null,this.#a.addEventListener("mousemove",this.#l.bind(this))}#l(e){const t=e;if(this.#t=t.offsetX,this.#n=t.offsetY,!this.#i||this.#i.entryTo)return;const n=this.#s.charts.network?.heightPixels??0,i=this.#e.get(this.#i);if(i){i.querySelector("devtools-entries-link-overlay").coordinateTo={x:t.offsetX,y:t.offsetY+n}}}timingsForOverlayEntry(e){if(e instanceof t.Handlers.ModelHandlers.Frames.TimelineFrame)return{startTime:e.startTime,endTime:e.endTime,duration:e.duration};if(t.Types.TraceEvents.isSyntheticLayoutShift(e)){return{endTime:t.Types.Timing.MicroSeconds(e.ts+i),duration:i,startTime:e.ts}}return t.Helpers.Timing.eventTimingsMicroSeconds(e)}#h(e){return e instanceof t.Handlers.ModelHandlers.Frames.TimelineFrame?"main":t.Types.TraceEvents.isNetworkTrackEntry(e)?"network":"main"}add(e){if(this.#e.has(e))return e;const t=this.overlaysOfType(e.type);return s(e)&&t[0]?(this.updateExisting(t[0],e),t[0]):(this.#e.set(e,null),e)}updateExisting(e,t){if(this.#e.has(e))for(const[n,i]of Object.entries(t)){e[n]=i}else console.error("Trying to update an overlay that does not exist.")}overlaysForEntry(e){const t=[];for(const[n]of this.#e)"entry"in n&&n.entry===e&&t.push(n);return t}removeOverlaysOfType(e){const t=Array.from(this.#e.keys()).filter((t=>t.type===e));for(const e of t)this.remove(e);return t.length}overlaysOfType(e){const t=[];function n(t){return t.type===e}for(const[e]of this.#e)n(e)&&t.push(e);return t}remove(e){const t=this.#e.get(e);t&&this.#o&&this.#o.removeChild(t),this.#e.delete(e)}updateChartDimensions(e,t){this.#s.charts[e]=t}updateVisibleWindow(e){this.#s.trace.visibleWindow=e}reset(){this.#o&&(this.#o.innerHTML=""),this.#e.clear(),this.#s.trace.visibleWindow=null,this.#s.charts.main=null,this.#s.charts.network=null}update(){const e=[];for(const[t,n]of this.#e){const i=n||this.#c(t);n?this.#y(t,i):(this.#e.set(t,i),this.#o.appendChild(i)),this.#d(t,i),"TIME_RANGE"===t.type&&e.push(t)}e.length>1&&this.#m(e)}#m(e){const n=e.toSorted(((e,t)=>e.bounds.min-t.bounds.min)),i=new Map;for(let e=0;e<n.length;e++){const s=n[e],r=[];for(let i=e+1;i<n.length;i++){const e=n[i];if(!t.Helpers.Timing.boundsIncludeTimeRange({bounds:s.bounds,timeRange:e.bounds}))break;r.push(e)}i.set(s,r)}for(const[e,t]of i){const n=this.#e.get(e);if(!n)continue;let i=1;n.getAttribute("class")?.includes("overlap-")&&(i=0),t.forEach((e=>{const t=this.#e.get(e);t?.classList.add("overlap-"+i++)}))}}#d(n,i){switch(n.type){case"ENTRY_SELECTED":this.entryIsVisibleOnChart(n.entry)?(i.style.visibility="visible",this.#v(n,i)):i.style.visibility="hidden";break;case"ENTRY_OUTLINE":{const e=this.overlaysOfType("ENTRY_SELECTED")?.at(0);!Boolean(e&&e.entry===n.entry)&&this.entryIsVisibleOnChart(n.entry)?(i.style.visibility="visible",this.#v(n,i)):i.style.visibility="hidden";break}case"TIME_RANGE":{this.#u(n,i);const e=i.querySelector("devtools-time-range-overlay");e&&e.afterOverlayUpdate();break}case"ENTRY_LABEL":if(this.entryIsVisibleOnChart(n.entry)){i.style.visibility="visible";const e=this.#E(n,i),t=i.querySelector("devtools-entry-label-overlay");t&&e?t.entryLabelParams=e:(i.style.visibility="hidden",console.error("Cannot calculate entry width and height values required to draw a label overlay."))}else i.style.visibility="hidden";break;case"ENTRIES_LINK":this.#p(n,i);break;case"TIMESPAN_BREAKDOWN":{this.#f(n,i);const e=i.querySelector("devtools-timespan-breakdown-overlay");if(e&&e.afterOverlayUpdate(),n.entry){const{visibleWindow:e}=this.#s.trace;e&&this.#T(n.entry)&&t.Helpers.Timing.boundsIncludeTimeRange({bounds:e,timeRange:n.sections[0].bounds})?i.style.visibility="visible":i.style.visibility="hidden"}break}case"CURSOR_TIMESTAMP_MARKER":{const{visibleWindow:e}=this.#s.trace;e&&t.Helpers.Timing.timestampIsInBounds(e,n.timestamp)?(i.style.visibility="visible",this.#O(n,i)):i.style.visibility="hidden";break}case"CANDY_STRIPED_TIME_RANGE":{const{visibleWindow:e}=this.#s.trace;e&&this.#T(n.entry)&&t.Helpers.Timing.boundsIncludeTimeRange({bounds:e,timeRange:n.bounds})?(i.style.visibility="visible",this.#x(n,i)):i.style.visibility="hidden";break}default:e.TypeScriptUtilities.assertNever(n,`Unknown overlay: ${JSON.stringify(n)}`)}}#O(e,t){const n=this.#b("main",e.timestamp);t.style.left=`${n}px`}#f(e,t){const n=t.querySelector("devtools-timespan-breakdown-overlay"),i=n?.shadowRoot,s=i?.querySelectorAll(".timespan-breakdown-overlay-section");if(0===e.sections.length)return;const r=this.#b("main",e.sections[0].bounds.min),o=this.#b("main",e.sections[e.sections.length-1].bounds.max);if(null===r||null===o)return;const a=o-r;if(t.style.left=`${r}px`,t.style.width=`${a}px`,!s?.length)return;let l=0;for(const t of e.sections){const e=this.#b("main",t.bounds.min),n=this.#b("main",t.bounds.max);if(null===e||null===n)return;const i=n-e,r=s[l];r.style.left=`${e}px`,r.style.width=`${i}px`,l++}if(e.entry){if("network"===this.#h(e.entry)){const n=this.yPixelForEventOnChart(e.entry);if(null===n)return;const i=50,r=n-7,o=Math.max(r,0),a=Math.min(i,o);s[0].style.maxHeight=`${i}px`,s[0].style.height=`${a}px`;const l=r-a;t.style.top=`${l}px`,t.style.fontStyle="italic";const h=s[0].querySelector(".timespan-breakdown-overlay-label"),c=h?.querySelector("span");c&&h?.removeChild(c)}}}#p(e,t){const n=this.xPixelForEventEndOnChart(e.entryFrom)??0,i=(this.pixelHeightForEventOnChart(e.entryFrom)??0)/2,s=(this.yPixelForEventOnChart(e.entryFrom)??0)+i,r=t.querySelector("devtools-entries-link-overlay");r&&(r.coordinateFrom={x:n,y:s})}#u(e,t){const n=this.#b("main",e.bounds.min),i=this.#b("main",e.bounds.max);if(null===n||null===i)return;const s=i-n;t.style.left=`${n}px`,t.style.width=`${s}px`}#E(e,t){const i=this.#h(e.entry),s=this.xPixelForEventStartOnChart(e.entry),r=this.yPixelForEventOnChart(e.entry),{endTime:o}=this.timingsForOverlayEntry(e.entry),a=this.#b(i,o),l=this.pixelHeightForEventOnChart(e.entry)??0;if(null===s||null===r||null===a)return null;const h=a-s,c=Math.max(2,h),y=this.#s.charts.network?.heightPixels??0,d=this.networkChartOffsetHeight()-r,m=l+r-y,v=Math.max("main"===i?d:m,0);let u=r-n.EntryLabelOverlay.EntryLabelOverlay.LABEL_AND_CONNECTOR_HEIGHT;return"main"===i&&(u+=v),t.style.top=`${u}px`,t.style.left=`${s+c/2}px`,{height:l,width:c,cutOffEntryHeight:v,chart:i}}#x(e,t){const n=this.#h(e.entry),i=this.#b(n,e.bounds.min),s=this.#b(n,e.bounds.max);if(null===i||null===s)return;const r=s-i,o=Math.max(2,r);t.style.width=`${o}px`,t.style.left=`${i}px`;let a=this.yPixelForEventOnChart(e.entry);if(null===a)return;const l=this.pixelHeightForEventOnChart(e.entry)??0;let h=l;if(null!==h){if("main"===n){const e=this.networkChartOffsetHeight(),n=a<e;h=n?Math.abs(a+h-e):h,t.classList.toggle("cut-off-top",n),n&&(a=a+l-h)}else{const e=this.#s.charts.network?.heightPixels??0,n=a+l>e,i=a>e;t.classList.toggle("cut-off-top",i),t.classList.toggle("cut-off-bottom",n),n&&(h=e-a)}t.style.height=`${h}px`,t.style.top=`${a}px`}}#v(e,t){const n=this.#h(e.entry);let i=this.xPixelForEventStartOnChart(e.entry),s=this.yPixelForEventOnChart(e.entry);if(null===i||null===s)return;const{endTime:r,duration:o}=this.timingsForOverlayEntry(e.entry),a=this.#b(n,r);if(null===a)return;const l=this.pixelHeightForEventOnChart(e.entry)??0;let h=l;if(null===h)return;let c=a-i;if(!o){const t="main"===n?this.#r.mainProvider:this.#r.networkProvider,s="main"===n?this.#r.mainChart:this.#r.networkChart,r=t.indexForEvent?.(e.entry),o=s.getMarkerPixelsForEntryIndex(r??-1);o&&(i=o.x,c=o.width)}const y=Math.max(2,c);if(t.style.width=`${y}px`,"main"===n){const e=this.networkChartOffsetHeight(),n=s<e;h=n?Math.abs(s+h-e):h,t.classList.toggle("cut-off-top",n),n&&(s=s+l-h)}else{const e=this.#s.charts.network?.heightPixels??0,n=s+l>e;t.classList.toggle("cut-off-bottom",n),n&&(h=e-s)}t.style.height=`${h}px`,t.style.top=`${s}px`,t.style.left=`${i}px`}#c(e){const t=document.createElement("div");switch(t.classList.add("overlay-item",`overlay-type-${e.type}`),e.type){case"ENTRY_LABEL":{const i=new n.EntryLabelOverlay.EntryLabelOverlay(e.label,"main"===this.#h(e.entry));return i.addEventListener(n.EntryLabelOverlay.EmptyEntryLabelRemoveEvent.eventName,(()=>{this.dispatchEvent(new r(e,"Remove"))})),i.addEventListener(n.EntryLabelOverlay.EntryLabelChangeEvent.eventName,(t=>{const n=t.newLabel;e.label=n,this.dispatchEvent(new r(e,"Update"))})),t.appendChild(i),t}case"ENTRIES_LINK":{const i=this.xPixelForEventEndOnChart(e.entryFrom)??0,s=(this.pixelHeightForEventOnChart(e.entryFrom)??0)/2,r=(this.yPixelForEventOnChart(e.entryFrom)??0)+s,o=new n.EntriesLinkOverlay.EntriesLinkOverlay({x:i,y:r});return t.appendChild(o),t}case"ENTRY_OUTLINE":return t.classList.add(`outline-reason-${e.outlineReason}`),t;case"TIME_RANGE":{const i=new n.TimeRangeOverlay.TimeRangeOverlay(e.label);return i.duration=e.showDuration?e.bounds.range:null,i.canvasRect=this.#r.mainChart.canvasBoundingClientRect(),i.addEventListener(n.TimeRangeOverlay.TimeRangeLabelChangeEvent.eventName,(t=>{const n=t.newLabel;e.label=n,this.dispatchEvent(new r(e,"Update"))})),i.addEventListener(n.TimeRangeOverlay.TimeRangeRemoveEvent.eventName,(()=>{this.dispatchEvent(new r(e,"Remove"))})),t.appendChild(i),t}case"TIMESPAN_BREAKDOWN":{const i=new n.TimespanBreakdownOverlay.TimespanBreakdownOverlay;return i.sections=e.sections,i.canvasRect=this.#r.mainChart.canvasBoundingClientRect(),t.appendChild(i),t}default:return t}}#y(t,n){switch(t.type){case"ENTRY_SELECTED":case"ENTRY_OUTLINE":case"ENTRY_LABEL":case"CURSOR_TIMESTAMP_MARKER":case"CANDY_STRIPED_TIME_RANGE":break;case"TIME_RANGE":{const e=n.querySelector("devtools-time-range-overlay");e&&(e.duration=t.showDuration?t.bounds.range:null,e.canvasRect=this.#r.mainChart.canvasBoundingClientRect());break}case"ENTRIES_LINK":{const e=n.querySelector("devtools-entries-link-overlay");if(e)if(t.entryTo){const n=this.xPixelForEventStartOnChart(t.entryTo)??0,i=(this.pixelHeightForEventOnChart(t.entryTo)??0)/2,s=(this.yPixelForEventOnChart(t.entryTo)??0)+i;e.coordinateTo={x:n,y:s}}else this.#t&&this.#n&&(this.#i=t);break}case"TIMESPAN_BREAKDOWN":{const e=n.querySelector("devtools-timespan-breakdown-overlay");e&&(e.sections=t.sections,e.canvasRect=this.#r.mainChart.canvasBoundingClientRect());break}default:e.TypeScriptUtilities.assertNever(t,`Unexpected overlay ${t}`)}}entryIsVisibleOnChart(e){const t=this.#T(e),n=this.#g(e);return t&&n}#g(e){if(null===this.#s.trace.visibleWindow)return!1;const{startTime:n,endTime:i}=this.timingsForOverlayEntry(e),s=t.Helpers.Timing.traceWindowFromMicroSeconds(n,i);return t.Helpers.Timing.boundsIncludeTimeRange({bounds:this.#s.trace.visibleWindow,timeRange:s})}#T(e){const t=this.#h(e),n=this.yPixelForEventOnChart(e);if(null===n)return!1;const i=this.pixelHeightForEventOnChart(e);if(!i)return!1;if("main"===t){if(!this.#s.charts.main?.heightPixels)return!1;const e=n-this.networkChartOffsetHeight();if(e+i<0)return!1;if(e>this.#s.charts.main.heightPixels)return!1}if("network"===t){if(!this.#s.charts.network)return!1;if(n<=-14)return!1;if(n>this.#s.charts.network.heightPixels)return!1}return!0}xPixelForEventStartOnChart(e){const t=this.#h(e),{startTime:n}=this.timingsForOverlayEntry(e);return this.#b(t,n)}xPixelForEventEndOnChart(e){const t=this.#h(e),{endTime:n}=this.timingsForOverlayEntry(e);return this.#b(t,n)}#b(e,t){if(null===this.#s.trace.visibleWindow)return console.error("Cannot calculate xPixel without visible trace window."),null;const n=this.#s.charts[e]?.widthPixels??null;if(null===n)return console.error(`Cannot calculate xPixel without ${e} dimensions.`),null;const i=t-this.#s.trace.visibleWindow.min,s=this.#s.trace.visibleWindow.range;return Math.floor(i/s*n)}yPixelForEventOnChart(e){const t=this.#h(e),n="main"===t?this.#r.mainChart:this.#r.networkChart,i="main"===t?this.#r.mainProvider:this.#r.networkProvider,s=i.indexForEvent?.(e);if("number"!=typeof s)return null;const r=i.timelineData();if(null===r)return null;const o=r.entryLevels.at(s);if(void 0===o)return null;if(!n.levelIsVisible(o))return null;let a=n.levelToOffset(o)-(this.#s.charts[t]?.scrollOffsetPixels??0);return"main"===t&&(a+=this.networkChartOffsetHeight()),a}pixelHeightForEventOnChart(e){const t=this.#h(e),n="main"===t?this.#r.mainChart:this.#r.networkChart,i="main"===t?this.#r.mainProvider:this.#r.networkProvider,s=i.indexForEvent?.(e);if("number"!=typeof s)return null;const r=i.timelineData();if(null===r)return null;const o=r.entryLevels.at(s);return void 0===o?null:n.levelHeight(o)}networkChartOffsetHeight(){return null===this.#s.charts.network||0===this.#s.charts.network.heightPixels?0:this.#s.charts.network.allGroupsCollapsed?this.#s.charts.network.heightPixels:this.#s.charts.network.heightPixels+8}}var a=Object.freeze({__proto__:null,LAYOUT_SHIFT_SYNTHETIC_DURATION:i,isTimeRangeLabel:function(e){return"TIME_RANGE"===e.type},isEntriesLink:function(e){return"ENTRIES_LINK"===e.type},overlayIsSingleton:s,AnnotationOverlayActionEvent:r,Overlays:o});export{a as Overlays};