report: display final screenshot prominently (#13123)

GoogleChrome · Oct 21, 2021 · 25465d9 · 25465d9
1 parent 2f8ec2e
commit 25465d9
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 12 deletions.
diff --git a/report/assets/styles.css b/report/assets/styles.css
diff --git a/report/renderer/category-renderer.js b/report/renderer/category-renderer.js
@@ -144,6 +144,35 @@ export class CategoryRenderer {
     return auditEl;
   }
 
+  /**
+   * Inject the final screenshot next to the score gauge of the first category (likely Performance)
+   * @param {HTMLElement} categoriesEl
+   * @param {LH.ReportResult['audits']} audits
+   * @param {Element} scoreScaleEl
+   */
+  injectFinalScreenshot(categoriesEl, audits, scoreScaleEl) {
+    const audit = audits['final-screenshot'];
+    if (!audit || audit.scoreDisplayMode === 'error') return null;
+    if (!audit.details || audit.details.type !== 'screenshot') return null;
+
+    const imgEl = this.dom.createElement('img', 'lh-final-ss-image');
+    const finalScreenshotDataUri = audit.details.data;
+    imgEl.src = finalScreenshotDataUri;
+    imgEl.alt = audit.title;
+
+    const firstCatHeaderEl = this.dom.find('.lh-category .lh-category-header', categoriesEl);
+    const leftColEl = this.dom.createElement('div', 'lh-category-headercol');
+    const separatorEl = this.dom.createElement('div',
+        'lh-category-headercol lh-category-headercol--separator');
+    const rightColEl = this.dom.createElement('div', 'lh-category-headercol');
+
+    leftColEl.append(...firstCatHeaderEl.childNodes);
+    leftColEl.append(scoreScaleEl);
+    rightColEl.append(imgEl);
+    firstCatHeaderEl.append(leftColEl, separatorEl, rightColEl);
+    firstCatHeaderEl.classList.add('lh-category-header__finalscreenshot');
+  }
+
   /**
    * @return {Element}
    */

diff --git a/report/renderer/components.js b/report/renderer/components.js
diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js
@@ -181,7 +181,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         metricsBoxesEl.appendChild(this._renderMetric(item));
       });
 
-      const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
+      const descriptionEl = this.dom.find('.lh-category-header__description', element);
+      const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
       const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
       estValuesEl.appendChild(disclaimerEl);
 

diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
@@ -267,8 +267,9 @@ export class ReportRenderer {
       headerContainer.classList.add('lh-header--solo-category');
     }
 
+    const scoreScale = this._dom.createElement('div');
+    scoreScale.append(this._dom.createComponent('scorescale'));
     if (scoreHeader) {
-      const scoreScale = this._dom.createComponent('scorescale');
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
@@ -295,6 +296,8 @@ export class ReportRenderer {
       ));
     }
 
+    categoryRenderer.injectFinalScreenshot(categories, report.audits, scoreScale);
+
     const reportFragment = this._dom.createFragment();
     reportFragment.append(this._dom.createComponent('styles'));
     const topbarDocumentFragment = this._renderReportTopbar(report);

diff --git a/report/test/renderer/performance-category-renderer-test.js b/report/test/renderer/performance-category-renderer-test.js
@@ -84,7 +84,7 @@ describe('PerfCategoryRenderer', () => {
   it('renders the metrics variance disclaimer as markdown', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const disclaimerEl =
-        categoryDOM.querySelector('.lh-audit-group--metrics > .lh-metrics__disclaimer');
+        categoryDOM.querySelector('.lh-category-header__description > .lh-metrics__disclaimer');
 
     assert.ok(disclaimerEl.textContent.includes('Values are estimated'));
     const disclamerLink = disclaimerEl.querySelector('a');