report: move renderer code to report/ (#12690)

.npmignore

@@ -39,7 +39,6 @@ chromium-webtests
 .tmp
 
 # generated files
-**/pages/scripts/lighthouse-report.js
 *.report.html
 *.dom.html
 *.devtoolslog.json

build/build-bundle.js

@@ -87,7 +87,7 @@ async function browserifyFile(entryPath, distPath) {
   // Don't include the stringified report in DevTools - see devtools-report-assets.js
   // Don't include in Lightrider - HTML generation isn't supported, so report assets aren't needed.
   if (isDevtools(entryPath) || isLightrider(entryPath)) {
-    bundle.ignore(require.resolve('../lighthouse-core/report/html/html-report-assets.js'));
+    bundle.ignore(require.resolve('../report/report-assets.js'));
   }
 
   // Don't include locales in DevTools.

build/build-dt-report-resources.js

@@ -12,8 +12,8 @@ const assert = require('assert').strict;
 
 const distDir = path.join(__dirname, '..', 'dist', 'dt-report-resources');
 const bundleOutFile = `${distDir}/report-generator.js`;
-const generatorFilename = `./lighthouse-core/report/report-generator.js`;
-const htmlReportAssets = require('../lighthouse-core/report/html/html-report-assets.js');
+const generatorFilename = `./report/report-generator.js`;
+const htmlReportAssets = require('../report/report-assets.js');
 
 /**
  * Used to save cached resources (Runtime.cachedResources).
@@ -30,7 +30,7 @@ fs.mkdirSync(distDir);
 
 writeFile('report.js', htmlReportAssets.REPORT_JAVASCRIPT);
 writeFile('report.css', htmlReportAssets.REPORT_CSS);
-writeFile('template.html', htmlReportAssets.REPORT_TEMPLATE);
+writeFile('standalone-template.html', htmlReportAssets.REPORT_TEMPLATE);
 writeFile('templates.html', htmlReportAssets.REPORT_TEMPLATES);
 writeFile('report.d.ts', 'export {}');
 writeFile('report-generator.d.ts', 'export {}');

build/build-lightrider-bundles.js

@@ -15,7 +15,7 @@ const distDir = path.join(__dirname, '..', 'dist', 'lightrider');
 const sourceDir = __dirname + '/../clients/lightrider';
 
 const bundleOutFile = `${distDir}/report-generator-bundle.js`;
-const generatorFilename = `./lighthouse-core/report/report-generator.js`;
+const generatorFilename = `./report/report-generator.js`;
 
 const entrySourceName = 'lightrider-entry.js';
 const entryDistName = 'lighthouse-lr-bundle.js';

build/build-treemap.js

@@ -64,9 +64,9 @@ async function run() {
       fs.readFileSync(require.resolve('pako/dist/pako_inflate.js'), 'utf-8'),
       /* eslint-enable max-len */
       buildStrings(),
-      {path: '../../lighthouse-core/report/html/renderer/logger.js'},
-      {path: '../../lighthouse-core/report/html/renderer/i18n.js'},
-      {path: '../../lighthouse-core/report/html/renderer/text-encoding.js'},
+      {path: '../../report/renderer/logger.js'},
+      {path: '../../report/renderer/i18n.js'},
+      {path: '../../report/renderer/text-encoding.js'},
       {path: '../../lighthouse-viewer/app/src/drag-and-drop.js'},
       {path: '../../lighthouse-viewer/app/src/github-api.js'},
       {path: '../../lighthouse-viewer/app/src/firebase-auth.js'},

build/build-viewer.js

@@ -9,14 +9,14 @@ const fs = require('fs');
 const browserify = require('browserify');
 const GhPagesApp = require('./gh-pages-app.js');
 const {minifyFileTransform} = require('./build-utils.js');
-const htmlReportAssets = require('../lighthouse-core/report/html/html-report-assets.js');
+const htmlReportAssets = require('../report/report-assets.js');
 
 /**
  * Build viewer, optionally deploying to gh-pages if `--deploy` flag was set.
  */
 async function run() {
   // JS bundle from browserified ReportGenerator.
-  const generatorFilename = `${__dirname}/../lighthouse-core/report/report-generator.js`;
+  const generatorFilename = `${__dirname}/../report/report-generator.js`;
   const generatorBrowserify = browserify(generatorFilename, {standalone: 'ReportGenerator'})
     .transform('@wardpeet/brfs', {
       readFileSyncTransform: minifyFileTransform,

clients/devtools-report-assets.js

@@ -8,7 +8,7 @@
 /**
  * @fileoverview Instead of loading report assets form the filesystem, in Devtools we must load
  * them via Runtime.cachedResources. We use this module to shim
- * lighthouse-core/report/html/html-report-assets.js in Devtools.
+ * report/report-assets.js in Devtools.
  */
 
 /* global globalThis */
@@ -28,7 +28,7 @@ module.exports = {
     return cachedResources.get('third_party/lighthouse/report-assets/report.js');
   },
   get REPORT_TEMPLATE() {
-    return cachedResources.get('third_party/lighthouse/report-assets/template.html');
+    return cachedResources.get('third_party/lighthouse/report-assets/standalone-template.html');
   },
   get REPORT_TEMPLATES() {
     return cachedResources.get('third_party/lighthouse/report-assets/templates.html');

docs/architecture.md

@@ -13,7 +13,7 @@ _Some incomplete notes_
   3. `defaultPass.devtoolslog.json`: A log of all the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) events. Primary signal about network requests and page state.
 * **Audit** - The [audits](../lighthouse-core/audits) are tests for a single feature/optimization/metric. Using the Artifacts as input, an audit evaluates a test and resolves to a numeric score. See [Understanding Results](./understanding-results.md) for details of the LHR (Lighthouse Result object).
   * **Computed Artifacts** - [Generated](../lighthouse-core/computed) on-demand from artifacts, these add additional meaning, and are often shared amongst multiple audits.
-* **Report** - The report UI, created client-side from the LHR. See [HTML Report Generation Overview](../lighthouse-core/report/html/readme.md) for details.
+* **Report** - The report UI, created client-side from the LHR. See [HTML Report Generation Overview](../report/readme.md) for details.
 
 ### Audit/Report terminology
 * **Category** - Roll-up collection of audits and audit groups into a user-facing section of the report (eg. `Best Practices`). Applies weighting and overall scoring to the section. Examples: PWA, Accessibility, Best Practices.

docs/hacking-tips.md

@@ -43,7 +43,7 @@ node generate_report.js > temp.report.html; open temp.report.html
 // generate_report.js
 'use strict';
 
-const ReportGenerator = require('./lighthouse-core/report/report-generator');
+const ReportGenerator = require('./report/report-generator.js');
 const results = require('./temp.report.json');
 const html = ReportGenerator.generateReportHtml(results);
 

jest.config.js

@@ -11,6 +11,7 @@ module.exports = {
   collectCoverageFrom: [
     '**/lighthouse-core/**/*.js',
     '**/lighthouse-cli/**/*.js',
+    '**/report/**/*.js',
     '**/lighthouse-viewer/**/*.js',
   ],
   coveragePathIgnorePatterns: [
@@ -22,6 +23,7 @@ module.exports = {
   testMatch: [
     '**/lighthouse-core/**/*-test.js',
     '**/lighthouse-cli/**/*-test.js',
+    '**/report/**/*-test.js',
     '**/lighthouse-core/test/fraggle-rock/**/*-test-pptr.js',
     '**/lighthouse-treemap/**/*-test.js',
     '**/lighthouse-treemap/**/*-test-pptr.js',

lighthouse-core/audits/audit.js

@@ -7,7 +7,7 @@
 
 const {isUnderTest} = require('../lib/lh-env.js');
 const statistics = require('../lib/statistics.js');
-const Util = require('../report/html/renderer/util.js');
+const Util = require('../../report/renderer/util.js');
 
 const DEFAULT_PASS = 'defaultPass';
 

lighthouse-core/computed/resource-summary.js

@@ -11,7 +11,7 @@ const URL = require('../lib/url-shim.js');
 const NetworkRequest = require('../lib/network-request.js');
 const MainResource = require('./main-resource.js');
 const Budget = require('../config/budget.js');
-const Util = require('../report/html/renderer/util.js');
+const Util = require('../../report/renderer/util.js');
 
 /** @typedef {{count: number, resourceSize: number, transferSize: number}} ResourceEntry */
 

lighthouse-core/lib/i18n/i18n.js

@@ -346,7 +346,7 @@ function getRendererFormattedStrings(locale) {
   const localeMessages = LOCALES[locale];
   if (!localeMessages) throw new Error(`Unsupported locale '${locale}'`);
 
-  const icuMessageIds = Object.keys(localeMessages).filter(f => f.includes('core/report/html/'));
+  const icuMessageIds = Object.keys(localeMessages).filter(f => f.startsWith('report/'));
   const strings = /** @type {LH.I18NRendererStrings} */ ({});
   for (const icuMessageId of icuMessageIds) {
     const [filename, varName] = icuMessageId.split(' | ');