Report: header, footer, leftnav, share, oh my

lighthouse-core/closure/closure-type-checking.js

@@ -32,6 +32,7 @@ gulp.task('compile-report', () => {
   return gulp.src([
     // externs
     'closure/third_party/commonjs.js',
+    'closure/third_party/google_universal_analytics_api.js',
 
     'report/v2/renderer/*.js',
   ])

lighthouse-core/closure/third_party/google_universal_analytics_api.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2015 The Closure Compiler Authors.
+ *
+ * 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.
+ */
+
+/**
+ * @fileoverview Externs for the Google Universal Analytics API (analytics.js).
+ *
+ * The analytics.js API allows the user to choose a name of Google Analytics
+ * object.  This externs file assumes that the name is ‘ga’.  If you include
+ * analytics.js snippet and use a different name, this externs file will not
+ * be useful to you (unless you change the name ‘ga’ to whatever name you’ve
+ * chosen).
+ *
+ * @see https://developers.google.com/analytics/devguides/collection/analyticsjs/method-reference
+ * @externs
+ */
+
+
+/**
+ * @param {string} methodName
+ * @param {...?} var_args
+ * @return {?}
+ */
+function ga(methodName, var_args) {}
+
+/**
+ * @param {string} trackingId
+ * @param {!Object=} opt_configObject
+ * @return {!_GATracker}
+ */
+ga.create = function(trackingId, opt_configObject) {};
+
+/**
+ * @param {string} name
+ * @return {?_GATracker}
+ */
+ga.getByName = function(name) {};
+
+/** @return {!Array<!_GATracker>} */
+ga.getAll = function() {};
+
+
+/** @type {string|undefined} */
+var GoogleAnalyticsObject;
+
+
+/** @interface */
+function _GATracker() {}
+
+/**
+ * @param {string} hitType
+ * @param {!Object=} opt_fieldObject
+ * @return {*}
+ */
+_GATracker.prototype.send = function(hitType, opt_fieldObject) {};
+
+/**
+ * @param {string|!Object} nameOrFieldObject
+ * @param {string|number|!Object|boolean=} opt_value (required if
+ *     nameOrFieldObject is a string)
+ */
+_GATracker.prototype.set = function(nameOrFieldObject, opt_value) {};
+
+/**
+ * @param {string} name
+ * @return {string|number|?Object|boolean}
+ */
+_GATracker.prototype.get = function(name) {};

lighthouse-core/report/v2/renderer/category-renderer.js

@@ -15,37 +15,7 @@
  */
 'use strict';
 
-/* globals self */
-
-const RATINGS = {
-  PASS: {label: 'pass', minScore: 75},
-  AVERAGE: {label: 'average', minScore: 45},
-  FAIL: {label: 'fail'}
-};
-
-/**
- * Convert a score to a rating label.
- * @param {number} score
- * @return {string}
- */
-function calculateRating(score) {
-  let rating = RATINGS.FAIL.label;
-  if (score >= RATINGS.PASS.minScore) {
-    rating = RATINGS.PASS.label;
-  } else if (score >= RATINGS.AVERAGE.minScore) {
-    rating = RATINGS.AVERAGE.label;
-  }
-  return rating;
-}
-
-/**
- * Format number.
- * @param {number} number
- * @return {string}
- */
-function formatNumber(number) {
-  return number.toLocaleString(undefined, {maximumFractionDigits: 1});
-}
+/* globals self, formatNumber, calculateRating */
 
 class CategoryRenderer {
   /**

lighthouse-core/report/v2/renderer/dom.js

@@ -50,7 +50,7 @@ class DOM {
 
   /**
    * @param {string} selector
-   * @param {!Document|!Element} context
+   * @param {!Document|!DocumentFragment|!Element} context
    * @return {!DocumentFragment} A clone of the template content.
    * @throws {Error}
    */
@@ -113,7 +113,7 @@ class DOM {
    * Guaranteed context.querySelector. Always returns an element or throws if
    * nothing matches query.
    * @param {string} query
-   * @param {!DocumentFragment|!Element} context
+   * @param {!Document|!DocumentFragment|!Element} context
    * @return {!Element}
    */
   find(query, context) {
@@ -127,7 +127,7 @@ class DOM {
   /**
    * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
    * @param {string} query
-   * @param {!DocumentFragment|!Element} context
+   * @param {!Document|!DocumentFragment|!Element} context
    * @return {!Array<Element>}
    */
   findAll(query, context) {

lighthouse-core/report/v2/renderer/format-helpers.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright 2017 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 RATINGS = {
+  PASS: {label: 'pass', minScore: 75},
+  AVERAGE: {label: 'average', minScore: 45},
+  FAIL: {label: 'fail'}
+};
+
+/**
+ * Convert a score to a rating label.
+ * @param {number} score
+ * @return {string}
+ */
+function calculateRating(score) {
+  let rating = RATINGS.FAIL.label;
+  if (score >= RATINGS.PASS.minScore) {
+    rating = RATINGS.PASS.label;
+  } else if (score >= RATINGS.AVERAGE.minScore) {
+    rating = RATINGS.AVERAGE.label;
+  }
+  return rating;
+}
+
+/**
+ * Format number.
+ * @param {number} number
+ * @return {string}
+ */
+function formatNumber(number) {
+  return number.toLocaleString(undefined, {maximumFractionDigits: 1});
+}
+
+/**
+ * Format time.
+ * @param {string} date
+ * @return {string}
+ */
+function formatDateTime(date) {
+  const options = {
+    month: 'short', day: 'numeric', year: 'numeric',
+    hour: 'numeric', minute: 'numeric', timeZoneName: 'short'
+  };
+  let formatter = new Intl.DateTimeFormat('en-US', options);
+
+  // Force UTC if runtime timezone could not be detected.
+  // See https://github.com/GoogleChrome/lighthouse/issues/1056
+  const tz = formatter.resolvedOptions().timeZone;
+  if (!tz || tz.toLowerCase() === 'etc/unknown') {
+    options.timeZone = 'UTC';
+    formatter = new Intl.DateTimeFormat('en-US', options);
+  }
+  return formatter.format(new Date(date));
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    calculateRating,
+    formatNumber,
+    formatDateTime,
+  };
+}

lighthouse-core/report/v2/renderer/logger.js

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2017 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';
+
+/**
+ * Logs messages via a UI butter.
+ * @class
+ */
+class Logger {
+  /**
+   * @param {!Element} element
+   */
+  constructor(element) {
+    this.el = element;
+    /** @private {?number} */
+    this._id = null;
+  }
+
+  /**
+   * Shows a butter bar.
+   * @param {!string} msg The message to show.
+   * @param {boolean=} optAutoHide True to hide the message after a duration.
+   *     Default is true.
+   */
+  log(msg, optAutoHide) {
+    const autoHide = typeof optAutoHide === 'undefined' ? true : optAutoHide;
+
+    clearTimeout(this._id);
+
+    this.el.textContent = msg;
+    this.el.classList.add('show');
+    if (autoHide) {
+      this._id = setTimeout(_ => {
+        this.el.classList.remove('show');
+      }, 7000);
+    }
+  }
+
+  /**
+   * @param {string} msg
+   */
+  warn(msg) {
+    this.log('Warning: ' + msg);
+  }
+
+  /**
+   * @param {string} msg
+   */
+  error(msg) {
+    this.log(msg);
+  }
+
+  /**
+   * Explicitly hides the butter bar.
+   */
+  hide() {
+    clearTimeout(this._id);
+    this.el.classList.remove('show');
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = Logger;
+}