lighthouse 9.0.0-dev.20211121 → 9.1.0

package/dist/report/standalone.js

@@ -145,7 +145,7 @@ class s{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this
    *
    * Dummy text for ensuring report robustness: <\/script> pre$`post %%LIGHTHOUSE_JSON%%
    * (this is handled by terser)
-   */class N{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.");const e=t.closest(".lh-root");e?this._dom.rootEl=e:(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");const r=l.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.appendChild(this._renderReport(r)),this._dom.rootEl}_renderReportTopbar(e){const t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalUrl,n.title=e.finalUrl,this._dom.safelySetHref(n,e.finalUrl),t}_renderReportHeader(){const e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){const t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=l.i18n.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){const n=l.getEmulationDescriptions(e.configSettings||{}),r=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),o=Array.isArray(r)?r[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",i=e.configSettings.channel,a=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[["date",`Captured at ${l.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,`${l.i18n.strings.runtimeSettingsBenchmark}: ${a}\n${l.i18n.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`+(s?`\n${l.i18n.strings.runtimeSettingsAxeVersion}: ${s}`:"")],["samples-one",l.i18n.strings.runtimeSingleLoad,l.i18n.strings.runtimeSingleLoadTooltip],["stopwatch",l.i18n.strings.runtimeAnalysisWindow],["networkspeed",`${n.summary}`,`${l.i18n.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${o}`+(i?` with ${i}`:""),`${l.i18n.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],d=this._dom.find(".lh-meta__items",t);for(const[e,t,n]of c){const r=this._dom.createChildOf(d,"li","lh-meta__item");if(r.textContent=t,n){r.classList.add("lh-tooltip-boundary");this._dom.createChildOf(r,"div","lh-tooltip").textContent=n}r.classList.add("lh-report-icon",`lh-report-icon--${e}`)}}_renderReportWarnings(e){if(!e.runWarnings||0===e.runWarnings.length)return this._dom.createElement("div");const t=this._dom.createComponent("warningsToplevel");this._dom.find(".lh-warnings__msg",t).textContent=l.i18n.strings.toplevelWarningsMessage;const n=this._dom.find("ul",t);for(const t of e.runWarnings){n.appendChild(this._dom.createElement("li")).appendChild(this._dom.convertMarkdownLinkSnippets(t))}return t}_renderScoreGauges(e,t,n){const r=[],o=[],i=[];for(const a of Object.values(e.categories)){const s=n[a.id]||t,c=s.renderCategoryScore(a,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${a.id}`),d.addEventListener("click",(e=>{if(!d.matches('[href^="#"]'))return;const t=d.getAttribute("href"),n=this._dom.rootEl;if(!t||!n)return;const r=this._dom.find(t,n);e.preventDefault(),r.scrollIntoView()})),this._opts.onPageAnchorRendered?.(d)),l.isPluginCategory(a.id)?i.push(c):s.renderCategoryScore===t.renderCategoryScore?r.push(c):o.push(c)}return[...r,...o,...i]}_renderReport(e){const t=new L(e.configSettings.locale,{...l.UIStrings,...e.i18n.rendererFormattedStrings});l.i18n=t,l.reportJson=e;const n=e.audits["full-page-screenshot"]&&e.audits["full-page-screenshot"].details&&"full-page-screenshot"===e.audits["full-page-screenshot"].details.type?e.audits["full-page-screenshot"].details:void 0,r=new z(this._dom,{fullPageScreenshot:n}),o=new c(this._dom,r),i={performance:new M(this._dom,r),pwa:new F(this._dom,r)},a=this._dom.createElement("div");a.appendChild(this._renderReportHeader());const s=this._dom.createElement("div","lh-container"),d=this._dom.createElement("div","lh-report");let h;d.appendChild(this._renderReportWarnings(e));1===Object.keys(e.categories).length?a.classList.add("lh-header--solo-category"):h=this._dom.createElement("div","lh-scores-header");const p=this._dom.createElement("div");if(p.classList.add("lh-scorescale-wrap"),p.append(this._dom.createComponent("scorescale")),h){const t=this._dom.find(".lh-scores-container",a);h.append(...this._renderScoreGauges(e,o,i)),t.appendChild(h),t.appendChild(p);const n=this._dom.createElement("div","lh-sticky-header");n.append(...this._renderScoreGauges(e,o,i)),s.appendChild(n)}const u=d.appendChild(this._dom.createElement("div","lh-categories")),g={gatherMode:e.gatherMode};for(const t of Object.values(e.categories)){const n=i[t.id]||o;n.dom.createChildOf(u,"div","lh-category-wrapper").appendChild(n.render(t,e.categoryGroups,g))}o.injectFinalScreenshot(u,e.audits,p);const m=this._dom.createFragment();return m.append(this._dom.createComponent("styles")),this._opts.omitTopbar||m.appendChild(this._renderReportTopbar(e)),m.appendChild(s),s.appendChild(a),s.appendChild(d),d.appendChild(this._renderReportFooter(e)),n&&A.installFullPageScreenshot(this._dom.rootEl,n.screenshot),m}}
+   */class N{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.");const e=t.closest(".lh-root");e?this._dom.rootEl=e:(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");const r=l.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.appendChild(this._renderReport(r)),this._dom.rootEl}_renderReportTopbar(e){const t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalUrl,n.title=e.finalUrl,this._dom.safelySetHref(n,e.finalUrl),t}_renderReportHeader(){const e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){const t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=l.i18n.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){const n=l.getEmulationDescriptions(e.configSettings||{}),r=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),o=Array.isArray(r)?r[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",i=e.configSettings.channel,a=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[["date",`Captured at ${l.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,`${l.i18n.strings.runtimeSettingsBenchmark}: ${a}\n${l.i18n.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`+(s?`\n${l.i18n.strings.runtimeSettingsAxeVersion}: ${s}`:"")],["samples-one",l.i18n.strings.runtimeSingleLoad,l.i18n.strings.runtimeSingleLoadTooltip],["stopwatch",l.i18n.strings.runtimeAnalysisWindow],["networkspeed",`${n.summary}`,`${l.i18n.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${o}`+(i?` with ${i}`:""),`${l.i18n.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],d=this._dom.find(".lh-meta__items",t);for(const[e,t,n]of c){const r=this._dom.createChildOf(d,"li","lh-meta__item");if(r.textContent=t,n){r.classList.add("lh-tooltip-boundary");this._dom.createChildOf(r,"div","lh-tooltip").textContent=n}r.classList.add("lh-report-icon",`lh-report-icon--${e}`)}}_renderReportWarnings(e){if(!e.runWarnings||0===e.runWarnings.length)return this._dom.createElement("div");const t=this._dom.createComponent("warningsToplevel");this._dom.find(".lh-warnings__msg",t).textContent=l.i18n.strings.toplevelWarningsMessage;const n=this._dom.find("ul",t);for(const t of e.runWarnings){n.appendChild(this._dom.createElement("li")).appendChild(this._dom.convertMarkdownLinkSnippets(t))}return t}_renderScoreGauges(e,t,n){const r=[],o=[],i=[];for(const a of Object.values(e.categories)){const s=n[a.id]||t,c=s.renderCategoryScore(a,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${a.id}`),d.addEventListener("click",(e=>{if(!d.matches('[href^="#"]'))return;const t=d.getAttribute("href"),n=this._dom.rootEl;if(!t||!n)return;const r=this._dom.find(t,n);e.preventDefault(),r.scrollIntoView()})),this._opts.onPageAnchorRendered?.(d)),l.isPluginCategory(a.id)?i.push(c):s.renderCategoryScore===t.renderCategoryScore?r.push(c):o.push(c)}return[...r,...o,...i]}_renderReport(e){const t=new L(e.configSettings.locale,{...l.UIStrings,...e.i18n.rendererFormattedStrings});l.i18n=t,l.reportJson=e;const n=e.audits["full-page-screenshot"]&&e.audits["full-page-screenshot"].details&&"full-page-screenshot"===e.audits["full-page-screenshot"].details.type?e.audits["full-page-screenshot"].details:void 0,r=new z(this._dom,{fullPageScreenshot:n}),o=new c(this._dom,r),i={performance:new M(this._dom,r),pwa:new F(this._dom,r)},a=this._dom.createElement("div");a.appendChild(this._renderReportHeader());const s=this._dom.createElement("div","lh-container"),d=this._dom.createElement("div","lh-report");let h;d.appendChild(this._renderReportWarnings(e));1===Object.keys(e.categories).length?a.classList.add("lh-header--solo-category"):h=this._dom.createElement("div","lh-scores-header");const p=this._dom.createElement("div");if(p.classList.add("lh-scorescale-wrap"),p.append(this._dom.createComponent("scorescale")),h){const t=this._dom.find(".lh-scores-container",a);h.append(...this._renderScoreGauges(e,o,i)),t.appendChild(h),t.appendChild(p);const n=this._dom.createElement("div","lh-sticky-header");n.append(...this._renderScoreGauges(e,o,i)),s.appendChild(n)}const u=d.appendChild(this._dom.createElement("div","lh-categories")),g={gatherMode:e.gatherMode};for(const t of Object.values(e.categories)){const n=i[t.id]||o;n.dom.createChildOf(u,"div","lh-category-wrapper").appendChild(n.render(t,e.categoryGroups,g))}o.injectFinalScreenshot(u,e.audits,p);const m=this._dom.createFragment();return this._opts.omitGlobalStyles||m.append(this._dom.createComponent("styles")),this._opts.omitTopbar||m.appendChild(this._renderReportTopbar(e)),m.appendChild(s),s.appendChild(a),s.appendChild(d),d.appendChild(this._renderReportFooter(e)),n&&A.installFullPageScreenshot(this._dom.rootEl,n.screenshot),m}}
 /**
    * @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
@@ -187,7 +187,7 @@ class O{constructor(e){this._dom=e,this._toggleEl,this._menuEl,this.onDocumentKe
    * @license Copyright 2017 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 V(e,t){const n=t?new Date(t):new Date,r=n.toLocaleTimeString("en-US",{hour12:!1}),o=n.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}).split("/");o.unshift(o.pop());return`${e}_${o.join("-")}_${r}`.replace(/[/?<>\\:*|"]/g,"-")}var G={getLhrFilenamePrefix:function(e){return V(new URL(e.finalUrl).hostname,e.fetchTime)},getFilenamePrefix:V};
+   */function V(e,t){const n=t?new Date(t):new Date,r=n.toLocaleTimeString("en-US",{hour12:!1}),o=n.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}).split("/");o.unshift(o.pop());return`${e}_${o.join("-")}_${r}`.replace(/[/?<>\\:*|"]/g,"-")}var G={getLhrFilenamePrefix:function(e){return V(new URL(e.finalUrl).hostname,e.fetchTime)},getFilenamePrefix:V,getFlowResultFilenamePrefix:function(e){const t=e.steps[0].lhr;return V(e.name.replace(/\s/g,"-"),t.fetchTime)}};
 /**
    * @license
    * Copyright 2017 The Lighthouse Authors. All Rights Reserved.
@@ -203,7 +203,7 @@ class O{constructor(e){this._dom=e,this._toggleEl,this._menuEl,this.onDocumentKe
    * 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.
-   */class j{constructor(e,t={}){this.json,this._dom=e,this._opts=t,this._topbar=t.omitTopbar?null:new I(this,e),this.onMediaQueryChange=this.onMediaQueryChange.bind(this)}initFeatures(e){this.json=e,this._topbar&&(this._topbar.enable(e),this._topbar.resetUIState()),this._setupMediaQueryListeners(),this._setupThirdPartyFilter(),this._setupElementScreenshotOverlay(this._dom.rootEl);let t=!1;!(this._dom.isDevTools()||this._opts.disableAutoDarkModeAndFireworks)&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(t=!0);["performance","accessibility","best-practices","seo"].every((t=>{const n=e.categories[t];return n&&1===n.score}))&&(t=!0,this._enableFireworks()),t&&T(this._dom,!0);if(e.categories.performance&&e.categories.performance.auditRefs.some((t=>Boolean("metrics"===t.group&&e.audits[t.id].errorMessage)))){this._dom.find("input.lh-metrics-toggle__input",this._dom.rootEl).checked=!0}this.json.audits["script-treemap-data"]&&this.json.audits["script-treemap-data"].details&&this.addButton({text:l.i18n.strings.viewTreemapLabel,icon:"treemap",onClick:()=>function(e){if(!e.audits["script-treemap-data"].details)throw new Error("no script treemap data found");U({lhr:{requestedUrl:e.requestedUrl,finalUrl:e.finalUrl,audits:{"script-treemap-data":e.audits["script-treemap-data"]},configSettings:{locale:e.configSettings.locale}}},P()+"/treemap/","treemap-"+$(e))}(this.json)});for(const e of this._dom.findAll("[data-i18n]",this._dom.rootEl)){const t=e.getAttribute("data-i18n");e.textContent=l.i18n.strings[t]}}addButton(e){const 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"));const r=["lh-button"];e.icon&&(r.push("lh-report-icon"),r.push(`lh-report-icon--${e.icon}`));const o=this._dom.createChildOf(n,"button",r.join(" "));return o.textContent=e.text,o.addEventListener("click",e.onClick),o}getReportHtml(){return this._topbar&&this._topbar.resetUIState(),`<!doctype html><body>${this._dom.rootEl.outerHTML}`}saveAsGist(){throw new Error("Cannot save as gist from base report")}_enableFireworks(){const e=this._dom.find(".lh-scores-container",this._dom.rootEl);e.classList.add("lh-score100"),e.addEventListener("click",(t=>{e.classList.toggle("lh-fireworks-paused")}))}_setupMediaQueryListeners(){const 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(){const e=["uses-rel-preconnect","third-party-facades"],t=["legacy-javascript"];Array.from(this._dom.rootEl.querySelectorAll("table.lh-table")).filter((e=>e.querySelector("td.lh-table-column--url, td.lh-table-column--source-location"))).filter((t=>{const n=t.closest(".lh-audit");if(!n)throw new Error(".lh-table not within audit");return!e.includes(n.id)})).forEach((e=>{const n=function(e){return Array.from(e.tBodies[0].rows)}(e),r=this._getThirdPartyRows(n,this.json.finalUrl),o=this._dom.createComponent("3pFilter"),i=this._dom.find("input",o);i.addEventListener("change",(e=>{const t=e.target instanceof HTMLInputElement&&!e.target.checked;let o=!0,i=n[0];for(;i;){const e=t&&r.includes(i);do{i.classList.toggle("lh-row--hidden",e),i.classList.toggle("lh-row--even",!e&&o),i.classList.toggle("lh-row--odd",!e&&!o),i=i.nextElementSibling}while(i&&i.classList.contains("lh-sub-item-row"));e||(o=!o)}})),this._dom.find(".lh-3p-filter-count",o).textContent=`${r.length}`,this._dom.find(".lh-3p-ui-string",o).textContent=l.i18n.strings.thirdPartyResourcesLabel;const a=r.length===n.length,s=!r.length;if((a||s)&&(this._dom.find("div.lh-3p-filter",o).hidden=!0),!e.parentNode)return;e.parentNode.insertBefore(o,e);const c=e.closest(".lh-audit");if(!c)throw new Error(".lh-table not within audit");t.includes(c.id)&&!a&&i.click()}))}_setupElementScreenshotOverlay(e){const t=this.json.audits["full-page-screenshot"]&&this.json.audits["full-page-screenshot"].details&&"full-page-screenshot"===this.json.audits["full-page-screenshot"].details.type&&this.json.audits["full-page-screenshot"].details;t&&A.installOverlayFeature({dom:this._dom,rootEl:e,overlayContainerEl:e,fullPageScreenshot:t})}_getThirdPartyRows(e,t){const n=[],r=l.getRootDomain(t);for(const t of e){if(t.classList.contains("lh-sub-item-row"))continue;const e=t.querySelector("div.lh-text__url");if(!e)continue;const o=e.dataset.url;if(!o)continue;l.getRootDomain(o)!==r&&n.push(t)}return n}_saveFile(e){const t=G.getLhrFilenamePrefix(this.json);this._dom.saveFile(e,t)}}
+   */class j{constructor(e,t={}){this.json,this._dom=e,this._opts=t,this._topbar=t.omitTopbar?null:new I(this,e),this.onMediaQueryChange=this.onMediaQueryChange.bind(this)}initFeatures(e){this.json=e,this._topbar&&(this._topbar.enable(e),this._topbar.resetUIState()),this._setupMediaQueryListeners(),this._setupThirdPartyFilter(),this._setupElementScreenshotOverlay(this._dom.rootEl);let t=!1;!(this._dom.isDevTools()||this._opts.disableAutoDarkModeAndFireworks)&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(t=!0);["performance","accessibility","best-practices","seo"].every((t=>{const n=e.categories[t];return n&&1===n.score}))&&(t=!0,this._enableFireworks()),t&&T(this._dom,!0);if(e.categories.performance&&e.categories.performance.auditRefs.some((t=>Boolean("metrics"===t.group&&e.audits[t.id].errorMessage)))){this._dom.find("input.lh-metrics-toggle__input",this._dom.rootEl).checked=!0}this.json.audits["script-treemap-data"]&&this.json.audits["script-treemap-data"].details&&this.addButton({text:l.i18n.strings.viewTreemapLabel,icon:"treemap",onClick:()=>function(e){if(!e.audits["script-treemap-data"].details)throw new Error("no script treemap data found");U({lhr:{requestedUrl:e.requestedUrl,finalUrl:e.finalUrl,audits:{"script-treemap-data":e.audits["script-treemap-data"]},configSettings:{locale:e.configSettings.locale}}},P()+"/treemap/","treemap-"+$(e))}(this.json)});for(const e of this._dom.findAll("[data-i18n]",this._dom.rootEl)){const t=e.getAttribute("data-i18n");e.textContent=l.i18n.strings[t]}}addButton(e){const 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"));const r=["lh-button"];e.icon&&(r.push("lh-report-icon"),r.push(`lh-report-icon--${e.icon}`));const o=this._dom.createChildOf(n,"button",r.join(" "));return o.textContent=e.text,o.addEventListener("click",e.onClick),o}getReportHtml(){return this._topbar&&this._topbar.resetUIState(),`<!doctype html><body style="margin: 0">${this._dom.rootEl.outerHTML}`}saveAsGist(){throw new Error("Cannot save as gist from base report")}_enableFireworks(){const e=this._dom.find(".lh-scores-container",this._dom.rootEl);e.classList.add("lh-score100"),e.addEventListener("click",(t=>{e.classList.toggle("lh-fireworks-paused")}))}_setupMediaQueryListeners(){const 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(){const e=["uses-rel-preconnect","third-party-facades"],t=["legacy-javascript"];Array.from(this._dom.rootEl.querySelectorAll("table.lh-table")).filter((e=>e.querySelector("td.lh-table-column--url, td.lh-table-column--source-location"))).filter((t=>{const n=t.closest(".lh-audit");if(!n)throw new Error(".lh-table not within audit");return!e.includes(n.id)})).forEach((e=>{const n=function(e){return Array.from(e.tBodies[0].rows)}(e),r=this._getThirdPartyRows(n,this.json.finalUrl),o=this._dom.createComponent("3pFilter"),i=this._dom.find("input",o);i.addEventListener("change",(e=>{const t=e.target instanceof HTMLInputElement&&!e.target.checked;let o=!0,i=n[0];for(;i;){const e=t&&r.includes(i);do{i.classList.toggle("lh-row--hidden",e),i.classList.toggle("lh-row--even",!e&&o),i.classList.toggle("lh-row--odd",!e&&!o),i=i.nextElementSibling}while(i&&i.classList.contains("lh-sub-item-row"));e||(o=!o)}})),this._dom.find(".lh-3p-filter-count",o).textContent=`${r.length}`,this._dom.find(".lh-3p-ui-string",o).textContent=l.i18n.strings.thirdPartyResourcesLabel;const a=r.length===n.length,s=!r.length;if((a||s)&&(this._dom.find("div.lh-3p-filter",o).hidden=!0),!e.parentNode)return;e.parentNode.insertBefore(o,e);const c=e.closest(".lh-audit");if(!c)throw new Error(".lh-table not within audit");t.includes(c.id)&&!a&&i.click()}))}_setupElementScreenshotOverlay(e){const t=this.json.audits["full-page-screenshot"]&&this.json.audits["full-page-screenshot"].details&&"full-page-screenshot"===this.json.audits["full-page-screenshot"].details.type&&this.json.audits["full-page-screenshot"].details;t&&A.installOverlayFeature({dom:this._dom,rootEl:e,overlayContainerEl:e,fullPageScreenshot:t})}_getThirdPartyRows(e,t){const n=[],r=l.getRootDomain(t);for(const t of e){if(t.classList.contains("lh-sub-item-row"))continue;const e=t.querySelector("div.lh-text__url");if(!e)continue;const o=e.dataset.url;if(!o)continue;l.getRootDomain(o)!==r&&n.push(t)}return n}_saveFile(e){const t=G.getLhrFilenamePrefix(this.json);this._dom.saveFile(e,t)}}
 /**
    * @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/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */
+
+import {render, h} from 'preact';
+
+import {App} from './src/app';
+
+export function renderFlowReport(
+  flowResult: LH.FlowResult,
+  root: HTMLElement,
+  options?: LH.FlowReportOptions
+) {
+  root.classList.add('flow-vars', 'lh-vars', 'lh-root');
+  render(h(App, {flowResult, options}), root);
+}

package/flow-report/assets/standalone-flow-template.html

@@ -21,7 +21,6 @@ limitations under the License.
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
   <title>Lighthouse Flow Report</title>
-  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
   <style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
   <style>body {margin: 0}</style>
 </head>

package/flow-report/{standalone-flow.tsx → clients/standalone.ts}

@@ -9,15 +9,14 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-import {render} from 'preact';
-
-import {App} from './src/app';
+import {renderFlowReport} from '../api';
 
 function __initLighthouseFlowReport__() {
   const container = document.body.querySelector('main');
   if (!container) throw Error('Container element not found');
-  container.classList.add('flow-vars', 'lh-root', 'lh-vars');
-  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
+  renderFlowReport(window.__LIGHTHOUSE_FLOW_JSON__, container, {
+    getReportHtml: () => document.documentElement.outerHTML,
+  });
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;

package/flow-report/src/app.tsx

@@ -5,15 +5,16 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef, useState} from 'preact/hooks';
+import {useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
 
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {classNames, FlowResultContext, useHashState} from './util';
+import {classNames, FlowResultContext, OptionsContext, useHashState} from './util';
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
+import {Styles} from './wrappers/styles';
 
 function getAnchorElement(hashState: LH.FlowResult.HashState|null) {
   if (!hashState || !hashState.anchor) return null;
@@ -47,17 +48,24 @@ const Content: FunctionComponent = () => {
   );
 };
 
-export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
+export const App: FunctionComponent<{
+  flowResult: LH.FlowResult,
+  options?: LH.FlowReportOptions
+}> = ({flowResult, options}) => {
   const [collapsed, setCollapsed] = useState(false);
+  const optionsValue = useMemo(() => options || {}, [options]);
   return (
-    <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
-          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
-          <Sidebar/>
-          <Content/>
-        </div>
-      </I18nProvider>
-    </FlowResultContext.Provider>
+    <OptionsContext.Provider value={optionsValue}>
+      <FlowResultContext.Provider value={flowResult}>
+        <I18nProvider>
+          <Styles/>
+          <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
+            <Topbar onMenuClick={() => setCollapsed(c => !c)} />
+            <Sidebar/>
+            <Content/>
+          </div>
+        </I18nProvider>
+      </FlowResultContext.Provider>
+    </OptionsContext.Provider>
   );
 };

package/flow-report/src/sidebar/flow.tsx

@@ -48,8 +48,6 @@ export const SidebarFlow: FunctionComponent = () => {
       {
         flowResult.steps.map((step, index) => {
           const {lhr, name} = step;
-          const url = new URL(location.href);
-          url.hash = `#index=${index}`;
           return <>
             {
               lhr.gatherMode === 'navigation' && index !== 0 ?
@@ -59,7 +57,7 @@ export const SidebarFlow: FunctionComponent = () => {
             <SidebarFlowStep
               key={lhr.fetchTime}
               mode={lhr.gatherMode}
-              href={url.href}
+              href={`#index=${index}`}
               label={name}
               isCurrent={index === (hashState && hashState.index)}
             />

package/flow-report/src/sidebar/sidebar.tsx

@@ -17,11 +17,9 @@ const SidebarSummary: FunctionComponent = () => {
   const hashState = useHashState();
   const strings = useLocalizedStrings();
 
-  const url = new URL(location.href);
-  url.hash = '#';
   return (
     <a
-      href={url.href}
+      href="#"
       className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >

package/flow-report/src/topbar.tsx

@@ -8,20 +8,15 @@ import {FunctionComponent, JSX} from 'preact';
 import {useState} from 'preact/hooks';
 
 import {HelpDialog} from './help-dialog';
-import {getFilenamePrefix} from '../../report/generator/file-namer';
+import {getFlowResultFilenamePrefix} from '../../report/generator/file-namer';
 import {useLocalizedStrings} from './i18n/i18n';
 import {HamburgerIcon, InfoIcon} from './icons';
-import {useFlowResult} from './util';
+import {useFlowResult, useOptions} from './util';
 import {saveFile} from '../../report/renderer/api';
 
-function saveHtml(flowResult: LH.FlowResult) {
-  const htmlStr = document.documentElement.outerHTML;
+function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
-
-  const lhr = flowResult.steps[0].lhr;
-  const name = flowResult.name.replace(/\s/g, '-');
-  const filename = getFilenamePrefix(name, lhr.fetchTime);
-
+  const filename = getFlowResultFilenamePrefix(flowResult);
   saveFile(blob, filename);
 }
 
@@ -78,6 +73,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
+  const {getReportHtml, saveAsGist} = useOptions();
 
   return (
     <div className="Topbar">
@@ -88,10 +84,23 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
         <Logo/>
       </div>
       <div className="Topbar__title">{strings.title}</div>
-      <TopbarButton
-        onClick={() => saveHtml(flowResult)}
-        label="Button that saves the report as HTML"
-      >{strings.save}</TopbarButton>
+      {
+        getReportHtml &&
+          <TopbarButton
+            onClick={() => {
+              const htmlStr = getReportHtml(flowResult);
+              saveHtml(flowResult, htmlStr);
+            }}
+            label="Button that saves the report as HTML"
+          >{strings.save}</TopbarButton>
+      }
+      {
+        saveAsGist &&
+          <TopbarButton
+            onClick={() => saveAsGist(flowResult)}
+            label="Button that saves the report to a gist"
+          >{strings.dropdownSaveGist}</TopbarButton>
+      }
       <div style={{flexGrow: 1}} />
       <TopbarButton
         onClick={() => setShowHelpDialog(previous => !previous)}

package/flow-report/src/util.ts

@@ -10,6 +10,7 @@ import {useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from
 import type {UIStringsType} from './i18n/ui-strings';
 
 const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
+const OptionsContext = createContext<LH.FlowReportOptions>({});
 
 function getHashParam(param: string): string|null {
   const params = new URLSearchParams(location.hash.replace('#', '?'));
@@ -147,8 +148,13 @@ function useExternalRenderer<T extends Element>(
   return ref;
 }
 
+function useOptions() {
+  return useContext(OptionsContext);
+}
+
 export {
   FlowResultContext,
+  OptionsContext,
   classNames,
   getScreenDimensions,
   getFullPageScreenshot,
@@ -158,4 +164,5 @@ export {
   useHashParams,
   useHashState,
   useExternalRenderer,
+  useOptions,
 };

package/flow-report/src/wrappers/report.tsx

@@ -35,6 +35,7 @@ export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
     return renderReport(hashState.currentLhr, {
       disableAutoDarkModeAndFireworks: true,
       omitTopbar: true,
+      omitGlobalStyles: true,
       onPageAnchorRendered: link => convertAnchor(link, hashState.index),
     });
   }, [hashState]);

package/flow-report/src/wrappers/styles.tsx

@@ -0,0 +1,16 @@
+/**
+ * @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.
+ */
+
+import {FunctionComponent} from 'preact';
+
+import {createStylesElement} from '../../../report/renderer/api';
+import {useExternalRenderer} from '../util';
+
+export const Styles: FunctionComponent = () => {
+  const ref = useExternalRenderer<HTMLDivElement>(createStylesElement);
+
+  return <div ref={ref}/>;
+};

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

@@ -8,7 +8,7 @@ import {jest} from '@jest/globals';
 import {FunctionComponent} from 'preact';
 import {act, render} from '@testing-library/preact';
 
-import {FlowResultContext} from '../src/util';
+import {FlowResultContext, OptionsContext} from '../src/util';
 import {I18nProvider} from '../src/i18n/i18n';
 
 const mockSaveFile = jest.fn();
@@ -31,19 +31,24 @@ const flowResult = {
 } as any;
 
 let wrapper: FunctionComponent;
+let options: LH.FlowReportOptions;
 
 beforeEach(() => {
   mockSaveFile.mockReset();
+  options = {};
   wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        {children}
-      </I18nProvider>
-    </FlowResultContext.Provider>
+    <OptionsContext.Provider value={options}>
+      <FlowResultContext.Provider value={flowResult}>
+        <I18nProvider>
+          {children}
+        </I18nProvider>
+      </FlowResultContext.Provider>
+    </OptionsContext.Provider>
   );
 });
 
 it('save button opens save dialog for HTML file', async () => {
+  options = {getReportHtml: () => '<html></html>'};
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 
   const saveButton = root.getByText('Save');
@@ -55,6 +60,17 @@ it('save button opens save dialog for HTML file', async () => {
   );
 });
 
+it('provides save as gist option if defined', async () => {
+  const saveAsGist = jest.fn();
+  options = {saveAsGist};
+  const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
+
+  const saveButton = root.getByText('Save as Gist');
+  saveButton.click();
+
+  expect(saveAsGist).toHaveBeenCalledWith(flowResult);
+});
+
 it('toggles help dialog', async () => {
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 

package/flow-report/types/flow-report.d.ts

@@ -20,6 +20,10 @@ declare global {
   // Expose global types in LH namespace.
   module LH {
     export type ConfigSettings = Settings.ConfigSettings;
+    export interface FlowReportOptions {
+      getReportHtml?: (flowResult: FlowResult_) => string;
+      saveAsGist?: (flowResult: FlowResult_) => void;
+    }
 
     export import FlowResult = FlowResult_;
   }

package/lighthouse-cli/cli-flags.js

@@ -225,7 +225,7 @@ function getFlags(manualArgv, options = {}) {
       .options({
         'output': {
           type: 'array',
-          default: /** @type {['html']} */ (['html']),
+          default: /** @type {const} */ (['html']),
           coerce: coerceOutput,
           describe: 'Reporter for the results, supports multiple values. choices: "json", "html", "csv"',
         },
@@ -309,9 +309,9 @@ function getFlags(manualArgv, options = {}) {
       })
 
       // Choices added outside of `options()` and cast so tsc picks them up.
-      .choices('form-factor', /** @type {['mobile', 'desktop']} */ (['mobile', 'desktop']))
-      .choices('throttling-method', /** @type {['devtools', 'provided', 'simulate']} */ (['devtools', 'provided', 'simulate']))
-      .choices('preset', /** @type {['perf', 'experimental', 'desktop']} */ (['perf', 'experimental', 'desktop']))
+      .choices('form-factor', /** @type {const} */ (['mobile', 'desktop']))
+      .choices('throttling-method', /** @type {const} */ (['devtools', 'provided', 'simulate']))
+      .choices('preset', /** @type {const} */ (['perf', 'experimental', 'desktop']))
 
       .check(argv => {
         // Lighthouse doesn't need a URL if...

package/lighthouse-core/audits/audit.js

@@ -233,21 +233,53 @@ class Audit {
   }
 
   /**
-   * @param {LH.Artifacts.ConsoleMessage} entry
-   * @return {LH.Audit.Details.SourceLocationValue | undefined}
+   * @param {LH.Artifacts.Bundle} bundle
+   * @param {number} generatedLine
+   * @param {number} generatedColumn
+   * @return {LH.Audit.Details.SourceLocationValue['original']}
    */
-  static makeSourceLocationFromConsoleMessage(entry) {
-    if (!entry.url) return;
+  static _findOriginalLocation(bundle, generatedLine, generatedColumn) {
+    const entry = bundle?.map.findEntry(generatedLine, generatedColumn);
+    if (!entry) return;
 
+    return {
+      file: entry.sourceURL || '',
+      line: entry.sourceLineNumber || 0,
+      column: entry.sourceColumnNumber || 0,
+    };
+  }
+
+  /**
+   * @param {string} url
+   * @param {number} line 0-indexed
+   * @param {number} column 0-indexed
+   * @param {LH.Artifacts.Bundle=} bundle
+   * @return {LH.Audit.Details.SourceLocationValue}
+   */
+  static makeSourceLocation(url, line, column, bundle) {
     return {
       type: 'source-location',
-      url: entry.url,
+      url,
       urlProvider: 'network',
-      line: entry.lineNumber || 0,
-      column: entry.columnNumber || 0,
+      line,
+      column,
+      original: bundle && this._findOriginalLocation(bundle, line, column),
     };
   }
 
+  /**
+   * @param {LH.Artifacts.ConsoleMessage} entry
+   * @param {LH.Artifacts.Bundle=} bundle
+   * @return {LH.Audit.Details.SourceLocationValue | undefined}
+   */
+  static makeSourceLocationFromConsoleMessage(entry, bundle) {
+    if (!entry.url) return;
+
+    const line = entry.lineNumber || 0;
+    const column = entry.columnNumber || 0;
+    return this.makeSourceLocation(entry.url, line, column, bundle);
+  }
+
   /**
    * @param {number|null} score
    * @param {LH.Audit.ScoreDisplayMode} scoreDisplayMode

package/lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -397,23 +397,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     return transferRatio;
   }
 
-  /**
-   * @param {LH.Artifacts.Bundle} bundle
-   * @param {number} generatedLine
-   * @param {number} generatedColumn
-   * @return {LH.Audit.Details.SourceLocationValue['original']}
-   */
-  static _findOriginalLocation(bundle, generatedLine, generatedColumn) {
-    const entry = bundle && bundle.map.findEntry(generatedLine, generatedColumn);
-    if (!entry) return;
-
-    return {
-      file: entry.sourceURL || '',
-      line: entry.sourceLineNumber || 0,
-      column: entry.sourceColumnNumber || 0,
-    };
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -456,18 +439,10 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       const bundle = bundles.find(bundle => bundle.script.src === url);
       for (const match of matches) {
         const {name, line, column} = match;
-
         /** @type {SubItem} */
         const subItem = {
           signal: name,
-          location: {
-            type: 'source-location',
-            url,
-            line,
-            column,
-            original: bundle && this._findOriginalLocation(bundle, line, column),
-            urlProvider: 'network',
-          },
+          location: ByteEfficiencyAudit.makeSourceLocation(url, line, column, bundle),
         };
         item.subItems.items.push(subItem);
       }

package/lighthouse-core/audits/deprecations.js

@@ -14,6 +14,7 @@
 // TODO: when M97 is sufficiently old, drop support for console messages
 
 const Audit = require('./audit.js');
+const JsBundles = require('../computed/js-bundles.js');
 const i18n = require('../lib/i18n/i18n.js');
 
 const UIStrings = {
@@ -47,34 +48,29 @@ class Deprecations extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages', 'InspectorIssues'],
+      requiredArtifacts: ['ConsoleMessages', 'InspectorIssues', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const entries = artifacts.ConsoleMessages;
+    const bundles = await JsBundles.request(artifacts, context);
 
     let deprecations;
-
     if (artifacts.InspectorIssues.deprecations.length) {
       deprecations = artifacts.InspectorIssues.deprecations
         .map(deprecation => {
+          const {url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;
+          const bundle = bundles.find(bundle => bundle.script.src === url);
           return {
             value: deprecation.message || '',
-            /** @type {LH.Audit.Details.SourceLocationValue} */
-            source: {
-              type: 'source-location',
-              url: deprecation.sourceCodeLocation.url,
-              urlProvider: 'network',
-              line: deprecation.sourceCodeLocation.lineNumber,
-              // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed,
-              // but we use 0-indexed.
-              column: deprecation.sourceCodeLocation.columnNumber - 1,
-            },
+            // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed, but we use 0-indexed.
+            source: Audit.makeSourceLocation(url, lineNumber, columnNumber - 1, bundle),
           };
         });
     } else {

package/lighthouse-core/audits/dobetterweb/geolocation-on-start.js

@@ -38,17 +38,18 @@ class GeolocationOnStart extends ViolationAudit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     // 'Only request geolocation information in response to a user gesture.'
-    const results = ViolationAudit.getViolationResults(artifacts, /geolocation/);
+    const results = await ViolationAudit.getViolationResults(artifacts, context, /geolocation/);
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/lighthouse-core/audits/dobetterweb/js-libraries.js

@@ -61,7 +61,7 @@ class JsLibrariesAudit extends Audit {
     const details = Audit.makeTableDetails(headings, libDetails, {});
 
     const debugData = {
-      type: /** @type {'debugdata'} */ ('debugdata'),
+      type: /** @type {const} */ ('debugdata'),
       stacks: artifacts.Stacks.map(stack => {
         return {
           id: stack.id,

package/lighthouse-core/audits/dobetterweb/no-document-write.js

@@ -54,16 +54,18 @@ class NoDocWriteAudit extends ViolationAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const results = ViolationAudit.getViolationResults(artifacts, /document\.write/);
+  static async audit(artifacts, context) {
+    const results =
+      await ViolationAudit.getViolationResults(artifacts, context, /document\.write/);
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [