lighthouse 9.5.0-dev.20221019 → 9.5.0-dev.20221020

package/dist/report/standalone.js

@@ -14,7 +14,7 @@
    * 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 e="…",t="data:image/jpeg;base64,",n={label:"pass",minScore:.9},r={label:"average",minScore:.5},o={label:"fail"},i={label:"error"},a=["com","co","gov","edu","ac","org","go","gob","or","net","in","ne","nic","gouv","web","spb","blog","jus","kiev","mil","wi","qc","ca","bel","on"];class l{static i18n=null;static get PASS_THRESHOLD(){return.9}static get MS_DISPLAY_VALUE(){return"%10d ms"}static getFinalDisplayedUrl(e){if(e.finalDisplayedUrl)return e.finalDisplayedUrl;if(e.finalUrl)return e.finalUrl;throw new Error("Could not determine final displayed URL")}static getMainDocumentUrl(e){return e.mainDocumentUrl||e.finalUrl}static prepareReportResult(e){const n=JSON.parse(JSON.stringify(e));n.configSettings.locale||(n.configSettings.locale="en"),n.configSettings.formFactor||(n.configSettings.formFactor=n.configSettings.emulatedFormFactor),n.finalDisplayedUrl=this.getFinalDisplayedUrl(n),n.mainDocumentUrl=this.getMainDocumentUrl(n);for(const e of Object.values(n.audits))if("not_applicable"!==e.scoreDisplayMode&&"not-applicable"!==e.scoreDisplayMode||(e.scoreDisplayMode="notApplicable"),e.details&&(void 0!==e.details.type&&"diagnostic"!==e.details.type||(e.details.type="debugdata"),"filmstrip"===e.details.type))for(const n of e.details.items)n.data.startsWith(t)||(n.data=t+n.data);if("object"!=typeof n.categories)throw new Error("No categories provided.");const r=new Map,[o]=n.lighthouseVersion.split(".").map(Number),i=n.categories.performance;if(o<9&&i){n.categoryGroups||(n.categoryGroups={}),n.categoryGroups.hidden={title:""};for(const e of i.auditRefs)e.group?["load-opportunities","diagnostics"].includes(e.group)&&delete e.group:e.group="hidden"}for(const e of Object.values(n.categories))e.auditRefs.forEach((e=>{e.relevantAudits&&e.relevantAudits.forEach((t=>{const n=r.get(t)||[];n.push(e),r.set(t,n)}))})),e.auditRefs.forEach((e=>{const t=n.audits[e.id];e.result=t,r.has(e.id)&&(e.relevantMetrics=r.get(e.id)),n.stackPacks&&n.stackPacks.forEach((t=>{t.descriptions[e.id]&&(e.stackPacks=e.stackPacks||[],e.stackPacks.push({title:t.title,iconDataURL:t.iconDataURL,description:t.descriptions[e.id]}))}))}));return n}static showAsPassed(e){switch(e.scoreDisplayMode){case"manual":case"notApplicable":return!0;case"error":case"informative":return!1;case"numeric":case"binary":default:return Number(e.score)>=n.minScore}}static calculateRating(e,t){if("manual"===t||"notApplicable"===t)return n.label;if("error"===t)return i.label;if(null===e)return o.label;let a=o.label;return e>=n.minScore?a=n.label:e>=r.minScore&&(a=r.label),a}static splitMarkdownCodeSpans(e){const t=[],n=e.split(/`(.*?)`/g);for(let e=0;e<n.length;e++){const r=n[e];if(!r)continue;const o=e%2!=0;t.push({isCode:o,text:r})}return t}static splitMarkdownLink(e){const t=[],n=e.split(/\[([^\]]+?)\]\((https?:\/\/.*?)\)/g);for(;n.length;){const[e,r,o]=n.splice(0,3);e&&t.push({isLink:!1,text:e}),r&&o&&t.push({isLink:!0,text:r,linkHref:o})}return t}static getURLDisplayName(t,n){const r=void 0!==(n=n||{numPathParts:void 0,preserveQuery:void 0,preserveHost:void 0}).numPathParts?n.numPathParts:2,o=void 0===n.preserveQuery||n.preserveQuery,i=n.preserveHost||!1;let a;if("about:"===t.protocol||"data:"===t.protocol)a=t.href;else{a=t.pathname;const n=a.split("/").filter((e=>e.length));r&&n.length>r&&(a=e+n.slice(-1*r).join("/")),i&&(a=`${t.host}/${a.replace(/^\//,"")}`),o&&(a=`${a}${t.search}`)}if("data:"!==t.protocol&&(a=a.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g,"$1…"),a=a.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,"$1…"),a=a.replace(/(\d{3})\d{6,}/g,"$1…"),a=a.replace(/\u2026+/g,e),a.length>64&&a.includes("?")&&(a=a.replace(/\?([^=]*)(=)?.*/,"?$1$2…"),a.length>64&&(a=a.replace(/\?.*/,"?…")))),a.length>64){const t=a.lastIndexOf(".");a=t>=0?a.slice(0,63-(a.length-t))+`…${a.slice(t)}`:a.slice(0,63)+e}return a}static parseURL(e){const t=new URL(e);return{file:l.getURLDisplayName(t),hostname:t.hostname,origin:t.origin}}static createOrReturnURL(e){return e instanceof URL?e:new URL(e)}static getTld(e){const t=e.split(".").slice(-2);return a.includes(t[0])?`.${t.join(".")}`:`.${t[t.length-1]}`}static getRootDomain(e){const t=l.createOrReturnURL(e).hostname,n=l.getTld(t).split(".");return t.split(".").slice(-n.length).join(".")}static getEmulationDescriptions(e){let t,n,r;const o=e.throttling;switch(e.throttlingMethod){case"provided":r=n=t=l.i18n.strings.throttlingProvided;break;case"devtools":{const{cpuSlowdownMultiplier:e,requestLatencyMs:i}=o;t=`${l.i18n.formatNumber(e)}x slowdown (DevTools)`,n=`${l.i18n.formatMilliseconds(i)} HTTP RTT, ${l.i18n.formatKbps(o.downloadThroughputKbps)} down, ${l.i18n.formatKbps(o.uploadThroughputKbps)} up (DevTools)`;r=(()=>562.5===i&&o.downloadThroughputKbps===1638.4*.9&&675===o.uploadThroughputKbps)()?l.i18n.strings.runtimeSlow4g:l.i18n.strings.runtimeCustom;break}case"simulate":{const{cpuSlowdownMultiplier:e,rttMs:i,throughputKbps:a}=o;t=`${l.i18n.formatNumber(e)}x slowdown (Simulated)`,n=`${l.i18n.formatMilliseconds(i)} TCP RTT, ${l.i18n.formatKbps(a)} throughput (Simulated)`;r=(()=>150===i&&1638.4===a)()?l.i18n.strings.runtimeSlow4g:l.i18n.strings.runtimeCustom;break}default:r=t=n=l.i18n.strings.runtimeUnknown}return{deviceEmulation:{mobile:l.i18n.strings.runtimeMobileEmulation,desktop:l.i18n.strings.runtimeDesktopEmulation}[e.formFactor]||l.i18n.strings.runtimeNoEmulation,cpuThrottling:t,networkThrottling:n,summary:r}}static filterRelevantLines(e,t,n){if(0===t.length)return e.slice(0,2*n+1);const r=new Set;return(t=t.sort(((e,t)=>(e.lineNumber||0)-(t.lineNumber||0)))).forEach((({lineNumber:e})=>{let t=e-n,o=e+n;for(;t<1;)t++,o++;r.has(t-3-1)&&(t-=3);for(let e=t;e<=o;e++){const t=e;r.add(t)}})),e.filter((e=>r.has(e.lineNumber)))}static isPluginCategory(e){return e.startsWith("lighthouse-plugin-")}static shouldDisplayAsFraction(e){return"timespan"===e||"snapshot"===e}static calculateCategoryFraction(e){let t=0,n=0,r=0,o=0;for(const i of e.auditRefs){const e=l.showAsPassed(i.result);"hidden"!==i.group&&"manual"!==i.result.scoreDisplayMode&&"notApplicable"!==i.result.scoreDisplayMode&&("informative"!==i.result.scoreDisplayMode?(++t,o+=i.weight,e&&n++):e||++r)}return{numPassed:n,numPassableAudits:t,numInformative:r,totalWeight:o}}}l.reportJson=null;let s=0;l.getUniqueSuffix=()=>s++,l.resetUniqueSuffix=()=>{s=0};l.UIStrings={varianceDisclaimer:"Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.",calculatorLink:"See calculator.",showRelevantAudits:"Show audits relevant to:",opportunityResourceColumnLabel:"Opportunity",opportunitySavingsColumnLabel:"Estimated Savings",errorMissingAuditInfo:"Report error: no audit information",errorLabel:"Error!",warningHeader:"Warnings: ",warningAuditsGroupTitle:"Passed audits but with warnings",passedAuditsGroupTitle:"Passed audits",notApplicableAuditsGroupTitle:"Not applicable",manualAuditsGroupTitle:"Additional items to manually check",toplevelWarningsMessage:"There were issues affecting this run of Lighthouse:",crcInitialNavigation:"Initial Navigation",crcLongestDurationLabel:"Maximum critical path latency:",snippetExpandButtonLabel:"Expand snippet",snippetCollapseButtonLabel:"Collapse snippet",lsPerformanceCategoryDescription:"[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",labDataTitle:"Lab Data",thirdPartyResourcesLabel:"Show 3rd-party resources",viewTreemapLabel:"View Treemap",viewTraceLabel:"View Trace",viewOriginalTraceLabel:"View Original Trace",dropdownPrintSummary:"Print Summary",dropdownPrintExpanded:"Print Expanded",dropdownCopyJSON:"Copy JSON",dropdownSaveHTML:"Save as HTML",dropdownSaveJSON:"Save as JSON",dropdownViewer:"Open in Viewer",dropdownSaveGist:"Save as Gist",dropdownDarkTheme:"Toggle Dark Theme",runtimeSettingsDevice:"Device",runtimeSettingsNetworkThrottling:"Network throttling",runtimeSettingsCPUThrottling:"CPU throttling",runtimeSettingsUANetwork:"User agent (network)",runtimeSettingsBenchmark:"CPU/Memory Power",runtimeSettingsAxeVersion:"Axe version",footerIssue:"File an issue",runtimeNoEmulation:"No emulation",runtimeMobileEmulation:"Emulated Moto G4",runtimeDesktopEmulation:"Emulated Desktop",runtimeUnknown:"Unknown",runtimeSingleLoad:"Single page load",runtimeAnalysisWindow:"Initial page load",runtimeSingleLoadTooltip:"This data is taken from a single page load, as opposed to field data summarizing many sessions.",throttlingProvided:"Provided by environment",show:"Show",hide:"Hide",expandView:"Expand view",collapseView:"Collapse view",runtimeSlow4g:"Slow 4G throttling",runtimeCustom:"Custom throttling"};
+   */const e="…",t="data:image/jpeg;base64,",n={label:"pass",minScore:.9},r={label:"average",minScore:.5},o={label:"fail"},i={label:"error"},a=["com","co","gov","edu","ac","org","go","gob","or","net","in","ne","nic","gouv","web","spb","blog","jus","kiev","mil","wi","qc","ca","bel","on"];class l{static i18n=null;static get PASS_THRESHOLD(){return.9}static get MS_DISPLAY_VALUE(){return"%10d ms"}static getFinalDisplayedUrl(e){if(e.finalDisplayedUrl)return e.finalDisplayedUrl;if(e.finalUrl)return e.finalUrl;throw new Error("Could not determine final displayed URL")}static getMainDocumentUrl(e){return e.mainDocumentUrl||e.finalUrl}static prepareReportResult(e){const n=JSON.parse(JSON.stringify(e));n.configSettings.locale||(n.configSettings.locale="en"),n.configSettings.formFactor||(n.configSettings.formFactor=n.configSettings.emulatedFormFactor),n.finalDisplayedUrl=this.getFinalDisplayedUrl(n),n.mainDocumentUrl=this.getMainDocumentUrl(n);for(const e of Object.values(n.audits))if("not_applicable"!==e.scoreDisplayMode&&"not-applicable"!==e.scoreDisplayMode||(e.scoreDisplayMode="notApplicable"),e.details){if(void 0!==e.details.type&&"diagnostic"!==e.details.type||(e.details.type="debugdata"),"filmstrip"===e.details.type)for(const n of e.details.items)n.data.startsWith(t)||(n.data=t+n.data);if("table"===e.details.type)for(const t of e.details.headings){const{itemType:e,text:n}=t;void 0!==e&&(t.valueType=e,delete t.itemType),void 0!==n&&(t.label=n,delete t.text);const r=t.subItemsHeading?.itemType;t.subItemsHeading&&void 0!==r&&(t.subItemsHeading.valueType=r,delete t.subItemsHeading.itemType)}}if("object"!=typeof n.categories)throw new Error("No categories provided.");const r=new Map,[o]=n.lighthouseVersion.split(".").map(Number),i=n.categories.performance;if(o<9&&i){n.categoryGroups||(n.categoryGroups={}),n.categoryGroups.hidden={title:""};for(const e of i.auditRefs)e.group?["load-opportunities","diagnostics"].includes(e.group)&&delete e.group:e.group="hidden"}for(const e of Object.values(n.categories))e.auditRefs.forEach((e=>{e.relevantAudits&&e.relevantAudits.forEach((t=>{const n=r.get(t)||[];n.push(e),r.set(t,n)}))})),e.auditRefs.forEach((e=>{const t=n.audits[e.id];e.result=t,r.has(e.id)&&(e.relevantMetrics=r.get(e.id)),n.stackPacks&&n.stackPacks.forEach((t=>{t.descriptions[e.id]&&(e.stackPacks=e.stackPacks||[],e.stackPacks.push({title:t.title,iconDataURL:t.iconDataURL,description:t.descriptions[e.id]}))}))}));return n}static showAsPassed(e){switch(e.scoreDisplayMode){case"manual":case"notApplicable":return!0;case"error":case"informative":return!1;case"numeric":case"binary":default:return Number(e.score)>=n.minScore}}static calculateRating(e,t){if("manual"===t||"notApplicable"===t)return n.label;if("error"===t)return i.label;if(null===e)return o.label;let a=o.label;return e>=n.minScore?a=n.label:e>=r.minScore&&(a=r.label),a}static splitMarkdownCodeSpans(e){const t=[],n=e.split(/`(.*?)`/g);for(let e=0;e<n.length;e++){const r=n[e];if(!r)continue;const o=e%2!=0;t.push({isCode:o,text:r})}return t}static splitMarkdownLink(e){const t=[],n=e.split(/\[([^\]]+?)\]\((https?:\/\/.*?)\)/g);for(;n.length;){const[e,r,o]=n.splice(0,3);e&&t.push({isLink:!1,text:e}),r&&o&&t.push({isLink:!0,text:r,linkHref:o})}return t}static getURLDisplayName(t,n){const r=void 0!==(n=n||{numPathParts:void 0,preserveQuery:void 0,preserveHost:void 0}).numPathParts?n.numPathParts:2,o=void 0===n.preserveQuery||n.preserveQuery,i=n.preserveHost||!1;let a;if("about:"===t.protocol||"data:"===t.protocol)a=t.href;else{a=t.pathname;const n=a.split("/").filter((e=>e.length));r&&n.length>r&&(a=e+n.slice(-1*r).join("/")),i&&(a=`${t.host}/${a.replace(/^\//,"")}`),o&&(a=`${a}${t.search}`)}if("data:"!==t.protocol&&(a=a.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g,"$1…"),a=a.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,"$1…"),a=a.replace(/(\d{3})\d{6,}/g,"$1…"),a=a.replace(/\u2026+/g,e),a.length>64&&a.includes("?")&&(a=a.replace(/\?([^=]*)(=)?.*/,"?$1$2…"),a.length>64&&(a=a.replace(/\?.*/,"?…")))),a.length>64){const t=a.lastIndexOf(".");a=t>=0?a.slice(0,63-(a.length-t))+`…${a.slice(t)}`:a.slice(0,63)+e}return a}static parseURL(e){const t=new URL(e);return{file:l.getURLDisplayName(t),hostname:t.hostname,origin:t.origin}}static createOrReturnURL(e){return e instanceof URL?e:new URL(e)}static getTld(e){const t=e.split(".").slice(-2);return a.includes(t[0])?`.${t.join(".")}`:`.${t[t.length-1]}`}static getRootDomain(e){const t=l.createOrReturnURL(e).hostname,n=l.getTld(t).split(".");return t.split(".").slice(-n.length).join(".")}static getEmulationDescriptions(e){let t,n,r;const o=e.throttling;switch(e.throttlingMethod){case"provided":r=n=t=l.i18n.strings.throttlingProvided;break;case"devtools":{const{cpuSlowdownMultiplier:e,requestLatencyMs:i}=o;t=`${l.i18n.formatNumber(e)}x slowdown (DevTools)`,n=`${l.i18n.formatMilliseconds(i)} HTTP RTT, ${l.i18n.formatKbps(o.downloadThroughputKbps)} down, ${l.i18n.formatKbps(o.uploadThroughputKbps)} up (DevTools)`;r=(()=>562.5===i&&o.downloadThroughputKbps===1638.4*.9&&675===o.uploadThroughputKbps)()?l.i18n.strings.runtimeSlow4g:l.i18n.strings.runtimeCustom;break}case"simulate":{const{cpuSlowdownMultiplier:e,rttMs:i,throughputKbps:a}=o;t=`${l.i18n.formatNumber(e)}x slowdown (Simulated)`,n=`${l.i18n.formatMilliseconds(i)} TCP RTT, ${l.i18n.formatKbps(a)} throughput (Simulated)`;r=(()=>150===i&&1638.4===a)()?l.i18n.strings.runtimeSlow4g:l.i18n.strings.runtimeCustom;break}default:r=t=n=l.i18n.strings.runtimeUnknown}return{deviceEmulation:{mobile:l.i18n.strings.runtimeMobileEmulation,desktop:l.i18n.strings.runtimeDesktopEmulation}[e.formFactor]||l.i18n.strings.runtimeNoEmulation,cpuThrottling:t,networkThrottling:n,summary:r}}static filterRelevantLines(e,t,n){if(0===t.length)return e.slice(0,2*n+1);const r=new Set;return(t=t.sort(((e,t)=>(e.lineNumber||0)-(t.lineNumber||0)))).forEach((({lineNumber:e})=>{let t=e-n,o=e+n;for(;t<1;)t++,o++;r.has(t-3-1)&&(t-=3);for(let e=t;e<=o;e++){const t=e;r.add(t)}})),e.filter((e=>r.has(e.lineNumber)))}static isPluginCategory(e){return e.startsWith("lighthouse-plugin-")}static shouldDisplayAsFraction(e){return"timespan"===e||"snapshot"===e}static calculateCategoryFraction(e){let t=0,n=0,r=0,o=0;for(const i of e.auditRefs){const e=l.showAsPassed(i.result);"hidden"!==i.group&&"manual"!==i.result.scoreDisplayMode&&"notApplicable"!==i.result.scoreDisplayMode&&("informative"!==i.result.scoreDisplayMode?(++t,o+=i.weight,e&&n++):e||++r)}return{numPassed:n,numPassableAudits:t,numInformative:r,totalWeight:o}}}l.reportJson=null;let s=0;l.getUniqueSuffix=()=>s++,l.resetUniqueSuffix=()=>{s=0};l.UIStrings={varianceDisclaimer:"Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.",calculatorLink:"See calculator.",showRelevantAudits:"Show audits relevant to:",opportunityResourceColumnLabel:"Opportunity",opportunitySavingsColumnLabel:"Estimated Savings",errorMissingAuditInfo:"Report error: no audit information",errorLabel:"Error!",warningHeader:"Warnings: ",warningAuditsGroupTitle:"Passed audits but with warnings",passedAuditsGroupTitle:"Passed audits",notApplicableAuditsGroupTitle:"Not applicable",manualAuditsGroupTitle:"Additional items to manually check",toplevelWarningsMessage:"There were issues affecting this run of Lighthouse:",crcInitialNavigation:"Initial Navigation",crcLongestDurationLabel:"Maximum critical path latency:",snippetExpandButtonLabel:"Expand snippet",snippetCollapseButtonLabel:"Collapse snippet",lsPerformanceCategoryDescription:"[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",labDataTitle:"Lab Data",thirdPartyResourcesLabel:"Show 3rd-party resources",viewTreemapLabel:"View Treemap",viewTraceLabel:"View Trace",viewOriginalTraceLabel:"View Original Trace",dropdownPrintSummary:"Print Summary",dropdownPrintExpanded:"Print Expanded",dropdownCopyJSON:"Copy JSON",dropdownSaveHTML:"Save as HTML",dropdownSaveJSON:"Save as JSON",dropdownViewer:"Open in Viewer",dropdownSaveGist:"Save as Gist",dropdownDarkTheme:"Toggle Dark Theme",runtimeSettingsDevice:"Device",runtimeSettingsNetworkThrottling:"Network throttling",runtimeSettingsCPUThrottling:"CPU throttling",runtimeSettingsUANetwork:"User agent (network)",runtimeSettingsBenchmark:"CPU/Memory Power",runtimeSettingsAxeVersion:"Axe version",footerIssue:"File an issue",runtimeNoEmulation:"No emulation",runtimeMobileEmulation:"Emulated Moto G4",runtimeDesktopEmulation:"Emulated Desktop",runtimeUnknown:"Unknown",runtimeSingleLoad:"Single page load",runtimeAnalysisWindow:"Initial page load",runtimeSingleLoadTooltip:"This data is taken from a single page load, as opposed to field data summarizing many sessions.",throttlingProvided:"Provided by environment",show:"Show",hide:"Hide",expandView:"Expand view",collapseView:"Collapse view",runtimeSlow4g:"Slow 4G throttling",runtimeCustom:"Custom throttling"};
 /**
    * @license
    * Copyright 2017 The Lighthouse Authors. All Rights Reserved.
@@ -84,7 +84,7 @@ class c{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this
    * 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 m=["http://","https://","data:"];class f{constructor(e,t={}){this._dom=e,this._fullPageScreenshot=t.fullPageScreenshot}render(e){switch(e.type){case"filmstrip":return this._renderFilmstrip(e);case"list":return this._renderList(e);case"table":return this._renderTable(e);case"criticalrequestchain":return h.render(this._dom,e,this);case"opportunity":return this._renderTable(e);case"screenshot":case"debugdata":case"full-page-screenshot":case"treemap-data":return null;default:return this._renderUnknown(e.type,e)}}_renderBytes(e){const t=l.i18n.formatBytesToKiB(e.value,e.granularity||.1),n=this._renderText(t);return n.title=l.i18n.formatBytes(e.value),n}_renderMilliseconds(e){let t;return t="duration"===e.displayUnit?l.i18n.formatDuration(e.value):l.i18n.formatMilliseconds(e.value,e.granularity||10),this._renderText(t)}renderTextURL(e){const t=e;let n,r,o;try{const e=l.parseURL(t);n="/"===e.file?e.origin:e.file,r="/"===e.file||""===e.hostname?"":`(${e.hostname})`,o=t}catch(e){n=t}const i=this._dom.createElement("div","lh-text__url");if(i.append(this._renderLink({text:n,url:t})),r){const e=this._renderText(r);e.classList.add("lh-text__url-host"),i.append(e)}return o&&(i.title=t,i.dataset.url=t),i}_renderLink(e){const t=this._dom.createElement("a");if(this._dom.safelySetHref(t,e.url),!t.href){const t=this._renderText(e.text);return t.classList.add("lh-link"),t}return t.rel="noopener",t.target="_blank",t.textContent=e.text,t.classList.add("lh-link"),t}_renderText(e){const t=this._dom.createElement("div","lh-text");return t.textContent=e,t}_renderNumeric(e){const t=l.i18n.formatNumber(e.value,e.granularity||.1),n=this._dom.createElement("div","lh-numeric");return n.textContent=t,n}_renderThumbnail(e){const t=this._dom.createElement("img","lh-thumbnail"),n=e;return t.src=n,t.title=n,t.alt="",t}_renderUnknown(e,t){console.error(`Unknown details type: ${e}`,t);const n=this._dom.createElement("details","lh-unknown");return this._dom.createChildOf(n,"summary").textContent=`We don't know how to render audit details of type \`${e}\`. The Lighthouse version that collected this data is likely newer than the Lighthouse version of the report renderer. Expand for the raw JSON.`,this._dom.createChildOf(n,"pre").textContent=JSON.stringify(t,null,2),n}_renderTableValue(e,t){if(null==e)return null;if("object"==typeof e)switch(e.type){case"code":return this._renderCode(e.value);case"link":return this._renderLink(e);case"node":return this.renderNode(e);case"numeric":return this._renderNumeric(e);case"source-location":return this.renderSourceLocation(e);case"url":return this.renderTextURL(e.value);default:return this._renderUnknown(e.type,e)}switch(t.valueType){case"bytes":{const n=Number(e);return this._renderBytes({value:n,granularity:t.granularity})}case"code":{const t=String(e);return this._renderCode(t)}case"ms":{const n={value:Number(e),granularity:t.granularity,displayUnit:t.displayUnit};return this._renderMilliseconds(n)}case"numeric":{const n=Number(e);return this._renderNumeric({value:n,granularity:t.granularity})}case"text":{const t=String(e);return this._renderText(t)}case"thumbnail":{const t=String(e);return this._renderThumbnail(t)}case"timespanMs":{const t=Number(e);return this._renderMilliseconds({value:t})}case"url":{const t=String(e);return m.some((e=>t.startsWith(e)))?this.renderTextURL(t):this._renderCode(t)}default:return this._renderUnknown(t.valueType,e)}}_getCanonicalizedHeadingsFromTable(e){return"opportunity"===e.type?e.headings:e.headings.map((e=>this._getCanonicalizedHeading(e)))}_getCanonicalizedHeading(e){let t;return e.subItemsHeading&&(t=this._getCanonicalizedsubItemsHeading(e.subItemsHeading,e)),{key:e.key,valueType:e.itemType,subItemsHeading:t,label:e.text,displayUnit:e.displayUnit,granularity:e.granularity}}_getCanonicalizedsubItemsHeading(e,t){return e.key||console.warn("key should not be null"),{key:e.key||"",valueType:e.itemType||t.itemType,granularity:e.granularity||t.granularity,displayUnit:e.displayUnit||t.displayUnit}}_getDerivedsubItemsHeading(e){return e.subItemsHeading?{key:e.subItemsHeading.key||"",valueType:e.subItemsHeading.valueType||e.valueType,granularity:e.subItemsHeading.granularity||e.granularity,displayUnit:e.subItemsHeading.displayUnit||e.displayUnit,label:""}:null}_renderTableRow(e,t){const n=this._dom.createElement("tr");for(const r of t){if(!r||!r.key){this._dom.createChildOf(n,"td","lh-table-column--empty");continue}const t=e[r.key];let o;if(null!=t&&(o=this._renderTableValue(t,r)),o){const e=`lh-table-column--${r.valueType}`;this._dom.createChildOf(n,"td",e).append(o)}else this._dom.createChildOf(n,"td","lh-table-column--empty")}return n}_renderTableRowsFromItem(e,t){const n=this._dom.createFragment();if(n.append(this._renderTableRow(e,t)),!e.subItems)return n;const r=t.map(this._getDerivedsubItemsHeading);if(!r.some(Boolean))return n;for(const t of e.subItems.items){const e=this._renderTableRow(t,r);e.classList.add("lh-sub-item-row"),n.append(e)}return n}_renderTable(e){if(!e.items.length)return this._dom.createElement("span");const t=this._dom.createElement("table","lh-table"),n=this._dom.createChildOf(t,"thead"),r=this._dom.createChildOf(n,"tr"),o=this._getCanonicalizedHeadingsFromTable(e);for(const e of o){const t=`lh-table-column--${e.valueType||"text"}`,n=this._dom.createElement("div","lh-text");n.textContent=e.label,this._dom.createChildOf(r,"th",t).append(n)}const i=this._dom.createChildOf(t,"tbody");let a=!0;for(const t of e.items){const e=this._renderTableRowsFromItem(t,o);for(const t of this._dom.findAll("tr",e))t.classList.add(a?"lh-row--even":"lh-row--odd");a=!a,i.append(e)}return t}_renderList(e){const t=this._dom.createElement("div","lh-list");return e.items.forEach((e=>{const n=this.render(e);n&&t.append(n)})),t}renderNode(e){const t=this._dom.createElement("span","lh-node");if(e.nodeLabel){const n=this._dom.createElement("div");n.textContent=e.nodeLabel,t.append(n)}if(e.snippet){const n=this._dom.createElement("div");n.classList.add("lh-node__snippet"),n.textContent=e.snippet,t.append(n)}if(e.selector&&(t.title=e.selector),e.path&&t.setAttribute("data-path",e.path),e.selector&&t.setAttribute("data-selector",e.selector),e.snippet&&t.setAttribute("data-snippet",e.snippet),!this._fullPageScreenshot)return t;const n=e.lhId&&this._fullPageScreenshot.nodes[e.lhId];if(!n||0===n.width||0===n.height)return t;const r=g.render(this._dom,this._fullPageScreenshot.screenshot,n,{width:147,height:100});return r&&t.prepend(r),t}renderSourceLocation(e){if(!e.url)return null;const t=`${e.url}:${e.line+1}:${e.column}`;let n,r;if(e.original){n=`${e.original.file||"<unmapped>"}:${e.original.line+1}:${e.original.column}`}if("network"===e.urlProvider&&n)r=this._renderLink({url:e.url,text:n}),r.title=`maps to generated location ${t}`;else if("network"!==e.urlProvider||n)if("comment"===e.urlProvider&&n)r=this._renderText(`${n} (from source map)`),r.title=`${t} (from sourceURL)`;else{if("comment"!==e.urlProvider||n)return null;r=this._renderText(`${t} (from sourceURL)`)}else r=this.renderTextURL(e.url),this._dom.find(".lh-link",r).textContent+=`:${e.line+1}:${e.column}`;return r.classList.add("lh-source-location"),r.setAttribute("data-source-url",e.url),r.setAttribute("data-source-line",String(e.line)),r.setAttribute("data-source-column",String(e.column)),r}_renderFilmstrip(e){const t=this._dom.createElement("div","lh-filmstrip");for(const n of e.items){const e=this._dom.createChildOf(t,"div","lh-filmstrip__frame"),r=this._dom.createChildOf(e,"img","lh-filmstrip__thumbnail");r.src=n.data,r.alt="Screenshot"}return t}_renderCode(e){const t=this._dom.createElement("pre","lh-code");return t.textContent=e,t}}
+   */const m=["http://","https://","data:"];class f{constructor(e,t={}){this._dom=e,this._fullPageScreenshot=t.fullPageScreenshot}render(e){switch(e.type){case"filmstrip":return this._renderFilmstrip(e);case"list":return this._renderList(e);case"table":case"opportunity":return this._renderTable(e);case"criticalrequestchain":return h.render(this._dom,e,this);case"screenshot":case"debugdata":case"full-page-screenshot":case"treemap-data":return null;default:return this._renderUnknown(e.type,e)}}_renderBytes(e){const t=l.i18n.formatBytesToKiB(e.value,e.granularity||.1),n=this._renderText(t);return n.title=l.i18n.formatBytes(e.value),n}_renderMilliseconds(e){let t;return t="duration"===e.displayUnit?l.i18n.formatDuration(e.value):l.i18n.formatMilliseconds(e.value,e.granularity||10),this._renderText(t)}renderTextURL(e){const t=e;let n,r,o;try{const e=l.parseURL(t);n="/"===e.file?e.origin:e.file,r="/"===e.file||""===e.hostname?"":`(${e.hostname})`,o=t}catch(e){n=t}const i=this._dom.createElement("div","lh-text__url");if(i.append(this._renderLink({text:n,url:t})),r){const e=this._renderText(r);e.classList.add("lh-text__url-host"),i.append(e)}return o&&(i.title=t,i.dataset.url=t),i}_renderLink(e){const t=this._dom.createElement("a");if(this._dom.safelySetHref(t,e.url),!t.href){const t=this._renderText(e.text);return t.classList.add("lh-link"),t}return t.rel="noopener",t.target="_blank",t.textContent=e.text,t.classList.add("lh-link"),t}_renderText(e){const t=this._dom.createElement("div","lh-text");return t.textContent=e,t}_renderNumeric(e){const t=l.i18n.formatNumber(e.value,e.granularity||.1),n=this._dom.createElement("div","lh-numeric");return n.textContent=t,n}_renderThumbnail(e){const t=this._dom.createElement("img","lh-thumbnail"),n=e;return t.src=n,t.title=n,t.alt="",t}_renderUnknown(e,t){console.error(`Unknown details type: ${e}`,t);const n=this._dom.createElement("details","lh-unknown");return this._dom.createChildOf(n,"summary").textContent=`We don't know how to render audit details of type \`${e}\`. The Lighthouse version that collected this data is likely newer than the Lighthouse version of the report renderer. Expand for the raw JSON.`,this._dom.createChildOf(n,"pre").textContent=JSON.stringify(t,null,2),n}_renderTableValue(e,t){if(null==e)return null;if("object"==typeof e)switch(e.type){case"code":return this._renderCode(e.value);case"link":return this._renderLink(e);case"node":return this.renderNode(e);case"numeric":return this._renderNumeric(e);case"source-location":return this.renderSourceLocation(e);case"url":return this.renderTextURL(e.value);default:return this._renderUnknown(e.type,e)}switch(t.valueType){case"bytes":{const n=Number(e);return this._renderBytes({value:n,granularity:t.granularity})}case"code":{const t=String(e);return this._renderCode(t)}case"ms":{const n={value:Number(e),granularity:t.granularity,displayUnit:t.displayUnit};return this._renderMilliseconds(n)}case"numeric":{const n=Number(e);return this._renderNumeric({value:n,granularity:t.granularity})}case"text":{const t=String(e);return this._renderText(t)}case"thumbnail":{const t=String(e);return this._renderThumbnail(t)}case"timespanMs":{const t=Number(e);return this._renderMilliseconds({value:t})}case"url":{const t=String(e);return m.some((e=>t.startsWith(e)))?this.renderTextURL(t):this._renderCode(t)}default:return this._renderUnknown(t.valueType,e)}}_getDerivedSubItemsHeading(e){return e.subItemsHeading?{key:e.subItemsHeading.key||"",valueType:e.subItemsHeading.valueType||e.valueType,granularity:e.subItemsHeading.granularity||e.granularity,displayUnit:e.subItemsHeading.displayUnit||e.displayUnit,label:""}:null}_renderTableRow(e,t){const n=this._dom.createElement("tr");for(const r of t){if(!r||!r.key){this._dom.createChildOf(n,"td","lh-table-column--empty");continue}const t=e[r.key];let o;if(null!=t&&(o=this._renderTableValue(t,r)),o){const e=`lh-table-column--${r.valueType}`;this._dom.createChildOf(n,"td",e).append(o)}else this._dom.createChildOf(n,"td","lh-table-column--empty")}return n}_renderTableRowsFromItem(e,t){const n=this._dom.createFragment();if(n.append(this._renderTableRow(e,t)),!e.subItems)return n;const r=t.map(this._getDerivedSubItemsHeading);if(!r.some(Boolean))return n;for(const t of e.subItems.items){const e=this._renderTableRow(t,r);e.classList.add("lh-sub-item-row"),n.append(e)}return n}_renderTable(e){if(!e.items.length)return this._dom.createElement("span");const t=this._dom.createElement("table","lh-table"),n=this._dom.createChildOf(t,"thead"),r=this._dom.createChildOf(n,"tr");for(const t of e.headings){const e=`lh-table-column--${t.valueType||"text"}`,n=this._dom.createElement("div","lh-text");n.textContent=t.label,this._dom.createChildOf(r,"th",e).append(n)}const o=this._dom.createChildOf(t,"tbody");let i=!0;for(const t of e.items){const n=this._renderTableRowsFromItem(t,e.headings);for(const e of this._dom.findAll("tr",n))e.classList.add(i?"lh-row--even":"lh-row--odd");i=!i,o.append(n)}return t}_renderList(e){const t=this._dom.createElement("div","lh-list");return e.items.forEach((e=>{const n=this.render(e);n&&t.append(n)})),t}renderNode(e){const t=this._dom.createElement("span","lh-node");if(e.nodeLabel){const n=this._dom.createElement("div");n.textContent=e.nodeLabel,t.append(n)}if(e.snippet){const n=this._dom.createElement("div");n.classList.add("lh-node__snippet"),n.textContent=e.snippet,t.append(n)}if(e.selector&&(t.title=e.selector),e.path&&t.setAttribute("data-path",e.path),e.selector&&t.setAttribute("data-selector",e.selector),e.snippet&&t.setAttribute("data-snippet",e.snippet),!this._fullPageScreenshot)return t;const n=e.lhId&&this._fullPageScreenshot.nodes[e.lhId];if(!n||0===n.width||0===n.height)return t;const r=g.render(this._dom,this._fullPageScreenshot.screenshot,n,{width:147,height:100});return r&&t.prepend(r),t}renderSourceLocation(e){if(!e.url)return null;const t=`${e.url}:${e.line+1}:${e.column}`;let n,r;if(e.original){n=`${e.original.file||"<unmapped>"}:${e.original.line+1}:${e.original.column}`}if("network"===e.urlProvider&&n)r=this._renderLink({url:e.url,text:n}),r.title=`maps to generated location ${t}`;else if("network"!==e.urlProvider||n)if("comment"===e.urlProvider&&n)r=this._renderText(`${n} (from source map)`),r.title=`${t} (from sourceURL)`;else{if("comment"!==e.urlProvider||n)return null;r=this._renderText(`${t} (from sourceURL)`)}else r=this.renderTextURL(e.url),this._dom.find(".lh-link",r).textContent+=`:${e.line+1}:${e.column}`;return r.classList.add("lh-source-location"),r.setAttribute("data-source-url",e.url),r.setAttribute("data-source-line",String(e.line)),r.setAttribute("data-source-column",String(e.column)),r}_renderFilmstrip(e){const t=this._dom.createElement("div","lh-filmstrip");for(const n of e.items){const e=this._dom.createChildOf(t,"div","lh-filmstrip__frame"),r=this._dom.createChildOf(e,"img","lh-filmstrip__thumbnail");r.src=n.data,r.alt="Screenshot"}return t}_renderCode(e){const t=this._dom.createElement("pre","lh-code");return t.textContent=e,t}}
 /**
    * @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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20221019",
+  "version": "9.5.0-dev.20221020",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -134,7 +134,7 @@
     "archiver": "^3.0.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.1034999",
+    "chrome-devtools-frontend": "1.0.1040857",
     "concurrently": "^6.4.0",
     "conventional-changelog-cli": "^2.1.1",
     "cpy": "^8.1.2",
@@ -188,7 +188,6 @@
     "chrome-launcher": "^0.15.1",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
-    "cssstyle": "1.2.1",
     "enquirer": "^2.3.6",
     "http-link-header": "^0.8.0",
     "intl-messageformat": "^4.4.0",

package/report/renderer/details-renderer.js

@@ -23,6 +23,7 @@
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.Table>} Table */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.TableItem>} TableItem */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.ItemValue>} TableItemValue */
+/** @typedef {LH.FormattedIcu<LH.Audit.Details.TableColumnHeading>} TableColumnHeading */
 
 import {Util} from './util.js';
 import {CriticalRequestChainRenderer} from './crc-details-renderer.js';
@@ -51,11 +52,10 @@ export class DetailsRenderer {
       case 'list':
         return this._renderList(details);
       case 'table':
+      case 'opportunity':
         return this._renderTable(details);
       case 'criticalrequestchain':
         return CriticalRequestChainRenderer.render(this._dom, details, this);
-      case 'opportunity':
-        return this._renderTable(details);
 
       // Internal-only details, not for rendering.
       case 'screenshot':
@@ -213,7 +213,7 @@ export class DetailsRenderer {
    * based on the heading's valueType, unless the value itself has a `type`
    * property to override it.
    * @param {TableItemValue} value
-   * @param {LH.Audit.Details.OpportunityColumnHeading} heading
+   * @param {LH.Audit.Details.TableColumnHeading} heading
    * @return {Element|null}
    */
   _renderTableValue(value, heading) {
@@ -298,73 +298,14 @@ export class DetailsRenderer {
     }
   }
 
-  /**
-   * Get the headings of a table-like details object, converted into the
-   * OpportunityColumnHeading type until we have all details use the same
-   * heading format.
-   * @param {Table|OpportunityTable} tableLike
-   * @return {OpportunityTable['headings']}
-   */
-  _getCanonicalizedHeadingsFromTable(tableLike) {
-    if (tableLike.type === 'opportunity') {
-      return tableLike.headings;
-    }
-
-    return tableLike.headings.map(heading => this._getCanonicalizedHeading(heading));
-  }
-
-  /**
-   * Get the headings of a table-like details object, converted into the
-   * OpportunityColumnHeading type until we have all details use the same
-   * heading format.
-   * @param {Table['headings'][number]} heading
-   * @return {OpportunityTable['headings'][number]}
-   */
-  _getCanonicalizedHeading(heading) {
-    let subItemsHeading;
-    if (heading.subItemsHeading) {
-      subItemsHeading = this._getCanonicalizedsubItemsHeading(heading.subItemsHeading, heading);
-    }
-
-    return {
-      key: heading.key,
-      valueType: heading.itemType,
-      subItemsHeading,
-      label: heading.text,
-      displayUnit: heading.displayUnit,
-      granularity: heading.granularity,
-    };
-  }
-
-  /**
-   * @param {Exclude<LH.Audit.Details.TableColumnHeading['subItemsHeading'], undefined>} subItemsHeading
-   * @param {LH.Audit.Details.TableColumnHeading} parentHeading
-   * @return {LH.Audit.Details.OpportunityColumnHeading['subItemsHeading']}
-   */
-  _getCanonicalizedsubItemsHeading(subItemsHeading, parentHeading) {
-    // Low-friction way to prevent committing a falsy key (which is never allowed for
-    // a subItemsHeading) from passing in CI.
-    if (!subItemsHeading.key) {
-      // eslint-disable-next-line no-console
-      console.warn('key should not be null');
-    }
-
-    return {
-      key: subItemsHeading.key || '',
-      valueType: subItemsHeading.itemType || parentHeading.itemType,
-      granularity: subItemsHeading.granularity || parentHeading.granularity,
-      displayUnit: subItemsHeading.displayUnit || parentHeading.displayUnit,
-    };
-  }
-
   /**
    * Returns a new heading where the values are defined first by `heading.subItemsHeading`,
    * and secondly by `heading`. If there is no subItemsHeading, returns null, which will
    * be rendered as an empty column.
-   * @param {LH.Audit.Details.OpportunityColumnHeading} heading
-   * @return {LH.Audit.Details.OpportunityColumnHeading | null}
+   * @param {LH.Audit.Details.TableColumnHeading} heading
+   * @return {LH.Audit.Details.TableColumnHeading | null}
    */
-  _getDerivedsubItemsHeading(heading) {
+  _getDerivedSubItemsHeading(heading) {
     if (!heading.subItemsHeading) return null;
     return {
       key: heading.subItemsHeading.key || '',
@@ -377,7 +318,7 @@ export class DetailsRenderer {
 
   /**
    * @param {TableItem} item
-   * @param {(LH.Audit.Details.OpportunityColumnHeading | null)[]} headings
+   * @param {(LH.Audit.Details.TableColumnHeading | null)[]} headings
    */
   _renderTableRow(item, headings) {
     const rowElem = this._dom.createElement('tr');
@@ -414,7 +355,7 @@ export class DetailsRenderer {
    * Renders one or more rows from a details table item. A single table item can
    * expand into multiple rows, if there is a subItemsHeading.
    * @param {TableItem} item
-   * @param {LH.Audit.Details.OpportunityColumnHeading[]} headings
+   * @param {LH.Audit.Details.TableColumnHeading[]} headings
    */
   _renderTableRowsFromItem(item, headings) {
     const fragment = this._dom.createFragment();
@@ -422,7 +363,7 @@ export class DetailsRenderer {
 
     if (!item.subItems) return fragment;
 
-    const subItemsHeadings = headings.map(this._getDerivedsubItemsHeading);
+    const subItemsHeadings = headings.map(this._getDerivedSubItemsHeading);
     if (!subItemsHeadings.some(Boolean)) return fragment;
 
     for (const subItem of item.subItems.items) {
@@ -435,7 +376,7 @@ export class DetailsRenderer {
   }
 
   /**
-   * @param {OpportunityTable|Table} details
+   * @param {{headings: TableColumnHeading[], items: TableItem[]}} details
    * @return {Element}
    */
   _renderTable(details) {
@@ -445,9 +386,7 @@ export class DetailsRenderer {
     const theadElem = this._dom.createChildOf(tableElem, 'thead');
     const theadTrElem = this._dom.createChildOf(theadElem, 'tr');
 
-    const headings = this._getCanonicalizedHeadingsFromTable(details);
-
-    for (const heading of headings) {
+    for (const heading of details.headings) {
       const valueType = heading.valueType || 'text';
       const classes = `lh-table-column--${valueType}`;
       const labelEl = this._dom.createElement('div', 'lh-text');
@@ -458,7 +397,7 @@ export class DetailsRenderer {
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
     let even = true;
     for (const item of details.items) {
-      const rowsFragment = this._renderTableRowsFromItem(item, headings);
+      const rowsFragment = this._renderTableRowsFromItem(item, details.headings);
       for (const rowEl of this._dom.findAll('tr', rowsFragment)) {
         // For zebra styling.
         rowEl.classList.add(even ? 'lh-row--even' : 'lh-row--odd');

package/report/renderer/util.js

@@ -123,6 +123,33 @@ class Util {
             }
           }
         }
+
+        // Circa 10.0, table items were refactored.
+        if (audit.details.type === 'table') {
+          for (const heading of audit.details.headings) {
+            /** @type {{itemType: LH.Audit.Details.ItemValueType|undefined, text: string|undefined}} */
+            // @ts-expect-error
+            const {itemType, text} = heading;
+            if (itemType !== undefined) {
+              heading.valueType = itemType;
+              // @ts-expect-error
+              delete heading.itemType;
+            }
+            if (text !== undefined) {
+              heading.label = text;
+              // @ts-expect-error
+              delete heading.text;
+            }
+
+            // @ts-expect-error
+            const subItemsItemType = heading.subItemsHeading?.itemType;
+            if (heading.subItemsHeading && subItemsItemType !== undefined) {
+              heading.subItemsHeading.valueType = subItemsItemType;
+              // @ts-expect-error
+              delete heading.subItemsHeading.itemType;
+            }
+          }
+        }
       }
     }
 

package/report/test/renderer/details-renderer-test.js

@@ -57,9 +57,9 @@ describe('DetailsRenderer', () => {
       const el = renderer.render({
         type: 'table',
         headings: [
-          {text: 'First', key: 'a', itemType: 'text'},
-          {text: 'Second', key: 'b', itemType: 'text'},
-          {text: 'Preview', key: 'c', itemType: 'thumbnail'},
+          {text: 'First', key: 'a', valueType: 'text'},
+          {text: 'Second', key: 'b', valueType: 'text'},
+          {text: 'Preview', key: 'c', valueType: 'thumbnail'},
         ],
         items: [
           {
@@ -88,11 +88,11 @@ describe('DetailsRenderer', () => {
       const el = renderer.render({
         type: 'table',
         headings: [
-          {text: '', key: 'bytes', itemType: 'bytes'},
-          {text: '', key: 'numeric', itemType: 'numeric'},
-          {text: '', key: 'ms', itemType: 'ms'},
+          {text: '', key: 'bytes', valueType: 'bytes'},
+          {text: '', key: 'numeric', valueType: 'numeric'},
+          {text: '', key: 'ms', valueType: 'ms'},
           // Verify that 0 is ignored.
-          {text: '', key: 'ms', itemType: 'ms', granularity: 0},
+          {text: '', key: 'ms', valueType: 'ms', granularity: 0},
         ],
         items: [
           {
@@ -114,9 +114,9 @@ describe('DetailsRenderer', () => {
       const el = renderer.render({
         type: 'table',
         headings: [
-          {text: '', key: 'bytes', itemType: 'bytes', granularity: 0.01},
-          {text: '', key: 'numeric', itemType: 'numeric', granularity: 100},
-          {text: '', key: 'ms', itemType: 'ms', granularity: 1},
+          {text: '', key: 'bytes', valueType: 'bytes', granularity: 0.01},
+          {text: '', key: 'numeric', valueType: 'numeric', granularity: 100},
+          {text: '', key: 'ms', valueType: 'ms', granularity: 1},
         ],
         items: [
           {
@@ -190,7 +190,7 @@ describe('DetailsRenderer', () => {
     it('renders lists', () => {
       const table = {
         type: 'table',
-        headings: [{text: '', key: 'numeric', itemType: 'numeric'}],
+        headings: [{text: '', key: 'numeric', valueType: 'numeric'}],
         items: [{numeric: 1234.567}],
       };
 
@@ -264,7 +264,7 @@ describe('DetailsRenderer', () => {
     it('renders text values', () => {
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'text', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'text', label: 'Heading'}],
         items: [{content: 'My text content'}],
       };
 
@@ -277,7 +277,7 @@ describe('DetailsRenderer', () => {
     it('renders not much if items are empty', () => {
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'text', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'text', label: 'Heading'}],
         items: [],
       };
 
@@ -288,7 +288,7 @@ describe('DetailsRenderer', () => {
     it('renders an empty cell if item is missing a property', () => {
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'text', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'text', label: 'Heading'}],
         items: [
           {},
           {content: undefined},
@@ -316,7 +316,7 @@ describe('DetailsRenderer', () => {
     it('renders code values from a string', () => {
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'code', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'code', label: 'Heading'}],
         items: [{content: 'code snippet'}],
       };
 
@@ -334,7 +334,7 @@ describe('DetailsRenderer', () => {
 
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'code', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'code', label: 'Heading'}],
         items: [{content: code}],
       };
 
@@ -347,7 +347,7 @@ describe('DetailsRenderer', () => {
     it('renders thumbnail values', () => {
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'thumbnail', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'thumbnail', label: 'Heading'}],
         items: [{content: 'http://example.com/my-image.jpg'}],
       };
 
@@ -369,7 +369,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'link', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'link', label: 'Heading'}],
         items: [{content: link}],
       };
 
@@ -391,7 +391,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'link', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'link', label: 'Heading'}],
         items: [{content: link}],
       };
 
@@ -411,7 +411,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'link', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'link', label: 'Heading'}],
         items: [{content: link}],
       };
 
@@ -431,7 +431,7 @@ describe('DetailsRenderer', () => {
         };
         const details = {
           type: 'table',
-          headings: [{key: 'content', itemType: 'node', text: 'Heading'}],
+          headings: [{key: 'content', valueType: 'node', label: 'Heading'}],
           items: [{content: node}],
         };
 
@@ -466,7 +466,7 @@ describe('DetailsRenderer', () => {
         };
         const details = {
           type: 'table',
-          headings: [{key: 'content', itemType: 'node', text: 'Heading'}],
+          headings: [{key: 'content', valueType: 'node', label: 'Heading'}],
           items: [{content: node}],
         };
 
@@ -498,7 +498,7 @@ describe('DetailsRenderer', () => {
         };
         const details = {
           type: 'table',
-          headings: [{key: 'content', itemType: 'node', text: 'Heading'}],
+          headings: [{key: 'content', valueType: 'node', label: 'Heading'}],
           items: [{content: node}],
         };
 
@@ -519,7 +519,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'source-location', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'source-location', label: 'Heading'}],
         items: [{content: sourceLocation}],
       };
 
@@ -549,7 +549,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'source-location', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'source-location', label: 'Heading'}],
         items: [{content: sourceLocation}],
       };
 
@@ -575,7 +575,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'source-location', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'source-location', label: 'Heading'}],
         items: [{content: sourceLocation}],
       };
 
@@ -600,7 +600,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'source-location', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'source-location', label: 'Heading'}],
         items: [{content: sourceLocation}],
       };
 
@@ -625,7 +625,7 @@ describe('DetailsRenderer', () => {
       };
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'source-location', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'source-location', label: 'Heading'}],
         items: [{content: sourceLocation}],
       };
 
@@ -646,7 +646,7 @@ describe('DetailsRenderer', () => {
 
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'url', label: 'Heading'}],
         items: [{content: urlText}],
       };
 
@@ -673,7 +673,7 @@ describe('DetailsRenderer', () => {
 
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'url', label: 'Heading'}],
         items: [{content: url}],
         overallSavingsMs: 100,
       };
@@ -693,7 +693,7 @@ describe('DetailsRenderer', () => {
 
       const details = {
         type: 'table',
-        headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
+        headings: [{key: 'content', valueType: 'url', label: 'Heading'}],
         items: [{content: urlText}],
       };
 
@@ -712,11 +712,11 @@ describe('DetailsRenderer', () => {
         console.error = consoleError;
       });
 
-      it('renders an unknown heading itemType', () => {
+      it('renders an unknown heading valueType', () => {
         // Disallowed by type system, but test that we get an error message out just in case.
         const details = {
           type: 'table',
-          headings: [{key: 'content', itemType: 'notRealValueType', text: 'Heading'}],
+          headings: [{key: 'content', valueType: 'notRealValueType', label: 'Heading'}],
           items: [{content: 'some string'}],
         };
 
@@ -737,7 +737,7 @@ describe('DetailsRenderer', () => {
 
         const details = {
           type: 'table',
-          headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
+          headings: [{key: 'content', valueType: 'url', label: 'Heading'}],
           items: [{content: item}],
         };
 
@@ -753,8 +753,8 @@ describe('DetailsRenderer', () => {
     it('uses the item\'s type over the heading type', () => {
       const details = {
         type: 'table',
-        // itemType is overriden by code object
-        headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
+        // valueType is overriden by code object
+        headings: [{key: 'content', valueType: 'url', label: 'Heading'}],
         items: [
           {content: {type: 'code', value: 'https://codeobject.com'}},
           {content: 'https://example.com'},
@@ -790,7 +790,7 @@ describe('DetailsRenderer', () => {
         const details = {
           type: 'table',
           headings: [
-            {key: 'url', itemType: 'url', subItemsHeading: {key: 'source', itemType: 'code'}},
+            {key: 'url', valueType: 'url', subItemsHeading: {key: 'source', valueType: 'code'}},
           ],
           items: [
             {
@@ -832,7 +832,7 @@ describe('DetailsRenderer', () => {
       it('renders, uses heading properties as fallback', () => {
         const details = {
           type: 'table',
-          headings: [{key: 'url', itemType: 'url', subItemsHeading: {key: 'source'}}],
+          headings: [{key: 'url', valueType: 'url', subItemsHeading: {key: 'source'}}],
           items: [
             {
               url: 'https://www.example.com',

package/report/test/renderer/util-test.js

@@ -176,6 +176,31 @@ describe('util helpers', () => {
         assert.deepStrictEqual(clonedPreparedResult.categories, preparedResult.categories);
         assert.deepStrictEqual(clonedPreparedResult.categoryGroups, preparedResult.categoryGroups);
       });
+
+      it('converts old opportunity table column headings to consolidated table headings', () => {
+        const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+        const auditsWithTableDetails = Object.values(clonedSampleResult.audits)
+          .filter(audit => audit.details?.type === 'table');
+        assert.notEqual(auditsWithTableDetails.length, 0);
+        for (const audit of auditsWithTableDetails) {
+          for (const heading of audit.details.headings) {
+            heading.itemType = heading.valueType;
+            heading.text = heading.label;
+            delete heading.valueType;
+            delete heading.label;
+
+            if (heading.subItemsHeading) {
+              heading.subItemsHeading.itemType = heading.subItemsHeading.valueType;
+              // @ts-expect-error
+              delete heading.subItemsHeading.valueType;
+            }
+          }
+        }
+
+        const preparedResult = Util.prepareReportResult(clonedSampleResult);
+        assert.deepStrictEqual(sampleResult.audits, preparedResult.audits);
+      });
     });
 
     it('appends stack pack descriptions to auditRefs', () => {