From dd3b0517cfdb4dffef95989a2722c8cd3c7d0080 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 11 May 2020 23:26:20 -0700 Subject: [PATCH 01/14] report: link to calculator w/ values --- .../renderer/performance-category-renderer.js | 17 +++++++++++++++++ lighthouse-core/report/html/renderer/util.js | 2 ++ 2 files changed, 19 insertions(+) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index f01c8262471e..01b031ad3c02 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -152,6 +152,23 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer'); const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer); estValuesEl.appendChild(disclaimerEl); + + // Add link to score calculator + const calculatorLink = this.dom.createChildOf(estValuesEl, 'a'); + calculatorLink.textContent = strings.calculatorLink; + const v5andv6metrics = /** @type {LH.ReportResult.AuditRef[]} */ ([ + ...metricAudits, + category.auditRefs.find(m => m.id === 'first-cpu-idle'), + category.auditRefs.find(m => m.id === 'first-meaningful-paint'), + ]); + const metricPairs = v5andv6metrics.map(audit => { + const value = (audit.result.numericValue || 0).toString(); + return [audit.id, value] + }); + const params = new URLSearchParams(metricPairs); + const url = new URL('https://paulirish.github.io/lh-scorecalc/'); + url.hash = params.toString(); + calculatorLink.href = url.toString(); } metricAuditsEl.classList.add('lh-audit-group--metrics'); diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 7cc97091ac39..e7e37a865f06 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -497,6 +497,8 @@ Util.i18n = null; Util.UIStrings = { /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */ varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.', + /** Text link pointing to the Lighthouse scoring calculator. This link immediately follows a sentence stating the performance score is calculated from the perf metrics. */ + calculatorLink: 'See calculator', /** Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit. */ opportunityResourceColumnLabel: 'Opportunity', /** Column heading label for the estimated page load savings of opportunity audits. Estimated Savings is the total amount of time (in seconds) that Lighthouse computed could be reduced from the total page load time, if the suggested action is taken. There are only 2 columns, so no strict character limit. */ From b3e35a6d8886f5625879f7558232e71895c0d132 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 11 May 2020 23:50:30 -0700 Subject: [PATCH 02/14] updatejson --- lighthouse-core/lib/i18n/locales/en-US.json | 3 +++ lighthouse-core/lib/i18n/locales/en-XL.json | 3 +++ lighthouse-core/test/results/sample_v2.json | 1 + 3 files changed, 7 insertions(+) diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json index ff10d6e58b06..e1bdb2f47629 100644 --- a/lighthouse-core/lib/i18n/locales/en-US.json +++ b/lighthouse-core/lib/i18n/locales/en-US.json @@ -1601,6 +1601,9 @@ "lighthouse-core/report/html/renderer/util.js | auditGroupExpandTooltip": { "message": "Show audits" }, + "lighthouse-core/report/html/renderer/util.js | calculatorLink": { + "message": "See calculator" + }, "lighthouse-core/report/html/renderer/util.js | crcInitialNavigation": { "message": "Initial Navigation" }, diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json index 8fcb4be94f49..ba7f1e83b984 100644 --- a/lighthouse-core/lib/i18n/locales/en-XL.json +++ b/lighthouse-core/lib/i18n/locales/en-XL.json @@ -1601,6 +1601,9 @@ "lighthouse-core/report/html/renderer/util.js | auditGroupExpandTooltip": { "message": "Ŝh́ôẃ âúd̂ít̂ś" }, + "lighthouse-core/report/html/renderer/util.js | calculatorLink": { + "message": "Ŝéê ćâĺĉúl̂át̂ór̂" + }, "lighthouse-core/report/html/renderer/util.js | crcInitialNavigation": { "message": "Îńît́îál̂ Ńâv́îǵât́îón̂" }, diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 9c2db9ac630e..e7c56e402f48 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -5652,6 +5652,7 @@ "i18n": { "rendererFormattedStrings": { "auditGroupExpandTooltip": "Show audits", + "calculatorLink": "See calculator", "crcInitialNavigation": "Initial Navigation", "crcLongestDurationLabel": "Maximum critical path latency:", "dropdownCopyJSON": "Copy JSON", From 0fb9c4f90ccf8fd3bbff5999847a31e16b1f456d Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 00:06:53 -0700 Subject: [PATCH 03/14] scorecalc now in lighthouse's ghpages --- .../report/html/renderer/performance-category-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 01b031ad3c02..5efddf6be7a5 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -166,7 +166,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { return [audit.id, value] }); const params = new URLSearchParams(metricPairs); - const url = new URL('https://paulirish.github.io/lh-scorecalc/'); + const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); url.hash = params.toString(); calculatorLink.href = url.toString(); } From fa567cb61f504a983798df6a40cb8859d1d4d96b Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 00:39:45 -0700 Subject: [PATCH 04/14] lint --- .../report/html/renderer/performance-category-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 5efddf6be7a5..80f2bf6e585d 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -163,7 +163,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { ]); const metricPairs = v5andv6metrics.map(audit => { const value = (audit.result.numericValue || 0).toString(); - return [audit.id, value] + return [audit.id, value]; }); const params = new URLSearchParams(metricPairs); const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); From b5a43bb59613d739b55935ef33c4c75ea8eb7f06 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 00:55:25 -0700 Subject: [PATCH 05/14] add calclink to proto --- proto/lighthouse-result.proto | 3 +++ 1 file changed, 3 insertions(+) diff --git a/proto/lighthouse-result.proto b/proto/lighthouse-result.proto index 9b34d162ab20..ece8b4739aaa 100644 --- a/proto/lighthouse-result.proto +++ b/proto/lighthouse-result.proto @@ -438,6 +438,9 @@ message I18n { // Label for a row in a table that shows in what tool Lighthouse is being run (e.g. The lighthouse CLI, Chrome DevTools, Lightrider, WebPageTest, etc). string runtime_settings_channel = 44; + + // Text link pointing to the Lighthouse scoring calculator. This link immediately follows a sentence stating the performance score is calculated from the perf metrics. + string calculator_link = 45; } // The message holding all formatted strings From 10837c19cbaefc1f849f88f7c6e7b5d6dda197af Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 00:57:17 -0700 Subject: [PATCH 06/14] add trailing whitespace for sentence spacing --- lighthouse-core/lib/i18n/locales/en-US.json | 2 +- lighthouse-core/lib/i18n/locales/en-XL.json | 2 +- lighthouse-core/report/html/renderer/util.js | 2 +- lighthouse-core/test/results/sample_v2.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json index e1bdb2f47629..b45a72a432c4 100644 --- a/lighthouse-core/lib/i18n/locales/en-US.json +++ b/lighthouse-core/lib/i18n/locales/en-US.json @@ -1722,7 +1722,7 @@ "message": "There were issues affecting this run of Lighthouse:" }, "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": { - "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics." + "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. " }, "lighthouse-core/report/html/renderer/util.js | warningAuditsGroupTitle": { "message": "Passed audits but with warnings" diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json index ba7f1e83b984..32ee8a5b6210 100644 --- a/lighthouse-core/lib/i18n/locales/en-XL.json +++ b/lighthouse-core/lib/i18n/locales/en-XL.json @@ -1722,7 +1722,7 @@ "message": "T̂h́êŕê ẃêŕê íŝśûéŝ áf̂f́êćt̂ín̂ǵ t̂h́îś r̂ún̂ óf̂ Ĺîǵĥt́ĥóûśê:" }, "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": { - "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ." + "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ. " }, "lighthouse-core/report/html/renderer/util.js | warningAuditsGroupTitle": { "message": "P̂áŝśêd́ âúd̂ít̂ś b̂út̂ ẃît́ĥ ẃâŕn̂ín̂ǵŝ" diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index e7e37a865f06..8457bc624124 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -496,7 +496,7 @@ Util.i18n = null; */ Util.UIStrings = { /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */ - varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.', + varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. ', /** Text link pointing to the Lighthouse scoring calculator. This link immediately follows a sentence stating the performance score is calculated from the perf metrics. */ calculatorLink: 'See calculator', /** Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit. */ diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index e7c56e402f48..dfef4e2f9c11 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -5692,7 +5692,7 @@ "thirdPartyResourcesLabel": "Show 3rd-party resources", "throttlingProvided": "Provided by environment", "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:", - "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.", + "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. ", "warningAuditsGroupTitle": "Passed audits but with warnings", "warningHeader": "Warnings: " }, From b2d3d26d378e1e215d14c2487628f288a6e78219 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 11:50:46 -0700 Subject: [PATCH 07/14] Apply suggestions from code review Co-authored-by: Connor Clark Co-authored-by: Patrick Hulce --- .../report/html/renderer/performance-category-renderer.js | 4 ++-- lighthouse-core/report/html/renderer/util.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 80f2bf6e585d..e08724296a33 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -153,7 +153,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer); estValuesEl.appendChild(disclaimerEl); - // Add link to score calculator + // Add link to score calculator. const calculatorLink = this.dom.createChildOf(estValuesEl, 'a'); calculatorLink.textContent = strings.calculatorLink; const v5andv6metrics = /** @type {LH.ReportResult.AuditRef[]} */ ([ @@ -168,7 +168,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const params = new URLSearchParams(metricPairs); const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); url.hash = params.toString(); - calculatorLink.href = url.toString(); + calculatorLink.href = url.href; } metricAuditsEl.classList.add('lh-audit-group--metrics'); diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 8457bc624124..5696265c95d1 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -498,7 +498,7 @@ Util.UIStrings = { /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */ varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. ', /** Text link pointing to the Lighthouse scoring calculator. This link immediately follows a sentence stating the performance score is calculated from the perf metrics. */ - calculatorLink: 'See calculator', + calculatorLink: 'See calculator.', /** Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit. */ opportunityResourceColumnLabel: 'Opportunity', /** Column heading label for the estimated page load savings of opportunity audits. Estimated Savings is the total amount of time (in seconds) that Lighthouse computed could be reduced from the total page load time, if the suggested action is taken. There are only 2 columns, so no strict character limit. */ From ca707adeb64f9eed499fe66d83038f7b57711aa6 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 12:06:15 -0700 Subject: [PATCH 08/14] extract to function --- .../renderer/performance-category-renderer.js | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index e08724296a33..a86e5fd84249 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -104,6 +104,27 @@ class PerformanceCategoryRenderer extends CategoryRenderer { } } + /** + * Get a link to the interactive scoring calculator with the metric values. + * @param {LH.ReportResult.AuditRef[]} auditRefs + * @return {string} + */ + _getScoringCalculatorHref(auditRefs) { + const v5andv6metrics = /** @type {LH.ReportResult.AuditRef[]} */ ([ + ...auditRefs.filter(audit => audit.group === 'metrics'), + auditRefs.find(audit => audit.id === 'first-cpu-idle'), + auditRefs.find(audit => audit.id === 'first-meaningful-paint'), + ]); + const metricPairs = v5andv6metrics.map(audit => { + const value = (audit.result.numericValue || null).toString(); + return [audit.id, value]; + }); + const params = new URLSearchParams(metricPairs); + const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); + url.hash = params.toString(); + return url.toString(); + } + /** * @param {LH.ReportResult.Category} category * @param {Object} groups @@ -156,19 +177,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Add link to score calculator. const calculatorLink = this.dom.createChildOf(estValuesEl, 'a'); calculatorLink.textContent = strings.calculatorLink; - const v5andv6metrics = /** @type {LH.ReportResult.AuditRef[]} */ ([ - ...metricAudits, - category.auditRefs.find(m => m.id === 'first-cpu-idle'), - category.auditRefs.find(m => m.id === 'first-meaningful-paint'), - ]); - const metricPairs = v5andv6metrics.map(audit => { - const value = (audit.result.numericValue || 0).toString(); - return [audit.id, value]; - }); - const params = new URLSearchParams(metricPairs); - const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); - url.hash = params.toString(); - calculatorLink.href = url.href; + calculatorLink.href = this._getScoringCalculatorHref(category.auditRefs); } metricAuditsEl.classList.add('lh-audit-group--metrics'); From bc9b40528609cb4c3cf732aab3b620009f05b576 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 12:20:24 -0700 Subject: [PATCH 09/14] feedback --- .../renderer/performance-category-renderer.js | 17 +++++++++-------- lighthouse-core/report/html/renderer/util.js | 4 ++-- lighthouse-core/report/html/report-styles.css | 4 ++++ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index a86e5fd84249..207bb42def7c 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -110,19 +110,20 @@ class PerformanceCategoryRenderer extends CategoryRenderer { * @return {string} */ _getScoringCalculatorHref(auditRefs) { - const v5andv6metrics = /** @type {LH.ReportResult.AuditRef[]} */ ([ - ...auditRefs.filter(audit => audit.group === 'metrics'), - auditRefs.find(audit => audit.id === 'first-cpu-idle'), - auditRefs.find(audit => audit.id === 'first-meaningful-paint'), - ]); + const v5andv6metrics = auditRefs.filter(audit => audit.group === 'metrics'); + const fci = auditRefs.find(audit => audit.id === 'first-cpu-idle'); + const fmp = auditRefs.find(audit => audit.id === 'first-meaningful-paint'); + if (fci) v5andv6metrics.push(fci); + if (fmp) v5andv6metrics.push(fmp); + const metricPairs = v5andv6metrics.map(audit => { - const value = (audit.result.numericValue || null).toString(); + const value = audit.result.numericValue ? audit.result.numericValue.toString() : 'null'; return [audit.id, value]; }); const params = new URLSearchParams(metricPairs); const url = new URL('https://googlechrome.github.io/lighthouse/scorecalc/'); url.hash = params.toString(); - return url.toString(); + return url.href; } /** @@ -175,7 +176,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { estValuesEl.appendChild(disclaimerEl); // Add link to score calculator. - const calculatorLink = this.dom.createChildOf(estValuesEl, 'a'); + const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink'); calculatorLink.textContent = strings.calculatorLink; calculatorLink.href = this._getScoringCalculatorHref(category.auditRefs); } diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 5696265c95d1..be55780a9d1a 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -496,8 +496,8 @@ Util.i18n = null; */ Util.UIStrings = { /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */ - varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. ', - /** Text link pointing to the Lighthouse scoring calculator. This link immediately follows a sentence stating the performance score is calculated from the perf metrics. */ + varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.', + /** Text link pointing to an interactive calculator that explains Lighthouse scoring. The link text should be fairly short. */ calculatorLink: 'See calculator.', /** Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit. */ opportunityResourceColumnLabel: 'Opportunity', diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 8785c5653e80..f6e76944d866 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -614,6 +614,10 @@ color: var(--color-gray-700); } +.lh-calclink::before { + content: ' '; +} + .lh-metric__description { display: none; grid-column-start: 2; From 4adb1c68055b99bf6d0fd514bdb6ed03ce82082c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 12:20:34 -0700 Subject: [PATCH 10/14] json --- lighthouse-core/lib/i18n/locales/en-US.json | 4 ++-- lighthouse-core/lib/i18n/locales/en-XL.json | 4 ++-- lighthouse-core/test/results/sample_v2.json | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json index b45a72a432c4..646e41583233 100644 --- a/lighthouse-core/lib/i18n/locales/en-US.json +++ b/lighthouse-core/lib/i18n/locales/en-US.json @@ -1602,7 +1602,7 @@ "message": "Show audits" }, "lighthouse-core/report/html/renderer/util.js | calculatorLink": { - "message": "See calculator" + "message": "See calculator." }, "lighthouse-core/report/html/renderer/util.js | crcInitialNavigation": { "message": "Initial Navigation" @@ -1722,7 +1722,7 @@ "message": "There were issues affecting this run of Lighthouse:" }, "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": { - "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. " + "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics." }, "lighthouse-core/report/html/renderer/util.js | warningAuditsGroupTitle": { "message": "Passed audits but with warnings" diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json index 32ee8a5b6210..9b5e7fe0380a 100644 --- a/lighthouse-core/lib/i18n/locales/en-XL.json +++ b/lighthouse-core/lib/i18n/locales/en-XL.json @@ -1602,7 +1602,7 @@ "message": "Ŝh́ôẃ âúd̂ít̂ś" }, "lighthouse-core/report/html/renderer/util.js | calculatorLink": { - "message": "Ŝéê ćâĺĉúl̂át̂ór̂" + "message": "Ŝéê ćâĺĉúl̂át̂ór̂." }, "lighthouse-core/report/html/renderer/util.js | crcInitialNavigation": { "message": "Îńît́îál̂ Ńâv́îǵât́îón̂" @@ -1722,7 +1722,7 @@ "message": "T̂h́êŕê ẃêŕê íŝśûéŝ áf̂f́êćt̂ín̂ǵ t̂h́îś r̂ún̂ óf̂ Ĺîǵĥt́ĥóûśê:" }, "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": { - "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ. " + "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ." }, "lighthouse-core/report/html/renderer/util.js | warningAuditsGroupTitle": { "message": "P̂áŝśêd́ âúd̂ít̂ś b̂út̂ ẃît́ĥ ẃâŕn̂ín̂ǵŝ" diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index dfef4e2f9c11..4648aff704e3 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -5652,7 +5652,7 @@ "i18n": { "rendererFormattedStrings": { "auditGroupExpandTooltip": "Show audits", - "calculatorLink": "See calculator", + "calculatorLink": "See calculator.", "crcInitialNavigation": "Initial Navigation", "crcLongestDurationLabel": "Maximum critical path latency:", "dropdownCopyJSON": "Copy JSON", @@ -5692,7 +5692,7 @@ "thirdPartyResourcesLabel": "Show 3rd-party resources", "throttlingProvided": "Provided by environment", "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:", - "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics. ", + "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.", "warningAuditsGroupTitle": "Passed audits but with warnings", "warningHeader": "Warnings: " }, From 2809b964dd4b71e829f64679d90bf4ea64947ab7 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 12:46:23 -0700 Subject: [PATCH 11/14] add tests --- .../performance-category-renderer-test.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js index 733528163764..2a48046a0cff 100644 --- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js @@ -234,6 +234,34 @@ describe('PerfCategoryRenderer', () => { }); }); + describe('_getScoringCalculatorHref', () => { + it('creates a working link given some auditRefs', () => { + const href = renderer._getScoringCalculatorHref(category.auditRefs); + const url = new URL(href); + expect(url.hash.split('&')).toMatchInlineSnapshot(` + Array [ + "#first-contentful-paint=3969.135", + "speed-index=4417", + "largest-contentful-paint=4927.278", + "interactive=4927.278", + "total-blocking-time=116.79800000000023", + "cumulative-layout-shift=0.42", + "first-cpu-idle=4927.278", + "first-meaningful-paint=3969.136", + ] + `); + }); + + it('uses null if the metric is missing its value', () => { + const categoryClone = JSON.parse(JSON.stringify(category)); + const lcp = categoryClone.auditRefs.find(audit => audit.id === 'largest-contentful-paint'); + lcp.result.numericValue = undefined; + lcp.result.score = null; + const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs); + expect(href).toContain('largest-contentful-paint=null'); + }); + }); + // This is done all in CSS, but tested here. describe('metric description toggles', () => { let container; From bc7ed23e70a42bebf062349585d9f3c8e9a1379c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 18:27:44 -0700 Subject: [PATCH 12/14] open in new window --- .../report/html/renderer/performance-category-renderer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 207bb42def7c..7464a4070c8a 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -177,6 +177,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Add link to score calculator. const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink'); + calculatorLink.target = '_blank'; calculatorLink.textContent = strings.calculatorLink; calculatorLink.href = this._getScoringCalculatorHref(category.auditRefs); } From 97a675918096145e2cea7899848dfd2b8e7a8f95 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 18:28:09 -0700 Subject: [PATCH 13/14] space with padding not content --- lighthouse-core/report/html/report-styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index f6e76944d866..3be7f1f32a8e 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -614,8 +614,8 @@ color: var(--color-gray-700); } -.lh-calclink::before { - content: ' '; +.lh-calclink { + padding-left: calc(1ex / 3); } .lh-metric__description { From 34a4c11510fc2c910e8526d363a50756c895dab0 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 12 May 2020 18:28:19 -0700 Subject: [PATCH 14/14] check generated DOM in test. more or less --- .../report/html/renderer/performance-category-renderer-test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js index 2a48046a0cff..b645db0a01d0 100644 --- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js @@ -92,6 +92,9 @@ describe('PerfCategoryRenderer', () => { assert.ok(disclamerLink, 'disclaimer contains coverted markdown link'); const disclamerUrl = new URL(disclamerLink.href); assert.strictEqual(disclamerUrl.hostname, 'web.dev'); + const calcLink = disclaimerEl.querySelector('a.lh-calclink'); + assert.ok(calcLink, 'disclaimer contains scorecalc link'); + assert.strictEqual(new URL(calcLink.href).hostname, 'googlechrome.github.io'); }); it('renders the failing performance opportunities', () => {