@react-native/debugger-frontend 0.83.0-rc.0 → 0.83.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BUILD_INFO +3 -3
- package/dist/third-party/front_end/core/host/host.js +1 -1
- package/dist/third-party/front_end/core/i18n/locales/en-US.json +1 -1
- package/dist/third-party/front_end/core/protocol_client/protocol_client.js +1 -1
- package/dist/third-party/front_end/core/rn_experiments/rn_experiments.js +1 -1
- package/dist/third-party/front_end/core/root/root.js +1 -1
- package/dist/third-party/front_end/core/sdk/sdk-meta.js +1 -1
- package/dist/third-party/front_end/core/sdk/sdk.js +1 -1
- package/dist/third-party/front_end/entrypoints/devtools_app/devtools_app.js +1 -1
- package/dist/third-party/front_end/entrypoints/inspector_main/inspector_main-meta.js +1 -1
- package/dist/third-party/front_end/entrypoints/js_app/js_app.js +1 -1
- package/dist/third-party/front_end/entrypoints/node_app/node_app.js +1 -1
- package/dist/third-party/front_end/entrypoints/rehydrated_devtools_app/rehydrated_devtools_app.js +1 -1
- package/dist/third-party/front_end/entrypoints/rn_fusebox/rn_fusebox.js +24 -1
- package/dist/third-party/front_end/entrypoints/rn_inspector/rn_inspector.js +1 -1
- package/dist/third-party/front_end/entrypoints/shell/shell.js +1 -1
- package/dist/third-party/front_end/entrypoints/worker_app/worker_app.js +1 -1
- package/dist/third-party/front_end/panels/network/network-meta.js +1 -1
- package/dist/third-party/front_end/panels/network/network.js +1 -1
- package/dist/third-party/front_end/panels/timeline/components/components.js +257 -209
- package/dist/third-party/front_end/panels/timeline/timeline.js +2 -2
- package/package.json +1 -1
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t from"../../../core/i18n/i18n.js";import*as i from"../../../models/trace/trace.js";import*as n from"../../../ui/components/helpers/helpers.js";import*as
|
|
2
|
-
<div class="breadcrumb" @contextmenu=${t=>this.#a(t,e)} @click=${()=>this.#
|
|
1
|
+
import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t from"../../../core/i18n/i18n.js";import*as i from"../../../models/trace/trace.js";import*as n from"../../../ui/components/helpers/helpers.js";import*as s from"../../../ui/legacy/legacy.js";import*as r from"../../../ui/lit/lit.js";import*as o from"../../../ui/visual_logging/visual_logging.js";import"../../../ui/components/menus/menus.js";import*as a from"../../../core/common/common.js";import*as l from"../../../core/sdk/sdk.js";import*as d from"../../../ui/components/buttons/buttons.js";import*as c from"../../mobile_throttling/mobile_throttling.js";import*as h from"../../../core/platform/platform.js";import"../../../ui/components/icon_button/icon_button.js";import*as g from"../../../models/crux-manager/crux-manager.js";import*as p from"../../../ui/components/render_coordinator/render_coordinator.js";import"../../../ui/components/dialogs/dialogs.js";import*as u from"../../../ui/components/input/input.js";import*as m from"../../../models/bindings/bindings.js";import*as v from"../../../models/trace/helpers/helpers.js";import*as b from"../../../ui/legacy/components/utils/utils.js";import*as f from"../utils/utils.js";import*as y from"./insights/insights.js";import*as w from"../../../ui/legacy/theme_support/theme_support.js";import*as S from"../../../core/root/root.js";import*as x from"../../../models/emulation/emulation.js";import*as k from"../../../models/live-metrics/live-metrics.js";import*as T from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";import"../../../ui/components/markdown_view/markdown_view.js";import*as C from"../../../third_party/marked/marked.js";import"../../../ui/components/request_link_icon/request_link_icon.js";import*as $ from"../../../ui/legacy/components/perf_ui/perf_ui.js";import*as P from"../../../core/host/host.js";function L(e){const t=[e];let i=e;for(;null!==i.child;){const e=i.child;null!==e&&(t.push(e),i=e)}return t}var R=Object.freeze({__proto__:null,Breadcrumbs:class{initialBreadcrumb;activeBreadcrumb;constructor(e){this.initialBreadcrumb={window:e,child:null};let t=this.initialBreadcrumb;for(;null!==t.child;)t=t.child;this.activeBreadcrumb=t}add(e){if(!this.isTraceWindowWithinTraceWindow(e,this.activeBreadcrumb.window))throw new Error("Can not add a breadcrumb that is equal to or is outside of the parent breadcrumb TimeWindow");const t={window:e,child:null};return this.activeBreadcrumb.child=t,this.setActiveBreadcrumb(t,{removeChildBreadcrumbs:!1,updateVisibleWindow:!0}),t}isTraceWindowWithinTraceWindow(e,t){return e.min>=t.min&&e.max<=t.max&&!(e.min===t.min&&e.max===t.max)}setInitialBreadcrumbFromLoadedModifications(e){this.initialBreadcrumb=e;let t=e;for(;null!==t.child;)t=t.child;this.setActiveBreadcrumb(t,{removeChildBreadcrumbs:!1,updateVisibleWindow:!0})}setActiveBreadcrumb(t,i){i.removeChildBreadcrumbs&&(t.child=null),this.activeBreadcrumb=t,e.TraceBounds.BoundsManager.instance().setMiniMapBounds(t.window),i.updateVisibleWindow&&e.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(t.window)}},flattenBreadcrumbs:L}),I={cssText:`.breadcrumbs{display:none;align-items:center;height:29px;padding:3px;overflow:scroll hidden}.breadcrumbs::-webkit-scrollbar{display:none}.breadcrumb{padding:2px 6px;border-radius:4px}.breadcrumb:hover{background-color:var(--sys-color-state-hover-on-subtle)}.range{font-size:12px;white-space:nowrap}.active-breadcrumb{font-weight:bold;color:var(--app-color-active-breadcrumb)}\n/*# sourceURL=${import.meta.resolve("./breadcrumbsUI.css")} */\n`};const M=new CSSStyleSheet;M.replaceSync(I.cssText);const{render:E,html:D}=r,H={activateBreadcrumb:"Activate breadcrumb",removeChildBreadcrumbs:"Remove child breadcrumbs"},F=t.i18n.registerUIStrings("panels/timeline/components/BreadcrumbsUI.ts",H),N=t.i18n.getLocalizedString.bind(void 0,F);class z extends Event{breadcrumb;childBreadcrumbsRemoved;static eventName="breadcrumbactivated";constructor(e,t){super(z.eventName),this.breadcrumb=e,this.childBreadcrumbsRemoved=t}}class O extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#i.bind(this);#n=null;#s=null;connectedCallback(){this.#e.adoptedStyleSheets=[M]}set data(e){this.#n=e.initialBreadcrumb,this.#s=e.activeBreadcrumb,n.ScheduledRender.scheduleRender(this,this.#t)}#r(e){this.#s=e,this.dispatchEvent(new z(e))}#o(){const e=this.#e.querySelector(".breadcrumbs");e&&(e.style.display="flex",requestAnimationFrame((()=>{e.scrollWidth-e.clientWidth>0&&requestAnimationFrame((()=>{e.scrollLeft=e.scrollWidth-e.clientWidth}))})))}#a(e,t){const i=new s.ContextMenu.ContextMenu(e);i.defaultSection().appendItem(N(H.activateBreadcrumb),(()=>{this.dispatchEvent(new z(t))})),i.defaultSection().appendItem(N(H.removeChildBreadcrumbs),(()=>{this.dispatchEvent(new z(t,!0))})),i.show()}#l(e,n){const s=i.Helpers.Timing.microToMilli(e.window.range);return D`
|
|
2
|
+
<div class="breadcrumb" @contextmenu=${t=>this.#a(t,e)} @click=${()=>this.#r(e)}
|
|
3
3
|
jslog=${o.item("timeline.breadcrumb-select").track({click:!0})}>
|
|
4
|
-
<span class="${e===this.#
|
|
5
|
-
${0===n?`Full range (${t.TimeUtilities.preciseMillisToString(
|
|
4
|
+
<span class="${e===this.#s?"active-breadcrumb":""} range">
|
|
5
|
+
${0===n?`Full range (${t.TimeUtilities.preciseMillisToString(s,2)})`:`${t.TimeUtilities.preciseMillisToString(s,2)}`}
|
|
6
6
|
</span>
|
|
7
7
|
</div>
|
|
8
8
|
${null!==e.child?D`
|
|
9
9
|
<devtools-icon .data=${{iconName:"chevron-right",color:"var(--icon-default)",width:"16px",height:"16px"}}>`:""}
|
|
10
10
|
`}#i(){const e=D`
|
|
11
|
-
${null===this.#n?
|
|
11
|
+
${null===this.#n?r.nothing:D`<div class="breadcrumbs" jslog=${o.section("breadcrumbs")}>
|
|
12
12
|
${L(this.#n).map(((e,t)=>this.#l(e,t)))}
|
|
13
13
|
</div>`}
|
|
14
|
-
`;E(e,this.#e,{host:this}),this.#n?.child&&this.#o()}}customElements.define("devtools-breadcrumbs-ui",O);var
|
|
15
|
-
title=${j(
|
|
14
|
+
`;E(e,this.#e,{host:this}),this.#n?.child&&this.#o()}}customElements.define("devtools-breadcrumbs-ui",O);var A=Object.freeze({__proto__:null,BreadcrumbActivatedEvent:z,BreadcrumbsUI:O}),_={cssText:`:host{display:flex;align-items:center;max-width:100%;height:20px}devtools-select-menu{min-width:160px;max-width:100%;height:20px}\n/*# sourceURL=${import.meta.resolve("./cpuThrottlingSelector.css")} */\n`};const U=new CSSStyleSheet;U.replaceSync(_.cssText);const{html:B}=r,V={cpu:"CPU: {PH1}",cpuThrottling:"CPU throttling: {PH1}",recommendedThrottling:"{PH1} – recommended",recommendedThrottlingReason:"Consider changing setting to simulate real user environments",calibrate:"Calibrate…",recalibrate:"Recalibrate…",labelCalibratedPresets:"Calibrated presets"},q=t.i18n.registerUIStrings("panels/timeline/components/CPUThrottlingSelector.ts",V),j=t.i18n.getLocalizedString.bind(void 0,q);class W extends HTMLElement{#e=this.attachShadow({mode:"open"});#d;#c=null;#h=[];#g;constructor(){super(),this.#d=l.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption(),this.#g=a.Settings.Settings.instance().createSetting("calibrated-cpu-throttling",{},"Global"),this.#p(),this.#i()}set recommendedOption(e){this.#c=e,n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[U],l.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener("RateChanged",this.#u,this),this.#g.addChangeListener(this.#m,this),this.#u()}disconnectedCallback(){this.#g.removeChangeListener(this.#m,this),l.CPUThrottlingManager.CPUThrottlingManager.instance().removeEventListener("RateChanged",this.#u,this)}#u(){this.#d=l.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption(),n.ScheduledRender.scheduleRender(this,this.#i)}#m(){this.#p(),n.ScheduledRender.scheduleRender(this,this.#i)}#v(e){let t;if("string"==typeof e.itemValue)"low-tier-mobile"===e.itemValue?t=l.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption:"mid-tier-mobile"===e.itemValue&&(t=l.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption);else{const i=Number(e.itemValue);t=c.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.find((e=>!e.calibratedDeviceType&&e.rate()===i))}t&&c.ThrottlingManager.throttlingManager().setCPUThrottlingOption(t)}#b(){a.Revealer.reveal(this.#g)}#p(){this.#h=[{name:"",items:c.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.filter((e=>!e.calibratedDeviceType))},{name:j(V.labelCalibratedPresets),items:c.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.filter((e=>e.calibratedDeviceType))}]}#i=()=>{let e;this.#c&&this.#d===l.CPUThrottlingManager.NoThrottlingOption&&(e=B`<devtools-button
|
|
15
|
+
title=${j(V.recommendedThrottlingReason)}
|
|
16
16
|
.iconName=${"info"}
|
|
17
17
|
.variant=${"icon"}
|
|
18
|
-
></devtools-button>`);const t=this.#d.title(),i=this.#g.get(),n=i.low||i.mid,
|
|
18
|
+
></devtools-button>`);const t=this.#d.title(),i=this.#g.get(),n=i.low||i.mid,s=j(n?V.recalibrate:V.calibrate),a=B`
|
|
19
19
|
<devtools-select-menu
|
|
20
20
|
@selectmenuselected=${this.#v}
|
|
21
21
|
.showDivider=${!0}
|
|
@@ -23,12 +23,12 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
23
23
|
.sideButton=${!1}
|
|
24
24
|
.showSelectedItem=${!0}
|
|
25
25
|
.jslogContext=${"cpu-throttling"}
|
|
26
|
-
.buttonTitle=${j(
|
|
27
|
-
.title=${j(
|
|
26
|
+
.buttonTitle=${j(V.cpu,{PH1:t})}
|
|
27
|
+
.title=${j(V.cpuThrottling,{PH1:t})}
|
|
28
28
|
>
|
|
29
29
|
${this.#h.map((e=>B`
|
|
30
30
|
<devtools-menu-group .name=${e.name} .title=${e.name}>
|
|
31
|
-
${e.items.map((e=>{const t=e===this.#c?j(
|
|
31
|
+
${e.items.map((e=>{const t=e===this.#c?j(V.recommendedThrottling,{PH1:e.title()}):e.title(),i=e.rate();return B`
|
|
32
32
|
<devtools-menu-item
|
|
33
33
|
.value=${e.calibratedDeviceType??i}
|
|
34
34
|
.selected=${this.#d===e}
|
|
@@ -41,22 +41,22 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
41
41
|
`}))}
|
|
42
42
|
${"Calibrated presets"===e.name?B`<devtools-menu-item
|
|
43
43
|
.value=${-1}
|
|
44
|
-
.title=${
|
|
44
|
+
.title=${s}
|
|
45
45
|
jslog=${o.action("cpu-throttling-selector-calibrate").track({click:!0})}
|
|
46
46
|
@click=${this.#b}
|
|
47
47
|
>
|
|
48
|
-
${
|
|
49
|
-
</devtools-menu-item>`:
|
|
48
|
+
${s}
|
|
49
|
+
</devtools-menu-item>`:r.nothing}
|
|
50
50
|
</devtools-menu-group>`))}
|
|
51
51
|
</devtools-select-menu>
|
|
52
52
|
${e}
|
|
53
|
-
`;
|
|
53
|
+
`;r.render(a,this.#e,{host:this})}}customElements.define("devtools-cpu-throttling-selector",W);var K=Object.freeze({__proto__:null,CPUThrottlingSelector:W});const G={forcedReflow:"Forced reflow",sIsALikelyPerformanceBottleneck:"{PH1} is a likely performance bottleneck.",idleCallbackExecutionExtended:"Idle callback execution extended beyond deadline by {PH1}",sTookS:"{PH1} took {PH2}.",longTask:"Long task",longInteractionINP:"Long interaction",sIsLikelyPoorPageResponsiveness:"{PH1} is indicating poor page responsiveness.",websocketProtocol:"WebSocket protocol",webSocketBytes:"{PH1} byte(s)",webSocketDataLength:"Data length"},Y=t.i18n.registerUIStrings("panels/timeline/components/DetailsView.ts",G),X=t.i18n.getLocalizedString.bind(void 0,Y);var J=Object.freeze({__proto__:null,buildRowsForWebSocketEvent:function(e,n){const s=[],r=n.Initiators.eventToInitiator.get(e);return r&&i.Types.Events.isWebSocketCreate(r)?(s.push({key:t.i18n.lockedString("URL"),value:r.args.data.url}),r.args.data.websocketProtocol&&s.push({key:X(G.websocketProtocol),value:r.args.data.websocketProtocol})):i.Types.Events.isWebSocketCreate(e)&&(s.push({key:t.i18n.lockedString("URL"),value:e.args.data.url}),e.args.data.websocketProtocol&&s.push({key:X(G.websocketProtocol),value:e.args.data.websocketProtocol})),i.Types.Events.isWebSocketTransfer(e)&&e.args.data.dataLength&&s.push({key:X(G.webSocketDataLength),value:`${X(G.webSocketBytes,{PH1:e.args.data.dataLength})}`}),s},buildWarningElementsForEvent:function(e,n){const r=n.Warnings.perEvent.get(e),o=[];if(!r)return o;for(const n of r){const r=i.Helpers.Timing.microToMilli(i.Types.Timing.Micro(e.dur||0)),a=document.createElement("span");switch(n){case"FORCED_REFLOW":{const e=s.XLink.XLink.create("https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts",X(G.forcedReflow),void 0,void 0,"forced-reflow");a.appendChild(t.i18n.getFormatLocalizedString(Y,G.sIsALikelyPerformanceBottleneck,{PH1:e}));break}case"IDLE_CALLBACK_OVER_TIME":{if(!i.Types.Events.isFireIdleCallback(e))break;const n=t.TimeUtilities.millisToString((r||0)-e.args.data.allottedMilliseconds,!0);a.textContent=X(G.idleCallbackExecutionExtended,{PH1:n});break}case"LONG_TASK":{const e=s.XLink.XLink.create("https://web.dev/optimize-long-tasks/",X(G.longTask),void 0,void 0,"long-tasks");a.appendChild(t.i18n.getFormatLocalizedString(Y,G.sTookS,{PH1:e,PH2:t.TimeUtilities.millisToString(r||0,!0)}));break}case"LONG_INTERACTION":{const e=s.XLink.XLink.create("https://web.dev/inp",X(G.longInteractionINP),void 0,void 0,"long-interaction");a.appendChild(t.i18n.getFormatLocalizedString(Y,G.sIsLikelyPoorPageResponsiveness,{PH1:e}));break}default:h.assertNever(n,`Unhandled warning type ${n}`)}o.push(a)}return o},generateInvalidationsList:function(e){const t={},n=new Set;for(const s of e){n.add(s.args.data.nodeId);let e=s.args.data.reason||"unknown";if("unknown"===e&&i.Types.Events.isScheduleStyleInvalidationTracking(s)&&s.args.data.invalidatedSelectorId)switch(s.args.data.invalidatedSelectorId){case"attribute":e="Attribute",s.args.data.changedAttribute&&(e+=` (${s.args.data.changedAttribute})`);break;case"class":e="Class",s.args.data.changedClass&&(e+=` (${s.args.data.changedClass})`);break;case"id":e="Id",s.args.data.changedId&&(e+=` (${s.args.data.changedId})`)}if("PseudoClass"===e&&i.Types.Events.isStyleRecalcInvalidationTracking(s)&&s.args.data.extraData&&(e+=s.args.data.extraData),"Attribute"===e&&i.Types.Events.isStyleRecalcInvalidationTracking(s)&&s.args.data.extraData&&(e+=` (${s.args.data.extraData})`),"StyleInvalidator"===e)continue;const r=t[e]||[];r.push(s),t[e]=r}return{groupedByReason:t,backendNodeIds:n}}}),Z={cssText:`.list{max-height:200px}.list-item:has(.origin-mapping-row.header){position:sticky;top:0;z-index:1;background-color:var(--sys-color-cdt-base-container)}.origin-mapping-row{display:flex;flex-direction:row;width:100%;height:30px}.origin-mapping-row.header{font-weight:var(--ref-typeface-weight-medium);border-bottom:1px solid var(--sys-color-divider)}.origin-mapping-cell{flex:1;display:flex;align-items:center;padding:4px;border-right:1px solid var(--sys-color-divider)}.origin-warning-icon{width:16px;height:16px;margin-right:4px;color:var(--icon-warning)}.origin{text-overflow:ellipsis;overflow-x:hidden}.origin-mapping-cell:last-child{border:none}.origin-mapping-editor{display:flex;flex-direction:row;width:100%;padding:12px 8px;gap:12px}.origin-mapping-editor label{flex:1;font-weight:var(--ref-typeface-weight-medium)}.origin-mapping-editor input{margin-top:4px;width:100%}\n/*# sourceURL=${import.meta.resolve("./originMap.css")} */\n`};const{html:Q}=r,ee={developmentOrigin:"Development origin",productionOrigin:"Production origin",invalidOrigin:'"{PH1}" is not a valid origin or URL.',alreadyMapped:'"{PH1}" is already mapped to a production origin.',pageHasNoData:"The Chrome UX Report does not have sufficient real user data for this page."},te=t.i18n.registerUIStrings("panels/timeline/components/OriginMap.ts",ee),ie=t.i18n.getLocalizedString.bind(void 0,te),ne="developmentOrigin",se="productionOrigin";class re extends s.Widget.WidgetElement{#f;#y;constructor(){super(),this.#f=new s.ListWidget.ListWidget(this,!1,!0),g.CrUXManager.instance().getConfigSetting().addChangeListener(this.#w,this),this.#w()}createWidget(){const e=new s.Widget.Widget(!1,!1,this);return this.#f.registerRequiredCSS(Z),this.#f.show(e.contentElement),e}#S(){return g.CrUXManager.instance().getConfigSetting().get().originMappings||[]}#x(e){const t=g.CrUXManager.instance().getConfigSetting(),i={...t.get()};i.originMappings=e,t.set(i)}#w(){const e=this.#S();this.#f.clear(),this.#f.appendItem({developmentOrigin:ie(ee.developmentOrigin),productionOrigin:ie(ee.productionOrigin),isTitleRow:!0},!1);for(const t of e)this.#f.appendItem(t,!0)}#k(e){try{return new URL(e).origin}catch{return null}}#T(e){return p.write((async()=>{if(!g.CrUXManager.instance().isEnabled())return r.nothing;const t=g.CrUXManager.instance(),i=await t.getFieldDataForPage(e);return Object.entries(i).some((([e,t])=>"warnings"!==e&&Boolean(t)))?r.nothing:Q`
|
|
54
54
|
<devtools-icon
|
|
55
55
|
class="origin-warning-icon"
|
|
56
56
|
name="warning-filled"
|
|
57
57
|
title=${ie(ee.pageHasNoData)}
|
|
58
58
|
></devtools-icon>
|
|
59
|
-
`}))}startCreation(){const e=l.TargetManager.TargetManager.instance().inspectedURL(),t=this.#k(e)||"";this.#
|
|
59
|
+
`}))}startCreation(){const e=l.TargetManager.TargetManager.instance().inspectedURL(),t=this.#k(e)||"";this.#f.addNewItem(-1,{developmentOrigin:t,productionOrigin:""})}renderItem(e){const t=document.createElement("div");let i,n;return t.classList.add("origin-mapping-row"),t.role="row",e.isTitleRow?(t.classList.add("header"),i="columnheader",n=r.nothing):(i="cell",n=r.Directives.until(this.#T(e.productionOrigin))),r.render(Q`
|
|
60
60
|
<div class="origin-mapping-cell development-origin" role=${i}>
|
|
61
61
|
<div class="origin" title=${e.developmentOrigin}>${e.developmentOrigin}</div>
|
|
62
62
|
</div>
|
|
@@ -64,7 +64,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
64
64
|
${n}
|
|
65
65
|
<div class="origin" title=${e.productionOrigin}>${e.productionOrigin}</div>
|
|
66
66
|
</div>
|
|
67
|
-
`,t,{host:this}),t}removeItemRequested(e,t){const i=this.#S();i.splice(t-1,1),this.#x(i)}commitEdit(e,t,i){e.developmentOrigin=this.#k(t.control(ne).value)||"",e.productionOrigin=this.#k(t.control(
|
|
67
|
+
`,t,{host:this}),t}removeItemRequested(e,t){const i=this.#S();i.splice(t-1,1),this.#x(i)}commitEdit(e,t,i){e.developmentOrigin=this.#k(t.control(ne).value)||"",e.productionOrigin=this.#k(t.control(se).value)||"";const n=this.#S();i&&n.push(e),this.#x(n)}beginEdit(e){const t=this.#C();return t.control(ne).value=e.developmentOrigin,t.control(se).value=e.productionOrigin,t}#$(e,t,i){const n=this.#k(i.value);if(!n)return{valid:!1,errorMessage:ie(ee.invalidOrigin,{PH1:i.value})};const s=this.#S();for(let e=0;e<s.length;++e){if(e===t-1)continue;if(s[e].developmentOrigin===n)return{valid:!0,errorMessage:ie(ee.alreadyMapped,{PH1:n})}}return{valid:!0}}#P(e,t,i){return this.#k(i.value)?{valid:!0}:{valid:!1,errorMessage:ie(ee.invalidOrigin,{PH1:i.value})}}#C(){if(this.#y)return this.#y;const e=new s.ListWidget.Editor;this.#y=e;const t=e.contentElement().createChild("div","origin-mapping-editor"),i=e.createInput(ne,"text",ie(ee.developmentOrigin),this.#$.bind(this)),n=e.createInput(se,"text",ie(ee.productionOrigin),this.#P.bind(this));return r.render(Q`
|
|
68
68
|
<label class="development-origin-input">
|
|
69
69
|
${ie(ee.developmentOrigin)}
|
|
70
70
|
${i}
|
|
@@ -73,17 +73,17 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
73
73
|
${ie(ee.productionOrigin)}
|
|
74
74
|
${n}
|
|
75
75
|
</label>
|
|
76
|
-
`,t,{host:this}),e}}customElements.define("devtools-origin-map",
|
|
76
|
+
`,t,{host:this}),e}}customElements.define("devtools-origin-map",re);var oe=Object.freeze({__proto__:null,OriginMap:re}),ae={cssText:`:host{display:block}:host *{box-sizing:border-box}devtools-dialog{--override-transparent:color-mix(in srgb,var(--color-background) 80%,transparent)}.section-title{font-size:var(--sys-typescale-headline5-size);line-height:var(--sys-typescale-headline5-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0}.privacy-disclosure{margin:8px 0}.url-override{margin:8px 0;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;max-width:max-content}details > summary{font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-medium)}.content{max-width:360px;box-sizing:border-box}.open-button-section{display:flex;flex-direction:row}.origin-mapping-grid{border:1px solid var(--sys-color-divider);margin-top:8px}.origin-mapping-description{margin-bottom:8px}.origin-mapping-button-section{display:flex;flex-direction:column;align-items:center;margin-top:var(--sys-size-6)}.config-button{margin-left:auto}.advanced-section-contents{margin:4px 0 14px}.buttons-section{display:flex;justify-content:space-between;margin-top:var(--sys-size-6);margin-bottom:var(--sys-size-2);devtools-button.enable{float:right}}input[type="checkbox"]{height:12px;width:12px;min-height:12px;min-width:12px;margin:6px}input[type="text"][disabled]{color:var(--sys-color-state-disabled)}.warning{margin:2px 8px;color:var(--color-error-text)}x-link{color:var(--sys-color-primary);text-decoration-line:underline}.divider{margin:10px 0;border:none;border-top:1px solid var(--sys-color-divider)}\n/*# sourceURL=${import.meta.resolve("./fieldSettingsDialog.css")} */\n`};const le=new CSSStyleSheet;le.replaceSync(ae.cssText);const de={setUp:"Set up",configure:"Configure",ok:"Ok",optOut:"Opt out",cancel:"Cancel",onlyFetchFieldData:"Always show field data for the below URL",url:"URL",doesNotHaveSufficientData:"The Chrome UX Report does not have sufficient real-world speed data for this page.",configureFieldData:"Configure field data fetching",fetchAggregated:"Fetch aggregated field data from the {PH1} to help you contextualize local measurements with what real users experience on the site.",privacyDisclosure:"Privacy disclosure",whenPerformanceIsShown:"When DevTools is open, the URLs you visit will be sent to Google to query field data. These requests are not tied to your Google account.",advanced:"Advanced",mapDevelopmentOrigins:"Set a development origin to automatically get relevant field data for its production origin.",new:"New",invalidOrigin:'"{PH1}" is not a valid origin or URL.'},ce=t.i18n.registerUIStrings("panels/timeline/components/FieldSettingsDialog.ts",de),he=t.i18n.getLocalizedString.bind(void 0,ce),{html:ge,nothing:pe,Directives:{ifDefined:ue}}=r;class me extends Event{static eventName="showdialog";constructor(){super(me.eventName)}}class ve extends HTMLElement{#e=this.attachShadow({mode:"open"});#L;#R=g.CrUXManager.instance().getConfigSetting();#I="";#M=!1;#E="";#D;constructor(){super();const e=g.CrUXManager.instance();this.#R=e.getConfigSetting(),this.#H(),this.#i()}#H(){const e=this.#R.get();this.#I=e.override||"",this.#M=e.overrideEnabled||!1,this.#E=""}#F(e){const t=this.#R.get();this.#R.set({...t,enabled:e,override:this.#I,overrideEnabled:this.#M})}#N(){n.ScheduledRender.scheduleRender(this,this.#i)}async#z(e){const t=g.CrUXManager.instance(),i=await t.getFieldDataForPage(e);return Object.entries(i).some((([e,t])=>"warnings"!==e&&Boolean(t)))}async#O(e){if(e&&this.#M){if(!this.#k(this.#I))return this.#E=he(de.invalidOrigin,{PH1:this.#I}),void n.ScheduledRender.scheduleRender(this,this.#i);if(!await this.#z(this.#I))return this.#E=he(de.doesNotHaveSufficientData),void n.ScheduledRender.scheduleRender(this,this.#i)}this.#F(e),this.#A()}#_(){if(!this.#L)throw new Error("Dialog not found");this.#H(),this.#L.setDialogVisible(!0),n.ScheduledRender.scheduleRender(this,this.#i),this.dispatchEvent(new me)}#A(e){if(!this.#L)throw new Error("Dialog not found");this.#L.setDialogVisible(!1),e&&e.stopImmediatePropagation(),n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[le,u.textInputStyles,u.checkboxStyles],this.#R.addChangeListener(this.#N,this),n.ScheduledRender.scheduleRender(this,this.#i)}disconnectedCallback(){this.#R.removeChangeListener(this.#N,this)}#U(){return this.#R.get().enabled?ge`
|
|
77
77
|
<devtools-button
|
|
78
78
|
class="config-button"
|
|
79
|
-
@click=${this.#
|
|
79
|
+
@click=${this.#_}
|
|
80
80
|
.data=${{variant:"outlined",title:he(de.configure)}}
|
|
81
81
|
jslog=${o.action("timeline.field-data.configure").track({click:!0})}
|
|
82
82
|
>${he(de.configure)}</devtools-button>
|
|
83
83
|
`:ge`
|
|
84
84
|
<devtools-button
|
|
85
85
|
class="setup-button"
|
|
86
|
-
@click=${this.#
|
|
86
|
+
@click=${this.#_}
|
|
87
87
|
.data=${{variant:"primary",title:he(de.setUp)}}
|
|
88
88
|
jslog=${o.action("timeline.field-data.setup").track({click:!0})}
|
|
89
89
|
data-field-data-setup
|
|
@@ -96,14 +96,14 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
96
96
|
jslog=${o.action("timeline.field-data.enable").track({click:!0})}
|
|
97
97
|
data-field-data-enable
|
|
98
98
|
>${he(de.ok)}</devtools-button>
|
|
99
|
-
`}#
|
|
99
|
+
`}#V(){const e=this.#R.get().enabled?he(de.optOut):he(de.cancel);return ge`
|
|
100
100
|
<devtools-button
|
|
101
101
|
@click=${()=>{this.#O(!1)}}
|
|
102
102
|
.data=${{variant:"outlined",title:e}}
|
|
103
103
|
jslog=${o.action("timeline.field-data.disable").track({click:!0})}
|
|
104
104
|
data-field-data-disable
|
|
105
105
|
>${e}</devtools-button>
|
|
106
|
-
`}#
|
|
106
|
+
`}#q(e){e.stopPropagation();const t=e.target;this.#I=t.value,this.#E="",n.ScheduledRender.scheduleRender(this,this.#i)}#j(e){e.stopPropagation();const t=e.target;this.#M=t.checked,this.#E="",n.ScheduledRender.scheduleRender(this,this.#i)}#k(e){try{return new URL(e).origin}catch{return null}}#W(){return ge`
|
|
107
107
|
<div class="origin-mapping-description">${he(de.mapDevelopmentOrigins)}</div>
|
|
108
108
|
<devtools-origin-map
|
|
109
109
|
on-render=${n.Directives.nodeRenderedCallback((e=>{this.#D=e}))}
|
|
@@ -115,10 +115,10 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
115
115
|
jslogContext=${"new-origin-mapping"}
|
|
116
116
|
>${he(de.new)}</devtools-button>
|
|
117
117
|
</div>
|
|
118
|
-
`}#i=()=>{const e=
|
|
118
|
+
`}#i=()=>{const e=s.XLink.XLink.create("https://developer.chrome.com/docs/crux",t.i18n.lockedString("Chrome UX Report")),i=t.i18n.getFormatLocalizedString(ce,de.fetchAggregated,{PH1:e}),a=ge`
|
|
119
119
|
<div class="open-button-section">${this.#U()}</div>
|
|
120
120
|
<devtools-dialog
|
|
121
|
-
@clickoutsidedialog=${this.#
|
|
121
|
+
@clickoutsidedialog=${this.#A}
|
|
122
122
|
.position=${"auto"}
|
|
123
123
|
.horizontalAlignment=${"center"}
|
|
124
124
|
.jslogContext=${"timeline.field-data.settings"}
|
|
@@ -139,7 +139,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
139
139
|
<label class="url-override">
|
|
140
140
|
<input
|
|
141
141
|
type="checkbox"
|
|
142
|
-
.checked=${this.#
|
|
142
|
+
.checked=${this.#M}
|
|
143
143
|
@change=${this.#j}
|
|
144
144
|
aria-label=${he(de.onlyFetchFieldData)}
|
|
145
145
|
jslog=${o.toggle().track({click:!0}).context("field-url-override-enabled")}
|
|
@@ -148,25 +148,25 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
148
148
|
</label>
|
|
149
149
|
<input
|
|
150
150
|
type="text"
|
|
151
|
-
@keyup=${this.#
|
|
152
|
-
@change=${this.#
|
|
151
|
+
@keyup=${this.#q}
|
|
152
|
+
@change=${this.#q}
|
|
153
153
|
class="devtools-text-input"
|
|
154
|
-
.disabled=${!this.#
|
|
155
|
-
.value=${this.#
|
|
156
|
-
placeholder=${
|
|
154
|
+
.disabled=${!this.#M}
|
|
155
|
+
.value=${this.#I}
|
|
156
|
+
placeholder=${ue(this.#M?he(de.url):void 0)}
|
|
157
157
|
/>
|
|
158
|
-
${this.#E?ge`<div class="warning" role="alert" aria-label=${this.#E}>${this.#E}</div>`:
|
|
158
|
+
${this.#E?ge`<div class="warning" role="alert" aria-label=${this.#E}>${this.#E}</div>`:pe}
|
|
159
159
|
</div>
|
|
160
160
|
</details>
|
|
161
161
|
<div class="buttons-section">
|
|
162
|
-
${this.#
|
|
162
|
+
${this.#V()}
|
|
163
163
|
${this.#B()}
|
|
164
164
|
</div>
|
|
165
165
|
</div>
|
|
166
166
|
</devtools-dialog>
|
|
167
|
-
`;
|
|
167
|
+
`;r.render(a,this.#e,{host:this})}}customElements.define("devtools-field-settings-dialog",ve);var be=Object.freeze({__proto__:null,FieldSettingsDialog:ve,ShowDialog:me}),fe={cssText:`.ignore-list-setting-content{max-width:var(--sys-size-30)}.ignore-list-setting-description{margin-bottom:5px}.regex-row{display:flex;dt-checkbox{flex:auto}devtools-button{height:24px}&:not(:hover) devtools-button{display:none}}.new-regex-row{display:flex;.new-regex-text-input{flex:auto}.harmony-input[type="text"]{border:1px solid var(--sys-color-neutral-outline);border-radius:4px;outline:none;&.error-input,\n &:invalid{border-color:var(--sys-color-error)}&:not(.error-input, :invalid):focus{border-color:var(--sys-color-state-focus-ring)}&:not(.error-input, :invalid):hover:not(:focus){background:var(--sys-color-state-hover-on-subtle)}}}\n/*# sourceURL=${import.meta.resolve("./ignoreListSetting.css")} */\n`};const ye=new CSSStyleSheet;ye.replaceSync(fe.cssText);const{html:we}=r,Se={showIgnoreListSettingDialog:"Show ignore list setting dialog",ignoreList:"Ignore list",ignoreListDescription:"Add regular expression rules to remove matching scripts from the flame chart.",ignoreScriptsWhoseNamesMatchS:"Ignore scripts whose names match ''{regex}''",removeRegex:"Remove the regex: ''{regex}''",addNewRegex:"Add a regular expression rule for the script's URL",ignoreScriptsWhoseNamesMatchNewRegex:"Ignore scripts whose names match the new regex"},xe=t.i18n.registerUIStrings("panels/timeline/components/IgnoreListSetting.ts",Se),ke=t.i18n.getLocalizedString.bind(void 0,xe);class Te extends HTMLElement{#e=this.attachShadow({mode:"open"});#K=this.#i.bind(this);#G=a.Settings.Settings.instance().moduleSetting("enable-ignore-listing");#Y=this.#X().getAsArray();#J=s.UIUtils.CheckboxLabel.create(void 0,!1,void 0,"timeline.ignore-list-new-regex.checkbox");#Z=s.UIUtils.createInput("new-regex-text-input","text","timeline.ignore-list-new-regex.text");#Q=null;constructor(){super(),this.#ee(),a.Settings.Settings.instance().moduleSetting("skip-stack-frames-pattern").addChangeListener(this.#te.bind(this)),a.Settings.Settings.instance().moduleSetting("enable-ignore-listing").addChangeListener(this.#te.bind(this))}connectedCallback(){this.#e.adoptedStyleSheets=[ye],this.#te(),this.addEventListener("contextmenu",(e=>{e.stopPropagation()}))}#te(){n.ScheduledRender.scheduleRender(this,this.#K)}#X(){return a.Settings.Settings.instance().moduleSetting("skip-stack-frames-pattern")}#ie(){this.#Q={pattern:this.#Z.value,disabled:!1,disabledForUrl:void 0},this.#Y.push(this.#Q)}#ne(){if(!this.#Q)return;const e=this.#Y.pop();e&&e!==this.#Q&&(console.warn("The last regex is not the editing one."),this.#Y.push(e)),this.#Q=null,this.#X().setAsArray(this.#Y)}#se(){this.#J.checkboxElement.checked=!1,this.#Z.value=""}#re(){const e=this.#Z.value.trim();this.#ne(),Ce(e)&&(m.IgnoreListManager.IgnoreListManager.instance().addRegexToIgnoreList(e),this.#se())}#oe(e){if(e.key===h.KeyboardUtilities.ENTER_KEY)return this.#re(),void this.#ie();e.key===h.KeyboardUtilities.ESCAPE_KEY&&(e.stopImmediatePropagation(),this.#ne(),this.#se(),this.#Z.blur())}#ae(){if(this.#Q){const e=this.#Y[this.#Y.length-1];if(e&&e===this.#Q)return this.#Y.slice(0,-1)}return this.#Y}#le(){const e=this.#Z.value.trim();this.#Q&&Ce(e)&&(this.#Q.pattern=e,this.#Q.disabled=!Boolean(e),this.#X().setAsArray(this.#Y))}#ee(){this.#Z.placeholder="/framework\\.js$";const e=ke(Se.ignoreScriptsWhoseNamesMatchNewRegex),t=ke(Se.addNewRegex);s.Tooltip.Tooltip.install(this.#J,e),s.Tooltip.Tooltip.install(this.#Z,t),this.#Z.addEventListener("blur",this.#re.bind(this),!1),this.#Z.addEventListener("keydown",this.#oe.bind(this),!1),this.#Z.addEventListener("input",this.#le.bind(this),!1),this.#Z.addEventListener("focus",this.#ie.bind(this),!1)}#de(){return we`
|
|
168
168
|
<div class='new-regex-row'>${this.#J}${this.#Z}</div>
|
|
169
|
-
`}#ce(e,t){e.disabled=!t.checkboxElement.checked,this.#X().setAsArray(this.#Y)}#he(e){this.#Y.splice(e,1),this.#X().setAsArray(this.#Y)}#ge(e,t){const i=
|
|
169
|
+
`}#ce(e,t){e.disabled=!t.checkboxElement.checked,this.#X().setAsArray(this.#Y)}#he(e){this.#Y.splice(e,1),this.#X().setAsArray(this.#Y)}#ge(e,t){const i=s.UIUtils.CheckboxLabel.createWithStringLiteral(e.pattern,!e.disabled,void 0,"timeline.ignore-list-pattern"),n=ke(Se.ignoreScriptsWhoseNamesMatchS,{regex:e.pattern});return s.Tooltip.Tooltip.install(i,n),i.checkboxElement.ariaLabel=n,i.checkboxElement.addEventListener("change",this.#ce.bind(this,e,i),!1),we`
|
|
170
170
|
<div class='regex-row'>
|
|
171
171
|
${i}
|
|
172
172
|
<devtools-button
|
|
@@ -181,65 +181,65 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
181
181
|
${this.#de()}
|
|
182
182
|
</div>
|
|
183
183
|
</devtools-button-dialog>
|
|
184
|
-
`;
|
|
185
|
-
<li data-entry="input-delay">${Ee(
|
|
186
|
-
<li data-entry="processing-duration">${Ee(
|
|
187
|
-
<li data-entry="presentation-delay">${Ee(
|
|
184
|
+
`;r.render(e,this.#e,{host:this})}}function Ce(e){const t=e.trim();if(!t.length)return!1;let i;try{i=new RegExp(t)}catch{}return Boolean(i)}customElements.define("devtools-perf-ignore-list-setting",Te);var $e=Object.freeze({__proto__:null,IgnoreListSetting:Te,regexInputIsValid:Ce}),Pe={cssText:`:host{display:block}.breakdown{margin:0;padding:0;list-style:none;color:var(--sys-color-token-subtle)}.value{display:inline-block;padding:0 5px;color:var(--sys-color-on-surface)}\n/*# sourceURL=${import.meta.resolve("./interactionBreakdown.css")} */\n`};const Le=new CSSStyleSheet;Le.replaceSync(Pe.cssText);const{html:Re}=r,Ie={inputDelay:"Input delay",processingDuration:"Processing duration",presentationDelay:"Presentation delay"},Me=t.i18n.registerUIStrings("panels/timeline/components/InteractionBreakdown.ts",Ie),Ee=t.i18n.getLocalizedString.bind(void 0,Me);class De extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#i.bind(this);#pe=null;connectedCallback(){this.#e.adoptedStyleSheets=[Le]}set entry(e){e!==this.#pe&&(this.#pe=e,n.ScheduledRender.scheduleRender(this,this.#t))}#i(){if(!this.#pe)return;const e=t.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#pe.inputDelay),i=t.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#pe.mainThreadHandling),n=t.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#pe.presentationDelay);r.render(Re`<ul class="breakdown">
|
|
185
|
+
<li data-entry="input-delay">${Ee(Ie.inputDelay)}<span class="value">${e}</span></li>
|
|
186
|
+
<li data-entry="processing-duration">${Ee(Ie.processingDuration)}<span class="value">${i}</span></li>
|
|
187
|
+
<li data-entry="presentation-delay">${Ee(Ie.presentationDelay)}<span class="value">${n}</span></li>
|
|
188
188
|
</ul>
|
|
189
|
-
`,this.#e,{host:this})}}customElements.define("devtools-interaction-breakdown",De);var He=Object.freeze({__proto__:null,InteractionBreakdown:De}),Fe={cssText:`.layout-shift-details-title,\n.cluster-details-title{padding-bottom:var(--sys-size-5);display:flex;align-items:center;.layout-shift-event-title,\n .cluster-event-title{background-color:var(--app-color-rendering);width:var(--sys-size-6);height:var(--sys-size-6);border:var(--sys-size-1) solid var(--sys-color-divider);display:inline-block;margin-right:var(--sys-size-3)}}.layout-shift-details-table{font:var(--sys-typescale-body4-regular);margin-bottom:var(--sys-size-4);text-align:left;border-block:var(--sys-size-1) solid var(--sys-color-divider);border-collapse:collapse;font-variant-numeric:tabular-nums;th,\n td{padding-right:var(--sys-size-4);min-width:var(--sys-size-20);max-width:var(--sys-size-28)}}.table-title{th{font:var(--sys-typescale-body4-medium)}tr{border-bottom:var(--sys-size-1) solid var(--sys-color-divider)}}.timeline-link{cursor:pointer;text-decoration:underline;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)}.details-row{display:flex;min-height:var(--sys-size-9)}.title{color:var(--sys-color-token-subtle);overflow:hidden;padding-right:var(--sys-size-5);display:inline-block;vertical-align:top}.culprit{display:inline-flex;flex-direction:row;gap:var(--sys-size-3)}.value{display:inline-block;user-select:text;text-overflow:ellipsis;overflow:hidden;padding:0 var(--sys-size-3)}.layout-shift-summary-details,\n.layout-shift-cluster-summary-details{font:var(--sys-typescale-body4-regular);display:flex;flex-direction:column;column-gap:var(--sys-size-4);padding:var(--sys-size-6) var(--sys-size-6) 0 var(--sys-size-6)}.culprits{display:flex;flex-direction:column}.shift-row:not(:last-child){border-bottom:var(--sys-size-1) solid var(--sys-color-divider)}.total-row{font:var(--sys-typescale-body4-medium)}\n/*# sourceURL=${import.meta.resolve("./layoutShiftDetails.css")} */\n`};const Ne=new CSSStyleSheet;Ne.replaceSync(Fe.cssText);const ze=new CSSStyleSheet;ze.replaceSync(d.textButtonStyles.cssText);const{html:Oe}=
|
|
189
|
+
`,this.#e,{host:this})}}customElements.define("devtools-interaction-breakdown",De);var He=Object.freeze({__proto__:null,InteractionBreakdown:De}),Fe={cssText:`.layout-shift-details-title,\n.cluster-details-title{padding-bottom:var(--sys-size-5);display:flex;align-items:center;.layout-shift-event-title,\n .cluster-event-title{background-color:var(--app-color-rendering);width:var(--sys-size-6);height:var(--sys-size-6);border:var(--sys-size-1) solid var(--sys-color-divider);display:inline-block;margin-right:var(--sys-size-3)}}.layout-shift-details-table{font:var(--sys-typescale-body4-regular);margin-bottom:var(--sys-size-4);text-align:left;border-block:var(--sys-size-1) solid var(--sys-color-divider);border-collapse:collapse;font-variant-numeric:tabular-nums;th,\n td{padding-right:var(--sys-size-4);min-width:var(--sys-size-20);max-width:var(--sys-size-28)}}.table-title{th{font:var(--sys-typescale-body4-medium)}tr{border-bottom:var(--sys-size-1) solid var(--sys-color-divider)}}.timeline-link{cursor:pointer;text-decoration:underline;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)}.details-row{display:flex;min-height:var(--sys-size-9)}.title{color:var(--sys-color-token-subtle);overflow:hidden;padding-right:var(--sys-size-5);display:inline-block;vertical-align:top}.culprit{display:inline-flex;flex-direction:row;gap:var(--sys-size-3)}.value{display:inline-block;user-select:text;text-overflow:ellipsis;overflow:hidden;padding:0 var(--sys-size-3)}.layout-shift-summary-details,\n.layout-shift-cluster-summary-details{font:var(--sys-typescale-body4-regular);display:flex;flex-direction:column;column-gap:var(--sys-size-4);padding:var(--sys-size-6) var(--sys-size-6) 0 var(--sys-size-6)}.culprits{display:flex;flex-direction:column}.shift-row:not(:last-child){border-bottom:var(--sys-size-1) solid var(--sys-color-divider)}.total-row{font:var(--sys-typescale-body4-medium)}\n/*# sourceURL=${import.meta.resolve("./layoutShiftDetails.css")} */\n`};const Ne=new CSSStyleSheet;Ne.replaceSync(Fe.cssText);const ze=new CSSStyleSheet;ze.replaceSync(d.textButtonStyles.cssText);const{html:Oe}=r,Ae={startTime:"Start time",shiftScore:"Shift score",elementsShifted:"Elements shifted",culprit:"Culprit",injectedIframe:"Injected iframe",fontRequest:"Font request",nonCompositedAnimation:"Non-composited animation",animation:"Animation",parentCluster:"Parent cluster",cluster:"Layout shift cluster @ {PH1}",layoutShift:"Layout shift @ {PH1}",total:"Total",unsizedImage:"Unsized image"},_e=t.i18n.registerUIStrings("panels/timeline/components/LayoutShiftDetails.ts",Ae),Ue=t.i18n.getLocalizedString.bind(void 0,_e);class Be extends HTMLElement{#e=this.attachShadow({mode:"open"});#ue=null;#me=null;#ve=null;#be=!1;connectedCallback(){this.#e.adoptedStyleSheets=[Ne,ze],this.#i()}setData(e,t,i,n){this.#ue!==e&&(this.#ue=e,this.#me=t,this.#ve=i,this.#be=n,this.#i())}#fe(e){const t=f.EntryName.nameForEntry(e);return Oe`
|
|
190
190
|
<div class="layout-shift-details-title">
|
|
191
191
|
<div class="layout-shift-event-title"></div>
|
|
192
192
|
${t}
|
|
193
193
|
</div>
|
|
194
|
-
`}#
|
|
194
|
+
`}#ye(e,t){return Oe`
|
|
195
195
|
${t?.map((t=>void 0!==t.node_id?Oe`
|
|
196
196
|
<devtools-performance-node-link
|
|
197
197
|
.data=${{backendNodeId:t.node_id,frame:e.args.frame}}>
|
|
198
|
-
</devtools-performance-node-link>`:
|
|
199
|
-
<span class="culprit"><span class="culprit-type">${Ue(
|
|
200
|
-
<span class="culprit"><span class="culprit-type">${Ue(
|
|
198
|
+
</devtools-performance-node-link>`:r.nothing))}`}#we(e){const t=e;if(!t)return null;const i=l.FrameManager.FrameManager.instance().getFrame(t);if(!i)return null;const n=b.Linkifier.Linkifier.linkifyRevealable(i,i.displayName());return Oe`
|
|
199
|
+
<span class="culprit"><span class="culprit-type">${Ue(Ae.injectedIframe)}: </span><span class="culprit-value">${n}</span></span>`}#Se(e){const t={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0,maxLength:20},i=b.Linkifier.Linkifier.linkifyURL(e.args.data.url,t);return Oe`
|
|
200
|
+
<span class="culprit"><span class="culprit-type">${Ue(Ae.fontRequest)}: </span><span class="culprit-value">${i}</span></span>`}#xe(e){this.dispatchEvent(new y.EventRef.EventReferenceClick(e))}#ke(e){const t=e.animation;return t?Oe`
|
|
201
201
|
<span class="culprit">
|
|
202
|
-
<span class="culprit-type">${Ue(
|
|
203
|
-
<button type="button" class="culprit-value timeline-link" @click=${()=>this.#xe(t)}>${Ue(
|
|
202
|
+
<span class="culprit-type">${Ue(Ae.nonCompositedAnimation)}: </span>
|
|
203
|
+
<button type="button" class="culprit-value timeline-link" @click=${()=>this.#xe(t)}>${Ue(Ae.animation)}</button>
|
|
204
204
|
</span>`:null}#Te(e,t){const i=Oe`
|
|
205
205
|
<devtools-performance-node-link
|
|
206
206
|
.data=${{backendNodeId:t,frame:e}}>
|
|
207
207
|
</devtools-performance-node-link>`;return Oe`
|
|
208
|
-
<span class="culprit"><span class="culprit-type">${Ue(
|
|
208
|
+
<span class="culprit"><span class="culprit-type">${Ue(Ae.unsizedImage)}: </span><span class="culprit-value">${i}</span></span>`}#Ce(e,t){return Oe`
|
|
209
209
|
${t?.fontRequests.map((e=>this.#Se(e)))}
|
|
210
210
|
${t?.iframeIds.map((e=>this.#we(e)))}
|
|
211
211
|
${t?.nonCompositedAnimations.map((e=>this.#ke(e)))}
|
|
212
212
|
${t?.unsizedImages.map((t=>this.#Te(e,t)))}
|
|
213
|
-
`}#$e(e,n){const
|
|
214
|
-
<button type="button" class="timeline-link" @click=${()=>this.#xe(e)}>${Ue(
|
|
213
|
+
`}#$e(e,n){const s=i.Types.Timing.Micro(e.ts-n.Meta.traceBounds.min);if(e===this.#ue)return Oe`${t.TimeUtilities.preciseMillisToString(v.Timing.microToMilli(s))}`;const r=t.TimeUtilities.formatMicroSecondsTime(s);return Oe`
|
|
214
|
+
<button type="button" class="timeline-link" @click=${()=>this.#xe(e)}>${Ue(Ae.layoutShift,{PH1:r})}</button>`}#Pe(e,t,i,n){const s=e.args.data?.weighted_score_delta;if(!s)return null;const o=Boolean(n&&(n.fontRequests.length||n.iframeIds.length||n.nonCompositedAnimations.length||n.unsizedImages.length));return Oe`
|
|
215
215
|
<tr class="shift-row" data-ts=${e.ts}>
|
|
216
216
|
<td>${this.#$e(e,t)}</td>
|
|
217
|
-
<td>${
|
|
217
|
+
<td>${s.toFixed(4)}</td>
|
|
218
218
|
${this.#be?Oe`
|
|
219
219
|
<td>
|
|
220
220
|
<div class="elements-shifted">
|
|
221
|
-
${this.#
|
|
221
|
+
${this.#ye(e,i)}
|
|
222
222
|
</div>
|
|
223
|
-
</td>`:
|
|
223
|
+
</td>`:r.nothing}
|
|
224
224
|
${o&&this.#be?Oe`
|
|
225
225
|
<td class="culprits">
|
|
226
226
|
${this.#Ce(e.args.frame,n)}
|
|
227
|
-
</td>`:
|
|
228
|
-
</tr>`}#Le(e,n){if(!e)return null;const
|
|
229
|
-
<span class="parent-cluster">${Ue(
|
|
230
|
-
<button type="button" class="timeline-link" @click=${()=>this.#xe(e)}>${Ue(
|
|
227
|
+
</td>`:r.nothing}
|
|
228
|
+
</tr>`}#Le(e,n){if(!e)return null;const s=i.Types.Timing.Micro(e.ts-(n?.Meta.traceBounds.min??0)),r=t.TimeUtilities.formatMicroSecondsTime(s);return Oe`
|
|
229
|
+
<span class="parent-cluster">${Ue(Ae.parentCluster)}:
|
|
230
|
+
<button type="button" class="timeline-link" @click=${()=>this.#xe(e)}>${Ue(Ae.cluster,{PH1:r})}</button>
|
|
231
231
|
</span>`}#Re(e){return Oe`
|
|
232
|
-
<td class="total-row">${Ue(
|
|
233
|
-
<td class="total-row">${e.clusterCumulativeScore.toFixed(4)}</td>`}#
|
|
232
|
+
<td class="total-row">${Ue(Ae.total)}</td>
|
|
233
|
+
<td class="total-row">${e.clusterCumulativeScore.toFixed(4)}</td>`}#Ie(e,t,n){if(!t)return null;const s=e.args.data?.navigationId??i.Types.Events.NO_NAVIGATION,o=t.get(s)?.model.CLSCulprits;if(!o||o instanceof Error)return null;const a=o.shifts.get(e),l=e.args.data?.impacted_nodes??[],d=a&&(a.fontRequests.length||a.iframeIds.length||a.nonCompositedAnimations.length||a.unsizedImages.length),c=l?.length,h=o.clusters.find((t=>t.events.find((t=>t===e))));return Oe`
|
|
234
234
|
<table class="layout-shift-details-table">
|
|
235
235
|
<thead class="table-title">
|
|
236
236
|
<tr>
|
|
237
|
-
<th>${Ue(
|
|
238
|
-
<th>${Ue(
|
|
237
|
+
<th>${Ue(Ae.startTime)}</th>
|
|
238
|
+
<th>${Ue(Ae.shiftScore)}</th>
|
|
239
239
|
${c&&this.#be?Oe`
|
|
240
|
-
<th>${Ue(
|
|
240
|
+
<th>${Ue(Ae.elementsShifted)}</th>`:r.nothing}
|
|
241
241
|
${d&&this.#be?Oe`
|
|
242
|
-
<th>${Ue(
|
|
242
|
+
<th>${Ue(Ae.culprit)}</th> `:r.nothing}
|
|
243
243
|
</tr>
|
|
244
244
|
</thead>
|
|
245
245
|
<tbody>
|
|
@@ -247,16 +247,16 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
247
247
|
</tbody>
|
|
248
248
|
</table>
|
|
249
249
|
${this.#Le(h,n)}
|
|
250
|
-
`}#
|
|
250
|
+
`}#Me(e,t,n){if(!t)return null;const s=e.navigationId??i.Types.Events.NO_NAVIGATION,o=t.get(s)?.model.CLSCulprits;if(!o||o instanceof Error)return null;const a=Array.from(o.shifts.entries()).filter((([t])=>e.events.includes(t))).map((([,e])=>e)).flatMap((e=>Object.values(e))).flat(),l=Boolean(a.length);return Oe`
|
|
251
251
|
<table class="layout-shift-details-table">
|
|
252
252
|
<thead class="table-title">
|
|
253
253
|
<tr>
|
|
254
|
-
<th>${Ue(
|
|
255
|
-
<th>${Ue(
|
|
254
|
+
<th>${Ue(Ae.startTime)}</th>
|
|
255
|
+
<th>${Ue(Ae.shiftScore)}</th>
|
|
256
256
|
${this.#be?Oe`
|
|
257
|
-
<th>${Ue(
|
|
257
|
+
<th>${Ue(Ae.elementsShifted)}</th>`:r.nothing}
|
|
258
258
|
${l&&this.#be?Oe`
|
|
259
|
-
<th>${Ue(
|
|
259
|
+
<th>${Ue(Ae.culprit)}</th> `:r.nothing}
|
|
260
260
|
</tr>
|
|
261
261
|
</thead>
|
|
262
262
|
<tbody>
|
|
@@ -264,18 +264,18 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
264
264
|
${this.#Re(e)}
|
|
265
265
|
</tbody>
|
|
266
266
|
</table>
|
|
267
|
-
`}#i(){if(!this.#
|
|
267
|
+
`}#i(){if(!this.#ue||!this.#ve)return;const e=Oe`
|
|
268
268
|
<div class="layout-shift-summary-details">
|
|
269
269
|
<div
|
|
270
270
|
class="event-details"
|
|
271
271
|
@mouseover=${this.#Ee}
|
|
272
272
|
@mouseleave=${this.#Ee}
|
|
273
273
|
>
|
|
274
|
-
${this.#
|
|
275
|
-
${i.Types.Events.isSyntheticLayoutShift(this.#
|
|
274
|
+
${this.#fe(this.#ue)}
|
|
275
|
+
${i.Types.Events.isSyntheticLayoutShift(this.#ue)?this.#Ie(this.#ue,this.#me,this.#ve):this.#Me(this.#ue,this.#me,this.#ve)}
|
|
276
276
|
</div>
|
|
277
277
|
</div>
|
|
278
|
-
`;
|
|
278
|
+
`;r.render(e,this.#e,{host:this})}#Ee(e){const t="mouseover"===e.type;if("mouseleave"===e.type&&this.dispatchEvent(new CustomEvent("toggle-popover",{detail:{show:t},bubbles:!0,composed:!0})),!(e.target instanceof HTMLElement&&this.#ue))return;const n=e.target.closest("tbody tr");if(!n?.parentElement)return;const s=i.Types.Events.isSyntheticLayoutShift(this.#ue)?this.#ue:this.#ue.events.find((e=>e.ts===parseInt(n.getAttribute("data-ts")??"",10)));this.dispatchEvent(new CustomEvent("toggle-popover",{detail:{event:s,show:t},bubbles:!0,composed:!0}))}}customElements.define("devtools-performance-layout-shift-details",Be);var Ve=Object.freeze({__proto__:null,LayoutShiftDetails:Be}),qe={cssText:`:host{display:flex;align-items:center;max-width:100%;height:20px}devtools-select-menu{min-width:160px;max-width:100%;height:20px}\n/*# sourceURL=${import.meta.resolve("./networkThrottlingSelector.css")} */\n`};const je=new CSSStyleSheet;je.replaceSync(qe.cssText);const{html:We,nothing:Ke}=r,Ge={network:"Network: {PH1}",networkThrottling:"Network throttling: {PH1}",recommendedThrottling:"{PH1} – recommended",recommendedThrottlingReason:"Consider changing setting to simulate real user environments",disabled:"Disabled",presets:"Presets",custom:"Custom",add:"Add…"},Ye=t.i18n.registerUIStrings("panels/timeline/components/NetworkThrottlingSelector.ts",Ge),Xe=t.i18n.getLocalizedString.bind(void 0,Ye);class Je extends HTMLElement{#e=this.attachShadow({mode:"open"});#De;#h=[];#He;#Fe=null;constructor(){super(),this.#De=a.Settings.Settings.instance().moduleSetting("custom-network-conditions"),this.#Ne(),this.#He=l.NetworkManager.MultitargetNetworkManager.instance().networkConditions(),this.#i()}set recommendedConditions(e){this.#Fe=e,n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[je],l.NetworkManager.MultitargetNetworkManager.instance().addEventListener("ConditionsChanged",this.#ze,this),this.#ze(),this.#De.addChangeListener(this.#Oe,this)}disconnectedCallback(){l.NetworkManager.MultitargetNetworkManager.instance().removeEventListener("ConditionsChanged",this.#ze,this),this.#De.removeChangeListener(this.#Oe,this)}#Ne(){this.#h=[{name:Xe(Ge.disabled),items:[l.NetworkManager.NoThrottlingConditions]},{name:Xe(Ge.presets),items:c.ThrottlingPresets.ThrottlingPresets.networkPresets},{name:Xe(Ge.custom),items:this.#De.get(),showCustomAddOption:!0,jslogContext:"custom-network-throttling-item"}]}#ze(){this.#He=l.NetworkManager.MultitargetNetworkManager.instance().networkConditions(),n.ScheduledRender.scheduleRender(this,this.#i)}#v(e){const t=this.#h.flatMap((e=>e.items)).find((t=>this.#Ae(t)===e.itemValue));t&&l.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(t)}#Oe(){this.#Ne(),n.ScheduledRender.scheduleRender(this,this.#i)}#_e(e){return e.title instanceof Function?e.title():e.title}#Ue(){a.Revealer.reveal(this.#De)}#Ae(e){return e.i18nTitleKey||this.#_e(e)}#i=()=>{const e=this.#_e(this.#He),t=this.#Ae(this.#He);let i;this.#Fe&&this.#He===l.NetworkManager.NoThrottlingConditions&&(i=We`<devtools-button
|
|
279
279
|
title=${Xe(Ge.recommendedThrottlingReason)}
|
|
280
280
|
.iconName=${"info"}
|
|
281
281
|
.variant=${"icon"}
|
|
@@ -292,12 +292,12 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
292
292
|
>
|
|
293
293
|
${this.#h.map((e=>We`
|
|
294
294
|
<devtools-menu-group .name=${e.name} .title=${e.name}>
|
|
295
|
-
${e.items.map((i=>{let n=this.#
|
|
295
|
+
${e.items.map((i=>{let n=this.#_e(i);i===this.#Fe&&(n=Xe(Ge.recommendedThrottling,{PH1:n}));const s=this.#Ae(i),r=e.jslogContext||h.StringUtilities.toKebabCase(i.i18nTitleKey||n);return We`
|
|
296
296
|
<devtools-menu-item
|
|
297
|
-
.value=${
|
|
298
|
-
.selected=${t===
|
|
297
|
+
.value=${s}
|
|
298
|
+
.selected=${t===s}
|
|
299
299
|
.title=${n}
|
|
300
|
-
jslog=${o.item(
|
|
300
|
+
jslog=${o.item(r).track({click:!0})}
|
|
301
301
|
>
|
|
302
302
|
${n}
|
|
303
303
|
</devtools-menu-item>
|
|
@@ -316,32 +316,32 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
316
316
|
`))}
|
|
317
317
|
</devtools-select-menu>
|
|
318
318
|
${i}
|
|
319
|
-
`;s.render(n,this.#e,{host:this})}}customElements.define("devtools-network-throttling-selector",Je);var Ze=Object.freeze({__proto__:null,NetworkThrottlingSelector:Je}),Qe={cssText:`.metric-card{border-radius:var(--sys-shape-corner-small);padding:14px 16px;background-color:var(--sys-color-surface3);height:100%;box-sizing:border-box;&:not(:hover) .title-help{visibility:hidden}}.title{display:flex;justify-content:space-between;font-size:var(--sys-typescale-headline5-size);line-height:var(--sys-typescale-headline5-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0;margin-bottom:6px}.title-help{height:var(--sys-typescale-headline5-line-height);margin-left:4px}.metric-values-section{position:relative;display:flex;column-gap:8px;margin-bottom:8px}.metric-values-section:focus-visible{outline:2px solid -webkit-focus-ring-color}.metric-source-block{flex:1}.metric-source-value{font-size:32px;line-height:36px;font-weight:var(--ref-typeface-weight-regular)}.metric-source-label{font-weight:var(--ref-typeface-weight-medium)}.warning{margin-top:4px;color:var(--sys-color-error);font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-warning);background-color:var(--sys-color-error);margin-right:4px;flex-shrink:0}}.good-bg{background-color:var(--app-color-performance-good)}.needs-improvement-bg{background-color:var(--app-color-performance-ok)}.poor-bg{background-color:var(--app-color-performance-bad)}.divider{width:100%;border:0;border-bottom:1px solid var(--sys-color-divider);margin:8px 0;box-sizing:border-box}.compare-text{margin-top:8px}.environment-recs-intro{margin-top:8px}.environment-recs{margin:9px 0}.environment-recs > summary{font-weight:var(--ref-typeface-weight-medium);margin-bottom:4px;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-triangle-right);background-color:var(--icon-default);margin-right:4px;flex-shrink:0}}details.environment-recs[open] > summary::before{mask-image:var(--image-file-triangle-down)}.environment-recs-list{margin:0}.detailed-compare-text{margin-bottom:8px}.bucket-summaries{margin-top:8px;white-space:nowrap}.bucket-summaries.histogram{display:grid;grid-template-columns:minmax(min-content,auto) minmax(40px,60px) max-content;grid-auto-rows:1fr;column-gap:8px;place-items:center flex-end}.bucket-label{justify-self:start;font-weight:var(--ref-typeface-weight-medium);white-space:wrap;> *{white-space:nowrap}}.bucket-range{color:var(--sys-color-token-subtle)}.histogram-bar{height:6px}.histogram-percent{color:var(--sys-color-token-subtle);font-weight:var(--ref-typeface-weight-medium)}.tooltip{display:none;visibility:hidden;transition-property:visibility;width:min(var(--tooltip-container-width,350px),350px);max-width:max-content;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1;box-sizing:border-box;padding:var(--sys-size-5) var(--sys-size-6);border-radius:var(--sys-shape-corner-small);background-color:var(--sys-color-cdt-base-container);box-shadow:var(--drop-shadow-depth-3);.tooltip-scroll{overflow-x:auto;.tooltip-contents{min-width:min-content}}}.phase-table{display:grid;column-gap:var(--sys-size-3);white-space:nowrap}.phase-table-row{display:contents}.phase-table-value{text-align:right}.phase-table-header-row{font-weight:var(--ref-typeface-weight-medium)}\n/*# sourceURL=${import.meta.resolve("./metricCard.css")} */\n`};const et={goodBetterCompare:"Your local {PH1} value of {PH2} is good, but is significantly better than your users’ experience.",goodWorseCompare:"Your local {PH1} value of {PH2} is good, but is significantly worse than your users’ experience.",goodSimilarCompare:"Your local {PH1} value of {PH2} is good, and is similar to your users’ experience.",goodSummarized:"Your local {PH1} value of {PH2} is good.",needsImprovementBetterCompare:"Your local {PH1} value of {PH2} needs improvement, but is significantly better than your users’ experience.",needsImprovementWorseCompare:"Your local {PH1} value of {PH2} needs improvement, but is significantly worse than your users’ experience.",needsImprovementSimilarCompare:"Your local {PH1} value of {PH2} needs improvement, and is similar to your users’ experience.",needsImprovementSummarized:"Your local {PH1} value of {PH2} needs improvement.",poorBetterCompare:"Your local {PH1} value of {PH2} is poor, but is significantly better than your users’ experience.",poorWorseCompare:"Your local {PH1} value of {PH2} is poor, but is significantly worse than your users’ experience.",poorSimilarCompare:"Your local {PH1} value of {PH2} is poor, and is similar to your users’ experience.",poorSummarized:"Your local {PH1} value of {PH2} is poor.",goodGoodDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} is good.",goodNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.",goodPoorDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.",needsImprovementGoodDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.",needsImprovementNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} needs improvement.",needsImprovementPoorDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.",poorGoodDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.",poorNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.",poorPoorDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} is poor."},tt=t.i18n.registerUIStrings("panels/timeline/components/MetricCompareStrings.ts",et);var it={cssText:`.metric-value{text-wrap:nowrap}.metric-value.dim{font-weight:var(--ref-typeface-weight-medium)}.metric-value.waiting{color:var(--sys-color-token-subtle)}.metric-value.good{color:var(--app-color-performance-good)}.metric-value.needs-improvement{color:var(--app-color-performance-ok)}.metric-value.poor{color:var(--app-color-performance-bad)}.metric-value.good.dim{color:var(--app-color-performance-good-dim)}.metric-value.needs-improvement.dim{color:var(--app-color-performance-ok-dim)}.metric-value.poor.dim{color:var(--app-color-performance-bad-dim)}\n/*# sourceURL=${import.meta.resolve("./metricValueStyles.css")} */\n`};const nt={fms:"{PH1}[ms]()",fs:"{PH1}[s]()"},rt=t.i18n.registerUIStrings("panels/timeline/components/Utils.ts",nt),st=t.i18n.getLocalizedString.bind(void 0,rt);var ot;function at(e){const{mimeType:t}=e.args.data;switch(e.args.data.resourceType){case"Document":return ot.DOC;case"Stylesheet":return ot.CSS;case"Image":return ot.IMG;case"Media":return ot.MEDIA;case"Font":return ot.FONT;case"Script":case"WebSocket":return ot.JS;default:return void 0===t?ot.OTHER:t.endsWith("/css")?ot.CSS:t.endsWith("javascript")?ot.JS:t.startsWith("image/")?ot.IMG:t.startsWith("audio/")||t.startsWith("video/")?ot.MEDIA:t.startsWith("font/")||t.includes("font-")?ot.FONT:"application/wasm"===t?ot.WASM:t.startsWith("text/")?ot.DOC:ot.OTHER}}function lt(e){let t="--app-color-system";switch(e){case ot.DOC:t="--app-color-doc";break;case ot.JS:t="--app-color-scripting";break;case ot.CSS:t="--app-color-css";break;case ot.IMG:t="--app-color-image";break;case ot.MEDIA:t="--app-color-media";break;case ot.FONT:t="--app-color-font";break;case ot.WASM:t="--app-color-wasm";break;case ot.OTHER:default:t="--app-color-system"}return w.ThemeSupport.instance().getComputedValue(t)}function dt(e){return lt(at(e))}!function(e){e.DOC="Doc",e.CSS="CSS",e.JS="JS",e.FONT="Font",e.IMG="Img",e.MEDIA="Media",e.WASM="Wasm",e.OTHER="Other"}(ot||(ot={}));const ct=[2500,4e3],ht=[.1,.25],gt=[200,500];function ut(e,t){return e<=t[0]?"good":e<=t[1]?"needs-improvement":"poor"}function pt(e,t,i,n,r){const s=document.createElement("span");if(s.classList.add("metric-value"),void 0===t)return s.classList.add("waiting"),s.textContent="-",s;s.textContent=n(t);const a=ut(t,i);return s.classList.add(a),s.setAttribute("jslog",`${o.section(e)}`),r?.dim&&s.classList.add("dim"),s}var mt;function vt(e,t,i){let n,r;switch(e){case"LCP":n=ct,r=1e3;break;case"CLS":n=ht,r=.1;break;case"INP":n=gt,r=200;break;default:h.assertNever(e,`Unknown metric: ${e}`)}const s=ut(t,n),o=ut(i,n);return"good"===s&&"good"===o?"similar":t-i>r?"worse":i-t>r?"better":"similar"}!function(e){function i(e){const t=e.indexOf("["),i=-1!==t&&e.indexOf("]",t),n=i&&e.indexOf("(",i),r=n&&e.indexOf(")",n);if(!r||-1===r)return null;return{firstPart:e.substring(0,t),unitPart:e.substring(t+1,i),lastPart:e.substring(r+1)}}e.parse=i,e.formatMicroSecondsAsSeconds=function(e){const n=document.createElement("span");n.classList.add("number-with-unit");const r=h.Timing.microSecondsToMilliSeconds(e),s=h.Timing.milliSecondsToSeconds(r),o=st(nt.fs,{PH1:s.toFixed(2)}),a=i(o);if(!a)return n.textContent=t.TimeUtilities.formatMicroSecondsAsSeconds(e),{text:o,element:n};const{firstPart:l,unitPart:d,lastPart:c}=a;return l&&n.append(l),n.createChild("span","unit").textContent=d,c&&n.append(c),{text:n.textContent??"",element:n}},e.formatMicroSecondsAsMillisFixed=function(e,n=0){const r=document.createElement("span");r.classList.add("number-with-unit");const s=h.Timing.microSecondsToMilliSeconds(e),o=st(nt.fms,{PH1:s.toFixed(n)}),a=i(o);if(!a)return r.textContent=t.TimeUtilities.formatMicroSecondsAsMillisFixed(e),{text:o,element:r};const{firstPart:l,unitPart:d,lastPart:c}=a;return l&&r.append(l),r.createChild("span","unit").textContent=d,c&&r.append(c),{text:r.textContent??"",element:r}}}(mt||(mt={}));var bt=Object.freeze({__proto__:null,CLS_THRESHOLDS:ht,INP_THRESHOLDS:gt,LCP_THRESHOLDS:ct,get NetworkCategory(){return ot},get NumberWithUnit(){return mt},colorForNetworkCategory:lt,colorForNetworkRequest:dt,determineCompareRating:vt,networkResourceCategory:at,rateMetric:ut,renderMetricValue:pt});const yt=new CSSStyleSheet;yt.replaceSync(Qe.cssText);const ft=new CSSStyleSheet;ft.replaceSync(it.cssText);const{html:wt,nothing:St}=s,xt={localValue:"Local",field75thPercentile:"Field 75th percentile",fieldP75:"Field p75",good:"Good",needsImprovement:"Needs improvement",poor:"Poor",leqRange:"(≤{PH1})",betweenRange:"({PH1}-{PH2})",gtRange:"(>{PH1})",percentage:"{PH1}%",interactToMeasure:"Interact with the page to measure INP.",viewCardDetails:"View card details",considerTesting:"Consider your local test conditions",recThrottlingLCP:"Real users may experience longer page loads due to slower network conditions. Increasing network throttling will simulate slower network conditions.",recThrottlingINP:"Real users may experience longer interactions due to slower CPU speeds. Increasing CPU throttling will simulate a slower device.",recViewportLCP:"Screen size can influence what the LCP element is. Ensure you are testing common viewport sizes.",recViewportCLS:"Screen size can influence what layout shifts happen. Ensure you are testing common viewport sizes.",recJourneyCLS:"How a user interacts with the page can influence layout shifts. Ensure you are testing common interactions like scrolling the page.",recJourneyINP:"How a user interacts with the page influences interaction delays. Ensure you are testing common interactions.",recDynamicContentLCP:"The LCP element can vary between page loads if content is dynamic.",recDynamicContentCLS:"Dynamic content can influence what layout shifts happen.",phase:"Phase",lcpHelpTooltip:"LCP reports the render time of the largest image, text block, or video visible in the viewport. Click here to learn more about LCP.",clsHelpTooltip:"CLS measures the amount of unexpected shifted content. Click here to learn more about CLS.",inpHelpTooltip:"INP measures the overall responsiveness to all click, tap, and keyboard interactions. Click here to learn more about INP."},kt=t.i18n.registerUIStrings("panels/timeline/components/MetricCard.ts",xt),Tt=t.i18n.getLocalizedString.bind(void 0,kt);class Ct extends HTMLElement{#e=this.attachShadow({mode:"open"});constructor(){super(),this.#i()}#Be;#qe={metric:"LCP"};set data(e){this.#qe=e,n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[yt,ft],n.ScheduledRender.scheduleRender(this,this.#i)}#Ve=e=>{h.KeyboardUtilities.isEscKey(e)&&(e.stopPropagation(),this.#je())};#We(e){const t=e.target;t?.hasFocus()||this.#je()}#Ke(e){const t=e.target;if(t?.hasFocus())return;const i=e.relatedTarget;i instanceof Node&&t.contains(i)||this.#je()}#je(){const e=this.#Be;e&&(document.body.removeEventListener("keydown",this.#Ve),e.style.removeProperty("left"),e.style.removeProperty("visibility"),e.style.removeProperty("display"),e.style.removeProperty("transition-delay"))}#Ge(e=0){const t=this.#Be;if(!t||t.style.visibility||t.style.display)return;document.body.addEventListener("keydown",this.#Ve),t.style.display="block",t.style.transitionDelay=`${Math.round(e)}ms`;const i=this.#qe.tooltipContainer;if(!i)return;const n=i.getBoundingClientRect();t.style.setProperty("--tooltip-container-width",`${Math.round(n.width)}px`),requestAnimationFrame((()=>{let e=0;const i=t.getBoundingClientRect(),r=i.right-n.right,s=i.left-n.left;s<0?e=Math.round(s):r>0&&(e=Math.round(r)),t.style.left=`calc(50% - ${e}px)`,t.style.visibility="visible"}))}#Ye(){switch(this.#qe.metric){case"LCP":return t.i18n.lockedString("Largest Contentful Paint (LCP)");case"CLS":return t.i18n.lockedString("Cumulative Layout Shift (CLS)");case"INP":return t.i18n.lockedString("Interaction to Next Paint (INP)")}}#Xe(){switch(this.#qe.metric){case"LCP":return ct;case"CLS":return ht;case"INP":return gt}}#Je(){switch(this.#qe.metric){case"LCP":return e=>{const i=1e3*e;return t.TimeUtilities.formatMicroSecondsAsSeconds(i)};case"CLS":return e=>0===e?"0":e.toFixed(2);case"INP":return e=>t.TimeUtilities.preciseMillisToString(e)}}#Ze(){switch(this.#qe.metric){case"LCP":return"https://web.dev/articles/lcp";case"CLS":return"https://web.dev/articles/cls";case"INP":return"https://web.dev/articles/inp"}}#Qe(){switch(this.#qe.metric){case"LCP":return Tt(xt.lcpHelpTooltip);case"CLS":return Tt(xt.clsHelpTooltip);case"INP":return Tt(xt.inpHelpTooltip)}}#et(){const{localValue:e}=this.#qe;if(void 0!==e)return e}#tt(){let{fieldValue:e}=this.#qe;if(void 0!==e&&("string"==typeof e&&(e=Number(e)),Number.isFinite(e)))return e}#it(){const e=this.#et(),t=this.#tt();if(void 0!==e&&void 0!==t)return vt(this.#qe.metric,e,t)}#nt(){const e=this.#et();if(void 0===e)return"INP"===this.#qe.metric?wt`
|
|
319
|
+
`;r.render(n,this.#e,{host:this})}}customElements.define("devtools-network-throttling-selector",Je);var Ze=Object.freeze({__proto__:null,NetworkThrottlingSelector:Je}),Qe={cssText:`.metric-card{border-radius:var(--sys-shape-corner-small);padding:14px 16px;background-color:var(--sys-color-surface3);height:100%;box-sizing:border-box;&:not(:hover) .title-help{visibility:hidden}}.title{display:flex;justify-content:space-between;font-size:var(--sys-typescale-headline5-size);line-height:var(--sys-typescale-headline5-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0;margin-bottom:6px}.title-help{height:var(--sys-typescale-headline5-line-height);margin-left:4px}.metric-values-section{position:relative;display:flex;column-gap:8px;margin-bottom:8px}.metric-values-section:focus-visible{outline:2px solid -webkit-focus-ring-color}.metric-source-block{flex:1}.metric-source-value{font-size:32px;line-height:36px;font-weight:var(--ref-typeface-weight-regular)}.metric-source-label{font-weight:var(--ref-typeface-weight-medium)}.warning{margin-top:4px;color:var(--sys-color-error);font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-warning);background-color:var(--sys-color-error);margin-right:4px;flex-shrink:0}}.good-bg{background-color:var(--app-color-performance-good)}.needs-improvement-bg{background-color:var(--app-color-performance-ok)}.poor-bg{background-color:var(--app-color-performance-bad)}.divider{width:100%;border:0;border-bottom:1px solid var(--sys-color-divider);margin:8px 0;box-sizing:border-box}.compare-text{margin-top:8px}.environment-recs-intro{margin-top:8px}.environment-recs{margin:9px 0}.environment-recs > summary{font-weight:var(--ref-typeface-weight-medium);margin-bottom:4px;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-triangle-right);background-color:var(--icon-default);margin-right:4px;flex-shrink:0}}details.environment-recs[open] > summary::before{mask-image:var(--image-file-triangle-down)}.environment-recs-list{margin:0}.detailed-compare-text{margin-bottom:8px}.bucket-summaries{margin-top:8px;white-space:nowrap}.bucket-summaries.histogram{display:grid;grid-template-columns:minmax(min-content,auto) minmax(40px,60px) max-content;grid-auto-rows:1fr;column-gap:8px;place-items:center flex-end}.bucket-label{justify-self:start;font-weight:var(--ref-typeface-weight-medium);white-space:wrap;> *{white-space:nowrap}}.bucket-range{color:var(--sys-color-token-subtle)}.histogram-bar{height:6px}.histogram-percent{color:var(--sys-color-token-subtle);font-weight:var(--ref-typeface-weight-medium)}.tooltip{display:none;visibility:hidden;transition-property:visibility;width:min(var(--tooltip-container-width,350px),350px);max-width:max-content;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1;box-sizing:border-box;padding:var(--sys-size-5) var(--sys-size-6);border-radius:var(--sys-shape-corner-small);background-color:var(--sys-color-cdt-base-container);box-shadow:var(--drop-shadow-depth-3);.tooltip-scroll{overflow-x:auto;.tooltip-contents{min-width:min-content}}}.phase-table{display:grid;column-gap:var(--sys-size-3);white-space:nowrap}.phase-table-row{display:contents}.phase-table-value{text-align:right}.phase-table-header-row{font-weight:var(--ref-typeface-weight-medium)}\n/*# sourceURL=${import.meta.resolve("./metricCard.css")} */\n`};const et={goodBetterCompare:"Your local {PH1} value of {PH2} is good, but is significantly better than your users’ experience.",goodWorseCompare:"Your local {PH1} value of {PH2} is good, but is significantly worse than your users’ experience.",goodSimilarCompare:"Your local {PH1} value of {PH2} is good, and is similar to your users’ experience.",goodSummarized:"Your local {PH1} value of {PH2} is good.",needsImprovementBetterCompare:"Your local {PH1} value of {PH2} needs improvement, but is significantly better than your users’ experience.",needsImprovementWorseCompare:"Your local {PH1} value of {PH2} needs improvement, but is significantly worse than your users’ experience.",needsImprovementSimilarCompare:"Your local {PH1} value of {PH2} needs improvement, and is similar to your users’ experience.",needsImprovementSummarized:"Your local {PH1} value of {PH2} needs improvement.",poorBetterCompare:"Your local {PH1} value of {PH2} is poor, but is significantly better than your users’ experience.",poorWorseCompare:"Your local {PH1} value of {PH2} is poor, but is significantly worse than your users’ experience.",poorSimilarCompare:"Your local {PH1} value of {PH2} is poor, and is similar to your users’ experience.",poorSummarized:"Your local {PH1} value of {PH2} is poor.",goodGoodDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} is good.",goodNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.",goodPoorDetailedCompare:"Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.",needsImprovementGoodDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.",needsImprovementNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} needs improvement.",needsImprovementPoorDetailedCompare:"Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.",poorGoodDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.",poorNeedsImprovementDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.",poorPoorDetailedCompare:"Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} is poor."},tt=t.i18n.registerUIStrings("panels/timeline/components/MetricCompareStrings.ts",et);var it={cssText:`.metric-value{text-wrap:nowrap}.metric-value.dim{font-weight:var(--ref-typeface-weight-medium)}.metric-value.waiting{color:var(--sys-color-token-subtle)}.metric-value.good{color:var(--app-color-performance-good)}.metric-value.needs-improvement{color:var(--app-color-performance-ok)}.metric-value.poor{color:var(--app-color-performance-bad)}.metric-value.good.dim{color:var(--app-color-performance-good-dim)}.metric-value.needs-improvement.dim{color:var(--app-color-performance-ok-dim)}.metric-value.poor.dim{color:var(--app-color-performance-bad-dim)}\n/*# sourceURL=${import.meta.resolve("./metricValueStyles.css")} */\n`};const nt={fms:"{PH1}[ms]()",fs:"{PH1}[s]()"},st=t.i18n.registerUIStrings("panels/timeline/components/Utils.ts",nt),rt=t.i18n.getLocalizedString.bind(void 0,st);var ot;function at(e){const{mimeType:t}=e.args.data;switch(e.args.data.resourceType){case"Document":return ot.DOC;case"Stylesheet":return ot.CSS;case"Image":return ot.IMG;case"Media":return ot.MEDIA;case"Font":return ot.FONT;case"Script":case"WebSocket":return ot.JS;default:return void 0===t?ot.OTHER:t.endsWith("/css")?ot.CSS:t.endsWith("javascript")?ot.JS:t.startsWith("image/")?ot.IMG:t.startsWith("audio/")||t.startsWith("video/")?ot.MEDIA:t.startsWith("font/")||t.includes("font-")?ot.FONT:"application/wasm"===t?ot.WASM:t.startsWith("text/")?ot.DOC:ot.OTHER}}function lt(e){let t="--app-color-system";switch(e){case ot.DOC:t="--app-color-doc";break;case ot.JS:t="--app-color-scripting";break;case ot.CSS:t="--app-color-css";break;case ot.IMG:t="--app-color-image";break;case ot.MEDIA:t="--app-color-media";break;case ot.FONT:t="--app-color-font";break;case ot.WASM:t="--app-color-wasm";break;case ot.OTHER:default:t="--app-color-system"}return w.ThemeSupport.instance().getComputedValue(t)}function dt(e){return lt(at(e))}!function(e){e.DOC="Doc",e.CSS="CSS",e.JS="JS",e.FONT="Font",e.IMG="Img",e.MEDIA="Media",e.WASM="Wasm",e.OTHER="Other"}(ot||(ot={}));const ct=[2500,4e3],ht=[.1,.25],gt=[200,500];function pt(e,t){return e<=t[0]?"good":e<=t[1]?"needs-improvement":"poor"}function ut(e,t,i,n,s){const r=document.createElement("span");if(r.classList.add("metric-value"),void 0===t)return r.classList.add("waiting"),r.textContent="-",r;r.textContent=n(t);const a=pt(t,i);return r.classList.add(a),r.setAttribute("jslog",`${o.section(e)}`),s?.dim&&r.classList.add("dim"),r}var mt;function vt(e,t,i){let n,s;switch(e){case"LCP":n=ct,s=1e3;break;case"CLS":n=ht,s=.1;break;case"INP":n=gt,s=200;break;default:h.assertNever(e,`Unknown metric: ${e}`)}const r=pt(t,n),o=pt(i,n);return"good"===r&&"good"===o?"similar":t-i>s?"worse":i-t>s?"better":"similar"}!function(e){function i(e){const t=e.indexOf("["),i=-1!==t&&e.indexOf("]",t),n=i&&e.indexOf("(",i),s=n&&e.indexOf(")",n);if(!s||-1===s)return null;return{firstPart:e.substring(0,t),unitPart:e.substring(t+1,i),lastPart:e.substring(s+1)}}e.parse=i,e.formatMicroSecondsAsSeconds=function(e){const n=document.createElement("span");n.classList.add("number-with-unit");const s=h.Timing.microSecondsToMilliSeconds(e),r=h.Timing.milliSecondsToSeconds(s),o=rt(nt.fs,{PH1:r.toFixed(2)}),a=i(o);if(!a)return n.textContent=t.TimeUtilities.formatMicroSecondsAsSeconds(e),{text:o,element:n};const{firstPart:l,unitPart:d,lastPart:c}=a;return l&&n.append(l),n.createChild("span","unit").textContent=d,c&&n.append(c),{text:n.textContent??"",element:n}},e.formatMicroSecondsAsMillisFixed=function(e,n=0){const s=document.createElement("span");s.classList.add("number-with-unit");const r=h.Timing.microSecondsToMilliSeconds(e),o=rt(nt.fms,{PH1:r.toFixed(n)}),a=i(o);if(!a)return s.textContent=t.TimeUtilities.formatMicroSecondsAsMillisFixed(e),{text:o,element:s};const{firstPart:l,unitPart:d,lastPart:c}=a;return l&&s.append(l),s.createChild("span","unit").textContent=d,c&&s.append(c),{text:s.textContent??"",element:s}}}(mt||(mt={}));var bt=Object.freeze({__proto__:null,CLS_THRESHOLDS:ht,INP_THRESHOLDS:gt,LCP_THRESHOLDS:ct,get NetworkCategory(){return ot},get NumberWithUnit(){return mt},colorForNetworkCategory:lt,colorForNetworkRequest:dt,determineCompareRating:vt,networkResourceCategory:at,rateMetric:pt,renderMetricValue:ut});const ft=new CSSStyleSheet;ft.replaceSync(Qe.cssText);const yt=new CSSStyleSheet;yt.replaceSync(it.cssText);const{html:wt,nothing:St}=r,xt={localValue:"Local",field75thPercentile:"Field 75th percentile",fieldP75:"Field p75",good:"Good",needsImprovement:"Needs improvement",poor:"Poor",leqRange:"(≤{PH1})",betweenRange:"({PH1}-{PH2})",gtRange:"(>{PH1})",percentage:"{PH1}%",interactToMeasure:"Interact with the page to measure INP.",viewCardDetails:"View card details",considerTesting:"Consider your local test conditions",recThrottlingLCP:"Real users may experience longer page loads due to slower network conditions. Increasing network throttling will simulate slower network conditions.",recThrottlingINP:"Real users may experience longer interactions due to slower CPU speeds. Increasing CPU throttling will simulate a slower device.",recViewportLCP:"Screen size can influence what the LCP element is. Ensure you are testing common viewport sizes.",recViewportCLS:"Screen size can influence what layout shifts happen. Ensure you are testing common viewport sizes.",recJourneyCLS:"How a user interacts with the page can influence layout shifts. Ensure you are testing common interactions like scrolling the page.",recJourneyINP:"How a user interacts with the page influences interaction delays. Ensure you are testing common interactions.",recDynamicContentLCP:"The LCP element can vary between page loads if content is dynamic.",recDynamicContentCLS:"Dynamic content can influence what layout shifts happen.",phase:"Phase",lcpHelpTooltip:"LCP reports the render time of the largest image, text block, or video visible in the viewport. Click here to learn more about LCP.",clsHelpTooltip:"CLS measures the amount of unexpected shifted content. Click here to learn more about CLS.",inpHelpTooltip:"INP measures the overall responsiveness to all click, tap, and keyboard interactions. Click here to learn more about INP."},kt=t.i18n.registerUIStrings("panels/timeline/components/MetricCard.ts",xt),Tt=t.i18n.getLocalizedString.bind(void 0,kt);class Ct extends HTMLElement{#e=this.attachShadow({mode:"open"});constructor(){super(),this.#i()}#Be;#Ve={metric:"LCP"};set data(e){this.#Ve=e,n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[ft,yt],n.ScheduledRender.scheduleRender(this,this.#i)}#qe=e=>{h.KeyboardUtilities.isEscKey(e)&&(e.stopPropagation(),this.#je())};#We(e){const t=e.target;t?.hasFocus()||this.#je()}#Ke(e){const t=e.target;if(t?.hasFocus())return;const i=e.relatedTarget;i instanceof Node&&t.contains(i)||this.#je()}#je(){const e=this.#Be;e&&(document.body.removeEventListener("keydown",this.#qe),e.style.removeProperty("left"),e.style.removeProperty("visibility"),e.style.removeProperty("display"),e.style.removeProperty("transition-delay"))}#Ge(e=0){const t=this.#Be;if(!t||t.style.visibility||t.style.display)return;document.body.addEventListener("keydown",this.#qe),t.style.display="block",t.style.transitionDelay=`${Math.round(e)}ms`;const i=this.#Ve.tooltipContainer;if(!i)return;const n=i.getBoundingClientRect();t.style.setProperty("--tooltip-container-width",`${Math.round(n.width)}px`),requestAnimationFrame((()=>{let e=0;const i=t.getBoundingClientRect(),s=i.right-n.right,r=i.left-n.left;r<0?e=Math.round(r):s>0&&(e=Math.round(s)),t.style.left=`calc(50% - ${e}px)`,t.style.visibility="visible"}))}#Ye(){switch(this.#Ve.metric){case"LCP":return t.i18n.lockedString("Largest Contentful Paint (LCP)");case"CLS":return t.i18n.lockedString("Cumulative Layout Shift (CLS)");case"INP":return t.i18n.lockedString("Interaction to Next Paint (INP)")}}#Xe(){switch(this.#Ve.metric){case"LCP":return ct;case"CLS":return ht;case"INP":return gt}}#Je(){switch(this.#Ve.metric){case"LCP":return e=>{const i=1e3*e;return t.TimeUtilities.formatMicroSecondsAsSeconds(i)};case"CLS":return e=>0===e?"0":e.toFixed(2);case"INP":return e=>t.TimeUtilities.preciseMillisToString(e)}}#Ze(){switch(this.#Ve.metric){case"LCP":return"https://web.dev/articles/lcp";case"CLS":return"https://web.dev/articles/cls";case"INP":return"https://web.dev/articles/inp"}}#Qe(){switch(this.#Ve.metric){case"LCP":return Tt(xt.lcpHelpTooltip);case"CLS":return Tt(xt.clsHelpTooltip);case"INP":return Tt(xt.inpHelpTooltip)}}#et(){const{localValue:e}=this.#Ve;if(void 0!==e)return e}#tt(){let{fieldValue:e}=this.#Ve;if(void 0!==e&&("string"==typeof e&&(e=Number(e)),Number.isFinite(e)))return e}#it(){const e=this.#et(),t=this.#tt();if(void 0!==e&&void 0!==t)return vt(this.#Ve.metric,e,t)}#nt(){const e=this.#et();if(void 0===e)return"INP"===this.#Ve.metric?wt`
|
|
320
320
|
<div class="compare-text">${Tt(xt.interactToMeasure)}</div>
|
|
321
|
-
`:
|
|
321
|
+
`:r.nothing;const i=this.#it(),n=pt(e,this.#Xe()),s=ut(this.#st(!0),e,this.#Xe(),this.#Je(),{dim:!0});return wt`
|
|
322
322
|
<div class="compare-text">
|
|
323
|
-
${function(e){const{rating:i,compare:n}=e,
|
|
323
|
+
${function(e){const{rating:i,compare:n}=e,s={PH1:e.metric,PH2:e.localValue};if("good"===i&&"better"===n)return t.i18n.getFormatLocalizedString(tt,et.goodBetterCompare,s);if("good"===i&&"worse"===n)return t.i18n.getFormatLocalizedString(tt,et.goodWorseCompare,s);if("good"===i&&"similar"===n)return t.i18n.getFormatLocalizedString(tt,et.goodSimilarCompare,s);if("good"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.goodSummarized,s);if("needs-improvement"===i&&"better"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementBetterCompare,s);if("needs-improvement"===i&&"worse"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementWorseCompare,s);if("needs-improvement"===i&&"similar"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementSimilarCompare,s);if("needs-improvement"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementSummarized,s);if("poor"===i&&"better"===n)return t.i18n.getFormatLocalizedString(tt,et.poorBetterCompare,s);if("poor"===i&&"worse"===n)return t.i18n.getFormatLocalizedString(tt,et.poorWorseCompare,s);if("poor"===i&&"similar"===n)return t.i18n.getFormatLocalizedString(tt,et.poorSimilarCompare,s);if("poor"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.poorSummarized,s);throw new Error("Compare string not found")}({metric:t.i18n.lockedString(this.#Ve.metric),rating:n,compare:i,localValue:s})}
|
|
324
324
|
</div>
|
|
325
|
-
`}#
|
|
325
|
+
`}#rt(){const e=this.#it();if(!e||"similar"===e)return r.nothing;const t=[],i=this.#Ve.metric;return"LCP"===i&&"better"===e?t.push(Tt(xt.recThrottlingLCP)):"INP"===i&&"better"===e&&t.push(Tt(xt.recThrottlingINP)),"LCP"===i?t.push(Tt(xt.recViewportLCP)):"CLS"===i&&t.push(Tt(xt.recViewportCLS)),"CLS"===i?t.push(Tt(xt.recJourneyCLS)):"INP"===i&&t.push(Tt(xt.recJourneyINP)),"LCP"===i?t.push(Tt(xt.recDynamicContentLCP)):"CLS"===i&&t.push(Tt(xt.recDynamicContentCLS)),t.length?wt`
|
|
326
326
|
<details class="environment-recs">
|
|
327
327
|
<summary>${Tt(xt.considerTesting)}</summary>
|
|
328
328
|
<ul class="environment-recs-list">${t.map((e=>wt`<li>${e}</li>`))}</ul>
|
|
329
329
|
</details>
|
|
330
|
-
`:
|
|
330
|
+
`:r.nothing}#st(e){return`timeline.landing.${e?"local":"field"}-${this.#Ve.metric.toLowerCase()}`}#ot(){const e=this.#et();if(void 0===e)return"INP"===this.#Ve.metric?wt`
|
|
331
331
|
<div class="detailed-compare-text">${Tt(xt.interactToMeasure)}</div>
|
|
332
|
-
`:
|
|
333
|
-
<div class="detailed-compare-text">${function(e){const{localRating:i,fieldRating:n}=e,
|
|
334
|
-
`}#lt(e){switch(e){case"good":return 0;case"needs-improvement":return 1;case"poor":return 2}}#dt(e){const t=this.#
|
|
332
|
+
`:r.nothing;const i=pt(e,this.#Xe()),n=this.#tt(),s=void 0!==n?pt(n,this.#Xe()):void 0,o=ut(this.#st(!0),e,this.#Xe(),this.#Je(),{dim:!0}),a=ut(this.#st(!1),n,this.#Xe(),this.#Je(),{dim:!0});return wt`
|
|
333
|
+
<div class="detailed-compare-text">${function(e){const{localRating:i,fieldRating:n}=e,s={PH1:e.metric,PH2:e.localValue,PH3:e.fieldValue,PH4:e.percent};if("good"===i&&"good"===n)return t.i18n.getFormatLocalizedString(tt,et.goodGoodDetailedCompare,s);if("good"===i&&"needs-improvement"===n)return t.i18n.getFormatLocalizedString(tt,et.goodNeedsImprovementDetailedCompare,s);if("good"===i&&"poor"===n)return t.i18n.getFormatLocalizedString(tt,et.goodPoorDetailedCompare,s);if("good"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.goodSummarized,s);if("needs-improvement"===i&&"good"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementGoodDetailedCompare,s);if("needs-improvement"===i&&"needs-improvement"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementNeedsImprovementDetailedCompare,s);if("needs-improvement"===i&&"poor"===n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementPoorDetailedCompare,s);if("needs-improvement"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.needsImprovementSummarized,s);if("poor"===i&&"good"===n)return t.i18n.getFormatLocalizedString(tt,et.poorGoodDetailedCompare,s);if("poor"===i&&"needs-improvement"===n)return t.i18n.getFormatLocalizedString(tt,et.poorNeedsImprovementDetailedCompare,s);if("poor"===i&&"poor"===n)return t.i18n.getFormatLocalizedString(tt,et.poorPoorDetailedCompare,s);if("poor"===i&&!n)return t.i18n.getFormatLocalizedString(tt,et.poorSummarized,s);throw new Error("Detailed compare string not found")}({metric:t.i18n.lockedString(this.#Ve.metric),localRating:i,fieldRating:s,localValue:o,fieldValue:a,percent:this.#at(i)})}</div>
|
|
334
|
+
`}#lt(e){switch(e){case"good":return 0;case"needs-improvement":return 1;case"poor":return 2}}#dt(e){const t=this.#Ve.histogram,i=t?.[this.#lt(e)].density||0;return`${Math.round(100*i)}%`}#at(e){const t=this.#Ve.histogram;if(void 0===t)return"-";const i=t[this.#lt(e)].density||0,n=Math.round(100*i);return Tt(xt.percentage,{PH1:n})}#ct(){const e=g.CrUXManager.instance().getConfigSetting().get().enabled,t=this.#Je(),i=this.#Xe(),n=wt`
|
|
335
335
|
<div class="bucket-label">
|
|
336
336
|
<span>${Tt(xt.good)}</span>
|
|
337
337
|
<span class="bucket-range">${Tt(xt.leqRange,{PH1:t(i[0])})}</span>
|
|
338
338
|
</div>
|
|
339
|
-
`,
|
|
339
|
+
`,s=wt`
|
|
340
340
|
<div class="bucket-label">
|
|
341
341
|
<span>${Tt(xt.needsImprovement)}</span>
|
|
342
342
|
<span class="bucket-range">${Tt(xt.betweenRange,{PH1:t(i[0]),PH2:t(i[1])})}</span>
|
|
343
343
|
</div>
|
|
344
|
-
`,
|
|
344
|
+
`,r=wt`
|
|
345
345
|
<div class="bucket-label">
|
|
346
346
|
<span>${Tt(xt.poor)}</span>
|
|
347
347
|
<span class="bucket-range">${Tt(xt.gtRange,{PH1:t(i[1])})}</span>
|
|
@@ -351,18 +351,18 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
351
351
|
${n}
|
|
352
352
|
<div class="histogram-bar good-bg" style="width: ${this.#dt("good")}"></div>
|
|
353
353
|
<div class="histogram-percent">${this.#at("good")}</div>
|
|
354
|
-
${
|
|
354
|
+
${s}
|
|
355
355
|
<div class="histogram-bar needs-improvement-bg" style="width: ${this.#dt("needs-improvement")}"></div>
|
|
356
356
|
<div class="histogram-percent">${this.#at("needs-improvement")}</div>
|
|
357
|
-
${
|
|
357
|
+
${r}
|
|
358
358
|
<div class="histogram-bar poor-bg" style="width: ${this.#dt("poor")}"></div>
|
|
359
359
|
<div class="histogram-percent">${this.#at("poor")}</div>
|
|
360
360
|
</div>
|
|
361
361
|
`:wt`
|
|
362
362
|
<div class="bucket-summaries">
|
|
363
363
|
${n}
|
|
364
|
-
${r}
|
|
365
364
|
${s}
|
|
365
|
+
${r}
|
|
366
366
|
</div>
|
|
367
367
|
`}#ht(e){const i=e.every((e=>void 0!==e[2]));return wt`
|
|
368
368
|
<hr class="divider">
|
|
@@ -388,7 +388,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
388
388
|
</div>
|
|
389
389
|
`))}
|
|
390
390
|
</div>
|
|
391
|
-
`}#i=()=>{const e=g.CrUXManager.instance().getConfigSetting().get().enabled,t=this.#Ze(),i=this.#et(),o=this.#tt(),a=this.#Xe(),l=this.#Je(),d=
|
|
391
|
+
`}#i=()=>{const e=g.CrUXManager.instance().getConfigSetting().get().enabled,t=this.#Ze(),i=this.#et(),o=this.#tt(),a=this.#Xe(),l=this.#Je(),d=ut(this.#st(!0),i,a,l),c=ut(this.#st(!1),o,a,l),h=wt`
|
|
392
392
|
<div class="metric-card">
|
|
393
393
|
<h3 class="title">
|
|
394
394
|
${this.#Ye()}
|
|
@@ -397,7 +397,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
397
397
|
title=${this.#Qe()}
|
|
398
398
|
.iconName=${"help"}
|
|
399
399
|
.variant=${"icon"}
|
|
400
|
-
@click=${()=>
|
|
400
|
+
@click=${()=>s.UIUtils.openInNewTab(t)}
|
|
401
401
|
></devtools-button>
|
|
402
402
|
</h3>
|
|
403
403
|
<div tabindex="0" class="metric-values-section"
|
|
@@ -430,7 +430,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
430
430
|
${this.#ot()}
|
|
431
431
|
<hr class="divider">
|
|
432
432
|
${this.#ct()}
|
|
433
|
-
${i&&this.#
|
|
433
|
+
${i&&this.#Ve.phases?this.#ht(this.#Ve.phases):St}
|
|
434
434
|
</div>
|
|
435
435
|
</div>
|
|
436
436
|
</div>
|
|
@@ -438,14 +438,14 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
438
438
|
</div>
|
|
439
439
|
${e?wt`<hr class="divider">`:St}
|
|
440
440
|
${this.#nt()}
|
|
441
|
-
${this.#
|
|
441
|
+
${this.#Ve.warnings?.map((e=>wt`
|
|
442
442
|
<div class="warning">${e}</div>
|
|
443
443
|
`))}
|
|
444
|
-
${this.#
|
|
444
|
+
${this.#rt()}
|
|
445
445
|
<slot name="extra-info"></slot>
|
|
446
446
|
</div>
|
|
447
|
-
`;s.render(h,this.#e,{host:this})}}customElements.define("devtools-metric-card",Ct);var $t=Object.freeze({__proto__:null,MetricCard:Ct});const{html:Pt}=s;function Lt(e){const t=C.Marked.lexer(e);return Pt`<devtools-markdown-view .data=${{tokens:t}}></devtools-markdown-view>`}var Rt={cssText:`.container{container-type:inline-size;height:100%;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-regular);user-select:text}.live-metrics-view{--min-main-area-size:60%;background-color:var(--sys-color-cdt-base-container);display:flex;flex-direction:row;width:100%;height:100%}.live-metrics,\n.next-steps{padding:16px;height:100%;overflow-y:auto;box-sizing:border-box}.live-metrics{flex:1;display:flex;flex-direction:column}.next-steps{flex:0 0 336px;box-sizing:border-box;border:none;border-left:1px solid var(--sys-color-divider)}@container (max-width: 650px){.live-metrics-view{flex-direction:column}.next-steps{flex-basis:40%;border:none;border-top:1px solid var(--sys-color-divider)}}.metric-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));width:100%}.section-title{font-size:var(--sys-typescale-headline4-size);line-height:var(--sys-typescale-headline4-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0;margin-bottom:10px}.settings-card{border-radius:var(--sys-shape-corner-small);padding:14px 16px 16px;background-color:var(--sys-color-surface3);margin-bottom:16px}.record-action-card{border-radius:var(--sys-shape-corner-small);padding:12px 16px 12px 12px;background-color:var(--sys-color-surface3);margin-bottom:16px}.card-title{font-size:var(--sys-typescale-headline5-size);line-height:var(--sys-typescale-headline5-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0}.settings-card .card-title{margin-bottom:4px}.device-toolbar-description{margin-bottom:12px;display:flex}.network-cache-setting{display:inline-block;max-width:max-content}.throttling-recommendation-value{font-weight:var(--ref-typeface-weight-medium)}.related-info{text-wrap:nowrap;margin-top:8px;display:flex}.related-info-label{font-weight:var(--ref-typeface-weight-medium);margin-right:4px}.related-info-link{background-color:var(--sys-color-cdt-base-container);border-radius:2px;padding:0 2px;min-width:0}.local-field-link{display:inline-block;width:fit-content;margin-top:8px}.logs-section{margin-top:24px;display:flex;flex-direction:column;flex:1 0 300px;overflow:hidden;max-height:max-content;--app-color-toolbar-background:transparent}.logs-section-header{display:flex;align-items:center}.interactions-clear{margin-left:4px;vertical-align:sub}.log{padding:0;margin:0;overflow:auto}.log-item{border:none;border-bottom:1px solid var(--sys-color-divider);&.highlight{animation:highlight-fadeout 2s}}.interaction{--phase-table-margin:120px;--details-indicator-width:18px;summary{display:flex;align-items:center;padding:7px 4px;&::before{content:" ";height:14px;width:var(--details-indicator-width);mask-image:var(--image-file-triangle-right);background-color:var(--icon-default);flex-shrink:0}}details[open] summary::before{mask-image:var(--image-file-triangle-down)}}.interaction-type{font-weight:var(--ref-typeface-weight-medium);width:calc(var(--phase-table-margin) - var(--details-indicator-width));flex-shrink:0}.interaction-inp-chip{background-color:var(--sys-color-yellow-bright);color:var(--sys-color-on-yellow);padding:0 2px}.interaction-node{flex-grow:1;margin-right:32px;min-width:0}.interaction-info{width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);margin-right:6px}.interaction-duration{text-align:end;width:max-content;flex-shrink:0;font-weight:var(--ref-typeface-weight-medium)}.layout-shift{display:flex;align-items:flex-start}.layout-shift-score{margin-right:16px;padding:7px 0;width:150px;box-sizing:border-box}.layout-shift-nodes{flex:1;min-width:0}.layout-shift-node{border-bottom:1px solid var(--sys-color-divider);padding:7px 0;&:last-child{border:none}}.record-action{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.shortcut-label{width:max-content;flex-shrink:0}.field-data-option{margin:8px 0;max-width:100%}.field-setup-buttons{margin-top:14px}.field-data-message{margin-bottom:12px}.field-data-warning{margin-top:4px;color:var(--sys-color-error);font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-warning);background-color:var(--sys-color-error);margin-right:4px;flex-shrink:0}}.collection-period-range{font-weight:var(--ref-typeface-weight-medium)}x-link{color:var(--sys-color-primary);text-decoration-line:underline}.environment-option{display:flex;align-items:center;margin-top:8px}.environment-recs-list{margin:0;padding-left:20px}.environment-rec{font-weight:var(--ref-typeface-weight-medium)}.link-to-log{padding:unset;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}@keyframes highlight-fadeout{from{background-color:var(--sys-color-yellow-container)}to{background-color:transparent}}.phase-table{border-top:1px solid var(--sys-color-divider);padding:7px 4px;margin-left:var(--phase-table-margin)}.phase-table-row{display:flex;justify-content:space-between}.phase-table-header-row{font-weight:var(--ref-typeface-weight-medium);margin-bottom:4px}.log-extra-details-button{padding:unset;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}.node-view{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-regular);user-select:text;main{width:300px;max-width:100%;text-align:center;.section-title{margin-bottom:4px}}}.node-description{margin-bottom:12px}\n/*# sourceURL=${import.meta.resolve("./liveMetricsView.css")} */\n`};const Mt=new CSSStyleSheet;Mt.replaceSync(Rt.cssText);const It=new CSSStyleSheet;It.replaceSync(it.cssText);const{html:Et,nothing:Dt}=s,Ht=["AUTO",...g.DEVICE_SCOPE_LIST],Ft={localAndFieldMetrics:"Local and field metrics",localMetrics:"Local metrics",eventLogs:"Interaction and layout shift logs section",interactions:"Interactions",layoutShifts:"Layout shifts",nextSteps:"Next steps",fieldData:"Field data",environmentSettings:"Environment settings",showFieldDataForDevice:"Show field data for device type: {PH1}",notEnoughData:"Not enough data",network:"Network: {PH1}",device:"Device: {PH1}",allDevices:"All devices",desktop:"Desktop",mobile:"Mobile",tablet:"Tablet",auto:"Auto ({PH1})",loadingOption:"{PH1} - Loading…",needsDataOption:"{PH1} - No data",urlOption:"URL",originOption:"Origin",urlOptionWithKey:"URL: {PH1}",originOptionWithKey:"Origin: {PH1}",showFieldDataForPage:"Show field data for {PH1}",tryDisablingThrottling:"75th percentile is too fast to simulate with throttling",tryUsingThrottling:"75th percentile is similar to {PH1} throttling",percentDevices:"{PH1}% mobile, {PH2}% desktop",useDeviceToolbar:"Use the [device toolbar](https://developer.chrome.com/docs/devtools/device-mode) and configure throttling to simulate real user environments and identify more performance issues.",disableNetworkCache:"Disable network cache",lcpElement:"LCP element",inpInteractionLink:"INP interaction",worstCluster:"Worst cluster",numShifts:"{shiftCount, plural,\n =1 {{shiftCount} shift}\n other {{shiftCount} shifts}\n }",collectionPeriod:"Collection period: {PH1}",dateRange:"{PH1} - {PH2}",seeHowYourLocalMetricsCompare:"See how your local metrics compare to real user data in the {PH1}.",localFieldLearnMoreLink:"Learn more about local and field data",localFieldLearnMoreTooltip:"Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices.",interactionExcluded:"INP is calculated using the 98th percentile of interaction delays, so some interaction delays may be larger than the INP value.",clearCurrentLog:"Clear the current log",timeToFirstByte:"Time to first byte",resourceLoadDelay:"Resource load delay",resourceLoadDuration:"Resource load duration",elementRenderDelay:"Element render delay",inputDelay:"Input delay",processingDuration:"Processing duration",presentationDelay:"Presentation delay",inpInteraction:"The INP interaction is at the 98th percentile of interaction delays.",showInpInteraction:"Go to the INP interaction.",showClsCluster:"Go to worst layout shift cluster.",phase:"Phase",duration:"Local duration (ms)",logToConsole:"Log additional interaction data to the console",nodePerformanceTimeline:"Node performance",nodeClickToRecord:"Record a performance timeline of the connected Node process."},Nt=t.i18n.registerUIStrings("panels/timeline/components/LiveMetricsView.ts",Ft),zt=t.i18n.getLocalizedString.bind(void 0,Nt);class Ot extends T.LegacyWrapper.WrappableComponent{#e=this.attachShadow({mode:"open"});#gt=!1;#ut;#pt;#mt;#vt=new Map;#bt=[];#yt=g.CrUXManager.instance();#ft;#wt=null;#St;#xt;#kt;#Tt;#Ct;#$t=!1;#Pt=x.DeviceModeModel.DeviceModeModel.tryInstance();constructor(){super(),this.#St=S.Runtime.experiments.isEnabled("react-native-specific-ui"),this.#ft=r.ActionRegistry.ActionRegistry.instance().getAction("timeline.toggle-recording"),this.#St||(this.#wt=r.ActionRegistry.ActionRegistry.instance().getAction("timeline.record-reload"))}set isNode(e){this.#gt=e,n.ScheduledRender.scheduleRender(this,this.#i)}#Lt(e){this.#ut=e.data.lcp,this.#pt=e.data.cls,this.#mt=e.data.inp;const t=this.#bt.length<e.data.layoutShifts.length;this.#bt=[...e.data.layoutShifts];const i=this.#vt.size<e.data.interactions.size;this.#vt=new Map(e.data.interactions);const r=n.ScheduledRender.scheduleRender(this,this.#i);i&&this.#Tt&&this.#Rt(r,this.#Tt),t&&this.#Ct&&this.#Rt(r,this.#Ct)}#Rt(e,t){if(!t.checkVisibility())return;(Math.abs(t.scrollHeight-t.clientHeight-t.scrollTop)<=1||this.#$t)&&e.then((()=>{requestAnimationFrame((()=>{this.#$t=!0,t.addEventListener("scrollend",(()=>{this.#$t=!1}),{once:!0}),t.scrollTo({top:t.scrollHeight,behavior:"smooth"})}))}))}#Mt(){n.ScheduledRender.scheduleRender(this,this.#i)}#It(){n.ScheduledRender.scheduleRender(this,this.#i)}async#Et(){await this.#yt.refresh(),n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[Mt,It];const e=k.LiveMetrics.instance();e.addEventListener("status",this.#Lt,this);const t=g.CrUXManager.instance();t.addEventListener("field-data-changed",this.#Mt,this),this.#Pt?.addEventListener("Updated",this.#It,this),t.getConfigSetting().get().enabled&&this.#Et(),this.#ut=e.lcpValue,this.#pt=e.clsValue,this.#mt=e.inpValue,this.#vt=e.interactions,this.#bt=e.layoutShifts,n.ScheduledRender.scheduleRender(this,this.#i)}disconnectedCallback(){k.LiveMetrics.instance().removeEventListener("status",this.#Lt,this);g.CrUXManager.instance().removeEventListener("field-data-changed",this.#Mt,this),this.#Pt?.removeEventListener("Updated",this.#It,this)}#Dt(){const e=this.#yt.getSelectedFieldMetricData("largest_contentful_paint_image_time_to_first_byte")?.percentiles?.p75,t=this.#yt.getSelectedFieldMetricData("largest_contentful_paint_image_resource_load_delay")?.percentiles?.p75,n=this.#yt.getSelectedFieldMetricData("largest_contentful_paint_image_resource_load_duration")?.percentiles?.p75,r=this.#yt.getSelectedFieldMetricData("largest_contentful_paint_image_element_render_delay")?.percentiles?.p75;return"number"!=typeof e||"number"!=typeof t||"number"!=typeof n||"number"!=typeof r?null:{timeToFirstByte:i.Types.Timing.Milli(e),resourceLoadDelay:i.Types.Timing.Milli(t),resourceLoadTime:i.Types.Timing.Milli(n),elementRenderDelay:i.Types.Timing.Milli(r)}}#Ht(){const e=this.#yt.getSelectedFieldMetricData("largest_contentful_paint"),t=this.#ut?.nodeRef?.link,i=this.#ut?.phases,n=this.#Dt();return Et`
|
|
448
|
-
<devtools-metric-card .data=${{metric:"LCP",localValue:this.#
|
|
447
|
+
`;r.render(h,this.#e,{host:this})}}customElements.define("devtools-metric-card",Ct);var $t=Object.freeze({__proto__:null,MetricCard:Ct});const{html:Pt}=r;function Lt(e){const t=C.Marked.lexer(e);return Pt`<devtools-markdown-view .data=${{tokens:t}}></devtools-markdown-view>`}var Rt={cssText:`.container{container-type:inline-size;height:100%;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-regular);user-select:text}.live-metrics-view{--min-main-area-size:60%;background-color:var(--sys-color-cdt-base-container);display:flex;flex-direction:row;width:100%;height:100%}.live-metrics,\n.next-steps{padding:16px;height:100%;overflow-y:auto;box-sizing:border-box}.live-metrics{flex:1;display:flex;flex-direction:column}.next-steps{flex:0 0 336px;box-sizing:border-box;border:none;border-left:1px solid var(--sys-color-divider)}@container (max-width: 650px){.live-metrics-view{flex-direction:column}.next-steps{flex-basis:40%;border:none;border-top:1px solid var(--sys-color-divider)}}.metric-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));width:100%}.section-title{font-size:var(--sys-typescale-headline4-size);line-height:var(--sys-typescale-headline4-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0;margin-bottom:10px}.settings-card{border-radius:var(--sys-shape-corner-small);padding:14px 16px 16px;background-color:var(--sys-color-surface3);margin-bottom:16px}.record-action-card{border-radius:var(--sys-shape-corner-small);padding:12px 16px 12px 12px;background-color:var(--sys-color-surface3);margin-bottom:16px}.card-title{font-size:var(--sys-typescale-headline5-size);line-height:var(--sys-typescale-headline5-line-height);font-weight:var(--ref-typeface-weight-medium);margin:0}.settings-card .card-title{margin-bottom:4px}.device-toolbar-description{margin-bottom:12px;display:flex}.network-cache-setting{display:inline-block;max-width:max-content}.throttling-recommendation-value{font-weight:var(--ref-typeface-weight-medium)}.related-info{text-wrap:nowrap;margin-top:8px;display:flex}.related-info-label{font-weight:var(--ref-typeface-weight-medium);margin-right:4px}.related-info-link{background-color:var(--sys-color-cdt-base-container);border-radius:2px;padding:0 2px;min-width:0}.local-field-link{display:inline-block;width:fit-content;margin-top:8px}.logs-section{margin-top:24px;display:flex;flex-direction:column;flex:1 0 300px;overflow:hidden;max-height:max-content;--app-color-toolbar-background:transparent}.logs-section-header{display:flex;align-items:center}.interactions-clear{margin-left:4px;vertical-align:sub}.log{padding:0;margin:0;overflow:auto}.log-item{border:none;border-bottom:1px solid var(--sys-color-divider);&.highlight{animation:highlight-fadeout 2s}}.interaction{--phase-table-margin:120px;--details-indicator-width:18px;summary{display:flex;align-items:center;padding:7px 4px;&::before{content:" ";height:14px;width:var(--details-indicator-width);mask-image:var(--image-file-triangle-right);background-color:var(--icon-default);flex-shrink:0}}details[open] summary::before{mask-image:var(--image-file-triangle-down)}}.interaction-type{font-weight:var(--ref-typeface-weight-medium);width:calc(var(--phase-table-margin) - var(--details-indicator-width));flex-shrink:0}.interaction-inp-chip{background-color:var(--sys-color-yellow-bright);color:var(--sys-color-on-yellow);padding:0 2px}.interaction-node{flex-grow:1;margin-right:32px;min-width:0}.interaction-info{width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);margin-right:6px}.interaction-duration{text-align:end;width:max-content;flex-shrink:0;font-weight:var(--ref-typeface-weight-medium)}.layout-shift{display:flex;align-items:flex-start}.layout-shift-score{margin-right:16px;padding:7px 0;width:150px;box-sizing:border-box}.layout-shift-nodes{flex:1;min-width:0}.layout-shift-node{border-bottom:1px solid var(--sys-color-divider);padding:7px 0;&:last-child{border:none}}.record-action{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.shortcut-label{width:max-content;flex-shrink:0}.field-data-option{margin:8px 0;max-width:100%}.field-setup-buttons{margin-top:14px}.field-data-message{margin-bottom:12px}.field-data-warning{margin-top:4px;color:var(--sys-color-error);font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);display:flex;&::before{content:" ";width:var(--sys-typescale-body4-line-height);height:var(--sys-typescale-body4-line-height);mask-size:var(--sys-typescale-body4-line-height);mask-image:var(--image-file-warning);background-color:var(--sys-color-error);margin-right:4px;flex-shrink:0}}.collection-period-range{font-weight:var(--ref-typeface-weight-medium)}x-link{color:var(--sys-color-primary);text-decoration-line:underline}.environment-option{display:flex;align-items:center;margin-top:8px}.environment-recs-list{margin:0;padding-left:20px}.environment-rec{font-weight:var(--ref-typeface-weight-medium)}.link-to-log{padding:unset;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}@keyframes highlight-fadeout{from{background-color:var(--sys-color-yellow-container)}to{background-color:transparent}}.phase-table{border-top:1px solid var(--sys-color-divider);padding:7px 4px;margin-left:var(--phase-table-margin)}.phase-table-row{display:flex;justify-content:space-between}.phase-table-header-row{font-weight:var(--ref-typeface-weight-medium);margin-bottom:4px}.log-extra-details-button{padding:unset;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}.node-view{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--sys-typescale-body4-size);line-height:var(--sys-typescale-body4-line-height);font-weight:var(--ref-typeface-weight-regular);user-select:text;main{width:300px;max-width:100%;text-align:center;.section-title{margin-bottom:4px}}}.node-description{margin-bottom:12px}\n/*# sourceURL=${import.meta.resolve("./liveMetricsView.css")} */\n`};const It=new CSSStyleSheet;It.replaceSync(Rt.cssText);const Mt=new CSSStyleSheet;Mt.replaceSync(it.cssText);const{html:Et,nothing:Dt}=r,Ht=["AUTO",...g.DEVICE_SCOPE_LIST],Ft={localAndFieldMetrics:"Local and field metrics",localMetrics:"Local metrics",eventLogs:"Interaction and layout shift logs section",interactions:"Interactions",layoutShifts:"Layout shifts",nextSteps:"Next steps",fieldData:"Field data",environmentSettings:"Environment settings",showFieldDataForDevice:"Show field data for device type: {PH1}",notEnoughData:"Not enough data",network:"Network: {PH1}",device:"Device: {PH1}",allDevices:"All devices",desktop:"Desktop",mobile:"Mobile",tablet:"Tablet",auto:"Auto ({PH1})",loadingOption:"{PH1} - Loading…",needsDataOption:"{PH1} - No data",urlOption:"URL",originOption:"Origin",urlOptionWithKey:"URL: {PH1}",originOptionWithKey:"Origin: {PH1}",showFieldDataForPage:"Show field data for {PH1}",tryDisablingThrottling:"75th percentile is too fast to simulate with throttling",tryUsingThrottling:"75th percentile is similar to {PH1} throttling",percentDevices:"{PH1}% mobile, {PH2}% desktop",useDeviceToolbar:"Use the [device toolbar](https://developer.chrome.com/docs/devtools/device-mode) and configure throttling to simulate real user environments and identify more performance issues.",disableNetworkCache:"Disable network cache",lcpElement:"LCP element",inpInteractionLink:"INP interaction",worstCluster:"Worst cluster",numShifts:"{shiftCount, plural,\n =1 {{shiftCount} shift}\n other {{shiftCount} shifts}\n }",collectionPeriod:"Collection period: {PH1}",dateRange:"{PH1} - {PH2}",seeHowYourLocalMetricsCompare:"See how your local metrics compare to real user data in the {PH1}.",localFieldLearnMoreLink:"Learn more about local and field data",localFieldLearnMoreTooltip:"Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices.",interactionExcluded:"INP is calculated using the 98th percentile of interaction delays, so some interaction delays may be larger than the INP value.",clearCurrentLog:"Clear the current log",timeToFirstByte:"Time to first byte",resourceLoadDelay:"Resource load delay",resourceLoadDuration:"Resource load duration",elementRenderDelay:"Element render delay",inputDelay:"Input delay",processingDuration:"Processing duration",presentationDelay:"Presentation delay",inpInteraction:"The INP interaction is at the 98th percentile of interaction delays.",showInpInteraction:"Go to the INP interaction.",showClsCluster:"Go to worst layout shift cluster.",phase:"Phase",duration:"Local duration (ms)",logToConsole:"Log additional interaction data to the console",nodePerformanceTimeline:"Node performance",nodeClickToRecord:"Record a performance timeline of the connected Node process."},Nt=t.i18n.registerUIStrings("panels/timeline/components/LiveMetricsView.ts",Ft),zt=t.i18n.getLocalizedString.bind(void 0,Nt);class Ot extends T.LegacyWrapper.WrappableComponent{#e=this.attachShadow({mode:"open"});#gt=!1;#pt;#ut;#mt;#vt=new Map;#bt=[];#ft=g.CrUXManager.instance();#yt;#wt=null;#St;#xt;#kt;#Tt;#Ct;#$t=!1;#Pt=x.DeviceModeModel.DeviceModeModel.tryInstance();constructor(){super(),this.#St=S.Runtime.experiments.isEnabled("react-native-specific-ui"),this.#yt=s.ActionRegistry.ActionRegistry.instance().getAction("timeline.toggle-recording"),this.#St||(this.#wt=s.ActionRegistry.ActionRegistry.instance().getAction("timeline.record-reload"))}set isNode(e){this.#gt=e,n.ScheduledRender.scheduleRender(this,this.#i)}#Lt(e){this.#pt=e.data.lcp,this.#ut=e.data.cls,this.#mt=e.data.inp;const t=this.#bt.length<e.data.layoutShifts.length;this.#bt=[...e.data.layoutShifts];const i=this.#vt.size<e.data.interactions.size;this.#vt=new Map(e.data.interactions);const s=n.ScheduledRender.scheduleRender(this,this.#i);i&&this.#Tt&&this.#Rt(s,this.#Tt),t&&this.#Ct&&this.#Rt(s,this.#Ct)}#Rt(e,t){if(!t.checkVisibility())return;(Math.abs(t.scrollHeight-t.clientHeight-t.scrollTop)<=1||this.#$t)&&e.then((()=>{requestAnimationFrame((()=>{this.#$t=!0,t.addEventListener("scrollend",(()=>{this.#$t=!1}),{once:!0}),t.scrollTo({top:t.scrollHeight,behavior:"smooth"})}))}))}#It(){n.ScheduledRender.scheduleRender(this,this.#i)}#Mt(){n.ScheduledRender.scheduleRender(this,this.#i)}async#Et(){await this.#ft.refresh(),n.ScheduledRender.scheduleRender(this,this.#i)}connectedCallback(){this.#e.adoptedStyleSheets=[It,Mt];const e=k.LiveMetrics.instance();e.addEventListener("status",this.#Lt,this);const t=g.CrUXManager.instance();t.addEventListener("field-data-changed",this.#It,this),this.#Pt?.addEventListener("Updated",this.#Mt,this),t.getConfigSetting().get().enabled&&this.#Et(),this.#pt=e.lcpValue,this.#ut=e.clsValue,this.#mt=e.inpValue,this.#vt=e.interactions,this.#bt=e.layoutShifts,n.ScheduledRender.scheduleRender(this,this.#i)}disconnectedCallback(){k.LiveMetrics.instance().removeEventListener("status",this.#Lt,this);g.CrUXManager.instance().removeEventListener("field-data-changed",this.#It,this),this.#Pt?.removeEventListener("Updated",this.#Mt,this)}#Dt(){const e=this.#ft.getSelectedFieldMetricData("largest_contentful_paint_image_time_to_first_byte")?.percentiles?.p75,t=this.#ft.getSelectedFieldMetricData("largest_contentful_paint_image_resource_load_delay")?.percentiles?.p75,n=this.#ft.getSelectedFieldMetricData("largest_contentful_paint_image_resource_load_duration")?.percentiles?.p75,s=this.#ft.getSelectedFieldMetricData("largest_contentful_paint_image_element_render_delay")?.percentiles?.p75;return"number"!=typeof e||"number"!=typeof t||"number"!=typeof n||"number"!=typeof s?null:{timeToFirstByte:i.Types.Timing.Milli(e),resourceLoadDelay:i.Types.Timing.Milli(t),resourceLoadTime:i.Types.Timing.Milli(n),elementRenderDelay:i.Types.Timing.Milli(s)}}#Ht(){const e=this.#ft.getSelectedFieldMetricData("largest_contentful_paint"),t=this.#pt?.nodeRef?.link,i=this.#pt?.phases,n=this.#Dt();return Et`
|
|
448
|
+
<devtools-metric-card .data=${{metric:"LCP",localValue:this.#pt?.value,fieldValue:e?.percentiles?.p75,histogram:e?.histogram,tooltipContainer:this.#kt,warnings:this.#pt?.warnings,phases:i&&[[zt(Ft.timeToFirstByte),i.timeToFirstByte,n?.timeToFirstByte],[zt(Ft.resourceLoadDelay),i.resourceLoadDelay,n?.resourceLoadDelay],[zt(Ft.resourceLoadDuration),i.resourceLoadTime,n?.resourceLoadTime],[zt(Ft.elementRenderDelay),i.elementRenderDelay,n?.elementRenderDelay]]}}>
|
|
449
449
|
${t?Et`
|
|
450
450
|
<div class="related-info" slot="extra-info">
|
|
451
451
|
<span class="related-info-label">${zt(Ft.lcpElement)}</span>
|
|
@@ -453,8 +453,8 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
453
453
|
</div>
|
|
454
454
|
`:Dt}
|
|
455
455
|
</devtools-metric-card>
|
|
456
|
-
`}#Ft(){const e=this.#
|
|
457
|
-
<devtools-metric-card .data=${{metric:"CLS",localValue:this.#
|
|
456
|
+
`}#Ft(){const e=this.#ft.getSelectedFieldMetricData("cumulative_layout_shift"),t=new Set(this.#ut?.clusterShiftIds||[]),i=t.size>0&&this.#bt.some((e=>t.has(e.uniqueLayoutShiftId)));return Et`
|
|
457
|
+
<devtools-metric-card .data=${{metric:"CLS",localValue:this.#ut?.value,fieldValue:e?.percentiles?.p75,histogram:e?.histogram,tooltipContainer:this.#kt,warnings:this.#ut?.warnings}}>
|
|
458
458
|
${i?Et`
|
|
459
459
|
<div class="related-info" slot="extra-info">
|
|
460
460
|
<span class="related-info-label">${zt(Ft.worstCluster)}</span>
|
|
@@ -467,7 +467,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
467
467
|
</div>
|
|
468
468
|
`:Dt}
|
|
469
469
|
</devtools-metric-card>
|
|
470
|
-
`}#zt(){const e=this.#
|
|
470
|
+
`}#zt(){const e=this.#ft.getSelectedFieldMetricData("interaction_to_next_paint"),t=this.#mt?.phases,i=this.#mt&&this.#vt.get(this.#mt.interactionId);return Et`
|
|
471
471
|
<devtools-metric-card .data=${{metric:"INP",localValue:this.#mt?.value,fieldValue:e?.percentiles?.p75,histogram:e?.histogram,tooltipContainer:this.#kt,warnings:this.#mt?.warnings,phases:t&&[[zt(Ft.inputDelay),t.inputDelay],[zt(Ft.processingDuration),t.processingDuration],[zt(Ft.presentationDelay),t.presentationDelay]]}}>
|
|
472
472
|
${i?Et`
|
|
473
473
|
<div class="related-info" slot="extra-info">
|
|
@@ -481,14 +481,14 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
481
481
|
</div>
|
|
482
482
|
`:Dt}
|
|
483
483
|
</devtools-metric-card>
|
|
484
|
-
`}#
|
|
484
|
+
`}#At(e){return Et`
|
|
485
485
|
<div class="record-action">
|
|
486
486
|
<devtools-button @click=${function(){e.execute()}} .data=${{variant:"text",size:"REGULAR",iconName:e.icon(),title:e.title(),jslogContext:e.id()}}>
|
|
487
487
|
${e.title()}
|
|
488
488
|
</devtools-button>
|
|
489
|
-
<span class="shortcut-label">${
|
|
489
|
+
<span class="shortcut-label">${s.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(e.id())}</span>
|
|
490
490
|
</div>
|
|
491
|
-
`}#
|
|
491
|
+
`}#_t(){const e=this.#ft.getSelectedFieldMetricData("round_trip_time");if(!e?.percentiles)return null;const t=Number(e.percentiles.p75);if(!Number.isFinite(t))return null;if(t<60)return zt(Ft.tryDisablingThrottling);const i=c.ThrottlingPresets.ThrottlingPresets.getRecommendedNetworkPreset(t);if(!i)return null;const n="function"==typeof i.title?i.title():i.title;return zt(Ft.tryUsingThrottling,{PH1:n})}#Ut(){const e=this.#ft.getFieldResponse(this.#ft.fieldPageScope,"ALL")?.record.metrics.form_factors?.fractions;return e?zt(Ft.percentDevices,{PH1:Math.round(100*e.phone),PH2:Math.round(100*e.desktop)}):null}#Bt(){const e=this.#ft.getConfigSetting().get().enabled,i=document.createElement("span");i.classList.add("environment-rec"),i.textContent=this.#Ut()||zt(Ft.notEnoughData);const n=document.createElement("span");n.classList.add("environment-rec"),n.textContent=this.#_t()||zt(Ft.notEnoughData);const s=function(){let e=l.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;0===e.rate()&&(e=l.CPUThrottlingManager.MidTierThrottlingOption);let t=null;const i=g.CrUXManager.instance().getSelectedFieldMetricData("round_trip_time");if(i?.percentiles){const e=Number(i.percentiles.p75);t=c.ThrottlingPresets.ThrottlingPresets.getRecommendedNetworkPreset(e)}return{cpuOption:e,networkConditions:t}}();return Et`
|
|
492
492
|
<h3 class="card-title">${zt(Ft.environmentSettings)}</h3>
|
|
493
493
|
<div class="device-toolbar-description">${Lt(zt(Ft.useDeviceToolbar))}</div>
|
|
494
494
|
${e?Et`
|
|
@@ -498,10 +498,10 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
498
498
|
</ul>
|
|
499
499
|
`:Dt}
|
|
500
500
|
<div class="environment-option">
|
|
501
|
-
<devtools-cpu-throttling-selector .recommendedOption=${
|
|
501
|
+
<devtools-cpu-throttling-selector .recommendedOption=${s.cpuOption}></devtools-cpu-throttling-selector>
|
|
502
502
|
</div>
|
|
503
503
|
<div class="environment-option">
|
|
504
|
-
<devtools-network-throttling-selector .recommendedConditions=${
|
|
504
|
+
<devtools-network-throttling-selector .recommendedConditions=${s.networkConditions}></devtools-network-throttling-selector>
|
|
505
505
|
</div>
|
|
506
506
|
<div class="environment-option">
|
|
507
507
|
<setting-checkbox
|
|
@@ -509,33 +509,33 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
509
509
|
.data=${{setting:a.Settings.Settings.instance().moduleSetting("cache-disabled"),textOverride:zt(Ft.disableNetworkCache)}}
|
|
510
510
|
></setting-checkbox>
|
|
511
511
|
</div>
|
|
512
|
-
`}#
|
|
512
|
+
`}#Vt(e){const t=this.#ft.pageResult?.[`${e}-ALL`]?.record.key[e];if(t)return zt("url"===e?Ft.urlOptionWithKey:Ft.originOptionWithKey,{PH1:t});const i=zt("url"===e?Ft.urlOption:Ft.originOption);return zt(Ft.needsDataOption,{PH1:i})}#qt(e){"url"===e.itemValue?this.#ft.fieldPageScope="url":this.#ft.fieldPageScope="origin",n.ScheduledRender.scheduleRender(this,this.#i)}#jt(){if(!this.#ft.getConfigSetting().get().enabled)return r.nothing;const e=this.#Vt("url"),t=this.#Vt("origin"),i="url"===this.#ft.fieldPageScope?e:t,n=zt(Ft.showFieldDataForPage,{PH1:i}),s=!this.#ft.pageResult?.["url-ALL"]&&!this.#ft.pageResult?.["origin-ALL"];return Et`
|
|
513
513
|
<devtools-select-menu
|
|
514
514
|
id="page-scope-select"
|
|
515
515
|
class="field-data-option"
|
|
516
|
-
@selectmenuselected=${this.#
|
|
516
|
+
@selectmenuselected=${this.#qt}
|
|
517
517
|
.showDivider=${!0}
|
|
518
518
|
.showArrow=${!0}
|
|
519
519
|
.sideButton=${!1}
|
|
520
520
|
.showSelectedItem=${!0}
|
|
521
521
|
.buttonTitle=${i}
|
|
522
|
-
.disabled=${
|
|
522
|
+
.disabled=${s}
|
|
523
523
|
title=${n}
|
|
524
524
|
>
|
|
525
525
|
<devtools-menu-item
|
|
526
526
|
.value=${"url"}
|
|
527
|
-
.selected=${"url"===this.#
|
|
527
|
+
.selected=${"url"===this.#ft.fieldPageScope}
|
|
528
528
|
>
|
|
529
529
|
${e}
|
|
530
530
|
</devtools-menu-item>
|
|
531
531
|
<devtools-menu-item
|
|
532
532
|
.value=${"origin"}
|
|
533
|
-
.selected=${"origin"===this.#
|
|
533
|
+
.selected=${"origin"===this.#ft.fieldPageScope}
|
|
534
534
|
>
|
|
535
535
|
${t}
|
|
536
536
|
</devtools-menu-item>
|
|
537
537
|
</devtools-select-menu>
|
|
538
|
-
`}#Wt(e){switch(e){case"ALL":return zt(Ft.allDevices);case"DESKTOP":return zt(Ft.desktop);case"PHONE":return zt(Ft.mobile);case"TABLET":return zt(Ft.tablet)}}#Kt(e){let t;if("AUTO"===e){const i=this.#
|
|
538
|
+
`}#Wt(e){switch(e){case"ALL":return zt(Ft.allDevices);case"DESKTOP":return zt(Ft.desktop);case"PHONE":return zt(Ft.mobile);case"TABLET":return zt(Ft.tablet)}}#Kt(e){let t;if("AUTO"===e){const i=this.#ft.resolveDeviceOptionToScope(e),n=this.#Wt(i);t=zt(Ft.auto,{PH1:n})}else t=this.#Wt(e);if(!this.#ft.pageResult)return zt(Ft.loadingOption,{PH1:t});return this.#ft.getSelectedFieldResponse()?t:zt(Ft.needsDataOption,{PH1:t})}#Gt(e){this.#ft.fieldDeviceOption=e.itemValue,n.ScheduledRender.scheduleRender(this,this.#i)}#Yt(){if(!this.#ft.getConfigSetting().get().enabled)return r.nothing;const e=!this.#ft.getFieldResponse(this.#ft.fieldPageScope,"ALL"),t=this.#Kt(this.#ft.fieldDeviceOption);return Et`
|
|
539
539
|
<devtools-select-menu
|
|
540
540
|
id="device-scope-select"
|
|
541
541
|
class="field-data-option"
|
|
@@ -551,20 +551,20 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
551
551
|
${Ht.map((e=>Et`
|
|
552
552
|
<devtools-menu-item
|
|
553
553
|
.value=${e}
|
|
554
|
-
.selected=${this.#
|
|
554
|
+
.selected=${this.#ft.fieldDeviceOption===e}
|
|
555
555
|
>
|
|
556
556
|
${this.#Kt(e)}
|
|
557
557
|
</devtools-menu-item>
|
|
558
558
|
`))}
|
|
559
559
|
</devtools-select-menu>
|
|
560
|
-
`}#Xt(){const e=this.#
|
|
560
|
+
`}#Xt(){const e=this.#ft.getSelectedFieldResponse();if(!e)return null;const{firstDate:t,lastDate:i}=e.record.collectionPeriod,n=new Date(t.year,t.month-1,t.day),s=new Date(i.year,i.month-1,i.day),r={year:"numeric",month:"short",day:"numeric"};return zt(Ft.dateRange,{PH1:n.toLocaleDateString(void 0,r),PH2:s.toLocaleDateString(void 0,r)})}#Jt(){const e=this.#Xt(),i=document.createElement("span");i.classList.add("collection-period-range"),i.textContent=e||zt(Ft.notEnoughData);const n=t.i18n.getFormatLocalizedString(Nt,Ft.collectionPeriod,{PH1:i}),s=this.#ft.pageResult?.warnings||[];return Et`
|
|
561
561
|
<div class="field-data-message">
|
|
562
562
|
<div>${n}</div>
|
|
563
|
-
${
|
|
563
|
+
${s.map((e=>Et`
|
|
564
564
|
<div class="field-data-warning">${e}</div>
|
|
565
565
|
`))}
|
|
566
566
|
</div>
|
|
567
|
-
`}#Zt(){if(this.#
|
|
567
|
+
`}#Zt(){if(this.#ft.getConfigSetting().get().enabled)return this.#Jt();const e=s.XLink.XLink.create("https://developer.chrome.com/docs/crux",t.i18n.lockedString("Chrome UX Report")),i=t.i18n.getFormatLocalizedString(Nt,Ft.seeHowYourLocalMetricsCompare,{PH1:e});return Et`
|
|
568
568
|
<div class="field-data-message">${i}</div>
|
|
569
569
|
`}#Qt(){return Et`
|
|
570
570
|
<section class="logs-section" aria-label=${zt(Ft.eventLogs)}>
|
|
@@ -575,18 +575,18 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
575
575
|
${this.#ti()}
|
|
576
576
|
</devtools-live-metrics-logs>
|
|
577
577
|
</section>
|
|
578
|
-
`}async#Ot(e){const t=this.#e.getElementById(e.interactionId);if(!t||!this.#xt)return;this.#xt.selectTab("interactions")&&await
|
|
578
|
+
`}async#Ot(e){const t=this.#e.getElementById(e.interactionId);if(!t||!this.#xt)return;this.#xt.selectTab("interactions")&&await p.write((()=>{t.scrollIntoView({block:"center"}),t.focus(),s.UIUtils.runCSSAnimationOnce(t,"highlight")}))}async#ii(e){await k.LiveMetrics.instance().logInteractionScripts(e)&&await a.Console.Console.instance().showPromise()}#ei(){return this.#vt.size?Et`
|
|
579
579
|
<ol class="log"
|
|
580
580
|
slot="interactions-log-content"
|
|
581
581
|
on-render=${n.Directives.nodeRenderedCallback((e=>{this.#Tt=e}))}
|
|
582
582
|
>
|
|
583
|
-
${this.#vt.values().map((e=>{const i=
|
|
583
|
+
${this.#vt.values().map((e=>{const i=ut("timeline.landing.interaction-event-timing",e.duration,gt,(e=>t.TimeUtilities.preciseMillisToString(e)),{dim:!0}),n=this.#mt&&this.#mt.value<e.duration,s=this.#mt?.interactionId===e.interactionId;return Et`
|
|
584
584
|
<li id=${e.interactionId} class="log-item interaction" tabindex="-1">
|
|
585
585
|
<details>
|
|
586
586
|
<summary>
|
|
587
587
|
<span class="interaction-type">
|
|
588
588
|
${e.interactionType}
|
|
589
|
-
${
|
|
589
|
+
${s?Et`<span class="interaction-inp-chip" title=${zt(Ft.inpInteraction)}>INP</span>`:Dt}
|
|
590
590
|
</span>
|
|
591
591
|
<span class="interaction-node">${e.nodeRef?.link}</span>
|
|
592
592
|
${n?Et`<devtools-icon
|
|
@@ -626,12 +626,12 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
626
626
|
</li>
|
|
627
627
|
`}))}
|
|
628
628
|
</ol>
|
|
629
|
-
`:
|
|
629
|
+
`:r.nothing}async#Nt(e){if(!this.#xt)return;const t=[];for(const i of e){const e=this.#e.getElementById(i);e&&t.push(e)}if(!t.length)return;this.#xt.selectTab("layout-shifts")&&await p.write((()=>{t[0].scrollIntoView({block:"start"}),t[0].focus();for(const e of t)s.UIUtils.runCSSAnimationOnce(e,"highlight")}))}#ti(){return this.#bt.length?Et`
|
|
630
630
|
<ol class="log"
|
|
631
631
|
slot="layout-shifts-log-content"
|
|
632
632
|
on-render=${n.Directives.nodeRenderedCallback((e=>{this.#Ct=e}))}
|
|
633
633
|
>
|
|
634
|
-
${this.#bt.map((e=>{const t=
|
|
634
|
+
${this.#bt.map((e=>{const t=ut("timeline.landing.layout-shift-event-score",e.score,ht,(e=>e.toFixed(4)),{dim:!0});return Et`
|
|
635
635
|
<li id=${e.uniqueLayoutShiftId} class="log-item layout-shift" tabindex="-1">
|
|
636
636
|
<div class="layout-shift-score">Layout shift score: ${t}</div>
|
|
637
637
|
<div class="layout-shift-nodes">
|
|
@@ -642,15 +642,15 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
642
642
|
</li>
|
|
643
643
|
`}))}
|
|
644
644
|
</ol>
|
|
645
|
-
`:
|
|
645
|
+
`:r.nothing}#ni(){return Et`
|
|
646
646
|
<div class="node-view">
|
|
647
647
|
<main>
|
|
648
648
|
<h2 class="section-title">${zt(Ft.nodePerformanceTimeline)}</h2>
|
|
649
649
|
<div class="node-description">${zt(Ft.nodeClickToRecord)}</div>
|
|
650
|
-
<div class="record-action-card">${this.#
|
|
650
|
+
<div class="record-action-card">${this.#At(this.#yt)}</div>
|
|
651
651
|
</main>
|
|
652
652
|
</div>
|
|
653
|
-
`}#i=()=>{if(this.#gt)return void
|
|
653
|
+
`}#i=()=>{if(this.#gt)return void r.render(this.#ni(),this.#e,{host:this});const e=this.#ft.getConfigSetting().get().enabled,t=zt(e?Ft.localAndFieldMetrics:Ft.localMetrics),i=Et`
|
|
654
654
|
<div class="container">
|
|
655
655
|
<div class="live-metrics-view">
|
|
656
656
|
<main class="live-metrics">
|
|
@@ -690,17 +690,17 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
690
690
|
${this.#Bt()}
|
|
691
691
|
</div>
|
|
692
692
|
<div id="record" class="record-action-card">
|
|
693
|
-
${this.#
|
|
693
|
+
${this.#At(this.#yt)}
|
|
694
694
|
</div>
|
|
695
695
|
${null!==this.#wt?Et`<div id="record-page-load" class="record-action-card">
|
|
696
|
-
${this.#
|
|
696
|
+
${this.#At(this.#wt)}
|
|
697
697
|
</div>`:Dt}
|
|
698
698
|
</aside>
|
|
699
699
|
</div>
|
|
700
700
|
</div>
|
|
701
|
-
`;
|
|
701
|
+
`;r.render(i,this.#e,{host:this})}}class At extends s.Widget.WidgetElement{#si;constructor(){super(),this.style.display="contents"}selectTab(e){return!!this.#si&&this.#si.selectTab(e)}#ri(){const e=k.LiveMetrics.instance();switch(this.#si?.selectedTabId){case"interactions":e.clearInteractions();break;case"layout-shifts":e.clearLayoutShifts()}}createWidget(){const e=new s.Widget.Widget(!0,void 0,this);e.contentElement.style.display="contents",this.#si=new s.TabbedPane.TabbedPane;const t=document.createElement("slot");t.name="interactions-log-content";const i=s.Widget.Widget.getOrCreateWidget(t);this.#si.appendTab("interactions",zt(Ft.interactions),i,void 0,void 0,void 0,void 0,void 0,"timeline.landing.interactions-log");const n=document.createElement("slot");n.name="layout-shifts-log-content";const r=s.Widget.Widget.getOrCreateWidget(n);this.#si.appendTab("layout-shifts",zt(Ft.layoutShifts),r,void 0,void 0,void 0,void 0,void 0,"timeline.landing.layout-shifts-log");const o=new s.Toolbar.ToolbarButton(zt(Ft.clearCurrentLog),"clear",void 0,"timeline.landing.clear-log");return o.addEventListener("Click",this.#ri,this),this.#si.rightToolbar().appendToolbarItem(o),this.#si.show(e.contentElement),e}}customElements.define("devtools-live-metrics-view",Ot),customElements.define("devtools-live-metrics-logs",At);var _t=Object.freeze({__proto__:null,LiveMetricsView:Ot}),Ut={cssText:`.network-request-details-title{font-size:13px;padding:8px;display:flex;align-items:center}.network-request-details-title > div{box-sizing:border-box;width:12px;height:12px;border:1px solid var(--sys-color-divider);display:inline-block;margin-right:4px}.network-request-details-content{border-bottom:1px solid var(--sys-color-divider)}.network-request-details-cols{display:flex;justify-content:space-between;width:fit-content}:host{display:contents}.network-request-details-col{width:300px}.column-divider{border-left:1px solid var(--sys-color-divider)}.network-request-details-col.server-timings{display:grid;grid-template-columns:1fr 1fr 1fr;width:fit-content;width:450px;gap:0}.network-request-details-item, .network-request-details-col{padding:5px 10px}.server-timing-column-header{font-weight:var(--ref-typeface-weight-medium)}.network-request-details-row{min-height:min-content;display:flex;justify-content:space-between}.title{color:var(--sys-color-token-subtle);overflow:hidden;padding-right:10px;display:inline-block;vertical-align:top}.value{display:inline-block;user-select:text;text-overflow:ellipsis;overflow:hidden}.devtools-link,\n.timeline-link{color:var(--text-link);text-decoration:underline;outline-offset:2px;padding:0;text-align:left;.elements-disclosure &{color:var(--text-link)}devtools-icon{vertical-align:baseline;color:var(--sys-color-primary)}:focus .selected & devtools-icon{color:var(--sys-color-tonal-container)}&:focus-visible{outline-width:unset}&.invalid-link{color:var(--text-disabled);text-decoration:none}&:not(.devtools-link-prevent-click, .invalid-link){cursor:pointer}@media (forced-colors: active){&:not(.devtools-link-prevent-click){forced-color-adjust:none;color:linktext}&:focus-visible{background:Highlight;color:HighlightText}}}.text-button.link-style,\n.text-button.link-style:hover,\n.text-button.link-style:active{background:none;border:none;font:inherit}\n/*# sourceURL=${import.meta.resolve("./networkRequestDetails.css")} */\n`},Bt={cssText:`.bold{font-weight:bold}.url{margin-left:15px;margin-right:5px}.url--host{color:var(--sys-color-token-subtle)}.priority-row{margin-left:15px}.network-category-chip{box-sizing:border-box;width:10px;height:10px;border:1px solid var(--sys-color-divider);display:inline-block;margin-right:4px}devtools-icon.priority{height:13px;width:13px;color:var(--sys-color-on-surface-subtle)}.render-blocking{margin-left:15px;color:var(--sys-color-error)}.divider{border-top:1px solid var(--sys-color-divider);margin:5px 0}.timings-row{align-self:start;display:flex;align-items:center}.indicator{display:inline-block;width:10px;height:4px;margin-right:5px;border:1px solid var(--sys-color-on-surface-subtle)}.whisker-left{align-self:center;display:inline-flex;width:10px;height:6px;margin-right:5px;border-left:1px solid var(--sys-color-on-surface-subtle)}.whisker-right{align-self:center;display:inline-flex;width:10px;height:6px;margin-right:5px;border-right:1px solid var(--sys-color-on-surface-subtle)}.horizontal{background-color:var(--sys-color-on-surface-subtle);height:1px;width:10px;align-self:center}.time{margin-left:auto;display:inline-block;padding-left:10px}.timings-row--duration{.indicator{border-color:transparent}.time{font-weight:var(--ref-typeface-weight-medium)}}\n/*# sourceURL=${import.meta.resolve("./networkRequestTooltip.css")} */\n`};const Vt=new CSSStyleSheet;Vt.replaceSync(Bt.cssText);const{html:qt}=r,jt={priority:"Priority",duration:"Duration",queuingAndConnecting:"Queuing and connecting",requestSentAndWaiting:"Request sent and waiting",contentDownloading:"Content downloading",waitingOnMainThread:"Waiting on main thread",renderBlocking:"Render blocking"},Wt=t.i18n.registerUIStrings("panels/timeline/components/NetworkRequestTooltip.ts",jt),Kt=t.i18n.getLocalizedString.bind(void 0,Wt);class Gt extends HTMLElement{#e=this.attachShadow({mode:"open"});#Ve={networkRequest:null,entityMapper:null};connectedCallback(){this.#e.adoptedStyleSheets=[Vt],this.#i()}set data(e){this.#Ve.networkRequest!==e.networkRequest&&this.#Ve.entityMapper!==e.entityMapper&&(this.#Ve={networkRequest:e.networkRequest,entityMapper:e.entityMapper},this.#i())}static renderPriorityValue(e){return e.args.data.priority===e.args.data.initialPriority?qt`${$.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.priority)}`:qt`${$.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.initialPriority)}
|
|
702
702
|
<devtools-icon name=${"arrow-forward"} class="priority"></devtools-icon>
|
|
703
|
-
${$.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.priority)}`}static renderTimings(e){const i=e.args.data.syntheticData,n=i.sendStartTime-e.ts,
|
|
703
|
+
${$.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.priority)}`}static renderTimings(e){const i=e.args.data.syntheticData,n=i.sendStartTime-e.ts,s=i.downloadStart-i.sendStartTime,o=i.finishTime-i.downloadStart,a=e.ts+e.dur-i.finishTime,l=dt(e),d={backgroundColor:`color-mix(in srgb, ${l}, hsla(0, 100%, 100%, 0.8))`},c={backgroundColor:l},h=qt`<span class="whisker-left"> <span class="horizontal"></span> </span>`,g=qt`<span class="whisker-right"> <span class="horizontal"></span> </span>`;return qt`
|
|
704
704
|
<div class="timings-row timings-row--duration">
|
|
705
705
|
<span class="indicator"></span>
|
|
706
706
|
${Kt(jt.duration)}
|
|
@@ -712,12 +712,12 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
712
712
|
<span class="time">${t.TimeUtilities.formatMicroSecondsTime(n)}</span>
|
|
713
713
|
</div>
|
|
714
714
|
<div class="timings-row">
|
|
715
|
-
<span class="indicator" style=${
|
|
715
|
+
<span class="indicator" style=${r.Directives.styleMap(d)}></span>
|
|
716
716
|
${Kt(jt.requestSentAndWaiting)}
|
|
717
|
-
<span class="time">${t.TimeUtilities.formatMicroSecondsTime(
|
|
717
|
+
<span class="time">${t.TimeUtilities.formatMicroSecondsTime(s)}</span>
|
|
718
718
|
</div>
|
|
719
719
|
<div class="timings-row">
|
|
720
|
-
<span class="indicator" style=${
|
|
720
|
+
<span class="indicator" style=${r.Directives.styleMap(c)}></span>
|
|
721
721
|
${Kt(jt.contentDownloading)}
|
|
722
722
|
<span class="time">${t.TimeUtilities.formatMicroSecondsTime(o)}</span>
|
|
723
723
|
</div>
|
|
@@ -726,27 +726,27 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
726
726
|
${Kt(jt.waitingOnMainThread)}
|
|
727
727
|
<span class="time">${t.TimeUtilities.formatMicroSecondsTime(a)}</span>
|
|
728
728
|
</div>
|
|
729
|
-
`}#i(){if(!this.#
|
|
729
|
+
`}#i(){if(!this.#Ve.networkRequest)return;const e={backgroundColor:`${dt(this.#Ve.networkRequest)}`},t=new URL(this.#Ve.networkRequest.args.data.url),n=this.#Ve.entityMapper?this.#Ve.entityMapper.entityForEvent(this.#Ve.networkRequest):null,s=f.Helpers.formatOriginWithEntity(t,n,!0),o=qt`
|
|
730
730
|
<div class="performance-card">
|
|
731
731
|
<div class="url">${h.StringUtilities.trimMiddle(t.href.replace(t.origin,""),60)}</div>
|
|
732
|
-
<div class="url url--host">${
|
|
732
|
+
<div class="url url--host">${s}</div>
|
|
733
733
|
|
|
734
734
|
<div class="divider"></div>
|
|
735
|
-
<div class="network-category"><span class="network-category-chip" style=${
|
|
736
|
-
<div class="priority-row">${Kt(jt.priority)}: ${Gt.renderPriorityValue(this.#
|
|
737
|
-
${i.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#
|
|
735
|
+
<div class="network-category"><span class="network-category-chip" style=${r.Directives.styleMap(e)}></span>${at(this.#Ve.networkRequest)}</div>
|
|
736
|
+
<div class="priority-row">${Kt(jt.priority)}: ${Gt.renderPriorityValue(this.#Ve.networkRequest)}</div>
|
|
737
|
+
${i.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#Ve.networkRequest)?qt`<div class="render-blocking"> ${Kt(jt.renderBlocking)} </div>`:r.nothing}
|
|
738
738
|
<div class="divider"></div>
|
|
739
739
|
|
|
740
|
-
${Gt.renderTimings(this.#
|
|
740
|
+
${Gt.renderTimings(this.#Ve.networkRequest)}
|
|
741
741
|
</div>
|
|
742
|
-
`;
|
|
742
|
+
`;r.render(o,this.#e,{host:this})}}customElements.define("devtools-performance-network-request-tooltip",Gt);var Yt=Object.freeze({__proto__:null,NetworkRequestTooltip:Gt});const Xt=new CSSStyleSheet;Xt.replaceSync(Ut.cssText);const Jt=new CSSStyleSheet;Jt.replaceSync(Bt.cssText);const{html:Zt}=r,Qt={requestMethod:"Request method",protocol:"Protocol",priority:"Priority",encodedData:"Encoded data",decodedBody:"Decoded body",yes:"Yes",no:"No",networkRequest:"Network request",fromCache:"From cache",mimeType:"MIME type",FromMemoryCache:" (from memory cache)",FromCache:" (from cache)",FromPush:" (from push)",FromServiceWorker:" (from `service worker`)",initiatedBy:"Initiated by",blocking:"Blocking",inBodyParserBlocking:"In-body parser blocking",renderBlocking:"Render blocking",entity:"3rd party",serverTiming:"Server timing",time:"Time",description:"Description"},ei=t.i18n.registerUIStrings("panels/timeline/components/NetworkRequestDetails.ts",Qt),ti=t.i18n.getLocalizedString.bind(void 0,ei);class ii extends HTMLElement{#e=this.attachShadow({mode:"open"});#oi=null;#ai=null;#li=new WeakMap;#di;#ve=null;#ci=null;#hi=null;constructor(e){super(),this.#di=e}connectedCallback(){this.#e.adoptedStyleSheets=[Xt,Jt]}async setData(e,t,i,n){if(this.#oi!==t||e!==this.#ve){this.#ve=e,this.#oi=t,this.#ai=i,this.#ci=n,this.#hi=null;for(const e of t.args.data.responseHeaders){const t=e.name.toLocaleLowerCase();if("server-timing"===t||"server-timing-test"===t){e.name="server-timing",this.#hi=l.ServerTiming.ServerTiming.parseHeaders([e]);break}}await this.#i()}}#fe(){if(!this.#oi)return null;const e={backgroundColor:`${dt(this.#oi)}`};return Zt`
|
|
743
743
|
<div class="network-request-details-title">
|
|
744
|
-
<div style=${
|
|
744
|
+
<div style=${r.Directives.styleMap(e)}></div>
|
|
745
745
|
${ti(Qt.networkRequest)}
|
|
746
746
|
</div>
|
|
747
747
|
`}#gi(e,t){return t?Zt`
|
|
748
748
|
<div class="network-request-details-row"><div class="title">${e}</div><div class="value">${t}</div></div>
|
|
749
|
-
`:null}#
|
|
749
|
+
`:null}#pi(){return this.#hi?Zt`
|
|
750
750
|
<div class="column-divider"></div>
|
|
751
751
|
<div class="network-request-details-col server-timings">
|
|
752
752
|
<div class="server-timing-column-header">${ti(Qt.serverTiming)}</div>
|
|
@@ -758,16 +758,16 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
758
758
|
<div class="value">${e.description||"-"}</div>
|
|
759
759
|
`))}
|
|
760
760
|
</div>
|
|
761
|
-
`:
|
|
761
|
+
`:r.nothing}#ui(){if(!this.#oi)return null;const e={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0,maxLength:100},t=b.Linkifier.Linkifier.linkifyURL(this.#oi.args.data.url,e),i=l.TraceObject.RevealableNetworkRequest.create(this.#oi);if(i){t.addEventListener("contextmenu",(e=>{if(!this.#oi)return;const t=new s.ContextMenu.ContextMenu(e);t.appendApplicableItems(i),t.show()}));const e=Zt`
|
|
762
762
|
${t}
|
|
763
763
|
<devtools-request-link-icon .data=${{request:i.networkRequest}}>
|
|
764
764
|
</devtools-request-link-icon>
|
|
765
|
-
`;return Zt`<div class="network-request-details-item">${e}</div>`}return Zt`<div class="network-request-details-item">${t}</div>`}#mi(){if(!this.#oi)return null;const e=this.#oi.args.data.syntheticData.isMemoryCached||this.#oi.args.data.syntheticData.isDiskCached;return this.#gi(ti(Qt.fromCache),ti(e?Qt.yes:Qt.no))}#vi(){if(!this.#ci||!this.#oi)return null;const e=this.#ci.entityForEvent(this.#oi);return e?this.#gi(ti(Qt.entity),e.name):null}#bi(){if(!this.#oi)return null;let e="";return this.#oi.args.data.syntheticData.isMemoryCached?e+=ti(Qt.FromMemoryCache):this.#oi.args.data.syntheticData.isDiskCached?e+=ti(Qt.FromCache):this.#oi.args.data.timing?.pushStart&&(e+=ti(Qt.FromPush)),this.#oi.args.data.fromServiceWorker&&(e+=ti(Qt.FromServiceWorker)),!this.#oi.args.data.encodedDataLength&&e||(e=`${t.ByteUtilities.bytesToString(this.#oi.args.data.encodedDataLength)}${e}`),this.#gi(ti(Qt.encodedData),e)}#
|
|
765
|
+
`;return Zt`<div class="network-request-details-item">${e}</div>`}return Zt`<div class="network-request-details-item">${t}</div>`}#mi(){if(!this.#oi)return null;const e=this.#oi.args.data.syntheticData.isMemoryCached||this.#oi.args.data.syntheticData.isDiskCached;return this.#gi(ti(Qt.fromCache),ti(e?Qt.yes:Qt.no))}#vi(){if(!this.#ci||!this.#oi)return null;const e=this.#ci.entityForEvent(this.#oi);return e?this.#gi(ti(Qt.entity),e.name):null}#bi(){if(!this.#oi)return null;let e="";return this.#oi.args.data.syntheticData.isMemoryCached?e+=ti(Qt.FromMemoryCache):this.#oi.args.data.syntheticData.isDiskCached?e+=ti(Qt.FromCache):this.#oi.args.data.timing?.pushStart&&(e+=ti(Qt.FromPush)),this.#oi.args.data.fromServiceWorker&&(e+=ti(Qt.FromServiceWorker)),!this.#oi.args.data.encodedDataLength&&e||(e=`${t.ByteUtilities.bytesToString(this.#oi.args.data.encodedDataLength)}${e}`),this.#gi(ti(Qt.encodedData),e)}#fi(){if(!this.#oi)return null;let e=null;if(null!==i.Helpers.Trace.stackTraceInEvent(this.#oi)){const t=i.Helpers.Trace.getZeroIndexedStackTraceForEvent(this.#oi)?.at(0)??null;t&&(e=this.#di.maybeLinkifyConsoleCallFrame(this.#ai,t,{tabStop:!0,inlineFrameIndex:0,showColumnNumber:!0}))}const t=this.#ve?.NetworkRequests.eventToInitiator.get(this.#oi);return t&&(e=this.#di.maybeLinkifyScriptLocation(this.#ai,null,t.args.data.url,void 0)),e?Zt`
|
|
766
766
|
<div class="network-request-details-item"><div class="title">${ti(Qt.initiatedBy)}</div><div class="value">${e}</div></div>
|
|
767
|
-
`:null}#
|
|
767
|
+
`:null}#yi(){if(!this.#oi||!v.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#oi))return null;let e;switch(this.#oi.args.data.renderBlocking){case"blocking":e=Qt.renderBlocking;break;case"in_body_parser_blocking":e=Qt.inBodyParserBlocking;break;default:return null}return this.#gi(ti(Qt.blocking),e)}async#wi(){if(!this.#oi)return null;if(!this.#li.get(this.#oi)&&this.#oi.args.data.url&&this.#ai){const e=await b.ImagePreview.ImagePreview.build(this.#ai,this.#oi.args.data.url,!1,{imageAltText:b.ImagePreview.ImagePreview.defaultAltTextForImageURL(this.#oi.args.data.url),precomputedFeatures:void 0,align:"start",hideFileData:!0});this.#li.set(this.#oi,e)}const e=this.#li.get(this.#oi);return e?Zt`<div class="network-request-details-item">${e}</div>`:null}async#i(){if(!this.#oi)return;const e=this.#oi.args.data,i=Zt`
|
|
768
768
|
<div class="network-request-details-content">
|
|
769
|
-
${this.#
|
|
770
|
-
${this.#
|
|
769
|
+
${this.#fe()}
|
|
770
|
+
${this.#ui()}
|
|
771
771
|
${await this.#wi()}
|
|
772
772
|
<div class="network-request-details-cols">
|
|
773
773
|
<div class="network-request-details-col">
|
|
@@ -777,7 +777,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
777
777
|
${this.#gi(ti(Qt.mimeType),e.mimeType)}
|
|
778
778
|
${this.#bi()}
|
|
779
779
|
${this.#gi(ti(Qt.decodedBody),t.ByteUtilities.bytesToString(this.#oi.args.data.decodedBodyLength))}
|
|
780
|
-
${this.#
|
|
780
|
+
${this.#yi()}
|
|
781
781
|
${this.#mi()}
|
|
782
782
|
${this.#vi()}
|
|
783
783
|
</div>
|
|
@@ -787,77 +787,77 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
787
787
|
${Gt.renderTimings(this.#oi)}
|
|
788
788
|
</div>
|
|
789
789
|
</div>
|
|
790
|
-
${this.#
|
|
790
|
+
${this.#pi()}
|
|
791
791
|
</div>
|
|
792
|
-
${this.#
|
|
792
|
+
${this.#fi()}
|
|
793
793
|
</div>
|
|
794
|
-
`;
|
|
794
|
+
`;r.render(i,this.#e,{host:this})}}customElements.define("devtools-performance-network-request-details",ii);var ni=Object.freeze({__proto__:null,NetworkRequestDetails:ii}),si={cssText:`:host{display:block;border-bottom:1px solid var(--sys-color-divider);flex:none}ul{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:var(--sys-size-4);padding:0 var(--sys-size-4);justify-content:flex-start;align-items:center}.insight-chip button{background:none;user-select:none;font:var(--sys-typescale-body4-regular);border:var(--sys-size-1) solid var(--sys-color-primary);border-radius:var(--sys-shape-corner-extra-small);display:flex;margin:var(--sys-size-4) 0;padding:var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-4);width:max-content;white-space:pre;.keyword{color:var(--sys-color-primary);padding-right:var(--sys-size-3)}}.insight-chip button:hover{background-color:var(--sys-color-state-hover-on-subtle);cursor:pointer;transition:opacity 0.2s ease}.insight-message-box{background:var(--sys-color-surface-yellow);border-radius:var(--sys-shape-corner-extra-small);font:var(--sys-typescale-body4-regular);margin:var(--sys-size-4) 0;button{color:var(--sys-color-on-surface-yellow);border:none;text-align:left;background:none;padding:var(--sys-size-4) var(--sys-size-5);width:100%;max-width:500px;.insight-label{color:var(--sys-color-orange-bright);padding-right:var(--sys-size-3);font-weight:var(--ref-typeface-weight-medium);margin-bottom:var(--sys-size-2)}&:hover{background-color:var(--sys-color-state-hover-on-subtle);cursor:pointer;transition:opacity 0.2s ease}}}\n/*# sourceURL=${import.meta.resolve("./relatedInsightChips.css")} */\n`};const ri=new CSSStyleSheet;ri.replaceSync(si.cssText);const{html:oi}=r,ai={insightKeyword:"Insight",insightWithName:"Insight: {PH1}"},li=t.i18n.registerUIStrings("panels/timeline/components/RelatedInsightChips.ts",ai),di=t.i18n.getLocalizedString.bind(void 0,li);class ci extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#i.bind(this);#Ve={eventToRelatedInsightsMap:new Map,activeEvent:null};connectedCallback(){this.#e.adoptedStyleSheets=[ri],this.#i()}set activeEvent(e){e!==this.#Ve.activeEvent&&(this.#Ve.activeEvent=e,n.ScheduledRender.scheduleRender(this,this.#t))}set eventToRelatedInsightsMap(e){this.#Ve.eventToRelatedInsightsMap=e,n.ScheduledRender.scheduleRender(this,this.#t)}#Si(e){return t=>{t.preventDefault(),e.activateInsight()}}#i(){const{activeEvent:e,eventToRelatedInsightsMap:t}=this.#Ve,i=e?t.get(e)??[]:[];if(!e||0===t.size||0===i.length)return void r.render(oi``,this.#e,{host:this});const n=i.flatMap((e=>e.messages.map((t=>oi`
|
|
795
795
|
<li class="insight-message-box">
|
|
796
796
|
<button type="button" @click=${this.#Si(e)}>
|
|
797
797
|
<div class="insight-label">${di(ai.insightWithName,{PH1:e.insightLabel})}</div>
|
|
798
798
|
<div class="insight-message">${t}</div>
|
|
799
799
|
</button>
|
|
800
800
|
</li>
|
|
801
|
-
`)))),
|
|
801
|
+
`)))),s=i.flatMap((e=>[oi`
|
|
802
802
|
<li class="insight-chip">
|
|
803
803
|
<button type="button" @click=${this.#Si(e)}>
|
|
804
804
|
<span class="keyword">${di(ai.insightKeyword)}</span>
|
|
805
805
|
<span class="insight-label">${e.insightLabel}</span>
|
|
806
806
|
</button>
|
|
807
807
|
</li>
|
|
808
|
-
`]));
|
|
808
|
+
`]));r.render(oi`
|
|
809
809
|
<ul>${n}</ul>
|
|
810
|
-
<ul>${
|
|
811
|
-
`,this.#e,{host:this})}}customElements.define("devtools-related-insight-chips",ci);var hi=Object.freeze({__proto__:null,RelatedInsightChips:ci}),gi={cssText:`:host{display:block;height:100%}.annotations{display:flex;flex-direction:column;height:100%;padding:0}.visibility-setting{margin-top:auto}.annotation-container{display:flex;justify-content:space-between;align-items:center;padding:0 var(--sys-size-4);.delete-button{visibility:hidden;border:none;background:none}&:hover,\n &:focus-within{background-color:var(--sys-color-neutral-container);button.delete-button{visibility:visible}}}.annotation{display:flex;flex-direction:column;align-items:flex-start;word-break:normal;overflow-wrap:anywhere;padding:var(--sys-size-8) 0;gap:6px}.annotation-identifier{padding:4px 8px;border-radius:10px;font-weight:bold;&.time-range{background-color:var(--app-color-performance-sidebar-time-range);color:var(--app-color-performance-sidebar-label-text-light)}}.entries-link{display:flex;flex-wrap:wrap;row-gap:2px;align-items:center}.label{font-size:larger}.annotation-tutorial-container{padding:10px}.tutorial-card{display:block;position:relative;margin:10px 0;padding:10px;border-radius:var(--sys-shape-corner-extra-small);overflow:hidden;border:1px solid var(--sys-color-divider);background-color:var(--sys-color-base)}.tutorial-image{display:flex;justify-content:center;& > img{max-width:100%;height:auto}}.tutorial-title,\n.tutorial-description{margin:5px 0}\n/*# sourceURL=${import.meta.resolve("./sidebarAnnotationsTab.css")} */\n`};const
|
|
812
|
-
<span class="annotation-identifier" style=${
|
|
810
|
+
<ul>${s}</ul>
|
|
811
|
+
`,this.#e,{host:this})}}customElements.define("devtools-related-insight-chips",ci);var hi=Object.freeze({__proto__:null,RelatedInsightChips:ci}),gi={cssText:`:host{display:block;height:100%}.annotations{display:flex;flex-direction:column;height:100%;padding:0}.visibility-setting{margin-top:auto}.annotation-container{display:flex;justify-content:space-between;align-items:center;padding:0 var(--sys-size-4);.delete-button{visibility:hidden;border:none;background:none}&:hover,\n &:focus-within{background-color:var(--sys-color-neutral-container);button.delete-button{visibility:visible}}}.annotation{display:flex;flex-direction:column;align-items:flex-start;word-break:normal;overflow-wrap:anywhere;padding:var(--sys-size-8) 0;gap:6px}.annotation-identifier{padding:4px 8px;border-radius:10px;font-weight:bold;&.time-range{background-color:var(--app-color-performance-sidebar-time-range);color:var(--app-color-performance-sidebar-label-text-light)}}.entries-link{display:flex;flex-wrap:wrap;row-gap:2px;align-items:center}.label{font-size:larger}.annotation-tutorial-container{padding:10px}.tutorial-card{display:block;position:relative;margin:10px 0;padding:10px;border-radius:var(--sys-shape-corner-extra-small);overflow:hidden;border:1px solid var(--sys-color-divider);background-color:var(--sys-color-base)}.tutorial-image{display:flex;justify-content:center;& > img{max-width:100%;height:auto}}.tutorial-title,\n.tutorial-description{margin:5px 0}\n/*# sourceURL=${import.meta.resolve("./sidebarAnnotationsTab.css")} */\n`};const pi=new CSSStyleSheet;pi.replaceSync(gi.cssText);const{html:ui}=r,mi=new URL("../../../Images/performance-panel-diagram.svg",import.meta.url).toString(),vi=new URL("../../../Images/performance-panel-entry-label.svg",import.meta.url).toString(),bi=new URL("../../../Images/performance-panel-time-range.svg",import.meta.url).toString(),fi=new URL("../../../Images/performance-panel-delete-annotation.svg",import.meta.url).toString(),yi={annotationGetStarted:"Annotate a trace for yourself and others",entryLabelTutorialTitle:"Label an item",entryLabelTutorialDescription:"Double-click on an item and type to create an item label.",entryLinkTutorialTitle:"Connect two items",entryLinkTutorialDescription:"Double-click on an item, click on the adjacent rightward arrow, then select the destination item.",timeRangeTutorialTitle:"Define a time range",timeRangeTutorialDescription:"Shift-drag in the flamechart then type to create a time range annotation.",deleteAnnotationTutorialTitle:"Delete an annotation",deleteAnnotationTutorialDescription:"Hover over the list in the sidebar with Annotations tab selected to access the delete function.",deleteButton:"Delete annotation: {PH1}",entryLabelDescriptionLabel:'A "{PH1}" event annotated with the text "{PH2}"',timeRangeDescriptionLabel:"A time range starting at {PH1} and ending at {PH2}",entryLinkDescriptionLabel:'A link between a "{PH1}" event and a "{PH2}" event'},wi=t.i18n.registerUIStrings("panels/timeline/components/SidebarAnnotationsTab.ts",yi),Si=t.i18n.getLocalizedString.bind(void 0,wi);class xi extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#i.bind(this);#xi=[];#ki=new Map;#Ti;constructor(){super(),this.#Ti=a.Settings.Settings.instance().moduleSetting("annotations-hidden")}deduplicatedAnnotations(){return this.#xi}set annotations(e){this.#xi=this.#Ci(e),n.ScheduledRender.scheduleRender(this,this.#t)}set annotationEntryToColorMap(e){this.#ki=e}#Ci(e){const t=new Set,i=e.filter((e=>{if(this.#$i(e))return!0;if("ENTRIES_LINK"===e.type||"ENTRY_LABEL"===e.type){const i="ENTRIES_LINK"===e.type?e.entryFrom:e.entry;if(t.has(i))return!1;t.add(i)}return!0}));return i.sort(((e,t)=>this.#Pi(e)-this.#Pi(t))),i}#Pi(e){switch(e.type){case"ENTRY_LABEL":return e.entry.ts;case"ENTRIES_LINK":return e.entryFrom.ts;case"TIME_RANGE":return e.bounds.min;default:h.assertNever(e,`Invalid annotation type ${e}`)}}#$i(e){switch(e.type){case"ENTRY_LABEL":return e.label.length>0;case"ENTRIES_LINK":return Boolean(e.entryTo);case"TIME_RANGE":return e.bounds.range>0}}connectedCallback(){this.#e.adoptedStyleSheets=[pi],n.ScheduledRender.scheduleRender(this,this.#t)}#Li(e){if(e.entryTo){const t=f.EntryName.nameForEntry(e.entryTo),i=this.#ki.get(e.entryTo)??"",n={backgroundColor:i,color:ki(i)};return ui`
|
|
812
|
+
<span class="annotation-identifier" style=${r.Directives.styleMap(n)}>
|
|
813
813
|
${t}
|
|
814
|
-
</span>`}return
|
|
815
|
-
<span class="annotation-identifier" style=${
|
|
814
|
+
</span>`}return r.nothing}#Ri(t){switch(t.type){case"ENTRY_LABEL":{const e=f.EntryName.nameForEntry(t.entry),i=this.#ki.get(t.entry)??"",n={backgroundColor:i,color:ki(i)};return ui`
|
|
815
|
+
<span class="annotation-identifier" style=${r.Directives.styleMap(n)}>
|
|
816
816
|
${e}
|
|
817
817
|
</span>
|
|
818
|
-
`}case"TIME_RANGE":{const n=e.TraceBounds.BoundsManager.instance().state()?.milli.entireTraceBounds.min??0,
|
|
818
|
+
`}case"TIME_RANGE":{const n=e.TraceBounds.BoundsManager.instance().state()?.milli.entireTraceBounds.min??0,s=Math.round(i.Helpers.Timing.microToMilli(t.bounds.min)-n),r=Math.round(i.Helpers.Timing.microToMilli(t.bounds.max)-n);return ui`
|
|
819
819
|
<span class="annotation-identifier time-range">
|
|
820
|
-
${
|
|
820
|
+
${s} - ${r} ms
|
|
821
821
|
</span>
|
|
822
|
-
`}case"ENTRIES_LINK":{const e=
|
|
822
|
+
`}case"ENTRIES_LINK":{const e=f.EntryName.nameForEntry(t.entryFrom),i=this.#ki.get(t.entryFrom)??"",n={backgroundColor:i,color:ki(i)};return ui`
|
|
823
823
|
<div class="entries-link">
|
|
824
|
-
<span class="annotation-identifier" style=${
|
|
824
|
+
<span class="annotation-identifier" style=${r.Directives.styleMap(n)}>
|
|
825
825
|
${e}
|
|
826
826
|
</span>
|
|
827
827
|
<devtools-icon class="inline-icon" .data=${{iconName:"arrow-forward",color:"var(--icon-default)",width:"18px",height:"18px"}}>
|
|
828
828
|
</devtools-icon>
|
|
829
829
|
${this.#Li(t)}
|
|
830
830
|
</div>
|
|
831
|
-
`}default:h.assertNever(t,"Unsupported annotation type")}}#
|
|
831
|
+
`}default:h.assertNever(t,"Unsupported annotation type")}}#Ii(e){this.dispatchEvent(new en(e))}#Mi(){return ui`
|
|
832
832
|
<div class="annotation-tutorial-container">
|
|
833
|
-
${Si(
|
|
833
|
+
${Si(yi.annotationGetStarted)}
|
|
834
834
|
<div class="tutorial-card">
|
|
835
835
|
<div class="tutorial-image"> <img src=${vi}></img></div>
|
|
836
|
-
<div class="tutorial-title">${Si(
|
|
837
|
-
<div class="tutorial-description">${Si(
|
|
836
|
+
<div class="tutorial-title">${Si(yi.entryLabelTutorialTitle)}</div>
|
|
837
|
+
<div class="tutorial-description">${Si(yi.entryLabelTutorialDescription)}</div>
|
|
838
838
|
</div>
|
|
839
839
|
<div class="tutorial-card">
|
|
840
840
|
<div class="tutorial-image"> <img src=${mi}></img></div>
|
|
841
|
-
<div class="tutorial-title">${Si(
|
|
842
|
-
<div class="tutorial-description">${Si(
|
|
841
|
+
<div class="tutorial-title">${Si(yi.entryLinkTutorialTitle)}</div>
|
|
842
|
+
<div class="tutorial-description">${Si(yi.entryLinkTutorialDescription)}</div>
|
|
843
843
|
</div>
|
|
844
844
|
<div class="tutorial-card">
|
|
845
845
|
<div class="tutorial-image"> <img src=${bi}></img></div>
|
|
846
|
-
<div class="tutorial-title">${Si(
|
|
847
|
-
<div class="tutorial-description">${Si(
|
|
846
|
+
<div class="tutorial-title">${Si(yi.timeRangeTutorialTitle)}</div>
|
|
847
|
+
<div class="tutorial-description">${Si(yi.timeRangeTutorialDescription)}</div>
|
|
848
848
|
</div>
|
|
849
849
|
<div class="tutorial-card">
|
|
850
|
-
<div class="tutorial-image"> <img src=${
|
|
851
|
-
<div class="tutorial-title">${Si(
|
|
852
|
-
<div class="tutorial-description">${Si(
|
|
850
|
+
<div class="tutorial-image"> <img src=${fi}></img></div>
|
|
851
|
+
<div class="tutorial-title">${Si(yi.deleteAnnotationTutorialTitle)}</div>
|
|
852
|
+
<div class="tutorial-description">${Si(yi.deleteAnnotationTutorialDescription)}</div>
|
|
853
853
|
</div>
|
|
854
854
|
</div>
|
|
855
|
-
`}#Ei(e){switch(e.type){case"ENTRY_LABEL":return"entry-label";case"TIME_RANGE":return"time-range";case"ENTRIES_LINK":return"entries-link";default:h.assertNever(e,"unknown annotation type")}}#i(){
|
|
855
|
+
`}#Ei(e){switch(e.type){case"ENTRY_LABEL":return"entry-label";case"TIME_RANGE":return"time-range";case"ENTRIES_LINK":return"entries-link";default:h.assertNever(e,"unknown annotation type")}}#i(){r.render(ui`
|
|
856
856
|
<span class="annotations">
|
|
857
|
-
${0===this.#xi.length?this.#
|
|
858
|
-
${this.#xi.map((e=>{const i=function(e){switch(e.type){case"ENTRY_LABEL":{const t=
|
|
857
|
+
${0===this.#xi.length?this.#Mi():ui`
|
|
858
|
+
${this.#xi.map((e=>{const i=function(e){switch(e.type){case"ENTRY_LABEL":{const t=f.EntryName.nameForEntry(e.entry);return Si(yi.entryLabelDescriptionLabel,{PH1:t,PH2:e.label})}case"TIME_RANGE":{const i=t.TimeUtilities.formatMicroSecondsAsMillisFixedExpanded(e.bounds.min),n=t.TimeUtilities.formatMicroSecondsAsMillisFixedExpanded(e.bounds.max);return Si(yi.timeRangeDescriptionLabel,{PH1:i,PH2:n})}case"ENTRIES_LINK":{if(!e.entryTo)return"";const t=f.EntryName.nameForEntry(e.entryFrom),i=f.EntryName.nameForEntry(e.entryTo);return Si(yi.entryLinkDescriptionLabel,{PH1:t,PH2:i})}default:h.assertNever(e,"Unsupported annotation")}}(e);return ui`
|
|
859
859
|
<div class="annotation-container"
|
|
860
|
-
@click=${()=>this.#
|
|
860
|
+
@click=${()=>this.#Ii(e)}
|
|
861
861
|
aria-label=${i}
|
|
862
862
|
tabindex="0"
|
|
863
863
|
jslog=${o.item(`timeline.annotation-sidebar.annotation-${this.#Ei(e)}`).track({click:!0})}
|
|
@@ -868,7 +868,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
868
868
|
${"ENTRY_LABEL"===e.type||"TIME_RANGE"===e.type?e.label:""}
|
|
869
869
|
</span>
|
|
870
870
|
</div>
|
|
871
|
-
<button class="delete-button" aria-label=${Si(
|
|
871
|
+
<button class="delete-button" aria-label=${Si(yi.deleteButton,{PH1:i})} @click=${t=>{t.stopPropagation(),this.dispatchEvent(new Qi(e))}} jslog=${o.action("timeline.annotation-sidebar.delete").track({click:!0})}>
|
|
872
872
|
<devtools-icon
|
|
873
873
|
class="bin-icon"
|
|
874
874
|
.data=${{iconName:"bin",color:"var(--icon-default)",width:"20px",height:"20px"}}
|
|
@@ -877,7 +877,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
877
877
|
</div>`}))}
|
|
878
878
|
<setting-checkbox class="visibility-setting" .data=${{setting:this.#Ti,textOverride:"Hide annotations"}}>
|
|
879
879
|
</setting-checkbox>`}
|
|
880
|
-
</span>`,this.#e,{host:this})}}function ki(e){const t=a.Color.parse(e)?.asLegacyColor(),i="--app-color-performance-sidebar-label-text-dark",n=a.Color.parse(w.ThemeSupport.instance().getComputedValue(i))?.asLegacyColor();if(!t||!n)return`var(${i})`;return a.ColorUtils.contrastRatio(t.rgba(),n.rgba())>=4.5?`var(${i})`:"var(--app-color-performance-sidebar-label-text-light)"}customElements.define("devtools-performance-sidebar-annotations",xi);var Ti=Object.freeze({__proto__:null,SidebarAnnotationsTab:xi});var Ci={cssText:`:host{display:block;padding:5px 8px}.metrics{display:grid;align-items:end;grid-template-columns:repeat(3,1fr) 0.5fr;grid-row-gap:5px}.row-border{grid-column:1/5;border-top:var(--sys-size-1) solid var(--sys-color-divider)}.row-label{visibility:hidden;font-size:var(--sys-size-7)}.metrics--field .row-label{visibility:visible}.metrics-row{display:contents}.metric{flex:1;user-select:text;cursor:pointer;background:none;border:none;padding:0;display:block;text-align:left}.metric-value{font-size:var(--sys-size-10)}.metric-value-bad{color:var(--app-color-performance-bad)}.metric-value-ok{color:var(--app-color-performance-ok)}.metric-value-good{color:var(--app-color-performance-good)}.metric-score-unclassified{color:var(--sys-color-token-subtle)}.metric-label{font:var(--sys-typescale-body4-medium)}.number-with-unit{white-space:nowrap;.unit{font-size:14px;padding:0 1px}}.passed-insights-section{margin-top:var(--sys-size-5);summary{font-weight:var(--ref-typeface-weight-medium)}}.field-mismatch-notice{display:grid;grid-template-columns:auto auto;align-items:center;background-color:var(--sys-color-surface3);margin:var(--sys-size-6) 0;border-radius:var(--sys-shape-corner-extra-small);border:var(--sys-size-1) solid var(--sys-color-divider);h3{margin-block:3px;font:var(--sys-typescale-body4-medium);color:var(--sys-color-on-base);padding:var(--sys-size-5) var(--sys-size-6) 0 var(--sys-size-6)}.field-mismatch-notice__body{padding:var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-6)}button{padding:5px;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}}\n/*# sourceURL=${import.meta.resolve("./sidebarSingleInsightSet.css")} */\n`};const $i=new CSSStyleSheet;$i.replaceSync(Ci.cssText);const{html:Pi}=
|
|
880
|
+
</span>`,this.#e,{host:this})}}function ki(e){const t=a.Color.parse(e)?.asLegacyColor(),i="--app-color-performance-sidebar-label-text-dark",n=a.Color.parse(w.ThemeSupport.instance().getComputedValue(i))?.asLegacyColor();if(!t||!n)return`var(${i})`;return a.ColorUtils.contrastRatio(t.rgba(),n.rgba())>=4.5?`var(${i})`:"var(--app-color-performance-sidebar-label-text-light)"}customElements.define("devtools-performance-sidebar-annotations",xi);var Ti=Object.freeze({__proto__:null,SidebarAnnotationsTab:xi});var Ci={cssText:`:host{display:block;padding:5px 8px}.metrics{display:grid;align-items:end;grid-template-columns:repeat(3,1fr) 0.5fr;grid-row-gap:5px}.row-border{grid-column:1/5;border-top:var(--sys-size-1) solid var(--sys-color-divider)}.row-label{visibility:hidden;font-size:var(--sys-size-7)}.metrics--field .row-label{visibility:visible}.metrics-row{display:contents}.metric{flex:1;user-select:text;cursor:pointer;background:none;border:none;padding:0;display:block;text-align:left}.metric-value{font-size:var(--sys-size-10)}.metric-value-bad{color:var(--app-color-performance-bad)}.metric-value-ok{color:var(--app-color-performance-ok)}.metric-value-good{color:var(--app-color-performance-good)}.metric-score-unclassified{color:var(--sys-color-token-subtle)}.metric-label{font:var(--sys-typescale-body4-medium)}.number-with-unit{white-space:nowrap;.unit{font-size:14px;padding:0 1px}}.passed-insights-section{margin-top:var(--sys-size-5);summary{font-weight:var(--ref-typeface-weight-medium)}}.field-mismatch-notice{display:grid;grid-template-columns:auto auto;align-items:center;background-color:var(--sys-color-surface3);margin:var(--sys-size-6) 0;border-radius:var(--sys-shape-corner-extra-small);border:var(--sys-size-1) solid var(--sys-color-divider);h3{margin-block:3px;font:var(--sys-typescale-body4-medium);color:var(--sys-color-on-base);padding:var(--sys-size-5) var(--sys-size-6) 0 var(--sys-size-6)}.field-mismatch-notice__body{padding:var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-6)}button{padding:5px;background:unset;border:unset;font:inherit;color:var(--sys-color-primary);text-decoration:underline;cursor:pointer}}\n/*# sourceURL=${import.meta.resolve("./sidebarSingleInsightSet.css")} */\n`};const $i=new CSSStyleSheet;$i.replaceSync(Ci.cssText);const{html:Pi}=r.StaticHtml,Li={metricScore:"{PH1}: {PH2} {PH3} score",metricScoreUnavailable:"{PH1}: unavailable",passedInsights:"Passed insights ({PH1})",fieldScoreLabel:"Field ({PH1})",urlOption:"URL",originOption:"Origin",dismissTitle:"Dismiss",fieldMismatchTitle:"Field & local metrics mismatch",fieldMismatchNotice:"There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user's environment."},Ri=t.i18n.registerUIStrings("panels/timeline/components/SidebarSingleInsightSet.ts",Li),Ii=t.i18n.getLocalizedString.bind(void 0,Ri),Mi=new Set([]),Ei={Cache:y.Cache.Cache,CLSCulprits:y.CLSCulprits.CLSCulprits,DocumentLatency:y.DocumentLatency.DocumentLatency,DOMSize:y.DOMSize.DOMSize,DuplicatedJavaScript:y.DuplicatedJavaScript.DuplicatedJavaScript,FontDisplay:y.FontDisplay.FontDisplay,ForcedReflow:y.ForcedReflow.ForcedReflow,ImageDelivery:y.ImageDelivery.ImageDelivery,InteractionToNextPaint:y.InteractionToNextPaint.InteractionToNextPaint,LCPDiscovery:y.LCPDiscovery.LCPDiscovery,LCPPhases:y.LCPPhases.LCPPhases,LegacyJavaScript:y.LegacyJavaScript.LegacyJavaScript,ModernHTTP:y.ModernHTTP.ModernHTTP,NetworkDependencyTree:y.NetworkDependencyTree.NetworkDependencyTree,RenderBlocking:y.RenderBlocking.RenderBlocking,SlowCSSSelector:y.SlowCSSSelector.SlowCSSSelector,ThirdParties:y.ThirdParties.ThirdParties,Viewport:y.Viewport.Viewport};class Di extends HTMLElement{#e=this.attachShadow({mode:"open"});#K=this.#i.bind(this);#Ve={insights:null,insightSetKey:null,activeCategory:i.Insights.Types.InsightCategory.ALL,activeInsight:null,parsedTrace:null,traceMetadata:null};#Di=!1;set data(e){this.#Ve=e,n.ScheduledRender.scheduleRender(this,this.#K)}connectedCallback(){this.#e.adoptedStyleSheets=[$i],this.#i()}#Hi(e){return this.#Ve.activeCategory===i.Insights.Types.InsightCategory.ALL||e===this.#Ve.activeCategory}#Fi(e){this.dispatchEvent(new y.EventRef.EventReferenceClick(e))}#Ni(e,t,n){let s,o,a;if(null===t)s=o="-",a="unclassified";else if("LCP"===e){const e=t,{text:n,element:r}=mt.formatMicroSecondsAsSeconds(e);s=n,o=r,a=i.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(e)}else if("CLS"===e)s=o=t?t.toFixed(2):"0",a=i.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(t);else if("INP"===e){const e=t,{text:n,element:r}=mt.formatMicroSecondsAsMillisFixed(e);s=n,o=r,a=i.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(e)}else h.TypeScriptUtilities.assertNever(e,`Unexpected metric ${e}`);const l=null!==t?Ii(Li.metricScore,{PH1:e,PH2:s,PH3:a}):Ii(Li.metricScoreUnavailable,{PH1:e});return this.#Hi(e)?Pi`
|
|
881
881
|
<button class="metric"
|
|
882
882
|
@click=${n?this.#Fi.bind(this,n):null}
|
|
883
883
|
title=${l}
|
|
@@ -885,35 +885,35 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
885
885
|
>
|
|
886
886
|
<div class="metric-value metric-value-${a}">${o}</div>
|
|
887
887
|
</button>
|
|
888
|
-
`:
|
|
888
|
+
`:r.nothing}#zi(e){return{lcp:i.Insights.Common.getLCP(this.#Ve.insights,e),cls:i.Insights.Common.getCLS(this.#Ve.insights,e),inp:i.Insights.Common.getINP(this.#Ve.insights,e)}}#Oi(e){const t=this.#Ve.insights?.get(e);if(!t)return null;const n=i.Insights.Common.getFieldMetricsForInsightSet(t,this.#Ve.traceMetadata,g.CrUXManager.instance().getSelectedScope());return n||null}#Ai(e,t){return void 0!==e.lcp&&void 0!==t.lcp&&"better"===vt("LCP",e.lcp,t.lcp)||void 0!==e.inp&&void 0!==t.inp&&"better"===vt("LCP",e.inp,t.inp)}#_i(){this.#Di=!0,this.#i()}#Ui(e){const t=this.#zi(e),n=this.#Oi(e),s=this.#Ni("LCP",t.lcp?.value??null,t.lcp?.event??null),a=this.#Ni("INP",t.inp?.value??null,t.inp?.event??null),l=this.#Ni("CLS",t.cls.value??null,t.cls?.worstClusterEvent??null),d=Pi`
|
|
889
889
|
<div class="metrics-row">
|
|
890
|
-
<span>${
|
|
890
|
+
<span>${s}</span>
|
|
891
891
|
<span>${a}</span>
|
|
892
892
|
<span>${l}</span>
|
|
893
893
|
<span class="row-label">Local</span>
|
|
894
894
|
</div>
|
|
895
895
|
<span class="row-border"></span>
|
|
896
|
-
`;let c;if(n){const{lcp:e,inp:t,cls:i}=n,
|
|
896
|
+
`;let c;if(n){const{lcp:e,inp:t,cls:i}=n,s=this.#Ni("LCP",e?.value??null,null),r=this.#Ni("INP",t?.value??null,null),o=this.#Ni("CLS",i?.value??null,null);let a=Ii(Li.originOption);"url"!==e?.pageScope&&"url"!==t?.pageScope||(a=Ii(Li.urlOption)),c=Pi`
|
|
897
897
|
<div class="metrics-row">
|
|
898
|
-
<span>${r}</span>
|
|
899
898
|
<span>${s}</span>
|
|
899
|
+
<span>${r}</span>
|
|
900
900
|
<span>${o}</span>
|
|
901
|
-
<span class="row-label">${
|
|
901
|
+
<span class="row-label">${Ii(Li.fieldScoreLabel,{PH1:a})}</span>
|
|
902
902
|
</div>
|
|
903
903
|
<span class="row-border"></span>
|
|
904
|
-
`}const h={lcp:void 0!==t.lcp?.value?i.Helpers.Timing.microToMilli(t.lcp.value):void 0,inp:void 0!==t.inp?.value?i.Helpers.Timing.microToMilli(t.inp.value):void 0},g=n&&{lcp:void 0!==n.lcp?.value?i.Helpers.Timing.microToMilli(n.lcp.value):void 0,inp:void 0!==n.inp?.value?i.Helpers.Timing.microToMilli(n.inp.value):void 0};let
|
|
904
|
+
`}const h={lcp:void 0!==t.lcp?.value?i.Helpers.Timing.microToMilli(t.lcp.value):void 0,inp:void 0!==t.inp?.value?i.Helpers.Timing.microToMilli(t.inp.value):void 0},g=n&&{lcp:void 0!==n.lcp?.value?i.Helpers.Timing.microToMilli(n.lcp.value):void 0,inp:void 0!==n.inp?.value?i.Helpers.Timing.microToMilli(n.inp.value):void 0};let p;!this.#Di&&g&&this.#Ai(h,g)&&(p=Pi`
|
|
905
905
|
<div class="field-mismatch-notice" jslog=${o.section("timeline.insights.field-mismatch")}>
|
|
906
|
-
<h3>${
|
|
906
|
+
<h3>${Ii(Li.fieldMismatchTitle)}</h3>
|
|
907
907
|
<devtools-button
|
|
908
|
-
title=${
|
|
908
|
+
title=${Ii(Li.dismissTitle)}
|
|
909
909
|
.iconName=${"cross"}
|
|
910
910
|
.variant=${"icon"}
|
|
911
911
|
.jslogContext=${"timeline.insights.dismiss-field-mismatch"}
|
|
912
|
-
@click=${this.#
|
|
912
|
+
@click=${this.#_i}
|
|
913
913
|
></devtools-button>
|
|
914
|
-
<div class="field-mismatch-notice__body">${Lt(
|
|
914
|
+
<div class="field-mismatch-notice__body">${Lt(Ii(Li.fieldMismatchNotice))}</div>
|
|
915
915
|
</div>
|
|
916
|
-
`);const
|
|
916
|
+
`);const u={metrics:!0,"metrics--field":Boolean(c)},m=Pi`<div class=${r.Directives.classMap(u)}>
|
|
917
917
|
<div class="metrics-row">
|
|
918
918
|
<span class="metric-label">LCP</span>
|
|
919
919
|
<span class="metric-label">INP</span>
|
|
@@ -924,41 +924,41 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
924
924
|
${c}
|
|
925
925
|
</div>`;return Pi`
|
|
926
926
|
${m}
|
|
927
|
-
${
|
|
928
|
-
`}#Bi(e,t){const n=S.Runtime.experiments.isEnabled("timeline-experimental-insights"),
|
|
927
|
+
${p}
|
|
928
|
+
`}#Bi(e,t){const n=S.Runtime.experiments.isEnabled("timeline-experimental-insights"),s=e?.get(t);if(!s)return r.nothing;const o=s.model,a=[],l=[];for(const[e,r]of Object.entries(o)){const o=Ei[e];if(!o)continue;if(!n&&Mi.has(e))continue;if(!r||(d={activeCategory:this.#Ve.activeCategory,insightCategory:r.category}).activeCategory!==i.Insights.Types.InsightCategory.ALL&&d.activeCategory!==d.insightCategory)continue;const c=this.#Oi(t),h=Pi`<div>
|
|
929
929
|
<${o.litTagName}
|
|
930
|
-
.selected=${this.#
|
|
931
|
-
.model=${
|
|
932
|
-
.bounds=${
|
|
930
|
+
.selected=${this.#Ve.activeInsight?.model===r}
|
|
931
|
+
.model=${r}
|
|
932
|
+
.bounds=${s.bounds}
|
|
933
933
|
.insightSetKey=${t}
|
|
934
|
-
.parsedTrace=${this.#
|
|
934
|
+
.parsedTrace=${this.#Ve.parsedTrace}
|
|
935
935
|
.fieldMetrics=${c}>
|
|
936
936
|
</${o.litTagName}>
|
|
937
|
-
</div>`;"pass"===
|
|
937
|
+
</div>`;"pass"===r.state?l.push(h):a.push(h)}var d;return Pi`
|
|
938
938
|
${a}
|
|
939
939
|
${l.length?Pi`
|
|
940
940
|
<details class="passed-insights-section">
|
|
941
|
-
<summary>${
|
|
941
|
+
<summary>${Ii(Li.passedInsights,{PH1:l.length})}</summary>
|
|
942
942
|
${l}
|
|
943
943
|
</details>
|
|
944
|
-
`:
|
|
945
|
-
`}#i(){const{insights:e,insightSetKey:t}=this.#
|
|
944
|
+
`:r.nothing}
|
|
945
|
+
`}#i(){const{insights:e,insightSetKey:t}=this.#Ve;e&&t?r.render(Pi`
|
|
946
946
|
<div class="navigation">
|
|
947
947
|
${this.#Ui(t)}
|
|
948
948
|
${this.#Bi(e,t)}
|
|
949
949
|
</div>
|
|
950
|
-
`,this.#e,{host:this}):
|
|
950
|
+
`,this.#e,{host:this}):r.render(Pi``,this.#e,{host:this})}}customElements.define("devtools-performance-sidebar-single-navigation",Di);var Hi=Object.freeze({__proto__:null,SidebarSingleInsightSet:Di}),Fi={cssText:`:host{display:flex;flex-flow:column nowrap;flex-grow:1}.insight-sets-wrapper{display:flex;flex-flow:column nowrap;flex-grow:1;details{flex-grow:0}details[open]{flex-grow:1;border-bottom:1px solid var(--sys-color-divider)}summary{background-color:var(--sys-color-surface2);border-bottom:1px solid var(--sys-color-divider);overflow:hidden;padding:2px 5px;text-overflow:ellipsis;white-space:nowrap;font:var(--sys-typescale-body4-medium);display:flex;align-items:center;&:focus{background-color:var(--sys-color-tonal-container)}&::marker{color:var(--sys-color-on-surface-subtle);font-size:11px;line-height:1}details:first-child &{border-top:1px solid var(--sys-color-divider)}}}.zoom-button{margin-left:auto}.zoom-icon{visibility:hidden;&.active devtools-button{visibility:visible}}.dropdown-icon{&.active devtools-button{transform:rotate(90deg)}}.feedback-wrapper{position:relative;padding:var(--sys-size-6);.tooltip{visibility:hidden;transition-property:visibility;position:absolute;bottom:35px;width:90%;max-width:300px;left:var(--sys-size-6);z-index:1;box-sizing:border-box;padding:var(--sys-size-5) var(--sys-size-6);border-radius:var(--sys-shape-corner-small);background-color:var(--sys-color-cdt-base-container);box-shadow:var(--drop-shadow-depth-3)}devtools-button:hover + .tooltip{visibility:visible}}\n/*# sourceURL=${import.meta.resolve("./sidebarInsightsTab.css")} */\n`};const Ni=new CSSStyleSheet;Ni.replaceSync(Fi.cssText);const{html:zi}=r,Oi={feedbackButton:"Feedback",feedbackTooltip:"Insights is an experimental feature. Your feedback will help us improve it."},Ai=t.i18n.registerUIStrings("panels/timeline/components/SidebarInsightsTab.ts",Oi),_i=t.i18n.getLocalizedString.bind(void 0,Ai);class Ui extends HTMLElement{#t=this.#i.bind(this);#e=this.attachShadow({mode:"open"});#ve=null;#Vi=null;#qi=null;#ji=null;#Wi=i.Insights.Types.InsightCategory.ALL;#Ki=null;connectedCallback(){this.#e.adoptedStyleSheets=[Ni]}set parsedTrace(e){e!==this.#ve&&(this.#ve=e,this.#Ki=null,n.ScheduledRender.scheduleRender(this,this.#t))}set traceMetadata(e){e!==this.#Vi&&(this.#Vi=e,this.#Ki=null,n.ScheduledRender.scheduleRender(this,this.#t))}set insights(e){if(e===this.#qi)return;if(this.#qi=e,this.#Ki=null,!this.#qi||!this.#ve)return;const t=i.Helpers.Timing.milliToMicro(i.Types.Timing.Milli(5e3)),s=[...this.#qi.values()];this.#Ki=s.find((e=>e.navigation||e.bounds.range>t))?.id??s[0]?.id??null,n.ScheduledRender.scheduleRender(this,this.#t)}set activeInsight(e){e!==this.#ji&&(this.#ji=e,this.#ji&&(this.#Ki=this.#ji.insightSetKey),n.ScheduledRender.scheduleRender(this,this.#t))}#Gi(e){this.#Ki=this.#Ki===e?null:e,this.#Ki!==this.#ji?.insightSetKey&&this.dispatchEvent(new y.SidebarInsight.InsightDeactivated),n.ScheduledRender.scheduleRender(this,this.#t)}#Yi(e){const t=this.#qi?.get(e);t&&this.dispatchEvent(new y.SidebarInsight.InsightSetHovered(t.bounds))}#Xi(){this.dispatchEvent(new y.SidebarInsight.InsightSetHovered)}#Ji(){P.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://crbug.com/371170842")}#Zi(e,t){e.stopPropagation();const i=this.#qi?.get(t);i&&this.dispatchEvent(new y.SidebarInsight.InsightSetZoom(i.bounds))}#Qi(e){const t=r.Directives.classMap({"zoom-icon":!0,active:e});return zi`
|
|
951
951
|
<div class=${t}>
|
|
952
952
|
<devtools-button .data=${{variant:"icon",iconName:"center-focus-weak",size:"SMALL"}}
|
|
953
|
-
></devtools-button></div>`}#en(e){const t=
|
|
953
|
+
></devtools-button></div>`}#en(e){const t=r.Directives.classMap({"dropdown-icon":!0,active:e});return zi`
|
|
954
954
|
<div class=${t}>
|
|
955
955
|
<devtools-button .data=${{variant:"icon",iconName:"chevron-right",size:"SMALL"}}
|
|
956
956
|
></devtools-button></div>
|
|
957
|
-
`}#i(){if(!this.#ve||!this.#
|
|
957
|
+
`}#i(){if(!this.#ve||!this.#qi)return void r.render(r.nothing,this.#e,{host:this});const e=this.#qi.size>1,t=f.Helpers.createUrlLabels([...this.#qi.values()].map((({url:e})=>e))),i=zi`
|
|
958
958
|
<div class="insight-sets-wrapper">
|
|
959
|
-
${[...this.#
|
|
959
|
+
${[...this.#qi.values()].map((({id:i,url:n},s)=>{const r={insights:this.#qi,insightSetKey:i,activeCategory:this.#Wi,activeInsight:this.#ji,parsedTrace:this.#ve,traceMetadata:this.#Vi},o=zi`
|
|
960
960
|
<devtools-performance-sidebar-single-navigation
|
|
961
|
-
.data=${
|
|
961
|
+
.data=${r}>
|
|
962
962
|
</devtools-performance-sidebar-single-navigation>
|
|
963
963
|
`;return e?zi`<details
|
|
964
964
|
?open=${i===this.#Ki}
|
|
@@ -969,7 +969,7 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
969
969
|
@mouseleave=${()=>this.#Xi()}
|
|
970
970
|
title=${n.href}>
|
|
971
971
|
${this.#en(i===this.#Ki)}
|
|
972
|
-
<span>${t[
|
|
972
|
+
<span>${t[s]}</span>
|
|
973
973
|
<span class='zoom-button' @click=${e=>this.#Zi(e,i)}>${this.#Qi(i===this.#Ki)}</span>
|
|
974
974
|
</summary>
|
|
975
975
|
${o}
|
|
@@ -978,31 +978,79 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
978
978
|
|
|
979
979
|
<div class="feedback-wrapper">
|
|
980
980
|
<devtools-button .variant=${"outlined"} .iconName=${"experiment"} @click=${this.#Ji}>
|
|
981
|
-
${
|
|
981
|
+
${_i(Oi.feedbackButton)}
|
|
982
982
|
</devtools-button>
|
|
983
983
|
|
|
984
|
-
<p class="tooltip">${
|
|
984
|
+
<p class="tooltip">${_i(Oi.feedbackTooltip)}</p>
|
|
985
|
+
</div>
|
|
986
|
+
`,n=r.Directives.repeat([i],(()=>this.#ve),(e=>e));r.render(n,this.#e,{host:this})}}customElements.define("devtools-performance-sidebar-insights",Ui);var Bi=Object.freeze({__proto__:null,SidebarInsightsTab:Ui}),Vi=`:host{display:block}details{border-bottom:1px solid var(--sys-color-divider)}.issue-summary{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;cursor:pointer;list-style:none;background-color:var(--color-background);transition:background-color 0.2s ease}.issue-summary:hover{background-color:var(--sys-color-state-hover-on-subtle)}.issue-summary::-webkit-details-marker{display:none}.dropdown-icon{transition:transform 0.2s ease;flex-shrink:0}.dropdown-icon.open{transform:rotate(90deg)}.issue-info{flex:1;display:flex;flex-direction:column;gap:4px}.issue-name{font-weight:500}.event-count-pill{background-color:var(--sys-color-neutral-container);color:var(--sys-color-on-surface-subtle);border-radius:10px;padding:2px 6px;font-size:11px;font-weight:500;min-width:16px;text-align:center;line-height:1.2;display:inline-block;flex-shrink:0;margin-top:1px}.issue-summary devtools-icon{margin-top:1px}.issue-description{font-size:12px;color:var(--color-text-secondary);line-height:1.3}.issue-learn-more{font-size:12px;color:var(--text-link);text-decoration:underline}.issue-content{padding:0 12px 8px;background-color:var(--color-background)}.event-list{border-left:2px solid var(--sys-color-divider);margin-left:30px}.event-list-error{border-left-color:var(--icon-error)}.event-list-warning{border-left-color:var(--icon-warning)}.event-list-info{border-left-color:var(--icon-info)}.event-item{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;cursor:pointer;border-bottom:1px solid var(--sys-color-divider)}.event-item:focus{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:-2px}.event-item:last-child{border-bottom:none}.event-name{font-size:12px;color:var(--text-link);flex:1;font-weight:400;text-decoration:underline;cursor:pointer}.event-timestamp{font-size:11px;color:var(--color-text-secondary);margin-left:8px;font-weight:500;white-space:nowrap}\n/*# sourceURL=${import.meta.resolve("./sidebarRNPerfIssueItem.css")} */\n`;const{html:qi}=r;class ji extends HTMLElement{#e=this.attachShadow({mode:"open"});#tn=null;#in;#nn=!1;set data(e){this.#tn=e.issue,this.#in=e.onEventSelected,this.#i()}#sn(e){e.preventDefault(),this.#nn=!this.#nn,this.#i()}#rn(e){this.#in&&this.#in(e.event)}#on(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.#rn(t))}#en(e){return qi`
|
|
987
|
+
<devtools-button .data=${{variant:"icon",iconName:"chevron-right",size:"SMALL"}} class="dropdown-icon ${e?"open":""}"></devtools-button>
|
|
988
|
+
`}#an(e){const{iconName:t,color:i}={error:{iconName:"issue-cross-filled",color:"var(--icon-error)"},warning:{iconName:"issue-exclamation-filled",color:"var(--icon-warning)"},info:{iconName:"issue-text-filled",color:"var(--icon-info)"}}[e];return qi`
|
|
989
|
+
<devtools-icon .data=${{iconName:t,color:i,width:"16px",height:"16px"}}></devtools-icon>
|
|
990
|
+
`}#i(){const e=this.#tn;if(!e)return void r.render(r.nothing,this.#e,{host:this});const t=new Intl.NumberFormat(void 0,{minimumFractionDigits:1,maximumFractionDigits:1,style:"decimal"}),i=qi`
|
|
991
|
+
<style>${Vi}</style>
|
|
992
|
+
<details ?open=${this.#nn}>
|
|
993
|
+
<summary @click=${e=>this.#sn(e)} class="issue-summary">
|
|
994
|
+
${this.#en(this.#nn)}
|
|
995
|
+
${this.#an(e.severity)}
|
|
996
|
+
<span class="event-count-pill">${e.count}</span>
|
|
997
|
+
<div class="issue-info">
|
|
998
|
+
<div class="issue-name">${e.name}</div>
|
|
999
|
+
${e.description?qi`<div class="issue-description">${e.description}</div>`:""}
|
|
1000
|
+
${e.learnMoreUrl?qi`
|
|
1001
|
+
<div class="issue-learn-more">
|
|
1002
|
+
${s.XLink.XLink.create(e.learnMoreUrl,"Learn more")}
|
|
1003
|
+
</div>
|
|
1004
|
+
`:""}
|
|
1005
|
+
</div>
|
|
1006
|
+
</summary>
|
|
1007
|
+
<div class="issue-content">
|
|
1008
|
+
<div class="event-list event-list-${e.severity}">
|
|
1009
|
+
${e.events.map(((e,i)=>qi`
|
|
1010
|
+
<div class="event-item"
|
|
1011
|
+
tabindex="0"
|
|
1012
|
+
role="button"
|
|
1013
|
+
aria-label="Navigate to item ${i+1} in timeline"
|
|
1014
|
+
@click=${()=>this.#rn(e)}
|
|
1015
|
+
@keydown=${t=>this.#on(t,e)}>
|
|
1016
|
+
<div class="event-name">${e.event.name}</div>
|
|
1017
|
+
<div class="event-timestamp">${t.format(e.timestampMs)} ms</div>
|
|
1018
|
+
</div>`))}
|
|
1019
|
+
</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
</details>
|
|
1022
|
+
`;r.render(i,this.#e,{host:this})}}customElements.define("devtools-performance-sidebar-perf-issue-item",ji);var Wi=`.perf-issues-wrapper{flex:1;overflow-y:auto}.empty-state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:16px}.empty-state-title{font-size:14px;font-weight:500;color:var(--color-text-primary);margin-bottom:8px;text-align:center}.empty-state-detail{font-size:14px;color:var(--color-text-secondary);line-height:1.4;text-align:center}\n/*# sourceURL=${import.meta.resolve("./sidebarRNPerfIssuesTab.css")} */\n`;const{html:Ki}=r,Gi={error:3,warning:2,info:1},Yi={emptyStateTitle:"Performance Signals (Experimental)",emptyStateDetail:"No issues found"},Xi=t.i18n.registerUIStrings("panels/timeline/components/SidebarRNPerfSignalsTab.ts",Yi),Ji=t.i18n.getLocalizedString.bind(void 0,Xi);class Zi extends HTMLElement{#t=this.#i.bind(this);#e=this.attachShadow({mode:"open"});#ve=null;#ln=[];#dn;set parsedTrace(e){e!==this.#ve&&(this.#ve=e,this.#cn(),n.ScheduledRender.scheduleRender(this,this.#t))}setSelectTimelineEventCallback(e){this.#dn=e}hasIssues(){return this.#ln.length>0}#cn(){if(this.#ln=[],!this.#ve)return;const e=i.Helpers.Timing.microToMilli(this.#ve.Meta.traceBounds.min),t=new Map;for(const n of this.#ve.ExtensionTraceData.extensionTrackData)for(const s of Object.values(n.entriesByTrack))for(const n of s){if(!i.Types.Extensions.isSyntheticExtensionEntry(n))continue;const s=n.rawSourceEvent;try{const r=i.Types.Events.isSyntheticUserTiming(s)?s.args.data.beginEvent:s,o="detail"in r.args?r.args.detail:void 0;if(!o)continue;const a=JSON.parse(o),l=a?.devtools?.performanceIssue;if(!l)continue;const d=t.get(l.name)??{metadata:l,events:[]};d.events.push({event:n,timestampMs:i.Helpers.Timing.microToMilli(n.ts)-e}),t.set(l.name,d)}catch{continue}}for(const[e,{events:i,metadata:n}]of t)this.#ln.push({name:e,description:n.description,severity:n.severity??"info",learnMoreUrl:n.learnMoreUrl,events:i,count:i.length});this.#ln.sort(((e,t)=>{const i=Gi[t.severity]-Gi[e.severity];return 0!==i?i:e.name.localeCompare(t.name)}))}#hn(){return Ki`
|
|
1023
|
+
<div class="empty-state-container">
|
|
1024
|
+
<div class="empty-state-title">${Ji(Yi.emptyStateTitle)}</div>
|
|
1025
|
+
<div class="empty-state-detail">${Ji(Yi.emptyStateDetail)}</div>
|
|
1026
|
+
</div>
|
|
1027
|
+
`}#i(){if(!this.#ve)return void r.render(r.nothing,this.#e,{host:this});const e=Ki`
|
|
1028
|
+
<style>${Wi}</style>
|
|
1029
|
+
<div class="perf-issues-wrapper">
|
|
1030
|
+
${this.#ln.length?this.#ln.map((e=>Ki`
|
|
1031
|
+
<devtools-performance-sidebar-perf-issue-item .data=${{issue:e,onEventSelected:this.#dn}}></devtools-performance-sidebar-perf-issue-item>
|
|
1032
|
+
`)):this.#hn()}
|
|
985
1033
|
</div>
|
|
986
|
-
|
|
1034
|
+
`;r.render(e,this.#e,{host:this})}}customElements.define("devtools-performance-sidebar-perf-signals",Zi);class Qi extends Event{removedAnnotation;static eventName="removeannotation";constructor(e){super(Qi.eventName,{bubbles:!0,composed:!0}),this.removedAnnotation=e}}class en extends Event{annotation;static eventName="revealannotation";constructor(e){super(en.eventName,{bubbles:!0,composed:!0}),this.annotation=e}}class tn extends s.Widget.VBox{#si=new s.TabbedPane.TabbedPane;#gn=new nn;#pn=new sn;#un=!1;#mn=new rn;#vn=a.Settings.Settings.instance().createSetting("timeline-user-has-opened-sidebar-once",!1);userHasOpenedSidebarOnce(){return this.#vn.get()}constructor(){super(),this.setMinimumSize(170,0);const e=!S.Runtime.experiments.isEnabled("react-native-specific-ui");this.#un=S.Runtime.experiments.isEnabled("react-native-specific-ui"),e&&this.#si.appendTab("insights","Insights",this.#gn,void 0,void 0,!1,!1,0,"timeline.insights-tab"),this.#si.appendTab("annotations","Annotations",this.#pn,void 0,void 0,!1,!1,1,"timeline.annotations-tab"),this.#si.selectTab(e?"insights":"annotations")}wasShown(){this.#vn.set(!0),this.#si.show(this.element),this.#bn(),"insights"===this.#si.selectedTabId&&this.#si.tabIsDisabled("insights")&&this.#si.selectTab("annotations")}setAnnotations(e,t){this.#pn.setAnnotations(e,t),this.#bn()}#bn(){const e=this.#pn.deduplicatedAnnotations();this.#si.setBadge("annotations",e.length>0?e.length.toString():null)}setParsedTrace(e,t){if(this.#gn.setParsedTrace(e,t),this.#mn.setParsedTrace(e),this.#un){const e=this.#mn.hasIssues(),t=this.#si.hasTab("perf-signals");e&&!t?(this.#si.appendTab("perf-signals","Performance Signals",this.#mn,void 0,void 0,!1,!0),this.#si.selectTab("perf-signals")):!e&&t&&this.#si.closeTab("perf-signals")}}setSelectTimelineEventCallback(e){this.#mn.setSelectTimelineEventCallback(e)}setInsights(e){this.#gn.setInsights(e),this.#si.setTabEnabled("insights",null!==e)}setActiveInsight(e){this.#gn.setActiveInsight(e),e&&this.#si.selectTab("insights")}}class nn extends s.Widget.VBox{#fn=new Ui;constructor(){super(),this.element.classList.add("sidebar-insights"),this.element.appendChild(this.#fn)}setParsedTrace(e,t){this.#fn.parsedTrace=e,this.#fn.traceMetadata=t}setInsights(e){this.#fn.insights=e}setActiveInsight(e){this.#fn.activeInsight=e}}class sn extends s.Widget.VBox{#fn=new xi;constructor(){super(),this.element.classList.add("sidebar-annotations"),this.element.appendChild(this.#fn)}setAnnotations(e,t){this.#fn.annotationEntryToColorMap=t,this.#fn.annotations=e}deduplicatedAnnotations(){return this.#fn.deduplicatedAnnotations()}}class rn extends s.Widget.VBox{#fn=new Zi;constructor(){super(),this.element.classList.add("sidebar-perf-signals"),this.element.appendChild(this.#fn)}setParsedTrace(e){this.#fn.parsedTrace=e}setSelectTimelineEventCallback(e){this.#fn.setSelectTimelineEventCallback(e)}hasIssues(){return this.#fn.hasIssues()}}var on=Object.freeze({__proto__:null,DEFAULT_SIDEBAR_TAB:"insights",DEFAULT_SIDEBAR_WIDTH_PX:240,RemoveAnnotation:Qi,RevealAnnotation:en,SidebarWidget:tn}),an={cssText:`:host{max-height:100%;overflow:hidden auto;scrollbar-width:thin}.timeline-summary{font-size:var(--sys-typescale-body4-size);flex-direction:column;padding:0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8)}.summary-range{font-weight:var(--ref-typeface-weight-medium);height:24.5px;line-height:22px}.category-summary{gap:var(--sys-size-4);display:flex;flex-direction:column}.category-row{min-height:16px;line-height:16px}.category-swatch{display:inline-block;width:var(--sys-size-6);height:var(--sys-size-6);margin-right:var(--sys-size-4);top:var(--sys-size-1);position:relative;border:var(--sys-size-1) solid var(--sys-color-neutral-outline)}.category-name{display:inline;word-break:break-all}.category-value{text-align:right;position:relative;float:right;z-index:0;width:var(--sys-size-19)}.background-bar-container{position:absolute;inset:0 0 0 var(--sys-size-3);z-index:-1}.background-bar{width:100%;float:right;height:var(--sys-size-8);background-color:var(--sys-color-surface-yellow);border-bottom:var(--sys-size-1) solid var(--sys-color-yellow-outline)}\n/*# sourceURL=${import.meta.resolve("./timelineSummary.css")} */\n`};const{render:ln,html:dn}=r,cn={total:"Total",rangeSS:"Range: {PH1} – {PH2}"},hn=t.i18n.registerUIStrings("panels/timeline/components/TimelineSummary.ts",cn),gn=t.i18n.getLocalizedString.bind(void 0,hn);class pn extends HTMLElement{#e=s.UIUtils.createShadowRootWithCoreStyles(this,{cssFile:an,delegatesFocus:void 0});#yn=0;#wn=0;#Sn=0;#xn=[];set data(e){this.#Sn=e.total,this.#xn=e.categories,this.#yn=e.rangeStart,this.#wn=e.rangeEnd,this.#i()}#i(){const e=dn`
|
|
987
1035
|
<div class="timeline-summary">
|
|
988
|
-
<div class="summary-range">${
|
|
1036
|
+
<div class="summary-range">${gn(cn.rangeSS,{PH1:t.TimeUtilities.millisToString(this.#yn),PH2:t.TimeUtilities.millisToString(this.#wn)})}</div>
|
|
989
1037
|
<div class="category-summary">
|
|
990
|
-
${this.#
|
|
1038
|
+
${this.#xn.map((e=>dn`
|
|
991
1039
|
<div class="category-row">
|
|
992
1040
|
<div class="category-swatch" style="background-color: ${e.color};"></div>
|
|
993
1041
|
<div class="category-name">${e.title}</div>
|
|
994
1042
|
<div class="category-value">
|
|
995
1043
|
${t.TimeUtilities.preciseMillisToString(e.value)}
|
|
996
1044
|
<div class="background-bar-container">
|
|
997
|
-
<div class="background-bar" style='width: ${(100*e.value/this.#
|
|
1045
|
+
<div class="background-bar" style='width: ${(100*e.value/this.#Sn).toFixed(1)}%;'></div>
|
|
998
1046
|
</div>
|
|
999
1047
|
</div>
|
|
1000
1048
|
</div>`))}
|
|
1001
1049
|
<div class="category-row">
|
|
1002
1050
|
<div class="category-swatch"></div>
|
|
1003
|
-
<div class="category-name">${
|
|
1051
|
+
<div class="category-name">${gn(cn.total)}</div>
|
|
1004
1052
|
<div class="category-value">
|
|
1005
|
-
${t.TimeUtilities.preciseMillisToString(this.#
|
|
1053
|
+
${t.TimeUtilities.preciseMillisToString(this.#Sn)}
|
|
1006
1054
|
<div class="background-bar-container">
|
|
1007
1055
|
<div class="background-bar"></div>
|
|
1008
1056
|
</div>
|
|
@@ -1012,4 +1060,4 @@ import*as e from"../../../services/trace_bounds/trace_bounds.js";import*as t fro
|
|
|
1012
1060
|
</div>
|
|
1013
1061
|
</div>
|
|
1014
1062
|
|
|
1015
|
-
</div>`;
|
|
1063
|
+
</div>`;ln(e,this.#e,{host:this})}}customElements.define("devtools-performance-timeline-summary",pn);var un=Object.freeze({__proto__:null,CategorySummary:pn});export{R as Breadcrumbs,A as BreadcrumbsUI,K as CPUThrottlingSelector,J as DetailsView,be as FieldSettingsDialog,$e as IgnoreListSetting,He as InteractionBreakdown,Ve as LayoutShiftDetails,_t as LiveMetricsView,$t as MetricCard,ni as NetworkRequestDetails,Yt as NetworkRequestTooltip,Ze as NetworkThrottlingSelector,oe as OriginMap,hi as RelatedInsightChips,on as Sidebar,Ti as SidebarAnnotationsTab,Bi as SidebarInsightsTab,Hi as SidebarSingleInsightSet,un as TimelineSummary,bt as Utils};
|