report: link to calculator w/ values

GoogleChrome · May 12, 2020 · dd3b051 · dd3b051
1 parent e2cb5e5
commit dd3b051
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git 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
@@ -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. */