client(lr): add lightrider report-generator

build/build-lr-files.js

@@ -0,0 +1,25 @@
+/**
+ * @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 fs = require('fs');
+const path = require('path');
+const makeDir = require('make-dir');
+
+const distDir = path.join(__dirname, '..', 'dist', 'lightrider');
+const bundleOutFile = `${distDir}/report-generator.js`;
+const generatorFilename = `./lighthouse-core/report/report-generator.js`;
+
+makeDir.sync(path.dirname(distDir));
+
+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());
+  });

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-file-namer.js

@@ -0,0 +1,50 @@
+/**
+ * @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';
+
+/* global URL */
+
+/**
+ * @fileoverview
+ * @suppress {reportUnknownTypes}
+ */
+
+/**
+ * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS
+ * Date/time uses the local timezone, however Node has unreliable ICU
+ * support, so we must construct a YYYY-MM-DD date format manually. :/
+ * @param {{finalUrl: string, fetchTime: string}} lhr
+ * @return {string}
+ */
+function getFilenamePrefix(lhr) {
+  const hostname = new (getUrlConstructor())(lhr.finalUrl).hostname;
+  const date = (lhr.fetchTime && new Date(lhr.fetchTime)) || new Date();
+
+  const timeStr = date.toLocaleTimeString('en-US', {hour12: false});
+  const dateParts = date.toLocaleDateString('en-US', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+  }).split('/');
+  // @ts-ignore - parts exists
+  dateParts.unshift(dateParts.pop());
+  const dateStr = dateParts.join('-');
+
+  const filenamePrefix = `${hostname}_${dateStr}_${timeStr}`;
+  // replace characters that are unfriendly to filenames
+  return filenamePrefix.replace(/[/?<>\\:*|":]/g, '-');
+}
+
+/**
+ * Get a new URL object.
+ * @return {URL!}
+ */
+function getUrlConstructor() {
+  return URL;
+}
+
+// don't attempt to export in the browser.
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {getFilenamePrefix};
+}

clients/lightrider/lightrider-ui-features.js

@@ -0,0 +1,28 @@
+/**
+ * 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, ReportGenerator */
+
+/**
+ * Extends ReportUIFeatures to add an (optional) ability to save to a gist and
+ * generates 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() {
+    return window.ReportGenerator.generateReportHtml(this.json);
+  }
+}
+
+// node export for testing.
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = LightriderUIFeatures;
+}

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-bundle.js clients/lightrider/lightrider-entry.js dist/lightrider/lighthouse-lr-bundle.js && node ./build/build-lr-files.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 .",