lighthouse 8.6.0-dev.20211021 → 8.6.0

package/report/renderer/report-renderer.js

@@ -85,64 +85,44 @@ export class ReportRenderer {
   _renderReportFooter(report) {
     const footer = this._dom.createComponent('footer');
 
-    this._renderMetaBlock(report, footer);
+    const env = this._dom.find('.lh-env__items', footer);
+    env.id = 'runtime-settings';
+    this._dom.find('.lh-env__title', footer).textContent = Util.i18n.strings.runtimeSettingsTitle;
+
+    const envValues = Util.getEnvironmentDisplayValues(report.configSettings || {});
+    const runtimeValues = [
+      {name: Util.i18n.strings.runtimeSettingsUrl, description: report.finalUrl},
+      {name: Util.i18n.strings.runtimeSettingsFetchTime,
+        description: Util.i18n.formatDateTime(report.fetchTime)},
+      ...envValues,
+      {name: Util.i18n.strings.runtimeSettingsChannel, description: report.configSettings.channel},
+      {name: Util.i18n.strings.runtimeSettingsUA, description: report.userAgent},
+      {name: Util.i18n.strings.runtimeSettingsUANetwork, description: report.environment &&
+        report.environment.networkUserAgent},
+      {name: Util.i18n.strings.runtimeSettingsBenchmark, description: report.environment &&
+        report.environment.benchmarkIndex.toFixed(0)},
+    ];
+    if (report.environment.credits && report.environment.credits['axe-core']) {
+      runtimeValues.push({
+        name: Util.i18n.strings.runtimeSettingsAxeVersion,
+        description: report.environment.credits['axe-core'],
+      });
+    }
+
+    for (const runtime of runtimeValues) {
+      if (!runtime.description) continue;
+
+      const item = this._dom.createComponent('envItem');
+      this._dom.find('.lh-env__name', item).textContent = runtime.name;
+      this._dom.find('.lh-env__description', item).textContent = runtime.description;
+      env.appendChild(item);
+    }
 
     this._dom.find('.lh-footer__version_issue', footer).textContent = Util.i18n.strings.footerIssue;
     this._dom.find('.lh-footer__version', footer).textContent = report.lighthouseVersion;
     return footer;
   }
 
-  /**
-   * @param {LH.ReportResult} report
-   * @param {DocumentFragment} footer
-   */
-  _renderMetaBlock(report, footer) {
-    const envValues = Util.getEmulationDescriptions(report.configSettings || {});
-
-
-    const match = report.userAgent.match(/(\w*Chrome\/[\d.]+)/); // \w* to include 'HeadlessChrome'
-    const chromeVer = Array.isArray(match)
-      ? match[1].replace('/', ' ').replace('Chrome', 'Chromium')
-      : 'Chromium';
-    const channel = report.configSettings.channel;
-    const benchmarkIndex = report.environment.benchmarkIndex.toFixed(0);
-    const axeVersion = report.environment.credits['axe-core'];
-
-    // [CSS icon class, textContent, tooltipText]
-    const metaItems = [
-      ['date',
-        `Captured at ${Util.i18n.formatDateTime(report.fetchTime)}`],
-      ['devices',
-        `${envValues.deviceEmulation} with Lighthouse ${report.lighthouseVersion}`,
-        `${Util.i18n.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}` +
-            `\n${Util.i18n.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}` +
-            (axeVersion ? `\n${Util.i18n.strings.runtimeSettingsAxeVersion}: ${axeVersion}` : '')],
-      ['samples-one',
-        Util.i18n.strings.runtimeSingleLoad,
-        Util.i18n.strings.runtimeSingleLoadTooltip],
-      ['stopwatch',
-        Util.i18n.strings.runtimeAnalysisWindow],
-      ['networkspeed',
-        `${envValues.summary}`,
-        `${Util.i18n.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
-      ['chrome',
-        `Using ${chromeVer}` + (channel ? ` with ${channel}` : ''),
-        `${Util.i18n.strings.runtimeSettingsUANetwork}: "${report.environment.networkUserAgent}"`],
-    ];
-
-    const metaItemsEl = this._dom.find('.lh-meta__items', footer);
-    for (const [iconname, text, tooltip] of metaItems) {
-      const itemEl = this._dom.createChildOf(metaItemsEl, 'li', 'lh-meta__item');
-      itemEl.textContent = text;
-      if (tooltip) {
-        itemEl.classList.add('lh-tooltip-boundary');
-        const tooltipEl = this._dom.createChildOf(itemEl, 'div', 'lh-tooltip');
-        tooltipEl.textContent = tooltip;
-      }
-      itemEl.classList.add('lh-report-icon', `lh-report-icon--${iconname}`);
-    }
-  }
-
   /**
    * Returns a div with a list of top-level warnings, or an empty div if no warnings.
    * @param {LH.ReportResult} report
@@ -267,9 +247,8 @@ 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));
@@ -296,8 +275,6 @@ 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);

package/report/renderer/util.js

@@ -167,8 +167,6 @@ export class Util {
 
   /**
    * Convert a score to a rating label.
-   * TODO: Return `'error'` for `score === null && !scoreDisplayMode`.
-   *
    * @param {number|null} score
    * @param {string=} scoreDisplayMode
    * @return {string}
@@ -389,21 +387,43 @@ export class Util {
     return hostname.split('.').slice(-splitTld.length).join('.');
   }
 
+  /**
+   * @param {LH.Result['configSettings']} settings
+   * @return {!Array<{name: string, description: string}>}
+   */
+  static getEnvironmentDisplayValues(settings) {
+    const emulationDesc = Util.getEmulationDescriptions(settings);
+
+    return [
+      {
+        name: Util.i18n.strings.runtimeSettingsDevice,
+        description: emulationDesc.deviceEmulation,
+      },
+      {
+        name: Util.i18n.strings.runtimeSettingsNetworkThrottling,
+        description: emulationDesc.networkThrottling,
+      },
+      {
+        name: Util.i18n.strings.runtimeSettingsCPUThrottling,
+        description: emulationDesc.cpuThrottling,
+      },
+    ];
+  }
 
   /**
    * @param {LH.Result['configSettings']} settings
-   * @return {!{deviceEmulation: string, networkThrottling: string, cpuThrottling: string, summary: string}}
+   * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
    */
   static getEmulationDescriptions(settings) {
     let cpuThrottling;
     let networkThrottling;
-    let summary;
 
     const throttling = settings.throttling;
 
     switch (settings.throttlingMethod) {
       case 'provided':
-        summary = networkThrottling = cpuThrottling = Util.i18n.strings.throttlingProvided;
+        cpuThrottling = Util.i18n.strings.throttlingProvided;
+        networkThrottling = Util.i18n.strings.throttlingProvided;
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
@@ -411,13 +431,6 @@ export class Util {
         networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
           `${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
           `${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
-
-        const isSlow4G = () => {
-          return requestLatencyMs === 150 * 3.75 &&
-            throttling.downloadThroughputKbps === 1.6 * 1024 * 0.9 &&
-            throttling.uploadThroughputKbps === 750 * 0.9;
-        };
-        summary = `${isSlow4G() ? 'Slow 4G' : 'Custom'} throttling by DevTools`;
         break;
       }
       case 'simulate': {
@@ -425,15 +438,11 @@ export class Util {
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
         networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
           `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
-
-        const isSlow4G = () => {
-          return rttMs === 150 && throughputKbps === 1.6 * 1024;
-        };
-        summary = isSlow4G() ? 'Simulated slow 4G' : 'Custom simulated throttling';
         break;
       }
       default:
-        summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
+        cpuThrottling = Util.i18n.strings.runtimeUnknown;
+        networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
     // TODO(paulirish): revise Runtime Settings strings: https://github.com/GoogleChrome/lighthouse/pull/11796
@@ -446,7 +455,6 @@ export class Util {
       deviceEmulation,
       cpuThrottling,
       networkThrottling,
-      summary,
     };
   }
 
@@ -629,12 +637,22 @@ Util.UIStrings = {
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
 
+  /** Title of the Runtime settings table in a Lighthouse report.  Runtime settings are the environment configurations that a specific report used at auditing time. */
+  runtimeSettingsTitle: 'Runtime Settings',
+  /** Label for a row in a table that shows the URL that was audited during a Lighthouse run. */
+  runtimeSettingsUrl: 'URL',
+  /** Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. */
+  runtimeSettingsFetchTime: 'Fetch Time',
   /** Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run.  Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. */
   runtimeSettingsDevice: 'Device',
   /** Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. */
   runtimeSettingsNetworkThrottling: 'Network throttling',
   /** Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any.*/
   runtimeSettingsCPUThrottling: 'CPU throttling',
+  /** 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). */
+  runtimeSettingsChannel: 'Channel',
+  /** Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. */
+  runtimeSettingsUA: 'User agent (host)',
   /** Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. */
   runtimeSettingsUANetwork: 'User agent (network)',
   /** Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. */
@@ -653,12 +671,6 @@ Util.UIStrings = {
   runtimeDesktopEmulation: 'Emulated Desktop',
   /** Descriptive explanation for a runtime setting that is set to an unknown value. */
   runtimeUnknown: 'Unknown',
-  /** Descriptive label that this analysis run was from a single pageload of a browser (not a summary of hundreds of loads) */
-  runtimeSingleLoad: 'Single page load',
-  /** Descriptive label that this analysis only considers the initial load of the page, and no interaction beyond when the page had "fully loaded" */
-  runtimeAnalysisWindow: 'Initial page load',
-  /** Descriptive explanation that this analysis run was from a single pageload of a browser, whereas field data often summarizes hundreds+ of page loads */
-  runtimeSingleLoadTooltip: 'This data is taken from a single page load, as opposed to field data summarizing many sessions.', // eslint-disable-line max-len
 
   /** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
   throttlingProvided: 'Provided by environment',

package/report/test/clients/psi-test.js

@@ -0,0 +1,143 @@
+/**
+ * @license Copyright 2017 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
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, 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.
+ */
+'use strict';
+
+import {strict as assert} from 'assert';
+import fs from 'fs';
+
+import jsdom from 'jsdom';
+
+import testUtils from '../../../lighthouse-core/test/test-utils.js';
+import {prepareLabData} from '../../clients/psi.js';
+import {Util} from '../../renderer/util.js';
+import {I18n} from '../../renderer/i18n.js';
+import {DOM} from '../../renderer/dom.js';
+import {CategoryRenderer} from '../../renderer/category-renderer.js';
+import {PerformanceCategoryRenderer} from '../../renderer/performance-category-renderer.js';
+import {DetailsRenderer} from '../../renderer/details-renderer.js';
+import {CriticalRequestChainRenderer} from '../../renderer/crc-details-renderer.js';
+import {ElementScreenshotRenderer} from '../../renderer/element-screenshot-renderer.js';
+import {ReportUIFeatures} from '../../renderer/report-ui-features.js';
+import {LH_ROOT} from '../../../root.js';
+
+const {itIfProtoExists, sampleResultsRoundtripStr} = testUtils.getProtoRoundTrip();
+const sampleResultsStr =
+  fs.readFileSync(LH_ROOT + '/lighthouse-core/test/results/sample_v2.json', 'utf-8');
+
+/* eslint-env jest */
+
+describe('PSI', () => {
+  let document;
+  beforeAll(() => {
+    global.Util = Util;
+    global.I18n = I18n;
+    global.DOM = DOM;
+    global.CategoryRenderer = CategoryRenderer;
+    global.DetailsRenderer = DetailsRenderer;
+    global.PerformanceCategoryRenderer = PerformanceCategoryRenderer;
+    global.CriticalRequestChainRenderer = CriticalRequestChainRenderer;
+    global.ElementScreenshotRenderer = ElementScreenshotRenderer;
+    global.ReportUIFeatures = ReportUIFeatures;
+
+    const {window} = new jsdom.JSDOM();
+    document = window.document;
+  });
+
+  afterAll(() => {
+    global.I18n = undefined;
+    global.Util = undefined;
+    global.DOM = undefined;
+    global.CategoryRenderer = undefined;
+    global.DetailsRenderer = undefined;
+    global.PerformanceCategoryRenderer = undefined;
+    global.CriticalRequestChainRenderer = undefined;
+    global.ElementScreenshotRenderer = undefined;
+    global.ReportUIFeatures = undefined;
+  });
+
+  describe('psi prepareLabData helpers', () => {
+    describe('prepareLabData', () => {
+      itIfProtoExists('succeeds with LHResult object (roundtrip) input', () => {
+        const roundTripLHResult = /** @type {LH.Result} */ JSON.parse(sampleResultsRoundtripStr);
+        const result = prepareLabData(roundTripLHResult, document);
+
+        // Check that the report exists and has some content.
+        assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
+        assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
+        // Assume using default locale.
+        const title = result.perfCategoryEl.querySelector('.lh-audit-group--metrics')
+          .querySelector('.lh-audit-group__title').textContent;
+        assert.equal(title, Util.UIStrings.labDataTitle);
+      });
+
+      it('succeeds with stringified LHResult input', () => {
+        const result = prepareLabData(sampleResultsStr, document);
+        assert.ok(result.scoreGaugeEl instanceof document.defaultView.Element);
+        assert.equal(result.scoreGaugeEl.querySelector('.lh-gauge__wrapper').href, '');
+        assert.ok(result.scoreGaugeEl.outerHTML.includes('<svg'), 'score gauge comes with SVG');
+
+        assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
+        assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
+
+        assert.equal(typeof result.finalScreenshotDataUri, 'string');
+        assert.ok(result.finalScreenshotDataUri.startsWith('data:image/jpeg;base64,'));
+      });
+
+      it('throws if there is no perf category', () => {
+        const lhrWithoutPerf = JSON.parse(sampleResultsStr);
+        delete lhrWithoutPerf.categories.performance;
+        const lhrWithoutPerfStr = JSON.stringify(lhrWithoutPerf);
+
+        assert.throws(() => {
+          prepareLabData(lhrWithoutPerfStr, document);
+        }, /no performance category/i);
+      });
+
+      it('throws if there is no category groups', () => {
+        const lhrWithoutGroups = JSON.parse(sampleResultsStr);
+        delete lhrWithoutGroups.categoryGroups;
+        const lhrWithoutGroupsStr = JSON.stringify(lhrWithoutGroups);
+
+        assert.throws(() => {
+          prepareLabData(lhrWithoutGroupsStr, document);
+        }, /no category groups/i);
+      });
+
+      it('includes custom title and description', () => {
+        const {perfCategoryEl} = prepareLabData(sampleResultsStr, document);
+        const metricsGroupEl = perfCategoryEl.querySelector('.lh-audit-group--metrics');
+
+        // Assume using default locale.
+        // Replacing markdown because ".textContent" will be post-markdown.
+        const expectedDescription = Util.UIStrings.lsPerformanceCategoryDescription
+          .replace('[Lighthouse](https://developers.google.com/web/tools/lighthouse/)', 'Lighthouse');
+
+        // Assume using default locale.
+        const title = metricsGroupEl.querySelector('.lh-audit-group__title').textContent;
+        const description =
+          metricsGroupEl.querySelector('.lh-audit-group__description').textContent;
+        assert.equal(title, Util.UIStrings.labDataTitle);
+        assert.equal(description, expectedDescription);
+      });
+    });
+  });
+
+  describe('_getFinalScreenshot', () => {
+    it('gets a datauri as a string', () => {
+      const datauri = prepareLabData(sampleResultsStr, document).finalScreenshotDataUri;
+      assert.equal(typeof datauri, 'string');
+      assert.ok(datauri.startsWith('data:image/jpeg;base64,'));
+    });
+
+    it('returns null if there is no final-screenshot audit', () => {
+      const clonedResults = JSON.parse(sampleResultsStr);
+      delete clonedResults.audits['final-screenshot'];
+      const LHResultJsonString = JSON.stringify(clonedResults);
+      const datauri = prepareLabData(LHResultJsonString, document).finalScreenshotDataUri;
+      assert.equal(datauri, null);
+    });
+  });
+});

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

@@ -409,10 +409,6 @@ describe('CategoryRenderer', () => {
       const passingRefs = categoryClone.auditRefs.filter(ref => ref.result.score === 1);
       passingRefs[0].result.warnings = ['Some warning'];
       passingRefs[1].result.warnings = ['Some warning'];
-      // Make one audit n/a
-      const audit = categoryClone.auditRefs.find(ref => ref.id === 'themed-omnibox');
-      audit.result.scoreDisplayMode = 'notApplicable';
-      audit.result.score = null;
 
       const elem = renderer.render(categoryClone, sampleResults.categoryGroups);
       const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit');
@@ -422,7 +418,7 @@ describe('CategoryRenderer', () => {
       const naAudits = elem.querySelectorAll('.lh-clump--notapplicable .lh-audit');
 
       assert.equal(passedAudits.length, 0);
-      assert.equal(failedAudits.length, 5);
+      assert.equal(failedAudits.length, 6);
       assert.equal(warningAudits.length, 2);
       assert.equal(manualAudits.length, 3);
       assert.equal(naAudits.length, 1);

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

@@ -9,6 +9,7 @@ import {strict as assert} from 'assert';
 
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
+import {isNode12SmallIcu} from '../../../lighthouse-core/test/test-utils.js';
 
 // Require i18n to make sure Intl is polyfilled in Node without full-icu for testing.
 // When Util is run in a browser, Intl will be supplied natively (IE11+).
@@ -107,6 +108,9 @@ describe('util helpers', () => {
   });
 
   it('formats numbers based on locale', () => {
+    // COMPAT: Node 12 only has 'en' by default.
+    if (isNode12SmallIcu()) return;
+
     // Requires full-icu or Intl polyfill.
     const number = 12346.858558;
 
@@ -118,6 +122,9 @@ describe('util helpers', () => {
   });
 
   it('uses decimal comma with en-XA test locale', () => {
+    // COMPAT: Node 12 only has 'en' by default.
+    if (isNode12SmallIcu()) return;
+
     // Requires full-icu or Intl polyfill.
     const number = 12346.858558;
 

package/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-category-header__description > .lh-metrics__disclaimer');
+        categoryDOM.querySelector('.lh-audit-group--metrics > .lh-metrics__disclaimer');
 
     assert.ok(disclaimerEl.textContent.includes('Values are estimated'));
     const disclamerLink = disclaimerEl.querySelector('a');

package/report/test/renderer/pwa-category-renderer-test.js

@@ -107,12 +107,12 @@ describe('PwaCategoryRenderer', () => {
       const clone = JSON.parse(JSON.stringify(sampleResults));
       const category = clone.categories.pwa;
 
-      // Set everything to passing, except for one. (themed-omnibox chosen randomly)
+      // Set everything to passing, except redirects-http set to n/a (as it is on localhost)
       for (const auditRef of category.auditRefs) {
         auditRef.result.score = 1;
         auditRef.result.scoreDisplayMode = 'binary';
       }
-      const audit = category.auditRefs.find(ref => ref.id === 'themed-omnibox');
+      const audit = category.auditRefs.find(ref => ref.id === 'redirects-http');
       audit.result.scoreDisplayMode = 'notApplicable';
       audit.result.score = null;
 

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

@@ -46,7 +46,7 @@ describe('ReportRendererAxe', () => {
       global.Element = undefined;
     });
 
-    it('renders without axe violations', async () => {
+    it('renders without axe violations', () => {
       const container = renderer._dom._document.createElement('main');
       const output = renderer.renderReport(sampleResults, container);
 
@@ -70,11 +70,16 @@ describe('ReportRendererAxe', () => {
         },
       };
 
-      const axeResults = await axe.run(output, config);
-      expect(axeResults.violations).toEqual([]);
+      return new Promise(resolve => {
+        axe.run(output, config, (error, {violations}) => {
+          expect(error).toBeNull();
+          expect(violations).toEqual([]);
+          resolve();
+        });
+      });
+      // This test takes 40s on fast hardware, and 50-60s on GHA.
+      // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
     },
-    // This test takes 40s on fast hardware, and 50-60s on GHA.
-    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
     /* timeout= */ 100 * 1000
     );
   });

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

@@ -179,15 +179,17 @@ describe('ReportRenderer', () => {
       assert.ok(/Generated by Lighthouse \d/.test(footerContent), 'includes lh version');
       assert.ok(footerContent.match(TIMESTAMP_REGEX), 'includes timestamp');
 
-      // Check env items were populated.
-      const items = Array.from(footer.querySelectorAll('.lh-meta__item'));
-      expect(items.length).toBeGreaterThanOrEqual(6);
-
-      const itemsTxt = items.map(el => `${el.textContent} ${el.title}`).join('\n');
-      expect(itemsTxt).toContain('Moto G4');
-      expect(itemsTxt).toContain('RTT');
-      expect(itemsTxt).toMatch(/\dx/);
-      expect(itemsTxt).toContain(sampleResults.environment.networkUserAgent);
+      // Check runtime settings were populated.
+      const names = Array.from(footer.querySelectorAll('.lh-env__name'));
+      const descriptions = Array.from(footer.querySelectorAll('.lh-env__description'));
+      assert.ok(names.length >= 3);
+      assert.ok(descriptions.length >= 3);
+
+      const descriptionsTxt = descriptions.map(el => el.textContent).join('\n');
+      expect(descriptionsTxt).toContain('Moto G4');
+      expect(descriptionsTxt).toContain('RTT');
+      expect(descriptionsTxt).toMatch(/\dx/);
+      expect(descriptionsTxt).toContain(sampleResults.userAgent);
     });
   });
 

package/report/test-assets/faux-psi-template.html

@@ -92,7 +92,10 @@ body {
 <body >
   <noscript>PSI requires JavaScript. Please enable.</noscript>
 
-  <div class="tabset">
+  <div class="element-screenshots-container"></div>
+
+
+  <div class="tabset lh-vars lh-root">
 
     <input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked>
     <label for="tab1">Mobile</label>

package/report/test-assets/faux-psi.js

@@ -5,13 +5,9 @@
  */
 'use strict';
 
-/** @fileoverview This file exercises two LH reports within the same DOM. */
+/** @fileoverview This file is a glorified call of prepareLabData. */
 
-/** @typedef {import('../clients/bundle.js')} lighthouseRenderer */
-
-/** @type {lighthouseRenderer} */
-// @ts-expect-error
-const lighthouseRenderer = window['report'];
+/** @typedef {import('../clients/psi.js').PrepareLabDataResult} PrepareLabDataResult */
 
 (async function __initPsiReports__() {
   // @ts-expect-error
@@ -26,43 +22,24 @@ const lighthouseRenderer = window['report'];
   for (const [tabId, lhr] of Object.entries(lhrs)) {
     await distinguishLHR(lhr, tabId);
 
+    // @ts-expect-error
+    const pldd = /** @type {PrepareLabDataResult} */ (window.prepareLabData(lhr, document));
+    const {scoreGaugeEl, perfCategoryEl,
+      finalScreenshotDataUri, scoreScaleEl, installFeatures} = pldd;
+
     const container = document.querySelector(`#${tabId} main`);
     if (!container) throw new Error('Unexpected DOM. Bailing.');
-
-    renderLHReport(lhr, container);
-  }
-})();
-
-/**
- * @param {LH.Result} lhrData
- * @param {HTMLElement} reportContainer
- */
-function renderLHReport(lhrData, reportContainer) {
-  /**
-   * @param {Document} doc
-   */
-  function getRenderer(doc) {
-    const dom = new lighthouseRenderer.DOM(doc);
-    return new lighthouseRenderer.ReportRenderer(dom);
-  }
-
-  const renderer = getRenderer(reportContainer.ownerDocument);
-  reportContainer.classList.add('lh-root', 'lh-vars');
-
-  try {
-    renderer.renderReport(lhrData, reportContainer);
-    // TODO: handle topbar removal better
-    // TODO: display warnings if appropriate.
-    for (const el of reportContainer.querySelectorAll('.lh-topbar, .lh-warnings')) {
-      el.setAttribute('hidden', 'true');
+    container.append(scoreGaugeEl);
+    container.append(scoreScaleEl);
+    if (finalScreenshotDataUri) {
+      const imgEl = document.createElement('img');
+      imgEl.src = finalScreenshotDataUri;
+      container.append(imgEl);
     }
-    const features = new lighthouseRenderer.ReportUIFeatures(renderer._dom);
-    features.initFeatures(lhrData);
-  } catch (e) {
-    console.error(e);
-    reportContainer.textContent = 'Error: LHR failed to render.';
+    container.append(perfCategoryEl);
+    installFeatures(container);
   }
-}
+})();
 
 
 /**