lighthouse 9.5.0-dev.20220530 → 9.5.0-dev.20220602

package/dist/report/flow.js

@@ -26,7 +26,7 @@ function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)},isObjectOrArr
    * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
    * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
    */
-const ia=aa,{isObjectOfUnknownValues:oa,isObjectOrArrayOfUnknownValues:ra}=na,sa=ta.default||ta,la="en-US",pa=["ar-XB.json","ar.json","bg.json","ca.json","cs.json","da.json","de.json","el.json","en-GB.json","en-US.json","en-XA.json","en-XL.json","es-419.json","es.json","fi.json","fil.json","fr.json","he.json","hi.json","hr.json","hu.json","id.json","it.json","ja.json","ko.json","lt.json","lv.json","nl.json","no.json","pl.json","pt-PT.json","pt.json","ro.json","ru.json","sk.json","sl.json","sr-Latn.json","sr.json","sv.json","ta.json","te.json","th.json","tr.json","uk.json","vi.json","zh-HK.json","zh-TW.json","zh.json"].filter((e=>e.endsWith(".json")&&!e.endsWith(".ctc.json"))).map((e=>e.replace(".json",""))).sort(),ua=/ | [^\s]+$/,ca={number:{bytes:{maximumFractionDigits:0},milliseconds:{maximumFractionDigits:0},seconds:{minimumFractionDigits:1,maximumFractionDigits:1},extendedPercent:{maximumFractionDigits:2,style:"percent"}}};function da(e,a=new Map){for(const n of e)if("argumentElement"===n.type&&(a.set(n.id,n),n.format&&"pluralFormat"===n.format.type))for(const e of n.format.options)da(e.value.elements,a);return a}function ma(e,a={},n){const t="en-XA"===n||"en-XL"===n?"de-DE":n,i=new(ia.IntlMessageFormat||ia)(e,t,ca),o=function(e,a,n){const t=[...da(e.getAst().elements).values()],i={};for(const{id:e,format:o}of t){if(e&&e in a==0)throw new Error(`ICU Message "${n}" contains a value reference ("${e}") that wasn't provided`);const t=a[e];if(o&&"numberFormat"===o.type){if("number"!=typeof t)throw new Error(`ICU Message "${n}" contains a numeric reference ("${e}") but provided value was not a number`);"milliseconds"===o.style?i[e]=10*Math.round(t/10):"seconds"===o.style&&"timeInMs"===e?i[e]=Math.round(t/100)/10:"bytes"===o.style?i[e]=t/1024:i[e]=t}else i[e]=t}for(const e of Object.keys(a))if(!(e in i)){if("errorCode"!==e)throw new Error(`Provided value "${e}" does not match any placeholder in ICU message "${n}"`);i.errorCode=a.errorCode}return i}(i,a,e);return i.format(o)}function ha(e){if(!oa(e))return!1;const{i18nId:a,values:n,formattedDefault:t}=e;if("string"!=typeof a)return!1;if("string"!=typeof t)return!1;if(void 0!==n){if(!oa(n))return!1;for(const e of Object.values(n))if("string"!=typeof e&&"number"!=typeof e)return!1}return ua.test(a)}function ga(e,a){if(ha(e))return function(e,a){const n=fa(a)[e.i18nId];return n?ma(n.message,e.values,a):e.formattedDefault}(e,a);if("string"==typeof e)return e;throw new Error("Attempted to format invalid icuMessage type")}function va(e){let a="";for(const n of e)if(/^[a-z]+$/i.test(n))a.length&&(a+="."),a+=n;else{if(/]|"|'|\s/.test(n))throw new Error(`Cannot handle "${n}" in i18n`);a+=`[${n}]`}return a}function fa(e){const a=sa[e];if(!a){if(e===la)return{};throw new Error(`Unsupported locale '${e}'`)}return a}function ba(e){if(!ua.test(e))throw Error(`"${e}" does not appear to be a valid ICU message id`);const[a,n]=e.split(" | ");return{filename:a,key:n}}var ya={DEFAULT_LOCALE:la,_formatPathAsString:va,collectAllCustomElementsFromICU:da,isIcuMessage:ha,getFormatted:ga,getRendererFormattedStrings:function(e){const a=fa(e),n=Object.keys(a).filter((e=>e.startsWith("report/"))),t={};for(const e of n){const{filename:n,key:i}=ba(e);if(!n.endsWith("util.js"))throw new Error(`Unexpected message: ${e}`);t[i]=a[e].message}return t},replaceIcuMessages:function(e,a){const n={};return function e(n,t,i=[]){if(ra(n))for(const[o,r]of Object.entries(n)){const s=i.concat([o]);if(ha(r)){const e=ga(r,a),i=t[r.i18nId]||[],l=va(s);i.push(r.values?{values:r.values,path:l}:l),n[o]=e,t[r.i18nId]=i}else e(r,t,s)}}(e,n),n},hasLocale:function(e){if(e===la)return!0;const a=Intl.NumberFormat.supportedLocalesOf([e]).length>0,n=Boolean(sa[e]);return a&&n},registerLocaleData:function(e,a){sa[e]=a},formatMessage:ma,getIcuMessageIdParts:ba,getAvailableLocales:function(){return[...new Set([...Object.keys(sa),la])].sort()},getCanonicalLocales:function(){return pa}};
+const ia=aa,{isObjectOfUnknownValues:oa,isObjectOrArrayOfUnknownValues:ra}=na,sa=ta.default||ta,la="en-US",pa=["ar-XB.json","ar.json","bg.json","ca.json","cs.json","da.json","de.json","el.json","en-GB.json","en-US.json","en-XA.json","en-XL.json","es-419.json","es.json","fi.json","fil.json","fr.json","he.json","hi.json","hr.json","hu.json","id.json","it.json","ja.json","ko.json","lt.json","lv.json","nl.json","no.json","pl.json","pt-PT.json","pt.json","ro.json","ru.json","sk.json","sl.json","sr-Latn.json","sr.json","sv.json","ta.json","te.json","th.json","tr.json","uk.json","vi.json","zh-HK.json","zh-TW.json","zh.json"].filter((e=>e.endsWith(".json")&&!e.endsWith(".ctc.json"))).map((e=>e.replace(".json",""))).sort(),ua=/ | [^\s]+$/,ca={number:{bytes:{maximumFractionDigits:0},milliseconds:{maximumFractionDigits:0},seconds:{minimumFractionDigits:1,maximumFractionDigits:1},extendedPercent:{maximumFractionDigits:2,style:"percent"}}};function da(e,a=new Map){for(const n of e)if("argumentElement"===n.type&&(a.set(n.id,n),n.format&&"pluralFormat"===n.format.type))for(const e of n.format.options)da(e.value.elements,a);return a}function ma(e,a,n){if(!e.includes("{")&&void 0===a)return e;const t="en-XA"===n||"en-XL"===n?"de-DE":n,i=new(ia.IntlMessageFormat||ia)(e,t,ca),o=function(e,a={},n){const t=[...da(e.getAst().elements).values()],i={};for(const{id:e,format:o}of t){if(e&&e in a==0)throw new Error(`ICU Message "${n}" contains a value reference ("${e}") that wasn't provided`);const t=a[e];if(o&&"numberFormat"===o.type){if("number"!=typeof t)throw new Error(`ICU Message "${n}" contains a numeric reference ("${e}") but provided value was not a number`);"milliseconds"===o.style?i[e]=10*Math.round(t/10):"seconds"===o.style&&"timeInMs"===e?i[e]=Math.round(t/100)/10:"bytes"===o.style?i[e]=t/1024:i[e]=t}else i[e]=t}for(const e of Object.keys(a))if(!(e in i)){if("errorCode"!==e)throw new Error(`Provided value "${e}" does not match any placeholder in ICU message "${n}"`);i.errorCode=a.errorCode}return i}(i,a,e);return i.format(o)}function ha(e){if(!oa(e))return!1;const{i18nId:a,values:n,formattedDefault:t}=e;if("string"!=typeof a)return!1;if("string"!=typeof t)return!1;if(void 0!==n){if(!oa(n))return!1;for(const e of Object.values(n))if("string"!=typeof e&&"number"!=typeof e)return!1}return ua.test(a)}function ga(e,a){if(ha(e))return function(e,a){const n=fa(a)[e.i18nId];return n?ma(n.message,e.values,a):e.formattedDefault}(e,a);if("string"==typeof e)return e;throw new Error("Attempted to format invalid icuMessage type")}function va(e){let a="";for(const n of e)if(/^[a-z]+$/i.test(n))a.length&&(a+="."),a+=n;else{if(/]|"|'|\s/.test(n))throw new Error(`Cannot handle "${n}" in i18n`);a+=`[${n}]`}return a}function fa(e){const a=sa[e];if(!a){if(e===la)return{};throw new Error(`Unsupported locale '${e}'`)}return a}function ba(e){if(!ua.test(e))throw Error(`"${e}" does not appear to be a valid ICU message id`);const[a,n]=e.split(" | ");return{filename:a,key:n}}var ya={DEFAULT_LOCALE:la,_formatPathAsString:va,collectAllCustomElementsFromICU:da,isIcuMessage:ha,getFormatted:ga,getRendererFormattedStrings:function(e){const a=fa(e),n=Object.keys(a).filter((e=>e.startsWith("report/"))),t={};for(const e of n){const{filename:n,key:i}=ba(e);if(!n.endsWith("util.js"))throw new Error(`Unexpected message: ${e}`);t[i]=a[e].message}return t},replaceIcuMessages:function(e,a){const n={};return function e(n,t,i=[]){if(ra(n))for(const[o,r]of Object.entries(n)){const s=i.concat([o]);if(ha(r)){const e=ga(r,a),i=t[r.i18nId]||[],l=va(s);i.push(r.values?{values:r.values,path:l}:l),n[o]=e,t[r.i18nId]=i}else e(r,t,s)}}(e,n),n},hasLocale:function(e){if(e===la)return!0;const a=Intl.NumberFormat.supportedLocalesOf([e]).length>0,n=Boolean(sa[e]);return a&&n},registerLocaleData:function(e,a){sa[e]=a},formatMessage:ma,getIcuMessageIdParts:ba,getAvailableLocales:function(){return[...new Set([...Object.keys(sa),la])].sort()},getCanonicalLocales:function(){return pa}};
 /**
    * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
    * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -220,7 +220,7 @@ class tn{constructor(e){this._dom=e,this._toggleEl,this._menuEl,this.onDocumentK
    * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
    * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
    * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
-   */function pn(){return new Ma(document,document.documentElement).createComponent("styles")}const un=({category:e,href:a,gatherMode:n})=>D("div",{ref:ze((()=>function(e,a){const n=new Ma(document,document.documentElement),t=new Ga(n);return new Fa(n,t).renderCategoryScore(e,{},a)}(e,{gatherMode:n,omitLabel:!0,onPageAnchorRendered:e=>e.href=a})),[e,a]),"data-testid":"CategoryScore"},void 0),cn=({text:e})=>D("span",{ref:ze((()=>{return a=e,new Ma(document,document.documentElement).convertMarkdownCodeSnippets(a);var a}),[e])},void 0);function dn(e,a){switch(e){case"navigation":return a.navigationReport;case"timespan":return a.timespanReport;case"snapshot":return a.snapshotReport}}function mn(e,a){switch(e){case"pass":return a.ratingPass;case"average":return a.ratingAverage;case"fail":return a.ratingFail;case"error":return a.ratingError}}function hn(e){return e.weight*(1-e.result.score)}function gn(e){return e.result.details&&"opportunity"===e.result.details.type&&e.result.details.overallSavingsMs||0}const vn=({audit:e})=>D("div",{className:`SummaryTooltipAudit SummaryTooltipAudit--${de.calculateRating(e.result.score,e.result.scoreDisplayMode)}`,children:D(cn,{text:e.result.title},void 0)},void 0),fn=({category:e})=>{const a=xa();const n=e.auditRefs.filter((function(a){return null!==a.result.score&&"metrics"!==a.group&&("hidden"!==a.group||"performance"!==e.id)&&(a.weight>0||gn(a)>0)&&!de.showAsPassed(a.result)})).sort(((e,a)=>{const n=hn(e),t=hn(a);return n!==t?t-n:gn(a)-gn(e)})).splice(0,2);return n.length?D("div",{className:"SummaryTooltipAudits",children:[D("div",{className:"SummaryTooltipAudits__title",children:a.highestImpact},void 0),n.map((e=>D(vn,{audit:e},e.id)))]},void 0):null},bn=({category:e,gatherMode:a,url:n})=>{const t=xa(),i=La(),{numPassed:o,numPassableAudits:r,numInformative:s,totalWeight:l}=de.calculateCategoryFraction(e),p=Ua(),u=de.shouldDisplayAsFraction(a),c=u?o/r:e.score,d=null===c?"error":de.calculateRating(c);return D("div",{className:"SummaryTooltip",children:[D("div",{className:"SummaryTooltip__title",children:dn(a,t)},void 0),D("div",{className:"SummaryTooltip__url",children:n},void 0),D(Ie,{},void 0),D("div",{className:"SummaryTooltip__category",children:[D("div",{className:"SummaryTooltip__category-title",children:e.title},void 0),0!==l&&D("div",{className:`SummaryTooltip__rating SummaryTooltip__rating--${d}`,children:[D("span",{children:mn(d,t)},void 0),!u&&null!==e.score&&D(h,{children:[D("span",{children:" · "},void 0),D("span",{children:p.formatInteger(100*e.score)},void 0)]},void 0)]},void 0)]},void 0),D("div",{className:"SummaryTooltip__fraction",children:[D("span",{children:i(t.passedAuditCount,{numPassed:o})},void 0),D("span",{children:" / "},void 0),D("span",{children:i(t.passableAuditCount,{numPassableAudits:r})},void 0)]},void 0),0!==s&&D("div",{className:"SummaryTooltip__informative",children:i(t.informativeAuditCount,{numInformative:s})},void 0),D(fn,{category:e},void 0)]},void 0)},yn=({category:e,href:a,gatherMode:n,finalUrl:t})=>D("div",{className:"SummaryCategory",children:D("div",e?{className:"SummaryCategory__content",children:[D(un,{category:e,href:a,gatherMode:n},void 0),D(bn,{category:e,gatherMode:n,url:t},void 0)]}:{className:"SummaryCategory__null","data-testid":"SummaryCategory__null"},void 0)},void 0),_n=["performance","accessibility","best-practices","seo"],Cn=({lhr:e})=>{const a=xa();return D("div",{className:"SummaryNavigationHeader","data-testid":"SummaryNavigationHeader",children:[D(Te,{},void 0),D("div",{className:"SummaryNavigationHeader__url",children:D("a",{rel:"noopener",target:"_blank",href:e.finalUrl,children:e.finalUrl},void 0)},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryPerformance},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryAccessibility},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryBestPractices},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categorySeo},void 0)]},void 0)},wn=({lhr:e,label:a,hashIndex:n})=>{const t=Y((()=>de.prepareReportResult(e)),[e]),i=xa(),o=Ue(e.gatherMode,i);return D("div",{className:"SummaryFlowStep",children:["navigation"===e.gatherMode||0===n?D(Cn,{lhr:e},void 0):D("div",{className:"SummaryFlowStep__separator",children:[D(Te,{},void 0),D(Ie,{},void 0)]},void 0),D(De,{lhr:e,width:40},void 0),D(Te,{mode:e.gatherMode},void 0),D("div",{className:"SummaryFlowStep__label",children:[D("div",{className:"SummaryFlowStep__mode",children:o},void 0),D("a",{className:"SummaryFlowStep__link",href:`#index=${n}`,children:a},void 0)]},void 0),_n.map((a=>D(yn,{category:t.categories[a],href:`#index=${n}&anchor=${a}`,gatherMode:e.gatherMode,finalUrl:e.finalUrl},a)))]},void 0)},kn=()=>D("div",{className:"SummaryFlow",children:xe().steps.map(((e,a)=>D(wn,{lhr:e.lhr,label:e.name,hashIndex:a},e.lhr.fetchTime)))},void 0),An=()=>{const e=xe(),a=xa(),n=La();let t=0,i=0,o=0;for(const a of e.steps)switch(a.lhr.gatherMode){case"navigation":t++;break;case"timespan":i++;break;case"snapshot":o++}const r=[];t&&r.push(n(a.navigationReportCount,{numNavigation:t})),i&&r.push(n(a.timespanReportCount,{numTimespan:i})),o&&r.push(n(a.snapshotReportCount,{numSnapshot:o}));const s=r.join(" · ");return D("div",{className:"SummaryHeader",children:[D("div",{className:"SummaryHeader__title",children:a.summary},void 0),D("div",{className:"SummaryHeader__subtitle",children:s},void 0)]},void 0)},Sn=({children:e})=>D("div",{className:"SummarySectionHeader",children:[D("div",{className:"SummarySectionHeader__content",children:e},void 0),D(Ie,{},void 0)]},void 0),Pn=()=>{const e=xa();return D("div",{className:"Summary","data-testid":"Summary",children:[D(An,{},void 0),D(Ie,{},void 0),D(Sn,{children:e.allReports},void 0),D(kn,{},void 0)]},void 0)};const Un=({hashState:e})=>D("div",{ref:ze((()=>function(e,a={}){const n=document.createElement("article");n.classList.add("lh-root","lh-vars");const t=new Ma(n.ownerDocument,n);return new qa(t).renderReport(e,n,a),new ln(t,a).initFeatures(e),n}(e.currentLhr,{disableFireworks:!0,disableDarkMode:!0,omitTopbar:!0,omitGlobalStyles:!0,onPageAnchorRendered:a=>function(e,a){const n=e.cloneNode(!0);if(!n.hash)return n;const t=e.hash.substr(1);n.hash=`#index=${a}&anchor=${t}`,n.onclick=e=>{e.preventDefault();const a=document.getElementById(t);a&&a.scrollIntoView()},e.replaceWith(n)}(a,e.index)})),[e]),"data-testid":"Report"},void 0),xn=e=>{const a=xa();return D("div",{className:"HelpDialogColumn",children:[D("div",{className:"HelpDialogColumn__legend",children:[D("div",{className:"HelpDialogColumnTimeline",children:[e.icon,D("div",{className:"HelpDialogColumnTimeline__line"},void 0)]},void 0),D("div",{className:"HelpDialogColumn__legend-label",children:e.userFriendlyModeLabel},void 0)]},void 0),D("div",{className:"HelpDialogColumn__header",children:[D("div",{className:"HelpDialogColumn__header-title",children:e.lighthouseOfficialModeLabel},void 0),D("p",{children:e.modeDescription},void 0)]},void 0),D("div",{className:"HelpDialogColumn__use-cases",children:[D("p",{children:e.useCaseInstruction},void 0),D("ul",{children:e.useCases.map(((e,a)=>D("li",{children:e},a)))},void 0)]},void 0),D("div",{className:"HelpDialogColumn__categories",children:[D("p",{children:a.categories},void 0),D("ul",{children:e.availableCategories.map(((e,a)=>D("li",{children:e},a)))},void 0)]},void 0)]},void 0)},Ln=({onClose:e})=>{const a=xa();return D("div",{className:"HelpDialog",children:[D("div",{className:"HelpDialog__title",children:[D("div",{children:a.helpDialogTitle},void 0),D("div",{style:{flexGrow:1}},void 0),D("button",{className:"HelpDialog__close",onClick:e,children:D(fe,{},void 0)},void 0)]},void 0),D("div",{className:"HelpDialog__columns",children:[D(xn,{icon:D(he,{},void 0),userFriendlyModeLabel:a.navigationDescription,lighthouseOfficialModeLabel:a.navigationReport,modeDescription:a.navigationLongDescription,useCaseInstruction:a.helpUseCaseInstructionNavigation,useCases:[a.helpUseCaseNavigation1,a.helpUseCaseNavigation2,a.helpUseCaseNavigation3],availableCategories:[a.categoryPerformance,a.categoryAccessibility,a.categoryBestPractices,a.categorySeo,a.categoryProgressiveWebApp]},void 0),D(xn,{icon:D(ge,{},void 0),userFriendlyModeLabel:a.timespanDescription,lighthouseOfficialModeLabel:a.timespanReport,modeDescription:a.timespanLongDescription,useCaseInstruction:a.helpUseCaseInstructionTimespan,useCases:[a.helpUseCaseTimespan1,a.helpUseCaseTimespan2],availableCategories:[a.categoryPerformance,a.categoryBestPractices]},void 0),D(xn,{icon:D(ve,{},void 0),userFriendlyModeLabel:a.snapshotDescription,lighthouseOfficialModeLabel:a.snapshotReport,modeDescription:a.snapshotLongDescription,useCaseInstruction:a.helpUseCaseInstructionSnapshot,useCases:[a.helpUseCaseSnapshot1,a.helpUseCaseSnapshot2],availableCategories:[a.categoryPerformance,a.categoryAccessibility,a.categoryBestPractices,a.categorySeo]},void 0)]},void 0)]},void 0)};function zn(e,a){!function(e,a){new Ma(document,document.documentElement).saveFile(e,a)}(new Blob([a],{type:"text/html"}),sn.getFlowResultFilenamePrefix(e)+".html")}const In=()=>D("svg",{height:"24",width:"24",viewBox:"0 0 24 24",role:"img",children:[D("defs",{children:[D("linearGradient",{x1:"57.456%",y1:"13.086%",x2:"18.259%",y2:"72.322%",id:"Topbar__logo--a",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"100%",y1:"50%",x2:"0%",y2:"50%",id:"Topbar__logo--b",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"58.764%",y1:"65.756%",x2:"36.939%",y2:"50.14%",id:"Topbar__logo--c",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"41.635%",y1:"20.358%",x2:"72.863%",y2:"85.424%",id:"Topbar__logo--d",children:[D("stop",{"stop-color":"#FFF","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#FFF","stop-opacity":"0",offset:"100%"},void 0)]},void 0)]},void 0),D("g",{fill:"none","fill-rule":"evenodd",children:[D("path",{d:"M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z",fill:"#F44B21"},void 0),D("path",{fill:"#FFF",d:"M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"},void 0),D("path",{d:"M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z",fill:"url(#Topbar__logo--a)","fill-rule":"nonzero",transform:"translate(6 3)"},void 0),D("path",{fill:"#FFF176","fill-rule":"nonzero",d:"M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"},void 0),D("path",{fill:"url(#Topbar__logo--b)","fill-rule":"nonzero",d:"M0 6.375h6v2.25H0z",transform:"translate(6 3)"},void 0),D("path",{fill:"url(#Topbar__logo--c)","fill-rule":"nonzero",d:"M6 6.375H1.875v-3.75L6 0z",transform:"translate(6 3)"},void 0),D("path",{fill:"url(#Topbar__logo--d)","fill-rule":"nonzero",d:"M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z",transform:"translate(6 3)"},void 0)]},void 0)]},void 0),Nn=({onClick:e,label:a,children:n})=>D("button",{className:"TopbarButton",onClick:e,"aria-label":a,children:n},void 0),Tn=({onMenuClick:e})=>{const a=xe(),n=xa(),[t,i]=J(!1),{getReportHtml:o,saveAsGist:r}=X(Ae);return D("div",{className:"Topbar",children:[D(Nn,{onClick:e,label:"Button that opens and closes the sidebar",children:D(Ce,{},void 0)},void 0),D("div",{className:"Topbar__logo",children:D(In,{},void 0)},void 0),D("div",{className:"Topbar__title",children:n.title},void 0),o&&D(Nn,{onClick:()=>{const e=o(a);zn(a,e)},label:"Button that saves the report as HTML",children:n.save},void 0),r&&D(Nn,{onClick:()=>r(a),label:"Button that saves the report to a gist",children:n.dropdownSaveGist},void 0),D("div",{style:{flexGrow:1}},void 0),D(Nn,{onClick:()=>i((e=>!e)),label:"Button that toggles the help dialog",children:D("div",{className:"Topbar__help-label",children:[D(we,{},void 0),n.helpLabel]},void 0)},void 0),t?D(Ln,{onClose:()=>i(!1)},void 0):null]},void 0)},Rn=({lhr:e,position:a})=>D("div",{className:`HeaderThumbnail HeaderThumbnail--${a}`,children:[D(De,{lhr:e,height:"main"===a?120:80},void 0),D("div",{className:"HeaderThumbnail__icon",children:D(Ne,{mode:e.gatherMode},void 0)},void 0)]},void 0),Dn=({hashState:e})=>{const a=xe(),{index:n}=e,t=a.steps[n],i=a.steps[n-1],o=a.steps[n+1],r=xa(),s=Ue(t.lhr.gatherMode,r);return D("div",{className:"Header",children:[i&&D(h,{children:[a.steps[n-2]&&D("div",{className:"Header__segment"},void 0),D("div",{className:"Header__prev-thumbnail",children:[D(Rn,{lhr:i.lhr,position:"prev"},void 0),D("div",{className:"Header__segment"},void 0)]},void 0),D("a",{className:"Header__prev-title",href:"#index="+(n-1),children:i.name},void 0)]},void 0),D("div",{className:"Header__current-thumbnail",children:D(Rn,{lhr:t.lhr,position:"main"},void 0)},void 0),D("div",{className:"Header__current-title",children:[t.name,D("div",{className:"Header__current-description",children:s},void 0)]},void 0),o&&D(h,{children:[D("div",{className:"Header__next-thumbnail",children:[D("div",{className:"Header__segment"},void 0),D(Rn,{lhr:o.lhr,position:"next"},void 0)]},void 0),D("a",{className:"Header__next-title",href:`#index=${n+1}`,children:o.name},void 0),a.steps[n+2]&&D("div",{className:"Header__segment"},void 0)]},void 0)]},void 0)},En=()=>D("div",{ref:ze(pn)},void 0);const jn=()=>{const e=Le(),a=Z(null);return K((()=>{const n=function(e){return e&&e.anchor?document.getElementById(e.anchor):null}(e);n?n.scrollIntoView():a.current&&(a.current.scrollTop=0)}),[e]),D("div",{ref:a,className:"Content",children:e?D(h,{children:[D(Dn,{hashState:e},void 0),D(Un,{hashState:e},void 0)]},void 0):D(Pn,{},void 0)},void 0)},Mn=({flowResult:e,options:a})=>{const[n,t]=J(!1),i=Y((()=>a||{}),[a]);return D(Ae.Provider,{value:i,children:D(ke.Provider,{value:e,children:D(za,{children:[D(En,{},void 0),D("div",{className:Pe("App",{"App--collapsed":n}),"data-testid":"App",children:[D(Tn,{onMenuClick:()=>t((e=>!e))},void 0),D(ja,{},void 0),D(jn,{},void 0)]},void 0)]},void 0)},void 0)},void 0)};
+   */function pn(){return new Ma(document,document.documentElement).createComponent("styles")}const un=({category:e,href:a,gatherMode:n})=>D("div",{ref:ze((()=>function(e,a){const n=new Ma(document,document.documentElement),t=new Ga(n);return new Fa(n,t).renderCategoryScore(e,{},a)}(e,{gatherMode:n,omitLabel:!0,onPageAnchorRendered:e=>e.href=a})),[e,a]),"data-testid":"CategoryScore"},void 0),cn=({text:e})=>D("span",{ref:ze((()=>{return a=e,new Ma(document,document.documentElement).convertMarkdownCodeSnippets(a);var a}),[e])},void 0);function dn(e,a){switch(e){case"navigation":return a.navigationReport;case"timespan":return a.timespanReport;case"snapshot":return a.snapshotReport}}function mn(e,a){switch(e){case"pass":return a.ratingPass;case"average":return a.ratingAverage;case"fail":return a.ratingFail;case"error":return a.ratingError}}function hn(e){return e.weight*(1-e.result.score)}function gn(e){return e.result.details&&"opportunity"===e.result.details.type&&e.result.details.overallSavingsMs||0}const vn=({audit:e})=>D("div",{className:`SummaryTooltipAudit SummaryTooltipAudit--${de.calculateRating(e.result.score,e.result.scoreDisplayMode)}`,children:D(cn,{text:e.result.title},void 0)},void 0),fn=({category:e})=>{const a=xa();const n=e.auditRefs.filter((function(a){return null!==a.result.score&&"metrics"!==a.group&&("hidden"!==a.group||"performance"!==e.id)&&(a.weight>0||gn(a)>0)&&!de.showAsPassed(a.result)})).sort(((e,a)=>{const n=hn(e),t=hn(a);return n!==t?t-n:gn(a)-gn(e)})).splice(0,2);return n.length?D("div",{className:"SummaryTooltipAudits",children:[D("div",{className:"SummaryTooltipAudits__title",children:a.highestImpact},void 0),n.map((e=>D(vn,{audit:e},e.id)))]},void 0):null},bn=({category:e,gatherMode:a,url:n})=>{const t=xa(),i=La(),{numPassed:o,numPassableAudits:r,numInformative:s,totalWeight:l}=de.calculateCategoryFraction(e),p=Ua(),u=de.shouldDisplayAsFraction(a),c=u?o/r:e.score,d=null===c?"error":de.calculateRating(c);return D("div",{className:"SummaryTooltip",children:[D("div",{className:"SummaryTooltip__title",children:dn(a,t)},void 0),D("div",{className:"SummaryTooltip__url",children:n},void 0),D(Ie,{},void 0),D("div",{className:"SummaryTooltip__category",children:[D("div",{className:"SummaryTooltip__category-title",children:e.title},void 0),0!==l&&D("div",{className:`SummaryTooltip__rating SummaryTooltip__rating--${d}`,children:[D("span",{children:mn(d,t)},void 0),!u&&null!==e.score&&D(h,{children:[D("span",{children:" · "},void 0),D("span",{children:p.formatInteger(100*e.score)},void 0)]},void 0)]},void 0)]},void 0),D("div",{className:"SummaryTooltip__fraction",children:[D("span",{children:i(t.passedAuditCount,{numPassed:o})},void 0),D("span",{children:" / "},void 0),D("span",{children:i(t.passableAuditCount,{numPassableAudits:r})},void 0)]},void 0),0!==s&&D("div",{className:"SummaryTooltip__informative",children:i(t.informativeAuditCount,{numInformative:s})},void 0),D(fn,{category:e},void 0)]},void 0)},yn=({category:e,href:a,gatherMode:n,finalUrl:t})=>D("div",{className:"SummaryCategory",children:D("div",e?{className:"SummaryCategory__content",children:[D(un,{category:e,href:a,gatherMode:n},void 0),D(bn,{category:e,gatherMode:n,url:t},void 0)]}:{className:"SummaryCategory__null","data-testid":"SummaryCategory__null"},void 0)},void 0),_n=["performance","accessibility","best-practices","seo"],Cn=({lhr:e})=>{const a=xa();return D("div",{className:"SummaryNavigationHeader","data-testid":"SummaryNavigationHeader",children:[D(Te,{},void 0),D("div",{className:"SummaryNavigationHeader__url",children:D("a",{rel:"noopener",target:"_blank",href:e.finalUrl,children:e.finalUrl},void 0)},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryPerformance},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryAccessibility},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categoryBestPractices},void 0),D("div",{className:"SummaryNavigationHeader__category",children:a.categorySeo},void 0)]},void 0)},wn=({lhr:e,label:a,hashIndex:n})=>{const t=Y((()=>de.prepareReportResult(e)),[e]),i=xa(),o=Ue(e.gatherMode,i);return D("div",{className:"SummaryFlowStep",children:["navigation"===e.gatherMode||0===n?D(Cn,{lhr:e},void 0):D("div",{className:"SummaryFlowStep__separator",children:[D(Te,{},void 0),D(Ie,{},void 0)]},void 0),D(De,{lhr:e,width:40},void 0),D(Te,{mode:e.gatherMode},void 0),D("div",{className:"SummaryFlowStep__label",children:[D("div",{className:"SummaryFlowStep__mode",children:o},void 0),D("a",{className:"SummaryFlowStep__link",href:`#index=${n}`,children:a},void 0)]},void 0),_n.map((a=>D(yn,{category:t.categories[a],href:`#index=${n}&anchor=${a}`,gatherMode:e.gatherMode,finalUrl:e.finalUrl},a)))]},void 0)},kn=()=>D("div",{className:"SummaryFlow",children:xe().steps.map(((e,a)=>D(wn,{lhr:e.lhr,label:e.name,hashIndex:a},e.lhr.fetchTime)))},void 0),An=()=>{const e=xe(),a=xa(),n=La();let t=0,i=0,o=0;for(const a of e.steps)switch(a.lhr.gatherMode){case"navigation":t++;break;case"timespan":i++;break;case"snapshot":o++}const r=[];t&&r.push(n(a.navigationReportCount,{numNavigation:t})),i&&r.push(n(a.timespanReportCount,{numTimespan:i})),o&&r.push(n(a.snapshotReportCount,{numSnapshot:o}));const s=r.join(" · ");return D("div",{className:"SummaryHeader",children:[D("div",{className:"SummaryHeader__title",children:a.summary},void 0),D("div",{className:"SummaryHeader__subtitle",children:s},void 0)]},void 0)},Sn=({children:e})=>D("div",{className:"SummarySectionHeader",children:[D("div",{className:"SummarySectionHeader__content",children:e},void 0),D(Ie,{},void 0)]},void 0),Pn=()=>{const e=xa();return D("div",{className:"Summary","data-testid":"Summary",children:[D(An,{},void 0),D(Ie,{},void 0),D(Sn,{children:e.allReports},void 0),D(kn,{},void 0)]},void 0)};const Un=({hashState:e})=>D("div",{ref:ze((()=>function(e,a={}){const n=document.createElement("article");n.classList.add("lh-root","lh-vars");const t=new Ma(n.ownerDocument,n);return new qa(t).renderReport(e,n,a),new ln(t,a).initFeatures(e),n}(e.currentLhr,{disableFireworks:!0,disableDarkMode:!0,omitTopbar:!0,omitGlobalStyles:!0,onPageAnchorRendered:a=>function(e,a){const n=e.cloneNode(!0);if(!n.hash)return n;const t=e.hash.substr(1);n.hash=`#index=${a}&anchor=${t}`,n.onclick=e=>{e.preventDefault();const a=document.getElementById(t);a&&a.scrollIntoView()},e.replaceWith(n)}(a,e.index)})),[e]),"data-testid":"Report"},void 0),xn=e=>{const a=xa();return D("div",{className:"HelpDialogColumn",children:[D("div",{className:"HelpDialogColumn__legend",children:[D("div",{className:"HelpDialogColumnTimeline",children:[e.icon,D("div",{className:"HelpDialogColumnTimeline__line"},void 0)]},void 0),D("div",{className:"HelpDialogColumn__legend-label",children:e.userFriendlyModeLabel},void 0)]},void 0),D("div",{className:"HelpDialogColumn__header",children:[D("div",{className:"HelpDialogColumn__header-title",children:e.lighthouseOfficialModeLabel},void 0),D("p",{children:e.modeDescription},void 0)]},void 0),D("div",{className:"HelpDialogColumn__use-cases",children:[D("p",{children:e.useCaseInstruction},void 0),D("ul",{children:e.useCases.map(((e,a)=>D("li",{children:e},a)))},void 0)]},void 0),D("div",{className:"HelpDialogColumn__categories",children:[D("p",{children:a.categories},void 0),D("ul",{children:e.availableCategories.map(((e,a)=>D("li",{children:e},a)))},void 0)]},void 0)]},void 0)},Ln=({onClose:e})=>{const a=xa();return D("div",{className:"HelpDialog",children:[D("div",{className:"HelpDialog__title",children:[D("div",{children:a.helpDialogTitle},void 0),D("div",{style:{flexGrow:1}},void 0),D("button",{className:"HelpDialog__close",onClick:e,children:D(fe,{},void 0)},void 0)]},void 0),D("div",{className:"HelpDialog__columns",children:[D(xn,{icon:D(he,{},void 0),userFriendlyModeLabel:a.navigationDescription,lighthouseOfficialModeLabel:a.navigationReport,modeDescription:a.navigationLongDescription,useCaseInstruction:a.helpUseCaseInstructionNavigation,useCases:[a.helpUseCaseNavigation1,a.helpUseCaseNavigation2,a.helpUseCaseNavigation3],availableCategories:[a.categoryPerformance,a.categoryAccessibility,a.categoryBestPractices,a.categorySeo,a.categoryProgressiveWebApp]},void 0),D(xn,{icon:D(ge,{},void 0),userFriendlyModeLabel:a.timespanDescription,lighthouseOfficialModeLabel:a.timespanReport,modeDescription:a.timespanLongDescription,useCaseInstruction:a.helpUseCaseInstructionTimespan,useCases:[a.helpUseCaseTimespan1,a.helpUseCaseTimespan2],availableCategories:[a.categoryPerformance,a.categoryBestPractices]},void 0),D(xn,{icon:D(ve,{},void 0),userFriendlyModeLabel:a.snapshotDescription,lighthouseOfficialModeLabel:a.snapshotReport,modeDescription:a.snapshotLongDescription,useCaseInstruction:a.helpUseCaseInstructionSnapshot,useCases:[a.helpUseCaseSnapshot1,a.helpUseCaseSnapshot2],availableCategories:[a.categoryPerformance,a.categoryAccessibility,a.categoryBestPractices,a.categorySeo]},void 0)]},void 0)]},void 0)};function zn(e,a){const n=new Blob([a],{type:"text/html"}),t=sn.getFlowResultFilenamePrefix(e)+".html";zn.saveFile(n,t)}zn.saveFile=function(e,a){new Ma(document,document.documentElement).saveFile(e,a)};const In=()=>D("svg",{height:"24",width:"24",viewBox:"0 0 24 24",role:"img",children:[D("defs",{children:[D("linearGradient",{x1:"57.456%",y1:"13.086%",x2:"18.259%",y2:"72.322%",id:"Topbar__logo--a",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"100%",y1:"50%",x2:"0%",y2:"50%",id:"Topbar__logo--b",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"58.764%",y1:"65.756%",x2:"36.939%",y2:"50.14%",id:"Topbar__logo--c",children:[D("stop",{"stop-color":"#262626","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#262626","stop-opacity":"0",offset:"100%"},void 0)]},void 0),D("linearGradient",{x1:"41.635%",y1:"20.358%",x2:"72.863%",y2:"85.424%",id:"Topbar__logo--d",children:[D("stop",{"stop-color":"#FFF","stop-opacity":".1",offset:"0%"},void 0),D("stop",{"stop-color":"#FFF","stop-opacity":"0",offset:"100%"},void 0)]},void 0)]},void 0),D("g",{fill:"none","fill-rule":"evenodd",children:[D("path",{d:"M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z",fill:"#F44B21"},void 0),D("path",{fill:"#FFF",d:"M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"},void 0),D("path",{d:"M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z",fill:"url(#Topbar__logo--a)","fill-rule":"nonzero",transform:"translate(6 3)"},void 0),D("path",{fill:"#FFF176","fill-rule":"nonzero",d:"M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"},void 0),D("path",{fill:"url(#Topbar__logo--b)","fill-rule":"nonzero",d:"M0 6.375h6v2.25H0z",transform:"translate(6 3)"},void 0),D("path",{fill:"url(#Topbar__logo--c)","fill-rule":"nonzero",d:"M6 6.375H1.875v-3.75L6 0z",transform:"translate(6 3)"},void 0),D("path",{fill:"url(#Topbar__logo--d)","fill-rule":"nonzero",d:"M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z",transform:"translate(6 3)"},void 0)]},void 0)]},void 0),Nn=({onClick:e,label:a,children:n})=>D("button",{className:"TopbarButton",onClick:e,"aria-label":a,children:n},void 0),Tn=({onMenuClick:e})=>{const a=xe(),n=xa(),[t,i]=J(!1),{getReportHtml:o,saveAsGist:r}=X(Ae);return D("div",{className:"Topbar",children:[D(Nn,{onClick:e,label:"Button that opens and closes the sidebar",children:D(Ce,{},void 0)},void 0),D("div",{className:"Topbar__logo",children:D(In,{},void 0)},void 0),D("div",{className:"Topbar__title",children:n.title},void 0),o&&D(Nn,{onClick:()=>{const e=o(a);zn(a,e)},label:"Button that saves the report as HTML",children:n.save},void 0),r&&D(Nn,{onClick:()=>r(a),label:"Button that saves the report to a gist",children:n.dropdownSaveGist},void 0),D("div",{style:{flexGrow:1}},void 0),D(Nn,{onClick:()=>i((e=>!e)),label:"Button that toggles the help dialog",children:D("div",{className:"Topbar__help-label",children:[D(we,{},void 0),n.helpLabel]},void 0)},void 0),t?D(Ln,{onClose:()=>i(!1)},void 0):null]},void 0)},Rn=({lhr:e,position:a})=>D("div",{className:`HeaderThumbnail HeaderThumbnail--${a}`,children:[D(De,{lhr:e,height:"main"===a?120:80},void 0),D("div",{className:"HeaderThumbnail__icon",children:D(Ne,{mode:e.gatherMode},void 0)},void 0)]},void 0),Dn=({hashState:e})=>{const a=xe(),{index:n}=e,t=a.steps[n],i=a.steps[n-1],o=a.steps[n+1],r=xa(),s=Ue(t.lhr.gatherMode,r);return D("div",{className:"Header",children:[i&&D(h,{children:[a.steps[n-2]&&D("div",{className:"Header__segment"},void 0),D("div",{className:"Header__prev-thumbnail",children:[D(Rn,{lhr:i.lhr,position:"prev"},void 0),D("div",{className:"Header__segment"},void 0)]},void 0),D("a",{className:"Header__prev-title",href:"#index="+(n-1),children:i.name},void 0)]},void 0),D("div",{className:"Header__current-thumbnail",children:D(Rn,{lhr:t.lhr,position:"main"},void 0)},void 0),D("div",{className:"Header__current-title",children:[t.name,D("div",{className:"Header__current-description",children:s},void 0)]},void 0),o&&D(h,{children:[D("div",{className:"Header__next-thumbnail",children:[D("div",{className:"Header__segment"},void 0),D(Rn,{lhr:o.lhr,position:"next"},void 0)]},void 0),D("a",{className:"Header__next-title",href:`#index=${n+1}`,children:o.name},void 0),a.steps[n+2]&&D("div",{className:"Header__segment"},void 0)]},void 0)]},void 0)},En=()=>D("div",{ref:ze(pn)},void 0);const jn=()=>{const e=Le(),a=Z(null);return K((()=>{const n=function(e){return e&&e.anchor?document.getElementById(e.anchor):null}(e);n?n.scrollIntoView():a.current&&(a.current.scrollTop=0)}),[e]),D("div",{ref:a,className:"Content",children:e?D(h,{children:[D(Dn,{hashState:e},void 0),D(Un,{hashState:e},void 0)]},void 0):D(Pn,{},void 0)},void 0)},Mn=({flowResult:e,options:a})=>{const[n,t]=J(!1),i=Y((()=>a||{}),[a]);return D(Ae.Provider,{value:i,children:D(ke.Provider,{value:e,children:D(za,{children:[D(En,{},void 0),D("div",{className:Pe("App",{"App--collapsed":n}),"data-testid":"App",children:[D(Tn,{onMenuClick:()=>t((e=>!e))},void 0),D(ja,{},void 0),D(jn,{},void 0)]},void 0)]},void 0)},void 0)},void 0)};
 /**
    * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
    * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

package/flow-report/src/topbar.tsx

@@ -17,9 +17,12 @@ import {saveFile} from '../../report/renderer/api';
 function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
   const filename = getFlowResultFilenamePrefix(flowResult) + '.html';
-  saveFile(blob, filename);
+  saveHtml.saveFile(blob, filename);
 }
 
+// Store `saveFile` here so we can do dependency injection.
+saveHtml.saveFile = saveFile;
+
 /* eslint-disable max-len */
 const Logo: FunctionComponent = () => {
   return (
@@ -68,7 +71,7 @@ const TopbarButton: FunctionComponent<{
   );
 };
 
-export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
+const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
@@ -118,3 +121,8 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
     </div>
   );
 };
+
+export {
+  Topbar,
+  saveHtml,
+};

package/flow-report/test/topbar-test.tsx

@@ -10,16 +10,10 @@ import {act, render} from '@testing-library/preact';
 
 import {FlowResultContext, OptionsContext} from '../src/util';
 import {I18nProvider} from '../src/i18n/i18n';
+import {Topbar, saveHtml} from '../src/topbar';
 
 const mockSaveFile = jest.fn();
-jest.unstable_mockModule('../../../report/renderer/api.js', () => ({
-  saveFile: mockSaveFile,
-}));
-
-let Topbar: typeof import('../src/topbar').Topbar;
-beforeAll(async () => {
-  Topbar = (await import('../src/topbar')).Topbar;
-});
+const defaultSaveFile = saveHtml.saveFile;
 
 const flowResult = {
   name: 'User flow',
@@ -47,7 +41,12 @@ beforeEach(() => {
   );
 });
 
+afterEach(() => {
+  saveHtml.saveFile = defaultSaveFile;
+});
+
 it('save button opens save dialog for HTML file', async () => {
+  saveHtml.saveFile = mockSaveFile;
   options = {getReportHtml: () => '<html></html>'};
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 

package/lighthouse-core/gather/driver.js

@@ -304,20 +304,27 @@ class Driver {
       return;
     }
 
-    // Events from subtargets will be stringified and sent back on `Target.receivedMessageFromTarget`.
-    // We want to receive information about network requests from iframes, so enable the Network domain.
-    await this.sendCommandToSession('Network.enable', event.sessionId);
-
-    // We also want to receive information about subtargets of subtargets, so make sure we autoattach recursively.
-    await this.sendCommandToSession('Target.setAutoAttach', event.sessionId, {
-      autoAttach: true,
-      flatten: true,
-      // Pause targets on startup so we don't miss anything
-      waitForDebuggerOnStart: true,
-    });
-
-    // We suspended the target when we auto-attached, so make sure it goes back to being normal.
-    await this.sendCommandToSession('Runtime.runIfWaitingForDebugger', event.sessionId);
+    // Note: This is only reached for _out of process_ iframes (OOPIFs).
+    // If the iframe is in the same process as its embedding document, that means they
+    // share the same target.
+
+    // A target won't acknowledge/respond to protocol methods (or, at least for Network.enable)
+    // until it is resumed. But also we're paranoid about sending Network.enable _slightly_ too late,
+    // so we issue that method first. Therefore, we don't await on this serially, but await all at once.
+    await Promise.all([
+      // Events from subtargets will be stringified and sent back on `Target.receivedMessageFromTarget`.
+      // We want to receive information about network requests from iframes, so enable the Network domain.
+      this.sendCommandToSession('Network.enable', event.sessionId),
+      // We also want to receive information about subtargets of subtargets, so make sure we autoattach recursively.
+      this.sendCommandToSession('Target.setAutoAttach', event.sessionId, {
+        autoAttach: true,
+        flatten: true,
+        // Pause targets on startup so we don't miss anything
+        waitForDebuggerOnStart: true,
+      }),
+      // We suspended the target when we auto-attached, so make sure it goes back to being normal.
+      this.sendCommandToSession('Runtime.runIfWaitingForDebugger', event.sessionId),
+    ]);
   }
 
   /**

package/lighthouse-core/gather/gatherers/source-maps.js

@@ -101,6 +101,11 @@ class SourceMaps extends FRGatherer {
       const map = isSourceMapADataUri ?
           this.parseSourceMapFromDataUrl(rawSourceMapUrl) :
           await this.fetchSourceMap(driver, rawSourceMapUrl);
+
+      if (typeof map.version !== 'number') throw new Error('Map has no numeric `version` field');
+      if (!Array.isArray(map.sources)) throw new Error('Map has no `sources` list');
+      if (typeof map.mappings !== 'string') throw new Error('Map has no `mappings` field');
+
       if (map.sections) {
         map.sections = map.sections.filter(section => section.map);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220530",
+  "version": "9.5.0-dev.20220602",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -182,7 +182,7 @@
   "dependencies": {
     "@sentry/node": "^6.17.4",
     "axe-core": "4.4.1",
-    "chrome-launcher": "^0.15.0",
+    "chrome-launcher": "^0.15.1",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.0",
     "cssstyle": "1.2.1",

package/shared/localization/format.js

@@ -100,7 +100,7 @@ function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map
  * @param {string} lhlMessage Used for clear error logging.
  * @return {Record<string, string | number>}
  */
-function _preformatValues(messageFormatter, values, lhlMessage) {
+function _preformatValues(messageFormatter, values = {}, lhlMessage) {
   const elementMap = collectAllCustomElementsFromICU(messageFormatter.getAst().elements);
   const argumentElements = [...elementMap.values()];
 
@@ -165,11 +165,15 @@ function _preformatValues(messageFormatter, values, lhlMessage) {
  * is assumed to already be in the given locale.
  * If you need to localize a messagem `getFormatted` is probably what you want.
  * @param {string} message
- * @param {Record<string, string | number>} values
+ * @param {Record<string, string | number>|undefined} values
  * @param {LH.Locale} locale
  * @return {string}
  */
-function formatMessage(message, values = {}, locale) {
+function formatMessage(message, values, locale) {
+  // Parsing and formatting can be slow. Don't attempt if the string can't
+  // contain ICU placeholders, in which case formatting is already complete.
+  if (!message.includes('{') && values === undefined) return message;
+
   // When using accented english, force the use of a different locale for number formatting.
   const localeForMessageFormat = (locale === 'en-XA' || locale === 'en-XL') ? 'de-DE' : locale;
 

package/shared/test/localization/format-test.js

@@ -400,6 +400,14 @@ describe('format', () => {
         .toThrow(`Provided value "sirNotAppearingInThisString" does not match any placeholder in ICU message "Hello {timeInMs, number, seconds} World"`);
     });
 
+    it('throws an error if a value is provided for a message with no placeholders', () => {
+      expect(_ => str_(UIStrings.helloWorld, {
+        extraCreditValue: 100,
+      }))
+        // eslint-disable-next-line max-len
+        .toThrow(`Provided value "extraCreditValue" does not match any placeholder in ICU message "Hello World"`);
+    });
+
     it('formats correctly with NaN and Infinity numeric values', () => {
       const helloInfinityStr = str_(UIStrings.helloBytesWorld, {in: Infinity});
       expect(helloInfinityStr).toBeDisplayString('Hello ∞ World');