client(lr): add lightrider report-generator

build/build-lightrider.js

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright 2019 Google Inc. 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';
+
+const browserify = require('browserify');
+const cpy = require('cpy');
+const fs = require('fs');
+const path = require('path');
+const makeDir = require('make-dir');
+const bundleBuilder = require('./build-bundle.js');
+
+const LHROOT = path.join(__dirname, '..');
+const distDir = path.join(__dirname, '..', 'dist', 'lightrider');
+const sourceDir = __dirname + '/../clients/lightrider';
+
+const bundleOutFile = `${distDir}/report-generator.js`;
+const generatorFilename = `./lighthouse-core/report/report-generator.js`;
+
+const entrySourceName = 'lightrider-entry.js';
+const entryDistName = 'lighthouse-lr-bundle.js';
+
+makeDir.sync(path.dirname(distDir));
+
+/**
+ * @return {Promise<void>}
+ */
+async function copyAssets() {
+  return cpy([
+    'clients/lightrider/lightrider-ui-features.js',
+    'lighthouse-core/lib/file-namer.js',
+  ], distDir, {
+    cwd: LHROOT,
+    parents: false,
+  });
+}
+
+/**
+ * Browserify and minify entry point.
+ */
+function buildEntryPoint() {
+  const inFile = `${sourceDir}/${entrySourceName}`;
+  const outFile = `${distDir}/${entryDistName}`;
+  return bundleBuilder.build(inFile, outFile);
+}
+
+/**
+ * Browserify and minify the LR report generator.
+ */
+function buildReportGenerator() {
+  browserify(generatorFilename, {standalone: 'ReportGenerator'})
+    // Transform the fs.readFile etc into inline strings.
+    .transform('brfs', {global: true, parserOpts: {ecmaVersion: 10}})
+    .bundle((err, src) => {
+      if (err) throw err;
+      fs.writeFileSync(bundleOutFile, src.toString());
+    });
+}
+
+async function run() {
+  await Promise.all([
+    buildEntryPoint(),
+    copyAssets(),
+    buildReportGenerator(),
+  ]);
+}
+
+run();

clients/lightrider-entry.js → clients/lightrider/lightrider-entry.js

@@ -5,19 +5,19 @@
  */
 'use strict';
 
-const lighthouse = require('../lighthouse-core/index.js');
+const lighthouse = require('../../lighthouse-core/index.js');
 
-const assetSaver = require('../lighthouse-core/lib/asset-saver.js');
-const LHError = require('../lighthouse-core/lib/lh-error.js');
-const preprocessor = require('../lighthouse-core/lib/proto-preprocessor.js');
+const assetSaver = require('../../lighthouse-core/lib/asset-saver.js');
+const LHError = require('../../lighthouse-core/lib/lh-error.js');
+const preprocessor = require('../../lighthouse-core/lib/proto-preprocessor.js');
 
 /** @type {Record<'mobile'|'desktop', LH.Config.Json>} */
 const LR_PRESETS = {
-  mobile: require('../lighthouse-core/config/lr-mobile-config.js'),
-  desktop: require('../lighthouse-core/config/lr-desktop-config.js'),
+  mobile: require('../../lighthouse-core/config/lr-mobile-config.js'),
+  desktop: require('../../lighthouse-core/config/lr-desktop-config.js'),
 };
 
-/** @typedef {import('../lighthouse-core/gather/connections/connection.js')} Connection */
+/** @typedef {import('../../lighthouse-core/gather/connections/connection.js')} Connection */
 
 /**
  * Run lighthouse for connection and provide similar results as in CLI.

clients/lightrider/lightrider-ui-features.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2019 Google Inc. 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';
+
+/* global ReportUIFeatures */
+
+/**
+ * Extends ReportUIFeatures to use the saved report from a browserified ReportGenerator.
+ */
+class LightriderUIFeatures extends ReportUIFeatures {
+  /**
+   * Uses ReportGenerator to create the html that recreates this report.
+   * @return {string}
+   * @override
+   */
+  getReportHtml() {
+    // @ts-ignore This is only called in browser in Lightrider where this exists.
+    return window.ReportGenerator.generateReportHtml(this.json);
+  }
+}
+
+module.exports = LightriderUIFeatures;

clients/test/lightrider-entry-test.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const assert = require('assert');
-const lhBackground = require('../lightrider-entry.js');
+const lhBackground = require('../lightrider/lightrider-entry.js');
 const Runner = require('../../lighthouse-core/runner.js');
 const LHError = require('../../lighthouse-core/lib/lh-error.js');
 

lighthouse-core/lib/file-namer.js

@@ -20,7 +20,7 @@
  * @return {string}
  */
 function getFilenamePrefix(lhr) {
-  const hostname = new (getUrlConstructor())(lhr.finalUrl).hostname;
+  const hostname = new URL(lhr.finalUrl).hostname;
   const date = (lhr.fetchTime && new Date(lhr.fetchTime)) || new Date();
 
   const timeStr = date.toLocaleTimeString('en-US', {hour12: false});
@@ -36,14 +36,6 @@ function getFilenamePrefix(lhr) {
   return filenamePrefix.replace(/[/?<>\\:*|":]/g, '-');
 }
 
-function getUrlConstructor() {
-  if (typeof module !== 'undefined' && module.exports) {
-    return require('./url-shim');
-  } else {
-    return URL;
-  }
-}
-
 // don't attempt to export in the browser.
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {getFilenamePrefix};

lighthouse-core/report/report-generator.js

@@ -57,14 +57,14 @@ class ReportGenerator {
    *  - the score value of the audit
    *
    * @param {LH.Result} lhr
-   * @returns {string}
+   * @return {string}
    */
   static generateReportCSV(lhr) {
     // To keep things "official" we follow the CSV specification (RFC4180)
     // The document describes how to deal with escaping commas and quotes etc.
     const CRLF = '\r\n';
     const separator = ',';
-    /** @param {string} value @returns {string} */
+    /** @param {string} value @return {string} */
     const escape = value => `"${value.replace(/"/g, '""')}"`;
 
     // Possible TODO: tightly couple headers and row values

package.json

@@ -16,7 +16,7 @@
     "build-all:task:windows": "yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer",
     "build-extension": "node ./build/build-extension.js",
     "build-devtools": "node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
-    "build-lr": "node ./build/build-bundle.js clients/lightrider-entry.js dist/lighthouse-lr-bundle.js",
+    "build-lr": "node ./build/build-lightrider.js",
     "build-viewer": "node ./build/build-viewer.js",
     "clean": "rimraf dist proto/scripts/*.json proto/scripts/*_pb2.* proto/scripts/*_pb.* proto/scripts/__pycache__ proto/scripts/*.pyc *.report.html *.report.dom.html *.report.json *.devtoolslog.json *.trace.json || true",
     "lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .",