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

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

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

lighthouse-core/lib/file-namer.js

@@ -20,7 +20,7 @@
  * 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 {!Object} results
+ * @param {!{url: string, generatedTime: string}} results
  * @returns string
  */
 function getFilenamePrefix(results) {

lighthouse-core/report/scripts/logger.js

@@ -21,22 +21,20 @@
 
 /**
  * Logs messages via a UI butter.
- * @class
  */
 class Logger {
   constructor(selector) {
+    /** @type {!Element} */
     this.el = document.querySelector(selector);
   }
 
   /**
    * Shows a butter bar.
    * @param {!string} msg The message to show.
-   * @param {boolean=} optAutoHide True to hide the message after a duration.
+   * @param {boolean=} autoHide True to hide the message after a duration.
    *     Default is true.
    */
-  log(msg, optAutoHide) {
-    const autoHide = typeof optAutoHide === 'undefined' ? true : optAutoHide;
-
+  log(msg, autoHide = true) {
     clearTimeout(this._id);
 
     this.el.textContent = msg;

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, Util */
 
 class CategoryRenderer {
   /**
@@ -105,8 +75,8 @@ class CategoryRenderer {
   _populateScore(element, score, scoringMode, title, description) {
     // Fill in the blanks.
     const valueEl = this._dom.find('.lh-score__value', element);
-    valueEl.textContent = formatNumber(score);
-    valueEl.classList.add(`lh-score__value--${calculateRating(score)}`,
+    valueEl.textContent = Util.formatNumber(score);
+    valueEl.classList.add(`lh-score__value--${Util.calculateRating(score)}`,
         `lh-score__value--${scoringMode}`);
 
     this._dom.find('.lh-score__title', element).textContent = title;
@@ -157,7 +127,7 @@ class CategoryRenderer {
 
     const gauge = this._dom.find('.lh-gauge', tmpl);
     gauge.setAttribute('data-progress', score); // .dataset not supported in jsdom.
-    gauge.classList.add(`lh-gauge--${calculateRating(score)}`);
+    gauge.classList.add(`lh-gauge--${Util.calculateRating(score)}`);
 
     this._dom.findAll('.lh-gauge__fill', gauge).forEach(el => {
       el.style.transform = `rotate(${fillRotation}deg)`;

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

@@ -50,7 +50,7 @@ class DOM {
 
   /**
    * @param {string} selector
-   * @param {!Document|!Element} context
+   * @param {!Node} context
    * @return {!DocumentFragment} A clone of the template content.
    * @throws {Error}
    */
@@ -73,6 +73,15 @@ class DOM {
     return clone;
   }
 
+  /**
+   * Resets the "stamped" state of the templates.
+   */
+  resetTemplates() {
+    this.findAll('template[data-stamped]', this._document).forEach(t => {
+      t.removeAttribute('data-stamped');
+    });
+  }
+
   /**
    * @param {string} text
    * @return {!Element}
@@ -113,7 +122,7 @@ class DOM {
    * Guaranteed context.querySelector. Always returns an element or throws if
    * nothing matches query.
    * @param {string} query
-   * @param {!DocumentFragment|!Element} context
+   * @param {!Node} context
    * @return {!Element}
    */
   find(query, context) {
@@ -127,8 +136,8 @@ class DOM {
   /**
    * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
    * @param {string} query
-   * @param {!DocumentFragment|!Element} context
-   * @return {!Array<Element>}
+   * @param {!Node} context
+   * @return {!Array<!Element>}
    */
   findAll(query, context) {
     return Array.from(context.querySelectorAll(query));

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

@@ -0,0 +1,77 @@
+/**
+ * @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 Logger {
+  /**
+   * @param {!Element} element
+   */
+  constructor(element) {
+    /** @type {!Element} */
+    this.el = element;
+    /** @private {?number} */
+    this._id = null;
+  }
+
+  /**
+   * Shows a butter bar.
+   * @param {!string} msg The message to show.
+   * @param {boolean=} autoHide True to hide the message after a duration.
+   *     Default is true.
+   */
+  log(msg, autoHide = true) {
+    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;
+}