simdeck 0.1.3 → 0.1.5

package/client/dist/chrome-devtools-ui/panels/timeline/components/insights/insights.js

@@ -0,0 +1,262 @@
+import"../../../../ui/components/markdown_view/markdown_view.js";import*as e from"../../../../core/common/common.js";import*as t from"../../../../core/i18n/i18n.js";import*as s from"../../../../core/root/root.js";import*as i from"../../../../models/trace/trace.js";import"../../../../ui/components/buttons/buttons.js";import*as r from"../../../../ui/components/helpers/helpers.js";import*as n from"../../../../ui/legacy/legacy.js";import*as o from"../../../../ui/lit/lit.js";import*as a from"../../../../ui/visual_logging/visual_logging.js";import*as l from"../../../../core/platform/platform.js";import*as d from"../../../../core/sdk/sdk.js";import*as c from"../../../../models/crux-manager/crux-manager.js";import*as h from"../../../../third_party/marked/marked.js";import*as m from"../../../mobile_throttling/mobile_throttling.js";import*as u from"../../utils/utils.js";import"../../../../ui/components/icon_button/icon_button.js";import*as v from"../../../../ui/legacy/components/utils/utils.js";import"../../../../ui/components/linkifier/linkifier.js";const{html:p}=o;var g={cssText:`.insight{display:block;position:relative;width:auto;height:auto;margin:var(--sys-size-5) 0;border-radius:var(--sys-shape-corner-extra-small);overflow:hidden;border:var(--sys-size-1) solid var(--sys-color-divider);background-color:var(--sys-color-base);&.closed{background-color:var(--sys-color-surface3);border:none;&:focus-within{outline:var(--sys-size-1) solid var(--sys-color-primary)}}header{padding:var(--sys-size-5) var(--sys-size-4);h3{font:var(--sys-typescale-body4-medium)}}&:not(.closed){header{padding-bottom:var(--sys-size-2)}}}.insight-hover-icon{position:absolute;top:var(--sys-size-5);right:var(--sys-size-5);border:none;width:var(--sys-size-9);user-select:none;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%;.insight:hover &,\n  header:focus-within &{opacity:100%}&.active devtools-button{transform:rotate(180deg)}}.insight-description,\n.insight-body,\n.insight-title{user-select:text}.insight-body{padding:0 var(--sys-size-4) var(--sys-size-5);.list-title{margin-top:var(--sys-size-4);margin-bottom:var(--sys-size-3)}ul{padding:0 0 0 var(--sys-size-9);margin:0}}.insight-section{padding-top:var(--sys-size-5);margin-top:var(--sys-size-5)}.insight-description:not(:empty){margin-bottom:var(--sys-size-5)}.insight-section:not(:empty){border-top:var(--sys-size-1) solid var(--sys-color-divider)}.insight-title{color:var(--sys-color-on-base);margin-block:3px}.link{color:var(--sys-color-primary)}.dl-title{font-weight:bold}dd.dl-title{text-align:right}.dl-value{font-weight:bold}.image-ref{display:inline-flex;align-items:center;&:not(:empty){padding-top:var(--sys-size-5)}}.element-img{width:var(--sys-size-13);height:var(--sys-size-13);object-fit:cover;border:var(--sys-size-1) solid var(--sys-color-divider);background:var(--sys-color-divider) -0.054px -12px /100.239% 148.936% no-repeat;margin-right:var(--sys-size-5)}.element-img-details{font:var(--sys-typescale-body4-regular);display:flex;flex-direction:column;word-break:break-all;.element-img-details-size{color:var(--color-text-secondary)}}::slotted(*){font:var(--sys-typescale-body4-regular)}.insight-savings{font:var(--sys-typescale-body4-medium);color:var(--sys-color-green)}.timeline-link{cursor:pointer;text-decoration:var(--override-timeline-link-text-decoration,underline);color:var(--override-timeline-link-text-color,var(--sys-color-primary));background:none;border:none;padding:0;font:inherit;text-align:left}.timeline-link.invalid-link{color:var(--sys-color-state-disabled)}.ask-ai-btn-wrap{border-top:var(--sys-size-1) solid var(--sys-color-divider);padding-top:var(--sys-size-5);margin-top:var(--sys-size-5);text-align:center}\n/*# sourceURL=${import.meta.resolve("./baseInsightComponent.css")} */\n`};class y extends Event{model;insightSetKey;static eventName="insightactivated";constructor(e,t){super(y.eventName,{bubbles:!0,composed:!0}),this.model=e,this.insightSetKey=t}}class f extends Event{static eventName="insightdeactivated";constructor(){super(f.eventName,{bubbles:!0,composed:!0})}}class T extends Event{bounds;static eventName="insightsethovered";constructor(e){super(T.eventName,{bubbles:!0,composed:!0}),this.bounds=e}}class b extends Event{bounds;static eventName="insightsetzoom";constructor(e){super(b.eventName,{bubbles:!0,composed:!0}),this.bounds=e}}class S extends Event{overlays;options;static eventName="insightprovideoverlays";constructor(e,t){super(S.eventName,{bubbles:!0,composed:!0}),this.overlays=e,this.options=t}}var R=Object.freeze({__proto__:null,InsightActivated:y,InsightDeactivated:f,InsightProvideOverlays:S,InsightSetHovered:T,InsightSetZoom:b});const w=new CSSStyleSheet;w.replaceSync(g.cssText);const{html:E}=o,k={estimatedSavings:"Est savings: {PH1}",estimatedSavingsTimingAndBytes:"Est savings: {PH1} & {PH2}",viewDetails:"View details for {PH1}"},I=t.i18n.registerUIStrings("panels/timeline/components/insights/BaseInsightComponent.ts",k),N=t.i18n.getLocalizedString.bind(void 0,I);class _ extends HTMLElement{static litTagName=o.StaticHtml.literal``;shadow=this.attachShadow({mode:"open"});hasAskAISupport=!1;#e=!1;#t=!1;#s=null;#i=null;#r=null;get model(){return this.#s}data={bounds:null,insightSetKey:null};#n=this.#o.bind(this);sharedTableState={selectedRowEl:null,selectionIsSticky:!1};#a=null;scheduleRender(){r.ScheduledRender.scheduleRender(this,this.#n)}connectedCallback(){this.shadow.adoptedStyleSheets.push(w),this.setAttribute("jslog",`${a.section(`timeline.insights.${this.internalName}`)}`),this.dataset.insightName=this.internalName;const{devToolsAiAssistancePerformanceAgent:e}=s.Runtime.hostConfig;this.#e=Boolean(e?.enabled&&e?.insightsEnabled)}set selected(e){!this.#t&&e&&this.dispatchEvent(new S(this.getInitialOverlays(),{updateTraceWindow:!0})),this.#t=e,r.ScheduledRender.scheduleRender(this,this.#n)}get selected(){return this.#t}set model(e){this.#s=e,r.ScheduledRender.scheduleRender(this,this.#n)}set insightSetKey(e){this.data.insightSetKey=e,r.ScheduledRender.scheduleRender(this,this.#n)}get bounds(){return this.data.bounds}set bounds(e){this.data.bounds=e,r.ScheduledRender.scheduleRender(this,this.#n)}set parsedTrace(e){this.#i=e}set fieldMetrics(e){this.#r=e}get fieldMetrics(){return this.#r}#l(){if(this.#t)return this.dispatchEvent(new f),void n.Context.Context.instance().setFlavor(u.InsightAIContext.ActiveInsight,null);this.data.insightSetKey&&this.model&&(this.sharedTableState.selectedRowEl?.classList.remove("selected"),this.sharedTableState.selectedRowEl=null,this.sharedTableState.selectionIsSticky=!1,this.dispatchEvent(new y(this.model,this.data.insightSetKey)))}#d(e){const t=o.Directives.classMap({"insight-hover-icon":!0,active:e});return E`
+      <div class=${t} inert>
+        <devtools-button .data=${{variant:"icon",iconName:"chevron-down",size:"SMALL"}}
+      ></devtools-button>
+      </div>
+
+    `}#c(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),this.#l())}toggleTemporaryOverlays(e,t){this.#t&&this.dispatchEvent(new S(e??this.getInitialOverlays(),t))}getInitialOverlays(){return this.#a||(this.#a=this.createOverlays()),this.#a}#o(){this.model&&this.#h()}getEstimatedSavingsTime(){return null}getEstimatedSavingsBytes(){return null}#m(){const e=this.getEstimatedSavingsTime(),s=this.getEstimatedSavingsBytes();let i,r;return e&&(i=t.TimeUtilities.millisToString(e)),s&&(r=t.ByteUtilities.bytesToString(s)),i&&r?N(k.estimatedSavingsTimingAndBytes,{PH1:i,PH2:r}):i?N(k.estimatedSavings,{PH1:i}):r?N(k.estimatedSavings,{PH1:r}):null}renderNode(t,s){const r=s??o.nothing;if(!this.#i)return E`${r}`;const n=i.Extras.FetchNodes.domNodeForBackendNodeID(this.#i,t).then((t=>t?e.Linkifier.Linkifier.linkify(t):r));return E`${o.Directives.until(n,r)}`}#u(){if(!this.#s||!this.#i)return;const e="drjones.performance-insight-context";if(!n.ActionRegistry.ActionRegistry.instance().hasAction(e))return;const t=new u.InsightAIContext.ActiveInsight(this.#s,this.#i);n.Context.Context.instance().setFlavor(u.InsightAIContext.ActiveInsight,t);n.ActionRegistry.ActionRegistry.instance().getAction(e).execute()}#v(){return this.#e&&this.hasAskAISupport}#p(e){if(!this.#t)return o.nothing;const t=this.renderContent();return E`
+      <div class="insight-body">
+        <div class="insight-description">${function(e){const t=h.Marked.lexer(e);return p`<devtools-markdown-view .data=${{tokens:t}}></devtools-markdown-view>`}(e.description)}</div>
+        <div class="insight-content">${t}</div>
+        ${this.#v()?E`
+          <div class="ask-ai-btn-wrap">
+            <devtools-button class="ask-ai"
+              .variant=${"outlined"}
+              .iconName=${"smart-assistant"}
+              data-insights-ask-ai
+              jslog=${a.action(`timeline.insight-ask-ai.${this.internalName}`).track({click:!0})}
+              @click=${this.#u}
+            >Ask AI</devtools-button>
+          </div>
+        `:o.nothing}
+      </div>`}#h(){if(!this.#s)return void o.render(o.nothing,this.shadow,{host:this});const e=o.Directives.classMap({insight:!0,closed:!this.#t}),t=this.#m(),s=E`
+      <div class=${e}>
+        <header @click=${this.#l}
+          @keydown=${this.#c}
+          jslog=${a.action(`timeline.toggle-insight.${this.internalName}`).track({click:!0})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#t}
+          aria-label=${N(k.viewDetails,{PH1:this.#s.title})}
+        >
+          ${this.#d(this.#t)}
+          <h3 class="insight-title">${this.#s?.title}</h3>
+          ${t?E`
+            <slot name="insight-savings" class="insight-savings">
+              ${t}
+            </slot>
+          </div>`:o.nothing}
+        </header>
+        ${this.#p(this.#s)}
+      </div>
+    `;o.render(s,this.shadow,{host:this}),this.#t&&requestAnimationFrame((()=>requestAnimationFrame((()=>this.scrollIntoViewIfNeeded()))))}}var $=Object.freeze({__proto__:null,BaseInsightComponent:_});const O=new CSSStyleSheet;O.replaceSync(g.cssText);const{html:M}=o;class D extends Event{event;static eventName="eventreferenceclick";constructor(e){super(D.eventName,{bubbles:!0,composed:!0}),this.event=e}}class x extends HTMLElement{#g=this.attachShadow({mode:"open"});#n=this.#o.bind(this);#y=null;#f=null;connectedCallback(){this.#g.adoptedStyleSheets=[O]}set text(e){this.#y=e,r.ScheduledRender.scheduleRender(this,this.#n)}set event(e){this.#f=e,r.ScheduledRender.scheduleRender(this,this.#n)}#o(){this.#y&&this.#f&&o.render(M`
+      <button type="button" class="timeline-link" @click=${e=>{e.stopPropagation(),this.#f&&this.dispatchEvent(new D(this.#f))}}>${this.#y}</button>
+    `,this.#g,{host:this})}}function C(e,t){let s=t?.title,r=t?.text;return i.Types.Events.isSyntheticNetworkRequest(e)?(r=r??u.Helpers.shortenUrl(new URL(e.args.data.url)),s=s??e.args.data.url):l.TypeScriptUtilities.assertNever(e,`unsupported event in eventRef: ${e.name}`),M`<devtools-performance-event-ref
+    .event=${e}
+    .text=${r}
+    title=${s}
+  ></devtools-performance-event-ref>`}class L extends HTMLElement{#g=this.attachShadow({mode:"open"});#n=this.#o.bind(this);#T;connectedCallback(){this.#g.adoptedStyleSheets=[O]}set request(e){this.#T=e,r.ScheduledRender.scheduleRender(this,this.#n)}#o(){this.#T&&o.render(M`
+      <div class="image-ref">
+        ${this.#T.args.data.mimeType.includes("image")?M`
+          <img
+            class="element-img"
+            src=${this.#T.args.data.url}
+            @error=${q}/>
+        `:o.nothing}
+        <span class="element-img-details">
+          ${C(this.#T)}
+          <span class="element-img-details-size">${t.ByteUtilities.bytesToString(this.#T.args.data.decodedBodyLength??0)}</span>
+        </span>
+      </div>
+    `,this.#g,{host:this})}}function q(e){e.target.style.display="none"}function F(e){return M`
+    <devtools-performance-image-ref
+      .request=${e}
+    ></devtools-performance-image-ref>
+  `}customElements.define("devtools-performance-event-ref",x),customElements.define("devtools-performance-image-ref",L);var H=Object.freeze({__proto__:null,EventReferenceClick:D,eventRef:C,imageRef:F}),A={cssText:`table{width:100%;padding:5px 0;border-collapse:collapse}thead{white-space:nowrap}table tr > *{text-align:right}table tr > *:first-child{text-align:left}table.interactive tbody tr{cursor:pointer}table.interactive tbody tr:hover,\ntable.interactive tbody tr.selected{background-color:var(--sys-color-state-hover-on-subtle)}table thead th{font:var(--sys-typescale-body4-medium)}table tbody th{font-weight:normal}table th[scope='row']{padding:3px 0;word-break:normal;overflow-wrap:anywhere}\n/*# sourceURL=${import.meta.resolve("./table.css")} */\n`};const z={others:"{PH1} others"},U=t.i18n.registerUIStrings("panels/timeline/components/insights/Table.ts",z),P=t.i18n.getLocalizedString.bind(void 0,U),B=new CSSStyleSheet;B.replaceSync(A.cssText);const{html:j}=o;function W(e){return P(z.others,{PH1:e})}function Y(e,t,s=10){if(0===e.length||0===s)return[];const i=s-1,r=e.slice(0,i).map(t.mapToRow.bind(t));return e.length>s?r.push(t.createAggregatedTableRow(e.slice(i))):e.length===s&&r.push(t.mapToRow(e[i])),r}class K extends HTMLElement{#g=this.attachShadow({mode:"open"});#n=this.#o.bind(this);#b;#S;#R;#w;#E;#k=!1;#I=null;set data(e){this.#b=e.insight,this.#S=e.insight.sharedTableState,this.#R=e.headers,this.#w=e.rows,this.#k=this.#w.some((e=>e.overlays)),r.ScheduledRender.scheduleRender(this,this.#n)}connectedCallback(){this.#g.adoptedStyleSheets.push(B),n.UIUtils.injectCoreStyles(this.#g),r.ScheduledRender.scheduleRender(this,this.#n)}#N(e){if(!(e.target instanceof HTMLElement))return;const t=e.target.closest("tr");if(!t?.parentElement)return;const s=[...t.parentElement.children].indexOf(t);-1!==s&&s!==this.#I&&(this.#I=s,this.#_(t,s,{isHover:!0}))}#$(e){if(!(e.target instanceof HTMLElement))return;const t=e.target.closest("tr");if(!t?.parentElement)return;const s=[...t.parentElement.children].indexOf(t);if(-1===s)return;const i=this.#E?.[s]?.overlays;1!==i?.length||"ENTRY_OUTLINE"!==i[0].type?this.#_(t,s,{sticky:!0}):this.dispatchEvent(new D(i[0].entry))}#O(){this.#I=null,this.#_(null,null)}#_(e,t,s={}){if(this.#E&&this.#S&&this.#b&&(!this.#S.selectionIsSticky||s.sticky)){if(this.#S.selectionIsSticky&&e===this.#S.selectedRowEl&&(e=null,s.sticky=!1),e&&null!==t){const e=this.#E[t].overlays;e&&this.#b.toggleTemporaryOverlays(e,{updateTraceWindow:!s.isHover})}else this.#b.toggleTemporaryOverlays(null,{updateTraceWindow:!1});this.#S.selectedRowEl?.classList.remove("selected"),e?.classList.add("selected"),this.#S.selectedRowEl=e,this.#S.selectionIsSticky=s.sticky??!1}}async#o(){if(!this.#R||!this.#w)return;const e=this.#R.length,t=[],s=[];function i(r,n=0){const a=o.Directives.styleMap({paddingLeft:`calc(${n} * var(--sys-size-5))`,borderLeft:n?"var(--sys-size-1) solid var(--sys-color-divider)":""}),l=o.Directives.styleMap({color:n?"var(--sys-color-on-surface-subtle)":""}),d=r.values.map(((t,s)=>0===s?j`<th
+                scope="row"
+                colspan=${s===r.values.length-1?e-s:1}
+                style=${a}>${t}
+              </th>`:j`<td>${t}</td>`));s.push(j`<tr style=${l}>${d}</tr>`),t.push(r);for(const e of r.subRows??[])i(e,n+1)}for(const e of this.#w)i(e);this.#E=t,o.render(j`<table
+          class=${o.Directives.classMap({interactive:this.#k})}
+          @mouseleave=${this.#k?this.#O:null}>
+        <thead>
+          <tr>
+          ${this.#R.map((e=>j`<th scope="col">${e}</th>`))}
+          </tr>
+        </thead>
+        <tbody
+          @mouseover=${this.#k?this.#N:null}
+          @click=${this.#k?this.#$:null}
+        >${s}</tbody>
+      </table>`,this.#g,{host:this})}}customElements.define("devtools-performance-table",K);var J=Object.freeze({__proto__:null,Table:K,createLimitedRows:Y,i18nString:P,renderOthersLabel:W});const{UIStrings:V,i18nString:G}=i.Insights.Models.Cache,{html:Z}=o;class Q extends _{static litTagName=o.StaticHtml.literal`devtools-performance-cache`;mapToRow(e){return{values:[C(e.request),t.TimeUtilities.secondsToString(e.ttl)],overlays:[this.#M(e.request)]}}createAggregatedTableRow(e){return{values:[W(e.length),""],overlays:e.flatMap((e=>this.#M(e.request)))}}internalName="cache";createOverlays(){return this.model?this.model.requests.map((e=>this.#M(e.request))):[]}getEstimatedSavingsBytes(){return this.model?.totalWastedBytes??null}renderContent(){if(!this.model)return o.nothing;const e=Y([...this.model.requests].sort(((e,t)=>t.request.args.data.decodedBodyLength-e.request.args.data.decodedBodyLength)),this);return e.length?Z`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[G(V.requestColumn),G(V.cacheTTL)],rows:e}}>
+        </devtools-performance-table>
+      </div>`:Z`<div class="insight-section">${G(V.noRequestsToCache)}</div>`}#M(e){return{type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"}}}customElements.define("devtools-performance-cache",Q);var X=Object.freeze({__proto__:null,Cache:Q}),ee={cssText:`ul{list-style:none;margin:0;padding:0;li{display:flex;align-items:center;justify-content:flex-start;gap:var(--sys-size-3);font:var(--sys-typescale-body4-medium);padding-block:var(--sys-size-3);span{padding-top:2px}}}.check-failed{color:var(--app-color-performance-bad)}.check-passed{color:var(--app-color-performance-good)}\n/*# sourceURL=${import.meta.resolve("./checklist.css")} */\n`};const te={successAriaLabel:"Insight check passed: {PH1}",failedAriaLabel:"Insight check failed: {PH1}"},se=t.i18n.registerUIStrings("panels/timeline/components/insights/Checklist.ts",te),ie=t.i18n.getLocalizedString.bind(void 0,se),re=new CSSStyleSheet;re.replaceSync(ee.cssText);const{html:ne}=o;class oe extends HTMLElement{#g=this.attachShadow({mode:"open"});#n=this.#o.bind(this);#D;set checklist(e){this.#D=e,r.ScheduledRender.scheduleRender(this,this.#n)}connectedCallback(){this.#g.adoptedStyleSheets.push(re),n.UIUtils.injectCoreStyles(this.#g),r.ScheduledRender.scheduleRender(this,this.#n)}#x(e){const t=e.value?"check-circle":"clear",s=e.value?ie(te.successAriaLabel,{PH1:e.label}):ie(te.failedAriaLabel,{PH1:e.label});return ne`
+        <devtools-icon
+          aria-label=${s}
+          name=${t}
+          class=${e.value?"check-passed":"check-failed"}
+        ></devtools-icon>
+      `}async#o(){this.#D&&o.render(ne`
+          <ul>
+            ${Object.values(this.#D).map((e=>ne`<li>
+                ${this.#x(e)}
+                <span data-checklist-label>${e.label}</span>
+            </li>`))}
+          </ul>`,this.#g,{host:this})}}customElements.define("devtools-performance-checklist",oe);var ae=Object.freeze({__proto__:null,Checklist:oe});const{UIStrings:le,i18nString:de}=i.Insights.Models.CLSCulprits,{html:ce}=o;class he extends _{static litTagName=o.StaticHtml.literal`devtools-performance-cls-culprits`;internalName="cls-culprits";createOverlays(){const e=(this.model?.clusters.toSorted(((e,t)=>t.clusterCumulativeScore-e.clusterCumulativeScore))??[])[0];if(!e)return[];const t=i.Types.Timing.Micro(e.dur??0),s=i.Types.Timing.Micro(e.ts+t),r=ce`<div>${de(le.worstLayoutShiftCluster)}</div>`;return[{type:"TIMESPAN_BREAKDOWN",sections:[{bounds:{min:e.ts,range:t,max:s},label:r,showDuration:!1}],entry:e.events[0],renderLocation:"ABOVE_EVENT"}]}#C(e){this.dispatchEvent(new D(e))}#L(e){return 0===e.length?ce`<div class="insight-section">${de(le.noCulprits)}</div>`:ce`
+      <div class="insight-section">
+        <p class="list-title">${de(le.topCulprits)}:</p>
+        <ul class="worst-culprits">
+          ${e.map((e=>ce`
+              <li>${e}</li>
+            `))}
+        </ul>
+      </div>`}renderContent(){if(!this.model||!this.bounds)return o.nothing;if(!this.model.clusters.length||!this.model.worstCluster)return ce`<div class="insight-section">${de(le.noLayoutShifts)}</div>`;const e=this.model.worstCluster,s=this.model.topCulpritsByCluster.get(e)??[],r=i.Types.Timing.Micro(e.ts-this.bounds.min),n=t.TimeUtilities.formatMicroSecondsTime(r);return ce`
+      <div class="insight-section">
+        <span class="worst-cluster">${de(le.worstCluster)}: <button type="button" class="timeline-link" @click=${()=>this.#C(e)}>${de(le.layoutShiftCluster,{PH1:n})}</button></span>
+      </div>
+      ${this.#L(s)}
+    `}}customElements.define("devtools-performance-cls-culprits",he);var me=Object.freeze({__proto__:null,CLSCulprits:he});const{UIStrings:ue,i18nString:ve}=i.Insights.Models.DocumentLatency,{html:pe}=o;class ge extends _{static litTagName=o.StaticHtml.literal`devtools-performance-document-latency`;internalName="document-latency";hasAskAISupport=!0;createOverlays(){if(!this.model?.data?.documentRequest)return[];const e=[],t=this.model.data.documentRequest,s=i.Helpers.Timing.milliToMicro(this.model.data.redirectDuration),r=[];if(this.model.data.redirectDuration){const n=i.Helpers.Timing.traceWindowFromMicroSeconds(t.ts,t.ts+s);r.push({bounds:n,label:ve(ue.redirectsLabel),showDuration:!0}),e.push({type:"CANDY_STRIPED_TIME_RANGE",bounds:n,entry:t})}if(!this.model.data.checklist.serverResponseIsFast.value){const e=i.Helpers.Timing.milliToMicro(this.model.data.serverResponseTime),s=t.args.data.timing?.sendEnd??i.Types.Timing.Milli(0),n=i.Helpers.Timing.milliToMicro(s),o=i.Helpers.Timing.traceWindowFromMicroSeconds(n,n+e);r.push({bounds:o,label:ve(ue.serverResponseTimeLabel),showDuration:!0})}if(this.model.data.uncompressedResponseBytes){const s=i.Helpers.Timing.traceWindowFromMicroSeconds(t.args.data.syntheticData.downloadStart,t.args.data.syntheticData.downloadStart+t.args.data.syntheticData.download);r.push({bounds:s,label:ve(ue.uncompressedDownload),showDuration:!0}),e.push({type:"CANDY_STRIPED_TIME_RANGE",bounds:s,entry:t})}return r.length&&e.push({type:"TIMESPAN_BREAKDOWN",sections:r,entry:this.model.data.documentRequest,renderLocation:"BELOW_EVENT"}),e.push({type:"ENTRY_SELECTED",entry:this.model.data.documentRequest}),e}getEstimatedSavingsTime(){return this.model?.metricSavings?.FCP??null}getEstimatedSavingsBytes(){return this.model?.data?.uncompressedResponseBytes??null}renderContent(){return this.model?.data?pe`<devtools-performance-checklist .checklist=${this.model.data.checklist}></devtools-performance-checklist>`:o.nothing}}customElements.define("devtools-performance-document-latency",ge);var ye=Object.freeze({__proto__:null,DocumentLatency:ge});const{html:fe}=o;class Te extends HTMLElement{#g=this.attachShadow({mode:"open"});#n=this.#o.bind(this);#q;#F;#H;#A;#z;set data(e){this.#q=e.backendNodeId,this.#F=e.frame,this.#H=e.options,this.#A=e.fallbackHtmlSnippet,this.#z=e.fallbackText,r.ScheduledRender.scheduleRender(this,this.#n)}async#U(){if(void 0===this.#q)return;const t=(await i.Extras.FetchNodes.domNodesForMultipleBackendNodeIds(this,[this.#q])).get(this.#q);return t&&t.frameId()===this.#F?await e.Linkifier.Linkifier.linkify(t,this.#H):void 0}async#o(){const e=await this.#U();let t;t=e?fe`<div class='node-link'>${e}</div>`:this.#A?fe`<pre style='text-wrap: auto'>${this.#A}</pre>`:this.#z?fe`<span>${this.#z}</span>`:o.nothing,o.render(t,this.#g,{host:this})}}customElements.define("devtools-performance-node-link",Te);var be=Object.freeze({__proto__:null,NodeLink:Te});const{UIStrings:Se,i18nString:Re}=i.Insights.Models.DOMSize,{html:we}=o;class Ee extends _{static litTagName=o.StaticHtml.literal`devtools-performance-dom-size`;internalName="dom-size";createOverlays(){if(!this.model)return[];return[...this.model.largeStyleRecalcs,...this.model.largeLayoutUpdates].map((e=>({type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"})))}#P(e){const t=[];if(e.maxDepth){const{nodeId:s,nodeName:i}=e.maxDepth,r=we`
+        <devtools-performance-node-link
+          .data=${{backendNodeId:s,frame:e.frame,fallbackText:i}}>
+        </devtools-performance-node-link>
+      `;t.push({values:[Re(Se.maxDOMDepth),r]})}if(e.maxChildren){const{nodeId:s,nodeName:i}=e.maxChildren,r=we`
+        <devtools-performance-node-link
+          .data=${{backendNodeId:s,frame:e.frame,fallbackText:i}}>
+        </devtools-performance-node-link>
+      `;t.push({values:[Re(Se.maxChildren),r]})}return t.length?we`<div class="insight-section">
+      <devtools-performance-table
+        .data=${{insight:this,headers:[Re(Se.statistic),Re(Se.element)],rows:t}}>
+      </devtools-performance-table>
+    </div>`:o.nothing}renderContent(){if(!this.model)return o.nothing;const e=this.model.maxDOMStats?.args.data;return e?we`<div class="insight-section">
+      <devtools-performance-table
+        .data=${{insight:this,headers:[Re(Se.statistic),Re(Se.value)],rows:[{values:[Re(Se.totalElements),e.totalElements]},{values:[Re(Se.maxDOMDepth),e.maxDepth?.depth??0]},{values:[Re(Se.maxChildren),e.maxChildren?.numChildren??0]}]}}>
+      </devtools-performance-table>
+    </div>
+    ${this.#P(e)}
+    `:o.nothing}}customElements.define("devtools-performance-dom-size",Ee);var ke=Object.freeze({__proto__:null,DOMSize:Ee});function Ie(e){if(e.request)return e.inline?C(e.request,{text:`(inline) ${l.StringUtilities.trimEndWithMaxLength(e.content??"",15)}`}):C(e.request);if(e.url)try{const t=new URL(e.url);return u.Helpers.shortenUrl(t)}catch{}return e.inline?`(inline) ${l.StringUtilities.trimEndWithMaxLength(e.content??"",15)}`:`script id: ${e.scriptId}`}const{UIStrings:Ne,i18nString:_e}=i.Insights.Models.DuplicatedJavaScript,{html:$e}=o;class Oe extends _{static litTagName=o.StaticHtml.literal`devtools-performance-duplicated-javascript`;internalName="duplicated-javascript";#B=null;#j(){return!!this.model&&this.model.scripts.some((e=>!!e.url))}#W(){if(!this.model)return;this.#B||(this.#B=u.Treemap.createTreemapData({scripts:this.model.scripts},this.model.duplication));const e=this.insightSetKey??"devtools";u.Treemap.openTreemap(this.#B,this.model.mainDocumentUrl,e)}getEstimatedSavingsTime(){return this.model?.metricSavings?.FCP??null}getEstimatedSavingsBytes(){if(!this.model)return null;let e=0;for(const t of this.model.duplicationGroupedByNodeModules.values())e+=t.estimatedDuplicateBytes;return e}createOverlays(){if(!this.model)return[];return this.model.scriptsWithDuplication.map((e=>e.request)).filter((e=>!!e)).map((e=>({type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"})))}renderContent(){if(!this.model)return o.nothing;const e=[...this.model.duplicationGroupedByNodeModules.entries()].slice(0,10).map((([e,s])=>{const i=new Map;for(const{script:e}of s.duplicates)i.set(e,{type:"ENTRY_OUTLINE",entry:e.request,outlineReason:"ERROR"});return{values:[e,t.ByteUtilities.bytesToString(s.estimatedDuplicateBytes)],overlays:[...i.values()],subRows:s.duplicates.map((({script:e,attributedSize:s},r)=>{let n;const o=i.get(e);return o&&(n=[o]),{values:[Ie(e),0===r?"--":t.ByteUtilities.bytesToString(s)],overlays:n}}))}}));let s;return this.#j()&&(s=$e`<devtools-button
+        .variant=${"outlined"}
+        jslog=${a.action(`timeline.treemap.${this.internalName}-insight`).track({click:!0})}
+        @click=${this.#W}
+      >View Treemap</devtools-button>`),$e`
+      ${s}
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[_e(Ne.columnSource),_e(Ne.columnDuplicatedBytes)],rows:e}}>
+        </devtools-performance-table>
+      </div>
+    `}}customElements.define("devtools-performance-duplicated-javascript",Oe);var Me=Object.freeze({__proto__:null,DuplicatedJavaScript:Oe});const{UIStrings:De,i18nString:xe}=i.Insights.Models.FontDisplay,{html:Ce}=o;class Le extends _{static litTagName=o.StaticHtml.literal`devtools-performance-font-display`;internalName="font-display";mapToRow(e){const s=this.#Y.get(e.request);return{values:[C(e.request,{text:e.name}),t.TimeUtilities.millisToString(e.wastedTime)],overlays:s?[s]:[]}}createAggregatedTableRow(e){return{values:[W(e.length),""],overlays:e.map((e=>this.#Y.get(e.request))).filter((e=>!!e))}}#Y=new Map;createOverlays(){if(this.#Y.clear(),!this.model)return[];for(const e of this.model.fonts)this.#Y.set(e.request,{type:"ENTRY_OUTLINE",entry:e.request,outlineReason:e.wastedTime?"ERROR":"INFO"});return[...this.#Y.values()]}getEstimatedSavingsTime(){return this.model?.metricSavings?.FCP??null}renderContent(){if(!this.model)return o.nothing;const e=Y(this.model.fonts,this);return Ce`
+      <div class="insight-section">
+        ${Ce`<devtools-performance-table
+          .data=${{insight:this,headers:[xe(De.fontColumn),xe(De.wastedTimeColumn)],rows:e}}>
+        </devtools-performance-table>`}
+      </div>`}}customElements.define("devtools-performance-font-display",Le);var qe=Object.freeze({__proto__:null,FontDisplay:Le});const{UIStrings:Fe,i18nString:He}=i.Insights.Models.ForcedReflow,{html:Ae,nothing:ze}=o;class Ue extends _{static litTagName=o.StaticHtml.literal`devtools-performance-forced-reflow`;mapToRow(e){return{values:[this.#K(e.bottomUpData)],overlays:this.#J(e.relatedEvents)}}createAggregatedTableRow(e){return{values:[W(e.length)],overlays:e.flatMap((e=>this.#J(e.relatedEvents)))}}internalName="forced-reflow";#K(e){if(!e)return Ae`<div style="margin: 4px 10px; font-style: italic">${He(Fe.unattributed)}</div>`;const t=new v.Linkifier.Linkifier,s={callFrames:[{functionName:e.functionName,scriptId:e.scriptId,url:e.url,lineNumber:e.lineNumber,columnNumber:e.columnNumber}]},i=d.TargetManager.TargetManager.instance().primaryPageTarget(),r=v.JSPresentationUtils.buildStackTracePreviewContents(i,t,{stackTrace:s,tabStops:!0,showColumnNumber:!0});return Ae`${r.element}`}renderContent(){if(!this.model)return o.nothing;const e=this.model.topLevelFunctionCallData,s=Y(this.model.aggregatedBottomUpData,this);return Ae`
+      ${e?Ae`
+        <div class="insight-section">
+          <devtools-performance-table
+            .data=${{insight:this,headers:[He(Fe.topTimeConsumingFunctionCall),He(Fe.totalReflowTime)],rows:[{values:[this.#K(e.topLevelFunctionCall),(r=i.Types.Timing.Micro(e.totalReflowTime),t.TimeUtilities.millisToString(l.Timing.microSecondsToMilliSeconds(r)))],overlays:this.#J(e.topLevelFunctionCallEvents,"INFO")}]}}>
+          </devtools-performance-table>
+        </div>
+      `:ze}
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[He(Fe.relatedStackTrace)],rows:s}}>
+        </devtools-performance-table>
+      </div>`;var r}createOverlays(){if(!this.model||!this.model.topLevelFunctionCallData)return[];const e=[...this.model.aggregatedBottomUpData.values().flatMap((e=>e.relatedEvents))];return[...this.#J(this.model.topLevelFunctionCallData.topLevelFunctionCallEvents,"INFO"),...this.#J(e)]}#J(e,t="ERROR"){return e.map((e=>({type:"ENTRY_OUTLINE",entry:e,outlineReason:t})))}}customElements.define("devtools-performance-forced-reflow",Ue);var Pe=Object.freeze({__proto__:null,ForcedReflow:Ue});var Be=Object.freeze({__proto__:null,shouldRenderForCategory:function(e){return e.activeCategory===i.Insights.Types.InsightCategory.ALL||e.activeCategory===e.insightCategory}});const{UIStrings:je,i18nString:We}=i.Insights.Models.ImageDelivery,{html:Ye}=o;class Ke extends _{static litTagName=o.StaticHtml.literal`devtools-performance-image-delivery`;internalName="image-delivery";createOverlays(){if(!this.model)return[];const{optimizableImages:e}=this.model;return e.map((e=>this.#M(e.request)))}#M(e){return{type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"}}mapToRow(e){return{values:[F(e.request)],overlays:[this.#M(e.request)]}}createAggregatedTableRow(e){return{values:[W(e.length)],overlays:e.map((e=>this.#M(e.request)))}}getEstimatedSavingsBytes(){return this.model?.totalByteSavings??null}renderContent(){if(!this.model)return o.nothing;const e=Y([...this.model.optimizableImages].sort(((e,t)=>t.request.args.data.decodedBodyLength-e.request.args.data.decodedBodyLength)),this);return e.length?Ye`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[We(je.optimizeFile)],rows:e}}>
+        </devtools-performance-table>
+      </div>
+    `:Ye`<div class="insight-section">${We(je.noOptimizableImages)}</div>`}}customElements.define("devtools-performance-image-delivery",Ke);var Je=Object.freeze({__proto__:null,ImageDelivery:Ke});const{UIStrings:Ve,i18nString:Ge}=i.Insights.Models.InteractionToNextPaint,{html:Ze}=o;class Qe extends _{static litTagName=o.StaticHtml.literal`devtools-performance-inp`;internalName="inp";hasAskAISupport=!0;createOverlays(){if(!this.model)return[];const e=this.model.longestInteractionEvent;return e?this.#V(e):[]}#V(e,t=-1){const s=i.Helpers.Timing.traceWindowFromMicroSeconds(e.ts,e.ts+e.inputDelay),r=i.Helpers.Timing.traceWindowFromMicroSeconds(s.max,s.max+e.mainThreadHandling),n=i.Helpers.Timing.traceWindowFromMicroSeconds(r.max,r.max+e.presentationDelay);let o=[{bounds:s,label:Ge(Ve.inputDelay),showDuration:!0},{bounds:r,label:Ge(Ve.processingDuration),showDuration:!0},{bounds:n,label:Ge(Ve.presentationDelay),showDuration:!0}];return-1!==t&&(o=[o[t]]),[{type:"TIMESPAN_BREAKDOWN",sections:o,renderLocation:"BELOW_EVENT",entry:e}]}renderContent(){const e=this.model?.longestInteractionEvent;if(!e)return Ze`<div class="insight-section">${Ge(Ve.noInteractions)}</div>`;const s=e=>t.TimeUtilities.millisToString(l.Timing.microSecondsToMilliSeconds(e));return Ze`
+      <div class="insight-section">
+        ${Ze`<devtools-performance-table
+          .data=${{insight:this,headers:[Ge(Ve.phase),Ge(Ve.duration)],rows:[{values:[Ge(Ve.inputDelay),s(e.inputDelay)],overlays:this.#V(e,0)},{values:[Ge(Ve.processingDuration),s(e.mainThreadHandling)],overlays:this.#V(e,1)},{values:[Ge(Ve.presentationDelay),s(e.presentationDelay)],overlays:this.#V(e,2)}]}}>
+        </devtools-performance-table>`}
+      </div>`}}customElements.define("devtools-performance-inp",Qe);var Xe=Object.freeze({__proto__:null,InteractionToNextPaint:Qe});const{UIStrings:et,i18nString:tt}=i.Insights.Models.LCPDiscovery,{html:st}=o,it=t.i18n.registerUIStrings("models/trace/insights/LCPDiscovery.ts",et);function rt(e){if(!e.lcpRequest||!e.checklist)return null;const t=!e.checklist.priorityHinted.value,s=!e.checklist.requestDiscoverable.value,r=!e.checklist.eagerlyLoaded.value;if(!(void 0!==t&&void 0!==s&&void 0!==r))return null;const n={checklist:e.checklist,request:e.lcpRequest,discoveryDelay:null,estimatedSavings:e.metricSavings?.LCP??null};if(e.earliestDiscoveryTimeTs&&e.lcpRequest){const t=e.lcpRequest.ts-e.earliestDiscoveryTimeTs;n.discoveryDelay=i.Types.Timing.Micro(t)}return n}class nt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-lcp-discovery`;internalName="lcp-discovery";hasAskAISupport=!0;#G(e){const s=document.createElement("span");return s.classList.add("discovery-time-ms"),s.innerText=t.TimeUtilities.formatMicroSecondsTime(e),t.i18n.getFormatLocalizedString(it,et.lcpLoadDelay,{PH1:s})}createOverlays(){if(!this.model)return[];const e=rt(this.model);if(!e||!e.discoveryDelay)return[];const t=i.Helpers.Timing.traceWindowFromMicroSeconds(i.Types.Timing.Micro(e.request.ts-e.discoveryDelay),e.request.ts),s=st`<div class="discovery-delay"> ${this.#G(t.range)}</div>`;return[{type:"ENTRY_OUTLINE",entry:e.request,outlineReason:"ERROR"},{type:"CANDY_STRIPED_TIME_RANGE",bounds:t,entry:e.request},{type:"TIMESPAN_BREAKDOWN",sections:[{bounds:t,label:s,showDuration:!1}],entry:e.request,renderLocation:"ABOVE_EVENT"}]}getEstimatedSavingsTime(){return this.model?rt(this.model)?.estimatedSavings??null:null}renderContent(){if(!this.model)return o.nothing;const e=rt(this.model);return e?st`
+      <div class="insight-section">
+        <devtools-performance-checklist class="insight-section" .checklist=${e.checklist}></devtools-performance-checklist>
+        <div class="insight-section">${F(e.request)}</div>
+      </div>`:this.model.lcpEvent?st`<div class="insight-section">${tt(et.noLcpResource)}</div>`:st`<div class="insight-section">${tt(et.noLcp)}</div>`}}customElements.define("devtools-performance-lcp-discovery",nt);var ot=Object.freeze({__proto__:null,LCPDiscovery:nt});const{UIStrings:at,i18nString:lt}=i.Insights.Models.LCPPhases,{html:dt}=o;class ct extends _{static litTagName=o.StaticHtml.literal`devtools-performance-lcp-by-phases`;internalName="lcp-by-phase";hasAskAISupport=!0;#Z=null;#Q(){if(!this.model)return[];const e=this.model.lcpMs,t=this.model.phases;if(!e||!t)return[];const{ttfb:s,loadDelay:i,loadTime:r,renderDelay:n}=t;if(i&&r){return[{phase:lt(at.timeToFirstByte),timing:s},{phase:lt(at.resourceLoadDelay),timing:i},{phase:lt(at.resourceLoadDuration),timing:r},{phase:lt(at.elementRenderDelay),timing:n}]}return[{phase:lt(at.timeToFirstByte),timing:s},{phase:lt(at.elementRenderDelay),timing:n}]}createOverlays(){if(this.#Z=null,!this.model)return[];const e=this.model.phases,t=this.model.lcpTs;if(!e||!t)return[];const s=i.Types.Timing.Micro(i.Helpers.Timing.milliToMicro(t)),r=[];this.model.lcpRequest&&r.push({type:"ENTRY_OUTLINE",entry:this.model.lcpRequest,outlineReason:"INFO"});const n=[];if(e?.loadDelay||e?.loadTime){if(e?.loadDelay&&e?.loadTime){const t=i.Types.Timing.Micro(s-i.Helpers.Timing.milliToMicro(e.renderDelay)),r=i.Helpers.Timing.traceWindowFromMicroSeconds(t,s),o=i.Types.Timing.Micro(t-i.Helpers.Timing.milliToMicro(e.loadTime)),a=i.Helpers.Timing.traceWindowFromMicroSeconds(o,t),l=i.Types.Timing.Micro(o-i.Helpers.Timing.milliToMicro(e.loadDelay)),d=i.Helpers.Timing.traceWindowFromMicroSeconds(l,o),c=i.Types.Timing.Micro(l-i.Helpers.Timing.milliToMicro(e.ttfb)),h=i.Helpers.Timing.traceWindowFromMicroSeconds(c,l);n.push({bounds:h,label:lt(at.timeToFirstByte),showDuration:!0},{bounds:d,label:lt(at.resourceLoadDelay),showDuration:!0},{bounds:a,label:lt(at.resourceLoadDuration),showDuration:!0},{bounds:r,label:lt(at.elementRenderDelay),showDuration:!0})}}else{const t=i.Types.Timing.Micro(s-i.Helpers.Timing.milliToMicro(e.renderDelay)),r=i.Helpers.Timing.traceWindowFromMicroSeconds(t,s),o=i.Types.Timing.Micro(t-i.Helpers.Timing.milliToMicro(e.ttfb)),a=i.Helpers.Timing.traceWindowFromMicroSeconds(o,t);n.push({bounds:a,label:lt(at.timeToFirstByte),showDuration:!0},{bounds:r,label:lt(at.elementRenderDelay),showDuration:!0})}return this.#Z={type:"TIMESPAN_BREAKDOWN",sections:n},r.push(this.#Z),r}#X(){if(!this.fieldMetrics)return null;const{ttfb:e,loadDelay:s,loadDuration:r,renderDelay:n}=this.fieldMetrics.lcpPhases;if(!(e&&s&&r&&n))return null;const o=t.TimeUtilities.preciseMillisToString(i.Helpers.Timing.microToMilli(e.value)),a=t.TimeUtilities.preciseMillisToString(i.Helpers.Timing.microToMilli(s.value)),l=t.TimeUtilities.preciseMillisToString(i.Helpers.Timing.microToMilli(r.value)),d=t.TimeUtilities.preciseMillisToString(i.Helpers.Timing.microToMilli(n.value)),c=[{values:[lt(at.timeToFirstByte),o]},{values:[lt(at.resourceLoadDelay),a]},{values:[lt(at.resourceLoadDuration),l]},{values:[lt(at.elementRenderDelay),d]}];return dt`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[lt(at.phase),lt(at.fieldDuration)],rows:c}}>
+        </devtools-performance-table>
+      </div>
+    `}renderContent(){if(!this.model)return o.nothing;const e=this.#Q();if(!e.length)return dt`<div class="insight-section">${lt(at.noLcp)}</div>`;const s=e.map((({phase:e,timing:s})=>{const i=this.#Z?.sections.find((t=>e===t.label));return{values:[e,t.TimeUtilities.preciseMillisToString(s)],overlays:i&&[{type:"TIMESPAN_BREAKDOWN",sections:[i]}]}})),i=[dt`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[lt(at.phase),lt(at.duration)],rows:s}}>
+        </devtools-performance-table>
+      </div>`],r=this.#X();return r&&i.push(r),dt`${i}`}}customElements.define("devtools-performance-lcp-by-phases",ct);var ht=Object.freeze({__proto__:null,LCPPhases:ct});const{UIStrings:mt,i18nString:ut}=i.Insights.Models.LegacyJavaScript,{html:vt}=o;class pt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-legacy-javascript`;internalName="legacy-javascript";getEstimatedSavingsTime(){return this.model?.metricSavings?.FCP??null}getEstimatedSavingsBytes(){if(!this.model)return null;let e=0;for(const t of this.model.legacyJavaScriptResults.values())e+=t.estimatedByteSavings;return e}createOverlays(){if(!this.model)return[];return[...this.model.legacyJavaScriptResults.keys()].map((e=>e.request)).filter((e=>!!e)).map((e=>({type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"})))}renderContent(){if(!this.model)return o.nothing;const e=[...this.model.legacyJavaScriptResults.entries()].slice(0,10).map((([e,s])=>{const i=[];return e.request&&i.push({type:"ENTRY_OUTLINE",entry:e.request,outlineReason:"ERROR"}),{values:[Ie(e),t.ByteUtilities.bytesToString(s.estimatedByteSavings)],overlays:i,subRows:s.matches.map((t=>({values:[vt`<span title=${`${e.url}:${t.line}:${t.column}`}>${t.name}</span>`]})))}}));return vt`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[ut(mt.columnScript),ut(mt.columnWastedBytes)],rows:e}}>
+        </devtools-performance-table>
+      </div>
+    `}}customElements.define("devtools-performance-legacy-javascript",pt);var gt=Object.freeze({__proto__:null,LegacyJavaScript:pt});const{UIStrings:yt,i18nString:ft}=i.Insights.Models.ModernHTTP,{html:Tt}=o;class bt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-modern-http`;internalName="modern-http";mapToRow(e){return{values:[C(e),e.args.data.protocol],overlays:[this.#M(e)]}}createAggregatedTableRow(e){return{values:[W(e.length),""],overlays:e.map((e=>this.#M(e)))}}getEstimatedSavingsTime(){return this.model?.metricSavings?.LCP??null}createOverlays(){return this.model?.requests.map((e=>this.#M(e)))??[]}renderContent(){if(!this.model)return o.nothing;const e=Y(this.model.requests,this);return e.length?Tt`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[ft(yt.request),ft(yt.protocol)],rows:e}}>
+        </devtools-performance-table>
+      </div>`:Tt`<div class="insight-section">${ft(yt.noOldProtocolRequests)}</div>`}#M(e){return{type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"}}}customElements.define("devtools-performance-modern-http",bt);var St=Object.freeze({__proto__:null,ModernHTTP:bt}),Rt={cssText:`.insight-body{--override-timeline-link-text-decoration:none;--override-timeline-link-text-color:var(--sys-color-on-surface);.max-time{text-align:center;.longest{color:var(--sys-color-error)}}.tree-view{border-top:var(--sys-size-1) solid var(--sys-color-divider);padding-top:var(--sys-size-5);margin-top:var(--sys-size-5);ul:first-child{padding-left:0}ul:not(:first-child){border-left:var(--sys-size-1) solid var(--sys-color-tonal-outline);list-style:none;padding-left:var(--sys-size-5)}li{border-left:var(--sys-size-1) solid var(--sys-color-tonal-outline);list-style:none;min-height:var(--sys-size-8);padding:var(--sys-size-2) 0 var(--sys-size-2) var(--sys-size-5);.request{display:flex;&.longest{--override-timeline-link-text-color:var(--sys-color-error);color:var(--sys-color-error)}&.highlighted{background-color:var(--sys-color-state-hover-on-subtle)}.url{flex:auto}}}}}\n/*# sourceURL=${import.meta.resolve("./networkDependencyTreeInsight.css")} */\n`};const{UIStrings:wt,i18nString:Et}=i.Insights.Models.NetworkDependencyTree,{html:kt}=o,It=new CSSStyleSheet;It.replaceSync(Rt.cssText);class Nt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-long-critical-network-tree`;internalName="long-critical-network-tree";#ee=null;connectedCallback(){super.connectedCallback(),this.shadow.adoptedStyleSheets.push(It)}createOverlays(){if(!this.model)return[];const e=[];return _t(this.model.rootNodes,e),e}#te(e){const t=[];return e.forEach((e=>t.push({type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"}))),t}#se(e){this.#ee=e;const t=this.#te(this.#ee);this.toggleTemporaryOverlays(t,{updateTraceWindow:!1}),this.scheduleRender()}#ie(){this.#ee=null,this.toggleTemporaryOverlays(null,{updateTraceWindow:!1}),this.scheduleRender()}renderTree(e){return 0===e.length?null:kt`
+      <ul>
+        ${e.map((({request:e,timeFromInitialRequest:s,children:r,isLongest:n,relatedRequests:a})=>{const l=r.length>0,d=o.Directives.classMap({request:!0,longest:Boolean(n),highlighted:this.#ee?.has(e)??!1});return kt`
+            <li>
+              <div class=${d}
+                   @mouseover=${this.#se.bind(this,a)}
+                   @mouseout=${this.#ie.bind(this)}>
+                <span class="url">${C(e)}</span>
+                <span class="chain-time">
+                  ${t.TimeUtilities.formatMicroSecondsTime(i.Types.Timing.Micro(s))}
+                </span>
+              </div>
+            </li>
+            ${l?kt`${this.renderTree(r)}`:o.nothing}
+          `}))}
+      </ul>`}renderContent(){return this.model?this.model.rootNodes.length?kt`
+      <div class="insight-section">
+        <div class="max-time">
+          ${Et(wt.maxCriticalPathLatency)}
+          <br>
+          <span class='longest'> ${t.TimeUtilities.formatMicroSecondsTime(this.model.maxTime)}</span>
+        </div>
+
+        <!-- a divider is added here, through |tree-view| element's border-top -->
+        <div class="tree-view">${this.renderTree(this.model.rootNodes)} </div>
+      </div>
+    `:kt`<div class="insight-section">${Et(wt.noNetworkDependencyTree)}</div>`:o.nothing}}function _t(e,t){e.forEach((e=>{t.push({type:"ENTRY_OUTLINE",entry:e.request,outlineReason:"ERROR"}),_t(e.children,t)}))}customElements.define("devtools-performance-long-critical-network-tree",Nt);var $t=Object.freeze({__proto__:null,NetworkDependencyTree:Nt});const{UIStrings:Ot,i18nString:Mt}=i.Insights.Models.RenderBlocking,{html:Dt}=o;class xt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-render-blocking-requests`;mapToRow(e){return{values:[C(e),t.TimeUtilities.formatMicroSecondsTime(e.dur)],overlays:[this.#M(e)]}}createAggregatedTableRow(e){return{values:[W(e.length),""],overlays:e.map((e=>this.#M(e)))}}hasAskAISupport=!0;internalName="render-blocking-requests";createOverlays(){return this.model?this.model.renderBlockingRequests.map((e=>this.#M(e))):[]}#M(e){return{type:"ENTRY_OUTLINE",entry:e,outlineReason:"ERROR"}}getEstimatedSavingsTime(){return this.model?.metricSavings?.FCP??null}renderContent(){if(!this.model)return o.nothing;const e=this.model.renderBlockingRequests;if(!e.length)return Dt`<div class="insight-section">${Mt(Ot.noRenderBlocking)}</div>`;const t=Y(e,this);return Dt`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[Mt(Ot.renderBlockingRequest),Mt(Ot.duration)],rows:t}}>
+        </devtools-performance-table>
+      </div>
+    `}}customElements.define("devtools-performance-render-blocking-requests",xt);var Ct=Object.freeze({__proto__:null,RenderBlocking:xt});const{UIStrings:Lt,i18nString:qt}=i.Insights.Models.SlowCSSSelector,{html:Ft}=o;class Ht extends _{static litTagName=o.StaticHtml.literal`devtools-performance-slow-css-selector`;internalName="slow-css-selector";#re=new Map;createOverlays(){return[]}async toSourceFileLocation(e,t){if(!e)return;const s=e.styleSheetHeaderForId(t.style_sheet_id);if(!s||!s.resourceURL())return;const i=JSON.stringify({selectorText:t.selector,styleSheetId:t.style_sheet_id});let r=this.#re.get(i);if(!r){const s=await e.agent.invoke_getLocationForSelector({selectorText:t.selector,styleSheetId:t.style_sheet_id});if(s.getError()||!s.ranges)return;r=s.ranges,this.#re.set(i,r)}return r.map(((e,t)=>({url:s.resourceURL(),lineNumber:e.startLine,columnNumber:e.startColumn,linkText:`[${t+1}]`,title:`${s.id} line ${e.startLine+1}:${e.startColumn+1}`})))}async getSelectorLinks(e,t){if(!e)return o.nothing;if(!t.style_sheet_id)return o.nothing;const s=await this.toSourceFileLocation(e,t);if(!s)return o.nothing;return Ft`
+    ${s.map(((e,t)=>{const i=t!==s.length-1?", ":"";return Ft`<devtools-linkifier .data=${e}></devtools-linkifier>${i}`}))}`}renderContent(){if(!this.model)return o.nothing;const e=d.TargetManager.TargetManager.instance().primaryPageTarget(),s=e?.model(d.CSSModel.CSSModel);if(!this.model.topMatchAttempts.length&&!this.model.topElapsedMs.length)return Ft`<div class="insight-section">${qt(Lt.enableSelectorData)}</div>`;const r=[Ft`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{insight:this,headers:[qt(Lt.total),""],rows:[{values:[qt(Lt.elapsed),t.TimeUtilities.millisToString(this.model.totalElapsedMs)]},{values:[qt(Lt.matchAttempts),this.model.totalMatchAttempts]},{values:[qt(Lt.matchCount),this.model.totalMatchCount]}]}}>
+        </devtools-performance-table>
+      </div>
+    `];return this.model.topElapsedMs.length&&r.push(Ft`
+        <div class="insight-section">
+          <devtools-performance-table
+            .data=${{insight:this,headers:[qt(Lt.topSelectors),qt(Lt.elapsed)],rows:this.model.topElapsedMs.map((e=>{return{values:[Ft`${e.selector} ${o.Directives.until(this.getSelectorLinks(s,e))}`,(r=i.Types.Timing.Micro(e["elapsed (us)"]),t.TimeUtilities.millisToString(l.Timing.microSecondsToMilliSeconds(r)))]};var r}))}}>
+          </devtools-performance-table>
+        </div>
+      `),this.model.topMatchAttempts.length&&r.push(Ft`
+        <div class="insight-section">
+          <devtools-performance-table
+            .data=${{insight:this,headers:[qt(Lt.topSelectors),qt(Lt.matchAttempts)],rows:this.model.topMatchAttempts.map((e=>({values:[Ft`${e.selector} ${o.Directives.until(this.getSelectorLinks(s,e))}`,e.match_attempts]})))}}>
+          </devtools-performance-table>
+        </div>
+      `),Ft`${r}`}}customElements.define("devtools-performance-slow-css-selector",Ht);var At=Object.freeze({__proto__:null,SlowCSSSelector:Ht});const{UIStrings:zt,i18nString:Ut}=i.Insights.Models.ThirdParties,{html:Pt}=o;class Bt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-third-parties`;internalName="third-parties";createOverlays(){if(!this.model)return[];const e=[],t=this.model.summaries??[];for(const s of t){if(s.entity===this.model.firstPartyEntity)continue;const t=this.#ne(s);e.push(...t)}return e}#ne(e){const t=[],s=e.relatedEvents??[];for(const e of s){if(void 0===e.dur||e.dur<1e3)continue;const s={type:"ENTRY_OUTLINE",entry:e,outlineReason:"INFO"};t.push(s)}return t}#oe={mapToRow:e=>({values:[e.entity.name,t.TimeUtilities.millisToString(e.mainThreadTime)],overlays:this.#ne(e)}),createAggregatedTableRow:e=>{const s=e.reduce(((e,t)=>i.Types.Timing.Milli(e+t.mainThreadTime)),i.Types.Timing.Milli(0));return{values:[W(e.length),t.TimeUtilities.millisToString(s)],overlays:e.flatMap((e=>this.#ne(e)??[]))}}};#ae={mapToRow:e=>({values:[e.entity.name,t.ByteUtilities.formatBytesToKb(e.transferSize)],overlays:this.#ne(e)}),createAggregatedTableRow:e=>{const s=e.reduce(((e,t)=>e+t.transferSize),0);return{values:[W(e.length),t.ByteUtilities.formatBytesToKb(s)],overlays:e.flatMap((e=>this.#ne(e)??[]))}}};renderContent(){if(!this.model)return o.nothing;let e=this.model.summaries??[];if(this.model.firstPartyEntity&&(e=e.filter((e=>e.entity!==this.model?.firstPartyEntity||null))),!e.length)return Pt`<div class="insight-section">${Ut(zt.noThirdParties)}</div>`;const t=e.toSorted(((e,t)=>t.transferSize-e.transferSize)),s=e.toSorted(((e,t)=>t.mainThreadTime-e.mainThreadTime)),i=[];if(t.length){const e=Y(t,this.#ae,5);i.push(Pt`
+        <div class="insight-section">
+          <devtools-performance-table
+            .data=${{insight:this,headers:[Ut(zt.columnThirdParty),Ut(zt.columnTransferSize)],rows:e}}>
+          </devtools-performance-table>
+        </div>
+      `)}if(s.length){const e=Y(s,this.#oe,5);i.push(Pt`
+        <div class="insight-section">
+          <devtools-performance-table
+            .data=${{insight:this,headers:[Ut(zt.columnThirdParty),Ut(zt.columnMainThreadTime)],rows:e}}>
+          </devtools-performance-table>
+        </div>
+      `)}return Pt`${i}`}}customElements.define("devtools-performance-third-parties",Bt);var jt=Object.freeze({__proto__:null,ThirdParties:Bt}),Wt=Object.freeze({__proto__:null});const{html:Yt}=o;class Kt extends _{static litTagName=o.StaticHtml.literal`devtools-performance-viewport`;internalName="viewport";createOverlays(){return[]}getEstimatedSavingsTime(){return this.model?.metricSavings?.INP??null}renderContent(){if(!this.model||!this.model.viewportEvent)return o.nothing;const e=this.model.viewportEvent.args.data.node_id;return void 0===e?o.nothing:Yt`
+      <div>
+        <devtools-performance-node-link
+          .data=${{backendNodeId:e,frame:this.model.viewportEvent.args.data.frame??"",options:{tooltip:this.model.viewportEvent.args.data.content},fallbackHtmlSnippet:`<meta name=viewport content="${this.model.viewportEvent.args.data.content}">`}}>
+        </devtools-performance-node-link>
+      </div>`}}customElements.define("devtools-performance-viewport",Kt);var Jt=Object.freeze({__proto__:null,Viewport:Kt});export{$ as BaseInsightComponent,me as CLSCulprits,X as Cache,ae as Checklist,ke as DOMSize,ye as DocumentLatency,Me as DuplicatedJavaScript,H as EventRef,qe as FontDisplay,Pe as ForcedReflow,Be as Helpers,Je as ImageDelivery,Xe as InteractionToNextPaint,ot as LCPDiscovery,ht as LCPPhases,gt as LegacyJavaScript,St as ModernHTTP,$t as NetworkDependencyTree,be as NodeLink,Ct as RenderBlocking,R as SidebarInsight,At as SlowCSSSelector,J as Table,jt as ThirdParties,Wt as Types,Jt as Viewport};

package/client/dist/chrome-devtools-ui/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-blue70";switch(r.args.color){case"primary":a="--ref-palette-blue70";break;case"primary-light":a="--ref-palette-blue80";break;case"primary-dark":a="--ref-palette-blue60";break;case"secondary":a="--ref-palette-purple80";break;case"secondary-light":a="--ref-palette-purple90";break;case"secondary-dark":a="--ref-palette-purple70";break;case"tertiary":a="--ref-palette-green70";break;case"tertiary-light":a="--ref-palette-green80";break;case"tertiary-dark":a="--ref-palette-green60";break;case"warning":a="--ref-palette-yellow70";break;case"error":a="--ref-palette-error60"}return e.ThemeSupport.instance().getComputedValue(a)}});export{r as ExtensionUI};

package/client/dist/chrome-devtools-ui/panels/timeline/overlays/components/components.js

@@ -0,0 +1,190 @@
+import"../../../../ui/components/icon_button/icon_button.js";import*as e from"../../../../core/i18n/i18n.js";import"../../../../models/trace/trace.js";import*as t from"../../../../ui/legacy/theme_support/theme_support.js";import*as i from"../../../../ui/lit/lit.js";import{render as n,html as o}from"../../../../ui/lit/lit.js";import*as s from"../../../../ui/visual_logging/visual_logging.js";import"../../../../ui/components/tooltips/tooltips.js";import"../../../../ui/components/spinners/spinners.js";import*as r from"../../../../core/common/common.js";import*as a from"../../../../core/host/host.js";import*as l from"../../../../core/platform/platform.js";import*as c from"../../../../core/root/root.js";import*as h from"../../../../models/ai_assistance/ai_assistance.js";import"../../../../ui/components/buttons/buttons.js";import*as d from"../../../../ui/components/helpers/helpers.js";import*as b from"../../../../ui/legacy/legacy.js";import*as p from"../../../common/common.js";var u={cssText:`.connectorContainer{display:flex;width:100%;height:100%}.entry-wrapper{pointer-events:none;position:absolute;display:block;border:2px solid var(--color-text-primary);box-sizing:border-box;&.cut-off-top{border-top:none}&.cut-off-bottom{border-bottom:none}&.cut-off-right{border-right:none}&.cut-off-left{border-left:none}}.entry-is-not-source{border:2px dashed var(--color-text-primary)}.create-link-icon{pointer-events:auto;cursor:pointer;color:var(--sys-color-on-surface);width:16px;height:16px;position:absolute}\n/*# sourceURL=${import.meta.resolve("./entriesLinkOverlay.css")} */\n`};const y={diagram:"Links bteween entries"},g=e.i18n.registerUIStrings("panels/timeline/overlays/components/EntriesLinkOverlay.ts",y),m=e.i18n.getLocalizedString.bind(void 0,g),v=new CSSStyleSheet;v.replaceSync(u.cssText);class f extends Event{static eventName="entrylinkstartcreating";constructor(){super(f.eventName,{bubbles:!0,composed:!0})}}let w=class extends HTMLElement{#e=this.attachShadow({mode:"open"});#t;#i;#n;#o=null;#s=null;#r=null;#a=null;#l=null;#c=null;#h=null;#d=!0;#b=!0;#p=null;#u=!0;#y=!0;#g=!1;#m;constructor(e,t){super(),this.#v(),this.#t={x:e.x,y:e.y},this.#i={width:e.width,height:e.height},this.#n={x:e.x,y:e.y},this.#s=this.#e.querySelector(".connectorContainer")??null,this.#r=this.#s?.querySelector("line")??null,this.#a=this.#e.querySelector(".from-highlight-wrapper")??null,this.#l=this.#e.querySelector(".to-highlight-wrapper")??null,this.#c=this.#s?.querySelector(".entryFromConnector")??null,this.#h=this.#s?.querySelector(".entryToConnector")??null,this.#m=t,this.#v()}set canvasRect(e){null!==e&&(this.#p&&this.#p.width===e.width&&this.#p.height===e.height||(this.#p=e,this.#v()))}entryFromWrapper(){return this.#a}entryToWrapper(){return this.#l}connectedCallback(){this.#e.adoptedStyleSheets=[v]}set hideArrow(e){this.#g=e,this.#r&&(this.#r.style.display=e?"none":"block")}set fromEntryCoordinateAndDimensions(e){this.#t={x:e.x,y:e.y},this.#i={width:e.length,height:e.height},this.#f(),this.#w()}set entriesVisibility(e){this.#d=e.fromEntryVisibility,this.#b=e.toEntryVisibility,this.#w()}set toEntryCoordinateAndDimensions(e){this.#n={x:e.x,y:e.y},e.length&&e.height?this.#o={width:e.length,height:e.height}:this.#o=null,this.#f(),this.#w()}set fromEntryIsSource(e){e!==this.#u&&(this.#u=e,this.#v())}set toEntryIsSource(e){e!==this.#y&&(this.#y=e,this.#v())}#w(){if(!(this.#r&&this.#a&&this.#l&&this.#c&&this.#h))return void console.error("`connector` element is missing.");if("creation_not_started"===this.#m)return this.#c.setAttribute("visibility","hidden"),void this.#h.setAttribute("visibility","hidden");const e=this.#d&&!this.#g&&this.#u&&this.#i.width>=8,i=this.#o?.width??0,n=!this.#g&&this.#b&&this.#y&&i>=8&&!this.#g;this.#c.setAttribute("visibility",e?"visible":"hidden"),this.#h.setAttribute("visibility",n?"visible":"hidden");const o=this.#i.height/2;if(this.#d){const e=String(this.#t.x+this.#i.width),t=String(this.#t.y+o);this.#r.setAttribute("x1",e),this.#r.setAttribute("y1",t),this.#c.setAttribute("cx",e),this.#c.setAttribute("cy",t),this.#a.style.visibility="visible"}else this.#r.setAttribute("x1",(this.#t.x+this.#i.width).toString()),this.#r.setAttribute("y1",String(this.#t.y+o)),this.#a.style.visibility="hidden";if(this.#o&&this.#b){const e=String(this.#n.x),t=String(this.#n.y+this.#o.height/2);this.#r.setAttribute("x2",e),this.#r.setAttribute("y2",t),this.#h.setAttribute("cx",e),this.#h.setAttribute("cy",t),this.#l.style.visibility="visible"}else if(this.#l.style.visibility="hidden",this.#r.setAttribute("x2",this.#n.x.toString()),this.#o){const e=this.#o.height/2;this.#r.setAttribute("y2",String(this.#n.y+e))}else this.#r.setAttribute("y2",this.#n.y.toString());if(this.#r.setAttribute("stroke-width","2"),this.#o&&this.#d&&!this.#b)this.#r.setAttribute("stroke","url(#fromVisibleLineGradient)");else if(this.#o&&this.#b&&!this.#d)this.#r.setAttribute("stroke","url(#toVisibleLineGradient)");else{const e=t.ThemeSupport.instance().getComputedValue("--color-text-primary");this.#r.setAttribute("stroke",e)}this.#v()}#x(){if(!this.#p)return 100;const e=this.#n.x-(this.#t.x+this.#i.width);let t=0;this.#d&&!this.#b?t=this.#p.width-(this.#t.x+this.#i.width):!this.#d&&this.#b&&(t=this.#n.x);const i=100*t/e;return i<100?i:100}#f(){const e=this.#e.querySelector(".create-link-box"),t=e?.querySelector(".create-link-icon")??null;e&&t?"creation_not_started"===this.#m?(t.style.left=`${this.#t.x+this.#i.width}px`,t.style.top=`${this.#t.y}px`):t.style.display="none":console.error("creating element is missing.")}#L(){this.#m="pending_to_event",this.dispatchEvent(new f)}#v(){const e=t.ThemeSupport.instance().getComputedValue("--color-text-primary");n(o`
+          <svg class="connectorContainer" width="100%" height="100%" role="region" aria-label=${m(y.diagram)}>
+            <defs>
+              <linearGradient
+                id="fromVisibleLineGradient"
+                x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop
+                  offset="0%"
+                  stop-color=${e}
+                  stop-opacity="1" />
+                <stop
+                  offset="${this.#x()}%"
+                  stop-color=${e}
+                  stop-opacity="0" />
+              </linearGradient>
+
+              <linearGradient
+                id="toVisibleLineGradient"
+                x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop
+                  offset="${100-this.#x()}%"
+                  stop-color=${e}
+                  stop-opacity="0" />
+                <stop
+                  offset="100%"
+                  stop-color=${e}
+                  stop-opacity="1" />
+              </linearGradient>
+              <marker
+                id="arrow"
+                orient="auto"
+                markerWidth="3"
+                markerHeight="4"
+                fill-opacity="1"
+                refX="4"
+                refY="2"
+                visibility=${this.#b||!this.#o?"visible":"hidden"}>
+                <path d="M0,0 V4 L4,2 Z" fill=${e} />
+              </marker>
+            </defs>
+            <line
+              marker-end="url(#arrow)"
+              stroke-dasharray=${this.#u&&this.#y?"none":E}
+              visibility=${this.#d||this.#b?"visible":"hidden"}
+              />
+            <circle class="entryFromConnector" fill="none" stroke=${e} stroke-width=${L} r=${x} />
+            <circle class="entryToConnector" fill="none" stroke=${e} stroke-width=${L} r=${x} />
+          </svg>
+          <div class="entry-wrapper from-highlight-wrapper ${this.#u?"":"entry-is-not-source"}"></div>
+          <div class="entry-wrapper to-highlight-wrapper ${this.#y?"":"entry-is-not-source"}"></div>
+          <div class="create-link-box ${this.#m?"visible":"hidden"}">
+            <devtools-icon
+              class='create-link-icon'
+              jslog=${s.action("timeline.annotations.create-entry-link").track({click:!0})}
+              @click=${this.#L}
+              name='arrow-right-circle'>
+            </devtools-icon>
+          </div>
+        `,this.#e,{host:this})}};const x=2,L=1,E=4;customElements.define("devtools-entries-link-overlay",w);var A=Object.freeze({__proto__:null,EntriesLinkOverlay:w,EntryLinkStartCreating:f}),C={cssText:`.label-parts-wrapper{display:flex;flex-direction:column;align-items:center}.label-button-input-wrapper{display:flex;position:relative;overflow:visible}.ai-label-button-wrapper,\n.ai-label-disabled-button-wrapper,\n.ai-label-loading,\n.ai-label-error{position:absolute;left:100%;display:flex;transform:translateY(-3px);flex-flow:row nowrap;border:none;border-radius:var(--sys-shape-corner-large);background:var(--sys-color-surface3);box-shadow:var(--drop-shadow);align-items:center;gap:var(--sys-size-4);pointer-events:auto;transition:all var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized);&.only-pen-wrapper{overflow:hidden;width:var(--sys-size-12);height:var(--sys-size-12)}*{transform:translateX(-2px)}}.ai-label-loading,\n.ai-label-error{gap:var(--sys-size-6);padding:var(--sys-size-5) var(--sys-size-8)}.ai-label-button-wrapper:focus,\n.ai-label-button-wrapper:focus-within,\n.ai-label-button-wrapper:hover{width:auto;height:var(--sys-size-13);padding:var(--sys-size-3) var(--sys-size-5);transform:translateY(-9px);*{transform:translateX(0)}}.ai-label-button{display:flex;align-items:center;gap:var(--sys-size-4);padding:var(--sys-size-3) var(--sys-size-5);border:1px solid var(--color-primary);border-radius:var(--sys-shape-corner-large);&.enabled{background:var(--sys-color-surface3)}&.disabled{background:var(--sys-color-surface5)}&:hover{background:var(--sys-color-state-hover-on-subtle)}}.generate-label-text{white-space:nowrap;color:var(--color-primary)}.input-field{background-color:var(--color-background-inverted);color:var(--color-background);pointer-events:auto;border-radius:var(--sys-shape-corner-extra-small);white-space:nowrap;padding:var(--sys-size-3) var(--sys-size-4);font-family:var(--default-font-family);font-size:var(--sys-typescale-body2-size);font-weight:var(--ref-typeface-weight-medium)}.input-field:focus,\n.label-parts-wrapper:focus-within .input-field,\n.input-field.fake-focus-state{background-color:var(--color-background);color:var(--color-background-inverted);outline:2px solid var(--color-background-inverted)}.connectorContainer{overflow:visible}.entry-highlight-wrapper{box-sizing:border-box;border:2px solid var(--sys-color-on-surface);&.cut-off-top{border-top:none}&.cut-off-bottom{border-bottom:none}&.cut-off-right{border-right:none}&.cut-off-left{border-left:none}}.info-tooltip-container{max-width:var(--sys-size-28);button.link{cursor:pointer;text-decoration:underline;border:none;padding:0;background:none;font:inherit;font-weight:var(--ref-typeface-weight-medium);display:block;margin-top:var(--sys-size-4);color:var(--sys-color-primary)}}\n/*# sourceURL=${import.meta.resolve("./entryLabelOverlay.css")} */\n`};const{html:k,Directives:T}=i,S=new CSSStyleSheet;S.replaceSync(C.cssText);const R={entryLabel:"Entry label",inputTextPrompt:"Enter an annotation label",generateLabelButton:"Generate label",freDialog:"Get AI-powered annotation suggestions dialog",learnMoreAriaLabel:"Learn more about auto annotations in settings",moreInfoAriaLabel:"More info"},I="Learn more in settings",_="The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.",$="The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.",B="Auto annotations are not available.",F="Auto annotations are not available because you are offline.",N="Get AI-powered annotation suggestions",D="Generating label",H="Generation failed",O="This feature uses AI and won’t always get it right",V="Performance trace is sent to Google to generate annotation suggestions",G="You can control this feature in the",z="settings panel",P="Learn more about auto annotations",j=e.i18n.registerUIStrings("panels/timeline/overlays/components/EntryLabelOverlay.ts",R),M=e.i18n.getLocalizedString.bind(void 0,j),W=e.i18n.lockedString;function U(){return!c.Runtime.hostConfig.aidaAvailability?.disallowLogging}class q extends Event{static eventName="emptyentrylabelremoveevent";constructor(){super(q.eventName)}}class K extends Event{newLabel;static eventName="entrylabelchangeevent";constructor(e){super(K.eventName),this.newLabel=e}}class Y extends Event{isVisible;static eventName="labelannotationsconsentdialogvisiblitychange";constructor(e){super(Y.eventName,{bubbles:!0,composed:!0}),this.isVisible=e}}let X=class e 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=e.LABEL_HEIGHT+2*e.LABEL_PADDING+e.LABEL_CONNECTOR_HEIGHT;static MAX_LABEL_LENGTH=100;#e=this.attachShadow({mode:"open"});#E=this.#v.bind(this);#A=!1;#C=!0;#k=null;#T=null;#S=null;#R=null;#s=null;#I;#_;#$=T.createRef();#B=null;#F=r.Settings.Settings.instance().createSetting("ai-annotations-enabled",!1);#N=new h.PerformanceAnnotationsAgent({aidaClient:new a.AidaClient.AidaClient,serverSideLoggingEnabled:U()});#D=!1;#H=!1;#O=!1;constructor(e,t=!1){super(),this.#v(),this.#_=t,this.#T=this.#e.querySelector(".label-parts-wrapper"),this.#R=this.#T?.querySelector(".input-field")??null,this.#s=this.#T?.querySelector(".connectorContainer")??null,this.#S=this.#T?.querySelector(".entry-highlight-wrapper")??null,this.#I=e,this.#V(e),""!==e&&this.setLabelEditabilityAndRemoveEmptyLabel(!1);const i=""===e?M(R.inputTextPrompt):e;this.#R?.setAttribute("aria-label",i),this.#G()}overrideAIAgentForTest(e){this.#N=e}connectedCallback(){this.#e.adoptedStyleSheets=[S]}entryHighlightWrapper(){return this.#S}#z(){const e=this.#R?.textContent?.trim()??"";e!==this.#I&&(this.#I=e,this.dispatchEvent(new K(this.#I)),this.#R?.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),this.#R?.setAttribute("aria-label",e)}#P(t){if(!this.#R)return!1;return t.key!==l.KeyboardUtilities.ENTER_KEY&&t.key!==l.KeyboardUtilities.ESCAPE_KEY||!this.#C?null!==this.#R.textContent&&this.#R.textContent.length<=e.MAX_LABEL_LENGTH||(!!["Backspace","Delete","ArrowLeft","ArrowRight"].includes(t.key)||(!(1!==t.key.length||!t.ctrlKey)||(t.preventDefault(),!1))):(this.#R.blur(),this.setLabelEditabilityAndRemoveEmptyLabel(!1),!1)}#j(t){t.preventDefault();const i=t.clipboardData;if(!i||!this.#R)return;const n=i.getData("text"),o=(this.#R.textContent+n).slice(0,e.MAX_LABEL_LENGTH+1);this.#R.textContent=o,this.#M()}set entryLabelVisibleHeight(e){e!==this.#k?(this.#k=e,d.ScheduledRender.scheduleRender(this,this.#E),this.#C&&this.#W(),this.#V(),this.#G()):this.#G()}#G(){if(!this.#s)return void console.error("`connectorLineContainer` element is missing.");if(this.#_&&this.#k){const t=this.#k+e.LABEL_CONNECTOR_HEIGHT;this.#s.style.transform=`translateY(${t}px) rotate(180deg)`}const i=this.#s.querySelector("line"),n=this.#s.querySelector("circle");if(!i||!n)return void console.error("Some entry label elements are missing.");this.#s.setAttribute("width",(2*e.LABEL_AND_CONNECTOR_SHIFT_LENGTH).toString()),this.#s.setAttribute("height",e.LABEL_CONNECTOR_HEIGHT.toString()),i.setAttribute("x1","0"),i.setAttribute("y1","0"),i.setAttribute("x2",e.LABEL_AND_CONNECTOR_SHIFT_LENGTH.toString()),i.setAttribute("y2",e.LABEL_CONNECTOR_HEIGHT.toString());const o=t.ThemeSupport.instance().getComputedValue("--color-text-primary");i.setAttribute("stroke",o),i.setAttribute("stroke-width","2"),n.setAttribute("cx",e.LABEL_AND_CONNECTOR_SHIFT_LENGTH.toString()),n.setAttribute("cy",e.LABEL_CONNECTOR_HEIGHT.toString()),n.setAttribute("r","3"),n.setAttribute("fill",o)}#V(t){if(!this.#R)return void console.error("`labelBox`element is missing.");"string"==typeof t&&(this.#R.innerText=t);let i=null,n=null;if(i=this.#_?e.LABEL_AND_CONNECTOR_SHIFT_LENGTH:-1*e.LABEL_AND_CONNECTOR_SHIFT_LENGTH,this.#_&&this.#k){n=this.#k+e.LABEL_HEIGHT+2*e.LABEL_PADDING+2*e.LABEL_CONNECTOR_HEIGHT}let o="";i&&(o+=`translateX(${i}px) `),n&&(o+=`translateY(${n}px)`),o.length&&(this.#R.style.transform=o)}#W(){this.#R?this.#R.focus():console.error("`labelBox` element is missing.")}setLabelEditabilityAndRemoveEmptyLabel(e){if(this.#D&&!1===e)return;e?this.setAttribute("data-user-editing-label","true"):this.removeAttribute("data-user-editing-label"),this.#C=e,this.#v(),e&&this.#R&&(this.#M(),this.#W());const t=this.#R?.textContent?.trim()??"";e||0!==t.length||this.#A||(this.#A=!0,this.dispatchEvent(new q))}#M(){if(!this.#R)return;const e=window.getSelection(),t=document.createRange();t.selectNodeContents(this.#R),t.collapse(!1),e?.removeAllRanges(),e?.addRange(t)}set callTree(e){this.#B=e}async#U(){if(this.#F.get()){if(!this.#B||!this.#R)return;try{this.#H=!0,b.ARIAUtils.alert(D),this.#v(),this.#W(),d.ScheduledRender.scheduleRender(this,this.#E),this.#I=await this.#N.generateAIEntryLabel(this.#B),this.dispatchEvent(new K(this.#I)),this.#R.innerText=this.#I,this.#H=!1,this.#v()}catch{this.#H=!1,this.#O=!0,d.ScheduledRender.scheduleRender(this,this.#E)}}else{this.#H=!1,this.#D=!0,this.#v();const e=await this.#q();this.#D=!1,this.setLabelEditabilityAndRemoveEmptyLabel(!0),e&&await this.#U()}}async#q(){this.dispatchEvent(new Y(!0));const e=await p.FreDialog.show({ariaLabel:M(R.freDialog),header:{iconName:"pen-spark",text:W(N)},reminderItems:[{iconName:"psychiatry",content:W(O)},{iconName:"google",content:W(V)},{iconName:"gear",content:k`
+            ${W(G)}
+            <button
+              @click=${()=>{b.ViewManager.ViewManager.instance().showView("chrome-ai")}}
+              class="link"
+              role="link"
+              jslog=${s.link("open-ai-settings").track({click:!0})}
+              tabindex="0"
+            >${W(z)}</button>`}],onLearnMoreClick:()=>{b.UIUtils.openInNewTab("https://developer.chrome.com/docs/devtools/performance/reference#auto-annotations")},learnMoreButtonTitle:P});return this.dispatchEvent(new Y(!1)),e&&this.#F.set(!0),this.#F.get()}#K(){const e=Boolean(c.Runtime.hostConfig.devToolsAiGeneratedTimelineLabels?.enabled),t=c.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===c.Runtime.GenAiEnterprisePolicyValue.DISABLE,i=null!==this.#B,n=this.#I?.length<=0;if(!e||t||!i||!n)return"hidden";const o=!c.Runtime.hostConfig.aidaAvailability?.blockedByAge&&!c.Runtime.hostConfig.aidaAvailability?.blockedByGeo&&!1==!navigator.onLine;return o?"enabled":o?(console.error("'Generate label' button is hidden for an unknown reason"),"hidden"):"disabled"}#Y(e){return k`<devtools-tooltip
+    variant="rich"
+    id="info-tooltip"
+    ${T.ref(this.#$)}>
+      <div class="info-tooltip-container">
+        ${e.textContent}
+        ${e.includeSettingsButton?k`
+          <button
+            class="link tooltip-link"
+            role="link"
+            jslog=${s.link("open-ai-settings").track({click:!0})}
+            @click=${this.#X}
+            aria-label=${M(R.learnMoreAriaLabel)}
+          >${W(I)}</button>
+        `:i.nothing}
+      </div>
+    </devtools-tooltip>`}#Z(){const e=c.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===c.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;return this.#H?k`
+      <span
+        class="ai-label-loading">
+        <devtools-spinner></devtools-spinner>
+        <span class="generate-label-text">${W(D)}</span>
+      </span>
+    `:this.#O?(this.#O=!1,k`
+        <span
+          class="ai-label-error">
+          <devtools-icon
+            class="warning"
+            .name=${"warning"}
+            .data=${{iconName:"warning",color:"var(--ref-palette-error50)",width:"20px"}}>
+          </devtools-icon>
+          <span class="generate-label-text">${W(H)}</span>
+        </span>
+      `):k`
+      <!-- 'preventDefault' on the AI label button to prevent the label removal on blur  -->
+      <span
+        class="ai-label-button-wrapper only-pen-wrapper"
+        @mousedown=${e=>e.preventDefault()}>
+        <button
+          class="ai-label-button enabled"
+          @click=${this.#U}>
+          <devtools-icon
+            class="pen-icon"
+            .name=${"pen-spark"}
+            .data=${{iconName:"pen-spark",color:"var(--color-primary)",width:"20px"}}>
+          </devtools-icon>
+          <span class="generate-label-text">${M(R.generateLabelButton)}</span>
+        </button>
+        <devtools-button
+          aria-details="info-tooltip"
+          aria-label=${M(R.moreInfoAriaLabel)}
+          class="pen-icon"
+          .iconName=${"info"}
+          .variant=${"icon"}
+          ></devtools-button>
+        ${this.#Y({textContent:W(e?$:_),includeSettingsButton:!0})}
+      </span>
+    `}#X(){this.#$?.value?.hidePopover(),b.ViewManager.ViewManager.instance().showView("chrome-ai")}#J(){const e=!1===navigator.onLine;return k`
+      <!-- 'preventDefault' on the AI label button to prevent the label removal on blur  -->
+      <span
+        class="ai-label-disabled-button-wrapper only-pen-wrapper"
+        @mousedown=${e=>e.preventDefault()}>
+        <button
+          class="ai-label-button disabled"
+          ?disabled=${!0}
+          @click=${this.#U}>
+          <devtools-icon
+            aria-details="info-tooltip"
+            class="pen-icon"
+            .name=${"pen-spark"}
+            .data=${{iconName:"pen-spark",color:"var(--sys-color-state-disabled)",width:"20px"}}>
+          </devtools-icon>
+        </button>
+        ${this.#Y({textContent:W(e?F:B),includeSettingsButton:!e})}
+      </span>
+    `}#Q(){requestAnimationFrame((()=>{this.hasFocus()||this.setLabelEditabilityAndRemoveEmptyLabel(!1)}))}#v(){const e=i.Directives.classMap({"input-field":!0,"fake-focus-state":this.#D});i.render(k`
+        <span class="label-parts-wrapper" role="region" aria-label=${M(R.entryLabel)}
+          @focusout=${this.#Q}
+        >
+          <span
+            class="label-button-input-wrapper">
+            <span
+              class=${e}
+              role="textbox"
+              @focus=${()=>{this.setLabelEditabilityAndRemoveEmptyLabel(!0)}}
+              @dblclick=${()=>{this.setLabelEditabilityAndRemoveEmptyLabel(!0)}}
+              @keydown=${this.#P}
+              @paste=${this.#j}
+              @keyup=${()=>{this.#z(),this.#v()}}
+              contenteditable=${!!this.#C&&"plaintext-only"}
+              jslog=${s.textField("timeline.annotations.entry-label-input").track({keydown:!0,click:!0,change:!0})}
+              tabindex="0"
+            ></span>
+            ${(()=>{switch(this.#K()){case"hidden":return i.nothing;case"enabled":return this.#Z();case"disabled":return this.#J()}})()}
+          </span>
+          <svg class="connectorContainer">
+            <line/>
+            <circle/>
+          </svg>
+          <div class="entry-highlight-wrapper"></div>
+        </span>`,this.#e,{host:this})}};customElements.define("devtools-entry-label-overlay",X);var Z=Object.freeze({__proto__:null,EmptyEntryLabelRemoveEvent:q,EntryLabelChangeEvent:K,EntryLabelOverlay:X,LabelAnnotationsConsentDialogVisiblityChange:Y}),J={cssText:`:host{display:flex;overflow:hidden;flex-direction:column;justify-content:flex-end;width:100%;height:100%;box-sizing:border-box;padding-bottom:5px;background:linear-gradient(180deg,rgb(255 125 210/0%) 0%,rgb(255 125 210/15%) 85%);border-color:var(--ref-palette-pink55);border-width:0 1px 5px;border-style:solid;pointer-events:none}.range-container{display:flex;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;pointer-events:all;user-select:none;color:var(--sys-color-pink);&.labelHidden{user-select:none;pointer-events:none;visibility:hidden}&.offScreenLeft{align-items:flex-start;text-align:left}&.offScreenRight{align-items:flex-end;text-align:right}}.label-text{width:100%;max-width:70px;min-width:fit-content;text-overflow:ellipsis;overflow:hidden;word-break:normal;overflow-wrap:anywhere;margin-bottom:3px;display:-webkit-box;white-space:break-spaces;-webkit-line-clamp:2;-webkit-box-orient:vertical}.label-text[contenteditable='true']{outline:none;box-shadow:0 0 0 1px var(--ref-palette-pink55)}\n/*# sourceURL=${import.meta.resolve("./timeRangeOverlay.css")} */\n`};const Q=new CSSStyleSheet;Q.replaceSync(J.cssText);const ee={timeRange:"Time range"},te=e.i18n.registerUIStrings("panels/timeline/overlays/components/TimeRangeOverlay.ts",ee),ie=e.i18n.getLocalizedString.bind(void 0,te);class ne extends Event{newLabel;static eventName="timerangelabelchange";constructor(e){super(ne.eventName),this.newLabel=e}}class oe extends Event{static eventName="timerangeremoveevent";constructor(){super(oe.eventName)}}let se=class extends HTMLElement{#e=this.attachShadow({mode:"open"});#ee=null;#p=null;#I;#C=!0;#te=null;#ie=null;connectedCallback(){this.#e.adoptedStyleSheets=[Q]}constructor(e){super(),this.#v(),this.#te=this.#e.querySelector(".range-container"),this.#ie=this.#te?.querySelector(".label-text")??null,this.#I=e,this.#ie?(this.#ie.innerText=e,e&&(this.#ie?.setAttribute("aria-label",e),this.#ne(!1))):console.error("`labelBox` element is missing.")}set canvasRect(e){null!==e&&(this.#p&&this.#p.width===e.width&&this.#p.height===e.height||(this.#p=e,this.#v()))}set duration(e){e!==this.#ee&&(this.#ee=e,this.#v())}#oe(e){if(!this.#p)return 0;const{x:t,width:i}=e,n=t+i,o=this.#p.x,s=this.#p.x+this.#p.width,r=Math.max(o,t);return Math.min(s,n)-r}updateLabelPositioning(){if(!this.#te)return;if(!this.#p||!this.#ie)return;const e=this.getBoundingClientRect(),t=this.#e.activeElement===this.#ie,i=this.#te.getBoundingClientRect(),n=this.#oe(e)-9,o=this.#te.querySelector(".duration")??null,s=o?.getBoundingClientRect().width;if(!s)return;const r=n<=s&&!t&&this.#I.length>0;if(this.#te.classList.toggle("labelHidden",r),r)return;const a=(e.width-i.width)/2,l=e.x+a<this.#p.x;this.#te.classList.toggle("offScreenLeft",l);const c=this.#p.x+this.#p.width,h=e.x+a+i.width>c;this.#te.classList.toggle("offScreenRight",h),l?this.#te.style.marginLeft=`${Math.abs(this.#p.x-e.x)+9}px`:h?this.#te.style.marginRight=e.right-this.#p.right+9+"px":this.#te.style.margin="0px",""===this.#ie?.innerText&&this.#ne(!0)}#W(){this.#ie?this.#ie.focus():console.error("`labelBox` element is missing.")}#ne(e){""!==this.#ie?.innerText?(this.#C=e,this.#v(),e&&this.#W()):this.#W()}#z(){const e=this.#ie?.textContent??"";e!==this.#I&&(this.#I=e,this.dispatchEvent(new ne(this.#I)),this.#ie?.setAttribute("aria-label",e))}#P(e){return e.key!==l.KeyboardUtilities.ENTER_KEY&&e.key!==l.KeyboardUtilities.ESCAPE_KEY||(e.stopPropagation(),""===this.#I&&this.dispatchEvent(new oe),this.#ie?.blur(),!1)}#v(){const t=this.#ee?e.TimeUtilities.formatMicroSecondsTime(this.#ee):"";n(o`
+          <span class="range-container" role="region" aria-label=${ie(ee.timeRange)}>
+            <span
+             class="label-text"
+             role="textbox"
+             @focusout=${()=>this.#ne(!1)}
+             @dblclick=${()=>this.#ne(!0)}
+             @keydown=${this.#P}
+             @keyup=${this.#z}
+             contenteditable=${!!this.#C&&"plaintext-only"}
+             jslog=${s.textField("timeline.annotations.time-range-label-input").track({keydown:!0,click:!0})}
+            ></span>
+            <span class="duration">${t}</span>
+          </span>
+          `,this.#e,{host:this}),this.updateLabelPositioning()}};customElements.define("devtools-time-range-overlay",se);var re=Object.freeze({__proto__:null,TimeRangeLabelChangeEvent:ne,TimeRangeOverlay:se,TimeRangeRemoveEvent:oe}),ae={cssText:`.timespan-breakdown-overlay-section{border:solid;border-color:var(--sys-color-on-surface);border-width:4px 1px 0;align-content:flex-start;text-align:center;overflow:hidden;text-overflow:ellipsis;background-image:linear-gradient(180deg,var(--sys-color-on-primary),transparent);height:90%;box-sizing:border-box;padding-top:var(--sys-size-2);:host(.is-below) &{border-top-width:0;border-bottom-width:4px;align-content:flex-end;padding-bottom:var(--sys-size-2);padding-top:0;.timespan-breakdown-overlay-label{display:flex;flex-direction:column-reverse}}}:host{display:flex;overflow:hidden;flex-direction:row;justify-content:flex-end;align-items:flex-end;width:100%;box-sizing:border-box;height:100%;max-height:100px;.timespan-breakdown-overlay-section:first-child{border-left-width:1px!important}.timespan-breakdown-overlay-section:last-child{border-right-width:1px!important}}:host(.is-below){align-items:flex-start}:host(.odd-number-of-sections){.timespan-breakdown-overlay-section:nth-child(even){height:100%}.timespan-breakdown-overlay-section:nth-child(odd){border-left-width:0;border-right-width:0}}:host(.even-number-of-sections){.timespan-breakdown-overlay-section:nth-child(odd){height:100%}.timespan-breakdown-overlay-section:nth-child(even){border-left-width:0;border-right-width:0}}.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{font-size:var(--sys-typescale-body4-size);text-overflow:ellipsis;overflow:hidden;text-wrap:nowrap;display:block}.discovery-time-ms{font-weight:var(--ref-typeface-weight-bold)}&.labelHidden{user-select:none;pointer-events:none;visibility:hidden}&.labelTruncated{max-width:100%}&.offScreenLeft{text-align:left}&.offScreenRight{text-align:right}}\n/*# sourceURL=${import.meta.resolve("./timespanBreakdownOverlay.css")} */\n`};const le=new CSSStyleSheet;le.replaceSync(ae.cssText);const{html:ce}=i;let he=class extends HTMLElement{#e=this.attachShadow({mode:"open"});#p=null;#se=null;connectedCallback(){this.#e.adoptedStyleSheets=[le]}set isBelowEntry(e){this.classList.toggle("is-below",e)}set canvasRect(e){this.#p&&e&&this.#p.width===e.width&&this.#p.height===e.height||(this.#p=e,this.#v())}set sections(e){e!==this.#se&&(this.#se=e,this.#v())}checkSectionLabelPositioning(){const e=this.#e.querySelectorAll(".timespan-breakdown-overlay-section");if(!e)return;if(!this.#p)return;const t=new Map;for(const i of e){const e=i.querySelector(".timespan-breakdown-overlay-label");if(!e)continue;const n=i.getBoundingClientRect(),o=e.getBoundingClientRect();t.set(i,{sectionRect:n,labelRect:o,label:e})}for(const i of e){const e=t.get(i);if(!e)break;const{labelRect:n,sectionRect:o,label:s}=e,r=o.width<30,a=o.width-5<=n.width;if(s.classList.toggle("labelHidden",r),s.classList.toggle("labelTruncated",a),r||a)continue;const l=(o.width-n.width)/2,c=o.x+l<this.#p.x;s.classList.toggle("offScreenLeft",c);const h=this.#p.x+this.#p.width,d=o.x+l+n.width>h;if(s.classList.toggle("offScreenRight",d),c)s.style.marginLeft=`${Math.abs(this.#p.x-o.x)+9}px`;else if(d){const e=h-n.width-o.x;s.style.marginLeft=`${e}px`}else s.style.marginLeft=`${l}px`}}renderedSections(){return Array.from(this.#e.querySelectorAll(".timespan-breakdown-overlay-section"))}#re(t){return ce`
+      <div class="timespan-breakdown-overlay-section">
+        <div class="timespan-breakdown-overlay-label">
+        ${t.showDuration?ce`
+            <span class="duration-text">${e.TimeUtilities.formatMicroSecondsAsMillisFixed(t.bounds.range)}</span>
+          `:i.nothing}
+          <span class="section-label-text">
+            ${t.label}
+          </span>
+        </div>
+      </div>`}#v(){this.#se&&(this.classList.toggle("odd-number-of-sections",this.#se.length%2==1),this.classList.toggle("even-number-of-sections",this.#se.length%2==0)),i.render(ce`${this.#se?.map(this.#re)}`,this.#e,{host:this}),this.checkSectionLabelPositioning()}};customElements.define("devtools-timespan-breakdown-overlay",he);var de=Object.freeze({__proto__:null,TimespanBreakdownOverlay:he});export{A as EntriesLinkOverlay,Z as EntryLabelOverlay,re as TimeRangeOverlay,de as TimespanBreakdownOverlay};