lighthouse 11.4.0-dev.20231211 → 11.4.0-dev.20231213
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.
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import {makeComputedArtifact} from './computed-artifact.js';
|
|
8
8
|
import {NetworkRecords} from './network-records.js';
|
|
9
9
|
import {Util} from '../../shared/util.js';
|
|
10
|
-
import {
|
|
10
|
+
import {estimateCompressedContentSize} from '../lib/script-helpers.js';
|
|
11
11
|
|
|
12
12
|
const PREVIEW_LENGTH = 100;
|
|
13
13
|
|
|
@@ -70,15 +70,15 @@ class UnusedCSS {
|
|
|
70
70
|
usedUncompressedBytes += usedRule.endOffset - usedRule.startOffset;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
const
|
|
73
|
+
const compressedSize = estimateCompressedContentSize(
|
|
74
74
|
stylesheetInfo.networkRecord, totalUncompressedBytes, 'Stylesheet');
|
|
75
75
|
const percentUnused = (totalUncompressedBytes - usedUncompressedBytes) / totalUncompressedBytes;
|
|
76
|
-
const wastedBytes = Math.round(percentUnused *
|
|
76
|
+
const wastedBytes = Math.round(percentUnused * compressedSize);
|
|
77
77
|
|
|
78
78
|
return {
|
|
79
79
|
wastedBytes,
|
|
80
80
|
wastedPercent: percentUnused * 100,
|
|
81
|
-
totalBytes:
|
|
81
|
+
totalBytes: compressedSize,
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
84
|
|
|
@@ -60,7 +60,7 @@ var Ne=.8999999999999999,Re=.5,Ie=.49999999999999994;function He(r){let e=Math.s
|
|
|
60
60
|
.lh-crc__summary-value {
|
|
61
61
|
margin-bottom: 10px;
|
|
62
62
|
}
|
|
63
|
-
`);let o=r.createElement("div"),i=r.createElement("div","lh-crc__summary-value"),a=r.createElement("span","lh-crc__longest_duration_label"),l=r.createElement("b","lh-crc__longest_duration");i.append(" ",a," ",l," "),o.append(" ",i," ");let s=r.createElement("div","lh-crc"),c=r.createElement("div","lh-crc-initial-nav");return s.append(" ",c," "," "),t.append(" ",n," ",o," ",s," "),e.append(t),e}function Je(r){let e=r.createFragment(),t=r.createElement("div","lh-crc-node"),n=r.createElement("span","lh-crc-node__tree-marker"),o=r.createElement("span","lh-crc-node__tree-value");return t.append(" ",n," ",o," "),e.append(t),e}function Ze(r){let e=r.createFragment(),t=r.createElement("div","lh-element-screenshot"),n=r.createElement("div","lh-element-screenshot__content"),o=r.createElement("div","lh-element-screenshot__image"),i=r.createElement("div","lh-element-screenshot__mask"),a=r.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("height","0"),a.setAttribute("width","0");let l=r.createElementNS("http://www.w3.org/2000/svg","defs"),s=r.createElementNS("http://www.w3.org/2000/svg","clipPath");s.setAttribute("clipPathUnits","objectBoundingBox"),l.append(" ",s," "," "),a.append(" ",l," "),i.append(" ",a," ");let c=r.createElement("div","lh-element-screenshot__element-marker");return o.append(" ",i," ",c," "),n.append(" ",o," "),t.append(" ",n," "),e.append(t),e}function Qe(r){let e=r.createFragment(),t=r.createElement("div","lh-exp-gauge-component"),n=r.createElement("div","lh-exp-gauge__wrapper");n.setAttribute("target","_blank");let o=r.createElement("div","lh-exp-gauge__svg-wrapper"),i=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-exp-gauge"),a=r.createElementNS("http://www.w3.org/2000/svg","g","lh-exp-gauge__inner"),l=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__bg"),s=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__base lh-exp-gauge--faded"),c=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__arc"),d=r.createElementNS("http://www.w3.org/2000/svg","text","lh-exp-gauge__percentage");a.append(" ",l," ",s," ",c," ",d," ");let p=r.createElementNS("http://www.w3.org/2000/svg","g","lh-exp-gauge__outer"),h=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-cover");p.append(" ",h," ");let
|
|
63
|
+
`);let o=r.createElement("div"),i=r.createElement("div","lh-crc__summary-value"),a=r.createElement("span","lh-crc__longest_duration_label"),l=r.createElement("b","lh-crc__longest_duration");i.append(" ",a," ",l," "),o.append(" ",i," ");let s=r.createElement("div","lh-crc"),c=r.createElement("div","lh-crc-initial-nav");return s.append(" ",c," "," "),t.append(" ",n," ",o," ",s," "),e.append(t),e}function Je(r){let e=r.createFragment(),t=r.createElement("div","lh-crc-node"),n=r.createElement("span","lh-crc-node__tree-marker"),o=r.createElement("span","lh-crc-node__tree-value");return t.append(" ",n," ",o," "),e.append(t),e}function Ze(r){let e=r.createFragment(),t=r.createElement("div","lh-element-screenshot"),n=r.createElement("div","lh-element-screenshot__content"),o=r.createElement("div","lh-element-screenshot__image"),i=r.createElement("div","lh-element-screenshot__mask"),a=r.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("height","0"),a.setAttribute("width","0");let l=r.createElementNS("http://www.w3.org/2000/svg","defs"),s=r.createElementNS("http://www.w3.org/2000/svg","clipPath");s.setAttribute("clipPathUnits","objectBoundingBox"),l.append(" ",s," "," "),a.append(" ",l," "),i.append(" ",a," ");let c=r.createElement("div","lh-element-screenshot__element-marker");return o.append(" ",i," ",c," "),n.append(" ",o," "),t.append(" ",n," "),e.append(t),e}function Qe(r){let e=r.createFragment(),t=r.createElement("div","lh-exp-gauge-component"),n=r.createElement("div","lh-exp-gauge__wrapper");n.setAttribute("target","_blank");let o=r.createElement("div","lh-exp-gauge__svg-wrapper"),i=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-exp-gauge"),a=r.createElementNS("http://www.w3.org/2000/svg","g","lh-exp-gauge__inner"),l=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__bg"),s=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__base lh-exp-gauge--faded"),c=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-exp-gauge__arc"),d=r.createElementNS("http://www.w3.org/2000/svg","text","lh-exp-gauge__percentage");a.append(" ",l," ",s," ",c," ",d," ");let p=r.createElementNS("http://www.w3.org/2000/svg","g","lh-exp-gauge__outer"),h=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-cover");p.append(" ",h," ");let u=r.createElementNS("http://www.w3.org/2000/svg","text","lh-exp-gauge__label");return u.setAttribute("text-anchor","middle"),u.setAttribute("x","0"),u.setAttribute("y","60"),i.append(" ",a," ",p," ",u," "),o.append(" ",i," "),n.append(" ",o," "),t.append(" ",n," "),e.append(t),e}function Xe(r){let e=r.createFragment(),t=r.createElement("style");t.append(`
|
|
64
64
|
.lh-footer {
|
|
65
65
|
padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
|
|
66
66
|
max-width: var(--report-content-max-width);
|
|
@@ -111,7 +111,7 @@ var Ne=.8999999999999999,Re=.5,Ie=.49999999999999994;function He(r){let e=Math.s
|
|
|
111
111
|
.lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle {
|
|
112
112
|
display: inline;
|
|
113
113
|
}
|
|
114
|
-
`),e.append(t);let n=r.createElement("a","lh-gauge__wrapper lh-gauge--pwa__wrapper"),o=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-gauge lh-gauge--pwa");o.setAttribute("viewBox","0 0 60 60");let i=r.createElementNS("http://www.w3.org/2000/svg","defs"),a=r.createElementNS("http://www.w3.org/2000/svg","linearGradient");a.setAttribute("id","lh-gauge--pwa__check-circle__gradient"),a.setAttribute("x1","50%"),a.setAttribute("y1","0%"),a.setAttribute("x2","50%"),a.setAttribute("y2","100%");let l=r.createElementNS("http://www.w3.org/2000/svg","stop");l.setAttribute("stop-color","#00C852"),l.setAttribute("offset","0%");let s=r.createElementNS("http://www.w3.org/2000/svg","stop");s.setAttribute("stop-color","#009688"),s.setAttribute("offset","100%"),a.append(" ",l," ",s," ");let c=r.createElementNS("http://www.w3.org/2000/svg","linearGradient");c.setAttribute("id","lh-gauge--pwa__installable__shadow-gradient"),c.setAttribute("x1","76.056%"),c.setAttribute("x2","24.111%"),c.setAttribute("y1","82.995%"),c.setAttribute("y2","24.735%");let d=r.createElementNS("http://www.w3.org/2000/svg","stop");d.setAttribute("stop-color","#A5D6A7"),d.setAttribute("offset","0%");let p=r.createElementNS("http://www.w3.org/2000/svg","stop");p.setAttribute("stop-color","#80CBC4"),p.setAttribute("offset","100%"),c.append(" ",d," ",p," ");let h=r.createElementNS("http://www.w3.org/2000/svg","g");h.setAttribute("id","lh-gauge--pwa__installable-badge");let
|
|
114
|
+
`),e.append(t);let n=r.createElement("a","lh-gauge__wrapper lh-gauge--pwa__wrapper"),o=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-gauge lh-gauge--pwa");o.setAttribute("viewBox","0 0 60 60");let i=r.createElementNS("http://www.w3.org/2000/svg","defs"),a=r.createElementNS("http://www.w3.org/2000/svg","linearGradient");a.setAttribute("id","lh-gauge--pwa__check-circle__gradient"),a.setAttribute("x1","50%"),a.setAttribute("y1","0%"),a.setAttribute("x2","50%"),a.setAttribute("y2","100%");let l=r.createElementNS("http://www.w3.org/2000/svg","stop");l.setAttribute("stop-color","#00C852"),l.setAttribute("offset","0%");let s=r.createElementNS("http://www.w3.org/2000/svg","stop");s.setAttribute("stop-color","#009688"),s.setAttribute("offset","100%"),a.append(" ",l," ",s," ");let c=r.createElementNS("http://www.w3.org/2000/svg","linearGradient");c.setAttribute("id","lh-gauge--pwa__installable__shadow-gradient"),c.setAttribute("x1","76.056%"),c.setAttribute("x2","24.111%"),c.setAttribute("y1","82.995%"),c.setAttribute("y2","24.735%");let d=r.createElementNS("http://www.w3.org/2000/svg","stop");d.setAttribute("stop-color","#A5D6A7"),d.setAttribute("offset","0%");let p=r.createElementNS("http://www.w3.org/2000/svg","stop");p.setAttribute("stop-color","#80CBC4"),p.setAttribute("offset","100%"),c.append(" ",d," ",p," ");let h=r.createElementNS("http://www.w3.org/2000/svg","g");h.setAttribute("id","lh-gauge--pwa__installable-badge");let u=r.createElementNS("http://www.w3.org/2000/svg","circle");u.setAttribute("fill","#FFFFFF"),u.setAttribute("cx","10"),u.setAttribute("cy","10"),u.setAttribute("r","10");let v=r.createElementNS("http://www.w3.org/2000/svg","path");v.setAttribute("fill","#009688"),v.setAttribute("d","M10 4.167A5.835 5.835 0 0 0 4.167 10 5.835 5.835 0 0 0 10 15.833 5.835 5.835 0 0 0 15.833 10 5.835 5.835 0 0 0 10 4.167zm2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334v1.166z"),h.append(" ",u," ",v," "),i.append(" ",a," ",c," ",h," ");let w=r.createElementNS("http://www.w3.org/2000/svg","g");w.setAttribute("stroke","none"),w.setAttribute("fill-rule","nonzero");let f=r.createElementNS("http://www.w3.org/2000/svg","circle","lh-gauge--pwa__disc");f.setAttribute("cx","30"),f.setAttribute("cy","30"),f.setAttribute("r","30");let x=r.createElementNS("http://www.w3.org/2000/svg","g","lh-gauge--pwa__logo"),g=r.createElementNS("http://www.w3.org/2000/svg","path","lh-gauge--pwa__logo--secondary-color");g.setAttribute("d","M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z");let b=r.createElementNS("http://www.w3.org/2000/svg","path","lh-gauge--pwa__logo--primary-color");b.setAttribute("d","M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z");let _=r.createElementNS("http://www.w3.org/2000/svg","path","lh-gauge--pwa__logo--secondary-color");_.setAttribute("fill-rule","nonzero"),_.setAttribute("d","M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"),x.append(" ",g," ",b," ",_," ");let k=r.createElementNS("http://www.w3.org/2000/svg","rect","lh-gauge--pwa__component lh-gauge--pwa__na-line");k.setAttribute("fill","#FFFFFF"),k.setAttribute("x","20"),k.setAttribute("y","32"),k.setAttribute("width","20"),k.setAttribute("height","4"),k.setAttribute("rx","2");let T=r.createElementNS("http://www.w3.org/2000/svg","g","lh-gauge--pwa__component lh-gauge--pwa__installable-badge");T.setAttribute("transform","translate(20, 29)");let C=r.createElementNS("http://www.w3.org/2000/svg","path");C.setAttribute("fill","url(#lh-gauge--pwa__installable__shadow-gradient)"),C.setAttribute("d","M33.629 19.487c-4.272 5.453-10.391 9.39-17.415 10.869L3 17.142 17.142 3 33.63 19.487z");let F=r.createElementNS("http://www.w3.org/2000/svg","use");F.setAttribute("href","#lh-gauge--pwa__installable-badge"),T.append(" ",C," ",F," ");let P=r.createElementNS("http://www.w3.org/2000/svg","g","lh-gauge--pwa__component lh-gauge--pwa__check-circle");P.setAttribute("transform","translate(18, 28)");let S=r.createElementNS("http://www.w3.org/2000/svg","circle");S.setAttribute("fill","#FFFFFF"),S.setAttribute("cx","12"),S.setAttribute("cy","12"),S.setAttribute("r","12");let z=r.createElementNS("http://www.w3.org/2000/svg","path");z.setAttribute("fill","url(#lh-gauge--pwa__check-circle__gradient)"),z.setAttribute("d","M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"),P.append(" ",S," ",z," "),w.append(" "," ",f," ",x," "," ",k," "," ",T," "," ",P," "),o.append(" ",i," ",w," ");let M=r.createElement("div","lh-gauge__label");return n.append(" ",o," ",M," "),e.append(n),e}function nt(r){let e=r.createFragment(),t=r.createElement("style");t.append(`
|
|
115
115
|
/* CSS Fireworks. Originally by Eddie Lin
|
|
116
116
|
https://codepen.io/paulirish/pen/yEVMbP
|
|
117
117
|
*/
|
|
@@ -1239,16 +1239,16 @@ var Ne=.8999999999999999,Re=.5,Ie=.49999999999999994;function He(r){let e=Math.s
|
|
|
1239
1239
|
}
|
|
1240
1240
|
|
|
1241
1241
|
.lh-filmstrip {
|
|
1242
|
-
display:
|
|
1242
|
+
display: flex;
|
|
1243
1243
|
justify-content: space-between;
|
|
1244
|
-
|
|
1244
|
+
justify-items: center;
|
|
1245
|
+
margin-bottom: var(--default-padding);
|
|
1245
1246
|
width: 100%;
|
|
1246
|
-
grid-template-columns: repeat(auto-fit, 90px);
|
|
1247
1247
|
}
|
|
1248
1248
|
|
|
1249
1249
|
.lh-filmstrip__frame {
|
|
1250
|
-
|
|
1251
|
-
|
|
1250
|
+
overflow: hidden;
|
|
1251
|
+
line-height: 0;
|
|
1252
1252
|
}
|
|
1253
1253
|
|
|
1254
1254
|
.lh-filmstrip__thumbnail {
|
|
@@ -2629,8 +2629,8 @@ details[open] .lh-clump-toggletext--hide { display: block;}
|
|
|
2629
2629
|
display: none;
|
|
2630
2630
|
}
|
|
2631
2631
|
}
|
|
2632
|
-
`),e.append(t);let n=r.createElement("div","lh-topbar"),o=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-topbar__logo");o.setAttribute("role","img"),o.setAttribute("title","Lighthouse logo"),o.setAttribute("fill","none"),o.setAttribute("xmlns","http://www.w3.org/2000/svg"),o.setAttribute("viewBox","0 0 48 48");let i=r.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("d","m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z"),i.setAttribute("fill","#F63");let a=r.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d","M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z"),a.setAttribute("fill","#FFA385");let l=r.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("fill","#FF3"),l.setAttribute("d","M20.5 10h7v7h-7z"),o.append(" ",i," ",a," ",l," ");let s=r.createElement("a","lh-topbar__url");s.setAttribute("href",""),s.setAttribute("target","_blank"),s.setAttribute("rel","noopener");let c=r.createElement("div","lh-tools"),d=r.createElement("div","lh-tools-locale lh-hidden"),p=r.createElement("button","lh-button lh-tool-locale__button");p.setAttribute("id","lh-button__swap-locales"),p.setAttribute("title","Show Language Picker"),p.setAttribute("aria-label","Toggle language picker"),p.setAttribute("aria-haspopup","menu"),p.setAttribute("aria-expanded","false"),p.setAttribute("aria-controls","lh-tools-locale__selector-wrapper");let h=r.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttribute("width","20px"),h.setAttribute("height","20px"),h.setAttribute("viewBox","0 0 24 24"),h.setAttribute("fill","currentColor");let g=r.createElementNS("http://www.w3.org/2000/svg","path");g.setAttribute("d","M0 0h24v24H0V0z"),g.setAttribute("fill","none");let v=r.createElementNS("http://www.w3.org/2000/svg","path");v.setAttribute("d","M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"),h.append(g,v),p.append(" ",h," ");let w=r.createElement("div","lh-tools-locale__selector-wrapper");w.setAttribute("id","lh-tools-locale__selector-wrapper"),w.setAttribute("role","menu"),w.setAttribute("aria-labelledby","lh-button__swap-locales"),w.setAttribute("aria-hidden","true"),w.append(" "," "),d.append(" ",p," ",w," ");let f=r.createElement("button","lh-tools__button");f.setAttribute("id","lh-tools-button"),f.setAttribute("title","Tools menu"),f.setAttribute("aria-label","Toggle report tools menu"),f.setAttribute("aria-haspopup","menu"),f.setAttribute("aria-expanded","false"),f.setAttribute("aria-controls","lh-tools-dropdown");let x=r.createElementNS("http://www.w3.org/2000/svg","svg");x.setAttribute("width","100%"),x.setAttribute("height","100%"),x.setAttribute("viewBox","0 0 24 24");let u=r.createElementNS("http://www.w3.org/2000/svg","path");u.setAttribute("d","M0 0h24v24H0z"),u.setAttribute("fill","none");let b=r.createElementNS("http://www.w3.org/2000/svg","path");b.setAttribute("d","M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"),x.append(" ",u," ",b," "),f.append(" ",x," ");let _=r.createElement("div","lh-tools__dropdown");_.setAttribute("id","lh-tools-dropdown"),_.setAttribute("role","menu"),_.setAttribute("aria-labelledby","lh-tools-button");let k=r.createElement("a","lh-report-icon lh-report-icon--print");k.setAttribute("role","menuitem"),k.setAttribute("tabindex","-1"),k.setAttribute("href","#"),k.setAttribute("data-i18n","dropdownPrintSummary"),k.setAttribute("data-action","print-summary");let T=r.createElement("a","lh-report-icon lh-report-icon--print");T.setAttribute("role","menuitem"),T.setAttribute("tabindex","-1"),T.setAttribute("href","#"),T.setAttribute("data-i18n","dropdownPrintExpanded"),T.setAttribute("data-action","print-expanded");let C=r.createElement("a","lh-report-icon lh-report-icon--copy");C.setAttribute("role","menuitem"),C.setAttribute("tabindex","-1"),C.setAttribute("href","#"),C.setAttribute("data-i18n","dropdownCopyJSON"),C.setAttribute("data-action","copy");let F=r.createElement("a","lh-report-icon lh-report-icon--download lh-hidden");F.setAttribute("role","menuitem"),F.setAttribute("tabindex","-1"),F.setAttribute("href","#"),F.setAttribute("data-i18n","dropdownSaveHTML"),F.setAttribute("data-action","save-html");let P=r.createElement("a","lh-report-icon lh-report-icon--download");P.setAttribute("role","menuitem"),P.setAttribute("tabindex","-1"),P.setAttribute("href","#"),P.setAttribute("data-i18n","dropdownSaveJSON"),P.setAttribute("data-action","save-json");let S=r.createElement("a","lh-report-icon lh-report-icon--open");S.setAttribute("role","menuitem"),S.setAttribute("tabindex","-1"),S.setAttribute("href","#"),S.setAttribute("data-i18n","dropdownViewer"),S.setAttribute("data-action","open-viewer");let z=r.createElement("a","lh-report-icon lh-report-icon--open");z.setAttribute("role","menuitem"),z.setAttribute("tabindex","-1"),z.setAttribute("href","#"),z.setAttribute("data-i18n","dropdownSaveGist"),z.setAttribute("data-action","save-gist");let M=r.createElement("a","lh-report-icon lh-report-icon--open lh-hidden");M.setAttribute("role","menuitem"),M.setAttribute("tabindex","-1"),M.setAttribute("href","#"),M.setAttribute("data-i18n","dropdownViewUnthrottledTrace"),M.setAttribute("data-action","view-unthrottled-trace");let I=r.createElement("a","lh-report-icon lh-report-icon--dark");return I.setAttribute("role","menuitem"),I.setAttribute("tabindex","-1"),I.setAttribute("href","#"),I.setAttribute("data-i18n","dropdownDarkTheme"),I.setAttribute("data-action","toggle-dark"),_.append(" ",k," ",T," ",C," "," ",F," ",P," ",S," ",z," "," ",M," ",I," "),c.append(" ",d," ",f," ",_," "),n.append(" "," ",o," ",s," ",c," "),e.append(n),e}function ht(r){let e=r.createFragment(),t=r.createElement("div","lh-warnings lh-warnings--toplevel"),n=r.createElement("p","lh-warnings__msg"),o=r.createElement("ul");return t.append(" ",n," ",o," "),e.append(t),e}function we(r,e){switch(e){case"3pFilter":return Oe(r);case"audit":return Be(r);case"categoryHeader":return je(r);case"chevron":return qe(r);case"clump":return We(r);case"crc":return Ke(r);case"crcChain":return Je(r);case"elementScreenshot":return Ze(r);case"explodeyGauge":return Qe(r);case"footer":return Xe(r);case"fraction":return Ye(r);case"gauge":return et(r);case"gaugePwa":return tt(r);case"heading":return nt(r);case"metric":return rt(r);case"scorescale":return ot(r);case"scoresWrapper":return it(r);case"snippet":return at(r);case"snippetContent":return lt(r);case"snippetHeader":return st(r);case"snippetLine":return ct(r);case"styles":return dt(r);case"topbar":return pt(r);case"warningsToplevel":return ht(r)}throw new Error("unexpected component: "+e)}var Y=class{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this._componentCache=new Map,this.rootEl=t}createElement(e,t){let n=this._document.createElement(e);if(t)for(let o of t.split(/\s+/))o&&n.classList.add(o);return n}createElementNS(e,t,n){let o=this._document.createElementNS(e,t);if(n)for(let i of n.split(/\s+/))i&&o.classList.add(i);return o}createSVGElement(e,t){return this._document.createElementNS("http://www.w3.org/2000/svg",e,t)}createFragment(){return this._document.createDocumentFragment()}createTextNode(e){return this._document.createTextNode(e)}createChildOf(e,t,n){let o=this.createElement(t,n);return e.append(o),o}createComponent(e){let t=this._componentCache.get(e);if(t){let o=t.cloneNode(!0);return this.findAll("style",o).forEach(i=>i.remove()),o}return t=we(this,e),this._componentCache.set(e,t),t.cloneNode(!0)}clearComponentCache(){this._componentCache.clear()}convertMarkdownLinkSnippets(e,t={}){let n=this.createElement("span");for(let o of A.splitMarkdownLink(e)){let i=o.text.includes("`")?this.convertMarkdownCodeSnippets(o.text):o.text;if(!o.isLink){n.append(i);continue}let a=new URL(o.linkHref);(["https://developers.google.com","https://web.dev","https://developer.chrome.com"].includes(a.origin)||t.alwaysAppendUtmSource)&&(a.searchParams.set("utm_source","lighthouse"),a.searchParams.set("utm_medium",this._lighthouseChannel));let s=this.createElement("a");s.rel="noopener",s.target="_blank",s.append(i),this.safelySetHref(s,a.href),n.append(s)}return n}safelySetHref(e,t){if(t=t||"",t.startsWith("#")){e.href=t;return}let n=["https:","http:"],o;try{o=new URL(t)}catch{}o&&n.includes(o.protocol)&&(e.href=o.href)}safelySetBlobHref(e,t){if(t.type!=="text/html"&&t.type!=="application/json")throw new Error("Unsupported blob type");let n=URL.createObjectURL(t);e.href=n}convertMarkdownCodeSnippets(e){let t=this.createElement("span");for(let n of A.splitMarkdownCodeSpans(e))if(n.isCode){let o=this.createElement("code");o.textContent=n.text,t.append(o)}else t.append(this._document.createTextNode(n.text));return t}setLighthouseChannel(e){this._lighthouseChannel=e}document(){return this._document}isDevTools(){return!!this._document.querySelector(".lh-devtools")}find(e,t){let n=this.maybeFind(e,t);if(n===null)throw new Error(`query ${e} not found`);return n}maybeFind(e,t){return t.querySelector(e)}findAll(e,t){return Array.from(t.querySelectorAll(e))}fireEventOn(e,t=this._document,n){let o=new CustomEvent(e,n?{detail:n}:void 0);t.dispatchEvent(o)}saveFile(e,t){let n=this.createElement("a");n.download=t,this.safelySetBlobHref(n,e),this._document.body.append(n),n.click(),this._document.body.removeChild(n),setTimeout(()=>URL.revokeObjectURL(n.href),500)}};var ye=0,m=class r{static i18n=null;static strings={};static reportJson=null;static apply(e){r.strings={...xe,...e.providedStrings},r.i18n=e.i18n,r.reportJson=e.reportJson}static getUniqueSuffix(){return ye++}static resetUniqueSuffix(){ye=0}};var Ee="data:image/jpeg;base64,";function ke(r){r.configSettings.locale||(r.configSettings.locale="en"),r.configSettings.formFactor||(r.configSettings.formFactor=r.configSettings.emulatedFormFactor),r.finalDisplayedUrl=A.getFinalDisplayedUrl(r),r.mainDocumentUrl=A.getMainDocumentUrl(r);for(let n of Object.values(r.audits))if((n.scoreDisplayMode==="not_applicable"||n.scoreDisplayMode==="not-applicable")&&(n.scoreDisplayMode="notApplicable"),n.details){if((n.details.type===void 0||n.details.type==="diagnostic")&&(n.details.type="debugdata"),n.details.type==="filmstrip")for(let o of n.details.items)o.data.startsWith(Ee)||(o.data=Ee+o.data);if(n.details.type==="table")for(let o of n.details.headings){let{itemType:i,text:a}=o;i!==void 0&&(o.valueType=i,delete o.itemType),a!==void 0&&(o.label=a,delete o.text);let l=o.subItemsHeading?.itemType;o.subItemsHeading&&l!==void 0&&(o.subItemsHeading.valueType=l,delete o.subItemsHeading.itemType)}if(n.id==="third-party-summary"&&(n.details.type==="opportunity"||n.details.type==="table")){let{headings:o,items:i}=n.details;if(o[0].valueType==="link"){o[0].valueType="text";for(let a of i)typeof a.entity=="object"&&a.entity.type==="link"&&(a.entity=a.entity.text);n.details.isEntityGrouped=!0}}}let[e]=r.lighthouseVersion.split(".").map(Number),t=r.categories.performance;if(e<9&&t){r.categoryGroups||(r.categoryGroups={}),r.categoryGroups.hidden={title:""};for(let n of t.auditRefs)n.group?["load-opportunities","diagnostics"].includes(n.group)&&delete n.group:n.group="hidden"}if(r.environment||(r.environment={benchmarkIndex:0,networkUserAgent:r.userAgent,hostUserAgent:r.userAgent}),r.configSettings.screenEmulation||(r.configSettings.screenEmulation={width:-1,height:-1,deviceScaleFactor:-1,mobile:/mobile/i.test(r.environment.hostUserAgent),disabled:!1}),r.i18n||(r.i18n={}),r.audits["full-page-screenshot"]){let n=r.audits["full-page-screenshot"].details;n?r.fullPageScreenshot={screenshot:n.screenshot,nodes:n.nodes}:r.fullPageScreenshot=null,delete r.audits["full-page-screenshot"]}}var G=A.RATINGS,E=class r{static prepareReportResult(e){let t=JSON.parse(JSON.stringify(e));ke(t);for(let o of Object.values(t.audits))o.details&&(o.details.type==="opportunity"||o.details.type==="table")&&!o.details.isEntityGrouped&&t.entities&&r.classifyEntities(t.entities,o.details);if(typeof t.categories!="object")throw new Error("No categories provided.");let n=new Map;for(let o of Object.values(t.categories))o.auditRefs.forEach(i=>{i.relevantAudits&&i.relevantAudits.forEach(a=>{let l=n.get(a)||[];l.push(i),n.set(a,l)})}),o.auditRefs.forEach(i=>{let a=t.audits[i.id];i.result=a,n.has(i.id)&&(i.relevantMetrics=n.get(i.id)),t.stackPacks&&t.stackPacks.forEach(l=>{l.descriptions[i.id]&&(i.stackPacks=i.stackPacks||[],i.stackPacks.push({title:l.title,iconDataURL:l.iconDataURL,description:l.descriptions[i.id]}))})});return t}static getUrlLocatorFn(e){let t=e.find(o=>o.valueType==="url")?.key;if(t&&typeof t=="string")return o=>{let i=o[t];if(typeof i=="string")return i};let n=e.find(o=>o.valueType==="source-location")?.key;if(n)return o=>{let i=o[n];if(typeof i=="object"&&i.type==="source-location")return i.url}}static classifyEntities(e,t){let{items:n,headings:o}=t;if(!n.length||n.some(a=>a.entity))return;let i=r.getUrlLocatorFn(o);if(i)for(let a of n){let l=i(a);if(!l)continue;let s="";try{s=A.parseURL(l).origin}catch{}if(!s)continue;let c=e.find(d=>d.origins.includes(s));c&&(a.entity=c.name)}}static getTableItemSortComparator(e){return(t,n)=>{for(let o of e){let i=t[o],a=n[o];if((typeof i!=typeof a||!["number","string"].includes(typeof i))&&console.warn(`Warning: Attempting to sort unsupported value type: ${o}.`),typeof i=="number"&&typeof a=="number"&&i!==a)return a-i;if(typeof i=="string"&&typeof a=="string"&&i!==a)return i.localeCompare(a)}return 0}}static getEmulationDescriptions(e){let t,n,o,i=e.throttling,a=m.i18n,l=m.strings;switch(e.throttlingMethod){case"provided":o=n=t=l.throttlingProvided;break;case"devtools":{let{cpuSlowdownMultiplier:h,requestLatencyMs:g}=i;t=`${a.formatNumber(h)}x slowdown (DevTools)`,n=`${a.formatMilliseconds(g)} HTTP RTT, ${a.formatKbps(i.downloadThroughputKbps)} down, ${a.formatKbps(i.uploadThroughputKbps)} up (DevTools)`,o=(()=>g===150*3.75&&i.downloadThroughputKbps===1.6*1024*.9&&i.uploadThroughputKbps===750*.9)()?l.runtimeSlow4g:l.runtimeCustom;break}case"simulate":{let{cpuSlowdownMultiplier:h,rttMs:g,throughputKbps:v}=i;t=`${a.formatNumber(h)}x slowdown (Simulated)`,n=`${a.formatMilliseconds(g)} TCP RTT, ${a.formatKbps(v)} throughput (Simulated)`,o=(()=>g===150&&v===1.6*1024)()?l.runtimeSlow4g:l.runtimeCustom;break}default:o=t=n=l.runtimeUnknown}let s=e.channel==="devtools"?!1:e.screenEmulation.disabled,c=e.channel==="devtools"?e.formFactor==="mobile":e.screenEmulation.mobile,d=l.runtimeMobileEmulation;s?d=l.runtimeNoEmulation:c||(d=l.runtimeDesktopEmulation);let p=s?void 0:`${e.screenEmulation.width}x${e.screenEmulation.height}, DPR ${e.screenEmulation.deviceScaleFactor}`;return{deviceEmulation:d,screenEmulation:p,cpuThrottling:t,networkThrottling:n,summary:o}}static showAsPassed(e){switch(e.scoreDisplayMode){case"manual":case"notApplicable":return!0;case"error":case"informative":return!1;case"numeric":case"binary":default:return Number(e.score)>=G.PASS.minScore}}static calculateRating(e,t){if(t==="manual"||t==="notApplicable")return G.PASS.label;if(t==="error")return G.ERROR.label;if(e===null)return G.FAIL.label;let n=G.FAIL.label;return e>=G.PASS.minScore?n=G.PASS.label:e>=G.AVERAGE.minScore&&(n=G.AVERAGE.label),n}static calculateCategoryFraction(e){let t=0,n=0,o=0,i=0;for(let a of e.auditRefs){let l=r.showAsPassed(a.result);if(!(a.group==="hidden"||a.result.scoreDisplayMode==="manual"||a.result.scoreDisplayMode==="notApplicable")){if(a.result.scoreDisplayMode==="informative"){l||++o;continue}++t,i+=a.weight,l&&n++}}return{numPassed:n,numPassableAudits:t,numInformative:o,totalWeight:i}}static isPluginCategory(e){return e.startsWith("lighthouse-plugin-")}static shouldDisplayAsFraction(e){return e==="timespan"||e==="snapshot"}},xe={varianceDisclaimer:"Values are estimated and may vary. The [performance score is calculated](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) directly from these metrics.",calculatorLink:"See calculator.",showRelevantAudits:"Show audits relevant to:",opportunityResourceColumnLabel:"Opportunity",opportunitySavingsColumnLabel:"Estimated Savings",errorMissingAuditInfo:"Report error: no audit information",errorLabel:"Error!",warningHeader:"Warnings: ",warningAuditsGroupTitle:"Passed audits but with warnings",passedAuditsGroupTitle:"Passed audits",notApplicableAuditsGroupTitle:"Not applicable",manualAuditsGroupTitle:"Additional items to manually check",toplevelWarningsMessage:"There were issues affecting this run of Lighthouse:",crcInitialNavigation:"Initial Navigation",crcLongestDurationLabel:"Maximum critical path latency:",snippetExpandButtonLabel:"Expand snippet",snippetCollapseButtonLabel:"Collapse snippet",lsPerformanceCategoryDescription:"[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",labDataTitle:"Lab Data",thirdPartyResourcesLabel:"Show 3rd-party resources",viewTreemapLabel:"View Treemap",viewTraceLabel:"View Trace",dropdownPrintSummary:"Print Summary",dropdownPrintExpanded:"Print Expanded",dropdownCopyJSON:"Copy JSON",dropdownSaveHTML:"Save as HTML",dropdownSaveJSON:"Save as JSON",dropdownViewer:"Open in Viewer",dropdownSaveGist:"Save as Gist",dropdownDarkTheme:"Toggle Dark Theme",dropdownViewUnthrottledTrace:"View Unthrottled Trace",runtimeSettingsDevice:"Device",runtimeSettingsNetworkThrottling:"Network throttling",runtimeSettingsCPUThrottling:"CPU throttling",runtimeSettingsUANetwork:"User agent (network)",runtimeSettingsBenchmark:"Unthrottled CPU/Memory Power",runtimeSettingsAxeVersion:"Axe version",runtimeSettingsScreenEmulation:"Screen emulation",footerIssue:"File an issue",runtimeNoEmulation:"No emulation",runtimeMobileEmulation:"Emulated Moto G Power",runtimeDesktopEmulation:"Emulated Desktop",runtimeUnknown:"Unknown",runtimeSingleLoad:"Single page session",runtimeAnalysisWindow:"Initial page load",runtimeAnalysisWindowTimespan:"User interactions timespan",runtimeAnalysisWindowSnapshot:"Point-in-time snapshot",runtimeSingleLoadTooltip:"This data is taken from a single page session, as opposed to field data summarizing many sessions.",throttlingProvided:"Provided by environment",show:"Show",hide:"Hide",expandView:"Expand view",collapseView:"Collapse view",runtimeSlow4g:"Slow 4G throttling",runtimeCustom:"Custom throttling",firstPartyChipLabel:"1st party",openInANewTabTooltip:"Open in a new tab",unattributable:"Unattributable"};var V=class{constructor(e,t){this.dom=e,this.detailsRenderer=t}get _clumpTitles(){return{warning:m.strings.warningAuditsGroupTitle,manual:m.strings.manualAuditsGroupTitle,passed:m.strings.passedAuditsGroupTitle,notApplicable:m.strings.notApplicableAuditsGroupTitle}}renderAudit(e){let t=this.dom.createComponent("audit");return this.populateAuditValues(e,t)}populateAuditValues(e,t){let n=m.strings,o=this.dom.find(".lh-audit",t);o.id=e.result.id;let i=e.result.scoreDisplayMode;e.result.displayValue&&(this.dom.find(".lh-audit__display-text",o).textContent=e.result.displayValue);let a=this.dom.find(".lh-audit__title",o);a.append(this.dom.convertMarkdownCodeSnippets(e.result.title));let l=this.dom.find(".lh-audit__description",o);l.append(this.dom.convertMarkdownLinkSnippets(e.result.description));for(let h of e.relevantMetrics||[]){let g=this.dom.createChildOf(l,"span","lh-audit__adorn");g.title=`Relevant to ${h.result.title}`,g.textContent=h.acronym||h.id}e.stackPacks&&e.stackPacks.forEach(h=>{let g=this.dom.createElement("img","lh-audit__stackpack__img");g.src=h.iconDataURL,g.alt=h.title;let v=this.dom.convertMarkdownLinkSnippets(h.description,{alwaysAppendUtmSource:!0}),w=this.dom.createElement("div","lh-audit__stackpack");w.append(g,v),this.dom.find(".lh-audit__stackpacks",o).append(w)});let s=this.dom.find("details",o);if(e.result.details){let h=this.detailsRenderer.render(e.result.details);h&&(h.classList.add("lh-details"),s.append(h))}if(this.dom.find(".lh-chevron-container",o).append(this._createChevron()),this._setRatingClass(o,e.result.score,i),e.result.scoreDisplayMode==="error"){o.classList.add("lh-audit--error");let h=this.dom.find(".lh-audit__display-text",o);h.textContent=n.errorLabel,h.classList.add("lh-tooltip-boundary");let g=this.dom.createChildOf(h,"div","lh-tooltip lh-tooltip--error");g.textContent=e.result.errorMessage||n.errorMissingAuditInfo}else if(e.result.explanation){let h=this.dom.createChildOf(a,"div","lh-audit-explanation");h.textContent=e.result.explanation}let c=e.result.warnings;if(!c||c.length===0)return o;let d=this.dom.find("summary",s),p=this.dom.createChildOf(d,"div","lh-warnings");if(this.dom.createChildOf(p,"span").textContent=n.warningHeader,c.length===1)p.append(this.dom.createTextNode(c.join("")));else{let h=this.dom.createChildOf(p,"ul");for(let g of c){let v=this.dom.createChildOf(h,"li");v.textContent=g}}return o}injectFinalScreenshot(e,t,n){let o=t["final-screenshot"];if(!o||o.scoreDisplayMode==="error"||!o.details||o.details.type!=="screenshot")return null;let i=this.dom.createElement("img","lh-final-ss-image"),a=o.details.data;i.src=a,i.alt=o.title;let l=this.dom.find(".lh-category .lh-category-header",e),s=this.dom.createElement("div","lh-category-headercol"),c=this.dom.createElement("div","lh-category-headercol lh-category-headercol--separator"),d=this.dom.createElement("div","lh-category-headercol");s.append(...l.childNodes),s.append(n),d.append(i),l.append(s,c,d),l.classList.add("lh-category-header__finalscreenshot")}_createChevron(){let e=this.dom.createComponent("chevron");return this.dom.find("svg.lh-chevron",e)}_setRatingClass(e,t,n){let o=E.calculateRating(t,n);return e.classList.add(`lh-audit--${n.toLowerCase()}`),n!=="informative"&&e.classList.add(`lh-audit--${o}`),e}renderCategoryHeader(e,t,n){let o=this.dom.createComponent("categoryHeader"),i=this.dom.find(".lh-score__gauge",o),a=this.renderCategoryScore(e,t,n);if(i.append(a),e.description){let l=this.dom.convertMarkdownLinkSnippets(e.description);this.dom.find(".lh-category-header__description",o).append(l)}return o}renderAuditGroup(e){let t=this.dom.createElement("div","lh-audit-group"),n=this.dom.createElement("div","lh-audit-group__header");this.dom.createChildOf(n,"span","lh-audit-group__title").textContent=e.title,t.append(n);let o=null;return e.description&&(o=this.dom.convertMarkdownLinkSnippets(e.description),o.classList.add("lh-audit-group__description","lh-audit-group__footer"),t.append(o)),[t,o]}_renderGroupedAudits(e,t){let n=new Map,o="NotAGroup";n.set(o,[]);for(let a of e){let l=a.group||o;if(l==="hidden")continue;let s=n.get(l)||[];s.push(a),n.set(l,s)}let i=[];for(let[a,l]of n){if(a===o){for(let p of l)i.push(this.renderAudit(p));continue}let s=t[a],[c,d]=this.renderAuditGroup(s);for(let p of l)c.insertBefore(this.renderAudit(p),d);c.classList.add(`lh-audit-group--${a}`),i.push(c)}return i}renderUnexpandableClump(e,t){let n=this.dom.createElement("div");return this._renderGroupedAudits(e,t).forEach(i=>n.append(i)),n}renderClump(e,{auditRefs:t,description:n,openByDefault:o}){let i=this.dom.createComponent("clump"),a=this.dom.find(".lh-clump",i);o&&a.setAttribute("open","");let l=this.dom.find(".lh-audit-group__header",a),s=this._clumpTitles[e];this.dom.find(".lh-audit-group__title",l).textContent=s;let c=this.dom.find(".lh-audit-group__itemcount",a);c.textContent=`(${t.length})`;let d=t.map(this.renderAudit.bind(this));a.append(...d);let p=this.dom.find(".lh-audit-group",i);if(n){let h=this.dom.convertMarkdownLinkSnippets(n);h.classList.add("lh-audit-group__description","lh-audit-group__footer"),p.append(h)}return this.dom.find(".lh-clump-toggletext--show",p).textContent=m.strings.show,this.dom.find(".lh-clump-toggletext--hide",p).textContent=m.strings.hide,a.classList.add(`lh-clump--${e.toLowerCase()}`),p}renderCategoryScore(e,t,n){let o;if(n&&E.shouldDisplayAsFraction(n.gatherMode)?o=this.renderCategoryFraction(e):o=this.renderScoreGauge(e,t),n?.omitLabel&&this.dom.find(".lh-gauge__label,.lh-fraction__label",o).remove(),n?.onPageAnchorRendered){let i=this.dom.find("a",o);n.onPageAnchorRendered(i)}return o}renderScoreGauge(e,t){let n=this.dom.createComponent("gauge"),o=this.dom.find("a.lh-gauge__wrapper",n);E.isPluginCategory(e.id)&&o.classList.add("lh-gauge__wrapper--plugin");let i=Number(e.score),a=this.dom.find(".lh-gauge",n),l=this.dom.find("circle.lh-gauge-arc",a);l&&this._setGaugeArc(l,i);let s=Math.round(i*100),c=this.dom.find("div.lh-gauge__percentage",n);return c.textContent=s.toString(),e.score===null&&(c.classList.add("lh-gauge--error"),c.textContent="",c.title=m.strings.errorLabel),e.auditRefs.length===0||this.hasApplicableAudits(e)?o.classList.add(`lh-gauge__wrapper--${E.calculateRating(e.score)}`):(o.classList.add("lh-gauge__wrapper--not-applicable"),c.textContent="-",c.title=m.strings.notApplicableAuditsGroupTitle),this.dom.find(".lh-gauge__label",n).textContent=e.title,n}renderCategoryFraction(e){let t=this.dom.createComponent("fraction"),n=this.dom.find("a.lh-fraction__wrapper",t),{numPassed:o,numPassableAudits:i,totalWeight:a}=E.calculateCategoryFraction(e),l=o/i,s=this.dom.find(".lh-fraction__content",t),c=this.dom.createElement("span");c.textContent=`${o}/${i}`,s.append(c);let d=E.calculateRating(l);return a===0&&(d="null"),n.classList.add(`lh-fraction__wrapper--${d}`),this.dom.find(".lh-fraction__label",t).textContent=e.title,t}hasApplicableAudits(e){return e.auditRefs.some(t=>t.result.scoreDisplayMode!=="notApplicable")}_setGaugeArc(e,t){let n=2*Math.PI*Number(e.getAttribute("r")),o=Number(e.getAttribute("stroke-width")),i=.25*o/n;e.style.transform=`rotate(${-90+i*360}deg)`;let a=t*n-o/2;t===0&&(e.style.opacity="0"),t===1&&(a=n),e.style.strokeDasharray=`${Math.max(a,0)} ${n}`}_auditHasWarning(e){return!!e.result.warnings?.length}_getClumpIdForAuditRef(e){let t=e.result.scoreDisplayMode;return t==="manual"||t==="notApplicable"?t:E.showAsPassed(e.result)?this._auditHasWarning(e)?"warning":"passed":"failed"}render(e,t={},n){let o=this.dom.createElement("div","lh-category");o.id=e.id,o.append(this.renderCategoryHeader(e,t,n));let i=new Map;i.set("failed",[]),i.set("warning",[]),i.set("manual",[]),i.set("passed",[]),i.set("notApplicable",[]);for(let l of e.auditRefs){let s=this._getClumpIdForAuditRef(l),c=i.get(s);c.push(l),i.set(s,c)}for(let l of i.values())l.sort((s,c)=>c.weight-s.weight);let a=i.get("failed")?.length;for(let[l,s]of i){if(s.length===0)continue;if(l==="failed"){let h=this.renderUnexpandableClump(s,t);h.classList.add("lh-clump--failed"),o.append(h);continue}let c=l==="manual"?e.manualDescription:void 0,d=l==="warning"||l==="manual"&&a===0,p=this.renderClump(l,{auditRefs:s,description:c,openByDefault:d});o.append(p)}return o}};var ee=class{static initTree(e){let t=0,n=Object.keys(e);return n.length>0&&(t=e[n[0]].request.startTime),{tree:e,startTime:t,transferSize:0}}static createSegment(e,t,n,o,i,a){let l=e[t],s=Object.keys(e),c=s.indexOf(t)===s.length-1,d=!!l.children&&Object.keys(l.children).length>0,p=Array.isArray(i)?i.slice(0):[];return typeof a<"u"&&p.push(!a),{node:l,isLastChild:c,hasChildren:d,startTime:n,transferSize:o+l.request.transferSize,treeMarkers:p}}static createChainNode(e,t,n){let o=e.createComponent("crcChain");e.find(".lh-crc-node",o).setAttribute("title",t.node.request.url);let i=e.find(".lh-crc-node__tree-marker",o);t.treeMarkers.forEach(p=>{let h=p?"lh-tree-marker lh-vert":"lh-tree-marker";i.append(e.createElement("span",h),e.createElement("span","lh-tree-marker"))});let a=t.isLastChild?"lh-tree-marker lh-up-right":"lh-tree-marker lh-vert-right",l=t.hasChildren?"lh-tree-marker lh-horiz-down":"lh-tree-marker lh-right";i.append(e.createElement("span",a),e.createElement("span","lh-tree-marker lh-right"),e.createElement("span",l));let s=t.node.request.url,c=n.renderTextURL(s),d=e.find(".lh-crc-node__tree-value",o);if(d.append(c),!t.hasChildren){let{startTime:p,endTime:h,transferSize:g}=t.node.request,v=e.createElement("span","lh-crc-node__chain-duration");v.textContent=" - "+m.i18n.formatMilliseconds((h-p)*1e3)+", ";let w=e.createElement("span","lh-crc-node__chain-duration");w.textContent=m.i18n.formatBytesToKiB(g,.01),d.append(v,w)}return o}static buildTree(e,t,n,o,i,a){if(o.append(W.createChainNode(e,n,a)),n.node.children)for(let l of Object.keys(n.node.children)){let s=W.createSegment(n.node.children,l,n.startTime,n.transferSize,n.treeMarkers,n.isLastChild);W.buildTree(e,t,s,o,i,a)}}static render(e,t,n){let o=e.createComponent("crc"),i=e.find(".lh-crc",o);e.find(".lh-crc-initial-nav",o).textContent=m.strings.crcInitialNavigation,e.find(".lh-crc__longest_duration_label",o).textContent=m.strings.crcLongestDurationLabel,e.find(".lh-crc__longest_duration",o).textContent=m.i18n.formatMilliseconds(t.longestChain.duration);let a=W.initTree(t.chains);for(let l of Object.keys(a.tree)){let s=W.createSegment(a.tree,l,a.startTime,a.transferSize);W.buildTree(e,o,s,i,t,n)}return e.find(".lh-crc-container",o)}},W=ee;function gt(r,e){return e.left<=r.width&&0<=e.right&&e.top<=r.height&&0<=e.bottom}function Ae(r,e,t){return r<e?e:r>t?t:r}function ut(r){return{x:r.left+r.width/2,y:r.top+r.height/2}}var O=class r{static getScreenshotPositions(e,t,n){let o=ut(e),i=Ae(o.x-t.width/2,0,n.width-t.width),a=Ae(o.y-t.height/2,0,n.height-t.height);return{screenshot:{left:i,top:a},clip:{left:e.left-i,top:e.top-a}}}static renderClipPathInScreenshot(e,t,n,o,i){let a=e.find("clipPath",t),l=`clip-${m.getUniqueSuffix()}`;a.id=l,t.style.clipPath=`url(#${l})`;let s=n.top/i.height,c=s+o.height/i.height,d=n.left/i.width,p=d+o.width/i.width,h=[`0,0 1,0 1,${s} 0,${s}`,`0,${c} 1,${c} 1,1 0,1`,`0,${s} ${d},${s} ${d},${c} 0,${c}`,`${p},${s} 1,${s} 1,${c} ${p},${c}`];for(let g of h){let v=e.createElementNS("http://www.w3.org/2000/svg","polygon");v.setAttribute("points",g),a.append(v)}}static installFullPageScreenshot(e,t){e.style.setProperty("--element-screenshot-url",`url('${t.data}')`)}static installOverlayFeature(e){let{dom:t,rootEl:n,overlayContainerEl:o,fullPageScreenshot:i}=e,a="lh-screenshot-overlay--enabled";n.classList.contains(a)||(n.classList.add(a),n.addEventListener("click",l=>{let s=l.target;if(!s)return;let c=s.closest(".lh-node > .lh-element-screenshot");if(!c)return;let d=t.createElement("div","lh-element-screenshot__overlay");o.append(d);let p={width:d.clientWidth*.95,height:d.clientHeight*.8},h={width:Number(c.dataset.rectWidth),height:Number(c.dataset.rectHeight),left:Number(c.dataset.rectLeft),right:Number(c.dataset.rectLeft)+Number(c.dataset.rectWidth),top:Number(c.dataset.rectTop),bottom:Number(c.dataset.rectTop)+Number(c.dataset.rectHeight)},g=r.render(t,i.screenshot,h,p);if(!g){d.remove();return}d.append(g),d.addEventListener("click",()=>d.remove())}))}static _computeZoomFactor(e,t){let o={x:t.width/e.width,y:t.height/e.height},i=.75*Math.min(o.x,o.y);return Math.min(1,i)}static render(e,t,n,o){if(!gt(t,n))return null;let i=e.createComponent("elementScreenshot"),a=e.find("div.lh-element-screenshot",i);a.dataset.rectWidth=n.width.toString(),a.dataset.rectHeight=n.height.toString(),a.dataset.rectLeft=n.left.toString(),a.dataset.rectTop=n.top.toString();let l=this._computeZoomFactor(n,o),s={width:o.width/l,height:o.height/l};s.width=Math.min(t.width,s.width),s.height=Math.min(t.height,s.height);let c={width:s.width*l,height:s.height*l},d=r.getScreenshotPositions(n,s,{width:t.width,height:t.height}),p=e.find("div.lh-element-screenshot__image",a);p.style.width=c.width+"px",p.style.height=c.height+"px",p.style.backgroundPositionY=-(d.screenshot.top*l)+"px",p.style.backgroundPositionX=-(d.screenshot.left*l)+"px",p.style.backgroundSize=`${t.width*l}px ${t.height*l}px`;let h=e.find("div.lh-element-screenshot__element-marker",a);h.style.width=n.width*l+"px",h.style.height=n.height*l+"px",h.style.left=d.clip.left*l+"px",h.style.top=d.clip.top*l+"px";let g=e.find("div.lh-element-screenshot__mask",a);return g.style.width=c.width+"px",g.style.height=c.height+"px",r.renderClipPathInScreenshot(e,g,d.clip,n,s),a}};var mt=["http://","https://","data:"],ft=["bytes","numeric","ms","timespanMs"],te=class{constructor(e,t={}){this._dom=e,this._fullPageScreenshot=t.fullPageScreenshot,this._entities=t.entities}render(e){switch(e.type){case"filmstrip":return this._renderFilmstrip(e);case"list":return this._renderList(e);case"table":case"opportunity":return this._renderTable(e);case"criticalrequestchain":return ee.render(this._dom,e,this);case"screenshot":case"debugdata":case"treemap-data":return null;default:return this._renderUnknown(e.type,e)}}_renderBytes(e){let t=m.i18n.formatBytesToKiB(e.value,e.granularity||.1),n=this._renderText(t);return n.title=m.i18n.formatBytes(e.value),n}_renderMilliseconds(e){let t;return e.displayUnit==="duration"?t=m.i18n.formatDuration(e.value):t=m.i18n.formatMilliseconds(e.value,e.granularity||10),this._renderText(t)}renderTextURL(e){let t=e,n,o,i;try{let l=A.parseURL(t);n=l.file==="/"?l.origin:l.file,o=l.file==="/"||l.hostname===""?"":`(${l.hostname})`,i=t}catch{n=t}let a=this._dom.createElement("div","lh-text__url");if(a.append(this._renderLink({text:n,url:t})),o){let l=this._renderText(o);l.classList.add("lh-text__url-host"),a.append(l)}return i&&(a.title=t,a.dataset.url=t),a}_renderLink(e){let t=this._dom.createElement("a");if(this._dom.safelySetHref(t,e.url),!t.href){let n=this._renderText(e.text);return n.classList.add("lh-link"),n}return t.rel="noopener",t.target="_blank",t.textContent=e.text,t.classList.add("lh-link"),t}_renderText(e){let t=this._dom.createElement("div","lh-text");return t.textContent=e,t}_renderNumeric(e){let t=m.i18n.formatNumber(e.value,e.granularity||.1),n=this._dom.createElement("div","lh-numeric");return n.textContent=t,n}_renderThumbnail(e){let t=this._dom.createElement("img","lh-thumbnail"),n=e;return t.src=n,t.title=n,t.alt="",t}_renderUnknown(e,t){console.error(`Unknown details type: ${e}`,t);let n=this._dom.createElement("details","lh-unknown");return this._dom.createChildOf(n,"summary").textContent=`We don't know how to render audit details of type \`${e}\`. The Lighthouse version that collected this data is likely newer than the Lighthouse version of the report renderer. Expand for the raw JSON.`,this._dom.createChildOf(n,"pre").textContent=JSON.stringify(t,null,2),n}_renderTableValue(e,t){if(e==null)return null;if(typeof e=="object")switch(e.type){case"code":return this._renderCode(e.value);case"link":return this._renderLink(e);case"node":return this.renderNode(e);case"numeric":return this._renderNumeric(e);case"source-location":return this.renderSourceLocation(e);case"url":return this.renderTextURL(e.value);default:return this._renderUnknown(e.type,e)}switch(t.valueType){case"bytes":{let n=Number(e);return this._renderBytes({value:n,granularity:t.granularity})}case"code":{let n=String(e);return this._renderCode(n)}case"ms":{let n={value:Number(e),granularity:t.granularity,displayUnit:t.displayUnit};return this._renderMilliseconds(n)}case"numeric":{let n=Number(e);return this._renderNumeric({value:n,granularity:t.granularity})}case"text":{let n=String(e);return this._renderText(n)}case"thumbnail":{let n=String(e);return this._renderThumbnail(n)}case"timespanMs":{let n=Number(e);return this._renderMilliseconds({value:n})}case"url":{let n=String(e);return mt.some(o=>n.startsWith(o))?this.renderTextURL(n):this._renderCode(n)}default:return this._renderUnknown(t.valueType,e)}}_getDerivedSubItemsHeading(e){return e.subItemsHeading?{key:e.subItemsHeading.key||"",valueType:e.subItemsHeading.valueType||e.valueType,granularity:e.subItemsHeading.granularity||e.granularity,displayUnit:e.subItemsHeading.displayUnit||e.displayUnit,label:""}:null}_renderTableRow(e,t){let n=this._dom.createElement("tr");for(let o of t){if(!o||!o.key){this._dom.createChildOf(n,"td","lh-table-column--empty");continue}let i=e[o.key],a;if(i!=null&&(a=this._renderTableValue(i,o)),a){let l=`lh-table-column--${o.valueType}`;this._dom.createChildOf(n,"td",l).append(a)}else this._dom.createChildOf(n,"td","lh-table-column--empty")}return n}_renderTableRowsFromItem(e,t){let n=this._dom.createFragment();if(n.append(this._renderTableRow(e,t)),!e.subItems)return n;let o=t.map(this._getDerivedSubItemsHeading);if(!o.some(Boolean))return n;for(let i of e.subItems.items){let a=this._renderTableRow(i,o);a.classList.add("lh-sub-item-row"),n.append(a)}return n}_adornEntityGroupRow(e){let t=e.dataset.entity;if(!t)return;let n=this._entities?.find(i=>i.name===t);if(!n)return;let o=this._dom.find("td",e);if(n.category){let i=this._dom.createElement("span");i.classList.add("lh-audit__adorn"),i.textContent=n.category,o.append(" ",i)}if(n.isFirstParty){let i=this._dom.createElement("span");i.classList.add("lh-audit__adorn","lh-audit__adorn1p"),i.textContent=m.strings.firstPartyChipLabel,o.append(" ",i)}if(n.homepage){let i=this._dom.createElement("a");i.href=n.homepage,i.target="_blank",i.title=m.strings.openInANewTabTooltip,i.classList.add("lh-report-icon--external"),o.append(" ",i)}}_renderEntityGroupRow(e,t){let n={...t[0]};n.valueType="text";let o=[n,...t.slice(1)],i=this._dom.createFragment();return i.append(this._renderTableRow(e,o)),this._dom.find("tr",i).classList.add("lh-row--group"),i}_getEntityGroupItems(e){let{items:t,headings:n,sortedBy:o}=e;if(!t.length||e.isEntityGrouped||!t.some(d=>d.entity))return[];let i=new Set(e.skipSumming||[]),a=[];for(let d of n)!d.key||i.has(d.key)||ft.includes(d.valueType)&&a.push(d.key);let l=n[0].key;if(!l)return[];let s=new Map;for(let d of t){let p=typeof d.entity=="string"?d.entity:void 0,h=s.get(p)||{[l]:p||m.strings.unattributable,entity:p};for(let g of a)h[g]=Number(h[g]||0)+Number(d[g]||0);s.set(p,h)}let c=[...s.values()];return o&&c.sort(E.getTableItemSortComparator(o)),c}_renderTable(e){if(!e.items.length)return this._dom.createElement("span");let t=this._dom.createElement("table","lh-table"),n=this._dom.createChildOf(t,"thead"),o=this._dom.createChildOf(n,"tr");for(let l of e.headings){let c=`lh-table-column--${l.valueType||"text"}`,d=this._dom.createElement("div","lh-text");d.textContent=l.label,this._dom.createChildOf(o,"th",c).append(d)}let i=this._getEntityGroupItems(e),a=this._dom.createChildOf(t,"tbody");if(i.length)for(let l of i){let s=typeof l.entity=="string"?l.entity:void 0,c=this._renderEntityGroupRow(l,e.headings);for(let p of e.items.filter(h=>h.entity===s))c.append(this._renderTableRowsFromItem(p,e.headings));let d=this._dom.findAll("tr",c);s&&d.length&&(d.forEach(p=>p.dataset.entity=s),this._adornEntityGroupRow(d[0])),a.append(c)}else{let l=!0;for(let s of e.items){let c=this._renderTableRowsFromItem(s,e.headings),d=this._dom.findAll("tr",c),p=d[0];if(typeof s.entity=="string"&&(p.dataset.entity=s.entity),e.isEntityGrouped&&s.entity)p.classList.add("lh-row--group"),this._adornEntityGroupRow(p);else for(let h of d)h.classList.add(l?"lh-row--even":"lh-row--odd");l=!l,a.append(c)}}return t}_renderList(e){let t=this._dom.createElement("div","lh-list");return e.items.forEach(n=>{let o=this.render(n);o&&t.append(o)}),t}renderNode(e){let t=this._dom.createElement("span","lh-node");if(e.nodeLabel){let a=this._dom.createElement("div");a.textContent=e.nodeLabel,t.append(a)}if(e.snippet){let a=this._dom.createElement("div");a.classList.add("lh-node__snippet"),a.textContent=e.snippet,t.append(a)}if(e.selector&&(t.title=e.selector),e.path&&t.setAttribute("data-path",e.path),e.selector&&t.setAttribute("data-selector",e.selector),e.snippet&&t.setAttribute("data-snippet",e.snippet),!this._fullPageScreenshot)return t;let n=e.lhId&&this._fullPageScreenshot.nodes[e.lhId];if(!n||n.width===0||n.height===0)return t;let o={width:147,height:100},i=O.render(this._dom,this._fullPageScreenshot.screenshot,n,o);return i&&t.prepend(i),t}renderSourceLocation(e){if(!e.url)return null;let t=`${e.url}:${e.line+1}:${e.column}`,n;e.original&&(n=`${e.original.file||"<unmapped>"}:${e.original.line+1}:${e.original.column}`);let o;if(e.urlProvider==="network"&&n)o=this._renderLink({url:e.url,text:n}),o.title=`maps to generated location ${t}`;else if(e.urlProvider==="network"&&!n)o=this.renderTextURL(e.url),this._dom.find(".lh-link",o).textContent+=`:${e.line+1}:${e.column}`;else if(e.urlProvider==="comment"&&n)o=this._renderText(`${n} (from source map)`),o.title=`${t} (from sourceURL)`;else if(e.urlProvider==="comment"&&!n)o=this._renderText(`${t} (from sourceURL)`);else return null;return o.classList.add("lh-source-location"),o.setAttribute("data-source-url",e.url),o.setAttribute("data-source-line",String(e.line)),o.setAttribute("data-source-column",String(e.column)),o}_renderFilmstrip(e){let t=this._dom.createElement("div","lh-filmstrip");for(let n of e.items){let o=this._dom.createChildOf(t,"div","lh-filmstrip__frame"),i=this._dom.createChildOf(o,"img","lh-filmstrip__thumbnail");i.src=n.data,i.alt="Screenshot"}return t}_renderCode(e){let t=this._dom.createElement("pre","lh-code");return t.textContent=e,t}};var ce="\xA0";var oe=class{constructor(e){e==="en-XA"&&(e="de"),this._locale=e,this._cachedNumberFormatters=new Map}_formatNumberWithGranularity(e,t,n={}){if(t!==void 0){let a=-Math.log10(t);Number.isInteger(a)||(console.warn(`granularity of ${t} is invalid. Using 1 instead`),t=1),t<1&&(n={...n},n.minimumFractionDigits=n.maximumFractionDigits=Math.ceil(a)),e=Math.round(e/t)*t,Object.is(e,-0)&&(e=0)}else Math.abs(e)<5e-4&&(e=0);let o,i=[n.minimumFractionDigits,n.maximumFractionDigits,n.style,n.unit,n.unitDisplay,this._locale].join("");return o=this._cachedNumberFormatters.get(i),o||(o=new Intl.NumberFormat(this._locale,n),this._cachedNumberFormatters.set(i,o)),o.format(e).replace(" ",ce)}formatNumber(e,t){return this._formatNumberWithGranularity(e,t)}formatInteger(e){return this._formatNumberWithGranularity(e,1)}formatPercent(e){return new Intl.NumberFormat(this._locale,{style:"percent"}).format(e)}formatBytesToKiB(e,t=void 0){return this._formatNumberWithGranularity(e/1024,t)+`${ce}KiB`}formatBytesToMiB(e,t=void 0){return this._formatNumberWithGranularity(e/1048576,t)+`${ce}MiB`}formatBytes(e,t=1){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"byte",unitDisplay:"long"})}formatBytesWithBestUnit(e,t=.1){return e>=1048576?this.formatBytesToMiB(e,t):e>=1024?this.formatBytesToKiB(e,t):this._formatNumberWithGranularity(e,t,{style:"unit",unit:"byte",unitDisplay:"narrow"})}formatKbps(e,t=void 0){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"kilobit-per-second",unitDisplay:"short"})}formatMilliseconds(e,t=void 0){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"millisecond",unitDisplay:"short"})}formatSeconds(e,t=void 0){return this._formatNumberWithGranularity(e/1e3,t,{style:"unit",unit:"second",unitDisplay:"narrow"})}formatDateTime(e){let t={month:"short",day:"numeric",year:"numeric",hour:"numeric",minute:"numeric",timeZoneName:"short"},n;try{n=new Intl.DateTimeFormat(this._locale,t)}catch{t.timeZone="UTC",n=new Intl.DateTimeFormat(this._locale,t)}return n.format(new Date(e))}formatDuration(e){let t=e/1e3;if(Math.round(t)===0)return"None";let n=[],o={day:60*60*24,hour:60*60,minute:60,second:1};return Object.keys(o).forEach(i=>{let a=o[i],l=Math.floor(t/a);if(l>0){t-=l*a;let s=this._formatNumberWithGranularity(l,1,{style:"unit",unit:i,unitDisplay:"narrow"});n.push(s)}}),n.join(" ")}};function Se(r){let e=r.createComponent("explodeyGauge");return r.find(".lh-exp-gauge-component",e)}function Ce(r,e,t){let n=r.find("div.lh-exp-gauge__wrapper",e);n.className="",n.classList.add("lh-exp-gauge__wrapper",`lh-exp-gauge__wrapper--${E.calculateRating(t.score)}`),bt(r,n,t)}function vt(r,e,t){t=t||r/32;let n=r/t,o=.5*t,i=n+o+t,a=2*Math.PI*n,l=Math.acos(1-.5*Math.pow(.5*t/n,2))*n,s=2*Math.PI*i,c=Math.acos(1-.5*Math.pow(.5*t/i,2))*i;return{radiusInner:n,radiusOuter:i,circumferenceInner:a,circumferenceOuter:s,getArcLength:()=>Math.max(0,Number(e*a)),getMetricArcLength:(d,p=!1)=>{let h=p?0:2*c;return Math.max(0,Number(d*s-o-h))},endDiffInner:l,endDiffOuter:c,strokeWidth:t,strokeGap:o}}function bt(r,e,t){let i=Number(t.score),{radiusInner:a,radiusOuter:l,circumferenceInner:s,circumferenceOuter:c,getArcLength:d,getMetricArcLength:p,endDiffInner:h,endDiffOuter:g,strokeWidth:v,strokeGap:w}=vt(128,i),f=r.find("svg.lh-exp-gauge",e);r.find(".lh-exp-gauge__label",f).textContent=t.title,f.setAttribute("viewBox",[-64,-64/2,128,128/2].join(" ")),f.style.setProperty("--stroke-width",`${v}px`),f.style.setProperty("--circle-meas",(2*Math.PI).toFixed(4));let x=r.find("g.lh-exp-gauge__outer",e),u=r.find("g.lh-exp-gauge__inner",e),b=r.find("circle.lh-cover",x),_=r.find("circle.lh-exp-gauge__arc",u),k=r.find("text.lh-exp-gauge__percentage",u);x.style.setProperty("--scale-initial",String(a/l)),x.style.setProperty("--radius",`${l}px`),b.style.setProperty("--radius",`${.5*(a+l)}px`),b.setAttribute("stroke-width",String(w)),f.style.setProperty("--radius",`${a}px`),_.setAttribute("stroke-dasharray",`${d()} ${(s-d()).toFixed(4)}`),_.setAttribute("stroke-dashoffset",String(.25*s-h)),k.textContent=Math.round(i*100).toString();let T=l+v,C=l-v,F=t.auditRefs.filter(y=>y.group==="metrics"&&y.weight),P=F.reduce((y,L)=>y+=L.weight,0),S=.25*c-g-.5*w,z=-.5*Math.PI;x.querySelectorAll(".metric").forEach(y=>{F.map(R=>`metric--${R.id}`).find(R=>y.classList.contains(R))||y.remove()}),F.forEach((y,L)=>{let D=y.acronym??y.id,R=!x.querySelector(`.metric--${D}`),N=r.maybeFind(`g.metric--${D}`,x)||r.createSVGElement("g"),B=r.maybeFind(`.metric--${D} circle.lh-exp-gauge--faded`,x)||r.createSVGElement("circle"),Z=r.maybeFind(`.metric--${D} circle.lh-exp-gauge--miniarc`,x)||r.createSVGElement("circle"),j=r.maybeFind(`.metric--${D} circle.lh-exp-gauge-hovertarget`,x)||r.createSVGElement("circle"),H=r.maybeFind(`.metric--${D} text.metric__label`,x)||r.createSVGElement("text"),U=r.maybeFind(`.metric--${D} text.metric__value`,x)||r.createSVGElement("text");N.classList.add("metric",`metric--${D}`),B.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge--faded"),Z.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge--miniarc"),j.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge-hovertarget");let q=y.weight/P,he=p(q),ge=y.result.score?y.result.score*q:0,ue=p(ge),Pe=q*c,me=p(q,!0),fe=E.calculateRating(y.result.score,y.result.scoreDisplayMode);N.style.setProperty("--metric-rating",fe),N.style.setProperty("--metric-color",`var(--color-${fe})`),N.style.setProperty("--metric-offset",`${S}`),N.style.setProperty("--i",L.toString()),B.setAttribute("stroke-dasharray",`${he} ${c-he}`),Z.style.setProperty("--metric-array",`${ue} ${c-ue}`),j.setAttribute("stroke-dasharray",`${me} ${c-me-g}`),H.classList.add("metric__label"),U.classList.add("metric__value"),H.textContent=D,U.textContent=`+${Math.round(ge*100)}`;let ve=z+q*Math.PI,Q=Math.cos(ve),X=Math.sin(ve);switch(!0){case Q>0:U.setAttribute("text-anchor","end");break;case Q<0:H.setAttribute("text-anchor","end");break;case Q===0:H.setAttribute("text-anchor","middle"),U.setAttribute("text-anchor","middle");break}switch(!0){case X>0:H.setAttribute("dominant-baseline","hanging");break;case X<0:U.setAttribute("dominant-baseline","hanging");break;case X===0:H.setAttribute("dominant-baseline","middle"),U.setAttribute("dominant-baseline","middle");break}H.setAttribute("x",(T*Q).toFixed(2)),H.setAttribute("y",(T*X).toFixed(2)),U.setAttribute("x",(C*Q).toFixed(2)),U.setAttribute("y",(C*X).toFixed(2)),R&&(N.appendChild(B),N.appendChild(Z),N.appendChild(j),N.appendChild(H),N.appendChild(U),x.appendChild(N)),S-=Pe,z+=q*2*Math.PI});let M=x.querySelector(".lh-exp-gauge-underhovertarget")||r.createSVGElement("circle");M.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge-hovertarget","lh-exp-gauge-underhovertarget");let I=p(1,!0);if(M.setAttribute("stroke-dasharray",`${I} ${c-I-g}`),M.isConnected||x.prepend(M),f.dataset.listenersSetup)return;f.dataset.listenersSetup=!0,J(f),f.addEventListener("pointerover",y=>{if(y.target===f&&f.classList.contains("state--expanded")){f.classList.remove("state--expanded"),f.classList.contains("state--highlight")&&(f.classList.remove("state--highlight"),r.find(".metric--highlight",f).classList.remove("metric--highlight"));return}if(!(y.target instanceof Element))return;let L=y.target.parentNode;if(L instanceof SVGElement){if(L&&L===u){f.classList.contains("state--expanded")?f.classList.contains("state--highlight")&&(f.classList.remove("state--highlight"),r.find(".metric--highlight",f).classList.remove("metric--highlight")):f.classList.add("state--expanded");return}if(L&&L.classList&&L.classList.contains("metric")){let D=L.style.getPropertyValue("--metric-rating");if(e.style.setProperty("--color-highlight",`var(--color-${D}-secondary)`),!f.classList.contains("state--highlight"))f.classList.add("state--highlight"),L.classList.add("metric--highlight");else{let R=r.find(".metric--highlight",f);L!==R&&(R.classList.remove("metric--highlight"),L.classList.add("metric--highlight"))}}}}),f.addEventListener("mouseleave",()=>{f.classList.remove("state--highlight"),f.querySelector(".metric--highlight")?.classList.remove("metric--highlight")});async function J(y){if(await new Promise(H=>setTimeout(H,1e3)),y.classList.contains("state--expanded"))return;let L=r.find(".lh-exp-gauge__inner",y),D=`uniq-${Math.random()}`;L.setAttribute("id",D);let R=r.createSVGElement("use");R.setAttribute("href",`#${D}`),y.appendChild(R);let N=2.5;y.style.setProperty("--peek-dur",`${N}s`),y.classList.add("state--peek","state--expanded");let B=()=>{y.classList.remove("state--peek","state--expanded"),R.remove()},Z=setTimeout(()=>{y.removeEventListener("mouseenter",j),B()},N*1e3*1.5);function j(){clearTimeout(Z),B()}y.addEventListener("mouseenter",j,{once:!0})}}var ie=class extends V{_renderMetric(e){let t=this.dom.createComponent("metric"),n=this.dom.find(".lh-metric",t);n.id=e.result.id;let o=E.calculateRating(e.result.score,e.result.scoreDisplayMode);n.classList.add(`lh-metric--${o}`);let i=this.dom.find(".lh-metric__title",t);i.textContent=e.result.title;let a=this.dom.find(".lh-metric__value",t);a.textContent=e.result.displayValue||"";let l=this.dom.find(".lh-metric__description",t);if(l.append(this.dom.convertMarkdownLinkSnippets(e.result.description)),e.result.scoreDisplayMode==="error"){l.textContent="",a.textContent="Error!";let s=this.dom.createChildOf(l,"span");s.textContent=e.result.errorMessage||"Report error: no metric information"}else e.result.scoreDisplayMode==="notApplicable"&&(a.textContent="--");return n}_getScoringCalculatorHref(e){let t=e.filter(p=>p.group==="metrics"),n=e.find(p=>p.id==="interactive"),o=e.find(p=>p.id==="first-cpu-idle"),i=e.find(p=>p.id==="first-meaningful-paint");n&&t.push(n),o&&t.push(o),i&&t.push(i);let a=p=>Math.round(p*100)/100,s=[...t.map(p=>{let h;return typeof p.result.numericValue=="number"?(h=p.id==="cumulative-layout-shift"?a(p.result.numericValue):Math.round(p.result.numericValue),h=h.toString()):h="null",[p.acronym||p.id,h]})];m.reportJson&&(s.push(["device",m.reportJson.configSettings.formFactor]),s.push(["version",m.reportJson.lighthouseVersion]));let c=new URLSearchParams(s),d=new URL("https://googlechrome.github.io/lighthouse/scorecalc/");return d.hash=c.toString(),d.href}_isPerformanceInsight(e){return!e.group}overallImpact(e,t){if(!e.result.metricSavings)return{overallImpact:0,overallLinearImpact:0};let n=0,o=0;for(let[i,a]of Object.entries(e.result.metricSavings)){if(a===void 0)continue;let l=t.find(g=>g.acronym===i);if(!l||l.result.score===null)continue;let s=l.result.numericValue;if(!s)continue;let c=a/s*l.weight;o+=c;let d=l.result.scoringOptions;if(!d)continue;let h=(A.computeLogNormalScore(d,s-a)-l.result.score)*l.weight;n+=h}return{overallImpact:n,overallLinearImpact:o}}render(e,t,n){let o=m.strings,i=this.dom.createElement("div","lh-category");i.id=e.id,i.append(this.renderCategoryHeader(e,t,n));let a=e.auditRefs.filter(u=>u.group==="metrics");if(a.length){let[u,b]=this.renderAuditGroup(t.metrics),_=this.dom.createElement("input","lh-metrics-toggle__input"),k=`lh-metrics-toggle${m.getUniqueSuffix()}`;_.setAttribute("aria-label","Toggle the display of metric descriptions"),_.type="checkbox",_.id=k,u.prepend(_);let T=this.dom.find(".lh-audit-group__header",u),C=this.dom.createChildOf(T,"label","lh-metrics-toggle__label");C.htmlFor=k;let F=this.dom.createChildOf(C,"span","lh-metrics-toggle__labeltext--show"),P=this.dom.createChildOf(C,"span","lh-metrics-toggle__labeltext--hide");F.textContent=m.strings.expandView,P.textContent=m.strings.collapseView;let S=this.dom.createElement("div","lh-metrics-container");if(u.insertBefore(S,b),a.forEach(z=>{S.append(this._renderMetric(z))}),i.querySelector(".lh-gauge__wrapper")){let z=this.dom.find(".lh-category-header__description",i),M=this.dom.createChildOf(z,"div","lh-metrics__disclaimer"),I=this.dom.convertMarkdownLinkSnippets(o.varianceDisclaimer);M.append(I);let J=this.dom.createChildOf(M,"a","lh-calclink");J.target="_blank",J.textContent=o.calculatorLink,this.dom.safelySetHref(J,this._getScoringCalculatorHref(e.auditRefs))}u.classList.add("lh-audit-group--metrics"),i.append(u)}let l=this.dom.createChildOf(i,"div","lh-filmstrip-container"),c=e.auditRefs.find(u=>u.id==="screenshot-thumbnails")?.result;if(c?.details){l.id=c.id;let u=this.detailsRenderer.render(c.details);u&&l.append(u)}let d=a.filter(u=>!!u.relevantAudits);d.length&&this.renderMetricAuditFilter(d,i);let p=e.auditRefs.filter(u=>this._isPerformanceInsight(u)).filter(u=>!E.showAsPassed(u.result)),h=[];if(p.forEach(u=>{let{overallImpact:b,overallLinearImpact:_}=this.overallImpact(u,a),k=u.result.guidanceLevel??1;h.push({auditRef:u,overallImpact:b,overallLinearImpact:_,guidanceLevel:k})}),h.sort((u,b)=>{let _=u.auditRef.result.scoreDisplayMode==="informative"?100:Number(u.auditRef.result.score),k=b.auditRef.result.scoreDisplayMode==="informative"?100:Number(b.auditRef.result.score);return _!==k?_-k:u.overallImpact!==b.overallImpact?b.overallImpact*b.guidanceLevel-u.overallImpact*u.guidanceLevel:u.overallImpact===0&&b.overallImpact===0&&u.overallLinearImpact!==b.overallLinearImpact?b.overallLinearImpact*b.guidanceLevel-u.overallLinearImpact*u.guidanceLevel:b.guidanceLevel-u.guidanceLevel}),h.length){let[u,b]=this.renderAuditGroup(t.diagnostics);h.forEach(_=>u.insertBefore(this.renderAudit(_.auditRef),b)),u.classList.add("lh-audit-group--diagnostics"),i.append(u)}let g=e.auditRefs.filter(u=>this._isPerformanceInsight(u)&&E.showAsPassed(u.result));if(!g.length)return i;let v={auditRefs:g,groupDefinitions:t},w=this.renderClump("passed",v);i.append(w);let f=[];if(["performance-budget","timing-budget"].forEach(u=>{let b=e.auditRefs.find(_=>_.id===u);if(b?.result.details){let _=this.detailsRenderer.render(b.result.details);_&&(_.id=u,_.classList.add("lh-details","lh-details--budget","lh-audit"),f.push(_))}}),f.length>0){let[u,b]=this.renderAuditGroup(t.budgets);f.forEach(_=>u.insertBefore(_,b)),u.classList.add("lh-audit-group--budgets"),i.append(u)}if((!n||n?.gatherMode==="navigation")&&e.score!==null){let u=Se(this.dom);Ce(this.dom,u,e),this.dom.find(".lh-score__gauge",i).replaceWith(u)}return i}renderMetricAuditFilter(e,t){let n=this.dom.createElement("div","lh-metricfilter"),o=this.dom.createChildOf(n,"span","lh-metricfilter__text");o.textContent=m.strings.showRelevantAudits;let i=[{acronym:"All"},...e],a=m.getUniqueSuffix();for(let l of i){let s=`metric-${l.acronym}-${a}`,c=this.dom.createChildOf(n,"input","lh-metricfilter__radio");c.type="radio",c.name=`metricsfilter-${a}`,c.id=s;let d=this.dom.createChildOf(n,"label","lh-metricfilter__label");d.htmlFor=s,d.title=l.result?.title,d.textContent=l.acronym||l.id,l.acronym==="All"&&(c.checked=!0,d.classList.add("lh-metricfilter__label--active")),t.append(n),c.addEventListener("input",p=>{for(let g of t.querySelectorAll("label.lh-metricfilter__label"))g.classList.toggle("lh-metricfilter__label--active",g.htmlFor===s);t.classList.toggle("lh-category--filtered",l.acronym!=="All");for(let g of t.querySelectorAll("div.lh-audit")){if(l.acronym==="All"){g.hidden=!1;continue}g.hidden=!0,l.relevantAudits&&l.relevantAudits.includes(g.id)&&(g.hidden=!1)}let h=t.querySelectorAll("div.lh-audit-group, details.lh-audit-group");for(let g of h){g.hidden=!1;let v=Array.from(g.querySelectorAll("div.lh-audit")),w=!!v.length&&v.every(f=>f.hidden);g.hidden=w}})}}};var ae=class r extends V{render(e,t={}){let n=this.dom.createElement("div","lh-category");n.id=e.id,n.append(this.renderCategoryHeader(e,t));let o=e.auditRefs,i=o.filter(c=>c.result.scoreDisplayMode!=="manual"),a=this._renderAudits(i,t);n.append(a);let l=o.filter(c=>c.result.scoreDisplayMode==="manual"),s=this.renderClump("manual",{auditRefs:l,description:e.manualDescription,openByDefault:!0});return n.append(s),n}renderCategoryScore(e,t){if(e.score===null)return super.renderScoreGauge(e,t);let n=this.dom.createComponent("gaugePwa"),o=this.dom.find("a.lh-gauge--pwa__wrapper",n),i=n.querySelector("svg");if(!i)throw new Error("no SVG element found in PWA score gauge template");r._makeSvgReferencesUnique(i);let a=this._getGroupIds(e.auditRefs),l=this._getPassingGroupIds(e.auditRefs);if(l.size===a.size)o.classList.add("lh-badged--all");else for(let s of l)o.classList.add(`lh-badged--${s}`);return this.dom.find(".lh-gauge__label",n).textContent=e.title,o.title=this._getGaugeTooltip(e.auditRefs,t),n}_getGroupIds(e){let t=e.map(n=>n.group).filter(n=>!!n);return new Set(t)}_getPassingGroupIds(e){let t=this._getGroupIds(e);for(let n of e)!E.showAsPassed(n.result)&&n.group&&t.delete(n.group);return t}_getGaugeTooltip(e,t){let n=this._getGroupIds(e),o=[];for(let i of n){let a=e.filter(d=>d.group===i),l=a.length,s=a.filter(d=>E.showAsPassed(d.result)).length,c=t[i].title;o.push(`${c}: ${s}/${l}`)}return o.join(", ")}_renderAudits(e,t){let n=this.renderUnexpandableClump(e,t),o=this._getPassingGroupIds(e);for(let i of o)this.dom.find(`.lh-audit-group--${i}`,n).classList.add("lh-badged");return n}static _makeSvgReferencesUnique(e){let t=e.querySelector("defs");if(!t)return;let n=m.getUniqueSuffix(),o=t.querySelectorAll("[id]");for(let i of o){let a=i.id,l=`${a}-${n}`;i.id=l;let s=e.querySelectorAll(`use[href="#${a}"]`);for(let d of s)d.setAttribute("href",`#${l}`);let c=e.querySelectorAll(`[fill="url(#${a})"]`);for(let d of c)d.setAttribute("fill",`url(#${l})`)}}};var ne=class{constructor(e){this._dom=e,this._opts={}}renderReport(e,t,n){if(!this._dom.rootEl&&t){console.warn("Please adopt the new report API in renderer/api.js.");let i=t.closest(".lh-root");i?this._dom.rootEl=i:(t.classList.add("lh-root","lh-vars"),this._dom.rootEl=t)}else this._dom.rootEl&&t&&(this._dom.rootEl=t);n&&(this._opts=n),this._dom.setLighthouseChannel(e.configSettings.channel||"unknown");let o=E.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.append(this._renderReport(o)),this._opts.occupyEntireViewport&&this._dom.rootEl.classList.add("lh-max-viewport"),this._dom.rootEl}_renderReportTopbar(e){let t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalDisplayedUrl,n.title=e.finalDisplayedUrl,this._dom.safelySetHref(n,e.finalDisplayedUrl),t}_renderReportHeader(){let e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){let t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=m.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){let n=E.getEmulationDescriptions(e.configSettings||{}),o=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),i=Array.isArray(o)?o[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",a=e.configSettings.channel,l=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[`${m.strings.runtimeSettingsBenchmark}: ${l}`,`${m.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`];n.screenEmulation&&c.push(`${m.strings.runtimeSettingsScreenEmulation}: ${n.screenEmulation}`),s&&c.push(`${m.strings.runtimeSettingsAxeVersion}: ${s}`);let d=m.strings.runtimeAnalysisWindow;e.gatherMode==="timespan"?d=m.strings.runtimeAnalysisWindowTimespan:e.gatherMode==="snapshot"&&(d=m.strings.runtimeAnalysisWindowSnapshot);let p=[["date",`Captured at ${m.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,c.join(`
|
|
2633
|
-
`)],["samples-one",m.strings.runtimeSingleLoad,m.strings.runtimeSingleLoadTooltip],["stopwatch",d],["networkspeed",`${n.summary}`,`${m.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${i}`+(a?` with ${a}`:""),`${m.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],h=this._dom.find(".lh-meta__items",t);for(let[g,v,w]of p){let f=this._dom.createChildOf(h,"li","lh-meta__item");if(f.textContent=v,w){f.classList.add("lh-tooltip-boundary");let x=this._dom.createChildOf(f,"div","lh-tooltip");x.textContent=w}f.classList.add("lh-report-icon",`lh-report-icon--${g}`)}}_renderReportWarnings(e){if(!e.runWarnings||e.runWarnings.length===0)return this._dom.createElement("div");let t=this._dom.createComponent("warningsToplevel"),n=this._dom.find(".lh-warnings__msg",t);n.textContent=m.strings.toplevelWarningsMessage;let o=[];for(let i of e.runWarnings){let a=this._dom.createElement("li");a.append(this._dom.convertMarkdownLinkSnippets(i)),o.push(a)}return this._dom.find("ul",t).append(...o),t}_renderScoreGauges(e,t,n){let o=[],i=[],a=[];for(let l of Object.values(e.categories)){let s=n[l.id]||t,c=s.renderCategoryScore(l,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${l.id}`),d.addEventListener("click",p=>{if(!d.matches('[href^="#"]'))return;let h=d.getAttribute("href"),g=this._dom.rootEl;if(!h||!g)return;let v=this._dom.find(h,g);p.preventDefault(),v.scrollIntoView()}),this._opts.onPageAnchorRendered?.(d)),E.isPluginCategory(l.id)?a.push(c):s.renderCategoryScore===t.renderCategoryScore?o.push(c):i.push(c)}return[...o,...i,...a]}_renderReport(e){m.apply({providedStrings:e.i18n.rendererFormattedStrings,i18n:new oe(e.configSettings.locale),reportJson:e});let t=new te(this._dom,{fullPageScreenshot:e.fullPageScreenshot??void 0,entities:e.entities}),n=new V(this._dom,t),o={performance:new ie(this._dom,t),pwa:new ae(this._dom,t)},i=this._dom.createElement("div");i.append(this._renderReportHeader());let a=this._dom.createElement("div","lh-container"),l=this._dom.createElement("div","lh-report");l.append(this._renderReportWarnings(e));let s;Object.keys(e.categories).length===1?i.classList.add("lh-header--solo-category"):s=this._dom.createElement("div","lh-scores-header");let d=this._dom.createElement("div");if(d.classList.add("lh-scorescale-wrap"),d.append(this._dom.createComponent("scorescale")),s){let v=this._dom.find(".lh-scores-container",i);s.append(...this._renderScoreGauges(e,n,o)),v.append(s,d);let w=this._dom.createElement("div","lh-sticky-header");w.append(...this._renderScoreGauges(e,n,o)),a.append(w)}let p=this._dom.createElement("div","lh-categories");l.append(p);let h={gatherMode:e.gatherMode};for(let v of Object.values(e.categories)){let w=o[v.id]||n;w.dom.createChildOf(p,"div","lh-category-wrapper").append(w.render(v,e.categoryGroups,h))}n.injectFinalScreenshot(p,e.audits,d);let g=this._dom.createFragment();return this._opts.omitGlobalStyles||g.append(this._dom.createComponent("styles")),this._opts.omitTopbar||g.append(this._renderReportTopbar(e)),g.append(a),l.append(this._renderReportFooter(e)),a.append(i,l),e.fullPageScreenshot&&O.installFullPageScreenshot(this._dom.rootEl,e.fullPageScreenshot.screenshot),g}};function K(r,e){let t=r.rootEl;typeof e>"u"?t.classList.toggle("lh-dark"):t.classList.toggle("lh-dark",e)}var _t=typeof btoa<"u"?btoa:r=>Buffer.from(r).toString("base64"),wt=typeof atob<"u"?atob:r=>Buffer.from(r,"base64").toString();async function yt(r,e){let t=new TextEncoder().encode(r);if(e.gzip)if(typeof CompressionStream<"u"){let i=new CompressionStream("gzip"),a=i.writable.getWriter();a.write(t),a.close();let l=await new Response(i.readable).arrayBuffer();t=new Uint8Array(l)}else t=window.pako.gzip(r);let n="",o=5e3;for(let i=0;i<t.length;i+=o)n+=String.fromCharCode(...t.subarray(i,i+o));return _t(n)}function xt(r,e){let t=wt(r),n=Uint8Array.from(t,o=>o.charCodeAt(0));return e.gzip?window.pako.ungzip(n,{to:"string"}):new TextDecoder().decode(n)}var ze={toBase64:yt,fromBase64:xt};function de(){let r=window.location.host.endsWith(".vercel.app"),e=new URLSearchParams(window.location.search).has("dev");return r?`https://${window.location.host}/gh-pages`:e?"http://localhost:7333":"https://googlechrome.github.io/lighthouse"}function pe(r){let e=r.generatedTime,t=r.fetchTime||e;return`${r.lighthouseVersion}-${r.finalDisplayedUrl}-${t}`}function Et(r,e,t){let n=new URL(e).origin;window.addEventListener("message",function i(a){a.origin===n&&o&&a.data.opened&&(o.postMessage(r,n),window.removeEventListener("message",i))});let o=window.open(e,t)}async function Le(r,e,t){let n=new URL(e),o=!!window.CompressionStream;n.hash=await ze.toBase64(JSON.stringify(r),{gzip:o}),o&&n.searchParams.set("gzip","1"),window.open(n.toString(),t)}async function Me(r){let e="viewer-"+pe(r),t=de()+"/viewer/";await Le({lhr:r},t,e)}async function Te(r){let e="viewer-"+pe(r),t=de()+"/viewer/";Et({lhr:r},t,e)}function Fe(r){if(!r.audits["script-treemap-data"].details)throw new Error("no script treemap data found");let t={lhr:{mainDocumentUrl:r.mainDocumentUrl,finalUrl:r.finalUrl,finalDisplayedUrl:r.finalDisplayedUrl,audits:{"script-treemap-data":r.audits["script-treemap-data"]},configSettings:{locale:r.configSettings.locale}}},n=de()+"/treemap/",o="treemap-"+pe(r);Le(t,n,o)}var le=class{constructor(e){this._dom=e,this._toggleEl,this._menuEl,this.onDocumentKeyDown=this.onDocumentKeyDown.bind(this),this.onToggleClick=this.onToggleClick.bind(this),this.onToggleKeydown=this.onToggleKeydown.bind(this),this.onMenuFocusOut=this.onMenuFocusOut.bind(this),this.onMenuKeydown=this.onMenuKeydown.bind(this),this._getNextMenuItem=this._getNextMenuItem.bind(this),this._getNextSelectableNode=this._getNextSelectableNode.bind(this),this._getPreviousMenuItem=this._getPreviousMenuItem.bind(this)}setup(e){this._toggleEl=this._dom.find(".lh-topbar button.lh-tools__button",this._dom.rootEl),this._toggleEl.addEventListener("click",this.onToggleClick),this._toggleEl.addEventListener("keydown",this.onToggleKeydown),this._menuEl=this._dom.find(".lh-topbar div.lh-tools__dropdown",this._dom.rootEl),this._menuEl.addEventListener("keydown",this.onMenuKeydown),this._menuEl.addEventListener("click",e)}close(){this._toggleEl.classList.remove("lh-active"),this._toggleEl.setAttribute("aria-expanded","false"),this._menuEl.contains(this._dom.document().activeElement)&&this._toggleEl.focus(),this._menuEl.removeEventListener("focusout",this.onMenuFocusOut),this._dom.document().removeEventListener("keydown",this.onDocumentKeyDown)}open(e){this._toggleEl.classList.contains("lh-active")?e.focus():this._menuEl.addEventListener("transitionend",()=>{e.focus()},{once:!0}),this._toggleEl.classList.add("lh-active"),this._toggleEl.setAttribute("aria-expanded","true"),this._menuEl.addEventListener("focusout",this.onMenuFocusOut),this._dom.document().addEventListener("keydown",this.onDocumentKeyDown)}onToggleClick(e){e.preventDefault(),e.stopImmediatePropagation(),this._toggleEl.classList.contains("lh-active")?this.close():this.open(this._getNextMenuItem())}onToggleKeydown(e){switch(e.code){case"ArrowUp":e.preventDefault(),this.open(this._getPreviousMenuItem());break;case"ArrowDown":case"Enter":case" ":e.preventDefault(),this.open(this._getNextMenuItem());break;default:}}onMenuKeydown(e){let t=e.target;switch(e.code){case"ArrowUp":e.preventDefault(),this._getPreviousMenuItem(t).focus();break;case"ArrowDown":e.preventDefault(),this._getNextMenuItem(t).focus();break;case"Home":e.preventDefault(),this._getNextMenuItem().focus();break;case"End":e.preventDefault(),this._getPreviousMenuItem().focus();break;default:}}onDocumentKeyDown(e){e.keyCode===27&&this.close()}onMenuFocusOut(e){let t=e.relatedTarget;this._menuEl.contains(t)||this.close()}_getNextSelectableNode(e,t){let n=e.filter(i=>!(!(i instanceof HTMLElement)||i.hasAttribute("disabled")||window.getComputedStyle(i).display==="none")),o=t?n.indexOf(t)+1:0;return o>=n.length&&(o=0),n[o]}_getNextMenuItem(e){let t=Array.from(this._menuEl.childNodes);return this._getNextSelectableNode(t,e)}_getPreviousMenuItem(e){let t=Array.from(this._menuEl.childNodes).reverse();return this._getNextSelectableNode(t,e)}};var se=class{constructor(e,t){this.lhr,this._reportUIFeatures=e,this._dom=t,this._dropDownMenu=new le(this._dom),this._copyAttempt=!1,this.topbarEl,this.categoriesEl,this.stickyHeaderEl,this.highlightEl,this.onDropDownMenuClick=this.onDropDownMenuClick.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onCopy=this.onCopy.bind(this),this.collapseAllDetails=this.collapseAllDetails.bind(this)}enable(e){this.lhr=e,this._dom.rootEl.addEventListener("keyup",this.onKeyUp),this._dom.document().addEventListener("copy",this.onCopy),this._dropDownMenu.setup(this.onDropDownMenuClick),this._setUpCollapseDetailsAfterPrinting(),this._dom.find(".lh-topbar__logo",this._dom.rootEl).addEventListener("click",()=>K(this._dom)),this._setupStickyHeader()}onDropDownMenuClick(e){e.preventDefault();let t=e.target;if(!(!t||!t.hasAttribute("data-action"))){switch(t.getAttribute("data-action")){case"copy":this.onCopyButtonClick();break;case"print-summary":this.collapseAllDetails(),this._print();break;case"print-expanded":this.expandAllDetails(),this._print();break;case"save-json":{let n=JSON.stringify(this.lhr,null,2);this._reportUIFeatures._saveFile(new Blob([n],{type:"application/json"}));break}case"save-html":{let n=this._reportUIFeatures.getReportHtml();try{this._reportUIFeatures._saveFile(new Blob([n],{type:"text/html"}))}catch(o){this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"error",msg:"Could not export as HTML. "+o.message})}break}case"open-viewer":{this._dom.isDevTools()?Me(this.lhr):Te(this.lhr);break}case"save-gist":{this._reportUIFeatures.saveAsGist();break}case"toggle-dark":{K(this._dom);break}case"view-unthrottled-trace":this._reportUIFeatures._opts.onViewTrace?.()}this._dropDownMenu.close()}}onCopy(e){this._copyAttempt&&e.clipboardData&&(e.preventDefault(),e.clipboardData.setData("text/plain",JSON.stringify(this.lhr,null,2)),this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"log",msg:"Report JSON copied to clipboard"})),this._copyAttempt=!1}onCopyButtonClick(){this._dom.fireEventOn("lh-analytics",this._dom.document(),{cmd:"send",fields:{hitType:"event",eventCategory:"report",eventAction:"copy"}});try{this._dom.document().queryCommandSupported("copy")&&(this._copyAttempt=!0,this._dom.document().execCommand("copy")||(this._copyAttempt=!1,this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"warn",msg:"Your browser does not support copy to clipboard."})))}catch(e){this._copyAttempt=!1,this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"log",msg:e.message})}}onKeyUp(e){(e.ctrlKey||e.metaKey)&&e.keyCode===80&&this._dropDownMenu.close()}expandAllDetails(){this._dom.findAll(".lh-categories details",this._dom.rootEl).map(t=>t.open=!0)}collapseAllDetails(){this._dom.findAll(".lh-categories details",this._dom.rootEl).map(t=>t.open=!1)}_print(){this._reportUIFeatures._opts.onPrintOverride?this._reportUIFeatures._opts.onPrintOverride(this._dom.rootEl):self.print()}resetUIState(){this._dropDownMenu.close()}_getScrollParent(e){let{overflowY:t}=window.getComputedStyle(e);return t!=="visible"&&t!=="hidden"?e:e.parentElement?this._getScrollParent(e.parentElement):document}_setUpCollapseDetailsAfterPrinting(){"onbeforeprint"in self?self.addEventListener("afterprint",this.collapseAllDetails):self.matchMedia("print").addListener(t=>{t.matches?this.expandAllDetails():this.collapseAllDetails()})}_setupStickyHeader(){this.topbarEl=this._dom.find("div.lh-topbar",this._dom.rootEl),this.categoriesEl=this._dom.find("div.lh-categories",this._dom.rootEl),window.requestAnimationFrame(()=>window.requestAnimationFrame(()=>{try{this.stickyHeaderEl=this._dom.find("div.lh-sticky-header",this._dom.rootEl)}catch{return}this.highlightEl=this._dom.createChildOf(this.stickyHeaderEl,"div","lh-highlighter");let e=this._getScrollParent(this._dom.find(".lh-container",this._dom.rootEl));e.addEventListener("scroll",()=>this._updateStickyHeader());let t=e instanceof window.Document?document.documentElement:e;new window.ResizeObserver(()=>this._updateStickyHeader()).observe(t)}))}_updateStickyHeader(){if(!this.stickyHeaderEl)return;let e=this.topbarEl.getBoundingClientRect().bottom,t=this.categoriesEl.getBoundingClientRect().top,n=e>=t,i=Array.from(this._dom.rootEl.querySelectorAll(".lh-category")).filter(p=>p.getBoundingClientRect().top-window.innerHeight/2<0),a=i.length>0?i.length-1:0,l=this.stickyHeaderEl.querySelectorAll(".lh-gauge__wrapper, .lh-fraction__wrapper"),s=l[a],c=l[0].getBoundingClientRect().left,d=s.getBoundingClientRect().left-c;this.highlightEl.style.transform=`translate(${d}px)`,this.stickyHeaderEl.classList.toggle("lh-sticky-header--visible",n)}};function kt(r,e){let t=e?new Date(e):new Date,n=t.toLocaleTimeString("en-US",{hour12:!1}),o=t.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}).split("/");o.unshift(o.pop());let i=o.join("-");return`${r}_${i}_${n}`.replace(/[/?<>\\:*|"]/g,"-")}function De(r){let e=new URL(r.finalDisplayedUrl).hostname;return kt(e,r.fetchTime)}function At(r){return Array.from(r.tBodies[0].rows)}var re=class{constructor(e,t={}){this.json,this._dom=e,this._opts=t,this._topbar=t.omitTopbar?null:new se(this,e),this.onMediaQueryChange=this.onMediaQueryChange.bind(this)}initFeatures(e){this.json=e,this._fullPageScreenshot=A.getFullPageScreenshot(e),this._topbar&&(this._topbar.enable(e),this._topbar.resetUIState()),this._setupMediaQueryListeners(),this._setupThirdPartyFilter(),this._setupElementScreenshotOverlay(this._dom.rootEl);let t=this._dom.isDevTools()||this._opts.disableDarkMode||this._opts.disableAutoDarkModeAndFireworks;!t&&window.matchMedia("(prefers-color-scheme: dark)").matches&&K(this._dom,!0);let o=["performance","accessibility","best-practices","seo"].every(s=>{let c=e.categories[s];return c&&c.score===1}),i=this._opts.disableFireworks||this._opts.disableAutoDarkModeAndFireworks;if(o&&!i&&(this._enableFireworks(),t||K(this._dom,!0)),e.categories.performance&&e.categories.performance.auditRefs.some(s=>!!(s.group==="metrics"&&e.audits[s.id].errorMessage))){let s=this._dom.find("input.lh-metrics-toggle__input",this._dom.rootEl);s.checked=!0}this.json.audits["script-treemap-data"]&&this.json.audits["script-treemap-data"].details&&this.addButton({text:m.strings.viewTreemapLabel,icon:"treemap",onClick:()=>Fe(this.json)}),this._opts.onViewTrace&&(e.configSettings.throttlingMethod==="simulate"?this._dom.find('a[data-action="view-unthrottled-trace"]',this._dom.rootEl).classList.remove("lh-hidden"):this.addButton({text:m.strings.viewTraceLabel,onClick:()=>this._opts.onViewTrace?.()})),this._opts.getStandaloneReportHTML&&this._dom.find('a[data-action="save-html"]',this._dom.rootEl).classList.remove("lh-hidden");for(let s of this._dom.findAll("[data-i18n]",this._dom.rootEl)){let d=s.getAttribute("data-i18n");s.textContent=m.strings[d]}}addButton(e){let t=this._dom.rootEl.querySelector(".lh-audit-group--metrics");if(!t)return;let n=t.querySelector(".lh-buttons");n||(n=this._dom.createChildOf(t,"div","lh-buttons"));let o=["lh-button"];e.icon&&(o.push("lh-report-icon"),o.push(`lh-report-icon--${e.icon}`));let i=this._dom.createChildOf(n,"button",o.join(" "));return i.textContent=e.text,i.addEventListener("click",e.onClick),i}resetUIState(){this._topbar&&this._topbar.resetUIState()}getReportHtml(){if(!this._opts.getStandaloneReportHTML)throw new Error("`getStandaloneReportHTML` is not set");return this.resetUIState(),this._opts.getStandaloneReportHTML()}saveAsGist(){throw new Error("Cannot save as gist from base report")}_enableFireworks(){this._dom.find(".lh-scores-container",this._dom.rootEl).classList.add("lh-score100")}_setupMediaQueryListeners(){let e=self.matchMedia("(max-width: 500px)");e.addListener(this.onMediaQueryChange),this.onMediaQueryChange(e)}_resetUIState(){this._topbar&&this._topbar.resetUIState()}onMediaQueryChange(e){this._dom.rootEl.classList.toggle("lh-narrow",e.matches)}_setupThirdPartyFilter(){let e=["uses-rel-preconnect","third-party-facades"],t=["legacy-javascript"];Array.from(this._dom.rootEl.querySelectorAll("table.lh-table")).filter(i=>i.querySelector("td.lh-table-column--url, td.lh-table-column--source-location")).filter(i=>{let a=i.closest(".lh-audit");if(!a)throw new Error(".lh-table not within audit");return!e.includes(a.id)}).forEach(i=>{let a=At(i),l=a.filter(f=>!f.classList.contains("lh-sub-item-row")),s=this._getThirdPartyRows(l,A.getFinalDisplayedUrl(this.json)),c=a.some(f=>f.classList.contains("lh-row--even")),d=this._dom.createComponent("3pFilter"),p=this._dom.find("input",d);p.addEventListener("change",f=>{let x=f.target instanceof HTMLInputElement&&!f.target.checked,u=!0,b=l[0];for(;b;){let _=x&&s.includes(b);do b.classList.toggle("lh-row--hidden",_),c&&(b.classList.toggle("lh-row--even",!_&&u),b.classList.toggle("lh-row--odd",!_&&!u)),b=b.nextElementSibling;while(b&&b.classList.contains("lh-sub-item-row"));_||(u=!u)}});let h=s.filter(f=>!f.classList.contains("lh-row--group")).length;this._dom.find(".lh-3p-filter-count",d).textContent=`${h}`,this._dom.find(".lh-3p-ui-string",d).textContent=m.strings.thirdPartyResourcesLabel;let g=s.length===l.length,v=!s.length;if((g||v)&&(this._dom.find("div.lh-3p-filter",d).hidden=!0),!i.parentNode)return;i.parentNode.insertBefore(d,i);let w=i.closest(".lh-audit");if(!w)throw new Error(".lh-table not within audit");t.includes(w.id)&&!g&&p.click()})}_setupElementScreenshotOverlay(e){this._fullPageScreenshot&&O.installOverlayFeature({dom:this._dom,rootEl:e,overlayContainerEl:e,fullPageScreenshot:this._fullPageScreenshot})}_getThirdPartyRows(e,t){let n=A.getEntityFromUrl(t,this.json.entities),o=this.json.entities?.find(a=>a.isFirstParty===!0)?.name,i=[];for(let a of e){if(o){if(!a.dataset.entity||a.dataset.entity===o)continue}else{let l=a.querySelector("div.lh-text__url");if(!l)continue;let s=l.dataset.url;if(!s||!(A.getEntityFromUrl(s,this.json.entities)!==n))continue}i.push(a)}return i}_saveFile(e){let t=e.type.match("json")?".json":".html",n=De({finalDisplayedUrl:A.getFinalDisplayedUrl(this.json),fetchTime:this.json.fetchTime})+t;this._opts.onSaveFileOverride?this._opts.onSaveFileOverride(e,n):this._dom.saveFile(e,n)}};function St(r,e={}){let t=document.createElement("article");t.classList.add("lh-root","lh-vars");let n=new Y(t.ownerDocument,t);return new ne(n).renderReport(r,t,e),new re(n,e).initFeatures(r),t}function Ct(r,e){return{lhr:r,missingIcuMessageIds:[]}}function zt(r,e){}function Lt(r){return!1}var Mt={registerLocaleData:zt,hasLocale:Lt};export{Y as DOM,ne as ReportRenderer,re as ReportUIFeatures,Mt as format,St as renderReport,Ct as swapLocale};
|
|
2632
|
+
`),e.append(t);let n=r.createElement("div","lh-topbar"),o=r.createElementNS("http://www.w3.org/2000/svg","svg","lh-topbar__logo");o.setAttribute("role","img"),o.setAttribute("title","Lighthouse logo"),o.setAttribute("fill","none"),o.setAttribute("xmlns","http://www.w3.org/2000/svg"),o.setAttribute("viewBox","0 0 48 48");let i=r.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("d","m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z"),i.setAttribute("fill","#F63");let a=r.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d","M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z"),a.setAttribute("fill","#FFA385");let l=r.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("fill","#FF3"),l.setAttribute("d","M20.5 10h7v7h-7z"),o.append(" ",i," ",a," ",l," ");let s=r.createElement("a","lh-topbar__url");s.setAttribute("href",""),s.setAttribute("target","_blank"),s.setAttribute("rel","noopener");let c=r.createElement("div","lh-tools"),d=r.createElement("div","lh-tools-locale lh-hidden"),p=r.createElement("button","lh-button lh-tool-locale__button");p.setAttribute("id","lh-button__swap-locales"),p.setAttribute("title","Show Language Picker"),p.setAttribute("aria-label","Toggle language picker"),p.setAttribute("aria-haspopup","menu"),p.setAttribute("aria-expanded","false"),p.setAttribute("aria-controls","lh-tools-locale__selector-wrapper");let h=r.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttribute("width","20px"),h.setAttribute("height","20px"),h.setAttribute("viewBox","0 0 24 24"),h.setAttribute("fill","currentColor");let u=r.createElementNS("http://www.w3.org/2000/svg","path");u.setAttribute("d","M0 0h24v24H0V0z"),u.setAttribute("fill","none");let v=r.createElementNS("http://www.w3.org/2000/svg","path");v.setAttribute("d","M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"),h.append(u,v),p.append(" ",h," ");let w=r.createElement("div","lh-tools-locale__selector-wrapper");w.setAttribute("id","lh-tools-locale__selector-wrapper"),w.setAttribute("role","menu"),w.setAttribute("aria-labelledby","lh-button__swap-locales"),w.setAttribute("aria-hidden","true"),w.append(" "," "),d.append(" ",p," ",w," ");let f=r.createElement("button","lh-tools__button");f.setAttribute("id","lh-tools-button"),f.setAttribute("title","Tools menu"),f.setAttribute("aria-label","Toggle report tools menu"),f.setAttribute("aria-haspopup","menu"),f.setAttribute("aria-expanded","false"),f.setAttribute("aria-controls","lh-tools-dropdown");let x=r.createElementNS("http://www.w3.org/2000/svg","svg");x.setAttribute("width","100%"),x.setAttribute("height","100%"),x.setAttribute("viewBox","0 0 24 24");let g=r.createElementNS("http://www.w3.org/2000/svg","path");g.setAttribute("d","M0 0h24v24H0z"),g.setAttribute("fill","none");let b=r.createElementNS("http://www.w3.org/2000/svg","path");b.setAttribute("d","M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"),x.append(" ",g," ",b," "),f.append(" ",x," ");let _=r.createElement("div","lh-tools__dropdown");_.setAttribute("id","lh-tools-dropdown"),_.setAttribute("role","menu"),_.setAttribute("aria-labelledby","lh-tools-button");let k=r.createElement("a","lh-report-icon lh-report-icon--print");k.setAttribute("role","menuitem"),k.setAttribute("tabindex","-1"),k.setAttribute("href","#"),k.setAttribute("data-i18n","dropdownPrintSummary"),k.setAttribute("data-action","print-summary");let T=r.createElement("a","lh-report-icon lh-report-icon--print");T.setAttribute("role","menuitem"),T.setAttribute("tabindex","-1"),T.setAttribute("href","#"),T.setAttribute("data-i18n","dropdownPrintExpanded"),T.setAttribute("data-action","print-expanded");let C=r.createElement("a","lh-report-icon lh-report-icon--copy");C.setAttribute("role","menuitem"),C.setAttribute("tabindex","-1"),C.setAttribute("href","#"),C.setAttribute("data-i18n","dropdownCopyJSON"),C.setAttribute("data-action","copy");let F=r.createElement("a","lh-report-icon lh-report-icon--download lh-hidden");F.setAttribute("role","menuitem"),F.setAttribute("tabindex","-1"),F.setAttribute("href","#"),F.setAttribute("data-i18n","dropdownSaveHTML"),F.setAttribute("data-action","save-html");let P=r.createElement("a","lh-report-icon lh-report-icon--download");P.setAttribute("role","menuitem"),P.setAttribute("tabindex","-1"),P.setAttribute("href","#"),P.setAttribute("data-i18n","dropdownSaveJSON"),P.setAttribute("data-action","save-json");let S=r.createElement("a","lh-report-icon lh-report-icon--open");S.setAttribute("role","menuitem"),S.setAttribute("tabindex","-1"),S.setAttribute("href","#"),S.setAttribute("data-i18n","dropdownViewer"),S.setAttribute("data-action","open-viewer");let z=r.createElement("a","lh-report-icon lh-report-icon--open");z.setAttribute("role","menuitem"),z.setAttribute("tabindex","-1"),z.setAttribute("href","#"),z.setAttribute("data-i18n","dropdownSaveGist"),z.setAttribute("data-action","save-gist");let M=r.createElement("a","lh-report-icon lh-report-icon--open lh-hidden");M.setAttribute("role","menuitem"),M.setAttribute("tabindex","-1"),M.setAttribute("href","#"),M.setAttribute("data-i18n","dropdownViewUnthrottledTrace"),M.setAttribute("data-action","view-unthrottled-trace");let I=r.createElement("a","lh-report-icon lh-report-icon--dark");return I.setAttribute("role","menuitem"),I.setAttribute("tabindex","-1"),I.setAttribute("href","#"),I.setAttribute("data-i18n","dropdownDarkTheme"),I.setAttribute("data-action","toggle-dark"),_.append(" ",k," ",T," ",C," "," ",F," ",P," ",S," ",z," "," ",M," ",I," "),c.append(" ",d," ",f," ",_," "),n.append(" "," ",o," ",s," ",c," "),e.append(n),e}function ht(r){let e=r.createFragment(),t=r.createElement("div","lh-warnings lh-warnings--toplevel"),n=r.createElement("p","lh-warnings__msg"),o=r.createElement("ul");return t.append(" ",n," ",o," "),e.append(t),e}function we(r,e){switch(e){case"3pFilter":return Oe(r);case"audit":return Be(r);case"categoryHeader":return je(r);case"chevron":return qe(r);case"clump":return We(r);case"crc":return Ke(r);case"crcChain":return Je(r);case"elementScreenshot":return Ze(r);case"explodeyGauge":return Qe(r);case"footer":return Xe(r);case"fraction":return Ye(r);case"gauge":return et(r);case"gaugePwa":return tt(r);case"heading":return nt(r);case"metric":return rt(r);case"scorescale":return ot(r);case"scoresWrapper":return it(r);case"snippet":return at(r);case"snippetContent":return lt(r);case"snippetHeader":return st(r);case"snippetLine":return ct(r);case"styles":return dt(r);case"topbar":return pt(r);case"warningsToplevel":return ht(r)}throw new Error("unexpected component: "+e)}var Y=class{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this._componentCache=new Map,this.rootEl=t}createElement(e,t){let n=this._document.createElement(e);if(t)for(let o of t.split(/\s+/))o&&n.classList.add(o);return n}createElementNS(e,t,n){let o=this._document.createElementNS(e,t);if(n)for(let i of n.split(/\s+/))i&&o.classList.add(i);return o}createSVGElement(e,t){return this._document.createElementNS("http://www.w3.org/2000/svg",e,t)}createFragment(){return this._document.createDocumentFragment()}createTextNode(e){return this._document.createTextNode(e)}createChildOf(e,t,n){let o=this.createElement(t,n);return e.append(o),o}createComponent(e){let t=this._componentCache.get(e);if(t){let o=t.cloneNode(!0);return this.findAll("style",o).forEach(i=>i.remove()),o}return t=we(this,e),this._componentCache.set(e,t),t.cloneNode(!0)}clearComponentCache(){this._componentCache.clear()}convertMarkdownLinkSnippets(e,t={}){let n=this.createElement("span");for(let o of A.splitMarkdownLink(e)){let i=o.text.includes("`")?this.convertMarkdownCodeSnippets(o.text):o.text;if(!o.isLink){n.append(i);continue}let a=new URL(o.linkHref);(["https://developers.google.com","https://web.dev","https://developer.chrome.com"].includes(a.origin)||t.alwaysAppendUtmSource)&&(a.searchParams.set("utm_source","lighthouse"),a.searchParams.set("utm_medium",this._lighthouseChannel));let s=this.createElement("a");s.rel="noopener",s.target="_blank",s.append(i),this.safelySetHref(s,a.href),n.append(s)}return n}safelySetHref(e,t){if(t=t||"",t.startsWith("#")){e.href=t;return}let n=["https:","http:"],o;try{o=new URL(t)}catch{}o&&n.includes(o.protocol)&&(e.href=o.href)}safelySetBlobHref(e,t){if(t.type!=="text/html"&&t.type!=="application/json")throw new Error("Unsupported blob type");let n=URL.createObjectURL(t);e.href=n}convertMarkdownCodeSnippets(e){let t=this.createElement("span");for(let n of A.splitMarkdownCodeSpans(e))if(n.isCode){let o=this.createElement("code");o.textContent=n.text,t.append(o)}else t.append(this._document.createTextNode(n.text));return t}setLighthouseChannel(e){this._lighthouseChannel=e}document(){return this._document}isDevTools(){return!!this._document.querySelector(".lh-devtools")}find(e,t){let n=this.maybeFind(e,t);if(n===null)throw new Error(`query ${e} not found`);return n}maybeFind(e,t){return t.querySelector(e)}findAll(e,t){return Array.from(t.querySelectorAll(e))}fireEventOn(e,t=this._document,n){let o=new CustomEvent(e,n?{detail:n}:void 0);t.dispatchEvent(o)}saveFile(e,t){let n=this.createElement("a");n.download=t,this.safelySetBlobHref(n,e),this._document.body.append(n),n.click(),this._document.body.removeChild(n),setTimeout(()=>URL.revokeObjectURL(n.href),500)}};var ye=0,m=class r{static i18n=null;static strings={};static reportJson=null;static apply(e){r.strings={...xe,...e.providedStrings},r.i18n=e.i18n,r.reportJson=e.reportJson}static getUniqueSuffix(){return ye++}static resetUniqueSuffix(){ye=0}};var Ee="data:image/jpeg;base64,";function ke(r){r.configSettings.locale||(r.configSettings.locale="en"),r.configSettings.formFactor||(r.configSettings.formFactor=r.configSettings.emulatedFormFactor),r.finalDisplayedUrl=A.getFinalDisplayedUrl(r),r.mainDocumentUrl=A.getMainDocumentUrl(r);for(let n of Object.values(r.audits))if((n.scoreDisplayMode==="not_applicable"||n.scoreDisplayMode==="not-applicable")&&(n.scoreDisplayMode="notApplicable"),n.details){if((n.details.type===void 0||n.details.type==="diagnostic")&&(n.details.type="debugdata"),n.details.type==="filmstrip")for(let o of n.details.items)o.data.startsWith(Ee)||(o.data=Ee+o.data);if(n.details.type==="table")for(let o of n.details.headings){let{itemType:i,text:a}=o;i!==void 0&&(o.valueType=i,delete o.itemType),a!==void 0&&(o.label=a,delete o.text);let l=o.subItemsHeading?.itemType;o.subItemsHeading&&l!==void 0&&(o.subItemsHeading.valueType=l,delete o.subItemsHeading.itemType)}if(n.id==="third-party-summary"&&(n.details.type==="opportunity"||n.details.type==="table")){let{headings:o,items:i}=n.details;if(o[0].valueType==="link"){o[0].valueType="text";for(let a of i)typeof a.entity=="object"&&a.entity.type==="link"&&(a.entity=a.entity.text);n.details.isEntityGrouped=!0}}}let[e]=r.lighthouseVersion.split(".").map(Number),t=r.categories.performance;if(e<9&&t){r.categoryGroups||(r.categoryGroups={}),r.categoryGroups.hidden={title:""};for(let n of t.auditRefs)n.group?["load-opportunities","diagnostics"].includes(n.group)&&delete n.group:n.group="hidden"}if(r.environment||(r.environment={benchmarkIndex:0,networkUserAgent:r.userAgent,hostUserAgent:r.userAgent}),r.configSettings.screenEmulation||(r.configSettings.screenEmulation={width:-1,height:-1,deviceScaleFactor:-1,mobile:/mobile/i.test(r.environment.hostUserAgent),disabled:!1}),r.i18n||(r.i18n={}),r.audits["full-page-screenshot"]){let n=r.audits["full-page-screenshot"].details;n?r.fullPageScreenshot={screenshot:n.screenshot,nodes:n.nodes}:r.fullPageScreenshot=null,delete r.audits["full-page-screenshot"]}}var G=A.RATINGS,E=class r{static prepareReportResult(e){let t=JSON.parse(JSON.stringify(e));ke(t);for(let o of Object.values(t.audits))o.details&&(o.details.type==="opportunity"||o.details.type==="table")&&!o.details.isEntityGrouped&&t.entities&&r.classifyEntities(t.entities,o.details);if(typeof t.categories!="object")throw new Error("No categories provided.");let n=new Map;for(let o of Object.values(t.categories))o.auditRefs.forEach(i=>{i.relevantAudits&&i.relevantAudits.forEach(a=>{let l=n.get(a)||[];l.push(i),n.set(a,l)})}),o.auditRefs.forEach(i=>{let a=t.audits[i.id];i.result=a,n.has(i.id)&&(i.relevantMetrics=n.get(i.id)),t.stackPacks&&t.stackPacks.forEach(l=>{l.descriptions[i.id]&&(i.stackPacks=i.stackPacks||[],i.stackPacks.push({title:l.title,iconDataURL:l.iconDataURL,description:l.descriptions[i.id]}))})});return t}static getUrlLocatorFn(e){let t=e.find(o=>o.valueType==="url")?.key;if(t&&typeof t=="string")return o=>{let i=o[t];if(typeof i=="string")return i};let n=e.find(o=>o.valueType==="source-location")?.key;if(n)return o=>{let i=o[n];if(typeof i=="object"&&i.type==="source-location")return i.url}}static classifyEntities(e,t){let{items:n,headings:o}=t;if(!n.length||n.some(a=>a.entity))return;let i=r.getUrlLocatorFn(o);if(i)for(let a of n){let l=i(a);if(!l)continue;let s="";try{s=A.parseURL(l).origin}catch{}if(!s)continue;let c=e.find(d=>d.origins.includes(s));c&&(a.entity=c.name)}}static getTableItemSortComparator(e){return(t,n)=>{for(let o of e){let i=t[o],a=n[o];if((typeof i!=typeof a||!["number","string"].includes(typeof i))&&console.warn(`Warning: Attempting to sort unsupported value type: ${o}.`),typeof i=="number"&&typeof a=="number"&&i!==a)return a-i;if(typeof i=="string"&&typeof a=="string"&&i!==a)return i.localeCompare(a)}return 0}}static getEmulationDescriptions(e){let t,n,o,i=e.throttling,a=m.i18n,l=m.strings;switch(e.throttlingMethod){case"provided":o=n=t=l.throttlingProvided;break;case"devtools":{let{cpuSlowdownMultiplier:h,requestLatencyMs:u}=i;t=`${a.formatNumber(h)}x slowdown (DevTools)`,n=`${a.formatMilliseconds(u)} HTTP RTT, ${a.formatKbps(i.downloadThroughputKbps)} down, ${a.formatKbps(i.uploadThroughputKbps)} up (DevTools)`,o=(()=>u===150*3.75&&i.downloadThroughputKbps===1.6*1024*.9&&i.uploadThroughputKbps===750*.9)()?l.runtimeSlow4g:l.runtimeCustom;break}case"simulate":{let{cpuSlowdownMultiplier:h,rttMs:u,throughputKbps:v}=i;t=`${a.formatNumber(h)}x slowdown (Simulated)`,n=`${a.formatMilliseconds(u)} TCP RTT, ${a.formatKbps(v)} throughput (Simulated)`,o=(()=>u===150&&v===1.6*1024)()?l.runtimeSlow4g:l.runtimeCustom;break}default:o=t=n=l.runtimeUnknown}let s=e.channel==="devtools"?!1:e.screenEmulation.disabled,c=e.channel==="devtools"?e.formFactor==="mobile":e.screenEmulation.mobile,d=l.runtimeMobileEmulation;s?d=l.runtimeNoEmulation:c||(d=l.runtimeDesktopEmulation);let p=s?void 0:`${e.screenEmulation.width}x${e.screenEmulation.height}, DPR ${e.screenEmulation.deviceScaleFactor}`;return{deviceEmulation:d,screenEmulation:p,cpuThrottling:t,networkThrottling:n,summary:o}}static showAsPassed(e){switch(e.scoreDisplayMode){case"manual":case"notApplicable":return!0;case"error":case"informative":return!1;case"numeric":case"binary":default:return Number(e.score)>=G.PASS.minScore}}static calculateRating(e,t){if(t==="manual"||t==="notApplicable")return G.PASS.label;if(t==="error")return G.ERROR.label;if(e===null)return G.FAIL.label;let n=G.FAIL.label;return e>=G.PASS.minScore?n=G.PASS.label:e>=G.AVERAGE.minScore&&(n=G.AVERAGE.label),n}static calculateCategoryFraction(e){let t=0,n=0,o=0,i=0;for(let a of e.auditRefs){let l=r.showAsPassed(a.result);if(!(a.group==="hidden"||a.result.scoreDisplayMode==="manual"||a.result.scoreDisplayMode==="notApplicable")){if(a.result.scoreDisplayMode==="informative"){l||++o;continue}++t,i+=a.weight,l&&n++}}return{numPassed:n,numPassableAudits:t,numInformative:o,totalWeight:i}}static isPluginCategory(e){return e.startsWith("lighthouse-plugin-")}static shouldDisplayAsFraction(e){return e==="timespan"||e==="snapshot"}},xe={varianceDisclaimer:"Values are estimated and may vary. The [performance score is calculated](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) directly from these metrics.",calculatorLink:"See calculator.",showRelevantAudits:"Show audits relevant to:",opportunityResourceColumnLabel:"Opportunity",opportunitySavingsColumnLabel:"Estimated Savings",errorMissingAuditInfo:"Report error: no audit information",errorLabel:"Error!",warningHeader:"Warnings: ",warningAuditsGroupTitle:"Passed audits but with warnings",passedAuditsGroupTitle:"Passed audits",notApplicableAuditsGroupTitle:"Not applicable",manualAuditsGroupTitle:"Additional items to manually check",toplevelWarningsMessage:"There were issues affecting this run of Lighthouse:",crcInitialNavigation:"Initial Navigation",crcLongestDurationLabel:"Maximum critical path latency:",snippetExpandButtonLabel:"Expand snippet",snippetCollapseButtonLabel:"Collapse snippet",lsPerformanceCategoryDescription:"[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",labDataTitle:"Lab Data",thirdPartyResourcesLabel:"Show 3rd-party resources",viewTreemapLabel:"View Treemap",viewTraceLabel:"View Trace",dropdownPrintSummary:"Print Summary",dropdownPrintExpanded:"Print Expanded",dropdownCopyJSON:"Copy JSON",dropdownSaveHTML:"Save as HTML",dropdownSaveJSON:"Save as JSON",dropdownViewer:"Open in Viewer",dropdownSaveGist:"Save as Gist",dropdownDarkTheme:"Toggle Dark Theme",dropdownViewUnthrottledTrace:"View Unthrottled Trace",runtimeSettingsDevice:"Device",runtimeSettingsNetworkThrottling:"Network throttling",runtimeSettingsCPUThrottling:"CPU throttling",runtimeSettingsUANetwork:"User agent (network)",runtimeSettingsBenchmark:"Unthrottled CPU/Memory Power",runtimeSettingsAxeVersion:"Axe version",runtimeSettingsScreenEmulation:"Screen emulation",footerIssue:"File an issue",runtimeNoEmulation:"No emulation",runtimeMobileEmulation:"Emulated Moto G Power",runtimeDesktopEmulation:"Emulated Desktop",runtimeUnknown:"Unknown",runtimeSingleLoad:"Single page session",runtimeAnalysisWindow:"Initial page load",runtimeAnalysisWindowTimespan:"User interactions timespan",runtimeAnalysisWindowSnapshot:"Point-in-time snapshot",runtimeSingleLoadTooltip:"This data is taken from a single page session, as opposed to field data summarizing many sessions.",throttlingProvided:"Provided by environment",show:"Show",hide:"Hide",expandView:"Expand view",collapseView:"Collapse view",runtimeSlow4g:"Slow 4G throttling",runtimeCustom:"Custom throttling",firstPartyChipLabel:"1st party",openInANewTabTooltip:"Open in a new tab",unattributable:"Unattributable"};var V=class{constructor(e,t){this.dom=e,this.detailsRenderer=t}get _clumpTitles(){return{warning:m.strings.warningAuditsGroupTitle,manual:m.strings.manualAuditsGroupTitle,passed:m.strings.passedAuditsGroupTitle,notApplicable:m.strings.notApplicableAuditsGroupTitle}}renderAudit(e){let t=this.dom.createComponent("audit");return this.populateAuditValues(e,t)}populateAuditValues(e,t){let n=m.strings,o=this.dom.find(".lh-audit",t);o.id=e.result.id;let i=e.result.scoreDisplayMode;e.result.displayValue&&(this.dom.find(".lh-audit__display-text",o).textContent=e.result.displayValue);let a=this.dom.find(".lh-audit__title",o);a.append(this.dom.convertMarkdownCodeSnippets(e.result.title));let l=this.dom.find(".lh-audit__description",o);l.append(this.dom.convertMarkdownLinkSnippets(e.result.description));for(let h of e.relevantMetrics||[]){let u=this.dom.createChildOf(l,"span","lh-audit__adorn");u.title=`Relevant to ${h.result.title}`,u.textContent=h.acronym||h.id}e.stackPacks&&e.stackPacks.forEach(h=>{let u=this.dom.createElement("img","lh-audit__stackpack__img");u.src=h.iconDataURL,u.alt=h.title;let v=this.dom.convertMarkdownLinkSnippets(h.description,{alwaysAppendUtmSource:!0}),w=this.dom.createElement("div","lh-audit__stackpack");w.append(u,v),this.dom.find(".lh-audit__stackpacks",o).append(w)});let s=this.dom.find("details",o);if(e.result.details){let h=this.detailsRenderer.render(e.result.details);h&&(h.classList.add("lh-details"),s.append(h))}if(this.dom.find(".lh-chevron-container",o).append(this._createChevron()),this._setRatingClass(o,e.result.score,i),e.result.scoreDisplayMode==="error"){o.classList.add("lh-audit--error");let h=this.dom.find(".lh-audit__display-text",o);h.textContent=n.errorLabel,h.classList.add("lh-tooltip-boundary");let u=this.dom.createChildOf(h,"div","lh-tooltip lh-tooltip--error");u.textContent=e.result.errorMessage||n.errorMissingAuditInfo}else if(e.result.explanation){let h=this.dom.createChildOf(a,"div","lh-audit-explanation");h.textContent=e.result.explanation}let c=e.result.warnings;if(!c||c.length===0)return o;let d=this.dom.find("summary",s),p=this.dom.createChildOf(d,"div","lh-warnings");if(this.dom.createChildOf(p,"span").textContent=n.warningHeader,c.length===1)p.append(this.dom.createTextNode(c.join("")));else{let h=this.dom.createChildOf(p,"ul");for(let u of c){let v=this.dom.createChildOf(h,"li");v.textContent=u}}return o}injectFinalScreenshot(e,t,n){let o=t["final-screenshot"];if(!o||o.scoreDisplayMode==="error"||!o.details||o.details.type!=="screenshot")return null;let i=this.dom.createElement("img","lh-final-ss-image"),a=o.details.data;i.src=a,i.alt=o.title;let l=this.dom.find(".lh-category .lh-category-header",e),s=this.dom.createElement("div","lh-category-headercol"),c=this.dom.createElement("div","lh-category-headercol lh-category-headercol--separator"),d=this.dom.createElement("div","lh-category-headercol");s.append(...l.childNodes),s.append(n),d.append(i),l.append(s,c,d),l.classList.add("lh-category-header__finalscreenshot")}_createChevron(){let e=this.dom.createComponent("chevron");return this.dom.find("svg.lh-chevron",e)}_setRatingClass(e,t,n){let o=E.calculateRating(t,n);return e.classList.add(`lh-audit--${n.toLowerCase()}`),n!=="informative"&&e.classList.add(`lh-audit--${o}`),e}renderCategoryHeader(e,t,n){let o=this.dom.createComponent("categoryHeader"),i=this.dom.find(".lh-score__gauge",o),a=this.renderCategoryScore(e,t,n);if(i.append(a),e.description){let l=this.dom.convertMarkdownLinkSnippets(e.description);this.dom.find(".lh-category-header__description",o).append(l)}return o}renderAuditGroup(e){let t=this.dom.createElement("div","lh-audit-group"),n=this.dom.createElement("div","lh-audit-group__header");this.dom.createChildOf(n,"span","lh-audit-group__title").textContent=e.title,t.append(n);let o=null;return e.description&&(o=this.dom.convertMarkdownLinkSnippets(e.description),o.classList.add("lh-audit-group__description","lh-audit-group__footer"),t.append(o)),[t,o]}_renderGroupedAudits(e,t){let n=new Map,o="NotAGroup";n.set(o,[]);for(let a of e){let l=a.group||o;if(l==="hidden")continue;let s=n.get(l)||[];s.push(a),n.set(l,s)}let i=[];for(let[a,l]of n){if(a===o){for(let p of l)i.push(this.renderAudit(p));continue}let s=t[a],[c,d]=this.renderAuditGroup(s);for(let p of l)c.insertBefore(this.renderAudit(p),d);c.classList.add(`lh-audit-group--${a}`),i.push(c)}return i}renderUnexpandableClump(e,t){let n=this.dom.createElement("div");return this._renderGroupedAudits(e,t).forEach(i=>n.append(i)),n}renderClump(e,{auditRefs:t,description:n,openByDefault:o}){let i=this.dom.createComponent("clump"),a=this.dom.find(".lh-clump",i);o&&a.setAttribute("open","");let l=this.dom.find(".lh-audit-group__header",a),s=this._clumpTitles[e];this.dom.find(".lh-audit-group__title",l).textContent=s;let c=this.dom.find(".lh-audit-group__itemcount",a);c.textContent=`(${t.length})`;let d=t.map(this.renderAudit.bind(this));a.append(...d);let p=this.dom.find(".lh-audit-group",i);if(n){let h=this.dom.convertMarkdownLinkSnippets(n);h.classList.add("lh-audit-group__description","lh-audit-group__footer"),p.append(h)}return this.dom.find(".lh-clump-toggletext--show",p).textContent=m.strings.show,this.dom.find(".lh-clump-toggletext--hide",p).textContent=m.strings.hide,a.classList.add(`lh-clump--${e.toLowerCase()}`),p}renderCategoryScore(e,t,n){let o;if(n&&E.shouldDisplayAsFraction(n.gatherMode)?o=this.renderCategoryFraction(e):o=this.renderScoreGauge(e,t),n?.omitLabel&&this.dom.find(".lh-gauge__label,.lh-fraction__label",o).remove(),n?.onPageAnchorRendered){let i=this.dom.find("a",o);n.onPageAnchorRendered(i)}return o}renderScoreGauge(e,t){let n=this.dom.createComponent("gauge"),o=this.dom.find("a.lh-gauge__wrapper",n);E.isPluginCategory(e.id)&&o.classList.add("lh-gauge__wrapper--plugin");let i=Number(e.score),a=this.dom.find(".lh-gauge",n),l=this.dom.find("circle.lh-gauge-arc",a);l&&this._setGaugeArc(l,i);let s=Math.round(i*100),c=this.dom.find("div.lh-gauge__percentage",n);return c.textContent=s.toString(),e.score===null&&(c.classList.add("lh-gauge--error"),c.textContent="",c.title=m.strings.errorLabel),e.auditRefs.length===0||this.hasApplicableAudits(e)?o.classList.add(`lh-gauge__wrapper--${E.calculateRating(e.score)}`):(o.classList.add("lh-gauge__wrapper--not-applicable"),c.textContent="-",c.title=m.strings.notApplicableAuditsGroupTitle),this.dom.find(".lh-gauge__label",n).textContent=e.title,n}renderCategoryFraction(e){let t=this.dom.createComponent("fraction"),n=this.dom.find("a.lh-fraction__wrapper",t),{numPassed:o,numPassableAudits:i,totalWeight:a}=E.calculateCategoryFraction(e),l=o/i,s=this.dom.find(".lh-fraction__content",t),c=this.dom.createElement("span");c.textContent=`${o}/${i}`,s.append(c);let d=E.calculateRating(l);return a===0&&(d="null"),n.classList.add(`lh-fraction__wrapper--${d}`),this.dom.find(".lh-fraction__label",t).textContent=e.title,t}hasApplicableAudits(e){return e.auditRefs.some(t=>t.result.scoreDisplayMode!=="notApplicable")}_setGaugeArc(e,t){let n=2*Math.PI*Number(e.getAttribute("r")),o=Number(e.getAttribute("stroke-width")),i=.25*o/n;e.style.transform=`rotate(${-90+i*360}deg)`;let a=t*n-o/2;t===0&&(e.style.opacity="0"),t===1&&(a=n),e.style.strokeDasharray=`${Math.max(a,0)} ${n}`}_auditHasWarning(e){return!!e.result.warnings?.length}_getClumpIdForAuditRef(e){let t=e.result.scoreDisplayMode;return t==="manual"||t==="notApplicable"?t:E.showAsPassed(e.result)?this._auditHasWarning(e)?"warning":"passed":"failed"}render(e,t={},n){let o=this.dom.createElement("div","lh-category");o.id=e.id,o.append(this.renderCategoryHeader(e,t,n));let i=new Map;i.set("failed",[]),i.set("warning",[]),i.set("manual",[]),i.set("passed",[]),i.set("notApplicable",[]);for(let l of e.auditRefs){let s=this._getClumpIdForAuditRef(l),c=i.get(s);c.push(l),i.set(s,c)}for(let l of i.values())l.sort((s,c)=>c.weight-s.weight);let a=i.get("failed")?.length;for(let[l,s]of i){if(s.length===0)continue;if(l==="failed"){let h=this.renderUnexpandableClump(s,t);h.classList.add("lh-clump--failed"),o.append(h);continue}let c=l==="manual"?e.manualDescription:void 0,d=l==="warning"||l==="manual"&&a===0,p=this.renderClump(l,{auditRefs:s,description:c,openByDefault:d});o.append(p)}return o}};var ee=class{static initTree(e){let t=0,n=Object.keys(e);return n.length>0&&(t=e[n[0]].request.startTime),{tree:e,startTime:t,transferSize:0}}static createSegment(e,t,n,o,i,a){let l=e[t],s=Object.keys(e),c=s.indexOf(t)===s.length-1,d=!!l.children&&Object.keys(l.children).length>0,p=Array.isArray(i)?i.slice(0):[];return typeof a<"u"&&p.push(!a),{node:l,isLastChild:c,hasChildren:d,startTime:n,transferSize:o+l.request.transferSize,treeMarkers:p}}static createChainNode(e,t,n){let o=e.createComponent("crcChain");e.find(".lh-crc-node",o).setAttribute("title",t.node.request.url);let i=e.find(".lh-crc-node__tree-marker",o);t.treeMarkers.forEach(p=>{let h=p?"lh-tree-marker lh-vert":"lh-tree-marker";i.append(e.createElement("span",h),e.createElement("span","lh-tree-marker"))});let a=t.isLastChild?"lh-tree-marker lh-up-right":"lh-tree-marker lh-vert-right",l=t.hasChildren?"lh-tree-marker lh-horiz-down":"lh-tree-marker lh-right";i.append(e.createElement("span",a),e.createElement("span","lh-tree-marker lh-right"),e.createElement("span",l));let s=t.node.request.url,c=n.renderTextURL(s),d=e.find(".lh-crc-node__tree-value",o);if(d.append(c),!t.hasChildren){let{startTime:p,endTime:h,transferSize:u}=t.node.request,v=e.createElement("span","lh-crc-node__chain-duration");v.textContent=" - "+m.i18n.formatMilliseconds((h-p)*1e3)+", ";let w=e.createElement("span","lh-crc-node__chain-duration");w.textContent=m.i18n.formatBytesToKiB(u,.01),d.append(v,w)}return o}static buildTree(e,t,n,o,i,a){if(o.append(W.createChainNode(e,n,a)),n.node.children)for(let l of Object.keys(n.node.children)){let s=W.createSegment(n.node.children,l,n.startTime,n.transferSize,n.treeMarkers,n.isLastChild);W.buildTree(e,t,s,o,i,a)}}static render(e,t,n){let o=e.createComponent("crc"),i=e.find(".lh-crc",o);e.find(".lh-crc-initial-nav",o).textContent=m.strings.crcInitialNavigation,e.find(".lh-crc__longest_duration_label",o).textContent=m.strings.crcLongestDurationLabel,e.find(".lh-crc__longest_duration",o).textContent=m.i18n.formatMilliseconds(t.longestChain.duration);let a=W.initTree(t.chains);for(let l of Object.keys(a.tree)){let s=W.createSegment(a.tree,l,a.startTime,a.transferSize);W.buildTree(e,o,s,i,t,n)}return e.find(".lh-crc-container",o)}},W=ee;function ut(r,e){return e.left<=r.width&&0<=e.right&&e.top<=r.height&&0<=e.bottom}function Ae(r,e,t){return r<e?e:r>t?t:r}function gt(r){return{x:r.left+r.width/2,y:r.top+r.height/2}}var O=class r{static getScreenshotPositions(e,t,n){let o=gt(e),i=Ae(o.x-t.width/2,0,n.width-t.width),a=Ae(o.y-t.height/2,0,n.height-t.height);return{screenshot:{left:i,top:a},clip:{left:e.left-i,top:e.top-a}}}static renderClipPathInScreenshot(e,t,n,o,i){let a=e.find("clipPath",t),l=`clip-${m.getUniqueSuffix()}`;a.id=l,t.style.clipPath=`url(#${l})`;let s=n.top/i.height,c=s+o.height/i.height,d=n.left/i.width,p=d+o.width/i.width,h=[`0,0 1,0 1,${s} 0,${s}`,`0,${c} 1,${c} 1,1 0,1`,`0,${s} ${d},${s} ${d},${c} 0,${c}`,`${p},${s} 1,${s} 1,${c} ${p},${c}`];for(let u of h){let v=e.createElementNS("http://www.w3.org/2000/svg","polygon");v.setAttribute("points",u),a.append(v)}}static installFullPageScreenshot(e,t){e.style.setProperty("--element-screenshot-url",`url('${t.data}')`)}static installOverlayFeature(e){let{dom:t,rootEl:n,overlayContainerEl:o,fullPageScreenshot:i}=e,a="lh-screenshot-overlay--enabled";n.classList.contains(a)||(n.classList.add(a),n.addEventListener("click",l=>{let s=l.target;if(!s)return;let c=s.closest(".lh-node > .lh-element-screenshot");if(!c)return;let d=t.createElement("div","lh-element-screenshot__overlay");o.append(d);let p={width:d.clientWidth*.95,height:d.clientHeight*.8},h={width:Number(c.dataset.rectWidth),height:Number(c.dataset.rectHeight),left:Number(c.dataset.rectLeft),right:Number(c.dataset.rectLeft)+Number(c.dataset.rectWidth),top:Number(c.dataset.rectTop),bottom:Number(c.dataset.rectTop)+Number(c.dataset.rectHeight)},u=r.render(t,i.screenshot,h,p);if(!u){d.remove();return}d.append(u),d.addEventListener("click",()=>d.remove())}))}static _computeZoomFactor(e,t){let o={x:t.width/e.width,y:t.height/e.height},i=.75*Math.min(o.x,o.y);return Math.min(1,i)}static render(e,t,n,o){if(!ut(t,n))return null;let i=e.createComponent("elementScreenshot"),a=e.find("div.lh-element-screenshot",i);a.dataset.rectWidth=n.width.toString(),a.dataset.rectHeight=n.height.toString(),a.dataset.rectLeft=n.left.toString(),a.dataset.rectTop=n.top.toString();let l=this._computeZoomFactor(n,o),s={width:o.width/l,height:o.height/l};s.width=Math.min(t.width,s.width),s.height=Math.min(t.height,s.height);let c={width:s.width*l,height:s.height*l},d=r.getScreenshotPositions(n,s,{width:t.width,height:t.height}),p=e.find("div.lh-element-screenshot__image",a);p.style.width=c.width+"px",p.style.height=c.height+"px",p.style.backgroundPositionY=-(d.screenshot.top*l)+"px",p.style.backgroundPositionX=-(d.screenshot.left*l)+"px",p.style.backgroundSize=`${t.width*l}px ${t.height*l}px`;let h=e.find("div.lh-element-screenshot__element-marker",a);h.style.width=n.width*l+"px",h.style.height=n.height*l+"px",h.style.left=d.clip.left*l+"px",h.style.top=d.clip.top*l+"px";let u=e.find("div.lh-element-screenshot__mask",a);return u.style.width=c.width+"px",u.style.height=c.height+"px",r.renderClipPathInScreenshot(e,u,d.clip,n,s),a}};var mt=["http://","https://","data:"],ft=["bytes","numeric","ms","timespanMs"],te=class{constructor(e,t={}){this._dom=e,this._fullPageScreenshot=t.fullPageScreenshot,this._entities=t.entities}render(e){switch(e.type){case"filmstrip":return this._renderFilmstrip(e);case"list":return this._renderList(e);case"table":case"opportunity":return this._renderTable(e);case"criticalrequestchain":return ee.render(this._dom,e,this);case"screenshot":case"debugdata":case"treemap-data":return null;default:return this._renderUnknown(e.type,e)}}_renderBytes(e){let t=m.i18n.formatBytesToKiB(e.value,e.granularity||.1),n=this._renderText(t);return n.title=m.i18n.formatBytes(e.value),n}_renderMilliseconds(e){let t;return e.displayUnit==="duration"?t=m.i18n.formatDuration(e.value):t=m.i18n.formatMilliseconds(e.value,e.granularity||10),this._renderText(t)}renderTextURL(e){let t=e,n,o,i;try{let l=A.parseURL(t);n=l.file==="/"?l.origin:l.file,o=l.file==="/"||l.hostname===""?"":`(${l.hostname})`,i=t}catch{n=t}let a=this._dom.createElement("div","lh-text__url");if(a.append(this._renderLink({text:n,url:t})),o){let l=this._renderText(o);l.classList.add("lh-text__url-host"),a.append(l)}return i&&(a.title=t,a.dataset.url=t),a}_renderLink(e){let t=this._dom.createElement("a");if(this._dom.safelySetHref(t,e.url),!t.href){let n=this._renderText(e.text);return n.classList.add("lh-link"),n}return t.rel="noopener",t.target="_blank",t.textContent=e.text,t.classList.add("lh-link"),t}_renderText(e){let t=this._dom.createElement("div","lh-text");return t.textContent=e,t}_renderNumeric(e){let t=m.i18n.formatNumber(e.value,e.granularity||.1),n=this._dom.createElement("div","lh-numeric");return n.textContent=t,n}_renderThumbnail(e){let t=this._dom.createElement("img","lh-thumbnail"),n=e;return t.src=n,t.title=n,t.alt="",t}_renderUnknown(e,t){console.error(`Unknown details type: ${e}`,t);let n=this._dom.createElement("details","lh-unknown");return this._dom.createChildOf(n,"summary").textContent=`We don't know how to render audit details of type \`${e}\`. The Lighthouse version that collected this data is likely newer than the Lighthouse version of the report renderer. Expand for the raw JSON.`,this._dom.createChildOf(n,"pre").textContent=JSON.stringify(t,null,2),n}_renderTableValue(e,t){if(e==null)return null;if(typeof e=="object")switch(e.type){case"code":return this._renderCode(e.value);case"link":return this._renderLink(e);case"node":return this.renderNode(e);case"numeric":return this._renderNumeric(e);case"source-location":return this.renderSourceLocation(e);case"url":return this.renderTextURL(e.value);default:return this._renderUnknown(e.type,e)}switch(t.valueType){case"bytes":{let n=Number(e);return this._renderBytes({value:n,granularity:t.granularity})}case"code":{let n=String(e);return this._renderCode(n)}case"ms":{let n={value:Number(e),granularity:t.granularity,displayUnit:t.displayUnit};return this._renderMilliseconds(n)}case"numeric":{let n=Number(e);return this._renderNumeric({value:n,granularity:t.granularity})}case"text":{let n=String(e);return this._renderText(n)}case"thumbnail":{let n=String(e);return this._renderThumbnail(n)}case"timespanMs":{let n=Number(e);return this._renderMilliseconds({value:n})}case"url":{let n=String(e);return mt.some(o=>n.startsWith(o))?this.renderTextURL(n):this._renderCode(n)}default:return this._renderUnknown(t.valueType,e)}}_getDerivedSubItemsHeading(e){return e.subItemsHeading?{key:e.subItemsHeading.key||"",valueType:e.subItemsHeading.valueType||e.valueType,granularity:e.subItemsHeading.granularity||e.granularity,displayUnit:e.subItemsHeading.displayUnit||e.displayUnit,label:""}:null}_renderTableRow(e,t){let n=this._dom.createElement("tr");for(let o of t){if(!o||!o.key){this._dom.createChildOf(n,"td","lh-table-column--empty");continue}let i=e[o.key],a;if(i!=null&&(a=this._renderTableValue(i,o)),a){let l=`lh-table-column--${o.valueType}`;this._dom.createChildOf(n,"td",l).append(a)}else this._dom.createChildOf(n,"td","lh-table-column--empty")}return n}_renderTableRowsFromItem(e,t){let n=this._dom.createFragment();if(n.append(this._renderTableRow(e,t)),!e.subItems)return n;let o=t.map(this._getDerivedSubItemsHeading);if(!o.some(Boolean))return n;for(let i of e.subItems.items){let a=this._renderTableRow(i,o);a.classList.add("lh-sub-item-row"),n.append(a)}return n}_adornEntityGroupRow(e){let t=e.dataset.entity;if(!t)return;let n=this._entities?.find(i=>i.name===t);if(!n)return;let o=this._dom.find("td",e);if(n.category){let i=this._dom.createElement("span");i.classList.add("lh-audit__adorn"),i.textContent=n.category,o.append(" ",i)}if(n.isFirstParty){let i=this._dom.createElement("span");i.classList.add("lh-audit__adorn","lh-audit__adorn1p"),i.textContent=m.strings.firstPartyChipLabel,o.append(" ",i)}if(n.homepage){let i=this._dom.createElement("a");i.href=n.homepage,i.target="_blank",i.title=m.strings.openInANewTabTooltip,i.classList.add("lh-report-icon--external"),o.append(" ",i)}}_renderEntityGroupRow(e,t){let n={...t[0]};n.valueType="text";let o=[n,...t.slice(1)],i=this._dom.createFragment();return i.append(this._renderTableRow(e,o)),this._dom.find("tr",i).classList.add("lh-row--group"),i}_getEntityGroupItems(e){let{items:t,headings:n,sortedBy:o}=e;if(!t.length||e.isEntityGrouped||!t.some(d=>d.entity))return[];let i=new Set(e.skipSumming||[]),a=[];for(let d of n)!d.key||i.has(d.key)||ft.includes(d.valueType)&&a.push(d.key);let l=n[0].key;if(!l)return[];let s=new Map;for(let d of t){let p=typeof d.entity=="string"?d.entity:void 0,h=s.get(p)||{[l]:p||m.strings.unattributable,entity:p};for(let u of a)h[u]=Number(h[u]||0)+Number(d[u]||0);s.set(p,h)}let c=[...s.values()];return o&&c.sort(E.getTableItemSortComparator(o)),c}_renderTable(e){if(!e.items.length)return this._dom.createElement("span");let t=this._dom.createElement("table","lh-table"),n=this._dom.createChildOf(t,"thead"),o=this._dom.createChildOf(n,"tr");for(let l of e.headings){let c=`lh-table-column--${l.valueType||"text"}`,d=this._dom.createElement("div","lh-text");d.textContent=l.label,this._dom.createChildOf(o,"th",c).append(d)}let i=this._getEntityGroupItems(e),a=this._dom.createChildOf(t,"tbody");if(i.length)for(let l of i){let s=typeof l.entity=="string"?l.entity:void 0,c=this._renderEntityGroupRow(l,e.headings);for(let p of e.items.filter(h=>h.entity===s))c.append(this._renderTableRowsFromItem(p,e.headings));let d=this._dom.findAll("tr",c);s&&d.length&&(d.forEach(p=>p.dataset.entity=s),this._adornEntityGroupRow(d[0])),a.append(c)}else{let l=!0;for(let s of e.items){let c=this._renderTableRowsFromItem(s,e.headings),d=this._dom.findAll("tr",c),p=d[0];if(typeof s.entity=="string"&&(p.dataset.entity=s.entity),e.isEntityGrouped&&s.entity)p.classList.add("lh-row--group"),this._adornEntityGroupRow(p);else for(let h of d)h.classList.add(l?"lh-row--even":"lh-row--odd");l=!l,a.append(c)}}return t}_renderList(e){let t=this._dom.createElement("div","lh-list");return e.items.forEach(n=>{let o=this.render(n);o&&t.append(o)}),t}renderNode(e){let t=this._dom.createElement("span","lh-node");if(e.nodeLabel){let a=this._dom.createElement("div");a.textContent=e.nodeLabel,t.append(a)}if(e.snippet){let a=this._dom.createElement("div");a.classList.add("lh-node__snippet"),a.textContent=e.snippet,t.append(a)}if(e.selector&&(t.title=e.selector),e.path&&t.setAttribute("data-path",e.path),e.selector&&t.setAttribute("data-selector",e.selector),e.snippet&&t.setAttribute("data-snippet",e.snippet),!this._fullPageScreenshot)return t;let n=e.lhId&&this._fullPageScreenshot.nodes[e.lhId];if(!n||n.width===0||n.height===0)return t;let o={width:147,height:100},i=O.render(this._dom,this._fullPageScreenshot.screenshot,n,o);return i&&t.prepend(i),t}renderSourceLocation(e){if(!e.url)return null;let t=`${e.url}:${e.line+1}:${e.column}`,n;e.original&&(n=`${e.original.file||"<unmapped>"}:${e.original.line+1}:${e.original.column}`);let o;if(e.urlProvider==="network"&&n)o=this._renderLink({url:e.url,text:n}),o.title=`maps to generated location ${t}`;else if(e.urlProvider==="network"&&!n)o=this.renderTextURL(e.url),this._dom.find(".lh-link",o).textContent+=`:${e.line+1}:${e.column}`;else if(e.urlProvider==="comment"&&n)o=this._renderText(`${n} (from source map)`),o.title=`${t} (from sourceURL)`;else if(e.urlProvider==="comment"&&!n)o=this._renderText(`${t} (from sourceURL)`);else return null;return o.classList.add("lh-source-location"),o.setAttribute("data-source-url",e.url),o.setAttribute("data-source-line",String(e.line)),o.setAttribute("data-source-column",String(e.column)),o}_renderFilmstrip(e){let t=this._dom.createElement("div","lh-filmstrip");for(let n of e.items){let o=this._dom.createChildOf(t,"div","lh-filmstrip__frame"),i=this._dom.createChildOf(o,"img","lh-filmstrip__thumbnail");i.src=n.data,i.alt="Screenshot"}return t}_renderCode(e){let t=this._dom.createElement("pre","lh-code");return t.textContent=e,t}};var ce="\xA0";var oe=class{constructor(e){e==="en-XA"&&(e="de"),this._locale=e,this._cachedNumberFormatters=new Map}_formatNumberWithGranularity(e,t,n={}){if(t!==void 0){let a=-Math.log10(t);Number.isInteger(a)||(console.warn(`granularity of ${t} is invalid. Using 1 instead`),t=1),t<1&&(n={...n},n.minimumFractionDigits=n.maximumFractionDigits=Math.ceil(a)),e=Math.round(e/t)*t,Object.is(e,-0)&&(e=0)}else Math.abs(e)<5e-4&&(e=0);let o,i=[n.minimumFractionDigits,n.maximumFractionDigits,n.style,n.unit,n.unitDisplay,this._locale].join("");return o=this._cachedNumberFormatters.get(i),o||(o=new Intl.NumberFormat(this._locale,n),this._cachedNumberFormatters.set(i,o)),o.format(e).replace(" ",ce)}formatNumber(e,t){return this._formatNumberWithGranularity(e,t)}formatInteger(e){return this._formatNumberWithGranularity(e,1)}formatPercent(e){return new Intl.NumberFormat(this._locale,{style:"percent"}).format(e)}formatBytesToKiB(e,t=void 0){return this._formatNumberWithGranularity(e/1024,t)+`${ce}KiB`}formatBytesToMiB(e,t=void 0){return this._formatNumberWithGranularity(e/1048576,t)+`${ce}MiB`}formatBytes(e,t=1){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"byte",unitDisplay:"long"})}formatBytesWithBestUnit(e,t=.1){return e>=1048576?this.formatBytesToMiB(e,t):e>=1024?this.formatBytesToKiB(e,t):this._formatNumberWithGranularity(e,t,{style:"unit",unit:"byte",unitDisplay:"narrow"})}formatKbps(e,t=void 0){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"kilobit-per-second",unitDisplay:"short"})}formatMilliseconds(e,t=void 0){return this._formatNumberWithGranularity(e,t,{style:"unit",unit:"millisecond",unitDisplay:"short"})}formatSeconds(e,t=void 0){return this._formatNumberWithGranularity(e/1e3,t,{style:"unit",unit:"second",unitDisplay:"narrow"})}formatDateTime(e){let t={month:"short",day:"numeric",year:"numeric",hour:"numeric",minute:"numeric",timeZoneName:"short"},n;try{n=new Intl.DateTimeFormat(this._locale,t)}catch{t.timeZone="UTC",n=new Intl.DateTimeFormat(this._locale,t)}return n.format(new Date(e))}formatDuration(e){let t=e/1e3;if(Math.round(t)===0)return"None";let n=[],o={day:60*60*24,hour:60*60,minute:60,second:1};return Object.keys(o).forEach(i=>{let a=o[i],l=Math.floor(t/a);if(l>0){t-=l*a;let s=this._formatNumberWithGranularity(l,1,{style:"unit",unit:i,unitDisplay:"narrow"});n.push(s)}}),n.join(" ")}};function Se(r){let e=r.createComponent("explodeyGauge");return r.find(".lh-exp-gauge-component",e)}function Ce(r,e,t){let n=r.find("div.lh-exp-gauge__wrapper",e);n.className="",n.classList.add("lh-exp-gauge__wrapper",`lh-exp-gauge__wrapper--${E.calculateRating(t.score)}`),bt(r,n,t)}function vt(r,e,t){t=t||r/32;let n=r/t,o=.5*t,i=n+o+t,a=2*Math.PI*n,l=Math.acos(1-.5*Math.pow(.5*t/n,2))*n,s=2*Math.PI*i,c=Math.acos(1-.5*Math.pow(.5*t/i,2))*i;return{radiusInner:n,radiusOuter:i,circumferenceInner:a,circumferenceOuter:s,getArcLength:()=>Math.max(0,Number(e*a)),getMetricArcLength:(d,p=!1)=>{let h=p?0:2*c;return Math.max(0,Number(d*s-o-h))},endDiffInner:l,endDiffOuter:c,strokeWidth:t,strokeGap:o}}function bt(r,e,t){let i=Number(t.score),{radiusInner:a,radiusOuter:l,circumferenceInner:s,circumferenceOuter:c,getArcLength:d,getMetricArcLength:p,endDiffInner:h,endDiffOuter:u,strokeWidth:v,strokeGap:w}=vt(128,i),f=r.find("svg.lh-exp-gauge",e);r.find(".lh-exp-gauge__label",f).textContent=t.title,f.setAttribute("viewBox",[-64,-64/2,128,128/2].join(" ")),f.style.setProperty("--stroke-width",`${v}px`),f.style.setProperty("--circle-meas",(2*Math.PI).toFixed(4));let x=r.find("g.lh-exp-gauge__outer",e),g=r.find("g.lh-exp-gauge__inner",e),b=r.find("circle.lh-cover",x),_=r.find("circle.lh-exp-gauge__arc",g),k=r.find("text.lh-exp-gauge__percentage",g);x.style.setProperty("--scale-initial",String(a/l)),x.style.setProperty("--radius",`${l}px`),b.style.setProperty("--radius",`${.5*(a+l)}px`),b.setAttribute("stroke-width",String(w)),f.style.setProperty("--radius",`${a}px`),_.setAttribute("stroke-dasharray",`${d()} ${(s-d()).toFixed(4)}`),_.setAttribute("stroke-dashoffset",String(.25*s-h)),k.textContent=Math.round(i*100).toString();let T=l+v,C=l-v,F=t.auditRefs.filter(y=>y.group==="metrics"&&y.weight),P=F.reduce((y,L)=>y+=L.weight,0),S=.25*c-u-.5*w,z=-.5*Math.PI;x.querySelectorAll(".metric").forEach(y=>{F.map(R=>`metric--${R.id}`).find(R=>y.classList.contains(R))||y.remove()}),F.forEach((y,L)=>{let D=y.acronym??y.id,R=!x.querySelector(`.metric--${D}`),N=r.maybeFind(`g.metric--${D}`,x)||r.createSVGElement("g"),B=r.maybeFind(`.metric--${D} circle.lh-exp-gauge--faded`,x)||r.createSVGElement("circle"),Z=r.maybeFind(`.metric--${D} circle.lh-exp-gauge--miniarc`,x)||r.createSVGElement("circle"),j=r.maybeFind(`.metric--${D} circle.lh-exp-gauge-hovertarget`,x)||r.createSVGElement("circle"),H=r.maybeFind(`.metric--${D} text.metric__label`,x)||r.createSVGElement("text"),U=r.maybeFind(`.metric--${D} text.metric__value`,x)||r.createSVGElement("text");N.classList.add("metric",`metric--${D}`),B.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge--faded"),Z.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge--miniarc"),j.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge-hovertarget");let q=y.weight/P,he=p(q),ue=y.result.score?y.result.score*q:0,ge=p(ue),Pe=q*c,me=p(q,!0),fe=E.calculateRating(y.result.score,y.result.scoreDisplayMode);N.style.setProperty("--metric-rating",fe),N.style.setProperty("--metric-color",`var(--color-${fe})`),N.style.setProperty("--metric-offset",`${S}`),N.style.setProperty("--i",L.toString()),B.setAttribute("stroke-dasharray",`${he} ${c-he}`),Z.style.setProperty("--metric-array",`${ge} ${c-ge}`),j.setAttribute("stroke-dasharray",`${me} ${c-me-u}`),H.classList.add("metric__label"),U.classList.add("metric__value"),H.textContent=D,U.textContent=`+${Math.round(ue*100)}`;let ve=z+q*Math.PI,Q=Math.cos(ve),X=Math.sin(ve);switch(!0){case Q>0:U.setAttribute("text-anchor","end");break;case Q<0:H.setAttribute("text-anchor","end");break;case Q===0:H.setAttribute("text-anchor","middle"),U.setAttribute("text-anchor","middle");break}switch(!0){case X>0:H.setAttribute("dominant-baseline","hanging");break;case X<0:U.setAttribute("dominant-baseline","hanging");break;case X===0:H.setAttribute("dominant-baseline","middle"),U.setAttribute("dominant-baseline","middle");break}H.setAttribute("x",(T*Q).toFixed(2)),H.setAttribute("y",(T*X).toFixed(2)),U.setAttribute("x",(C*Q).toFixed(2)),U.setAttribute("y",(C*X).toFixed(2)),R&&(N.appendChild(B),N.appendChild(Z),N.appendChild(j),N.appendChild(H),N.appendChild(U),x.appendChild(N)),S-=Pe,z+=q*2*Math.PI});let M=x.querySelector(".lh-exp-gauge-underhovertarget")||r.createSVGElement("circle");M.classList.add("lh-exp-gauge__arc","lh-exp-gauge__arc--metric","lh-exp-gauge-hovertarget","lh-exp-gauge-underhovertarget");let I=p(1,!0);if(M.setAttribute("stroke-dasharray",`${I} ${c-I-u}`),M.isConnected||x.prepend(M),f.dataset.listenersSetup)return;f.dataset.listenersSetup=!0,J(f),f.addEventListener("pointerover",y=>{if(y.target===f&&f.classList.contains("state--expanded")){f.classList.remove("state--expanded"),f.classList.contains("state--highlight")&&(f.classList.remove("state--highlight"),r.find(".metric--highlight",f).classList.remove("metric--highlight"));return}if(!(y.target instanceof Element))return;let L=y.target.parentNode;if(L instanceof SVGElement){if(L&&L===g){f.classList.contains("state--expanded")?f.classList.contains("state--highlight")&&(f.classList.remove("state--highlight"),r.find(".metric--highlight",f).classList.remove("metric--highlight")):f.classList.add("state--expanded");return}if(L&&L.classList&&L.classList.contains("metric")){let D=L.style.getPropertyValue("--metric-rating");if(e.style.setProperty("--color-highlight",`var(--color-${D}-secondary)`),!f.classList.contains("state--highlight"))f.classList.add("state--highlight"),L.classList.add("metric--highlight");else{let R=r.find(".metric--highlight",f);L!==R&&(R.classList.remove("metric--highlight"),L.classList.add("metric--highlight"))}}}}),f.addEventListener("mouseleave",()=>{f.classList.remove("state--highlight"),f.querySelector(".metric--highlight")?.classList.remove("metric--highlight")});async function J(y){if(await new Promise(H=>setTimeout(H,1e3)),y.classList.contains("state--expanded"))return;let L=r.find(".lh-exp-gauge__inner",y),D=`uniq-${Math.random()}`;L.setAttribute("id",D);let R=r.createSVGElement("use");R.setAttribute("href",`#${D}`),y.appendChild(R);let N=2.5;y.style.setProperty("--peek-dur",`${N}s`),y.classList.add("state--peek","state--expanded");let B=()=>{y.classList.remove("state--peek","state--expanded"),R.remove()},Z=setTimeout(()=>{y.removeEventListener("mouseenter",j),B()},N*1e3*1.5);function j(){clearTimeout(Z),B()}y.addEventListener("mouseenter",j,{once:!0})}}var ie=class extends V{_renderMetric(e){let t=this.dom.createComponent("metric"),n=this.dom.find(".lh-metric",t);n.id=e.result.id;let o=E.calculateRating(e.result.score,e.result.scoreDisplayMode);n.classList.add(`lh-metric--${o}`);let i=this.dom.find(".lh-metric__title",t);i.textContent=e.result.title;let a=this.dom.find(".lh-metric__value",t);a.textContent=e.result.displayValue||"";let l=this.dom.find(".lh-metric__description",t);if(l.append(this.dom.convertMarkdownLinkSnippets(e.result.description)),e.result.scoreDisplayMode==="error"){l.textContent="",a.textContent="Error!";let s=this.dom.createChildOf(l,"span");s.textContent=e.result.errorMessage||"Report error: no metric information"}else e.result.scoreDisplayMode==="notApplicable"&&(a.textContent="--");return n}_getScoringCalculatorHref(e){let t=e.filter(p=>p.group==="metrics"),n=e.find(p=>p.id==="interactive"),o=e.find(p=>p.id==="first-cpu-idle"),i=e.find(p=>p.id==="first-meaningful-paint");n&&t.push(n),o&&t.push(o),i&&t.push(i);let a=p=>Math.round(p*100)/100,s=[...t.map(p=>{let h;return typeof p.result.numericValue=="number"?(h=p.id==="cumulative-layout-shift"?a(p.result.numericValue):Math.round(p.result.numericValue),h=h.toString()):h="null",[p.acronym||p.id,h]})];m.reportJson&&(s.push(["device",m.reportJson.configSettings.formFactor]),s.push(["version",m.reportJson.lighthouseVersion]));let c=new URLSearchParams(s),d=new URL("https://googlechrome.github.io/lighthouse/scorecalc/");return d.hash=c.toString(),d.href}_isPerformanceInsight(e){return!e.group}overallImpact(e,t){if(!e.result.metricSavings)return{overallImpact:0,overallLinearImpact:0};let n=0,o=0;for(let[i,a]of Object.entries(e.result.metricSavings)){if(a===void 0)continue;let l=t.find(u=>u.acronym===i);if(!l||l.result.score===null)continue;let s=l.result.numericValue;if(!s)continue;let c=a/s*l.weight;o+=c;let d=l.result.scoringOptions;if(!d)continue;let h=(A.computeLogNormalScore(d,s-a)-l.result.score)*l.weight;n+=h}return{overallImpact:n,overallLinearImpact:o}}render(e,t,n){let o=m.strings,i=this.dom.createElement("div","lh-category");i.id=e.id,i.append(this.renderCategoryHeader(e,t,n));let a=e.auditRefs.filter(g=>g.group==="metrics");if(a.length){let[g,b]=this.renderAuditGroup(t.metrics),_=this.dom.createElement("input","lh-metrics-toggle__input"),k=`lh-metrics-toggle${m.getUniqueSuffix()}`;_.setAttribute("aria-label","Toggle the display of metric descriptions"),_.type="checkbox",_.id=k,g.prepend(_);let T=this.dom.find(".lh-audit-group__header",g),C=this.dom.createChildOf(T,"label","lh-metrics-toggle__label");C.htmlFor=k;let F=this.dom.createChildOf(C,"span","lh-metrics-toggle__labeltext--show"),P=this.dom.createChildOf(C,"span","lh-metrics-toggle__labeltext--hide");F.textContent=m.strings.expandView,P.textContent=m.strings.collapseView;let S=this.dom.createElement("div","lh-metrics-container");if(g.insertBefore(S,b),a.forEach(z=>{S.append(this._renderMetric(z))}),i.querySelector(".lh-gauge__wrapper")){let z=this.dom.find(".lh-category-header__description",i),M=this.dom.createChildOf(z,"div","lh-metrics__disclaimer"),I=this.dom.convertMarkdownLinkSnippets(o.varianceDisclaimer);M.append(I);let J=this.dom.createChildOf(M,"a","lh-calclink");J.target="_blank",J.textContent=o.calculatorLink,this.dom.safelySetHref(J,this._getScoringCalculatorHref(e.auditRefs))}g.classList.add("lh-audit-group--metrics"),i.append(g)}let l=this.dom.createChildOf(i,"div","lh-filmstrip-container"),c=e.auditRefs.find(g=>g.id==="screenshot-thumbnails")?.result;if(c?.details){l.id=c.id;let g=this.detailsRenderer.render(c.details);g&&l.append(g)}let d=a.filter(g=>!!g.relevantAudits);d.length&&this.renderMetricAuditFilter(d,i);let p=e.auditRefs.filter(g=>this._isPerformanceInsight(g)).filter(g=>!E.showAsPassed(g.result)),h=[];if(p.forEach(g=>{let{overallImpact:b,overallLinearImpact:_}=this.overallImpact(g,a),k=g.result.guidanceLevel??1;h.push({auditRef:g,overallImpact:b,overallLinearImpact:_,guidanceLevel:k})}),h.sort((g,b)=>{let _=g.auditRef.result.scoreDisplayMode==="informative"?100:Number(g.auditRef.result.score),k=b.auditRef.result.scoreDisplayMode==="informative"?100:Number(b.auditRef.result.score);return _!==k?_-k:g.overallImpact!==b.overallImpact?b.overallImpact*b.guidanceLevel-g.overallImpact*g.guidanceLevel:g.overallImpact===0&&b.overallImpact===0&&g.overallLinearImpact!==b.overallLinearImpact?b.overallLinearImpact*b.guidanceLevel-g.overallLinearImpact*g.guidanceLevel:b.guidanceLevel-g.guidanceLevel}),h.length){let[g,b]=this.renderAuditGroup(t.diagnostics);h.forEach(_=>g.insertBefore(this.renderAudit(_.auditRef),b)),g.classList.add("lh-audit-group--diagnostics"),i.append(g)}let u=e.auditRefs.filter(g=>this._isPerformanceInsight(g)&&E.showAsPassed(g.result));if(!u.length)return i;let v={auditRefs:u,groupDefinitions:t},w=this.renderClump("passed",v);i.append(w);let f=[];if(["performance-budget","timing-budget"].forEach(g=>{let b=e.auditRefs.find(_=>_.id===g);if(b?.result.details){let _=this.detailsRenderer.render(b.result.details);_&&(_.id=g,_.classList.add("lh-details","lh-details--budget","lh-audit"),f.push(_))}}),f.length>0){let[g,b]=this.renderAuditGroup(t.budgets);f.forEach(_=>g.insertBefore(_,b)),g.classList.add("lh-audit-group--budgets"),i.append(g)}if((!n||n?.gatherMode==="navigation")&&e.score!==null){let g=Se(this.dom);Ce(this.dom,g,e),this.dom.find(".lh-score__gauge",i).replaceWith(g)}return i}renderMetricAuditFilter(e,t){let n=this.dom.createElement("div","lh-metricfilter"),o=this.dom.createChildOf(n,"span","lh-metricfilter__text");o.textContent=m.strings.showRelevantAudits;let i=[{acronym:"All"},...e],a=m.getUniqueSuffix();for(let l of i){let s=`metric-${l.acronym}-${a}`,c=this.dom.createChildOf(n,"input","lh-metricfilter__radio");c.type="radio",c.name=`metricsfilter-${a}`,c.id=s;let d=this.dom.createChildOf(n,"label","lh-metricfilter__label");d.htmlFor=s,d.title=l.result?.title,d.textContent=l.acronym||l.id,l.acronym==="All"&&(c.checked=!0,d.classList.add("lh-metricfilter__label--active")),t.append(n),c.addEventListener("input",p=>{for(let u of t.querySelectorAll("label.lh-metricfilter__label"))u.classList.toggle("lh-metricfilter__label--active",u.htmlFor===s);t.classList.toggle("lh-category--filtered",l.acronym!=="All");for(let u of t.querySelectorAll("div.lh-audit")){if(l.acronym==="All"){u.hidden=!1;continue}u.hidden=!0,l.relevantAudits&&l.relevantAudits.includes(u.id)&&(u.hidden=!1)}let h=t.querySelectorAll("div.lh-audit-group, details.lh-audit-group");for(let u of h){u.hidden=!1;let v=Array.from(u.querySelectorAll("div.lh-audit")),w=!!v.length&&v.every(f=>f.hidden);u.hidden=w}})}}};var ae=class r extends V{render(e,t={}){let n=this.dom.createElement("div","lh-category");n.id=e.id,n.append(this.renderCategoryHeader(e,t));let o=e.auditRefs,i=o.filter(c=>c.result.scoreDisplayMode!=="manual"),a=this._renderAudits(i,t);n.append(a);let l=o.filter(c=>c.result.scoreDisplayMode==="manual"),s=this.renderClump("manual",{auditRefs:l,description:e.manualDescription,openByDefault:!0});return n.append(s),n}renderCategoryScore(e,t){if(e.score===null)return super.renderScoreGauge(e,t);let n=this.dom.createComponent("gaugePwa"),o=this.dom.find("a.lh-gauge--pwa__wrapper",n),i=n.querySelector("svg");if(!i)throw new Error("no SVG element found in PWA score gauge template");r._makeSvgReferencesUnique(i);let a=this._getGroupIds(e.auditRefs),l=this._getPassingGroupIds(e.auditRefs);if(l.size===a.size)o.classList.add("lh-badged--all");else for(let s of l)o.classList.add(`lh-badged--${s}`);return this.dom.find(".lh-gauge__label",n).textContent=e.title,o.title=this._getGaugeTooltip(e.auditRefs,t),n}_getGroupIds(e){let t=e.map(n=>n.group).filter(n=>!!n);return new Set(t)}_getPassingGroupIds(e){let t=this._getGroupIds(e);for(let n of e)!E.showAsPassed(n.result)&&n.group&&t.delete(n.group);return t}_getGaugeTooltip(e,t){let n=this._getGroupIds(e),o=[];for(let i of n){let a=e.filter(d=>d.group===i),l=a.length,s=a.filter(d=>E.showAsPassed(d.result)).length,c=t[i].title;o.push(`${c}: ${s}/${l}`)}return o.join(", ")}_renderAudits(e,t){let n=this.renderUnexpandableClump(e,t),o=this._getPassingGroupIds(e);for(let i of o)this.dom.find(`.lh-audit-group--${i}`,n).classList.add("lh-badged");return n}static _makeSvgReferencesUnique(e){let t=e.querySelector("defs");if(!t)return;let n=m.getUniqueSuffix(),o=t.querySelectorAll("[id]");for(let i of o){let a=i.id,l=`${a}-${n}`;i.id=l;let s=e.querySelectorAll(`use[href="#${a}"]`);for(let d of s)d.setAttribute("href",`#${l}`);let c=e.querySelectorAll(`[fill="url(#${a})"]`);for(let d of c)d.setAttribute("fill",`url(#${l})`)}}};var ne=class{constructor(e){this._dom=e,this._opts={}}renderReport(e,t,n){if(!this._dom.rootEl&&t){console.warn("Please adopt the new report API in renderer/api.js.");let i=t.closest(".lh-root");i?this._dom.rootEl=i:(t.classList.add("lh-root","lh-vars"),this._dom.rootEl=t)}else this._dom.rootEl&&t&&(this._dom.rootEl=t);n&&(this._opts=n),this._dom.setLighthouseChannel(e.configSettings.channel||"unknown");let o=E.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.append(this._renderReport(o)),this._opts.occupyEntireViewport&&this._dom.rootEl.classList.add("lh-max-viewport"),this._dom.rootEl}_renderReportTopbar(e){let t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalDisplayedUrl,n.title=e.finalDisplayedUrl,this._dom.safelySetHref(n,e.finalDisplayedUrl),t}_renderReportHeader(){let e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){let t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=m.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){let n=E.getEmulationDescriptions(e.configSettings||{}),o=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),i=Array.isArray(o)?o[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",a=e.configSettings.channel,l=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[`${m.strings.runtimeSettingsBenchmark}: ${l}`,`${m.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`];n.screenEmulation&&c.push(`${m.strings.runtimeSettingsScreenEmulation}: ${n.screenEmulation}`),s&&c.push(`${m.strings.runtimeSettingsAxeVersion}: ${s}`);let d=m.strings.runtimeAnalysisWindow;e.gatherMode==="timespan"?d=m.strings.runtimeAnalysisWindowTimespan:e.gatherMode==="snapshot"&&(d=m.strings.runtimeAnalysisWindowSnapshot);let p=[["date",`Captured at ${m.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,c.join(`
|
|
2633
|
+
`)],["samples-one",m.strings.runtimeSingleLoad,m.strings.runtimeSingleLoadTooltip],["stopwatch",d],["networkspeed",`${n.summary}`,`${m.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${i}`+(a?` with ${a}`:""),`${m.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],h=this._dom.find(".lh-meta__items",t);for(let[u,v,w]of p){let f=this._dom.createChildOf(h,"li","lh-meta__item");if(f.textContent=v,w){f.classList.add("lh-tooltip-boundary");let x=this._dom.createChildOf(f,"div","lh-tooltip");x.textContent=w}f.classList.add("lh-report-icon",`lh-report-icon--${u}`)}}_renderReportWarnings(e){if(!e.runWarnings||e.runWarnings.length===0)return this._dom.createElement("div");let t=this._dom.createComponent("warningsToplevel"),n=this._dom.find(".lh-warnings__msg",t);n.textContent=m.strings.toplevelWarningsMessage;let o=[];for(let i of e.runWarnings){let a=this._dom.createElement("li");a.append(this._dom.convertMarkdownLinkSnippets(i)),o.push(a)}return this._dom.find("ul",t).append(...o),t}_renderScoreGauges(e,t,n){let o=[],i=[],a=[];for(let l of Object.values(e.categories)){let s=n[l.id]||t,c=s.renderCategoryScore(l,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${l.id}`),d.addEventListener("click",p=>{if(!d.matches('[href^="#"]'))return;let h=d.getAttribute("href"),u=this._dom.rootEl;if(!h||!u)return;let v=this._dom.find(h,u);p.preventDefault(),v.scrollIntoView()}),this._opts.onPageAnchorRendered?.(d)),E.isPluginCategory(l.id)?a.push(c):s.renderCategoryScore===t.renderCategoryScore?o.push(c):i.push(c)}return[...o,...i,...a]}_renderReport(e){m.apply({providedStrings:e.i18n.rendererFormattedStrings,i18n:new oe(e.configSettings.locale),reportJson:e});let t=new te(this._dom,{fullPageScreenshot:e.fullPageScreenshot??void 0,entities:e.entities}),n=new V(this._dom,t),o={performance:new ie(this._dom,t),pwa:new ae(this._dom,t)},i=this._dom.createElement("div");i.append(this._renderReportHeader());let a=this._dom.createElement("div","lh-container"),l=this._dom.createElement("div","lh-report");l.append(this._renderReportWarnings(e));let s;Object.keys(e.categories).length===1?i.classList.add("lh-header--solo-category"):s=this._dom.createElement("div","lh-scores-header");let d=this._dom.createElement("div");if(d.classList.add("lh-scorescale-wrap"),d.append(this._dom.createComponent("scorescale")),s){let v=this._dom.find(".lh-scores-container",i);s.append(...this._renderScoreGauges(e,n,o)),v.append(s,d);let w=this._dom.createElement("div","lh-sticky-header");w.append(...this._renderScoreGauges(e,n,o)),a.append(w)}let p=this._dom.createElement("div","lh-categories");l.append(p);let h={gatherMode:e.gatherMode};for(let v of Object.values(e.categories)){let w=o[v.id]||n;w.dom.createChildOf(p,"div","lh-category-wrapper").append(w.render(v,e.categoryGroups,h))}n.injectFinalScreenshot(p,e.audits,d);let u=this._dom.createFragment();return this._opts.omitGlobalStyles||u.append(this._dom.createComponent("styles")),this._opts.omitTopbar||u.append(this._renderReportTopbar(e)),u.append(a),l.append(this._renderReportFooter(e)),a.append(i,l),e.fullPageScreenshot&&O.installFullPageScreenshot(this._dom.rootEl,e.fullPageScreenshot.screenshot),u}};function K(r,e){let t=r.rootEl;typeof e>"u"?t.classList.toggle("lh-dark"):t.classList.toggle("lh-dark",e)}var _t=typeof btoa<"u"?btoa:r=>Buffer.from(r).toString("base64"),wt=typeof atob<"u"?atob:r=>Buffer.from(r,"base64").toString();async function yt(r,e){let t=new TextEncoder().encode(r);if(e.gzip)if(typeof CompressionStream<"u"){let i=new CompressionStream("gzip"),a=i.writable.getWriter();a.write(t),a.close();let l=await new Response(i.readable).arrayBuffer();t=new Uint8Array(l)}else t=window.pako.gzip(r);let n="",o=5e3;for(let i=0;i<t.length;i+=o)n+=String.fromCharCode(...t.subarray(i,i+o));return _t(n)}function xt(r,e){let t=wt(r),n=Uint8Array.from(t,o=>o.charCodeAt(0));return e.gzip?window.pako.ungzip(n,{to:"string"}):new TextDecoder().decode(n)}var ze={toBase64:yt,fromBase64:xt};function de(){let r=window.location.host.endsWith(".vercel.app"),e=new URLSearchParams(window.location.search).has("dev");return r?`https://${window.location.host}/gh-pages`:e?"http://localhost:7333":"https://googlechrome.github.io/lighthouse"}function pe(r){let e=r.generatedTime,t=r.fetchTime||e;return`${r.lighthouseVersion}-${r.finalDisplayedUrl}-${t}`}function Et(r,e,t){let n=new URL(e).origin;window.addEventListener("message",function i(a){a.origin===n&&o&&a.data.opened&&(o.postMessage(r,n),window.removeEventListener("message",i))});let o=window.open(e,t)}async function Le(r,e,t){let n=new URL(e),o=!!window.CompressionStream;n.hash=await ze.toBase64(JSON.stringify(r),{gzip:o}),o&&n.searchParams.set("gzip","1"),window.open(n.toString(),t)}async function Me(r){let e="viewer-"+pe(r),t=de()+"/viewer/";await Le({lhr:r},t,e)}async function Te(r){let e="viewer-"+pe(r),t=de()+"/viewer/";Et({lhr:r},t,e)}function Fe(r){if(!r.audits["script-treemap-data"].details)throw new Error("no script treemap data found");let t={lhr:{mainDocumentUrl:r.mainDocumentUrl,finalUrl:r.finalUrl,finalDisplayedUrl:r.finalDisplayedUrl,audits:{"script-treemap-data":r.audits["script-treemap-data"]},configSettings:{locale:r.configSettings.locale}}},n=de()+"/treemap/",o="treemap-"+pe(r);Le(t,n,o)}var le=class{constructor(e){this._dom=e,this._toggleEl,this._menuEl,this.onDocumentKeyDown=this.onDocumentKeyDown.bind(this),this.onToggleClick=this.onToggleClick.bind(this),this.onToggleKeydown=this.onToggleKeydown.bind(this),this.onMenuFocusOut=this.onMenuFocusOut.bind(this),this.onMenuKeydown=this.onMenuKeydown.bind(this),this._getNextMenuItem=this._getNextMenuItem.bind(this),this._getNextSelectableNode=this._getNextSelectableNode.bind(this),this._getPreviousMenuItem=this._getPreviousMenuItem.bind(this)}setup(e){this._toggleEl=this._dom.find(".lh-topbar button.lh-tools__button",this._dom.rootEl),this._toggleEl.addEventListener("click",this.onToggleClick),this._toggleEl.addEventListener("keydown",this.onToggleKeydown),this._menuEl=this._dom.find(".lh-topbar div.lh-tools__dropdown",this._dom.rootEl),this._menuEl.addEventListener("keydown",this.onMenuKeydown),this._menuEl.addEventListener("click",e)}close(){this._toggleEl.classList.remove("lh-active"),this._toggleEl.setAttribute("aria-expanded","false"),this._menuEl.contains(this._dom.document().activeElement)&&this._toggleEl.focus(),this._menuEl.removeEventListener("focusout",this.onMenuFocusOut),this._dom.document().removeEventListener("keydown",this.onDocumentKeyDown)}open(e){this._toggleEl.classList.contains("lh-active")?e.focus():this._menuEl.addEventListener("transitionend",()=>{e.focus()},{once:!0}),this._toggleEl.classList.add("lh-active"),this._toggleEl.setAttribute("aria-expanded","true"),this._menuEl.addEventListener("focusout",this.onMenuFocusOut),this._dom.document().addEventListener("keydown",this.onDocumentKeyDown)}onToggleClick(e){e.preventDefault(),e.stopImmediatePropagation(),this._toggleEl.classList.contains("lh-active")?this.close():this.open(this._getNextMenuItem())}onToggleKeydown(e){switch(e.code){case"ArrowUp":e.preventDefault(),this.open(this._getPreviousMenuItem());break;case"ArrowDown":case"Enter":case" ":e.preventDefault(),this.open(this._getNextMenuItem());break;default:}}onMenuKeydown(e){let t=e.target;switch(e.code){case"ArrowUp":e.preventDefault(),this._getPreviousMenuItem(t).focus();break;case"ArrowDown":e.preventDefault(),this._getNextMenuItem(t).focus();break;case"Home":e.preventDefault(),this._getNextMenuItem().focus();break;case"End":e.preventDefault(),this._getPreviousMenuItem().focus();break;default:}}onDocumentKeyDown(e){e.keyCode===27&&this.close()}onMenuFocusOut(e){let t=e.relatedTarget;this._menuEl.contains(t)||this.close()}_getNextSelectableNode(e,t){let n=e.filter(i=>!(!(i instanceof HTMLElement)||i.hasAttribute("disabled")||window.getComputedStyle(i).display==="none")),o=t?n.indexOf(t)+1:0;return o>=n.length&&(o=0),n[o]}_getNextMenuItem(e){let t=Array.from(this._menuEl.childNodes);return this._getNextSelectableNode(t,e)}_getPreviousMenuItem(e){let t=Array.from(this._menuEl.childNodes).reverse();return this._getNextSelectableNode(t,e)}};var se=class{constructor(e,t){this.lhr,this._reportUIFeatures=e,this._dom=t,this._dropDownMenu=new le(this._dom),this._copyAttempt=!1,this.topbarEl,this.categoriesEl,this.stickyHeaderEl,this.highlightEl,this.onDropDownMenuClick=this.onDropDownMenuClick.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onCopy=this.onCopy.bind(this),this.collapseAllDetails=this.collapseAllDetails.bind(this)}enable(e){this.lhr=e,this._dom.rootEl.addEventListener("keyup",this.onKeyUp),this._dom.document().addEventListener("copy",this.onCopy),this._dropDownMenu.setup(this.onDropDownMenuClick),this._setUpCollapseDetailsAfterPrinting(),this._dom.find(".lh-topbar__logo",this._dom.rootEl).addEventListener("click",()=>K(this._dom)),this._setupStickyHeader()}onDropDownMenuClick(e){e.preventDefault();let t=e.target;if(!(!t||!t.hasAttribute("data-action"))){switch(t.getAttribute("data-action")){case"copy":this.onCopyButtonClick();break;case"print-summary":this.collapseAllDetails(),this._print();break;case"print-expanded":this.expandAllDetails(),this._print();break;case"save-json":{let n=JSON.stringify(this.lhr,null,2);this._reportUIFeatures._saveFile(new Blob([n],{type:"application/json"}));break}case"save-html":{let n=this._reportUIFeatures.getReportHtml();try{this._reportUIFeatures._saveFile(new Blob([n],{type:"text/html"}))}catch(o){this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"error",msg:"Could not export as HTML. "+o.message})}break}case"open-viewer":{this._dom.isDevTools()?Me(this.lhr):Te(this.lhr);break}case"save-gist":{this._reportUIFeatures.saveAsGist();break}case"toggle-dark":{K(this._dom);break}case"view-unthrottled-trace":this._reportUIFeatures._opts.onViewTrace?.()}this._dropDownMenu.close()}}onCopy(e){this._copyAttempt&&e.clipboardData&&(e.preventDefault(),e.clipboardData.setData("text/plain",JSON.stringify(this.lhr,null,2)),this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"log",msg:"Report JSON copied to clipboard"})),this._copyAttempt=!1}onCopyButtonClick(){this._dom.fireEventOn("lh-analytics",this._dom.document(),{cmd:"send",fields:{hitType:"event",eventCategory:"report",eventAction:"copy"}});try{this._dom.document().queryCommandSupported("copy")&&(this._copyAttempt=!0,this._dom.document().execCommand("copy")||(this._copyAttempt=!1,this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"warn",msg:"Your browser does not support copy to clipboard."})))}catch(e){this._copyAttempt=!1,this._dom.fireEventOn("lh-log",this._dom.document(),{cmd:"log",msg:e.message})}}onKeyUp(e){(e.ctrlKey||e.metaKey)&&e.keyCode===80&&this._dropDownMenu.close()}expandAllDetails(){this._dom.findAll(".lh-categories details",this._dom.rootEl).map(t=>t.open=!0)}collapseAllDetails(){this._dom.findAll(".lh-categories details",this._dom.rootEl).map(t=>t.open=!1)}_print(){this._reportUIFeatures._opts.onPrintOverride?this._reportUIFeatures._opts.onPrintOverride(this._dom.rootEl):self.print()}resetUIState(){this._dropDownMenu.close()}_getScrollParent(e){let{overflowY:t}=window.getComputedStyle(e);return t!=="visible"&&t!=="hidden"?e:e.parentElement?this._getScrollParent(e.parentElement):document}_setUpCollapseDetailsAfterPrinting(){"onbeforeprint"in self?self.addEventListener("afterprint",this.collapseAllDetails):self.matchMedia("print").addListener(t=>{t.matches?this.expandAllDetails():this.collapseAllDetails()})}_setupStickyHeader(){this.topbarEl=this._dom.find("div.lh-topbar",this._dom.rootEl),this.categoriesEl=this._dom.find("div.lh-categories",this._dom.rootEl),window.requestAnimationFrame(()=>window.requestAnimationFrame(()=>{try{this.stickyHeaderEl=this._dom.find("div.lh-sticky-header",this._dom.rootEl)}catch{return}this.highlightEl=this._dom.createChildOf(this.stickyHeaderEl,"div","lh-highlighter");let e=this._getScrollParent(this._dom.find(".lh-container",this._dom.rootEl));e.addEventListener("scroll",()=>this._updateStickyHeader());let t=e instanceof window.Document?document.documentElement:e;new window.ResizeObserver(()=>this._updateStickyHeader()).observe(t)}))}_updateStickyHeader(){if(!this.stickyHeaderEl)return;let e=this.topbarEl.getBoundingClientRect().bottom,t=this.categoriesEl.getBoundingClientRect().top,n=e>=t,i=Array.from(this._dom.rootEl.querySelectorAll(".lh-category")).filter(p=>p.getBoundingClientRect().top-window.innerHeight/2<0),a=i.length>0?i.length-1:0,l=this.stickyHeaderEl.querySelectorAll(".lh-gauge__wrapper, .lh-fraction__wrapper"),s=l[a],c=l[0].getBoundingClientRect().left,d=s.getBoundingClientRect().left-c;this.highlightEl.style.transform=`translate(${d}px)`,this.stickyHeaderEl.classList.toggle("lh-sticky-header--visible",n)}};function kt(r,e){let t=e?new Date(e):new Date,n=t.toLocaleTimeString("en-US",{hour12:!1}),o=t.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}).split("/");o.unshift(o.pop());let i=o.join("-");return`${r}_${i}_${n}`.replace(/[/?<>\\:*|"]/g,"-")}function De(r){let e=new URL(r.finalDisplayedUrl).hostname;return kt(e,r.fetchTime)}function At(r){return Array.from(r.tBodies[0].rows)}var re=class{constructor(e,t={}){this.json,this._dom=e,this._opts=t,this._topbar=t.omitTopbar?null:new se(this,e),this.onMediaQueryChange=this.onMediaQueryChange.bind(this)}initFeatures(e){this.json=e,this._fullPageScreenshot=A.getFullPageScreenshot(e),this._topbar&&(this._topbar.enable(e),this._topbar.resetUIState()),this._setupMediaQueryListeners(),this._setupThirdPartyFilter(),this._setupElementScreenshotOverlay(this._dom.rootEl);let t=this._dom.isDevTools()||this._opts.disableDarkMode||this._opts.disableAutoDarkModeAndFireworks;!t&&window.matchMedia("(prefers-color-scheme: dark)").matches&&K(this._dom,!0);let o=["performance","accessibility","best-practices","seo"].every(s=>{let c=e.categories[s];return c&&c.score===1}),i=this._opts.disableFireworks||this._opts.disableAutoDarkModeAndFireworks;if(o&&!i&&(this._enableFireworks(),t||K(this._dom,!0)),e.categories.performance&&e.categories.performance.auditRefs.some(s=>!!(s.group==="metrics"&&e.audits[s.id].errorMessage))){let s=this._dom.find("input.lh-metrics-toggle__input",this._dom.rootEl);s.checked=!0}this.json.audits["script-treemap-data"]&&this.json.audits["script-treemap-data"].details&&this.addButton({text:m.strings.viewTreemapLabel,icon:"treemap",onClick:()=>Fe(this.json)}),this._opts.onViewTrace&&(e.configSettings.throttlingMethod==="simulate"?this._dom.find('a[data-action="view-unthrottled-trace"]',this._dom.rootEl).classList.remove("lh-hidden"):this.addButton({text:m.strings.viewTraceLabel,onClick:()=>this._opts.onViewTrace?.()})),this._opts.getStandaloneReportHTML&&this._dom.find('a[data-action="save-html"]',this._dom.rootEl).classList.remove("lh-hidden");for(let s of this._dom.findAll("[data-i18n]",this._dom.rootEl)){let d=s.getAttribute("data-i18n");s.textContent=m.strings[d]}}addButton(e){let t=this._dom.rootEl.querySelector(".lh-audit-group--metrics");if(!t)return;let n=t.querySelector(".lh-buttons");n||(n=this._dom.createChildOf(t,"div","lh-buttons"));let o=["lh-button"];e.icon&&(o.push("lh-report-icon"),o.push(`lh-report-icon--${e.icon}`));let i=this._dom.createChildOf(n,"button",o.join(" "));return i.textContent=e.text,i.addEventListener("click",e.onClick),i}resetUIState(){this._topbar&&this._topbar.resetUIState()}getReportHtml(){if(!this._opts.getStandaloneReportHTML)throw new Error("`getStandaloneReportHTML` is not set");return this.resetUIState(),this._opts.getStandaloneReportHTML()}saveAsGist(){throw new Error("Cannot save as gist from base report")}_enableFireworks(){this._dom.find(".lh-scores-container",this._dom.rootEl).classList.add("lh-score100")}_setupMediaQueryListeners(){let e=self.matchMedia("(max-width: 500px)");e.addListener(this.onMediaQueryChange),this.onMediaQueryChange(e)}_resetUIState(){this._topbar&&this._topbar.resetUIState()}onMediaQueryChange(e){this._dom.rootEl.classList.toggle("lh-narrow",e.matches)}_setupThirdPartyFilter(){let e=["uses-rel-preconnect","third-party-facades"],t=["legacy-javascript"];Array.from(this._dom.rootEl.querySelectorAll("table.lh-table")).filter(i=>i.querySelector("td.lh-table-column--url, td.lh-table-column--source-location")).filter(i=>{let a=i.closest(".lh-audit");if(!a)throw new Error(".lh-table not within audit");return!e.includes(a.id)}).forEach(i=>{let a=At(i),l=a.filter(f=>!f.classList.contains("lh-sub-item-row")),s=this._getThirdPartyRows(l,A.getFinalDisplayedUrl(this.json)),c=a.some(f=>f.classList.contains("lh-row--even")),d=this._dom.createComponent("3pFilter"),p=this._dom.find("input",d);p.addEventListener("change",f=>{let x=f.target instanceof HTMLInputElement&&!f.target.checked,g=!0,b=l[0];for(;b;){let _=x&&s.includes(b);do b.classList.toggle("lh-row--hidden",_),c&&(b.classList.toggle("lh-row--even",!_&&g),b.classList.toggle("lh-row--odd",!_&&!g)),b=b.nextElementSibling;while(b&&b.classList.contains("lh-sub-item-row"));_||(g=!g)}});let h=s.filter(f=>!f.classList.contains("lh-row--group")).length;this._dom.find(".lh-3p-filter-count",d).textContent=`${h}`,this._dom.find(".lh-3p-ui-string",d).textContent=m.strings.thirdPartyResourcesLabel;let u=s.length===l.length,v=!s.length;if((u||v)&&(this._dom.find("div.lh-3p-filter",d).hidden=!0),!i.parentNode)return;i.parentNode.insertBefore(d,i);let w=i.closest(".lh-audit");if(!w)throw new Error(".lh-table not within audit");t.includes(w.id)&&!u&&p.click()})}_setupElementScreenshotOverlay(e){this._fullPageScreenshot&&O.installOverlayFeature({dom:this._dom,rootEl:e,overlayContainerEl:e,fullPageScreenshot:this._fullPageScreenshot})}_getThirdPartyRows(e,t){let n=A.getEntityFromUrl(t,this.json.entities),o=this.json.entities?.find(a=>a.isFirstParty===!0)?.name,i=[];for(let a of e){if(o){if(!a.dataset.entity||a.dataset.entity===o)continue}else{let l=a.querySelector("div.lh-text__url");if(!l)continue;let s=l.dataset.url;if(!s||!(A.getEntityFromUrl(s,this.json.entities)!==n))continue}i.push(a)}return i}_saveFile(e){let t=e.type.match("json")?".json":".html",n=De({finalDisplayedUrl:A.getFinalDisplayedUrl(this.json),fetchTime:this.json.fetchTime})+t;this._opts.onSaveFileOverride?this._opts.onSaveFileOverride(e,n):this._dom.saveFile(e,n)}};function St(r,e={}){let t=document.createElement("article");t.classList.add("lh-root","lh-vars");let n=new Y(t.ownerDocument,t);return new ne(n).renderReport(r,t,e),new re(n,e).initFeatures(r),t}function Ct(r,e){return{lhr:r,missingIcuMessageIds:[]}}function zt(r,e){}function Lt(r){return!1}var Mt={registerLocaleData:zt,hasLocale:Lt};export{Y as DOM,ne as ReportRenderer,re as ReportUIFeatures,Mt as format,St as renderReport,Ct as swapLocale};
|
|
2634
2634
|
/**
|
|
2635
2635
|
* @license
|
|
2636
2636
|
* Copyright 2017 Google LLC
|
package/dist/report/flow.js
CHANGED
|
@@ -1313,16 +1313,16 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
|
|
|
1313
1313
|
}
|
|
1314
1314
|
|
|
1315
1315
|
.lh-filmstrip {
|
|
1316
|
-
display:
|
|
1316
|
+
display: flex;
|
|
1317
1317
|
justify-content: space-between;
|
|
1318
|
-
|
|
1318
|
+
justify-items: center;
|
|
1319
|
+
margin-bottom: var(--default-padding);
|
|
1319
1320
|
width: 100%;
|
|
1320
|
-
grid-template-columns: repeat(auto-fit, 90px);
|
|
1321
1321
|
}
|
|
1322
1322
|
|
|
1323
1323
|
.lh-filmstrip__frame {
|
|
1324
|
-
|
|
1325
|
-
|
|
1324
|
+
overflow: hidden;
|
|
1325
|
+
line-height: 0;
|
|
1326
1326
|
}
|
|
1327
1327
|
|
|
1328
1328
|
.lh-filmstrip__thumbnail {
|
|
@@ -1239,16 +1239,16 @@
|
|
|
1239
1239
|
}
|
|
1240
1240
|
|
|
1241
1241
|
.lh-filmstrip {
|
|
1242
|
-
display:
|
|
1242
|
+
display: flex;
|
|
1243
1243
|
justify-content: space-between;
|
|
1244
|
-
|
|
1244
|
+
justify-items: center;
|
|
1245
|
+
margin-bottom: var(--default-padding);
|
|
1245
1246
|
width: 100%;
|
|
1246
|
-
grid-template-columns: repeat(auto-fit, 90px);
|
|
1247
1247
|
}
|
|
1248
1248
|
|
|
1249
1249
|
.lh-filmstrip__frame {
|
|
1250
|
-
|
|
1251
|
-
|
|
1250
|
+
overflow: hidden;
|
|
1251
|
+
line-height: 0;
|
|
1252
1252
|
}
|
|
1253
1253
|
|
|
1254
1254
|
.lh-filmstrip__thumbnail {
|
package/package.json
CHANGED
package/report/assets/styles.css
CHANGED
|
@@ -884,16 +884,16 @@
|
|
|
884
884
|
}
|
|
885
885
|
|
|
886
886
|
.lh-filmstrip {
|
|
887
|
-
display:
|
|
887
|
+
display: flex;
|
|
888
888
|
justify-content: space-between;
|
|
889
|
-
|
|
889
|
+
justify-items: center;
|
|
890
|
+
margin-bottom: var(--default-padding);
|
|
890
891
|
width: 100%;
|
|
891
|
-
grid-template-columns: repeat(auto-fit, 90px);
|
|
892
892
|
}
|
|
893
893
|
|
|
894
894
|
.lh-filmstrip__frame {
|
|
895
|
-
|
|
896
|
-
|
|
895
|
+
overflow: hidden;
|
|
896
|
+
line-height: 0;
|
|
897
897
|
}
|
|
898
898
|
|
|
899
899
|
.lh-filmstrip__thumbnail {
|
|
@@ -504,7 +504,7 @@ function createSnippetLineComponent(dom) {
|
|
|
504
504
|
function createStylesComponent(dom) {
|
|
505
505
|
const el0 = dom.createFragment();
|
|
506
506
|
const el1 = dom.createElement("style");
|
|
507
|
-
el1.append("/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/*\n Naming convention:\n\n If a variable is used for a specific component: --{component}-{property name}-{modifier}\n\n Both {component} and {property name} should be kebab-case. If the target is the entire page,\n use 'report' for the component. The property name should not be abbreviated. Use the\n property name the variable is intended for - if it's used for multiple, a common descriptor\n is fine (ex: 'size' for a variable applied to 'width' and 'height'). If a variable is shared\n across multiple components, either create more variables or just drop the \"{component}-\"\n part of the name. Append any modifiers at the end (ex: 'big', 'dark').\n\n For colors: --color-{hue}-{intensity}\n\n {intensity} is the Material Design tag - 700, A700, etc.\n*/\n.lh-vars {\n /* Palette using Material Design Colors\n * https://www.materialui.co/colors */\n --color-amber-50: #FFF8E1;\n --color-blue-200: #90CAF9;\n --color-blue-900: #0D47A1;\n --color-blue-A700: #2962FF;\n --color-blue-primary: #06f;\n --color-cyan-500: #00BCD4;\n --color-gray-100: #F5F5F5;\n --color-gray-300: #CFCFCF;\n --color-gray-200: #E0E0E0;\n --color-gray-400: #BDBDBD;\n --color-gray-50: #FAFAFA;\n --color-gray-500: #9E9E9E;\n --color-gray-600: #757575;\n --color-gray-700: #616161;\n --color-gray-800: #424242;\n --color-gray-900: #212121;\n --color-gray: #000000;\n --color-green-700: #080;\n --color-green: #0c6;\n --color-lime-400: #D3E156;\n --color-orange-50: #FFF3E0;\n --color-orange-700: #C33300;\n --color-orange: #fa3;\n --color-red-700: #c00;\n --color-red: #f33;\n --color-teal-600: #00897B;\n --color-white: #FFFFFF;\n\n /* Context-specific colors */\n --color-average-secondary: var(--color-orange-700);\n --color-average: var(--color-orange);\n --color-fail-secondary: var(--color-red-700);\n --color-fail: var(--color-red);\n --color-hover: var(--color-gray-50);\n --color-informative: var(--color-blue-900);\n --color-pass-secondary: var(--color-green-700);\n --color-pass: var(--color-green);\n --color-not-applicable: var(--color-gray-600);\n\n /* Component variables */\n --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));\n --audit-explanation-line-height: 16px;\n --audit-group-margin-bottom: calc(var(--default-padding) * 6);\n --audit-group-padding-vertical: 8px;\n --audit-margin-horizontal: 5px;\n --audit-padding-vertical: 8px;\n --category-padding: calc(var(--default-padding) * 6) var(--edge-gap-padding) calc(var(--default-padding) * 4);\n --chevron-line-stroke: var(--color-gray-600);\n --chevron-size: 12px;\n --default-padding: 8px;\n --edge-gap-padding: calc(var(--default-padding) * 4);\n --env-item-background-color: var(--color-gray-100);\n --env-item-font-size: 28px;\n --env-item-line-height: 36px;\n --env-item-padding: 10px 0px;\n --env-name-min-width: 220px;\n --footer-padding-vertical: 16px;\n --gauge-circle-size-big: 96px;\n --gauge-circle-size: 48px;\n --gauge-circle-size-sm: 32px;\n --gauge-label-font-size-big: 18px;\n --gauge-label-font-size: var(--report-font-size-secondary);\n --gauge-label-line-height-big: 24px;\n --gauge-label-line-height: var(--report-line-height-secondary);\n --gauge-percentage-font-size-big: 38px;\n --gauge-percentage-font-size: var(--report-font-size-secondary);\n --gauge-wrapper-width: 120px;\n --header-line-height: 24px;\n --highlighter-background-color: var(--report-text-color);\n --icon-square-size: calc(var(--score-icon-size) * 0.88);\n --image-preview-size: 48px;\n --link-color: var(--color-blue-primary);\n --locale-selector-background-color: var(--color-white);\n --metric-toggle-lines-fill: #7F7F7F;\n --metric-value-font-size: calc(var(--report-font-size) * 1.8);\n --metrics-toggle-background-color: var(--color-gray-200);\n --plugin-badge-background-color: var(--color-white);\n --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);\n --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);\n --plugin-icon-size: 65%;\n --pwa-icon-margin: 0 var(--default-padding);\n --pwa-icon-size: var(--topbar-logo-size);\n --report-background-color: #fff;\n --report-border-color-secondary: #ebebeb;\n --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: Roboto, Helvetica, Arial, sans-serif;\n --report-font-size: 14px;\n --report-font-size-secondary: 12px;\n --report-icon-size: var(--score-icon-background-size);\n --report-line-height: 24px;\n --report-line-height-secondary: 20px;\n --report-monospace-font-size: calc(var(--report-font-size) * 0.85);\n --report-text-color-secondary: var(--color-gray-800);\n --report-text-color: var(--color-gray-900);\n --report-content-max-width: calc(60 * var(--report-font-size)); /* defaults to 840px */\n --report-content-min-width: 360px;\n --report-content-max-width-minus-edge-gap: calc(var(--report-content-max-width) - var(--edge-gap-padding) * 2);\n --score-container-padding: 8px;\n --score-icon-background-size: 24px;\n --score-icon-margin-left: 6px;\n --score-icon-margin-right: 14px;\n --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);\n --score-icon-size: 12px;\n --score-icon-size-big: 16px;\n --screenshot-overlay-background: rgba(0, 0, 0, 0.3);\n --section-padding-vertical: calc(var(--default-padding) * 6);\n --snippet-background-color: var(--color-gray-50);\n --snippet-color: #0938C2;\n --stackpack-padding-horizontal: 10px;\n --sticky-header-background-color: var(--report-background-color);\n --sticky-header-buffer: var(--topbar-height);\n --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2 + 1em);\n --table-group-header-background-color: #EEF1F4;\n --table-group-header-text-color: var(--color-gray-700);\n --table-higlight-background-color: #F5F7FA;\n --tools-icon-color: var(--color-gray-600);\n --topbar-background-color: var(--color-white);\n --topbar-height: 32px;\n --topbar-logo-size: 24px;\n --topbar-padding: 0 8px;\n --toplevel-warning-background-color: hsla(30, 100%, 75%, 10%);\n --toplevel-warning-message-text-color: var(--color-average-secondary);\n --toplevel-warning-padding: 18px;\n --toplevel-warning-text-color: var(--report-text-color);\n\n /* SVGs */\n --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23FFFFFF\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23757575\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n\n --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>check</title><path fill=\"%23178239\" d=\"M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z\"/></svg>');\n --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>info</title><path fill=\"%23E67700\" d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z\"/></svg>');\n --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>warn</title><path fill=\"%23C7221F\" d=\"M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z\"/></svg>');\n --error-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 3 15\"><title>error</title><path d=\"M0 15H 3V 12H 0V\" fill=\"%23FF4E42\"/><path d=\"M0 9H 3V 0H 0V\" fill=\"%23FF4E42\"/></svg>');\n\n --pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23DAE0E3\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23DAE0E3\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23424242\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23424242\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"nonzero\" fill=\"none\"><circle fill=\"%230CCE6B\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%230CCE6B\" width=\"24\" height=\"24\" rx=\"12\"/><path d=\"M5 5h14v14H5z\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/></g></svg>');\n\n --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z\"/></svg>');\n}\n\n@media not print {\n .lh-dark {\n /* Pallete */\n --color-gray-200: var(--color-gray-800);\n --color-gray-300: #616161;\n --color-gray-400: var(--color-gray-600);\n --color-gray-700: var(--color-gray-400);\n --color-gray-50: #757575;\n --color-gray-600: var(--color-gray-500);\n --color-green-700: var(--color-green);\n --color-orange-700: var(--color-orange);\n --color-red-700: var(--color-red);\n --color-teal-600: var(--color-cyan-500);\n\n /* Context-specific colors */\n --color-hover: rgba(0, 0, 0, 0.2);\n --color-informative: var(--color-blue-200);\n\n /* Component variables */\n --env-item-background-color: #393535;\n --link-color: var(--color-blue-200);\n --locale-selector-background-color: var(--color-gray-200);\n --plugin-badge-background-color: var(--color-gray-800);\n --report-background-color: var(--color-gray-900);\n --report-border-color-secondary: var(--color-gray-200);\n --report-text-color-secondary: var(--color-gray-400);\n --report-text-color: var(--color-gray-100);\n --snippet-color: var(--color-cyan-500);\n --topbar-background-color: var(--color-gray);\n --toplevel-warning-background-color: hsl(33deg 14% 18%);\n --toplevel-warning-message-text-color: var(--color-orange-700);\n --toplevel-warning-text-color: var(--color-gray-100);\n --table-group-header-background-color: rgba(186, 196, 206, 0.15);\n --table-group-header-text-color: var(--color-gray-100);\n --table-higlight-background-color: rgba(186, 196, 206, 0.09);\n\n /* SVGs */\n --plugin-icon-url: var(--plugin-icon-url-dark);\n --pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);\n --pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);\n }\n}\n\n@media only screen and (max-width: 480px) {\n .lh-vars {\n --audit-group-margin-bottom: 20px;\n --edge-gap-padding: var(--default-padding);\n --env-name-min-width: 120px;\n --gauge-circle-size-big: 96px;\n --gauge-circle-size: 72px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 112px;\n --header-padding: 16px 0 16px 0;\n --image-preview-size: 24px;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-size: 14px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --topbar-height: 28px;\n --topbar-logo-size: 20px;\n }\n}\n\n.lh-vars.lh-devtools {\n --audit-explanation-line-height: 14px;\n --audit-group-margin-bottom: 20px;\n --audit-group-padding-vertical: 12px;\n --audit-padding-vertical: 4px;\n --category-padding: 12px;\n --default-padding: 12px;\n --env-name-min-width: 120px;\n --footer-padding-vertical: 8px;\n --gauge-circle-size-big: 72px;\n --gauge-circle-size: 64px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 97px;\n --header-line-height: 20px;\n --header-padding: 16px 0 16px 0;\n --screenshot-overlay-background: transparent;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;\n --report-font-size: 12px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --section-padding-vertical: 8px;\n}\n\n.lh-container:has(.lh-sticky-header) {\n --sticky-header-buffer: calc(var(--topbar-height) + var(--sticky-header-height));\n}\n\n.lh-container:not(.lh-topbar + .lh-container) {\n --topbar-height: 0;\n --sticky-header-height: 0;\n --sticky-header-buffer: 0;\n}\n\n.lh-max-viewport {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n}\n\n.lh-devtools.lh-root {\n height: 100%;\n}\n.lh-devtools.lh-root img {\n /* Override devtools default 'min-width: 0' so svg without size in a flexbox isn't collapsed. */\n min-width: auto;\n}\n.lh-devtools .lh-container {\n overflow-y: scroll;\n height: calc(100% - var(--topbar-height));\n /** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */\n --sticky-header-buffer: 0;\n}\n.lh-devtools .lh-container:has(.lh-sticky-header) {\n /** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */\n --sticky-header-buffer: var(--sticky-header-height);\n}\n@media print {\n .lh-devtools .lh-container {\n overflow: unset;\n }\n}\n.lh-devtools .lh-sticky-header {\n /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */\n top: 0;\n}\n.lh-devtools .lh-element-screenshot__overlay {\n position: absolute;\n}\n\n@keyframes fadeIn {\n 0% { opacity: 0;}\n 100% { opacity: 0.6;}\n}\n\n.lh-root *, .lh-root *::before, .lh-root *::after {\n box-sizing: border-box;\n}\n\n.lh-root {\n font-family: var(--report-font-family);\n font-size: var(--report-font-size);\n margin: 0;\n line-height: var(--report-line-height);\n background: var(--report-background-color);\n color: var(--report-text-color);\n}\n\n.lh-root :focus-visible {\n outline: -webkit-focus-ring-color auto 3px;\n}\n.lh-root summary:focus {\n outline: none;\n box-shadow: 0 0 0 1px hsl(217, 89%, 61%);\n}\n\n.lh-root [hidden] {\n display: none !important;\n}\n\n.lh-root pre {\n margin: 0;\n}\n\n.lh-root pre,\n.lh-root code {\n font-family: var(--report-font-family-monospace);\n}\n\n.lh-root details > summary {\n cursor: pointer;\n}\n\n.lh-hidden {\n display: none !important;\n}\n\n.lh-container {\n /*\n Text wrapping in the report is so much FUN!\n We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely\n long non-breakable text (usually URLs) found in:\n 1. The footer\n 2. .lh-node (outerHTML)\n 3. .lh-code\n\n With that sorted, the next challenge is appropriate column sizing and text wrapping inside our\n .lh-details tables. Even more fun.\n * We don't want table headers (\"Potential Savings (ms)\") to wrap or their column values, but\n we'd be happy for the URL column to wrap if the URLs are particularly long.\n * We want the narrow columns to remain narrow, providing the most column width for URL\n * We don't want the table to extend past 100% width.\n * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,\n but they do not get any overflow:ellipsis treatment.\n */\n word-break: break-word;\n}\n\n.lh-audit-group a,\n.lh-category-header__description a,\n.lh-audit__description a,\n.lh-warnings a,\n.lh-footer a,\n.lh-table-column--link a {\n color: var(--link-color);\n}\n\n.lh-audit__description, .lh-audit__stackpack {\n --inner-audit-padding-right: var(--stackpack-padding-horizontal);\n padding-left: var(--audit-description-padding-left);\n padding-right: var(--inner-audit-padding-right);\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.lh-details {\n margin-top: var(--default-padding);\n margin-bottom: var(--default-padding);\n margin-left: var(--audit-description-padding-left);\n /* whatever the .lh-details side margins are */\n width: 100%;\n}\n\n.lh-audit__stackpack {\n display: flex;\n align-items: center;\n}\n\n.lh-audit__stackpack__img {\n max-width: 30px;\n margin-right: var(--default-padding)\n}\n\n/* Report header */\n\n.lh-report-icon {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n}\n.lh-report-icon[disabled] {\n opacity: 0.3;\n pointer-events: none;\n}\n\n.lh-report-icon::before {\n content: \"\";\n margin: 4px;\n background-repeat: no-repeat;\n width: var(--report-icon-size);\n height: var(--report-icon-size);\n opacity: 0.7;\n display: inline-block;\n vertical-align: middle;\n}\n.lh-report-icon:hover::before {\n opacity: 1;\n}\n.lh-dark .lh-report-icon::before {\n filter: invert(1);\n}\n.lh-report-icon--print::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"/><path fill=\"none\" d=\"M0 0h24v24H0z\"/></svg>');\n}\n.lh-report-icon--copy::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>');\n}\n.lh-report-icon--open::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z\"/></svg>');\n}\n.lh-report-icon--download::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>');\n}\n.lh-report-icon--dark::before {\n background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 100 125\"><path d=\"M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z\"/></svg>');\n}\n.lh-report-icon--treemap::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"black\"><path d=\"M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z\"/></svg>');\n}\n.lh-report-icon--date::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7 11h2v2H7v-2zm14-5v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 012 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z\"/></svg>');\n}\n.lh-report-icon--devices::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M4 6h18V4H4a2 2 0 00-2 2v11H0v3h14v-3H4V6zm19 2h-6a1 1 0 00-1 1v10c0 .6.5 1 1 1h6c.6 0 1-.5 1-1V9c0-.6-.5-1-1-1zm-1 9h-4v-7h4v7z\"/></svg>');\n}\n.lh-report-icon--world::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3c-.3-1.3-.8-2.5-1.4-3.6A8 8 0 0 1 18.9 8zm-7-4a14 14 0 0 1 2 4h-4a14 14 0 0 1 2-4zM4.3 14a8.2 8.2 0 0 1 0-4h3.3a16.5 16.5 0 0 0 0 4H4.3zm.8 2h3a14 14 0 0 0 1.3 3.6A8 8 0 0 1 5.1 16zm3-8H5a8 8 0 0 1 4.3-3.6L8 8zM12 20a14 14 0 0 1-2-4h4a14 14 0 0 1-2 4zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.6 14.6 0 0 1 0 4zm.3 5.6c.6-1.2 1-2.4 1.4-3.6h3a8 8 0 0 1-4.4 3.6zm1.8-5.6a16.5 16.5 0 0 0 0-4h3.3a8.2 8.2 0 0 1 0 4h-3.3z\"/></svg>');\n}\n.lh-report-icon--stopwatch::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.1-6.6L20.5 6l-1.4-1.4L17.7 6A9 9 0 0 0 3 13a9 9 0 1 0 16-5.6zm-7 12.6a7 7 0 1 1 0-14 7 7 0 0 1 0 14z\"/></svg>');\n}\n.lh-report-icon--networkspeed::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M15.9 5c-.2 0-.3 0-.4.2v.2L10.1 17a2 2 0 0 0-.2 1 2 2 0 0 0 4 .4l2.4-12.9c0-.3-.2-.5-.5-.5zM1 9l2 2c2.9-2.9 6.8-4 10.5-3.6l1.2-2.7C10 3.8 4.7 5.3 1 9zm20 2 2-2a15.4 15.4 0 0 0-5.6-3.6L17 8.2c1.5.7 2.9 1.6 4.1 2.8zm-4 4 2-2a9.9 9.9 0 0 0-2.7-1.9l-.5 3 1.2.9zM5 13l2 2a7.1 7.1 0 0 1 4-2l1.3-2.9C9.7 10.1 7 11 5 13z\"/></svg>');\n}\n.lh-report-icon--samples-one::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"7\" cy=\"14\" r=\"3\"/><path d=\"M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>');\n}\n.lh-report-icon--samples-many::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/><circle cx=\"7\" cy=\"14\" r=\"3\"/><circle cx=\"11\" cy=\"6\" r=\"3\"/></svg>');\n}\n.lh-report-icon--chrome::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-50 -50 562 562\"><path d=\"M256 25.6v25.6a204 204 0 0 1 144.8 60 204 204 0 0 1 60 144.8 204 204 0 0 1-60 144.8 204 204 0 0 1-144.8 60 204 204 0 0 1-144.8-60 204 204 0 0 1-60-144.8 204 204 0 0 1 60-144.8 204 204 0 0 1 144.8-60V0a256 256 0 1 0 0 512 256 256 0 0 0 0-512v25.6z\"/><path d=\"M256 179.2v25.6a51.3 51.3 0 0 1 0 102.4 51.3 51.3 0 0 1 0-102.4v-51.2a102.3 102.3 0 1 0-.1 204.7 102.3 102.3 0 0 0 .1-204.7v25.6z\"/><path d=\"M256 204.8h217.6a25.6 25.6 0 0 0 0-51.2H256a25.6 25.6 0 0 0 0 51.2m44.3 76.8L191.5 470.1a25.6 25.6 0 1 0 44.4 25.6l108.8-188.5a25.6 25.6 0 1 0-44.4-25.6m-88.6 0L102.9 93.2a25.7 25.7 0 0 0-35-9.4 25.7 25.7 0 0 0-9.4 35l108.8 188.5a25.7 25.7 0 0 0 35 9.4 25.9 25.9 0 0 0 9.4-35.1\"/></svg>');\n}\n.lh-report-icon--external::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.15 11.9a1.01 1.01 0 0 1-.743-.307 1.01 1.01 0 0 1-.306-.743v-7.7c0-.292.102-.54.306-.744a1.01 1.01 0 0 1 .744-.306H7v1.05H3.15v7.7h7.7V7h1.05v3.85c0 .291-.103.54-.307.743a1.01 1.01 0 0 1-.743.307h-7.7Zm2.494-2.8-.743-.744 5.206-5.206H8.401V2.1h3.5v3.5h-1.05V3.893L5.644 9.1Z\"/></svg>');\n}\n\n.lh-buttons {\n display: flex;\n flex-wrap: wrap;\n margin: var(--default-padding) 0;\n}\n.lh-button {\n height: 32px;\n border: 1px solid var(--report-border-color-secondary);\n border-radius: 3px;\n color: var(--link-color);\n background-color: var(--report-background-color);\n margin: 5px;\n}\n\n.lh-button:first-of-type {\n margin-left: 0;\n}\n\n/* Node */\n.lh-node__snippet {\n font-family: var(--report-font-family-monospace);\n color: var(--snippet-color);\n font-size: var(--report-monospace-font-size);\n line-height: 20px;\n}\n\n/* Score */\n\n.lh-audit__score-icon {\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n margin: var(--score-icon-margin);\n}\n\n.lh-audit--pass .lh-audit__display-text {\n color: var(--color-pass-secondary);\n}\n.lh-audit--pass .lh-audit__score-icon,\n.lh-scorescale-range--pass::before {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-audit--average .lh-audit__display-text {\n color: var(--color-average-secondary);\n}\n.lh-audit--average .lh-audit__score-icon,\n.lh-scorescale-range--average::before {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-audit--fail .lh-audit__display-text {\n color: var(--color-fail-secondary);\n}\n.lh-audit--fail .lh-audit__score-icon,\n.lh-audit--error .lh-audit__score-icon,\n.lh-scorescale-range--fail::before {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-audit--error .lh-audit__score-icon,\n.lh-metric--error .lh-metric__icon {\n background-image: var(--error-icon-url);\n background-repeat: no-repeat;\n background-position: center;\n border: none;\n}\n\n.lh-gauge__wrapper--fail .lh-gauge--error {\n background-image: var(--error-icon-url);\n background-repeat: no-repeat;\n background-position: center;\n transform: scale(0.5);\n top: var(--score-container-padding);\n}\n\n.lh-audit--manual .lh-audit__display-text,\n.lh-audit--notapplicable .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n.lh-audit--manual .lh-audit__score-icon,\n.lh-audit--notapplicable .lh-audit__score-icon {\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);\n border-radius: 100%;\n background: none;\n}\n\n.lh-audit--informative .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n\n.lh-audit--informative .lh-audit__score-icon {\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);\n border-radius: 100%;\n}\n\n.lh-audit__description,\n.lh-audit__stackpack {\n color: var(--report-text-color-secondary);\n}\n.lh-audit__adorn {\n border: 1px solid var(--color-gray-500);\n border-radius: 3px;\n margin: 0 3px;\n padding: 0 2px;\n line-height: 1.1;\n display: inline-block;\n font-size: 90%;\n color: var(--report-text-color-secondary);\n}\n\n.lh-category-header__description {\n text-align: center;\n color: var(--color-gray-700);\n margin: 0px auto;\n max-width: 400px;\n}\n\n\n.lh-audit__display-text,\n.lh-chevron-container {\n margin: 0 var(--audit-margin-horizontal);\n}\n.lh-chevron-container {\n margin-right: 0;\n}\n\n.lh-audit__title-and-text {\n flex: 1;\n}\n\n.lh-audit__title-and-text code {\n color: var(--snippet-color);\n font-size: var(--report-monospace-font-size);\n}\n\n/* Prepend display text with em dash separator. */\n.lh-audit__display-text:not(:empty):before {\n content: '—';\n margin-right: var(--audit-margin-horizontal);\n}\n\n/* Expandable Details (Audit Groups, Audits) */\n.lh-audit__header {\n display: flex;\n align-items: center;\n padding: var(--default-padding);\n}\n\n\n.lh-metricfilter {\n display: grid;\n justify-content: end;\n align-items: center;\n grid-auto-flow: column;\n gap: 4px;\n color: var(--color-gray-700);\n}\n\n.lh-metricfilter__radio {\n /*\n * Instead of hiding, position offscreen so it's still accessible to screen readers\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1439785\n */\n position: fixed;\n left: -9999px;\n}\n.lh-metricfilter input[type='radio']:focus-visible + label {\n outline: -webkit-focus-ring-color auto 1px;\n}\n\n.lh-metricfilter__label {\n display: inline-flex;\n padding: 0 4px;\n height: 16px;\n text-decoration: underline;\n align-items: center;\n cursor: pointer;\n font-size: 90%;\n}\n\n.lh-metricfilter__label--active {\n background: var(--color-blue-primary);\n color: var(--color-white);\n border-radius: 3px;\n text-decoration: none;\n}\n/* Give the 'All' choice a more muted display */\n.lh-metricfilter__label--active[for=\"metric-All\"] {\n background-color: var(--color-blue-200) !important;\n color: black !important;\n}\n\n.lh-metricfilter__text {\n margin-right: 8px;\n}\n\n/* If audits are filtered, hide the itemcount for Passed Audits… */\n.lh-category--filtered .lh-audit-group .lh-audit-group__itemcount {\n display: none;\n}\n\n\n.lh-audit__header:hover {\n background-color: var(--color-hover);\n}\n\n/* We want to hide the browser's default arrow marker on summary elements. Admittedly, it's complicated. */\n.lh-root details > summary {\n /* Blink 89+ and Firefox will hide the arrow when display is changed from (new) default of `list-item` to block. https://chromestatus.com/feature/6730096436051968*/\n display: block;\n}\n/* Safari and Blink <=88 require using the -webkit-details-marker selector */\n.lh-root details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* Perf Metric */\n\n.lh-metrics-container {\n display: grid;\n grid-auto-rows: 1fr;\n grid-template-columns: 1fr 1fr;\n grid-column-gap: var(--report-line-height);\n margin-bottom: var(--default-padding);\n}\n\n.lh-metric {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(-n+2) {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-metric__innerwrap {\n display: grid;\n /**\n * Icon -- Metric Name\n * -- Metric Value\n */\n grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;\n align-items: center;\n padding: var(--default-padding);\n}\n\n.lh-metric__details {\n order: -1;\n}\n\n.lh-metric__title {\n flex: 1;\n}\n\n.lh-calclink {\n padding-left: calc(1ex / 3);\n}\n\n.lh-metric__description {\n display: none;\n grid-column-start: 2;\n grid-column-end: 4;\n color: var(--report-text-color-secondary);\n}\n\n.lh-metric__value {\n font-size: var(--metric-value-font-size);\n margin: calc(var(--default-padding) / 2) 0;\n white-space: nowrap; /* No wrapping between metric value and the icon */\n grid-column-start: 2;\n}\n\n\n@media screen and (max-width: 535px) {\n .lh-metrics-container {\n display: block;\n }\n\n .lh-metric {\n border-bottom: none !important;\n }\n .lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {\n border-bottom: 1px solid var(--report-border-color-secondary) !important;\n }\n\n /* Change the grid to 3 columns for narrow viewport. */\n .lh-metric__innerwrap {\n /**\n * Icon -- Metric Name -- Metric Value\n */\n grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;\n }\n .lh-metric__value {\n justify-self: end;\n grid-column-start: unset;\n }\n}\n\n/* No-JS toggle switch */\n/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */\n .lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description {\n display: block;\n}\n\n/* TODO get rid of the SVGS and clean up these some more */\n.lh-metrics-toggle__input {\n opacity: 0;\n position: absolute;\n right: 0;\n top: 0px;\n}\n\n.lh-metrics-toggle__input + div > label > .lh-metrics-toggle__labeltext--hide,\n.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--show {\n display: none;\n}\n.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--hide {\n display: inline;\n}\n.lh-metrics-toggle__input:focus + div > label {\n outline: -webkit-focus-ring-color auto 3px;\n}\n\n.lh-metrics-toggle__label {\n cursor: pointer;\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n color: var(--color-gray-700);\n}\n\n/* Pushes the metric description toggle button to the right. */\n.lh-audit-group--metrics .lh-audit-group__header {\n display: flex;\n justify-content: space-between;\n}\n\n.lh-metric__icon,\n.lh-scorescale-range::before {\n content: '';\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n display: inline-block;\n margin: var(--score-icon-margin);\n}\n\n.lh-metric--pass .lh-metric__value {\n color: var(--color-pass-secondary);\n}\n.lh-metric--pass .lh-metric__icon {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-metric--average .lh-metric__value {\n color: var(--color-average-secondary);\n}\n.lh-metric--average .lh-metric__icon {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-metric--fail .lh-metric__value {\n color: var(--color-fail-secondary);\n}\n.lh-metric--fail .lh-metric__icon {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-metric--error .lh-metric__value,\n.lh-metric--error .lh-metric__description {\n color: var(--color-fail-secondary);\n}\n\n/* Filmstrip */\n\n.lh-filmstrip-container {\n /* smaller gap between metrics and filmstrip */\n margin: -8px auto 0 auto;\n}\n\n.lh-filmstrip {\n display: grid;\n justify-content: space-between;\n padding-bottom: var(--default-padding);\n width: 100%;\n grid-template-columns: repeat(auto-fit, 90px);\n}\n\n.lh-filmstrip__frame {\n text-align: right;\n position: relative;\n}\n\n.lh-filmstrip__thumbnail {\n border: 1px solid var(--report-border-color-secondary);\n max-height: 150px;\n max-width: 120px;\n}\n\n/* Audit */\n\n.lh-audit {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n\n/* Apply border-top to just the first audit. */\n.lh-audit {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n.lh-audit ~ .lh-audit {\n border-top: none;\n}\n\n\n.lh-audit--error .lh-audit__display-text {\n color: var(--color-fail-secondary);\n}\n\n/* Audit Group */\n\n.lh-audit-group {\n margin-bottom: var(--audit-group-margin-bottom);\n position: relative;\n}\n.lh-audit-group--metrics {\n margin-bottom: calc(var(--audit-group-margin-bottom) / 2);\n}\n\n.lh-audit-group__header::before {\n /* By default, groups don't get an icon */\n content: none;\n width: var(--pwa-icon-size);\n height: var(--pwa-icon-size);\n margin: var(--pwa-icon-margin);\n display: inline-block;\n vertical-align: middle;\n}\n\n/* Style the \"over budget\" columns red. */\n.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(4),\n.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(5),\n.lh-audit-group--budgets #timing-budget tbody tr td:nth-child(3) {\n color: var(--color-red-700);\n}\n\n/* Align the \"over budget request count\" text to be close to the \"over budget bytes\" column. */\n.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){\n text-align: right;\n}\n\n.lh-audit-group--budgets .lh-details--budget {\n width: 100%;\n margin: 0 0 var(--default-padding);\n}\n\n.lh-audit-group--pwa-installable .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-installable-gray-url);\n}\n.lh-audit-group--pwa-optimized .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-optimized-gray-url);\n}\n.lh-audit-group--pwa-installable.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-installable-color-url);\n}\n.lh-audit-group--pwa-optimized.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-optimized-color-url);\n}\n\n.lh-audit-group--metrics .lh-audit-group__summary {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.lh-audit-group__summary {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.lh-audit-group__header .lh-chevron {\n margin-top: calc((var(--report-line-height) - 5px) / 2);\n}\n\n.lh-audit-group__header {\n letter-spacing: 0.8px;\n padding: var(--default-padding);\n padding-left: 0;\n}\n\n.lh-audit-group__header, .lh-audit-group__summary {\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n color: var(--color-gray-700);\n}\n\n.lh-audit-group__title {\n text-transform: uppercase;\n font-weight: 500;\n}\n\n.lh-audit-group__itemcount {\n color: var(--color-gray-600);\n}\n\n.lh-audit-group__footer {\n color: var(--color-gray-600);\n display: block;\n margin-top: var(--default-padding);\n}\n\n.lh-details,\n.lh-category-header__description,\n.lh-audit-group__footer {\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n}\n\n.lh-audit-explanation {\n margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2) var(--audit-margin-horizontal);\n line-height: var(--audit-explanation-line-height);\n display: inline-block;\n}\n\n.lh-audit--fail .lh-audit-explanation {\n color: var(--color-fail-secondary);\n}\n\n/* Report */\n.lh-list > :not(:last-child) {\n margin-bottom: calc(var(--default-padding) * 2);\n}\n\n.lh-header-container {\n display: block;\n margin: 0 auto;\n position: relative;\n word-wrap: break-word;\n}\n\n.lh-header-container .lh-scores-wrapper {\n border-bottom: 1px solid var(--color-gray-200);\n}\n\n\n.lh-report {\n min-width: var(--report-content-min-width);\n}\n\n.lh-exception {\n font-size: large;\n}\n\n.lh-code {\n white-space: normal;\n margin-top: 0;\n font-size: var(--report-monospace-font-size);\n}\n\n.lh-warnings {\n --item-margin: calc(var(--report-line-height) / 6);\n color: var(--color-average-secondary);\n margin: var(--audit-padding-vertical) 0;\n padding: var(--default-padding)\n var(--default-padding)\n var(--default-padding)\n calc(var(--audit-description-padding-left));\n background-color: var(--toplevel-warning-background-color);\n}\n.lh-warnings span {\n font-weight: bold;\n}\n\n.lh-warnings--toplevel {\n --item-margin: calc(var(--header-line-height) / 4);\n color: var(--toplevel-warning-text-color);\n margin-left: auto;\n margin-right: auto;\n max-width: var(--report-content-max-width-minus-edge-gap);\n padding: var(--toplevel-warning-padding);\n border-radius: 8px;\n}\n\n.lh-warnings__msg {\n color: var(--toplevel-warning-message-text-color);\n margin: 0;\n}\n\n.lh-warnings ul {\n margin: 0;\n}\n.lh-warnings li {\n margin: var(--item-margin) 0;\n}\n.lh-warnings li:last-of-type {\n margin-bottom: 0;\n}\n\n.lh-scores-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n.lh-scores-header__solo {\n padding: 0;\n border: 0;\n}\n\n/* Gauge */\n\n.lh-gauge__wrapper--pass {\n color: var(--color-pass-secondary);\n fill: var(--color-pass);\n stroke: var(--color-pass);\n}\n\n.lh-gauge__wrapper--average {\n color: var(--color-average-secondary);\n fill: var(--color-average);\n stroke: var(--color-average);\n}\n\n.lh-gauge__wrapper--fail {\n color: var(--color-fail-secondary);\n fill: var(--color-fail);\n stroke: var(--color-fail);\n}\n\n.lh-gauge__wrapper--not-applicable {\n color: var(--color-not-applicable);\n fill: var(--color-not-applicable);\n stroke: var(--color-not-applicable);\n}\n\n.lh-fraction__wrapper .lh-fraction__content::before {\n content: '';\n height: var(--score-icon-size);\n width: var(--score-icon-size);\n margin: var(--score-icon-margin);\n display: inline-block;\n}\n.lh-fraction__wrapper--pass .lh-fraction__content {\n color: var(--color-pass-secondary);\n}\n.lh-fraction__wrapper--pass .lh-fraction__background {\n background-color: var(--color-pass);\n}\n.lh-fraction__wrapper--pass .lh-fraction__content::before {\n background-color: var(--color-pass);\n border-radius: 50%;\n}\n.lh-fraction__wrapper--average .lh-fraction__content {\n color: var(--color-average-secondary);\n}\n.lh-fraction__wrapper--average .lh-fraction__background,\n.lh-fraction__wrapper--average .lh-fraction__content::before {\n background-color: var(--color-average);\n}\n.lh-fraction__wrapper--fail .lh-fraction__content {\n color: var(--color-fail);\n}\n.lh-fraction__wrapper--fail .lh-fraction__background {\n background-color: var(--color-fail);\n}\n.lh-fraction__wrapper--fail .lh-fraction__content::before {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n.lh-fraction__wrapper--null .lh-fraction__content {\n color: var(--color-gray-700);\n}\n.lh-fraction__wrapper--null .lh-fraction__background {\n background-color: var(--color-gray-700);\n}\n.lh-fraction__wrapper--null .lh-fraction__content::before {\n border-radius: 50%;\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-700);\n}\n\n.lh-fraction__background {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: calc(var(--gauge-circle-size) / 2);\n opacity: 0.1;\n z-index: -1;\n}\n\n.lh-fraction__content-wrapper {\n height: var(--gauge-circle-size);\n display: flex;\n align-items: center;\n}\n\n.lh-fraction__content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n font-size: calc(0.3 * var(--gauge-circle-size));\n line-height: calc(0.4 * var(--gauge-circle-size));\n width: max-content;\n min-width: calc(1.5 * var(--gauge-circle-size));\n padding: calc(0.1 * var(--gauge-circle-size)) calc(0.2 * var(--gauge-circle-size));\n --score-icon-size: calc(0.21 * var(--gauge-circle-size));\n --score-icon-margin: 0 calc(0.15 * var(--gauge-circle-size)) 0 0;\n}\n\n.lh-gauge {\n stroke-linecap: round;\n width: var(--gauge-circle-size);\n height: var(--gauge-circle-size);\n}\n\n.lh-category .lh-gauge {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n.lh-gauge-base {\n opacity: 0.1;\n}\n\n.lh-gauge-arc {\n fill: none;\n transform-origin: 50% 50%;\n animation: load-gauge var(--transition-length) ease both;\n animation-delay: 250ms;\n}\n\n.lh-gauge__svg-wrapper {\n position: relative;\n height: var(--gauge-circle-size);\n}\n.lh-category .lh-gauge__svg-wrapper,\n.lh-category .lh-fraction__wrapper {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n/* The plugin badge overlay */\n.lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size);\n height: var(--plugin-badge-size);\n background-color: var(--plugin-badge-background-color);\n background-image: var(--plugin-icon-url);\n background-repeat: no-repeat;\n background-size: var(--plugin-icon-size);\n background-position: 58% 50%;\n content: \"\";\n position: absolute;\n right: -6px;\n bottom: 0px;\n display: block;\n z-index: 100;\n box-shadow: 0 0 4px rgba(0,0,0,.2);\n border-radius: 25%;\n}\n.lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size-big);\n height: var(--plugin-badge-size-big);\n}\n\n@keyframes load-gauge {\n from { stroke-dasharray: 0 352; }\n}\n\n.lh-gauge__percentage {\n width: 100%;\n height: var(--gauge-circle-size);\n line-height: var(--gauge-circle-size);\n position: absolute;\n font-family: var(--report-font-family-monospace);\n font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);\n text-align: center;\n top: var(--score-container-padding);\n}\n\n.lh-category .lh-gauge__percentage {\n --gauge-circle-size: var(--gauge-circle-size-big);\n --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);\n}\n\n.lh-gauge__wrapper,\n.lh-fraction__wrapper {\n position: relative;\n display: flex;\n align-items: center;\n flex-direction: column;\n text-decoration: none;\n padding: var(--score-container-padding);\n\n --transition-length: 1s;\n\n /* Contain the layout style paint & layers during animation*/\n contain: content;\n will-change: opacity; /* Only using for layer promotion */\n}\n\n.lh-gauge__label,\n.lh-fraction__label {\n font-size: var(--gauge-label-font-size);\n font-weight: 500;\n line-height: var(--gauge-label-line-height);\n margin-top: 10px;\n text-align: center;\n color: var(--report-text-color);\n word-break: keep-all;\n}\n\n/* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */\n.lh-category .lh-gauge__label,\n.lh-category .lh-fraction__label {\n --gauge-label-font-size: var(--gauge-label-font-size-big);\n --gauge-label-line-height: var(--gauge-label-line-height-big);\n margin-top: 14px;\n}\n\n.lh-scores-header .lh-gauge__wrapper,\n.lh-scores-header .lh-fraction__wrapper,\n.lh-scores-header .lh-gauge--pwa__wrapper,\n.lh-sticky-header .lh-gauge__wrapper,\n.lh-sticky-header .lh-fraction__wrapper,\n.lh-sticky-header .lh-gauge--pwa__wrapper {\n width: var(--gauge-wrapper-width);\n}\n\n.lh-scorescale {\n display: inline-flex;\n\n gap: calc(var(--default-padding) * 4);\n margin: 16px auto 0 auto;\n font-size: var(--report-font-size-secondary);\n color: var(--color-gray-700);\n\n}\n\n.lh-scorescale-range {\n display: flex;\n align-items: center;\n font-family: var(--report-font-family-monospace);\n white-space: nowrap;\n}\n\n.lh-category-header__finalscreenshot .lh-scorescale {\n border: 0;\n display: flex;\n justify-content: center;\n}\n\n.lh-category-header__finalscreenshot .lh-scorescale-range {\n font-family: unset;\n font-size: 12px;\n}\n\n.lh-scorescale-wrap {\n display: contents;\n}\n\n/* Hide category score gauages if it's a single category report */\n.lh-header--solo-category .lh-scores-wrapper {\n display: none;\n}\n\n\n.lh-categories {\n width: 100%;\n}\n\n.lh-category {\n padding: var(--category-padding);\n max-width: var(--report-content-max-width);\n margin: 0 auto;\n\n scroll-margin-top: calc(var(--sticky-header-buffer) - 1em);\n}\n\n.lh-category-wrapper {\n border-bottom: 1px solid var(--color-gray-200);\n}\n.lh-category-wrapper:last-of-type {\n border-bottom: 0;\n}\n\n.lh-category-header {\n margin-bottom: var(--section-padding-vertical);\n}\n\n.lh-category-header .lh-score__gauge {\n max-width: 400px;\n width: auto;\n margin: 0px auto;\n}\n\n.lh-category-header__finalscreenshot {\n display: grid;\n grid-template: none / 1fr 1px 1fr;\n justify-items: center;\n align-items: center;\n gap: var(--report-line-height);\n min-height: 288px;\n margin-bottom: var(--default-padding);\n}\n\n.lh-final-ss-image {\n /* constrain the size of the image to not be too large */\n max-height: calc(var(--gauge-circle-size-big) * 2.8);\n max-width: calc(var(--gauge-circle-size-big) * 3.5);\n border: 1px solid var(--color-gray-200);\n padding: 4px;\n border-radius: 3px;\n display: block;\n}\n\n.lh-category-headercol--separator {\n background: var(--color-gray-200);\n width: 1px;\n height: var(--gauge-circle-size-big);\n}\n\n@media screen and (max-width: 780px) {\n .lh-category-header__finalscreenshot {\n grid-template: 1fr 1fr / none\n }\n .lh-category-headercol--separator {\n display: none;\n }\n}\n\n\n/* 964 fits the min-width of the filmstrip */\n@media screen and (max-width: 964px) {\n .lh-report {\n margin-left: 0;\n width: 100%;\n }\n}\n\n@media print {\n body {\n -webkit-print-color-adjust: exact; /* print background colors */\n }\n .lh-container {\n display: block;\n }\n .lh-report {\n margin-left: 0;\n padding-top: 0;\n }\n .lh-categories {\n margin-top: 0;\n }\n}\n\n.lh-table {\n position: relative;\n border-collapse: separate;\n border-spacing: 0;\n /* Can't assign padding to table, so shorten the width instead. */\n width: calc(100% - var(--audit-description-padding-left) - var(--stackpack-padding-horizontal));\n border: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-table thead th {\n position: sticky;\n top: var(--sticky-header-buffer);\n z-index: 1;\n background-color: var(--report-background-color);\n border-bottom: 1px solid var(--report-border-color-secondary);\n font-weight: normal;\n color: var(--color-gray-600);\n /* See text-wrapping comment on .lh-container. */\n word-break: normal;\n}\n\n.lh-row--group {\n background-color: var(--table-group-header-background-color);\n}\n\n.lh-row--group td {\n font-weight: bold;\n font-size: 1.05em;\n color: var(--table-group-header-text-color);\n}\n\n.lh-row--group td:first-child {\n display: block;\n min-width: max-content;\n font-weight: normal;\n}\n\n.lh-row--group .lh-text {\n color: inherit;\n text-decoration: none;\n display: inline-block;\n}\n\n.lh-row--group a.lh-link:hover {\n text-decoration: underline;\n}\n\n.lh-row--group .lh-audit__adorn {\n text-transform: capitalize;\n font-weight: normal;\n padding: 2px 3px 1px 3px;\n}\n\n.lh-row--group .lh-audit__adorn1p {\n color: var(--link-color);\n border-color: var(--link-color);\n}\n\n.lh-row--group .lh-report-icon--external::before {\n content: \"\";\n background-repeat: no-repeat;\n width: 14px;\n height: 16px;\n opacity: 0.7;\n display: inline-block;\n vertical-align: middle;\n}\n\n.lh-row--group .lh-report-icon--external {\n visibility: hidden;\n}\n\n.lh-row--group:hover .lh-report-icon--external {\n visibility: visible;\n}\n\n.lh-dark .lh-report-icon--external::before {\n filter: invert(1);\n}\n\n/** Manages indentation of two-level and three-level nested adjacent rows */\n\n.lh-row--group ~ [data-entity]:not(.lh-row--group) td:first-child {\n padding-left: 20px;\n}\n\n.lh-row--group ~ [data-entity]:not(.lh-row--group) ~ .lh-sub-item-row td:first-child {\n padding-left: 40px;\n}\n\n.lh-row--even {\n background-color: var(--table-group-header-background-color);\n}\n.lh-row--hidden {\n display: none;\n}\n\n.lh-table th,\n.lh-table td {\n padding: var(--default-padding);\n}\n\n.lh-table tr {\n vertical-align: middle;\n}\n\n.lh-table tr:hover {\n background-color: var(--table-higlight-background-color);\n}\n\n/* Looks unnecessary, but mostly for keeping the <th>s left-aligned */\n.lh-table-column--text,\n.lh-table-column--source-location,\n.lh-table-column--url,\n/* .lh-table-column--thumbnail, */\n/* .lh-table-column--empty,*/\n.lh-table-column--code,\n.lh-table-column--node {\n text-align: left;\n}\n\n.lh-table-column--code {\n min-width: 100px;\n}\n\n.lh-table-column--bytes,\n.lh-table-column--timespanMs,\n.lh-table-column--ms,\n.lh-table-column--numeric {\n text-align: right;\n word-break: normal;\n}\n\n\n\n.lh-table .lh-table-column--thumbnail {\n width: var(--image-preview-size);\n}\n\n.lh-table-column--url {\n min-width: 250px;\n}\n\n.lh-table-column--text {\n min-width: 80px;\n}\n\n/* Keep columns narrow if they follow the URL column */\n/* 12% was determined to be a decent narrow width, but wide enough for column headings */\n.lh-table-column--url + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--ms,\n.lh-table-column--url + .lh-table-column--ms + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--timespanMs {\n width: 12%;\n}\n\n.lh-text__url-host {\n display: inline;\n}\n\n.lh-text__url-host {\n margin-left: calc(var(--report-font-size) / 2);\n opacity: 0.6;\n font-size: 90%\n}\n\n.lh-thumbnail {\n object-fit: cover;\n width: var(--image-preview-size);\n height: var(--image-preview-size);\n display: block;\n}\n\n.lh-unknown pre {\n overflow: scroll;\n border: solid 1px var(--color-gray-200);\n}\n\n.lh-text__url > a {\n color: inherit;\n text-decoration: none;\n}\n\n.lh-text__url > a:hover {\n text-decoration: underline dotted #999;\n}\n\n.lh-sub-item-row {\n margin-left: 20px;\n margin-bottom: 0;\n color: var(--color-gray-700);\n}\n\n.lh-sub-item-row td {\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: 20px;\n}\n\n/* Chevron\n https://codepen.io/paulirish/pen/LmzEmK\n */\n.lh-chevron {\n --chevron-angle: 42deg;\n /* Edge doesn't support transform: rotate(calc(...)), so we define it here */\n --chevron-angle-right: -42deg;\n width: var(--chevron-size);\n height: var(--chevron-size);\n margin-top: calc((var(--report-line-height) - 12px) / 2);\n}\n\n.lh-chevron__lines {\n transition: transform 0.4s;\n transform: translateY(var(--report-line-height));\n}\n.lh-chevron__line {\n stroke: var(--chevron-line-stroke);\n stroke-width: var(--chevron-size);\n stroke-linecap: square;\n transform-origin: 50%;\n transform: rotate(var(--chevron-angle));\n transition: transform 300ms, stroke 300ms;\n}\n\n.lh-expandable-details .lh-chevron__line-right,\n.lh-expandable-details[open] .lh-chevron__line-left {\n transform: rotate(var(--chevron-angle-right));\n}\n\n.lh-expandable-details[open] .lh-chevron__line-right {\n transform: rotate(var(--chevron-angle));\n}\n\n\n.lh-expandable-details[open] .lh-chevron__lines {\n transform: translateY(calc(var(--chevron-size) * -1));\n}\n\n.lh-expandable-details[open] {\n animation: 300ms openDetails forwards;\n padding-bottom: var(--default-padding);\n}\n\n@keyframes openDetails {\n from {\n outline: 1px solid var(--report-background-color);\n }\n to {\n outline: 1px solid;\n box-shadow: 0 2px 4px rgba(0, 0, 0, .24);\n }\n}\n\n@media screen and (max-width: 780px) {\n /* no black outline if we're not confident the entire table can be displayed within bounds */\n .lh-expandable-details[open] {\n animation: none;\n }\n}\n\n.lh-expandable-details[open] summary, details.lh-clump > summary {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\ndetails.lh-clump[open] > summary {\n border-bottom-width: 0;\n}\n\n\n\ndetails .lh-clump-toggletext--hide,\ndetails[open] .lh-clump-toggletext--show { display: none; }\ndetails[open] .lh-clump-toggletext--hide { display: block;}\n\n\n/* Tooltip */\n.lh-tooltip-boundary {\n position: relative;\n}\n\n.lh-tooltip {\n position: absolute;\n display: none; /* Don't retain these layers when not needed */\n opacity: 0;\n background: #ffffff;\n white-space: pre-line; /* Render newlines in the text */\n min-width: 246px;\n max-width: 275px;\n padding: 15px;\n border-radius: 5px;\n text-align: initial;\n line-height: 1.4;\n}\n/* shrink tooltips to not be cutoff on left edge of narrow viewports\n 45vw is chosen to be ~= width of the left column of metrics\n*/\n@media screen and (max-width: 535px) {\n .lh-tooltip {\n min-width: 45vw;\n padding: 3vw;\n }\n}\n\n.lh-tooltip-boundary:hover .lh-tooltip {\n display: block;\n animation: fadeInTooltip 250ms;\n animation-fill-mode: forwards;\n animation-delay: 850ms;\n bottom: 100%;\n z-index: 1;\n will-change: opacity;\n right: 0;\n pointer-events: none;\n}\n\n.lh-tooltip::before {\n content: \"\";\n border: solid transparent;\n border-bottom-color: #fff;\n border-width: 10px;\n position: absolute;\n bottom: -20px;\n right: 6px;\n transform: rotate(180deg);\n pointer-events: none;\n}\n\n@keyframes fadeInTooltip {\n 0% { opacity: 0; }\n 75% { opacity: 1; }\n 100% { opacity: 1; filter: drop-shadow(1px 0px 1px #aaa) drop-shadow(0px 2px 4px hsla(206, 6%, 25%, 0.15)); pointer-events: auto; }\n}\n\n/* Element screenshot */\n.lh-element-screenshot {\n float: left;\n margin-right: 20px;\n}\n.lh-element-screenshot__content {\n overflow: hidden;\n min-width: 110px;\n display: flex;\n justify-content: center;\n background-color: var(--report-background-color);\n}\n.lh-element-screenshot__image {\n position: relative;\n /* Set by ElementScreenshotRenderer.installFullPageScreenshotCssVariable */\n background-image: var(--element-screenshot-url);\n outline: 2px solid #777;\n background-color: white;\n background-repeat: no-repeat;\n}\n.lh-element-screenshot__mask {\n position: absolute;\n background: #555;\n opacity: 0.8;\n}\n.lh-element-screenshot__element-marker {\n position: absolute;\n outline: 2px solid var(--color-lime-400);\n}\n.lh-element-screenshot__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2000; /* .lh-topbar is 1000 */\n background: var(--screenshot-overlay-background);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: zoom-out;\n}\n\n.lh-element-screenshot__overlay .lh-element-screenshot {\n margin-right: 0; /* clearing margin used in thumbnail case */\n outline: 1px solid var(--color-gray-700);\n}\n\n.lh-screenshot-overlay--enabled .lh-element-screenshot {\n cursor: zoom-out;\n}\n.lh-screenshot-overlay--enabled .lh-node .lh-element-screenshot {\n cursor: zoom-in;\n}\n\n\n.lh-meta__items {\n --meta-icon-size: calc(var(--report-icon-size) * 0.667);\n padding: var(--default-padding);\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n background-color: var(--env-item-background-color);\n border-radius: 3px;\n margin: 0 0 var(--default-padding) 0;\n font-size: 12px;\n column-gap: var(--default-padding);\n color: var(--color-gray-700);\n}\n\n.lh-meta__item {\n display: block;\n list-style-type: none;\n position: relative;\n padding: 0 0 0 calc(var(--meta-icon-size) + var(--default-padding) * 2);\n cursor: unset; /* disable pointer cursor from report-icon */\n}\n\n.lh-meta__item.lh-tooltip-boundary {\n text-decoration: dotted underline var(--color-gray-500);\n cursor: help;\n}\n\n.lh-meta__item.lh-report-icon::before {\n position: absolute;\n left: var(--default-padding);\n width: var(--meta-icon-size);\n height: var(--meta-icon-size);\n}\n\n.lh-meta__item.lh-report-icon:hover::before {\n opacity: 0.7;\n}\n\n.lh-meta__item .lh-tooltip {\n color: var(--color-gray-800);\n}\n\n.lh-meta__item .lh-tooltip::before {\n right: auto; /* Set the tooltip arrow to the leftside */\n left: 6px;\n}\n\n/* Change the grid for narrow viewport. */\n@media screen and (max-width: 640px) {\n .lh-meta__items {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media screen and (max-width: 535px) {\n .lh-meta__items {\n display: block;\n }\n}\n\n/* Explodey gauge */\n\n.lh-exp-gauge-component {\n margin-bottom: 10px;\n}\n\n.lh-exp-gauge-component circle {\n stroke: currentcolor;\n r: var(--radius);\n}\n\n.lh-exp-gauge-component text {\n font-size: calc(var(--radius) * 0.2);\n}\n\n.lh-exp-gauge-component .lh-exp-gauge {\n margin: 0 auto;\n width: 225px;\n stroke-width: var(--stroke-width);\n stroke-linecap: round;\n\n /* for better rendering perf */\n contain: strict;\n height: 225px;\n will-change: transform;\n}\n.lh-exp-gauge-component .lh-exp-gauge--faded {\n opacity: 0.1;\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper {\n font-family: var(--report-font-family-monospace);\n text-align: center;\n text-decoration: none;\n transition: .3s;\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass {\n color: var(--color-pass);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--average {\n color: var(--color-average);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail {\n color: var(--color-fail);\n}\n.lh-exp-gauge-component .state--expanded {\n transition: color .3s;\n}\n.lh-exp-gauge-component .state--highlight {\n color: var(--color-highlight);\n}\n.lh-exp-gauge-component .lh-exp-gauge__svg-wrapper {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__label {\n fill: var(--report-text-color);\n font-family: var(--report-font-family);\n font-size: 12px;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__cutout {\n opacity: .999;\n transition: opacity .3s;\n}\n.lh-exp-gauge-component .state--highlight .lh-exp-gauge__cutout {\n opacity: 0;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__inner {\n color: inherit;\n}\n.lh-exp-gauge-component .lh-exp-gauge__base {\n fill: currentcolor;\n}\n\n\n.lh-exp-gauge-component .lh-exp-gauge__arc {\n fill: none;\n transition: opacity .3s;\n}\n.lh-exp-gauge-component .lh-exp-gauge__arc--metric {\n color: var(--metric-color);\n stroke-dashoffset: var(--metric-offset);\n opacity: 0.3;\n}\n.lh-exp-gauge-component .lh-exp-gauge-hovertarget {\n color: currentcolor;\n opacity: 0.001;\n stroke-linecap: butt;\n stroke-width: 24;\n /* hack. move the hover target out of the center. ideally i tweak the r instead but that rquires considerably more math. */\n transform: scale(1.15);\n}\n.lh-exp-gauge-component .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n opacity: 0;\n stroke-dasharray: 0 calc(var(--circle-meas) * var(--radius));\n transition: 0s .005s;\n}\n.lh-exp-gauge-component .state--expanded .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n opacity: .999;\n stroke-dasharray: var(--metric-array);\n transition: 0.3s; /* calc(.005s + var(--i)*.05s); entrace animation */\n}\n.lh-exp-gauge-component .state--expanded .lh-exp-gauge__inner .lh-exp-gauge__arc {\n opacity: 0;\n}\n\n\n.lh-exp-gauge-component .lh-exp-gauge__percentage {\n text-anchor: middle;\n dominant-baseline: middle;\n opacity: .999;\n font-size: calc(var(--radius) * 0.625);\n transition: opacity .3s ease-in;\n}\n.lh-exp-gauge-component .state--highlight .lh-exp-gauge__percentage {\n opacity: 0;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail .lh-exp-gauge__percentage {\n fill: var(--color-fail);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--average .lh-exp-gauge__percentage {\n fill: var(--color-average);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass .lh-exp-gauge__percentage {\n fill: var(--color-pass);\n}\n\n.lh-exp-gauge-component .lh-cover {\n fill: none;\n opacity: .001;\n pointer-events: none;\n}\n.lh-exp-gauge-component .state--expanded .lh-cover {\n pointer-events: auto;\n}\n\n.lh-exp-gauge-component .metric {\n transform: scale(var(--scale-initial));\n opacity: 0;\n transition: transform .1s .2s ease-out, opacity .3s ease-out;\n pointer-events: none;\n}\n.lh-exp-gauge-component .metric text {\n pointer-events: none;\n}\n.lh-exp-gauge-component .metric__value {\n fill: currentcolor;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.lh-exp-gauge-component .state--expanded .metric {\n transform: scale(1);\n opacity: .999;\n transition: transform .3s ease-out, opacity .3s ease-in, stroke-width .1s ease-out;\n transition-delay: calc(var(--i)*.05s);\n pointer-events: auto;\n}\n.lh-exp-gauge-component .state--highlight .metric {\n opacity: .3;\n}\n.lh-exp-gauge-component .state--highlight .metric--highlight {\n opacity: .999;\n stroke-width: calc(1.5*var(--stroke-width));\n}\n.lh-exp-gauge-component .state--highlight .metric--highlight .metric__value {\n opacity: 0.999;\n}\n\n\n/*\n the initial first load peek\n*/\n.lh-exp-gauge-component .lh-exp-gauge__bg { /* needed for the use zindex stacking w/ transparency */\n fill: var(--report-background-color);\n stroke: var(--report-background-color);\n}\n.lh-exp-gauge-component .state--peek .metric {\n transition-delay: 0ms;\n animation: peek var(--peek-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96);\n animation-fill-mode: forwards;\n}\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__inner .lh-exp-gauge__arc {\n opacity: 1;\n}\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc.lh-exp-gauge--faded {\n opacity: 0.3; /* just a tad stronger cuz its fighting with a big solid arg */\n}\n/* do i need to set expanded and override this? */\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n transition: opacity 0.3s;\n}\n.lh-exp-gauge-component .state--peek {\n color: unset;\n}\n.lh-exp-gauge-component .state--peek .metric__label {\n display: none;\n}\n\n.lh-exp-gauge-component .metric__label {\n fill: var(--report-text-color);\n}\n\n@keyframes peek {\n /* biggest it should go is 0.92. smallest is 0.8 */\n 0% {\n transform: scale(0.8);\n opacity: 0.8;\n }\n\n 50% {\n transform: scale(0.92);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0.8);\n opacity: 0.8;\n }\n}\n\n.lh-exp-gauge-component .wrapper {\n width: 620px;\n}\n\n/*# sourceURL=report-styles.css */\n");
|
|
507
|
+
el1.append("/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/*\n Naming convention:\n\n If a variable is used for a specific component: --{component}-{property name}-{modifier}\n\n Both {component} and {property name} should be kebab-case. If the target is the entire page,\n use 'report' for the component. The property name should not be abbreviated. Use the\n property name the variable is intended for - if it's used for multiple, a common descriptor\n is fine (ex: 'size' for a variable applied to 'width' and 'height'). If a variable is shared\n across multiple components, either create more variables or just drop the \"{component}-\"\n part of the name. Append any modifiers at the end (ex: 'big', 'dark').\n\n For colors: --color-{hue}-{intensity}\n\n {intensity} is the Material Design tag - 700, A700, etc.\n*/\n.lh-vars {\n /* Palette using Material Design Colors\n * https://www.materialui.co/colors */\n --color-amber-50: #FFF8E1;\n --color-blue-200: #90CAF9;\n --color-blue-900: #0D47A1;\n --color-blue-A700: #2962FF;\n --color-blue-primary: #06f;\n --color-cyan-500: #00BCD4;\n --color-gray-100: #F5F5F5;\n --color-gray-300: #CFCFCF;\n --color-gray-200: #E0E0E0;\n --color-gray-400: #BDBDBD;\n --color-gray-50: #FAFAFA;\n --color-gray-500: #9E9E9E;\n --color-gray-600: #757575;\n --color-gray-700: #616161;\n --color-gray-800: #424242;\n --color-gray-900: #212121;\n --color-gray: #000000;\n --color-green-700: #080;\n --color-green: #0c6;\n --color-lime-400: #D3E156;\n --color-orange-50: #FFF3E0;\n --color-orange-700: #C33300;\n --color-orange: #fa3;\n --color-red-700: #c00;\n --color-red: #f33;\n --color-teal-600: #00897B;\n --color-white: #FFFFFF;\n\n /* Context-specific colors */\n --color-average-secondary: var(--color-orange-700);\n --color-average: var(--color-orange);\n --color-fail-secondary: var(--color-red-700);\n --color-fail: var(--color-red);\n --color-hover: var(--color-gray-50);\n --color-informative: var(--color-blue-900);\n --color-pass-secondary: var(--color-green-700);\n --color-pass: var(--color-green);\n --color-not-applicable: var(--color-gray-600);\n\n /* Component variables */\n --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));\n --audit-explanation-line-height: 16px;\n --audit-group-margin-bottom: calc(var(--default-padding) * 6);\n --audit-group-padding-vertical: 8px;\n --audit-margin-horizontal: 5px;\n --audit-padding-vertical: 8px;\n --category-padding: calc(var(--default-padding) * 6) var(--edge-gap-padding) calc(var(--default-padding) * 4);\n --chevron-line-stroke: var(--color-gray-600);\n --chevron-size: 12px;\n --default-padding: 8px;\n --edge-gap-padding: calc(var(--default-padding) * 4);\n --env-item-background-color: var(--color-gray-100);\n --env-item-font-size: 28px;\n --env-item-line-height: 36px;\n --env-item-padding: 10px 0px;\n --env-name-min-width: 220px;\n --footer-padding-vertical: 16px;\n --gauge-circle-size-big: 96px;\n --gauge-circle-size: 48px;\n --gauge-circle-size-sm: 32px;\n --gauge-label-font-size-big: 18px;\n --gauge-label-font-size: var(--report-font-size-secondary);\n --gauge-label-line-height-big: 24px;\n --gauge-label-line-height: var(--report-line-height-secondary);\n --gauge-percentage-font-size-big: 38px;\n --gauge-percentage-font-size: var(--report-font-size-secondary);\n --gauge-wrapper-width: 120px;\n --header-line-height: 24px;\n --highlighter-background-color: var(--report-text-color);\n --icon-square-size: calc(var(--score-icon-size) * 0.88);\n --image-preview-size: 48px;\n --link-color: var(--color-blue-primary);\n --locale-selector-background-color: var(--color-white);\n --metric-toggle-lines-fill: #7F7F7F;\n --metric-value-font-size: calc(var(--report-font-size) * 1.8);\n --metrics-toggle-background-color: var(--color-gray-200);\n --plugin-badge-background-color: var(--color-white);\n --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);\n --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);\n --plugin-icon-size: 65%;\n --pwa-icon-margin: 0 var(--default-padding);\n --pwa-icon-size: var(--topbar-logo-size);\n --report-background-color: #fff;\n --report-border-color-secondary: #ebebeb;\n --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: Roboto, Helvetica, Arial, sans-serif;\n --report-font-size: 14px;\n --report-font-size-secondary: 12px;\n --report-icon-size: var(--score-icon-background-size);\n --report-line-height: 24px;\n --report-line-height-secondary: 20px;\n --report-monospace-font-size: calc(var(--report-font-size) * 0.85);\n --report-text-color-secondary: var(--color-gray-800);\n --report-text-color: var(--color-gray-900);\n --report-content-max-width: calc(60 * var(--report-font-size)); /* defaults to 840px */\n --report-content-min-width: 360px;\n --report-content-max-width-minus-edge-gap: calc(var(--report-content-max-width) - var(--edge-gap-padding) * 2);\n --score-container-padding: 8px;\n --score-icon-background-size: 24px;\n --score-icon-margin-left: 6px;\n --score-icon-margin-right: 14px;\n --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);\n --score-icon-size: 12px;\n --score-icon-size-big: 16px;\n --screenshot-overlay-background: rgba(0, 0, 0, 0.3);\n --section-padding-vertical: calc(var(--default-padding) * 6);\n --snippet-background-color: var(--color-gray-50);\n --snippet-color: #0938C2;\n --stackpack-padding-horizontal: 10px;\n --sticky-header-background-color: var(--report-background-color);\n --sticky-header-buffer: var(--topbar-height);\n --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2 + 1em);\n --table-group-header-background-color: #EEF1F4;\n --table-group-header-text-color: var(--color-gray-700);\n --table-higlight-background-color: #F5F7FA;\n --tools-icon-color: var(--color-gray-600);\n --topbar-background-color: var(--color-white);\n --topbar-height: 32px;\n --topbar-logo-size: 24px;\n --topbar-padding: 0 8px;\n --toplevel-warning-background-color: hsla(30, 100%, 75%, 10%);\n --toplevel-warning-message-text-color: var(--color-average-secondary);\n --toplevel-warning-padding: 18px;\n --toplevel-warning-text-color: var(--report-text-color);\n\n /* SVGs */\n --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23FFFFFF\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23757575\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n\n --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>check</title><path fill=\"%23178239\" d=\"M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z\"/></svg>');\n --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>info</title><path fill=\"%23E67700\" d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z\"/></svg>');\n --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>warn</title><path fill=\"%23C7221F\" d=\"M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z\"/></svg>');\n --error-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 3 15\"><title>error</title><path d=\"M0 15H 3V 12H 0V\" fill=\"%23FF4E42\"/><path d=\"M0 9H 3V 0H 0V\" fill=\"%23FF4E42\"/></svg>');\n\n --pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23DAE0E3\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23DAE0E3\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23424242\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23424242\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"nonzero\" fill=\"none\"><circle fill=\"%230CCE6B\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%230CCE6B\" width=\"24\" height=\"24\" rx=\"12\"/><path d=\"M5 5h14v14H5z\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/></g></svg>');\n\n --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z\"/></svg>');\n}\n\n@media not print {\n .lh-dark {\n /* Pallete */\n --color-gray-200: var(--color-gray-800);\n --color-gray-300: #616161;\n --color-gray-400: var(--color-gray-600);\n --color-gray-700: var(--color-gray-400);\n --color-gray-50: #757575;\n --color-gray-600: var(--color-gray-500);\n --color-green-700: var(--color-green);\n --color-orange-700: var(--color-orange);\n --color-red-700: var(--color-red);\n --color-teal-600: var(--color-cyan-500);\n\n /* Context-specific colors */\n --color-hover: rgba(0, 0, 0, 0.2);\n --color-informative: var(--color-blue-200);\n\n /* Component variables */\n --env-item-background-color: #393535;\n --link-color: var(--color-blue-200);\n --locale-selector-background-color: var(--color-gray-200);\n --plugin-badge-background-color: var(--color-gray-800);\n --report-background-color: var(--color-gray-900);\n --report-border-color-secondary: var(--color-gray-200);\n --report-text-color-secondary: var(--color-gray-400);\n --report-text-color: var(--color-gray-100);\n --snippet-color: var(--color-cyan-500);\n --topbar-background-color: var(--color-gray);\n --toplevel-warning-background-color: hsl(33deg 14% 18%);\n --toplevel-warning-message-text-color: var(--color-orange-700);\n --toplevel-warning-text-color: var(--color-gray-100);\n --table-group-header-background-color: rgba(186, 196, 206, 0.15);\n --table-group-header-text-color: var(--color-gray-100);\n --table-higlight-background-color: rgba(186, 196, 206, 0.09);\n\n /* SVGs */\n --plugin-icon-url: var(--plugin-icon-url-dark);\n --pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);\n --pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);\n }\n}\n\n@media only screen and (max-width: 480px) {\n .lh-vars {\n --audit-group-margin-bottom: 20px;\n --edge-gap-padding: var(--default-padding);\n --env-name-min-width: 120px;\n --gauge-circle-size-big: 96px;\n --gauge-circle-size: 72px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 112px;\n --header-padding: 16px 0 16px 0;\n --image-preview-size: 24px;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-size: 14px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --topbar-height: 28px;\n --topbar-logo-size: 20px;\n }\n}\n\n.lh-vars.lh-devtools {\n --audit-explanation-line-height: 14px;\n --audit-group-margin-bottom: 20px;\n --audit-group-padding-vertical: 12px;\n --audit-padding-vertical: 4px;\n --category-padding: 12px;\n --default-padding: 12px;\n --env-name-min-width: 120px;\n --footer-padding-vertical: 8px;\n --gauge-circle-size-big: 72px;\n --gauge-circle-size: 64px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 97px;\n --header-line-height: 20px;\n --header-padding: 16px 0 16px 0;\n --screenshot-overlay-background: transparent;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;\n --report-font-size: 12px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --section-padding-vertical: 8px;\n}\n\n.lh-container:has(.lh-sticky-header) {\n --sticky-header-buffer: calc(var(--topbar-height) + var(--sticky-header-height));\n}\n\n.lh-container:not(.lh-topbar + .lh-container) {\n --topbar-height: 0;\n --sticky-header-height: 0;\n --sticky-header-buffer: 0;\n}\n\n.lh-max-viewport {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n}\n\n.lh-devtools.lh-root {\n height: 100%;\n}\n.lh-devtools.lh-root img {\n /* Override devtools default 'min-width: 0' so svg without size in a flexbox isn't collapsed. */\n min-width: auto;\n}\n.lh-devtools .lh-container {\n overflow-y: scroll;\n height: calc(100% - var(--topbar-height));\n /** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */\n --sticky-header-buffer: 0;\n}\n.lh-devtools .lh-container:has(.lh-sticky-header) {\n /** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */\n --sticky-header-buffer: var(--sticky-header-height);\n}\n@media print {\n .lh-devtools .lh-container {\n overflow: unset;\n }\n}\n.lh-devtools .lh-sticky-header {\n /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */\n top: 0;\n}\n.lh-devtools .lh-element-screenshot__overlay {\n position: absolute;\n}\n\n@keyframes fadeIn {\n 0% { opacity: 0;}\n 100% { opacity: 0.6;}\n}\n\n.lh-root *, .lh-root *::before, .lh-root *::after {\n box-sizing: border-box;\n}\n\n.lh-root {\n font-family: var(--report-font-family);\n font-size: var(--report-font-size);\n margin: 0;\n line-height: var(--report-line-height);\n background: var(--report-background-color);\n color: var(--report-text-color);\n}\n\n.lh-root :focus-visible {\n outline: -webkit-focus-ring-color auto 3px;\n}\n.lh-root summary:focus {\n outline: none;\n box-shadow: 0 0 0 1px hsl(217, 89%, 61%);\n}\n\n.lh-root [hidden] {\n display: none !important;\n}\n\n.lh-root pre {\n margin: 0;\n}\n\n.lh-root pre,\n.lh-root code {\n font-family: var(--report-font-family-monospace);\n}\n\n.lh-root details > summary {\n cursor: pointer;\n}\n\n.lh-hidden {\n display: none !important;\n}\n\n.lh-container {\n /*\n Text wrapping in the report is so much FUN!\n We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely\n long non-breakable text (usually URLs) found in:\n 1. The footer\n 2. .lh-node (outerHTML)\n 3. .lh-code\n\n With that sorted, the next challenge is appropriate column sizing and text wrapping inside our\n .lh-details tables. Even more fun.\n * We don't want table headers (\"Potential Savings (ms)\") to wrap or their column values, but\n we'd be happy for the URL column to wrap if the URLs are particularly long.\n * We want the narrow columns to remain narrow, providing the most column width for URL\n * We don't want the table to extend past 100% width.\n * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,\n but they do not get any overflow:ellipsis treatment.\n */\n word-break: break-word;\n}\n\n.lh-audit-group a,\n.lh-category-header__description a,\n.lh-audit__description a,\n.lh-warnings a,\n.lh-footer a,\n.lh-table-column--link a {\n color: var(--link-color);\n}\n\n.lh-audit__description, .lh-audit__stackpack {\n --inner-audit-padding-right: var(--stackpack-padding-horizontal);\n padding-left: var(--audit-description-padding-left);\n padding-right: var(--inner-audit-padding-right);\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.lh-details {\n margin-top: var(--default-padding);\n margin-bottom: var(--default-padding);\n margin-left: var(--audit-description-padding-left);\n /* whatever the .lh-details side margins are */\n width: 100%;\n}\n\n.lh-audit__stackpack {\n display: flex;\n align-items: center;\n}\n\n.lh-audit__stackpack__img {\n max-width: 30px;\n margin-right: var(--default-padding)\n}\n\n/* Report header */\n\n.lh-report-icon {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n}\n.lh-report-icon[disabled] {\n opacity: 0.3;\n pointer-events: none;\n}\n\n.lh-report-icon::before {\n content: \"\";\n margin: 4px;\n background-repeat: no-repeat;\n width: var(--report-icon-size);\n height: var(--report-icon-size);\n opacity: 0.7;\n display: inline-block;\n vertical-align: middle;\n}\n.lh-report-icon:hover::before {\n opacity: 1;\n}\n.lh-dark .lh-report-icon::before {\n filter: invert(1);\n}\n.lh-report-icon--print::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"/><path fill=\"none\" d=\"M0 0h24v24H0z\"/></svg>');\n}\n.lh-report-icon--copy::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>');\n}\n.lh-report-icon--open::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z\"/></svg>');\n}\n.lh-report-icon--download::before {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>');\n}\n.lh-report-icon--dark::before {\n background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 100 125\"><path d=\"M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z\"/></svg>');\n}\n.lh-report-icon--treemap::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"black\"><path d=\"M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z\"/></svg>');\n}\n.lh-report-icon--date::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7 11h2v2H7v-2zm14-5v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 012 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z\"/></svg>');\n}\n.lh-report-icon--devices::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M4 6h18V4H4a2 2 0 00-2 2v11H0v3h14v-3H4V6zm19 2h-6a1 1 0 00-1 1v10c0 .6.5 1 1 1h6c.6 0 1-.5 1-1V9c0-.6-.5-1-1-1zm-1 9h-4v-7h4v7z\"/></svg>');\n}\n.lh-report-icon--world::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3c-.3-1.3-.8-2.5-1.4-3.6A8 8 0 0 1 18.9 8zm-7-4a14 14 0 0 1 2 4h-4a14 14 0 0 1 2-4zM4.3 14a8.2 8.2 0 0 1 0-4h3.3a16.5 16.5 0 0 0 0 4H4.3zm.8 2h3a14 14 0 0 0 1.3 3.6A8 8 0 0 1 5.1 16zm3-8H5a8 8 0 0 1 4.3-3.6L8 8zM12 20a14 14 0 0 1-2-4h4a14 14 0 0 1-2 4zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.6 14.6 0 0 1 0 4zm.3 5.6c.6-1.2 1-2.4 1.4-3.6h3a8 8 0 0 1-4.4 3.6zm1.8-5.6a16.5 16.5 0 0 0 0-4h3.3a8.2 8.2 0 0 1 0 4h-3.3z\"/></svg>');\n}\n.lh-report-icon--stopwatch::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.1-6.6L20.5 6l-1.4-1.4L17.7 6A9 9 0 0 0 3 13a9 9 0 1 0 16-5.6zm-7 12.6a7 7 0 1 1 0-14 7 7 0 0 1 0 14z\"/></svg>');\n}\n.lh-report-icon--networkspeed::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M15.9 5c-.2 0-.3 0-.4.2v.2L10.1 17a2 2 0 0 0-.2 1 2 2 0 0 0 4 .4l2.4-12.9c0-.3-.2-.5-.5-.5zM1 9l2 2c2.9-2.9 6.8-4 10.5-3.6l1.2-2.7C10 3.8 4.7 5.3 1 9zm20 2 2-2a15.4 15.4 0 0 0-5.6-3.6L17 8.2c1.5.7 2.9 1.6 4.1 2.8zm-4 4 2-2a9.9 9.9 0 0 0-2.7-1.9l-.5 3 1.2.9zM5 13l2 2a7.1 7.1 0 0 1 4-2l1.3-2.9C9.7 10.1 7 11 5 13z\"/></svg>');\n}\n.lh-report-icon--samples-one::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"7\" cy=\"14\" r=\"3\"/><path d=\"M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>');\n}\n.lh-report-icon--samples-many::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/><circle cx=\"7\" cy=\"14\" r=\"3\"/><circle cx=\"11\" cy=\"6\" r=\"3\"/></svg>');\n}\n.lh-report-icon--chrome::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-50 -50 562 562\"><path d=\"M256 25.6v25.6a204 204 0 0 1 144.8 60 204 204 0 0 1 60 144.8 204 204 0 0 1-60 144.8 204 204 0 0 1-144.8 60 204 204 0 0 1-144.8-60 204 204 0 0 1-60-144.8 204 204 0 0 1 60-144.8 204 204 0 0 1 144.8-60V0a256 256 0 1 0 0 512 256 256 0 0 0 0-512v25.6z\"/><path d=\"M256 179.2v25.6a51.3 51.3 0 0 1 0 102.4 51.3 51.3 0 0 1 0-102.4v-51.2a102.3 102.3 0 1 0-.1 204.7 102.3 102.3 0 0 0 .1-204.7v25.6z\"/><path d=\"M256 204.8h217.6a25.6 25.6 0 0 0 0-51.2H256a25.6 25.6 0 0 0 0 51.2m44.3 76.8L191.5 470.1a25.6 25.6 0 1 0 44.4 25.6l108.8-188.5a25.6 25.6 0 1 0-44.4-25.6m-88.6 0L102.9 93.2a25.7 25.7 0 0 0-35-9.4 25.7 25.7 0 0 0-9.4 35l108.8 188.5a25.7 25.7 0 0 0 35 9.4 25.9 25.9 0 0 0 9.4-35.1\"/></svg>');\n}\n.lh-report-icon--external::before {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.15 11.9a1.01 1.01 0 0 1-.743-.307 1.01 1.01 0 0 1-.306-.743v-7.7c0-.292.102-.54.306-.744a1.01 1.01 0 0 1 .744-.306H7v1.05H3.15v7.7h7.7V7h1.05v3.85c0 .291-.103.54-.307.743a1.01 1.01 0 0 1-.743.307h-7.7Zm2.494-2.8-.743-.744 5.206-5.206H8.401V2.1h3.5v3.5h-1.05V3.893L5.644 9.1Z\"/></svg>');\n}\n\n.lh-buttons {\n display: flex;\n flex-wrap: wrap;\n margin: var(--default-padding) 0;\n}\n.lh-button {\n height: 32px;\n border: 1px solid var(--report-border-color-secondary);\n border-radius: 3px;\n color: var(--link-color);\n background-color: var(--report-background-color);\n margin: 5px;\n}\n\n.lh-button:first-of-type {\n margin-left: 0;\n}\n\n/* Node */\n.lh-node__snippet {\n font-family: var(--report-font-family-monospace);\n color: var(--snippet-color);\n font-size: var(--report-monospace-font-size);\n line-height: 20px;\n}\n\n/* Score */\n\n.lh-audit__score-icon {\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n margin: var(--score-icon-margin);\n}\n\n.lh-audit--pass .lh-audit__display-text {\n color: var(--color-pass-secondary);\n}\n.lh-audit--pass .lh-audit__score-icon,\n.lh-scorescale-range--pass::before {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-audit--average .lh-audit__display-text {\n color: var(--color-average-secondary);\n}\n.lh-audit--average .lh-audit__score-icon,\n.lh-scorescale-range--average::before {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-audit--fail .lh-audit__display-text {\n color: var(--color-fail-secondary);\n}\n.lh-audit--fail .lh-audit__score-icon,\n.lh-audit--error .lh-audit__score-icon,\n.lh-scorescale-range--fail::before {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-audit--error .lh-audit__score-icon,\n.lh-metric--error .lh-metric__icon {\n background-image: var(--error-icon-url);\n background-repeat: no-repeat;\n background-position: center;\n border: none;\n}\n\n.lh-gauge__wrapper--fail .lh-gauge--error {\n background-image: var(--error-icon-url);\n background-repeat: no-repeat;\n background-position: center;\n transform: scale(0.5);\n top: var(--score-container-padding);\n}\n\n.lh-audit--manual .lh-audit__display-text,\n.lh-audit--notapplicable .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n.lh-audit--manual .lh-audit__score-icon,\n.lh-audit--notapplicable .lh-audit__score-icon {\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);\n border-radius: 100%;\n background: none;\n}\n\n.lh-audit--informative .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n\n.lh-audit--informative .lh-audit__score-icon {\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);\n border-radius: 100%;\n}\n\n.lh-audit__description,\n.lh-audit__stackpack {\n color: var(--report-text-color-secondary);\n}\n.lh-audit__adorn {\n border: 1px solid var(--color-gray-500);\n border-radius: 3px;\n margin: 0 3px;\n padding: 0 2px;\n line-height: 1.1;\n display: inline-block;\n font-size: 90%;\n color: var(--report-text-color-secondary);\n}\n\n.lh-category-header__description {\n text-align: center;\n color: var(--color-gray-700);\n margin: 0px auto;\n max-width: 400px;\n}\n\n\n.lh-audit__display-text,\n.lh-chevron-container {\n margin: 0 var(--audit-margin-horizontal);\n}\n.lh-chevron-container {\n margin-right: 0;\n}\n\n.lh-audit__title-and-text {\n flex: 1;\n}\n\n.lh-audit__title-and-text code {\n color: var(--snippet-color);\n font-size: var(--report-monospace-font-size);\n}\n\n/* Prepend display text with em dash separator. */\n.lh-audit__display-text:not(:empty):before {\n content: '—';\n margin-right: var(--audit-margin-horizontal);\n}\n\n/* Expandable Details (Audit Groups, Audits) */\n.lh-audit__header {\n display: flex;\n align-items: center;\n padding: var(--default-padding);\n}\n\n\n.lh-metricfilter {\n display: grid;\n justify-content: end;\n align-items: center;\n grid-auto-flow: column;\n gap: 4px;\n color: var(--color-gray-700);\n}\n\n.lh-metricfilter__radio {\n /*\n * Instead of hiding, position offscreen so it's still accessible to screen readers\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1439785\n */\n position: fixed;\n left: -9999px;\n}\n.lh-metricfilter input[type='radio']:focus-visible + label {\n outline: -webkit-focus-ring-color auto 1px;\n}\n\n.lh-metricfilter__label {\n display: inline-flex;\n padding: 0 4px;\n height: 16px;\n text-decoration: underline;\n align-items: center;\n cursor: pointer;\n font-size: 90%;\n}\n\n.lh-metricfilter__label--active {\n background: var(--color-blue-primary);\n color: var(--color-white);\n border-radius: 3px;\n text-decoration: none;\n}\n/* Give the 'All' choice a more muted display */\n.lh-metricfilter__label--active[for=\"metric-All\"] {\n background-color: var(--color-blue-200) !important;\n color: black !important;\n}\n\n.lh-metricfilter__text {\n margin-right: 8px;\n}\n\n/* If audits are filtered, hide the itemcount for Passed Audits… */\n.lh-category--filtered .lh-audit-group .lh-audit-group__itemcount {\n display: none;\n}\n\n\n.lh-audit__header:hover {\n background-color: var(--color-hover);\n}\n\n/* We want to hide the browser's default arrow marker on summary elements. Admittedly, it's complicated. */\n.lh-root details > summary {\n /* Blink 89+ and Firefox will hide the arrow when display is changed from (new) default of `list-item` to block. https://chromestatus.com/feature/6730096436051968*/\n display: block;\n}\n/* Safari and Blink <=88 require using the -webkit-details-marker selector */\n.lh-root details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* Perf Metric */\n\n.lh-metrics-container {\n display: grid;\n grid-auto-rows: 1fr;\n grid-template-columns: 1fr 1fr;\n grid-column-gap: var(--report-line-height);\n margin-bottom: var(--default-padding);\n}\n\n.lh-metric {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(-n+2) {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-metric__innerwrap {\n display: grid;\n /**\n * Icon -- Metric Name\n * -- Metric Value\n */\n grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;\n align-items: center;\n padding: var(--default-padding);\n}\n\n.lh-metric__details {\n order: -1;\n}\n\n.lh-metric__title {\n flex: 1;\n}\n\n.lh-calclink {\n padding-left: calc(1ex / 3);\n}\n\n.lh-metric__description {\n display: none;\n grid-column-start: 2;\n grid-column-end: 4;\n color: var(--report-text-color-secondary);\n}\n\n.lh-metric__value {\n font-size: var(--metric-value-font-size);\n margin: calc(var(--default-padding) / 2) 0;\n white-space: nowrap; /* No wrapping between metric value and the icon */\n grid-column-start: 2;\n}\n\n\n@media screen and (max-width: 535px) {\n .lh-metrics-container {\n display: block;\n }\n\n .lh-metric {\n border-bottom: none !important;\n }\n .lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {\n border-bottom: 1px solid var(--report-border-color-secondary) !important;\n }\n\n /* Change the grid to 3 columns for narrow viewport. */\n .lh-metric__innerwrap {\n /**\n * Icon -- Metric Name -- Metric Value\n */\n grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;\n }\n .lh-metric__value {\n justify-self: end;\n grid-column-start: unset;\n }\n}\n\n/* No-JS toggle switch */\n/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */\n .lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description {\n display: block;\n}\n\n/* TODO get rid of the SVGS and clean up these some more */\n.lh-metrics-toggle__input {\n opacity: 0;\n position: absolute;\n right: 0;\n top: 0px;\n}\n\n.lh-metrics-toggle__input + div > label > .lh-metrics-toggle__labeltext--hide,\n.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--show {\n display: none;\n}\n.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--hide {\n display: inline;\n}\n.lh-metrics-toggle__input:focus + div > label {\n outline: -webkit-focus-ring-color auto 3px;\n}\n\n.lh-metrics-toggle__label {\n cursor: pointer;\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n color: var(--color-gray-700);\n}\n\n/* Pushes the metric description toggle button to the right. */\n.lh-audit-group--metrics .lh-audit-group__header {\n display: flex;\n justify-content: space-between;\n}\n\n.lh-metric__icon,\n.lh-scorescale-range::before {\n content: '';\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n display: inline-block;\n margin: var(--score-icon-margin);\n}\n\n.lh-metric--pass .lh-metric__value {\n color: var(--color-pass-secondary);\n}\n.lh-metric--pass .lh-metric__icon {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-metric--average .lh-metric__value {\n color: var(--color-average-secondary);\n}\n.lh-metric--average .lh-metric__icon {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-metric--fail .lh-metric__value {\n color: var(--color-fail-secondary);\n}\n.lh-metric--fail .lh-metric__icon {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-metric--error .lh-metric__value,\n.lh-metric--error .lh-metric__description {\n color: var(--color-fail-secondary);\n}\n\n/* Filmstrip */\n\n.lh-filmstrip-container {\n /* smaller gap between metrics and filmstrip */\n margin: -8px auto 0 auto;\n}\n\n.lh-filmstrip {\n display: flex;\n justify-content: space-between;\n justify-items: center;\n margin-bottom: var(--default-padding);\n width: 100%;\n}\n\n.lh-filmstrip__frame {\n overflow: hidden;\n line-height: 0;\n}\n\n.lh-filmstrip__thumbnail {\n border: 1px solid var(--report-border-color-secondary);\n max-height: 150px;\n max-width: 120px;\n}\n\n/* Audit */\n\n.lh-audit {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n\n/* Apply border-top to just the first audit. */\n.lh-audit {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n.lh-audit ~ .lh-audit {\n border-top: none;\n}\n\n\n.lh-audit--error .lh-audit__display-text {\n color: var(--color-fail-secondary);\n}\n\n/* Audit Group */\n\n.lh-audit-group {\n margin-bottom: var(--audit-group-margin-bottom);\n position: relative;\n}\n.lh-audit-group--metrics {\n margin-bottom: calc(var(--audit-group-margin-bottom) / 2);\n}\n\n.lh-audit-group__header::before {\n /* By default, groups don't get an icon */\n content: none;\n width: var(--pwa-icon-size);\n height: var(--pwa-icon-size);\n margin: var(--pwa-icon-margin);\n display: inline-block;\n vertical-align: middle;\n}\n\n/* Style the \"over budget\" columns red. */\n.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(4),\n.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(5),\n.lh-audit-group--budgets #timing-budget tbody tr td:nth-child(3) {\n color: var(--color-red-700);\n}\n\n/* Align the \"over budget request count\" text to be close to the \"over budget bytes\" column. */\n.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){\n text-align: right;\n}\n\n.lh-audit-group--budgets .lh-details--budget {\n width: 100%;\n margin: 0 0 var(--default-padding);\n}\n\n.lh-audit-group--pwa-installable .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-installable-gray-url);\n}\n.lh-audit-group--pwa-optimized .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-optimized-gray-url);\n}\n.lh-audit-group--pwa-installable.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-installable-color-url);\n}\n.lh-audit-group--pwa-optimized.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-optimized-color-url);\n}\n\n.lh-audit-group--metrics .lh-audit-group__summary {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.lh-audit-group__summary {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.lh-audit-group__header .lh-chevron {\n margin-top: calc((var(--report-line-height) - 5px) / 2);\n}\n\n.lh-audit-group__header {\n letter-spacing: 0.8px;\n padding: var(--default-padding);\n padding-left: 0;\n}\n\n.lh-audit-group__header, .lh-audit-group__summary {\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n color: var(--color-gray-700);\n}\n\n.lh-audit-group__title {\n text-transform: uppercase;\n font-weight: 500;\n}\n\n.lh-audit-group__itemcount {\n color: var(--color-gray-600);\n}\n\n.lh-audit-group__footer {\n color: var(--color-gray-600);\n display: block;\n margin-top: var(--default-padding);\n}\n\n.lh-details,\n.lh-category-header__description,\n.lh-audit-group__footer {\n font-size: var(--report-font-size-secondary);\n line-height: var(--report-line-height-secondary);\n}\n\n.lh-audit-explanation {\n margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2) var(--audit-margin-horizontal);\n line-height: var(--audit-explanation-line-height);\n display: inline-block;\n}\n\n.lh-audit--fail .lh-audit-explanation {\n color: var(--color-fail-secondary);\n}\n\n/* Report */\n.lh-list > :not(:last-child) {\n margin-bottom: calc(var(--default-padding) * 2);\n}\n\n.lh-header-container {\n display: block;\n margin: 0 auto;\n position: relative;\n word-wrap: break-word;\n}\n\n.lh-header-container .lh-scores-wrapper {\n border-bottom: 1px solid var(--color-gray-200);\n}\n\n\n.lh-report {\n min-width: var(--report-content-min-width);\n}\n\n.lh-exception {\n font-size: large;\n}\n\n.lh-code {\n white-space: normal;\n margin-top: 0;\n font-size: var(--report-monospace-font-size);\n}\n\n.lh-warnings {\n --item-margin: calc(var(--report-line-height) / 6);\n color: var(--color-average-secondary);\n margin: var(--audit-padding-vertical) 0;\n padding: var(--default-padding)\n var(--default-padding)\n var(--default-padding)\n calc(var(--audit-description-padding-left));\n background-color: var(--toplevel-warning-background-color);\n}\n.lh-warnings span {\n font-weight: bold;\n}\n\n.lh-warnings--toplevel {\n --item-margin: calc(var(--header-line-height) / 4);\n color: var(--toplevel-warning-text-color);\n margin-left: auto;\n margin-right: auto;\n max-width: var(--report-content-max-width-minus-edge-gap);\n padding: var(--toplevel-warning-padding);\n border-radius: 8px;\n}\n\n.lh-warnings__msg {\n color: var(--toplevel-warning-message-text-color);\n margin: 0;\n}\n\n.lh-warnings ul {\n margin: 0;\n}\n.lh-warnings li {\n margin: var(--item-margin) 0;\n}\n.lh-warnings li:last-of-type {\n margin-bottom: 0;\n}\n\n.lh-scores-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n.lh-scores-header__solo {\n padding: 0;\n border: 0;\n}\n\n/* Gauge */\n\n.lh-gauge__wrapper--pass {\n color: var(--color-pass-secondary);\n fill: var(--color-pass);\n stroke: var(--color-pass);\n}\n\n.lh-gauge__wrapper--average {\n color: var(--color-average-secondary);\n fill: var(--color-average);\n stroke: var(--color-average);\n}\n\n.lh-gauge__wrapper--fail {\n color: var(--color-fail-secondary);\n fill: var(--color-fail);\n stroke: var(--color-fail);\n}\n\n.lh-gauge__wrapper--not-applicable {\n color: var(--color-not-applicable);\n fill: var(--color-not-applicable);\n stroke: var(--color-not-applicable);\n}\n\n.lh-fraction__wrapper .lh-fraction__content::before {\n content: '';\n height: var(--score-icon-size);\n width: var(--score-icon-size);\n margin: var(--score-icon-margin);\n display: inline-block;\n}\n.lh-fraction__wrapper--pass .lh-fraction__content {\n color: var(--color-pass-secondary);\n}\n.lh-fraction__wrapper--pass .lh-fraction__background {\n background-color: var(--color-pass);\n}\n.lh-fraction__wrapper--pass .lh-fraction__content::before {\n background-color: var(--color-pass);\n border-radius: 50%;\n}\n.lh-fraction__wrapper--average .lh-fraction__content {\n color: var(--color-average-secondary);\n}\n.lh-fraction__wrapper--average .lh-fraction__background,\n.lh-fraction__wrapper--average .lh-fraction__content::before {\n background-color: var(--color-average);\n}\n.lh-fraction__wrapper--fail .lh-fraction__content {\n color: var(--color-fail);\n}\n.lh-fraction__wrapper--fail .lh-fraction__background {\n background-color: var(--color-fail);\n}\n.lh-fraction__wrapper--fail .lh-fraction__content::before {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n.lh-fraction__wrapper--null .lh-fraction__content {\n color: var(--color-gray-700);\n}\n.lh-fraction__wrapper--null .lh-fraction__background {\n background-color: var(--color-gray-700);\n}\n.lh-fraction__wrapper--null .lh-fraction__content::before {\n border-radius: 50%;\n border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-700);\n}\n\n.lh-fraction__background {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: calc(var(--gauge-circle-size) / 2);\n opacity: 0.1;\n z-index: -1;\n}\n\n.lh-fraction__content-wrapper {\n height: var(--gauge-circle-size);\n display: flex;\n align-items: center;\n}\n\n.lh-fraction__content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n font-size: calc(0.3 * var(--gauge-circle-size));\n line-height: calc(0.4 * var(--gauge-circle-size));\n width: max-content;\n min-width: calc(1.5 * var(--gauge-circle-size));\n padding: calc(0.1 * var(--gauge-circle-size)) calc(0.2 * var(--gauge-circle-size));\n --score-icon-size: calc(0.21 * var(--gauge-circle-size));\n --score-icon-margin: 0 calc(0.15 * var(--gauge-circle-size)) 0 0;\n}\n\n.lh-gauge {\n stroke-linecap: round;\n width: var(--gauge-circle-size);\n height: var(--gauge-circle-size);\n}\n\n.lh-category .lh-gauge {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n.lh-gauge-base {\n opacity: 0.1;\n}\n\n.lh-gauge-arc {\n fill: none;\n transform-origin: 50% 50%;\n animation: load-gauge var(--transition-length) ease both;\n animation-delay: 250ms;\n}\n\n.lh-gauge__svg-wrapper {\n position: relative;\n height: var(--gauge-circle-size);\n}\n.lh-category .lh-gauge__svg-wrapper,\n.lh-category .lh-fraction__wrapper {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n/* The plugin badge overlay */\n.lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size);\n height: var(--plugin-badge-size);\n background-color: var(--plugin-badge-background-color);\n background-image: var(--plugin-icon-url);\n background-repeat: no-repeat;\n background-size: var(--plugin-icon-size);\n background-position: 58% 50%;\n content: \"\";\n position: absolute;\n right: -6px;\n bottom: 0px;\n display: block;\n z-index: 100;\n box-shadow: 0 0 4px rgba(0,0,0,.2);\n border-radius: 25%;\n}\n.lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size-big);\n height: var(--plugin-badge-size-big);\n}\n\n@keyframes load-gauge {\n from { stroke-dasharray: 0 352; }\n}\n\n.lh-gauge__percentage {\n width: 100%;\n height: var(--gauge-circle-size);\n line-height: var(--gauge-circle-size);\n position: absolute;\n font-family: var(--report-font-family-monospace);\n font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);\n text-align: center;\n top: var(--score-container-padding);\n}\n\n.lh-category .lh-gauge__percentage {\n --gauge-circle-size: var(--gauge-circle-size-big);\n --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);\n}\n\n.lh-gauge__wrapper,\n.lh-fraction__wrapper {\n position: relative;\n display: flex;\n align-items: center;\n flex-direction: column;\n text-decoration: none;\n padding: var(--score-container-padding);\n\n --transition-length: 1s;\n\n /* Contain the layout style paint & layers during animation*/\n contain: content;\n will-change: opacity; /* Only using for layer promotion */\n}\n\n.lh-gauge__label,\n.lh-fraction__label {\n font-size: var(--gauge-label-font-size);\n font-weight: 500;\n line-height: var(--gauge-label-line-height);\n margin-top: 10px;\n text-align: center;\n color: var(--report-text-color);\n word-break: keep-all;\n}\n\n/* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */\n.lh-category .lh-gauge__label,\n.lh-category .lh-fraction__label {\n --gauge-label-font-size: var(--gauge-label-font-size-big);\n --gauge-label-line-height: var(--gauge-label-line-height-big);\n margin-top: 14px;\n}\n\n.lh-scores-header .lh-gauge__wrapper,\n.lh-scores-header .lh-fraction__wrapper,\n.lh-scores-header .lh-gauge--pwa__wrapper,\n.lh-sticky-header .lh-gauge__wrapper,\n.lh-sticky-header .lh-fraction__wrapper,\n.lh-sticky-header .lh-gauge--pwa__wrapper {\n width: var(--gauge-wrapper-width);\n}\n\n.lh-scorescale {\n display: inline-flex;\n\n gap: calc(var(--default-padding) * 4);\n margin: 16px auto 0 auto;\n font-size: var(--report-font-size-secondary);\n color: var(--color-gray-700);\n\n}\n\n.lh-scorescale-range {\n display: flex;\n align-items: center;\n font-family: var(--report-font-family-monospace);\n white-space: nowrap;\n}\n\n.lh-category-header__finalscreenshot .lh-scorescale {\n border: 0;\n display: flex;\n justify-content: center;\n}\n\n.lh-category-header__finalscreenshot .lh-scorescale-range {\n font-family: unset;\n font-size: 12px;\n}\n\n.lh-scorescale-wrap {\n display: contents;\n}\n\n/* Hide category score gauages if it's a single category report */\n.lh-header--solo-category .lh-scores-wrapper {\n display: none;\n}\n\n\n.lh-categories {\n width: 100%;\n}\n\n.lh-category {\n padding: var(--category-padding);\n max-width: var(--report-content-max-width);\n margin: 0 auto;\n\n scroll-margin-top: calc(var(--sticky-header-buffer) - 1em);\n}\n\n.lh-category-wrapper {\n border-bottom: 1px solid var(--color-gray-200);\n}\n.lh-category-wrapper:last-of-type {\n border-bottom: 0;\n}\n\n.lh-category-header {\n margin-bottom: var(--section-padding-vertical);\n}\n\n.lh-category-header .lh-score__gauge {\n max-width: 400px;\n width: auto;\n margin: 0px auto;\n}\n\n.lh-category-header__finalscreenshot {\n display: grid;\n grid-template: none / 1fr 1px 1fr;\n justify-items: center;\n align-items: center;\n gap: var(--report-line-height);\n min-height: 288px;\n margin-bottom: var(--default-padding);\n}\n\n.lh-final-ss-image {\n /* constrain the size of the image to not be too large */\n max-height: calc(var(--gauge-circle-size-big) * 2.8);\n max-width: calc(var(--gauge-circle-size-big) * 3.5);\n border: 1px solid var(--color-gray-200);\n padding: 4px;\n border-radius: 3px;\n display: block;\n}\n\n.lh-category-headercol--separator {\n background: var(--color-gray-200);\n width: 1px;\n height: var(--gauge-circle-size-big);\n}\n\n@media screen and (max-width: 780px) {\n .lh-category-header__finalscreenshot {\n grid-template: 1fr 1fr / none\n }\n .lh-category-headercol--separator {\n display: none;\n }\n}\n\n\n/* 964 fits the min-width of the filmstrip */\n@media screen and (max-width: 964px) {\n .lh-report {\n margin-left: 0;\n width: 100%;\n }\n}\n\n@media print {\n body {\n -webkit-print-color-adjust: exact; /* print background colors */\n }\n .lh-container {\n display: block;\n }\n .lh-report {\n margin-left: 0;\n padding-top: 0;\n }\n .lh-categories {\n margin-top: 0;\n }\n}\n\n.lh-table {\n position: relative;\n border-collapse: separate;\n border-spacing: 0;\n /* Can't assign padding to table, so shorten the width instead. */\n width: calc(100% - var(--audit-description-padding-left) - var(--stackpack-padding-horizontal));\n border: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-table thead th {\n position: sticky;\n top: var(--sticky-header-buffer);\n z-index: 1;\n background-color: var(--report-background-color);\n border-bottom: 1px solid var(--report-border-color-secondary);\n font-weight: normal;\n color: var(--color-gray-600);\n /* See text-wrapping comment on .lh-container. */\n word-break: normal;\n}\n\n.lh-row--group {\n background-color: var(--table-group-header-background-color);\n}\n\n.lh-row--group td {\n font-weight: bold;\n font-size: 1.05em;\n color: var(--table-group-header-text-color);\n}\n\n.lh-row--group td:first-child {\n display: block;\n min-width: max-content;\n font-weight: normal;\n}\n\n.lh-row--group .lh-text {\n color: inherit;\n text-decoration: none;\n display: inline-block;\n}\n\n.lh-row--group a.lh-link:hover {\n text-decoration: underline;\n}\n\n.lh-row--group .lh-audit__adorn {\n text-transform: capitalize;\n font-weight: normal;\n padding: 2px 3px 1px 3px;\n}\n\n.lh-row--group .lh-audit__adorn1p {\n color: var(--link-color);\n border-color: var(--link-color);\n}\n\n.lh-row--group .lh-report-icon--external::before {\n content: \"\";\n background-repeat: no-repeat;\n width: 14px;\n height: 16px;\n opacity: 0.7;\n display: inline-block;\n vertical-align: middle;\n}\n\n.lh-row--group .lh-report-icon--external {\n visibility: hidden;\n}\n\n.lh-row--group:hover .lh-report-icon--external {\n visibility: visible;\n}\n\n.lh-dark .lh-report-icon--external::before {\n filter: invert(1);\n}\n\n/** Manages indentation of two-level and three-level nested adjacent rows */\n\n.lh-row--group ~ [data-entity]:not(.lh-row--group) td:first-child {\n padding-left: 20px;\n}\n\n.lh-row--group ~ [data-entity]:not(.lh-row--group) ~ .lh-sub-item-row td:first-child {\n padding-left: 40px;\n}\n\n.lh-row--even {\n background-color: var(--table-group-header-background-color);\n}\n.lh-row--hidden {\n display: none;\n}\n\n.lh-table th,\n.lh-table td {\n padding: var(--default-padding);\n}\n\n.lh-table tr {\n vertical-align: middle;\n}\n\n.lh-table tr:hover {\n background-color: var(--table-higlight-background-color);\n}\n\n/* Looks unnecessary, but mostly for keeping the <th>s left-aligned */\n.lh-table-column--text,\n.lh-table-column--source-location,\n.lh-table-column--url,\n/* .lh-table-column--thumbnail, */\n/* .lh-table-column--empty,*/\n.lh-table-column--code,\n.lh-table-column--node {\n text-align: left;\n}\n\n.lh-table-column--code {\n min-width: 100px;\n}\n\n.lh-table-column--bytes,\n.lh-table-column--timespanMs,\n.lh-table-column--ms,\n.lh-table-column--numeric {\n text-align: right;\n word-break: normal;\n}\n\n\n\n.lh-table .lh-table-column--thumbnail {\n width: var(--image-preview-size);\n}\n\n.lh-table-column--url {\n min-width: 250px;\n}\n\n.lh-table-column--text {\n min-width: 80px;\n}\n\n/* Keep columns narrow if they follow the URL column */\n/* 12% was determined to be a decent narrow width, but wide enough for column headings */\n.lh-table-column--url + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--ms,\n.lh-table-column--url + .lh-table-column--ms + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--timespanMs {\n width: 12%;\n}\n\n.lh-text__url-host {\n display: inline;\n}\n\n.lh-text__url-host {\n margin-left: calc(var(--report-font-size) / 2);\n opacity: 0.6;\n font-size: 90%\n}\n\n.lh-thumbnail {\n object-fit: cover;\n width: var(--image-preview-size);\n height: var(--image-preview-size);\n display: block;\n}\n\n.lh-unknown pre {\n overflow: scroll;\n border: solid 1px var(--color-gray-200);\n}\n\n.lh-text__url > a {\n color: inherit;\n text-decoration: none;\n}\n\n.lh-text__url > a:hover {\n text-decoration: underline dotted #999;\n}\n\n.lh-sub-item-row {\n margin-left: 20px;\n margin-bottom: 0;\n color: var(--color-gray-700);\n}\n\n.lh-sub-item-row td {\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: 20px;\n}\n\n/* Chevron\n https://codepen.io/paulirish/pen/LmzEmK\n */\n.lh-chevron {\n --chevron-angle: 42deg;\n /* Edge doesn't support transform: rotate(calc(...)), so we define it here */\n --chevron-angle-right: -42deg;\n width: var(--chevron-size);\n height: var(--chevron-size);\n margin-top: calc((var(--report-line-height) - 12px) / 2);\n}\n\n.lh-chevron__lines {\n transition: transform 0.4s;\n transform: translateY(var(--report-line-height));\n}\n.lh-chevron__line {\n stroke: var(--chevron-line-stroke);\n stroke-width: var(--chevron-size);\n stroke-linecap: square;\n transform-origin: 50%;\n transform: rotate(var(--chevron-angle));\n transition: transform 300ms, stroke 300ms;\n}\n\n.lh-expandable-details .lh-chevron__line-right,\n.lh-expandable-details[open] .lh-chevron__line-left {\n transform: rotate(var(--chevron-angle-right));\n}\n\n.lh-expandable-details[open] .lh-chevron__line-right {\n transform: rotate(var(--chevron-angle));\n}\n\n\n.lh-expandable-details[open] .lh-chevron__lines {\n transform: translateY(calc(var(--chevron-size) * -1));\n}\n\n.lh-expandable-details[open] {\n animation: 300ms openDetails forwards;\n padding-bottom: var(--default-padding);\n}\n\n@keyframes openDetails {\n from {\n outline: 1px solid var(--report-background-color);\n }\n to {\n outline: 1px solid;\n box-shadow: 0 2px 4px rgba(0, 0, 0, .24);\n }\n}\n\n@media screen and (max-width: 780px) {\n /* no black outline if we're not confident the entire table can be displayed within bounds */\n .lh-expandable-details[open] {\n animation: none;\n }\n}\n\n.lh-expandable-details[open] summary, details.lh-clump > summary {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\ndetails.lh-clump[open] > summary {\n border-bottom-width: 0;\n}\n\n\n\ndetails .lh-clump-toggletext--hide,\ndetails[open] .lh-clump-toggletext--show { display: none; }\ndetails[open] .lh-clump-toggletext--hide { display: block;}\n\n\n/* Tooltip */\n.lh-tooltip-boundary {\n position: relative;\n}\n\n.lh-tooltip {\n position: absolute;\n display: none; /* Don't retain these layers when not needed */\n opacity: 0;\n background: #ffffff;\n white-space: pre-line; /* Render newlines in the text */\n min-width: 246px;\n max-width: 275px;\n padding: 15px;\n border-radius: 5px;\n text-align: initial;\n line-height: 1.4;\n}\n/* shrink tooltips to not be cutoff on left edge of narrow viewports\n 45vw is chosen to be ~= width of the left column of metrics\n*/\n@media screen and (max-width: 535px) {\n .lh-tooltip {\n min-width: 45vw;\n padding: 3vw;\n }\n}\n\n.lh-tooltip-boundary:hover .lh-tooltip {\n display: block;\n animation: fadeInTooltip 250ms;\n animation-fill-mode: forwards;\n animation-delay: 850ms;\n bottom: 100%;\n z-index: 1;\n will-change: opacity;\n right: 0;\n pointer-events: none;\n}\n\n.lh-tooltip::before {\n content: \"\";\n border: solid transparent;\n border-bottom-color: #fff;\n border-width: 10px;\n position: absolute;\n bottom: -20px;\n right: 6px;\n transform: rotate(180deg);\n pointer-events: none;\n}\n\n@keyframes fadeInTooltip {\n 0% { opacity: 0; }\n 75% { opacity: 1; }\n 100% { opacity: 1; filter: drop-shadow(1px 0px 1px #aaa) drop-shadow(0px 2px 4px hsla(206, 6%, 25%, 0.15)); pointer-events: auto; }\n}\n\n/* Element screenshot */\n.lh-element-screenshot {\n float: left;\n margin-right: 20px;\n}\n.lh-element-screenshot__content {\n overflow: hidden;\n min-width: 110px;\n display: flex;\n justify-content: center;\n background-color: var(--report-background-color);\n}\n.lh-element-screenshot__image {\n position: relative;\n /* Set by ElementScreenshotRenderer.installFullPageScreenshotCssVariable */\n background-image: var(--element-screenshot-url);\n outline: 2px solid #777;\n background-color: white;\n background-repeat: no-repeat;\n}\n.lh-element-screenshot__mask {\n position: absolute;\n background: #555;\n opacity: 0.8;\n}\n.lh-element-screenshot__element-marker {\n position: absolute;\n outline: 2px solid var(--color-lime-400);\n}\n.lh-element-screenshot__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2000; /* .lh-topbar is 1000 */\n background: var(--screenshot-overlay-background);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: zoom-out;\n}\n\n.lh-element-screenshot__overlay .lh-element-screenshot {\n margin-right: 0; /* clearing margin used in thumbnail case */\n outline: 1px solid var(--color-gray-700);\n}\n\n.lh-screenshot-overlay--enabled .lh-element-screenshot {\n cursor: zoom-out;\n}\n.lh-screenshot-overlay--enabled .lh-node .lh-element-screenshot {\n cursor: zoom-in;\n}\n\n\n.lh-meta__items {\n --meta-icon-size: calc(var(--report-icon-size) * 0.667);\n padding: var(--default-padding);\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n background-color: var(--env-item-background-color);\n border-radius: 3px;\n margin: 0 0 var(--default-padding) 0;\n font-size: 12px;\n column-gap: var(--default-padding);\n color: var(--color-gray-700);\n}\n\n.lh-meta__item {\n display: block;\n list-style-type: none;\n position: relative;\n padding: 0 0 0 calc(var(--meta-icon-size) + var(--default-padding) * 2);\n cursor: unset; /* disable pointer cursor from report-icon */\n}\n\n.lh-meta__item.lh-tooltip-boundary {\n text-decoration: dotted underline var(--color-gray-500);\n cursor: help;\n}\n\n.lh-meta__item.lh-report-icon::before {\n position: absolute;\n left: var(--default-padding);\n width: var(--meta-icon-size);\n height: var(--meta-icon-size);\n}\n\n.lh-meta__item.lh-report-icon:hover::before {\n opacity: 0.7;\n}\n\n.lh-meta__item .lh-tooltip {\n color: var(--color-gray-800);\n}\n\n.lh-meta__item .lh-tooltip::before {\n right: auto; /* Set the tooltip arrow to the leftside */\n left: 6px;\n}\n\n/* Change the grid for narrow viewport. */\n@media screen and (max-width: 640px) {\n .lh-meta__items {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media screen and (max-width: 535px) {\n .lh-meta__items {\n display: block;\n }\n}\n\n/* Explodey gauge */\n\n.lh-exp-gauge-component {\n margin-bottom: 10px;\n}\n\n.lh-exp-gauge-component circle {\n stroke: currentcolor;\n r: var(--radius);\n}\n\n.lh-exp-gauge-component text {\n font-size: calc(var(--radius) * 0.2);\n}\n\n.lh-exp-gauge-component .lh-exp-gauge {\n margin: 0 auto;\n width: 225px;\n stroke-width: var(--stroke-width);\n stroke-linecap: round;\n\n /* for better rendering perf */\n contain: strict;\n height: 225px;\n will-change: transform;\n}\n.lh-exp-gauge-component .lh-exp-gauge--faded {\n opacity: 0.1;\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper {\n font-family: var(--report-font-family-monospace);\n text-align: center;\n text-decoration: none;\n transition: .3s;\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass {\n color: var(--color-pass);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--average {\n color: var(--color-average);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail {\n color: var(--color-fail);\n}\n.lh-exp-gauge-component .state--expanded {\n transition: color .3s;\n}\n.lh-exp-gauge-component .state--highlight {\n color: var(--color-highlight);\n}\n.lh-exp-gauge-component .lh-exp-gauge__svg-wrapper {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__label {\n fill: var(--report-text-color);\n font-family: var(--report-font-family);\n font-size: 12px;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__cutout {\n opacity: .999;\n transition: opacity .3s;\n}\n.lh-exp-gauge-component .state--highlight .lh-exp-gauge__cutout {\n opacity: 0;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__inner {\n color: inherit;\n}\n.lh-exp-gauge-component .lh-exp-gauge__base {\n fill: currentcolor;\n}\n\n\n.lh-exp-gauge-component .lh-exp-gauge__arc {\n fill: none;\n transition: opacity .3s;\n}\n.lh-exp-gauge-component .lh-exp-gauge__arc--metric {\n color: var(--metric-color);\n stroke-dashoffset: var(--metric-offset);\n opacity: 0.3;\n}\n.lh-exp-gauge-component .lh-exp-gauge-hovertarget {\n color: currentcolor;\n opacity: 0.001;\n stroke-linecap: butt;\n stroke-width: 24;\n /* hack. move the hover target out of the center. ideally i tweak the r instead but that rquires considerably more math. */\n transform: scale(1.15);\n}\n.lh-exp-gauge-component .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n opacity: 0;\n stroke-dasharray: 0 calc(var(--circle-meas) * var(--radius));\n transition: 0s .005s;\n}\n.lh-exp-gauge-component .state--expanded .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n opacity: .999;\n stroke-dasharray: var(--metric-array);\n transition: 0.3s; /* calc(.005s + var(--i)*.05s); entrace animation */\n}\n.lh-exp-gauge-component .state--expanded .lh-exp-gauge__inner .lh-exp-gauge__arc {\n opacity: 0;\n}\n\n\n.lh-exp-gauge-component .lh-exp-gauge__percentage {\n text-anchor: middle;\n dominant-baseline: middle;\n opacity: .999;\n font-size: calc(var(--radius) * 0.625);\n transition: opacity .3s ease-in;\n}\n.lh-exp-gauge-component .state--highlight .lh-exp-gauge__percentage {\n opacity: 0;\n}\n\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail .lh-exp-gauge__percentage {\n fill: var(--color-fail);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--average .lh-exp-gauge__percentage {\n fill: var(--color-average);\n}\n.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass .lh-exp-gauge__percentage {\n fill: var(--color-pass);\n}\n\n.lh-exp-gauge-component .lh-cover {\n fill: none;\n opacity: .001;\n pointer-events: none;\n}\n.lh-exp-gauge-component .state--expanded .lh-cover {\n pointer-events: auto;\n}\n\n.lh-exp-gauge-component .metric {\n transform: scale(var(--scale-initial));\n opacity: 0;\n transition: transform .1s .2s ease-out, opacity .3s ease-out;\n pointer-events: none;\n}\n.lh-exp-gauge-component .metric text {\n pointer-events: none;\n}\n.lh-exp-gauge-component .metric__value {\n fill: currentcolor;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.lh-exp-gauge-component .state--expanded .metric {\n transform: scale(1);\n opacity: .999;\n transition: transform .3s ease-out, opacity .3s ease-in, stroke-width .1s ease-out;\n transition-delay: calc(var(--i)*.05s);\n pointer-events: auto;\n}\n.lh-exp-gauge-component .state--highlight .metric {\n opacity: .3;\n}\n.lh-exp-gauge-component .state--highlight .metric--highlight {\n opacity: .999;\n stroke-width: calc(1.5*var(--stroke-width));\n}\n.lh-exp-gauge-component .state--highlight .metric--highlight .metric__value {\n opacity: 0.999;\n}\n\n\n/*\n the initial first load peek\n*/\n.lh-exp-gauge-component .lh-exp-gauge__bg { /* needed for the use zindex stacking w/ transparency */\n fill: var(--report-background-color);\n stroke: var(--report-background-color);\n}\n.lh-exp-gauge-component .state--peek .metric {\n transition-delay: 0ms;\n animation: peek var(--peek-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96);\n animation-fill-mode: forwards;\n}\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__inner .lh-exp-gauge__arc {\n opacity: 1;\n}\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc.lh-exp-gauge--faded {\n opacity: 0.3; /* just a tad stronger cuz its fighting with a big solid arg */\n}\n/* do i need to set expanded and override this? */\n.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {\n transition: opacity 0.3s;\n}\n.lh-exp-gauge-component .state--peek {\n color: unset;\n}\n.lh-exp-gauge-component .state--peek .metric__label {\n display: none;\n}\n\n.lh-exp-gauge-component .metric__label {\n fill: var(--report-text-color);\n}\n\n@keyframes peek {\n /* biggest it should go is 0.92. smallest is 0.8 */\n 0% {\n transform: scale(0.8);\n opacity: 0.8;\n }\n\n 50% {\n transform: scale(0.92);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0.8);\n opacity: 0.8;\n }\n}\n\n.lh-exp-gauge-component .wrapper {\n width: 620px;\n}\n\n/*# sourceURL=report-styles.css */\n");
|
|
508
508
|
el0.append(el1);
|
|
509
509
|
return el0;
|
|
510
510
|
}
|