Repository: GoogleChrome/lighthouse
Pull request #8827 (2019-05-03 04:40:11)

clients(psi): pass score scale to psi
<!-- Thank you for submitting a pull request! -->

**Summary**
The new PSI report needs a score scale passed to it! :smile: 




Patch:
diff --git a/lighthouse-core/audits/metrics/max-potential-fid.js b/lighthouse-core/audits/metrics/max-potential-fid.js
index c53521b83..411007ee1 100644
--- a/lighthouse-core/audits/metrics/max-potential-fid.js
+++ b/lighthouse-core/audits/metrics/max-potential-fid.js
@@ -11,7 +11,7 @@ const i18n = require('../../lib/i18n/i18n');
 
 const UIStrings = {
   /** The name of the metric "Maximum Potential First Input Delay" that marks the maximum estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
-  title: 'Max Potential FID',
+  title: 'Max Potential First Input Delay',
   /** Description of the Maximum Potential First Input Delay metric that marks the maximum estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
   description: 'The maximum potential First Input Delay that your users could experience is the ' +
       'duration, in milliseconds, of the longest task. [Learn more](https://developers.google.com/web/updates/2018/05/first-input-delay).',
diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json
index a0c155cf8..0f82ba362 100644
--- a/lighthouse-core/lib/i18n/en-US.json
+++ b/lighthouse-core/lib/i18n/en-US.json
@@ -716,7 +716,7 @@
     "description": "Description of the Maximum Potential First Input Delay metric that marks the maximum estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
   },
   "lighthouse-core/audits/metrics/max-potential-fid.js | title": {
-    "message": "Max Potential FID",
+    "message": "Max Potential First Input Delay",
     "description": "The name of the metric \"Maximum Potential First Input Delay\" that marks the maximum estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit."
   },
   "lighthouse-core/audits/metrics/speed-index.js | description": {
diff --git a/lighthouse-core/report/html/renderer/psi.js b/lighthouse-core/report/html/renderer/psi.js
index 35c4d104e..718581ea7 100644
--- a/lighthouse-core/report/html/renderer/psi.js
+++ b/lighthouse-core/report/html/renderer/psi.js
@@ -31,7 +31,7 @@
  *
  * @param {LH.Result | string} LHResult The stringified version of {LH.Result}
  * @param {Document} document The host page's window.document
- * @return {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null}}
+ * @return {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null, scoreScaleEl: Element}}
  */
 function prepareLabData(LHResult, document) {
   const lhResult = (typeof LHResult === 'string') ?
@@ -64,7 +64,11 @@ function prepareLabData(LHResult, document) {
   scoreGaugeWrapperEl.removeAttribute('href');
 
   const finalScreenshotDataUri = _getFinalScreenshot(perfCategory);
-  return {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri};
+
+  const clonedScoreTemplate = dom.cloneTemplate('#tmpl-lh-scorescale', dom.document());
+  const scoreScaleEl = dom.find('.lh-scorescale', clonedScoreTemplate);
+
+  return {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri, scoreScaleEl};
 }
 
 /**
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index 8b5dedf66..813ae2024 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -242,18 +242,16 @@ class ReportRenderer {
       wrapper.appendChild(renderer.render(category, report.categoryGroups));
     }
 
-    // TODO(hoten) - fireworks show will commence later.
     // Fireworks
-    // const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
-    // if (!this._dom.isDevTools() && scoresAll100) {
-    //   if (scoresAll100) {
-    //     const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
-    //     scoresContainer.classList.add('score100');
-    //     scoresContainer.addEventListener('click', _ => {
-    //       scoresContainer.classList.toggle('fireworks-paused');
-    //     });
-    //   }
-    // }
+    const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
+    if (!this._dom.isDevTools() && scoresAll100) {
+      const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
+      scoresContainer.classList.add('score100');
+      this._dom._document.body.classList.add('dark');
+      scoresContainer.addEventListener('click', _ => {
+        scoresContainer.classList.toggle('fireworks-paused');
+      });
+    }
 
     if (scoreHeader) {
       const scoreGauges =
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 09ca0479d..06160ed05 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -206,7 +206,12 @@ limitations under the License.
     }
   </style>
   <div class="lh-scores-wrapper">
-    <div class="lh-scores-container"></div>
+    <div class="lh-scores-container">
+      <div class="pyro">
+        <div class="before"></div>
+        <div class="after"></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -382,6 +387,8 @@ limitations under the License.
     */
     .pyro {
       display: none;
+      z-index: 1;
+      pointer-events: none;
     }
     .score100 .pyro {
       display: block;
diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json
index f451e4936..876a2dd98 100644
--- a/proto/sample_v2_round_trip.json
+++ b/proto/sample_v2_round_trip.json
@@ -1431,7 +1431,7 @@
             "numericValue": 122.537,
             "score": 0.92,
             "scoreDisplayMode": "numeric",
-            "title": "Max Potential FID"
+            "title": "Max Potential First Input Delay"
         },
         "meta-description": {
             "description": "Meta descriptions may be included in search results to concisely summarize page content. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/description).",


Test patch:
diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
index 155fd19d3..d6d8e6a98 100644
--- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
@@ -214,8 +214,7 @@ describe('ReportRenderer', () => {
     assert.equal(renderer._templateContext, otherDocument);
   });
 
-  // Fireworks temporarily canceled. See #8185
-  test.skip('should render an all 100 report with fireworks', () => {
+  it('should render an all 100 report with fireworks', () => {
     const container = renderer._dom._document.body;
 
     sampleResults.reportCategories.forEach(element => {
@@ -227,7 +226,7 @@ describe('ReportRenderer', () => {
     assert.ok(output.querySelector('.lh-header-sticky'), 'has a header');
     assert.ok(output.querySelector('.lh-report'), 'has report body');
     assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
-        sampleResults.reportCategories.length * 2, 'renders category gauges');
+        sampleResults.reportCategories.length * 3, 'renders category gauges');
     // fireworks!
     assert.ok(output.querySelector('.score100'), 'has fireworks treatment');
   });
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index 5dcc45032..97d3bf034 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -193,7 +193,7 @@
     },
     "max-potential-fid": {
       "id": "max-potential-fid",
-      "title": "Max Potential FID",
+      "title": "Max Potential First Input Delay",
       "description": "The maximum potential First Input Delay that your users could experience is the duration, in milliseconds, of the longest task. [Learn more](https://developers.google.com/web/updates/2018/05/first-input-delay).",
       "score": 0.92,
       "scoreDisplayMode": "numeric",