report: create faux psi report

build/build-report.js

@@ -25,6 +25,7 @@ async function buildStandaloneReport() {
     file: 'dist/report/standalone.js',
     format: 'iife',
   });
+  console.log('dist/report/standalone.js written');
 }
 
 async function buildPsiReport() {
@@ -39,6 +40,7 @@ async function buildPsiReport() {
     file: 'dist/report/psi.js',
     format: 'esm',
   });
+  console.log('dist/report/psi.js written');
 }
 
 async function buildViewerReport() {
@@ -53,6 +55,7 @@ async function buildViewerReport() {
     file: 'dist/report/viewer.js',
     format: 'iife',
   });
+  console.log('dist/report/viewer.js written');
 }
 
 async function buildTreemapReport() {
@@ -67,6 +70,7 @@ async function buildTreemapReport() {
     file: 'dist/report/treemap.js',
     format: 'iife',
   });
+  console.log('dist/report/treemap.js written');
 }
 
 async function buildEsModulesBundle() {
@@ -81,10 +85,15 @@ async function buildEsModulesBundle() {
     file: 'dist/report/bundle.js',
     format: 'esm',
   });
+  console.log('dist/report/bundle.js written');
 }
 
 if (require.main === module) {
-  if (process.argv[2] === '--only-standalone') {
+  if (process.argv.includes('--also-psi')) {
+    buildPsiReport();
+  }
+
+  if (process.argv.includes('--only-standalone')) {
     buildStandaloneReport();
   } else {
     buildStandaloneReport();

lighthouse-core/scripts/build-report-for-autodeployment.js

@@ -16,6 +16,8 @@ const {defaultSettings} = require('../config/constants.js');
 const lighthouse = require('../index.js');
 const lhr = /** @type {LH.Result} */ (require('../../lighthouse-core/test/results/sample_v2.json'));
 const {LH_ROOT} = require('../../root.js');
+const htmlReportAssets = require('../../report/report-assets.js');
+
 
 const DIST = path.join(LH_ROOT, `dist/now`);
 
@@ -29,19 +31,23 @@ const DIST = path.join(LH_ROOT, `dist/now`);
     'ɑrabic': swapLocale(lhr, 'ar').lhr,
     'xl-accented': swapLocale(lhr, 'en-XL').lhr,
     'error': errorLhr,
+    'solocat': tweakLhrForPsi(lhr),
   };
 
   // Generate and write reports
   Object.entries(filenameToLhr).forEach(([filename, lhr]) => {
-    let html = ReportGenerator.generateReportHtml(lhr);
-    // TODO: PSI is another variant to consider
-    for (const variant of ['', '⌣.cdt.']) {
+    for (const variant of ['', '⌣.cdt.', '⌣.psi.']) {
+      let html = variant.includes('psi') ?
+        generatePsiReportHtml() :
+        ReportGenerator.generateReportHtml(lhr);
+
       if (variant.includes('cdt')) {
         // TODO: Make the DevTools Audits panel "emulation" more comprehensive
         // - the parent widget/vbox container with overflow
         // - a more constrained/realistic default size
         html = html.replace(`"lh-root lh-vars"`, `"lh-root lh-vars lh-devtools"`);
       }
+
       const filepath = `${DIST}/${variant}${filename}/index.html`;
       fs.mkdirSync(path.dirname(filepath), {recursive: true});
       fs.writeFileSync(filepath, html, {encoding: 'utf-8'});
@@ -50,6 +56,27 @@ const DIST = path.join(LH_ROOT, `dist/now`);
   });
 })();
 
+
+/**
+ * @return {string}
+ */
+function generatePsiReportHtml() {
+  const sanitizedJson = ReportGenerator.sanitizeJson(tweakLhrForPsi(lhr));
+  const PSI_TEMPLATE = fs.readFileSync(
+    `${LH_ROOT}/report/test-assets/faux-psi-template.html`, 'utf8');
+  const PSI_JAVASCRIPT = `
+${fs.readFileSync(`${LH_ROOT}/dist/report/psi.js`, 'utf8')};
+${fs.readFileSync(`${LH_ROOT}/report/test-assets/faux-psi.js`, 'utf8')};
+  `;
+
+  const html = ReportGenerator.replaceStrings(PSI_TEMPLATE, [
+    {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
+    {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: PSI_JAVASCRIPT},
+    {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
+    {search: '%%LIGHTHOUSE_TEMPLATES%%', replacement: htmlReportAssets.REPORT_TEMPLATES},
+  ]);
+  return html;
+}
 /**
  * Add a plugin to demo plugin rendering.
  * @param {LH.Result} lhr
@@ -63,6 +90,24 @@ function addPluginCategory(lhr) {
   };
 }
 
+/**
+ * Drops the LHR to only one, solo category (performance), and removes budgets.
+ * @param {LH.Result} lhr
+ */
+function tweakLhrForPsi(lhr) {
+  /** @type {LH.Result} */
+  const clone = JSON.parse(JSON.stringify(lhr));
+  clone.categories = {
+    'performance': clone.categories.performance,
+  };
+  // no budgets in PSI
+  delete clone.audits['performance-budget'];
+  clone.categories.performance.auditRefs = clone.categories.performance.auditRefs.filter(audit => {
+    return !audit.id.endsWith('-budget');
+  });
+  return clone;
+}
+
 /**
  * Generate an LHR with errors for the renderer to display.
  * We'll write an "empty" artifacts file to disk, only to use it in auditMode.

package.json

@@ -24,6 +24,7 @@
     "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
     "build-report": "node build/build-report.js",
+    "build-dist-reports": "yarn build-report --also-psi && node lighthouse-core/scripts/build-report-for-autodeployment.js",
     "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",
     "reset-link": "(yarn unlink || true) && yarn link && yarn link lighthouse",
@@ -54,6 +55,7 @@
     "cli-unit": "yarn unit-cli",
     "viewer-unit": "yarn unit-viewer",
     "watch": "yarn unit-core --watch",
+    "watch:report": "find report | entr yarn build-dist-reports",
     "unit:cicoverage": "yarn c8 --all yarn unit:ci",
     "coverage": "yarn unit:cicoverage && c8 report --reporter html",
     "coverage:smoke": "yarn c8 yarn smoke -j=1 && c8 report --reporter html",
@@ -62,7 +64,7 @@
     "fast": "node ./lighthouse-cli/index.js --preset=desktop --throttlingMethod=provided",
     "deploy-treemap": "yarn build-treemap --deploy",
     "deploy-viewer": "yarn build-viewer --deploy",
-    "now-build": "yarn build-report && node lighthouse-core/scripts/build-report-for-autodeployment.js && yarn build-viewer && yarn build-treemap && cp -r dist/gh-pages dist/now/gh-pages",
+    "now-build": "yarn build-dist-reports && yarn build-viewer && yarn build-treemap && cp -r dist/gh-pages dist/now/gh-pages",
     "dogfood-lhci": "./lighthouse-core/scripts/dogfood-lhci.sh",
     "timing-trace": "node lighthouse-core/scripts/generate-timing-trace.js",
     "changelog": "conventional-changelog --config ./build/changelog-generator/index.js --infile changelog.md --same-file",

report/clients/psi.js

@@ -93,10 +93,11 @@ export function prepareLabData(LHResult, document) {
   /** @param {HTMLElement} reportEl */
   const installFeatures = (reportEl) => {
     if (fullPageScreenshot) {
+      // 1) Add fpss css var to reportEl parent so any thumbnails will work
       ElementScreenshotRenderer.installFullPageScreenshot(
         reportEl, fullPageScreenshot.screenshot);
 
-      // Append the overlay element to a specific part of the DOM so that
+      // 2) Append the overlay element to a specific part of the DOM so that
       // the sticky tab group element renders correctly. If put in the reportEl
       // like normal, then the sticky header would bleed through the overlay
       // element.

report/report-generator.js

@@ -28,15 +28,23 @@ class ReportGenerator {
   }
 
   /**
-   * Returns the report HTML as a string with the report JSON and renderer JS inlined.
+   * @param {Object} object
+   * @return {string}
+   */
+  static sanitizeJson(object) {
+    return JSON.stringify(object)
+    .replace(/</g, '\\u003c') // replaces opening script tags
+    .replace(/\u2028/g, '\\u2028') // replaces line separators ()
+    .replace(/\u2029/g, '\\u2029'); // replaces paragraph separators
+  }
+
+  /**
+   * Returns the standaloe report HTML as a string with the report JSON and renderer JS inlined.
    * @param {LH.Result} lhr
    * @return {string}
    */
   static generateReportHtml(lhr) {
-    const sanitizedJson = JSON.stringify(lhr)
-      .replace(/</g, '\\u003c') // replaces opening script tags
-      .replace(/\u2028/g, '\\u2028') // replaces line separators ()
-      .replace(/\u2029/g, '\\u2029'); // replaces paragraph separators
+    const sanitizedJson = ReportGenerator.sanitizeJson(lhr);
 
     return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},

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

@@ -0,0 +1,127 @@
+<!--
+ * Copyright 2021 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.
+-->
+
+<!--
+  This fake psi page is intended to reproduce the experience of rendering two LHRs within the same DOM,
+  like in PageSpeed Insights. This helps surface the peculiar behavior around tabs,
+  expectations of unique IDs, and scoped report containment.
+-->
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <title>Faux PageSpeed Report</title>
+  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
+
+  <style>
+/* Inspired by https://codepen.io/markcaron/pen/MvGRYV?editors=1100 but improved. s*/
+/*
+ The tab visibility basics
+*/
+.tabset > input[type="radio"] {
+  position: absolute;
+  left: -200vw;
+}
+
+.tabset .tab-panel {
+  display: none;
+}
+
+.tabset > input:nth-of-type(1):checked ~ .tab-panels > .tab-panel:nth-of-type(1),
+.tabset > input:nth-of-type(2):checked ~ .tab-panels > .tab-panel:nth-of-type(2) {
+  display: block;
+}
+
+/*
+ Purdy tabs
+*/
+.tabset > label {
+  position: relative;
+  display: inline-block;
+  padding: 15px 55px 15px;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.tabset > label:hover {
+  background-color: hsl(0deg 0% 100% / 24%);
+}
+
+.tabset > label:hover,
+.tabset > input:focus + label {
+  color: #06c;
+}
+
+.tabset > input:checked + label {
+  border-color: #ccc;
+  border-bottom: 1px solid #fff;
+  margin-bottom: -1px;
+  background: white;
+}
+
+.tab-panel {
+  padding: 30px 0;
+  border-top: 1px solid #ccc;
+}
+
+body {
+  padding: 30px;
+}
+
+.tabset {
+  max-width: 65em;
+  background: #eee;
+}
+
+.tab-panels {
+  background: white;
+}
+
+/* extra styles */
+body {
+  background: hsl(217deg 89% 61%);
+}
+  </style>
+</head>
+<body >
+  <noscript>PSI requires JavaScript. Please enable.</noscript>
+  <div hidden>%%LIGHTHOUSE_TEMPLATES%%</div>
+
+  <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>
+
+    <input type="radio" name="tabset" id="tab2" aria-controls="desktop">
+    <label for="tab2">Desktop</label>
+
+    <div class="tab-panels">
+      <section id="mobile" class="tab-panel">
+        <main></main>
+      </section>
+
+      <section id="desktop" class="tab-panel">
+        <main></main>
+      </section>
+
+    </div>
+  </div>
+
+  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
+  <script type="module">
+%%LIGHTHOUSE_JAVASCRIPT%%
+  //# sourceURL=psi-reportrenderer.js
+  </script>
+  <script>console.log('window.__LIGHTHOUSE_JSON__', __LIGHTHOUSE_JSON__);</script>
+</body>
+</html>