@react-native/debugger-frontend/dist/third-party/front_end/panels/timeline/components/insights/insights.js

Debugger frontend for React Native based on Chrome DevTools

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){i