From 4368d0d42dca8bd3310298e4f0a51c33375c2d5a Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Tue, 4 Apr 2017 12:48:30 -0700
Subject: [PATCH 01/10] Report v2: check/x boolean audits, expand details
 failing audits, optimal val

---
 lighthouse-core/report/v2/report-renderer.js |  57 +++++++--
 lighthouse-core/report/v2/report-styles.css  | 120 +++++++++++++++++--
 2 files changed, 155 insertions(+), 22 deletions(-)

diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index dbc3d6e525ce..7b648c3d4605 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -31,6 +31,10 @@ const RATINGS = {
  * @return {string}
  */
 function calculateRating(value) {
+  if (typeof value === 'boolean') {
+    return value ? RATINGS.GOOD.label : RATINGS.POOR.label;
+  }
+
   let rating = RATINGS.POOR.label;
   if (value >= RATINGS.GOOD.minScore) {
     rating = RATINGS.GOOD.label;
@@ -98,19 +102,42 @@ window.ReportRenderer = class ReportRenderer {
    * @param {string} description
    * @return {!Element}
    */
-  _renderScore(score, title, description) {
-    const element = this._createElement('div', 'lighthouse-score');
+  _renderScore(score, title, description, auditOrCategory) {
+    const isAudit = 'result' in auditOrCategory;
+    const tagName = isAudit ? 'details' : 'div';
+
+    // Score template. Audits get a details dropdown. Categories don't.
+    const tmpContainer = this._createElement('div');
+    tmpContainer.innerHTML = `<div class="lighthouse-score">
+      <div class="lighthouse-score__value"><!-- filled --></div>
+      <${tagName} class="lighthouse-score__header">
+        <summary class="lighthouse-score__snippet">
+          <span class="lighthouse-score__title"><!-- filled --></span>
+          <div class="lighthouse-score__arrow" title="See audits"></div>
+        </summary>
+        <div class="lighthouse-score__description"><!-- filled --></div>
+      </${tagName}>
+    </div>`;
 
-    const value = element.appendChild(this._createElement('div', 'lighthouse-score__value'));
+    // Fill in the blanks.
+    const value = tmpContainer.querySelector('.lighthouse-score__value');
     value.textContent = formatNumber(score);
     value.classList.add(`lighthouse-score__value--${calculateRating(score)}`);
 
-    const column = element.appendChild(this._createElement('div', 'lighthouse-score__text'));
-    column.appendChild(this._createElement('div', 'lighthouse-score__title')).textContent = title;
-    column.appendChild(
-      this._createElement('div', 'lighthouse-score__description')).textContent = description;
+    if (typeof score === 'boolean') {
+      value.classList.add('lighthouse-score__value--boolean');
+    }
 
-    return element;
+    tmpContainer.querySelector('.lighthouse-score__title').textContent = title;
+    tmpContainer.querySelector('.lighthouse-score__description').textContent = description;
+
+    const header = tmpContainer.querySelector('.lighthouse-score__header');
+    header.open = score < 1;
+    if (isAudit && auditOrCategory.result.details) {
+      header.appendChild(this._renderDetails(auditOrCategory.result.details));
+    }
+
+    return tmpContainer.firstChild;
   }
 
   /**
@@ -200,7 +227,8 @@ window.ReportRenderer = class ReportRenderer {
    */
   _renderCategory(category) {
     const element = this._createElement('div', 'lighthouse-category');
-    element.appendChild(this._renderScore(category.score, category.name, category.description));
+    element.appendChild(
+        this._renderScore(category.score, category.name, category.description, category));
     for (const audit of category.audits) {
       element.appendChild(this._renderAudit(audit));
     }
@@ -215,12 +243,15 @@ window.ReportRenderer = class ReportRenderer {
     const element = this._createElement('div', 'lighthouse-audit');
     let title = audit.result.description;
     if (audit.result.displayValue) {
-      title += ': ' + audit.result.displayValue;
+      title += `:  ${audit.result.displayValue}`;
     }
-    element.appendChild(this._renderScore(audit.score, title, audit.result.helpText));
-    if (audit.result.details) {
-      element.appendChild(this._renderDetails(audit.result.details));
+    if (audit.result.optimalValue) {
+      title += ` (target: ${audit.result.optimalValue})`;
     }
+
+    element.appendChild(
+        this._renderScore(audit.result.score, title, audit.result.helpText, audit));
+
     return element;
   }
 };
diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css
index 8e601e34f7a7..8b3ff377fa22 100644
--- a/lighthouse-core/report/v2/report-styles.css
+++ b/lighthouse-core/report/v2/report-styles.css
@@ -17,6 +17,7 @@
  :root {
   --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --body-font-size: 13px;
+  --default-padding: 16px;
 
   --secondary-text-color: #565656;
   /*--accent-color: #3879d9;*/
@@ -27,8 +28,11 @@
 
   --report-border-color: #ebebeb;
 
-  --lh-score-width: 50px;
-  --lh-score-margin: 20px;
+  --lh-score-highlight-bg: #fafafa;
+  --lh-score-icon-background-size: 17px;
+  --lh-score-margin: var(--default-padding);
+  --lh-audit-score-width: 35px;
+  --lh-category-score-width: 50px;
 }
 
 * {
@@ -42,8 +46,9 @@ body {
   line-height: var(--body-line-height);
 }
 
-.--hidden {
-  display: none !important;
+/* List */
+.lighthouse-list {
+  font-size: smaller;
 }
 
 .lighthouse-list__header {
@@ -70,26 +75,70 @@ body {
   flex: none;
   padding: 5px;
   margin-right: var(--lh-score-margin);
-  width: var(--lh-score-width);
+  width: var(--lh-audit-score-width);
   display: flex;
   justify-content: center;
+  align-items: center;
   background: var(--warning-color);
   color: #fff;
   border-radius: 2px;
+  position: relative;
+}
+
+.lighthouse-score__value::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #000;
+  border-radius: inherit;
+}
+
+.lighthouse-score__value--boolean {
+  text-indent: -500px;
+}
+
+/* No icon for audits with number scores. */
+.lighthouse-score__value:not(.lighthouse-score__value--boolean)::after {
+  content: none;
 }
 
 .lighthouse-score__value--good {
   background: var(--good-color);
 }
 
+.lighthouse-score__value--good::after {
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>good</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
+  background-size: var(--lh-score-icon-background-size);
+}
+
 .lighthouse-score__value--average {
   background: var(--average-color);
 }
 
+.lighthouse-score__value--average::after {
+  background: none;
+  content: '!';
+  background-color: var(--average-color);
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  font-size: 15px;
+}
+
 .lighthouse-score__value--poor {
   background: var(--poor-color);
 }
 
+.lighthouse-score__value--poor::after {
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
+  background-size: var(--lh-score-icon-background-size);
+}
+
 .lighthouse-score__title {
   margin-bottom: 10px;
 }
@@ -97,12 +146,53 @@ body {
 .lighthouse-score__description {
   font-size: smaller;
   color: var(--secondary-text-color);
+  margin: var(--default-padding) 0;
+}
+
+.lighthouse-score__header {
+  flex: 1;
+  margin-top: 2px;
 }
 
+.lighthouse-score__header[open] .lighthouse-score__arrow {
+  transform: rotateZ(90deg);
+}
+
+.lighthouse-score__arrow {
+  background: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>') no-repeat 50% 50%;
+  background-size: contain;
+  background-color: transparent;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  margin: 0 8px 0 8px;
+  transition: transform 150ms ease-in-out;
+}
+
+.lighthouse-score__snippet {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  /*outline: none;*/
+}
+
+.lighthouse-score__snippet::-moz-list-bullet {
+  display: none;
+}
+
+.lighthouse-score__snippet::-webkit-details-marker {
+  display: none;
+}
+
+/*.lighthouse-score__snippet:focus .lighthouse-score__title {
+  outline: rgb(59, 153, 252) auto 5px;
+}*/
+
 /* Audit */
 
 .lighthouse-audit {
-  margin-top: 20px;
+  margin-top: var(--default-padding);
 }
 
 .lighthouse-audit > .lighthouse-score {
@@ -121,7 +211,7 @@ body {
 }
 
 .lighthouse-report {
-  padding: 16px;
+  padding: var(--default-padding);
 }
 
 .lighthouse-category {
@@ -134,14 +224,26 @@ body {
   padding-top: 0;
 }
 
-.lighthouse-category > *:not(.lighthouse-score) {
-  margin-left: calc(var(--lh-score-width) + var(--lh-score-margin));
+.lighthouse-category > .lighthouse-audit {
+  margin-left: calc(var(--lh-category-score-width) + var(--lh-score-margin));
 }
 
 .lighthouse-category > .lighthouse-score {
   font-size: 20px;
 }
 
+.lighthouse-category > .lighthouse-score .lighthouse-score__value {
+  width: var(--lh-category-score-width);
+}
+
+/* hide drop down arrow for categories and use correct pointer */
+.lighthouse-category > .lighthouse-score .lighthouse-score__arrow {
+  display: none;
+}
+.lighthouse-category > .lighthouse-score .lighthouse-score__snippet {
+  cursor: initial;
+}
+
 .lighthouse-category > .lighthouse-score .lighthouse-score__title {
   font-size: 24px;
   font-weight: 400;

From e82eabc39c4460a18fef5eb191d5f0bda39ac2e9 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Tue, 4 Apr 2017 23:10:14 -0700
Subject: [PATCH 02/10] Generate DOM from `<template>`. Add templates.html. -
 rename good/poor -> pass/fail - organize DOM related code - placeholders for
 score precision

---
 lighthouse-core/report/v2/report-generator.js |   4 +
 lighthouse-core/report/v2/report-renderer.js  | 227 ++++++++++++------
 lighthouse-core/report/v2/report-styles.css   |  38 +--
 .../report/v2/report-template.html            |   1 +
 lighthouse-core/report/v2/templates.html      |  27 +++
 5 files changed, 200 insertions(+), 97 deletions(-)
 create mode 100644 lighthouse-core/report/v2/templates.html

diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js
index 19b370994c7c..c2cf27bb354e 100644
--- a/lighthouse-core/report/v2/report-generator.js
+++ b/lighthouse-core/report/v2/report-generator.js
@@ -23,6 +23,7 @@ const REPORT_TEMPLATE = fs.readFileSync(path.join(__dirname, './report-template.
 // TODO: Setup a gulp pipeline to concat and minify the renderer files?
 const REPORT_JAVASCRIPT = fs.readFileSync(path.join(__dirname, './report-renderer.js'), 'utf8');
 const REPORT_CSS = fs.readFileSync(path.join(__dirname, './report-styles.css'), 'utf8');
+const REPORT_TEMPLATES = fs.readFileSync(path.join(__dirname, './templates.html'), 'utf8');
 
 class ReportGeneratorV2 {
   /**
@@ -97,11 +98,14 @@ class ReportGeneratorV2 {
   generateReportHtml(reportAsJson) {
     const sanitizedJson = JSON.stringify(reportAsJson).replace(/</g, '\\u003c');
     const sanitizedJavascript = REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
+    // Remove script in templates files just to be safe.
+    const sanitizedTemplates = REPORT_TEMPLATES.replace(/<script>([\s\S]*?)<\/script>/g, '');
 
     return ReportGeneratorV2.replaceStrings(REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
       {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: REPORT_CSS},
+      {search: '%%LIGHTHOUSE_TEMPLATES%%', replacement: sanitizedTemplates},
     ]);
   }
 }
diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index 7b648c3d4605..a147aba11005 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -15,51 +15,56 @@
  */
 'use strict';
 
+/**
+ * @fileoverview The entry point for rendering the Lighthouse report based on the JSON output.
+ *    This file is injected into the report HTML along with the JSON report.
+ *
+ * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
+ */
+
 /* eslint-env browser */
 /* eslint indent: [2, 2, { "SwitchCase": 1, "outerIIFEBody": 0 }] */
 
 (function() {
 const RATINGS = {
-  GOOD: {label: 'good', minScore: 75},
+  PASS: {label: 'pass', minScore: 75},
   AVERAGE: {label: 'average', minScore: 45},
-  POOR: {label: 'poor'}
+  FAIL: {label: 'fail'}
 };
 
 /**
  * Convert a score to a rating label.
- * @param {number} value
- * @return {string}
+ * @param {!number} score
+ * @param {!string} precision One of 'binary', 'numeric', 'grade'.
+ * @return {!string}
  */
-function calculateRating(value) {
-  if (typeof value === 'boolean') {
-    return value ? RATINGS.GOOD.label : RATINGS.POOR.label;
+function calculateRating(score, precision) {
+  if (precision === 'numeric') {
+    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;
+  } else if (precision === 'grade') {
+    // Not implemented yet.
   }
 
-  let rating = RATINGS.POOR.label;
-  if (value >= RATINGS.GOOD.minScore) {
-    rating = RATINGS.GOOD.label;
-  } else if (value >= RATINGS.AVERAGE.minScore) {
-    rating = RATINGS.AVERAGE.label;
-  }
-  return rating;
+  // Treat as binary by default.
+  return score === 100 ? RATINGS.PASS.label : RATINGS.FAIL.label;
 }
 
 /**
  * Format number.
- * @param {number} number
- * @return {string}
+ * @param {!number} number
+ * @return {!string}
  */
 function formatNumber(number) {
   return number.toLocaleString(undefined, {maximumFractionDigits: 1});
 }
 
-/**
- * @fileoverview The entry point for rendering the Lighthouse report based on the JSON output.
- *    This file is injected into the report HTML along with the JSON report.
- *
- * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
- */
-window.ReportRenderer = class ReportRenderer {
+class DOM {
   /**
    * @param {!Document} document
    */
@@ -68,15 +73,31 @@ window.ReportRenderer = class ReportRenderer {
   }
 
   /**
-   * @param {!ReportJSON} report
-   * @return {!Element}
+   * Sets the text content of an element, safely. If the element does not exist,
+   * results in a noop.
+   * @param {Element} element
+   * @param {!string} text
+   * @return {Element}
    */
-  renderReport(report) {
-    try {
-      return this._renderReport(report);
-    } catch (e) {
-      return this._renderException(e);
+  static setText(element, text) {
+    if (element) {
+      element.textContent = text;
     }
+    return element;
+  }
+
+  /**
+   * Adds a class to an element, safely. If the element does not exist, results
+   * in a noop.
+   * @param {Element} element
+   * @param {...!string} classes
+   * @return {Element}
+   */
+  static addClass(element, ...classes) {
+    if (element) {
+      element.classList.add(...classes);
+    }
+    return element;
   }
 
   /**
@@ -85,7 +106,7 @@ window.ReportRenderer = class ReportRenderer {
    * @param {!Object<string, string>=} attrs Attribute key/val pairs.
    * @return {!Element}
    */
-  _createElement(name, className, attrs = {}) {
+  createElement(name, className, attrs = {}) {
     const element = this._document.createElement(name);
     if (className) {
       element.className = className;
@@ -97,47 +118,81 @@ window.ReportRenderer = class ReportRenderer {
   }
 
   /**
-   * @param {number} score
-   * @param {string} title
-   * @param {string} description
+   * @param {!string} selector
+   * @return {!DocumentFragment} A clone of the template content.
+   * @throws {Error}
+   */
+  cloneTemplate(selector) {
+    const template = this._document.querySelector(selector);
+    if (!template) {
+      throw new Error(`Template not found: template${selector}`);
+    }
+    return this._document.importNode(template.content, true);
+  }
+}
+
+class ReportRenderer {
+  /**
+   * @param {!Document} document
+   */
+  constructor(document) {
+    this._dom = new DOM(document);
+  }
+
+  /**
+   * @param {!ReportJSON} report
+   * @return {!Element}
+   */
+  renderReport(report) {
+    try {
+      return this._renderReport(report);
+    } catch (e) {
+      return this._renderException(e);
+    }
+  }
+
+  /**
+   * @param {!Element} tmpl Parent node to populate with values.
+   * @param {!{value: string, precision: string}} score
+   * @param {!string} title
+   * @param {!string} description
    * @return {!Element}
    */
-  _renderScore(score, title, description, auditOrCategory) {
-    const isAudit = 'result' in auditOrCategory;
-    const tagName = isAudit ? 'details' : 'div';
-
-    // Score template. Audits get a details dropdown. Categories don't.
-    const tmpContainer = this._createElement('div');
-    tmpContainer.innerHTML = `<div class="lighthouse-score">
-      <div class="lighthouse-score__value"><!-- filled --></div>
-      <${tagName} class="lighthouse-score__header">
-        <summary class="lighthouse-score__snippet">
-          <span class="lighthouse-score__title"><!-- filled --></span>
-          <div class="lighthouse-score__arrow" title="See audits"></div>
-        </summary>
-        <div class="lighthouse-score__description"><!-- filled --></div>
-      </${tagName}>
-    </div>`;
+  _populateScore(tmpl, score, title, description) {
+    const rating = calculateRating(score.value, score.precision);
 
     // Fill in the blanks.
-    const value = tmpContainer.querySelector('.lighthouse-score__value');
-    value.textContent = formatNumber(score);
-    value.classList.add(`lighthouse-score__value--${calculateRating(score)}`);
+    const value = tmpl.querySelector('.lighthouse-score__value');
+    DOM.setText(value, formatNumber(score.value));
+    DOM.addClass(value, `lighthouse-score__value--${rating}`,
+                        `lighthouse-score__value--${score.precision}`);
 
-    if (typeof score === 'boolean') {
-      value.classList.add('lighthouse-score__value--boolean');
-    }
+    DOM.setText(tmpl.querySelector('.lighthouse-score__title'), title);
+    DOM.setText(tmpl.querySelector('.lighthouse-score__description'), description);
 
-    tmpContainer.querySelector('.lighthouse-score__title').textContent = title;
-    tmpContainer.querySelector('.lighthouse-score__description').textContent = description;
+    return tmpl;
+  }
 
-    const header = tmpContainer.querySelector('.lighthouse-score__header');
-    header.open = score < 1;
-    if (isAudit && auditOrCategory.result.details) {
-      header.appendChild(this._renderDetails(auditOrCategory.result.details));
-    }
+  /**
+   * @param {!{value: string, precision: string}} score
+   * @param {!string} title
+   * @param {!string} description
+   * @return {!Element}
+   */
+  _renderAuditScore(score, title, description) {
+    const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-audit-score');
+    return this._populateScore(tmpl, score, title, description);
+  }
 
-    return tmpContainer.firstChild;
+  /**
+   * @param {!{value: string, precision: string}} score
+   * @param {!string} title
+   * @param {!string} description
+   * @return {!Element}
+   */
+  _renderCategoryScore(score, title, description) {
+    const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-category-score');
+    return this._populateScore(tmpl, score, title, description);
   }
 
   /**
@@ -162,7 +217,7 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderText(text) {
-    const element = this._createElement('div', 'lighthouse-text');
+    const element = this._dom.createElement('div', 'lighthouse-text');
     element.textContent = text.text;
     return element;
   }
@@ -172,7 +227,7 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderBlock(block) {
-    const element = this._createElement('div', 'lighthouse-block');
+    const element = this._dom.createElement('div', 'lighthouse-block');
     for (const item of block.items) {
       element.appendChild(this._renderDetails(item));
     }
@@ -184,14 +239,14 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderList(list) {
-    const element = this._createElement('details', 'lighthouse-list');
+    const element = this._dom.createElement('details', 'lighthouse-list');
     if (list.header) {
-      const summary = this._createElement('summary', 'lighthouse-list__header');
+      const summary = this._dom.createElement('summary', 'lighthouse-list__header');
       summary.textContent = list.header.text;
       element.appendChild(summary);
     }
 
-    const items = this._createElement('div', 'lighthouse-list__items');
+    const items = this._dom.createElement('div', 'lighthouse-list__items');
     for (const item of list.items) {
       items.appendChild(this._renderDetails(item));
     }
@@ -204,7 +259,7 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderException(e) {
-    const element = this._createElement('div', 'lighthouse-exception');
+    const element = this._dom.createElement('div', 'lighthouse-exception');
     element.textContent = String(e.stack);
     return element;
   }
@@ -214,7 +269,7 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderReport(report) {
-    const element = this._createElement('div', 'lighthouse-report');
+    const element = this._dom.createElement('div', 'lighthouse-report');
     for (const category of report.reportCategories) {
       element.appendChild(this._renderCategory(category));
     }
@@ -226,9 +281,11 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderCategory(category) {
-    const element = this._createElement('div', 'lighthouse-category');
+    const element = this._dom.createElement('div', 'lighthouse-category');
+    // TODO: use precision when it's on category.score.
+    const score = {value: Math.round(category.score), precision: 'numeric'};
     element.appendChild(
-        this._renderScore(category.score, category.name, category.description, category));
+        this._renderAuditScore(score, category.name, category.description, category));
     for (const audit of category.audits) {
       element.appendChild(this._renderAudit(audit));
     }
@@ -240,7 +297,7 @@ window.ReportRenderer = class ReportRenderer {
    * @return {!Element}
    */
   _renderAudit(audit) {
-    const element = this._createElement('div', 'lighthouse-audit');
+    const element = this._dom.createElement('div', 'lighthouse-audit');
     let title = audit.result.description;
     if (audit.result.displayValue) {
       title += `:  ${audit.result.displayValue}`;
@@ -249,13 +306,27 @@ window.ReportRenderer = class ReportRenderer {
       title += ` (target: ${audit.result.optimalValue})`;
     }
 
-    element.appendChild(
-        this._renderScore(audit.result.score, title, audit.result.helpText, audit));
+    // TODO: use precision when it's on audit.score.
+    const score = {value: audit.score, precision: 'numeric'};
+
+    element.appendChild(this._renderAuditScore(score, title, audit.result.helpText, audit));
+
+    // Append audit details to to header section so the entire audit is within one <details>.
+    const header = element.querySelector('.lighthouse-score__header');
+    if (header) {
+      header.open = audit.score < 100; // expand failed audits
+      if (audit.result.details) {
+        header.appendChild(this._renderDetails(audit.result.details));
+      }
+    }
 
     return element;
   }
-};
-})();
+}
+
+// Exports
+self.ReportRenderer = ReportRenderer;
+})(self);
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */
 let DetailsJSON; // eslint-disable-line no-unused-vars
diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css
index 8b3ff377fa22..2f93ac9bffbf 100644
--- a/lighthouse-core/report/v2/report-styles.css
+++ b/lighthouse-core/report/v2/report-styles.css
@@ -21,8 +21,8 @@
 
   --secondary-text-color: #565656;
   /*--accent-color: #3879d9;*/
-  --poor-color: #df332f;
-  --good-color: #2b882f;
+  --fail-color: #df332f;
+  --pass-color: #2b882f;
   --average-color: #ef6c00; /* md orange 800 */
   --warning-color: #757575; /* md grey 600 */
 
@@ -46,9 +46,14 @@ body {
   line-height: var(--body-line-height);
 }
 
+[hidden] {
+  display: none !important;
+}
+
 /* List */
 .lighthouse-list {
   font-size: smaller;
+  margin-top: var(--default-padding);
 }
 
 .lighthouse-list__header {
@@ -96,21 +101,21 @@ body {
   border-radius: inherit;
 }
 
-.lighthouse-score__value--boolean {
+.lighthouse-score__value--binary {
   text-indent: -500px;
 }
 
 /* No icon for audits with number scores. */
-.lighthouse-score__value:not(.lighthouse-score__value--boolean)::after {
+.lighthouse-score__value:not(.lighthouse-score__value--binary)::after {
   content: none;
 }
 
-.lighthouse-score__value--good {
-  background: var(--good-color);
+.lighthouse-score__value--pass {
+  background: var(--pass-color);
 }
 
-.lighthouse-score__value--good::after {
-  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>good</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
+.lighthouse-score__value--pass::after {
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>pass</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
   background-size: var(--lh-score-icon-background-size);
 }
 
@@ -130,23 +135,23 @@ body {
   font-size: 15px;
 }
 
-.lighthouse-score__value--poor {
-  background: var(--poor-color);
+.lighthouse-score__value--fail {
+  background: var(--fail-color);
 }
 
-.lighthouse-score__value--poor::after {
-  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
+.lighthouse-score__value--fail::after {
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>fail</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
   background-size: var(--lh-score-icon-background-size);
 }
 
 .lighthouse-score__title {
-  margin-bottom: 10px;
+  margin-bottom: calc(var(--default-padding) / 2);
 }
 
 .lighthouse-score__description {
   font-size: smaller;
   color: var(--secondary-text-color);
-  margin: var(--default-padding) 0;
+  margin-top: calc(var(--default-padding) / 2);
 }
 
 .lighthouse-score__header {
@@ -199,11 +204,6 @@ body {
   font-size: 16px;
 }
 
-.lighthouse-audit > *:not(.lighthouse-score) {
-  margin-left: 80px;
-  margin-top: 10px;
-}
-
 /* Report */
 
 .lighthouse-exception {
diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html
index fa9f96f20201..019c68ff6090 100644
--- a/lighthouse-core/report/v2/report-template.html
+++ b/lighthouse-core/report/v2/report-template.html
@@ -26,6 +26,7 @@
 </head>
 <body>
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
+  <div hidden>%%LIGHTHOUSE_TEMPLATES%%</div>
   <script>%%LIGHTHOUSE_JAVASCRIPT%%</script>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>
diff --git a/lighthouse-core/report/v2/templates.html b/lighthouse-core/report/v2/templates.html
new file mode 100644
index 000000000000..42b06c1ec9d2
--- /dev/null
+++ b/lighthouse-core/report/v2/templates.html
@@ -0,0 +1,27 @@
+<!-- Lighthouse category score -->
+<template id="tmpl-lighthouse-category-score">
+  <div class="lighthouse-score">
+    <div class="lighthouse-score__value"><!-- fill me --></div>
+    <div class="lighthouse-score__header">
+      <div class="lighthouse-score__snippet">
+        <span class="lighthouse-score__title"><!-- fill me --></span>
+        <div class="lighthouse-score__arrow" title="See audits"></div>
+      </div>
+      <div class="lighthouse-score__description"><!-- fill me --></div>
+    </div>
+  </div>
+</template>
+
+<!-- Lighthouse audit score -->
+<template id="tmpl-lighthouse-audit-score">
+  <div class="lighthouse-score">
+    <div class="lighthouse-score__value"><!-- fill me --></div>
+    <details class="lighthouse-score__header">
+      <summary class="lighthouse-score__snippet">
+        <span class="lighthouse-score__title"><!-- fill me --></span>
+        <div class="lighthouse-score__arrow" title="See audits"></div>
+      </summary>
+      <div class="lighthouse-score__description"><!-- fill me --></div>
+    </details>
+  </div>
+</template>

From 1d04b2610d3c97209f6a9943acddd3c25bf0b812 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Wed, 5 Apr 2017 15:30:59 -0700
Subject: [PATCH 03/10] Use scoreMode

---
 lighthouse-core/report/v2/report-renderer.js | 26 +++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index a147aba11005..ca8e789cf730 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -35,11 +35,11 @@ const RATINGS = {
 /**
  * Convert a score to a rating label.
  * @param {!number} score
- * @param {!string} precision One of 'binary', 'numeric', 'grade'.
+ * @param {!string} scoringMode One of Audit.SCORING_MODES.
  * @return {!string}
  */
-function calculateRating(score, precision) {
-  if (precision === 'numeric') {
+function calculateRating(score, scoringMode) {
+  if (scoringMode === 'numeric') {
     let rating = RATINGS.FAIL.label;
     if (score >= RATINGS.PASS.minScore) {
       rating = RATINGS.PASS.label;
@@ -47,8 +47,6 @@ function calculateRating(score, precision) {
       rating = RATINGS.AVERAGE.label;
     }
     return rating;
-  } else if (precision === 'grade') {
-    // Not implemented yet.
   }
 
   // Treat as binary by default.
@@ -153,19 +151,19 @@ class ReportRenderer {
 
   /**
    * @param {!Element} tmpl Parent node to populate with values.
-   * @param {!{value: string, precision: string}} score
+   * @param {!{value: string, scoringMode: string}} score
    * @param {!string} title
    * @param {!string} description
    * @return {!Element}
    */
   _populateScore(tmpl, score, title, description) {
-    const rating = calculateRating(score.value, score.precision);
+    const rating = calculateRating(score.value, score.scoringMode);
 
     // Fill in the blanks.
     const value = tmpl.querySelector('.lighthouse-score__value');
     DOM.setText(value, formatNumber(score.value));
     DOM.addClass(value, `lighthouse-score__value--${rating}`,
-                        `lighthouse-score__value--${score.precision}`);
+                        `lighthouse-score__value--${score.scoringMode}`);
 
     DOM.setText(tmpl.querySelector('.lighthouse-score__title'), title);
     DOM.setText(tmpl.querySelector('.lighthouse-score__description'), description);
@@ -174,7 +172,7 @@ class ReportRenderer {
   }
 
   /**
-   * @param {!{value: string, precision: string}} score
+   * @param {!{value: string, scoringMode: string}} score
    * @param {!string} title
    * @param {!string} description
    * @return {!Element}
@@ -185,7 +183,7 @@ class ReportRenderer {
   }
 
   /**
-   * @param {!{value: string, precision: string}} score
+   * @param {!{value: string, scoringMode: string}} score
    * @param {!string} title
    * @param {!string} description
    * @return {!Element}
@@ -282,8 +280,7 @@ class ReportRenderer {
    */
   _renderCategory(category) {
     const element = this._dom.createElement('div', 'lighthouse-category');
-    // TODO: use precision when it's on category.score.
-    const score = {value: Math.round(category.score), precision: 'numeric'};
+    const score = {value: Math.round(category.score), scoringMode: 'numeric'};
     element.appendChild(
         this._renderAuditScore(score, category.name, category.description, category));
     for (const audit of category.audits) {
@@ -306,9 +303,7 @@ class ReportRenderer {
       title += ` (target: ${audit.result.optimalValue})`;
     }
 
-    // TODO: use precision when it's on audit.score.
-    const score = {value: audit.score, precision: 'numeric'};
-
+    const score = {value: audit.score, scoringMode: audit.result.scoringMode};
     element.appendChild(this._renderAuditScore(score, title, audit.result.helpText, audit));
 
     // Append audit details to to header section so the entire audit is within one <details>.
@@ -326,6 +321,7 @@ class ReportRenderer {
 
 // Exports
 self.ReportRenderer = ReportRenderer;
+self.DOM = DOM;
 })(self);
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */

From 72598c9ecd32c70277a0d8d285c95f3f08c75bad Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Wed, 5 Apr 2017 18:01:54 -0700
Subject: [PATCH 04/10] Add tests and use correct renderScore method in
 renderCategory

---
 .gitignore                                    |    1 -
 docs/hacking-tips.md                          |   11 +-
 lighthouse-core/report/v2/report-renderer.js  |   16 +-
 lighthouse-core/report/v2/report-styles.css   |    5 +-
 lighthouse-core/report/v2/templates.html      |    1 -
 .../test/report/v2/report-renderer-test.js    |  174 +
 lighthouse-core/test/results/sample_v2.json   | 4619 +++++++++++++++++
 package.json                                  |    2 +-
 yarn.lock                                     |  203 +-
 9 files changed, 4968 insertions(+), 64 deletions(-)
 create mode 100644 lighthouse-core/test/report/v2/report-renderer-test.js
 create mode 100644 lighthouse-core/test/results/sample_v2.json

diff --git a/.gitignore b/.gitignore
index ffdc5e53691b..4f3d0b000a9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,6 @@ coverage
 
 lighthouse-cli/results
 lighthouse-cli/performance-experiment/experiment-database/experiment-data*
-results
 results.html
 last-run-results.html
 
diff --git a/docs/hacking-tips.md b/docs/hacking-tips.md
index 86bedf202f78..b3ffa8900a59 100644
--- a/docs/hacking-tips.md
+++ b/docs/hacking-tips.md
@@ -13,9 +13,18 @@ Use [`--trace-warnings`](https://medium.com/@jasnell/introducing-process-warning
 node --trace-warnings lighthouse-cli http://example.com
 ```
 
+## Updating fixture dumps
+
+`lighthouse-core/test/results/samples_v2.json` is generated from running LH against
+dbw_tester.html. To update this file:
+
+```sh
+npm run start -- --output=json --output-path=lighthouse-core/test/results/sample_v2.json http://localhost:8080/dobetterweb/dbw_tester.html
+```
+
 ## Iterating on the v2 report
 
-This'll generate new reports from the same results json.
+This will generate new reports from the same results json.
 
 ```sh
 # capture some results first:
diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index ca8e789cf730..ce57949d5fb8 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -109,9 +109,9 @@ class DOM {
     if (className) {
       element.className = className;
     }
-    for (const [key, val] of Object.entries(attrs)) {
-      element.setAttribute(key, val);
-    }
+    Object.keys(attrs).forEach(key => {
+      element.setAttribute(key, attrs[key]);
+    });
     return element;
   }
 
@@ -160,10 +160,10 @@ class ReportRenderer {
     const rating = calculateRating(score.value, score.scoringMode);
 
     // Fill in the blanks.
-    const value = tmpl.querySelector('.lighthouse-score__value');
-    DOM.setText(value, formatNumber(score.value));
-    DOM.addClass(value, `lighthouse-score__value--${rating}`,
-                        `lighthouse-score__value--${score.scoringMode}`);
+    const valueEl = tmpl.querySelector('.lighthouse-score__value');
+    DOM.setText(valueEl, formatNumber(score.value));
+    DOM.addClass(valueEl, `lighthouse-score__value--${rating}`,
+                          `lighthouse-score__value--${score.scoringMode}`);
 
     DOM.setText(tmpl.querySelector('.lighthouse-score__title'), title);
     DOM.setText(tmpl.querySelector('.lighthouse-score__description'), description);
@@ -282,7 +282,7 @@ class ReportRenderer {
     const element = this._dom.createElement('div', 'lighthouse-category');
     const score = {value: Math.round(category.score), scoringMode: 'numeric'};
     element.appendChild(
-        this._renderAuditScore(score, category.name, category.description, category));
+        this._renderCategoryScore(score, category.name, category.description, category));
     for (const audit of category.audits) {
       element.appendChild(this._renderAudit(audit));
     }
diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css
index 2f93ac9bffbf..2f28569ac3fe 100644
--- a/lighthouse-core/report/v2/report-styles.css
+++ b/lighthouse-core/report/v2/report-styles.css
@@ -236,10 +236,7 @@ body {
   width: var(--lh-category-score-width);
 }
 
-/* hide drop down arrow for categories and use correct pointer */
-.lighthouse-category > .lighthouse-score .lighthouse-score__arrow {
-  display: none;
-}
+/* Category snippet shouldnt have pointer cursor. */
 .lighthouse-category > .lighthouse-score .lighthouse-score__snippet {
   cursor: initial;
 }
diff --git a/lighthouse-core/report/v2/templates.html b/lighthouse-core/report/v2/templates.html
index 42b06c1ec9d2..08b29abac481 100644
--- a/lighthouse-core/report/v2/templates.html
+++ b/lighthouse-core/report/v2/templates.html
@@ -5,7 +5,6 @@
     <div class="lighthouse-score__header">
       <div class="lighthouse-score__snippet">
         <span class="lighthouse-score__title"><!-- fill me --></span>
-        <div class="lighthouse-score__arrow" title="See audits"></div>
       </div>
       <div class="lighthouse-score__description"><!-- fill me --></div>
     </div>
diff --git a/lighthouse-core/test/report/v2/report-renderer-test.js b/lighthouse-core/test/report/v2/report-renderer-test.js
new file mode 100644
index 000000000000..9d9578c75897
--- /dev/null
+++ b/lighthouse-core/test/report/v2/report-renderer-test.js
@@ -0,0 +1,174 @@
+/**
+ * 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';
+
+/* eslint-env mocha */
+/* global document self */
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const jsdom = require('jsdom');
+const sampleResults = require('../../results/sample_v2.json');
+
+require('../../../report/v2/report-renderer.js');
+
+const TEMPLATES_FILE = fs.readFileSync(
+    path.join(__dirname, '../../../report/v2/templates.html'), 'utf8');
+
+function setupJsDomGlobals() {
+  global.document = jsdom.jsdom(TEMPLATES_FILE);
+  global.window = global.document.defaultView;
+}
+
+function cleanupJsDomGlobals() {
+  global.document = undefined;
+  global.window = undefined;
+}
+
+describe('DOM', () => {
+  const window = self;
+  const DOM = window.DOM;
+
+  before(setupJsDomGlobals);
+  after(cleanupJsDomGlobals);
+
+  describe('setText', () => {
+    it('sets text of element', () => {
+      const el = document.createElement('div');
+      const result = DOM.setText(el, 'hello world');
+      assert.deepStrictEqual(result, el);
+      assert.equal(result.textContent, 'hello world');
+    });
+
+    it('does not fail when given null element argument', () => {
+      assert.doesNotThrow(() => {
+        const result = DOM.setText(null, 'hello world');
+        assert.strictEqual(result, null);
+      });
+    });
+  });
+
+  describe('addClass', () => {
+    it('adds classes to element', () => {
+      const el = document.createElement('div');
+      const result = DOM.addClass(el, 'class1', 'class2');
+      assert.ok(result.classList.contains, 'class1');
+      assert.ok(result.classList.contains, 'class2');
+    });
+
+    it('does not fail when given null element argument', () => {
+      assert.doesNotThrow(() => {
+        const result = DOM.addClass(null, 'class1');
+        assert.strictEqual(result, null);
+      });
+    });
+  });
+
+  describe('createElement', () => {
+    it('creates a simple element using default values', () => {
+      const dom = new DOM(document);
+      const el = dom.createElement('div');
+      assert.equal(el.localName, 'div');
+      assert.equal(el.className, '');
+      assert.equal(el.className, el.attributes.length);
+    });
+
+    it('creates an element from parameters', () => {
+      const dom = new DOM(document);
+      const el = dom.createElement('div', 'class1 class2', {title: 'title attr', tabindex: 0});
+      assert.equal(el.localName, 'div');
+      assert.equal(el.className, 'class1 class2');
+      assert.equal(el.getAttribute('title'), 'title attr');
+      assert.equal(el.getAttribute('tabindex'), '0');
+    });
+  });
+
+  describe('cloneTemplate', () => {
+    it('should clone a template', () => {
+      const dom = new DOM(document);
+      const clone = dom.cloneTemplate('#tmpl-lighthouse-audit-score');
+      assert.ok(clone.querySelector('.lighthouse-score'));
+    });
+
+    it('fails when template cannot be found', () => {
+      const dom = new DOM(document);
+      assert.throws(() => {
+        const clone = dom.cloneTemplate('#unknown-selector'); // eslint-disable-line no-unused-vars
+      });
+    });
+  });
+});
+
+describe('ReportRenderer V2', () => {
+  const window = self;
+
+  before(setupJsDomGlobals);
+  after(cleanupJsDomGlobals);
+
+  describe('renderReport', () => {
+    const ReportRenderer = window.ReportRenderer;
+
+    it('should render a report', () => {
+      const renderer = new ReportRenderer(document);
+      const output = renderer.renderReport(sampleResults);
+      assert.ok(output.classList.contains('lighthouse-report'));
+    });
+
+    it('should render an exception for invalid input', () => {
+      const renderer = new ReportRenderer(document);
+      const output = renderer.renderReport({});
+      assert.ok(output.classList.contains('lighthouse-exception'));
+    });
+
+    it('renders an audit', () => {
+      const renderer = new ReportRenderer(document);
+      const audit = sampleResults.reportCategories[0].audits[0];
+      const auditDOM = renderer._renderAudit(audit);
+
+      const title = auditDOM.querySelector('.lighthouse-score__title');
+      const description = auditDOM.querySelector('.lighthouse-score__description');
+      const score = auditDOM.querySelector('.lighthouse-score__value');
+
+      assert.equal(title.textContent, audit.result.description);
+      assert.equal(description.textContent, audit.result.helpText);
+      assert.equal(score.textContent, '0');
+      assert.ok(score.classList.contains('lighthouse-score__value--fail'));
+      assert.ok(score.classList.contains(`lighthouse-score__value--${audit.result.scoringMode}`));
+    });
+
+    it('renders a category', () => {
+      const renderer = new ReportRenderer(document);
+      const category = sampleResults.reportCategories[0];
+      const categoryDOM = renderer._renderCategory(category);
+
+      const score = categoryDOM.querySelector('.lighthouse-score');
+      const value = categoryDOM.querySelector('.lighthouse-score  > .lighthouse-score__value');
+      const title = score.querySelector('.lighthouse-score__title');
+      const description = score.querySelector('.lighthouse-score__description');
+
+      assert.deepEqual(score, score.firstElementChild, 'first child is a score');
+      assert.ok(value.classList.contains('lighthouse-score__value--numeric'),
+                'category score is numeric');
+      assert.equal(value.textContent, Math.round(category.score), 'category score is rounded');
+      assert.equal(title.textContent, category.name, 'title is set');
+      assert.equal(description.textContent, category.description, 'description is set');
+
+      const audits = categoryDOM.querySelectorAll('.lighthouse-category > .lighthouse-audit');
+      assert.equal(audits.length, category.audits.length, 'renders correct number of audits');
+    });
+  });
+});
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
new file mode 100644
index 000000000000..3d0b3aaa336d
--- /dev/null
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -0,0 +1,4619 @@
+{
+  "lighthouseVersion": "1.6.0",
+  "generatedTime": "2017-04-05T22:41:51.515Z",
+  "initialUrl": "http://localhost:8080/dobetterweb/dbw_tester.html",
+  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+  "audits": {
+    "is-on-https": {
+      "score": false,
+      "displayValue": "1 insecure request found",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "url": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "is-on-https",
+      "category": "Security",
+      "description": "Uses HTTPS",
+      "helpText": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/https).",
+      "details": {
+        "type": "list",
+        "header": {
+          "type": "text",
+          "text": "Insecure URLs:"
+        },
+        "items": [
+          {
+            "type": "text",
+            "text": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+          }
+        ]
+      }
+    },
+    "redirects-http": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "scoringMode": "binary",
+      "name": "redirects-http",
+      "category": "Security",
+      "description": "Redirects HTTP traffic to HTTPS",
+      "helpText": "If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-redirects-to-https)."
+    },
+    "service-worker": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "scoringMode": "binary",
+      "name": "service-worker",
+      "category": "Offline",
+      "description": "Registers a Service Worker",
+      "helpText": "The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/registered-service-worker)."
+    },
+    "works-offline": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "scoringMode": "binary",
+      "name": "works-offline",
+      "category": "Offline",
+      "description": "Responds with a 200 when offline",
+      "helpText": "If you're building a Progressive Web App, consider using a service worker so that your app can work offline. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline)."
+    },
+    "viewport": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "debugString": "",
+      "scoringMode": "binary",
+      "name": "viewport",
+      "category": "Mobile Friendly",
+      "description": "Has a `<meta name=\"viewport\">` tag with `width` or `initial-scale`",
+      "helpText": "Add a viewport meta tag to optimize your app for mobile screens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag)."
+    },
+    "without-javascript": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "scoringMode": "binary",
+      "name": "without-javascript",
+      "category": "JavaScript",
+      "description": "Contains some content when JavaScript is not available",
+      "helpText": "Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/no-js)."
+    },
+    "first-meaningful-paint": {
+      "score": 100,
+      "displayValue": "955.6ms",
+      "rawValue": 955.6,
+      "optimalValue": "1,600ms",
+      "extendedInfo": {
+        "value": {
+          "timestamps": {
+            "navStart": 192837877940,
+            "fCP": 192838833483,
+            "fMP": 192838833494
+          },
+          "timings": {
+            "navStart": 0,
+            "fCP": 955.543,
+            "fMP": 955.554
+          }
+        },
+        "formatter": "null"
+      },
+      "scoringMode": "numeric",
+      "name": "first-meaningful-paint",
+      "category": "Performance",
+      "description": "First meaningful paint",
+      "helpText": "First meaningful paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)."
+    },
+    "load-fast-enough-for-pwa": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "null",
+        "value": {
+          "areLatenciesAll3G": true,
+          "allRequestLatencies": [
+            154.35399999842087,
+            null,
+            155.06200000527298,
+            157.15600000112357,
+            163.36700000101737,
+            170.1830000092746,
+            176.98000001837474,
+            169.8599999945144,
+            170.991999999387,
+            163.502000010339,
+            151.945999998134,
+            175.6909999821799,
+            154.3179999862333,
+            153.25299999676622,
+            151.6889999911655
+          ],
+          "isFast": true,
+          "timeToInteractive": 1118.336
+        }
+      },
+      "scoringMode": "binary",
+      "name": "load-fast-enough-for-pwa",
+      "category": "PWA",
+      "description": "Page load is fast enough on 3G",
+      "helpText": "Satisfied if the _Time To Interactive_ duration is shorter than _10 seconds_, as defined by the [PWA Baseline Checklist](https://developers.google.com/web/progressive-web-apps/checklist). Network throttling is required (specifically: RTT latencies >= 150 RTT are expected)."
+    },
+    "speed-index-metric": {
+      "score": 99,
+      "displayValue": "974",
+      "rawValue": 974,
+      "optimalValue": "1,250",
+      "extendedInfo": {
+        "formatter": "speedline",
+        "value": {
+          "timings": {
+            "firstVisualChange": 974,
+            "visuallyComplete": 974,
+            "speedIndex": 974.1219999790192,
+            "perceptualSpeedIndex": 974.1219999790192
+          },
+          "timestamps": {
+            "firstVisualChange": 192838846154,
+            "visuallyComplete": 192838846154,
+            "speedIndex": 192838846276,
+            "perceptualSpeedIndex": 192838846276
+          },
+          "frames": [
+            {
+              "timestamp": 192837872.154,
+              "progress": 0
+            },
+            {
+              "timestamp": 192838846.276,
+              "progress": 99.99999999999999
+            },
+            {
+              "timestamp": 192838889.344,
+              "progress": 99.99999999999999
+            },
+            {
+              "timestamp": 192839073.243,
+              "progress": 99.99999999999999
+            }
+          ]
+        }
+      },
+      "scoringMode": "numeric",
+      "name": "speed-index-metric",
+      "category": "Performance",
+      "description": "Perceptual Speed Index",
+      "helpText": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index)."
+    },
+    "estimated-input-latency": {
+      "score": 100,
+      "displayValue": "16ms",
+      "rawValue": 16,
+      "optimalValue": "50ms",
+      "extendedInfo": {
+        "value": [
+          {
+            "percentile": 0.5,
+            "time": 16
+          },
+          {
+            "percentile": 0.75,
+            "time": 16
+          },
+          {
+            "percentile": 0.9,
+            "time": 16
+          },
+          {
+            "percentile": 0.99,
+            "time": 100.71772000008696
+          },
+          {
+            "percentile": 1,
+            "time": 159.878999999999
+          }
+        ],
+        "formatter": "null"
+      },
+      "scoringMode": "numeric",
+      "name": "estimated-input-latency",
+      "category": "Performance",
+      "description": "Estimated Input Latency",
+      "helpText": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency. If your score is higher than Lighthouse's target score, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency)."
+    },
+    "time-to-interactive": {
+      "score": 100,
+      "displayValue": "1118.3ms",
+      "rawValue": 1118.3,
+      "optimalValue": "5,000ms",
+      "extendedInfo": {
+        "value": {
+          "timings": {
+            "fMP": 955.554,
+            "visuallyReady": 968.336,
+            "timeToInteractive": 1118.336,
+            "timeToInteractiveB": 1105.5539999902248,
+            "timeToInteractiveC": 955.5539999902248,
+            "endOfTrace": 6865.895999997854
+          },
+          "timestamps": {
+            "fMP": 192838833494,
+            "visuallyReady": 192838846276,
+            "timeToInteractive": 192838996276,
+            "timeToInteractiveB": 192838983494,
+            "timeToInteractiveC": 192838833494,
+            "endOfTrace": 192844743836
+          },
+          "latencies": {
+            "timeToInteractive": [
+              {
+                "estLatency": 109.87899999999996,
+                "startTime": "968.3"
+              },
+              {
+                "estLatency": 109.87899999999996,
+                "startTime": "1018.3"
+              },
+              {
+                "estLatency": 82.62799998307224,
+                "startTime": "1068.3"
+              },
+              {
+                "estLatency": 32.62799998307224,
+                "startTime": "1118.3"
+              }
+            ],
+            "timeToInteractiveB": [
+              {
+                "estLatency": 109.87899999999996,
+                "startTime": "955.6"
+              },
+              {
+                "estLatency": 109.87899999999996,
+                "startTime": "1005.6"
+              },
+              {
+                "estLatency": 95.40999998831745,
+                "startTime": "1055.6"
+              },
+              {
+                "estLatency": 45.40999998831745,
+                "startTime": "1105.6"
+              }
+            ],
+            "timeToInteractiveC": [
+              {
+                "estLatency": 16,
+                "startTime": "955.6"
+              }
+            ]
+          },
+          "expectedLatencyAtTTI": 32.628
+        },
+        "formatter": "null"
+      },
+      "scoringMode": "numeric",
+      "name": "time-to-interactive",
+      "category": "Performance",
+      "description": "Time To Interactive (alpha)",
+      "helpText": "Time to Interactive identifies the time at which your app appears to be ready enough to interact with. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)."
+    },
+    "user-timings": {
+      "score": true,
+      "displayValue": "0",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "user-timings",
+        "value": []
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "user-timings",
+      "category": "Performance",
+      "description": "User Timing marks and measures",
+      "helpText": "Consider instrumenting your app with the User Timing API to create custom, real-world measurements of key user experiences. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing)."
+    },
+    "critical-request-chains": {
+      "score": false,
+      "displayValue": "12",
+      "rawValue": false,
+      "optimalValue": 0,
+      "extendedInfo": {
+        "formatter": "critical-request-chains",
+        "value": {
+          "chains": {
+            "63880.1": {
+              "request": {
+                "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                "startTime": 192837.880497,
+                "endTime": 192838.083213,
+                "responseReceivedTime": 192838.040445,
+                "transferSize": 10401
+              },
+              "children": {
+                "63880.3": {
+                  "request": {
+                    "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=100",
+                    "startTime": 192838.109187,
+                    "endTime": 192838.120654,
+                    "responseReceivedTime": -1,
+                    "transferSize": 0
+                  },
+                  "children": {}
+                },
+                "63880.2": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2000&async=true",
+                    "startTime": 192838.106304,
+                    "endTime": 192838.262348,
+                    "responseReceivedTime": 192838.261846,
+                    "transferSize": 984
+                  },
+                  "children": {}
+                },
+                "63880.4": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/unknown404.css?delay=200",
+                    "startTime": 192838.110022,
+                    "endTime": 192838.270392,
+                    "responseReceivedTime": 192838.268949,
+                    "transferSize": 133
+                  },
+                  "children": {}
+                },
+                "63880.5": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2200",
+                    "startTime": 192838.110848,
+                    "endTime": 192838.27654,
+                    "responseReceivedTime": 192838.276007,
+                    "transferSize": 984
+                  },
+                  "children": {}
+                },
+                "63880.6": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_disabled.css?delay=200",
+                    "startTime": 192838.111531,
+                    "endTime": 192838.283845,
+                    "responseReceivedTime": 192838.283433,
+                    "transferSize": 1273
+                  },
+                  "children": {}
+                },
+                "63880.7": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_partial_a.html?delay=200",
+                    "startTime": 192838.11218,
+                    "endTime": 192838.291128,
+                    "responseReceivedTime": 192838.29073,
+                    "transferSize": 920
+                  },
+                  "children": {}
+                },
+                "63880.8": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_partial_b.html?delay=200",
+                    "startTime": 192838.113003,
+                    "endTime": 192838.305212,
+                    "responseReceivedTime": 192838.304678,
+                    "transferSize": 917
+                  },
+                  "children": {}
+                },
+                "63880.10": {
+                  "request": {
+                    "url": "http://localhost:8080/zone.js",
+                    "startTime": 192838.114049,
+                    "endTime": 192838.442309,
+                    "responseReceivedTime": 192838.440616,
+                    "transferSize": 133
+                  },
+                  "children": {}
+                },
+                "63880.9": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                    "startTime": 192838.113495,
+                    "endTime": 192838.447924,
+                    "responseReceivedTime": 192838.426118,
+                    "transferSize": 1749
+                  },
+                  "children": {}
+                },
+                "63880.11": {
+                  "request": {
+                    "url": "http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js",
+                    "startTime": 192838.114548,
+                    "endTime": 192838.469705,
+                    "responseReceivedTime": 192838.297821,
+                    "transferSize": 30808
+                  },
+                  "children": {}
+                },
+                "63880.21": {
+                  "request": {
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+                    "startTime": 192838.486006,
+                    "endTime": 192838.641138,
+                    "responseReceivedTime": 192838.640742,
+                    "transferSize": 984
+                  },
+                  "children": {}
+                },
+                "63880.23": {
+                  "request": {
+                    "url": "http://localhost:8080/zone.js",
+                    "startTime": 192838.758833,
+                    "endTime": 192838.914029,
+                    "responseReceivedTime": 192838.912662,
+                    "transferSize": 133
+                  },
+                  "children": {}
+                }
+              }
+            }
+          },
+          "longestChain": {
+            "duration": 1033.532000001287,
+            "length": 2,
+            "transferSize": 133
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "critical-request-chains",
+      "category": "Performance",
+      "description": "Critical Request Chains",
+      "helpText": "The Critical Request Chains below show you what resources are required for first render of this page. Improve page load by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)."
+    },
+    "webapp-install-banner": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Failures: No manifest was fetched, Site registers a Service Worker.",
+      "extendedInfo": {
+        "value": {
+          "failures": [
+            "No manifest was fetched",
+            "Site registers a Service Worker"
+          ],
+          "manifestValues": {
+            "isParseFailure": true,
+            "parseFailureReason": "No manifest was fetched",
+            "allChecks": []
+          }
+        },
+        "formatter": "null"
+      },
+      "scoringMode": "binary",
+      "name": "webapp-install-banner",
+      "category": "PWA",
+      "description": "User can be prompted to Install the Web App",
+      "helpText": "While users can manually add your site to their homescreen, the [prompt (aka app install banner)](https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android) will proactively prompt the user to install the app if the various requirements are met and the user has moderate engagement with your site."
+    },
+    "splash-screen": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Failures: No manifest was fetched.",
+      "extendedInfo": {
+        "value": {
+          "failures": [
+            "No manifest was fetched"
+          ],
+          "manifestValues": {
+            "isParseFailure": true,
+            "parseFailureReason": "No manifest was fetched",
+            "allChecks": []
+          }
+        },
+        "formatter": "null"
+      },
+      "scoringMode": "binary",
+      "name": "splash-screen",
+      "category": "PWA",
+      "description": "Configured for a custom splash screen",
+      "helpText": "A default splash screen will be constructed for your app, but satisfying these requirements guarantee a high-quality [splash screen](https://developers.google.com/web/updates/2015/10/splashscreen) that transitions the user from tapping the home screen icon to your app's first paint"
+    },
+    "themed-omnibox": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Failures: No manifest was fetched, No `<meta name=\"theme-color\">` tag found.",
+      "extendedInfo": {
+        "value": {
+          "failures": [
+            "No manifest was fetched",
+            "No `<meta name=\"theme-color\">` tag found"
+          ],
+          "manifestValues": {
+            "isParseFailure": true,
+            "parseFailureReason": "No manifest was fetched",
+            "allChecks": []
+          },
+          "themeColor": null
+        },
+        "formatter": "null"
+      },
+      "scoringMode": "binary",
+      "name": "themed-omnibox",
+      "category": "PWA",
+      "description": "Address bar matches brand colors",
+      "helpText": "The browser address bar can be themed to match your site. A `theme-color` [meta tag](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) will upgrade the address bar when a user browses the site, and the [manifest theme-color](https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color) will apply the same theme site-wide once it's been added to homescreen."
+    },
+    "manifest-short-name-length": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "scoringMode": "binary",
+      "name": "manifest-short-name-length",
+      "category": "Manifest",
+      "description": "Manifest's `short_name` won't be truncated when displayed on homescreen",
+      "helpText": "Make your app's `short_name` less than 12 characters to ensure that it's not truncated on homescreens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated)."
+    },
+    "content-width": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "debugString": "",
+      "scoringMode": "binary",
+      "name": "content-width",
+      "category": "Mobile Friendly",
+      "description": "Content is sized correctly for the viewport",
+      "helpText": "If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport)."
+    },
+    "deprecations": {
+      "score": false,
+      "displayValue": "4 warnings found",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "label": "line: 45",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+            "code": "Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.",
+            "source": "deprecation",
+            "level": "warning",
+            "text": "Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.",
+            "timestamp": 1491432109913.31,
+            "lineNumber": 45,
+            "stackTrace": {
+              "callFrames": [
+                {
+                  "functionName": "",
+                  "scriptId": "88",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                  "lineNumber": 45,
+                  "columnNumber": 6
+                },
+                {
+                  "functionName": "",
+                  "scriptId": "88",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                  "lineNumber": 48,
+                  "columnNumber": 2
+                }
+              ]
+            }
+          },
+          {
+            "label": "line: 291",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "code": "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
+            "source": "deprecation",
+            "level": "warning",
+            "text": "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
+            "timestamp": 1491432109941.21,
+            "lineNumber": 291,
+            "stackTrace": {
+              "callFrames": [
+                {
+                  "functionName": "deprecationsTest",
+                  "scriptId": "90",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "lineNumber": 291,
+                  "columnNumber": 6
+                },
+                {
+                  "functionName": "",
+                  "scriptId": "90",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "lineNumber": 311,
+                  "columnNumber": 2
+                }
+              ]
+            }
+          },
+          {
+            "label": "line: 294",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "code": "'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.",
+            "source": "deprecation",
+            "level": "warning",
+            "text": "'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.",
+            "timestamp": 1491432109944.14,
+            "lineNumber": 294,
+            "stackTrace": {
+              "callFrames": [
+                {
+                  "functionName": "deprecationsTest",
+                  "scriptId": "90",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "lineNumber": 294,
+                  "columnNumber": 8
+                },
+                {
+                  "functionName": "",
+                  "scriptId": "90",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "lineNumber": 311,
+                  "columnNumber": 2
+                }
+              ]
+            }
+          },
+          {
+            "label": "line: ???",
+            "url": "Unable to determine URL",
+            "code": "/deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.",
+            "source": "deprecation",
+            "level": "warning",
+            "text": "/deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.",
+            "timestamp": 1491432109945.27
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "deprecations",
+      "category": "Deprecations",
+      "description": "Avoids deprecated APIs",
+      "helpText": "Deprecated APIs will eventually be removed from the browser. [Learn more](https://www.chromestatus.com/features#deprecated)."
+    },
+    "accesskeys": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "accesskeys",
+      "category": "Accessibility",
+      "description": "`[accesskey]` values are unique.",
+      "helpText": "`accesskey` attributes allow the user to quickly activate or focus part of the page.Using the same `accesskey` more than once could lead to a confusing experience."
+    },
+    "aria-allowed-attr": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-allowed-attr",
+      "category": "Accessibility",
+      "description": "`[aria-*]` attributes match their roles.",
+      "helpText": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/aria-allowed-attributes)."
+    },
+    "aria-required-attr": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-required-attr",
+      "category": "Accessibility",
+      "description": "`[role]`s have all required `[aria-*]` attributes.",
+      "helpText": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/required-aria-attributes)."
+    },
+    "aria-required-children": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-required-children",
+      "category": "Accessibility",
+      "description": "`[role]`s that require child `[role]`s contain them.",
+      "helpText": "Some ARIA parent roles require specific roles on their children to perform their accessibility function."
+    },
+    "aria-required-parent": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-required-parent",
+      "category": "Accessibility",
+      "description": "`[role]`s are contained by their required parent element.",
+      "helpText": "Some ARIA roles require specific roles on their parent element to perform their accessibility function."
+    },
+    "aria-roles": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-roles",
+      "category": "Accessibility",
+      "description": "`[role]` values are valid.",
+      "helpText": "ARIA roles require specific values to perform their accessibility function."
+    },
+    "aria-valid-attr-value": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-valid-attr-value",
+      "category": "Accessibility",
+      "description": "`[aria-*]` attributes have valid values.",
+      "helpText": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/valid-aria-values)."
+    },
+    "aria-valid-attr": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "aria-valid-attr",
+      "category": "Accessibility",
+      "description": "`[aria-*]` attributes are valid and not misspelled.",
+      "helpText": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/valid-aria-attributes)."
+    },
+    "audio-caption": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "audio-caption",
+      "category": "Accessibility",
+      "description": "`<audio>` elements contain a `<track>` element with `[kind=\"captions\"]`.",
+      "helpText": "Captions convey information such as identifying who is speaking, dialogue, and non-speech information. This can help deaf or hearing impaired users access meaningful content."
+    },
+    "button-name": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "button-name",
+      "category": "Accessibility",
+      "description": "Buttons have an accessible name.",
+      "helpText": "An accessible name helps convey the purpose of a button. Without one, a screen reader will only announce the word \"button\"."
+    },
+    "bypass": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "bypass",
+      "category": "Accessibility",
+      "description": "The page contains a heading, skip link, or landmark region.",
+      "helpText": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently."
+    },
+    "color-contrast": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "accessibility",
+        "value": {
+          "id": "color-contrast",
+          "impact": "critical",
+          "tags": [
+            "wcag2aa",
+            "wcag143"
+          ],
+          "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
+          "help": "Elements must have sufficient color contrast",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/2.1/color-contrast?application=axeAPI",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "fgColor": "#ffc0cb",
+                    "bgColor": "#eeeeee",
+                    "contrastRatio": "1.33",
+                    "fontSize": "18.0pt",
+                    "fontWeight": "bold"
+                  },
+                  "relatedNodes": [
+                    {
+                      "html": "<body>",
+                      "target": [
+                        "body"
+                      ]
+                    }
+                  ],
+                  "impact": "critical",
+                  "message": "Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold)"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "critical",
+              "html": "<h2>Do better web tester page</h2>",
+              "target": [
+                "body > div > h2"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold)"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "fgColor": "#ffc0cb",
+                    "bgColor": "#eeeeee",
+                    "contrastRatio": "1.33",
+                    "fontSize": "12.0pt",
+                    "fontWeight": "normal"
+                  },
+                  "relatedNodes": [
+                    {
+                      "html": "<body>",
+                      "target": [
+                        "body"
+                      ]
+                    }
+                  ],
+                  "impact": "critical",
+                  "message": "Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal)"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "critical",
+              "html": "<span>Hi there!</span>",
+              "target": [
+                "body > div > span"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal)"
+            }
+          ]
+        }
+      },
+      "scoringMode": "binary",
+      "name": "color-contrast",
+      "category": "Accessibility",
+      "description": "Background and foreground colors have a sufficient contrast ratio.",
+      "helpText": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/contrast-ratio)."
+    },
+    "definition-list": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "definition-list",
+      "category": "Accessibility",
+      "description": "`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or <template> elements.",
+      "helpText": "When definition lists are not properly marked up screen readers may produce confusing or inaccurate output."
+    },
+    "dlitem": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "dlitem",
+      "category": "Accessibility",
+      "description": "Definition list items are wrapped in `<dl>` elements.",
+      "helpText": "Definition list items (<dt> and/or <dd>) wrapped in parent <dl> elements enable screen readers to properly announce content."
+    },
+    "document-title": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "document-title",
+      "category": "Accessibility",
+      "description": "Document has a `<title>` element.",
+      "helpText": "Screen reader users use page titles to get an overview of the contents of the page."
+    },
+    "duplicate-id": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "duplicate-id",
+      "category": "Accessibility",
+      "description": "`[id]` attributes on the page are unique.",
+      "helpText": "Unique `id=\"\"` attributes help ensure assistive technologies do not overlook elements with the same id."
+    },
+    "frame-title": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "frame-title",
+      "category": "Accessibility",
+      "description": "`<frame>` or `<iframe>` elements have a title.",
+      "helpText": "Screen reader users rely on a frame title to describe the contents of the frame."
+    },
+    "html-has-lang": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "accessibility",
+        "value": {
+          "id": "html-has-lang",
+          "impact": "serious",
+          "tags": [
+            "wcag2a",
+            "wcag311"
+          ],
+          "description": "Ensures every HTML document has a lang attribute",
+          "help": "<html> element must have a lang attribute",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/2.1/html-has-lang?application=axeAPI",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "has-lang",
+                  "data": null,
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "The <html> element does not have a lang attribute"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<html manifest=\"clock.appcache\">",
+              "target": [
+                "html"
+              ],
+              "failureSummary": "Fix any of the following:\n  The <html> element does not have a lang attribute"
+            }
+          ]
+        }
+      },
+      "scoringMode": "binary",
+      "name": "html-has-lang",
+      "category": "Accessibility",
+      "description": "`<html>` element has a `[lang]` attribute.",
+      "helpText": "The `lang` attribute is useful for multilingual screen reader users who may prefer a language other than the default."
+    },
+    "html-lang-valid": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "html-lang-valid",
+      "category": "Accessibility",
+      "description": "`<html>` element has a valid value for its `[lang]` attribute.",
+      "helpText": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) helps screen readers announce text properly."
+    },
+    "image-alt": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "image-alt",
+      "category": "Accessibility",
+      "description": "Image elements have `[alt]` attributes.",
+      "helpText": "Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attributes, e.g. [alt=\"\"].[Learn more](https://developers.google.com/web/tools/lighthouse/audits/alt-attribute)."
+    },
+    "input-image-alt": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "input-image-alt",
+      "category": "Accessibility",
+      "description": "`<input type=\"image\">` elements have `[alt]` text.",
+      "helpText": "When an image is being used as an `<input>` button, providing alternative text can help screen reader users understand the purpose of the button."
+    },
+    "label": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "label",
+      "category": "Accessibility",
+      "description": "Form elements have associated labels.",
+      "helpText": "Labels ensure that form controls are announced properly by assistive technologies, like screen readers. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/form-labels)."
+    },
+    "layout-table": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "layout-table",
+      "category": "Accessibility",
+      "description": "Presentational `<table>` elements avoid using `<th>`, `<caption>` or the `[summary]` attribute.",
+      "helpText": "The presence of `<th>`, `<caption>` or the `summary` attribute on a presentational table may produce a confusing experince for a screen reader user as these elements usually indicates a data table."
+    },
+    "link-name": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "link-name",
+      "category": "Accessibility",
+      "description": "Links have a discernable name.",
+      "helpText": "Link text (and alternate text for images, when used as links) that is discernible, not duplicated, and focusable improves the navigating experience for screen reader users."
+    },
+    "list": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "list",
+      "category": "Accessibility",
+      "description": "Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).",
+      "helpText": "Screen readers have a specific way of announcing lists. Ensuring proper list structure aides screen reader output."
+    },
+    "listitem": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "listitem",
+      "category": "Accessibility",
+      "description": "List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements.",
+      "helpText": "Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly"
+    },
+    "meta-refresh": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "meta-refresh",
+      "category": "Accessibility",
+      "description": "The document does not use `<meta http-equiv=\"refresh\">`.",
+      "helpText": "Users do not expect a page to refresh automatically, and doing so will move focus back to the top of the page. This may create a frustrating or confusing experience"
+    },
+    "meta-viewport": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "meta-viewport",
+      "category": "Accessibility",
+      "description": "`[user-scalable=\"no\"]` is not used in the `<meta name=\"viewport\">` element and the `[maximum-scale]` attribute is not less than 5.",
+      "helpText": "Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page."
+    },
+    "object-alt": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "object-alt",
+      "category": "Accessibility",
+      "description": "`<object>` elements have `[alt]` text.",
+      "helpText": "Screen readers cannot translate non-text content. Adding alt text to `<object>` elements will help a screen reader convey the meaning to a user."
+    },
+    "tabindex": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "tabindex",
+      "category": "Accessibility",
+      "description": "No element has a `[tabindex]` value greater than 0.",
+      "helpText": "A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/tabindex)."
+    },
+    "td-headers-attr": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "td-headers-attr",
+      "category": "Accessibility",
+      "description": "Cells in a `<table>` element that use the `[headers]` attribute only refer to other cells of that same table.",
+      "helpText": "Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users."
+    },
+    "th-has-data-cells": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "th-has-data-cells",
+      "category": "Accessibility",
+      "description": "`<th>` elements and elements with `[role=\"columnheader\"/\"rowheader\"]` have data cells they describe.",
+      "helpText": "Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users."
+    },
+    "valid-lang": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "valid-lang",
+      "category": "Accessibility",
+      "description": "`[lang]` attributes have a valid value.",
+      "helpText": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) on elements helps ensure that text is pronounced correctly by a screen reader."
+    },
+    "video-caption": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "video-caption",
+      "category": "Accessibility",
+      "description": "`<video>` elements contain a `<track>` element with `[kind=\"captions\"]`.",
+      "helpText": "When a video provides a caption it is easier for deaf and hearing impaired users to access its information."
+    },
+    "video-description": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "accessibility"
+      },
+      "scoringMode": "binary",
+      "name": "video-description",
+      "category": "Accessibility",
+      "description": "`<video>` elements contain a `<track>` element with `[kind=\"description\"]`.",
+      "helpText": "Audio descriptions provide relevant information for videos that dialogue cannot, such as facial expressions and scenes."
+    },
+    "total-byte-weight": {
+      "score": 100,
+      "displayValue": "Total size was 60 KB",
+      "rawValue": 61436,
+      "optimalValue": "1,600 KB",
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "url": "…3.2.1/jquery.min.js",
+              "totalBytes": 30808,
+              "totalKb": "30 KB",
+              "totalMs": "140ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.html",
+              "totalBytes": 10401,
+              "totalKb": "10 KB",
+              "totalMs": "50ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.html",
+              "totalBytes": 10401,
+              "totalKb": "10 KB",
+              "totalMs": "50ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.js",
+              "totalBytes": 1749,
+              "totalKb": "2 KB",
+              "totalMs": "10ms"
+            },
+            {
+              "url": "/favicon.ico",
+              "totalBytes": 1616,
+              "totalKb": "2 KB",
+              "totalMs": "10ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_disabled.css?delay=200",
+              "totalBytes": 1273,
+              "totalKb": "1 KB",
+              "totalMs": "10ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.css?delay=2200",
+              "totalBytes": 984,
+              "totalKb": "1 KB",
+              "totalMs": "0ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.css?delay=2000&async=true",
+              "totalBytes": 984,
+              "totalKb": "1 KB",
+              "totalMs": "0ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+              "totalBytes": 984,
+              "totalKb": "1 KB",
+              "totalMs": "0ms"
+            },
+            {
+              "url": "/dobetterweb/dbw_partial_a.html?delay=200",
+              "totalBytes": 920,
+              "totalKb": "1 KB",
+              "totalMs": "0ms"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "totalKb": "Total Size",
+            "totalMs": "Transfer Time"
+          }
+        }
+      },
+      "scoringMode": "numeric",
+      "informative": true,
+      "name": "total-byte-weight",
+      "category": "Network",
+      "description": "Avoids enormous network payloads",
+      "helpText": "Network transfer size [costs users real dollars](https://whatdoesmysitecost.com/) and is [highly correlated](http://httparchive.org/interesting.php#onLoad) with long load times. Try to find ways to reduce the size of required files."
+    },
+    "offscreen-images": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [],
+          "tableHeadings": {
+            "preview": "",
+            "url": "URL",
+            "totalKb": "Original",
+            "potentialSavings": "Potential Savings"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "offscreen-images",
+      "category": "Images",
+      "description": "Offscreen images",
+      "helpText": "Images that are not above the fold should be lazily loaded after the page is interactive. Consider using the [IntersectionObserver](https://developers.google.com/web/updates/2016/04/intersectionobserver) API."
+    },
+    "uses-optimized-images": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [],
+          "tableHeadings": {
+            "preview": "",
+            "url": "URL",
+            "totalKb": "Original",
+            "webpSavings": "WebP Savings",
+            "jpegSavings": "JPEG Savings"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "uses-optimized-images",
+      "category": "Images",
+      "description": "Unoptimized images",
+      "helpText": "Images should be optimized to save network bytes. The following images could have smaller file sizes when compressed with [WebP](https://developers.google.com/speed/webp/) or JPEG at 80 quality. [Learn more about image optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)."
+    },
+    "uses-responsive-images": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [],
+          "tableHeadings": {
+            "preview": "",
+            "url": "URL",
+            "totalKb": "Original",
+            "potentialSavings": "Potential Savings"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "uses-responsive-images",
+      "category": "Images",
+      "description": "Oversized images",
+      "helpText": "Image sizes served should be based on the device display size to save network bytes. Learn more about [responsive images](https://developers.google.com/web/fundamentals/design-and-ui/media/images) and [client hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints)."
+    },
+    "appcache-manifest": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Found <html manifest=\"clock.appcache\">.",
+      "scoringMode": "binary",
+      "name": "appcache-manifest",
+      "category": "Offline",
+      "description": "Avoids Application Cache",
+      "helpText": "Application Cache has been [deprecated](https://html.spec.whatwg.org/multipage/browsers.html#offline) by [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers). Consider implementing an offline solution using the [Cache Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)."
+    },
+    "dom-size": {
+      "score": 100,
+      "displayValue": "34 nodes",
+      "rawValue": 34,
+      "optimalValue": "1,500 nodes",
+      "extendedInfo": {
+        "formatter": "cards",
+        "value": [
+          {
+            "title": "Total DOM Nodes",
+            "value": "34",
+            "target": "< 1,500 nodes"
+          },
+          {
+            "title": "DOM Depth",
+            "value": "4",
+            "snippet": "html >\n  body >\n    div >\n      h2",
+            "target": "< 32"
+          },
+          {
+            "title": "Maximum Children",
+            "value": "21",
+            "snippet": "Element with most children:\nhead",
+            "target": "< 60 nodes"
+          }
+        ]
+      },
+      "scoringMode": "numeric",
+      "name": "dom-size",
+      "category": "Performance",
+      "description": "Avoids an excessive DOM size",
+      "helpText": "Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/fundamentals/performance/rendering/)."
+    },
+    "external-anchors-use-rel-noopener": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Lighthouse was unable to determine the destination of some anchor tags. If they are not used as hyperlinks, consider removing the _blank target.",
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "url": "<a href=\"https://www.google.com/\" target=\"_blank\">"
+          },
+          {
+            "url": "<a target=\"_blank\">"
+          },
+          {
+            "url": "<a href=\"./doesnotexist\" target=\"_blank\">"
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "external-anchors-use-rel-noopener",
+      "category": "Performance",
+      "description": "Opens external anchors using `rel=\"noopener\"`",
+      "helpText": "Open new tabs using `rel=\"noopener\"` to improve performance and prevent security vulnerabilities. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/noopener)."
+    },
+    "geolocation-on-start": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "label": "line: 252, col: 25",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [
+              null
+            ],
+            "line": 252,
+            "col": 25,
+            "isEval": false,
+            "isExtension": false
+          },
+          {
+            "label": "line: 256, col: 41",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [
+              null
+            ],
+            "line": 256,
+            "col": 41,
+            "isEval": false,
+            "isExtension": false
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "geolocation-on-start",
+      "category": "UX",
+      "description": "Avoids requesting the geolocation permission on page load",
+      "helpText": "Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load)."
+    },
+    "link-blocking-first-paint": {
+      "score": true,
+      "displayValue": "",
+      "rawValue": true,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [],
+          "tableHeadings": {
+            "url": "URL",
+            "totalKb": "Size (KB)",
+            "totalMs": "Delayed Paint By (ms)"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "link-blocking-first-paint",
+      "category": "Performance",
+      "description": "Render-blocking stylesheets",
+      "helpText": "Link elements are blocking the first paint of your page. Consider inlining critical links and deferring non-critical ones. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)."
+    },
+    "no-console-time": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "args": [
+                "arg1"
+              ],
+              "line": 141,
+              "col": 11,
+              "isEval": false,
+              "isExtension": false
+            },
+            {
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "args": [
+                "arg2"
+              ],
+              "line": 144,
+              "col": 13,
+              "isEval": false,
+              "isExtension": false
+            },
+            {
+              "url": "consoleTimeTest (http://localhost:8080/dobetterweb/dbw_tester.html:149:3)",
+              "args": [
+                "arg3"
+              ],
+              "line": 1,
+              "col": 9,
+              "isEval": true,
+              "isExtension": false
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "lineCol": "Line/Col",
+            "isEval": "Eval'd?"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "no-console-time",
+      "category": "JavaScript",
+      "description": "Avoids `console.time()` in its own scripts",
+      "helpText": "Consider using `performance.mark()` and `performance.measure()` from the User Timing API instead. They provide high-precision timestamps, independent of the system clock, and are integrated in the Chrome DevTools Timeline. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/console-time)."
+    },
+    "no-datenow": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+              "args": [],
+              "line": 26,
+              "col": 18,
+              "isEval": false,
+              "isExtension": false
+            },
+            {
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "args": [],
+              "line": 131,
+              "col": 17,
+              "isEval": false,
+              "isExtension": false
+            },
+            {
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "args": [],
+              "line": 134,
+              "col": 18,
+              "isEval": false,
+              "isExtension": false
+            },
+            {
+              "url": "dateNowTest (http://localhost:8080/dobetterweb/dbw_tester.html:135:3)",
+              "args": [],
+              "line": 1,
+              "col": 6,
+              "isEval": true,
+              "isExtension": false
+            },
+            {
+              "url": "dateNowTest (http://localhost:8080/dobetterweb/dbw_tester.html:136:29)",
+              "args": [],
+              "line": 2,
+              "col": 6,
+              "isEval": true,
+              "isExtension": false
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "lineCol": "Line/Col",
+            "isEval": "Eval'd?"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "no-datenow",
+      "category": "JavaScript",
+      "description": "Avoids `Date.now()` in its own scripts",
+      "helpText": "Consider using `performance.now()` from the User Timing API instead. It provides high-precision timestamps, independent of the system clock. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/date-now)."
+    },
+    "no-document-write": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "label": "line: 153, col: 12",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [
+              "Hi"
+            ],
+            "line": 153,
+            "col": 12,
+            "isEval": false,
+            "isExtension": false
+          },
+          {
+            "label": "line: 154, col: 12",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [
+              "There"
+            ],
+            "line": 154,
+            "col": 12,
+            "isEval": false,
+            "isExtension": false
+          },
+          {
+            "label": "line: 155, col: 12",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [
+              "2.0!"
+            ],
+            "line": 155,
+            "col": 12,
+            "isEval": false,
+            "isExtension": false
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "no-document-write",
+      "category": "Performance",
+      "description": "Avoids `document.write()`",
+      "helpText": "For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/document-write)."
+    },
+    "no-mutation-events": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "line": 174,
+              "col": 61,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "DOMNodeInserted",
+              "pre": "body.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+              "label": "line: 174, col: 61"
+            },
+            {
+              "line": 180,
+              "col": 50,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "DOMNodeInserted",
+              "pre": "section#touchmove-section.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted on element');\n  })\n\n",
+              "label": "line: 180, col: 50"
+            },
+            {
+              "line": 31,
+              "col": 56,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+              "type": "DOMNodeInserted",
+              "pre": "document.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+              "label": "line: 31, col: 56"
+            },
+            {
+              "line": 164,
+              "col": 56,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "DOMNodeInserted",
+              "pre": "document.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+              "label": "line: 164, col: 56"
+            },
+            {
+              "line": 169,
+              "col": 55,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "DOMNodeRemoved",
+              "pre": "document.addEventListener('DOMNodeRemoved', function (e) {\n    console.log('DOMNodeRemoved');\n  })\n\n",
+              "label": "line: 169, col: 55"
+            },
+            {
+              "line": 185,
+              "col": 54,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "DOMNodeInserted",
+              "pre": "window.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+              "label": "line: 185, col: 54"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "lineCol": "Line/Col",
+            "type": "Event",
+            "code": "Snippet"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "no-mutation-events",
+      "category": "JavaScript",
+      "description": "Avoids Mutation Events in its own scripts",
+      "helpText": "Mutation Events are deprecated and harm performance. Consider using Mutation Observers instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/mutation-events)."
+    },
+    "no-old-flexbox": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "url": "inline",
+              "location": "4:17",
+              "startLine": 5,
+              "pre": "p,div {\n  display: box;\n}"
+            },
+            {
+              "url": "inline",
+              "location": "4:17",
+              "startLine": 10,
+              "pre": ".span {\n  display: box;\n}"
+            },
+            {
+              "url": "inline",
+              "location": "10:23",
+              "startLine": 14,
+              "pre": ".span2,.span3 {\n  display: box;\n}"
+            },
+            {
+              "url": "inline",
+              "location": "11:28",
+              "startLine": 18,
+              "pre": ".span4,.span5 {\n  display:     box;\n}"
+            },
+            {
+              "url": "/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+              "location": "2:19",
+              "startLine": 21,
+              "pre": ".doesnotapply {\n  display: flexbox;\n}"
+            },
+            {
+              "url": "inline",
+              "location": "4:24",
+              "startLine": 5,
+              "pre": ".failedselector {\n  -webkit-box-flex: 1;\n}"
+            },
+            {
+              "url": "inline",
+              "location": "4:16",
+              "startLine": 6,
+              "pre": ".failedselector {\n  box-flex: 1;\n}"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "startLine": "Line in the stylesheet / <style>",
+            "location": "Column start/end",
+            "pre": "Snippet"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "no-old-flexbox",
+      "category": "CSS",
+      "description": "Avoids old CSS flexbox",
+      "helpText": "The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox)."
+    },
+    "no-websql": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "debugString": "Found database \"mydb\", version: 1.0.",
+      "scoringMode": "binary",
+      "name": "no-websql",
+      "category": "Offline",
+      "description": "Avoids WebSQL DB",
+      "helpText": "Web SQL is deprecated. Consider using IndexedDB instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/web-sql)."
+    },
+    "notification-on-start": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "url-list",
+        "value": [
+          {
+            "label": "line: 262, col: 16",
+            "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+            "args": [],
+            "line": 262,
+            "col": 16,
+            "isEval": false,
+            "isExtension": false
+          }
+        ]
+      },
+      "scoringMode": "binary",
+      "name": "notification-on-start",
+      "category": "UX",
+      "description": "Avoids requesting the notification permission on page load",
+      "helpText": "Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/notifications-on-load)."
+    },
+    "script-blocking-first-paint": {
+      "score": false,
+      "displayValue": "1 resource delayed first paint by 10ms",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "url": "/dobetterweb/dbw_tester.js",
+              "totalKb": "2 KB",
+              "totalMs": "10ms"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "totalKb": "Size (KB)",
+            "totalMs": "Delayed Paint By (ms)"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "informative": true,
+      "name": "script-blocking-first-paint",
+      "category": "Performance",
+      "description": "Render-blocking scripts",
+      "helpText": "Script elements are blocking the first paint of your page. Consider inlining critical scripts and deferring non-critical ones. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)."
+    },
+    "uses-http2": {
+      "score": false,
+      "displayValue": "13 requests were not handled over h2",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2000&async=true"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/unknown404.css?delay=200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_disabled.css?delay=200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_partial_a.html?delay=200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_partial_b.html?delay=200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/zone.js"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.js"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.css?scriptActivated&delay=200"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/zone.js"
+            },
+            {
+              "protocol": "http/1.1",
+              "url": "http://localhost:8080/favicon.ico"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "protocol": "Protocol"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "uses-http2",
+      "category": "Performance",
+      "description": "Uses HTTP/2 for its own resources",
+      "helpText": "HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http2)."
+    },
+    "uses-passive-event-listeners": {
+      "score": false,
+      "displayValue": "",
+      "rawValue": false,
+      "extendedInfo": {
+        "formatter": "table",
+        "value": {
+          "results": [
+            {
+              "line": 223,
+              "col": 44,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "touchmove",
+              "pre": "section#touchmove-section.addEventListener('touchmove', function (e) {\n    console.log('touchmove');\n  })\n\n",
+              "label": "line: 223, col: 44"
+            },
+            {
+              "line": 38,
+              "col": 38,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+              "type": "wheel",
+              "pre": "document.addEventListener('wheel', e => {\n    console.log('wheel: arrow function');\n  })\n\n",
+              "label": "line: 38, col: 38"
+            },
+            {
+              "line": 197,
+              "col": 44,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "wheel",
+              "pre": "window.addEventListener('wheel', function (e) {\n    console.log('wheel');\n  })\n\n",
+              "label": "line: 197, col: 44"
+            },
+            {
+              "line": 207,
+              "col": 49,
+              "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+              "type": "mousewheel",
+              "pre": "window.addEventListener('mousewheel', function (e) {\n    console.log('mousewheel');\n  })\n\n",
+              "label": "line: 207, col: 49"
+            }
+          ],
+          "tableHeadings": {
+            "url": "URL",
+            "lineCol": "Line/Col",
+            "type": "Type",
+            "pre": "Snippet"
+          }
+        }
+      },
+      "scoringMode": "binary",
+      "name": "uses-passive-event-listeners",
+      "category": "JavaScript",
+      "description": "Uses passive listeners to improve scrolling performance",
+      "helpText": "Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners)."
+    }
+  },
+  "runtimeConfig": {
+    "environment": [
+      {
+        "name": "Device Emulation",
+        "enabled": true,
+        "description": "Nexus 5X"
+      },
+      {
+        "name": "Network Throttling",
+        "enabled": true,
+        "description": "150ms RTT, 1.6Mbps down, 0.7Mbps up"
+      },
+      {
+        "name": "CPU Throttling",
+        "enabled": true,
+        "description": "4.5x slowdown"
+      }
+    ],
+    "blockedUrlPatterns": []
+  },
+  "score": 36.36363636363637,
+  "reportCategories": [
+    {
+      "name": "Progressive Web App",
+      "weight": 1,
+      "description": "These audits validate the aspects of a Progressive Web App. They are a subset of the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).",
+      "audits": [
+        {
+          "id": "service-worker",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "scoringMode": "binary",
+            "name": "service-worker",
+            "category": "Offline",
+            "description": "Registers a Service Worker",
+            "helpText": "The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/registered-service-worker)."
+          },
+          "score": 0
+        },
+        {
+          "id": "works-offline",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "scoringMode": "binary",
+            "name": "works-offline",
+            "category": "Offline",
+            "description": "Responds with a 200 when offline",
+            "helpText": "If you're building a Progressive Web App, consider using a service worker so that your app can work offline. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline)."
+          },
+          "score": 0
+        },
+        {
+          "id": "without-javascript",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "scoringMode": "binary",
+            "name": "without-javascript",
+            "category": "JavaScript",
+            "description": "Contains some content when JavaScript is not available",
+            "helpText": "Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/no-js)."
+          },
+          "score": 100
+        },
+        {
+          "id": "is-on-https",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "1 insecure request found",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "url": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "is-on-https",
+            "category": "Security",
+            "description": "Uses HTTPS",
+            "helpText": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/https).",
+            "details": {
+              "type": "list",
+              "header": {
+                "type": "text",
+                "text": "Insecure URLs:"
+              },
+              "items": [
+                {
+                  "type": "text",
+                  "text": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+                }
+              ]
+            }
+          },
+          "score": 0
+        },
+        {
+          "id": "redirects-http",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "scoringMode": "binary",
+            "name": "redirects-http",
+            "category": "Security",
+            "description": "Redirects HTTP traffic to HTTPS",
+            "helpText": "If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-redirects-to-https)."
+          },
+          "score": 0
+        },
+        {
+          "id": "load-fast-enough-for-pwa",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "null",
+              "value": {
+                "areLatenciesAll3G": true,
+                "allRequestLatencies": [
+                  154.35399999842087,
+                  null,
+                  155.06200000527298,
+                  157.15600000112357,
+                  163.36700000101737,
+                  170.1830000092746,
+                  176.98000001837474,
+                  169.8599999945144,
+                  170.991999999387,
+                  163.502000010339,
+                  151.945999998134,
+                  175.6909999821799,
+                  154.3179999862333,
+                  153.25299999676622,
+                  151.6889999911655
+                ],
+                "isFast": true,
+                "timeToInteractive": 1118.336
+              }
+            },
+            "scoringMode": "binary",
+            "name": "load-fast-enough-for-pwa",
+            "category": "PWA",
+            "description": "Page load is fast enough on 3G",
+            "helpText": "Satisfied if the _Time To Interactive_ duration is shorter than _10 seconds_, as defined by the [PWA Baseline Checklist](https://developers.google.com/web/progressive-web-apps/checklist). Network throttling is required (specifically: RTT latencies >= 150 RTT are expected)."
+          },
+          "score": 100
+        },
+        {
+          "id": "webapp-install-banner",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Failures: No manifest was fetched, Site registers a Service Worker.",
+            "extendedInfo": {
+              "value": {
+                "failures": [
+                  "No manifest was fetched",
+                  "Site registers a Service Worker"
+                ],
+                "manifestValues": {
+                  "isParseFailure": true,
+                  "parseFailureReason": "No manifest was fetched",
+                  "allChecks": []
+                }
+              },
+              "formatter": "null"
+            },
+            "scoringMode": "binary",
+            "name": "webapp-install-banner",
+            "category": "PWA",
+            "description": "User can be prompted to Install the Web App",
+            "helpText": "While users can manually add your site to their homescreen, the [prompt (aka app install banner)](https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android) will proactively prompt the user to install the app if the various requirements are met and the user has moderate engagement with your site."
+          },
+          "score": 0
+        },
+        {
+          "id": "splash-screen",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Failures: No manifest was fetched.",
+            "extendedInfo": {
+              "value": {
+                "failures": [
+                  "No manifest was fetched"
+                ],
+                "manifestValues": {
+                  "isParseFailure": true,
+                  "parseFailureReason": "No manifest was fetched",
+                  "allChecks": []
+                }
+              },
+              "formatter": "null"
+            },
+            "scoringMode": "binary",
+            "name": "splash-screen",
+            "category": "PWA",
+            "description": "Configured for a custom splash screen",
+            "helpText": "A default splash screen will be constructed for your app, but satisfying these requirements guarantee a high-quality [splash screen](https://developers.google.com/web/updates/2015/10/splashscreen) that transitions the user from tapping the home screen icon to your app's first paint"
+          },
+          "score": 0
+        },
+        {
+          "id": "themed-omnibox",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Failures: No manifest was fetched, No `<meta name=\"theme-color\">` tag found.",
+            "extendedInfo": {
+              "value": {
+                "failures": [
+                  "No manifest was fetched",
+                  "No `<meta name=\"theme-color\">` tag found"
+                ],
+                "manifestValues": {
+                  "isParseFailure": true,
+                  "parseFailureReason": "No manifest was fetched",
+                  "allChecks": []
+                },
+                "themeColor": null
+              },
+              "formatter": "null"
+            },
+            "scoringMode": "binary",
+            "name": "themed-omnibox",
+            "category": "PWA",
+            "description": "Address bar matches brand colors",
+            "helpText": "The browser address bar can be themed to match your site. A `theme-color` [meta tag](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) will upgrade the address bar when a user browses the site, and the [manifest theme-color](https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color) will apply the same theme site-wide once it's been added to homescreen."
+          },
+          "score": 0
+        },
+        {
+          "id": "viewport",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "debugString": "",
+            "scoringMode": "binary",
+            "name": "viewport",
+            "category": "Mobile Friendly",
+            "description": "Has a `<meta name=\"viewport\">` tag with `width` or `initial-scale`",
+            "helpText": "Add a viewport meta tag to optimize your app for mobile screens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag)."
+          },
+          "score": 100
+        },
+        {
+          "id": "content-width",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "debugString": "",
+            "scoringMode": "binary",
+            "name": "content-width",
+            "category": "Mobile Friendly",
+            "description": "Content is sized correctly for the viewport",
+            "helpText": "If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport)."
+          },
+          "score": 100
+        }
+      ],
+      "score": 36.36363636363637
+    },
+    {
+      "name": "Performance",
+      "description": "These encapsulate your app's performance.",
+      "audits": [
+        {
+          "id": "first-meaningful-paint",
+          "weight": 5,
+          "result": {
+            "score": 100,
+            "displayValue": "955.6ms",
+            "rawValue": 955.6,
+            "optimalValue": "1,600ms",
+            "extendedInfo": {
+              "value": {
+                "timestamps": {
+                  "navStart": 192837877940,
+                  "fCP": 192838833483,
+                  "fMP": 192838833494
+                },
+                "timings": {
+                  "navStart": 0,
+                  "fCP": 955.543,
+                  "fMP": 955.554
+                }
+              },
+              "formatter": "null"
+            },
+            "scoringMode": "numeric",
+            "name": "first-meaningful-paint",
+            "category": "Performance",
+            "description": "First meaningful paint",
+            "helpText": "First meaningful paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)."
+          },
+          "score": 100
+        },
+        {
+          "id": "speed-index-metric",
+          "weight": 1,
+          "result": {
+            "score": 99,
+            "displayValue": "974",
+            "rawValue": 974,
+            "optimalValue": "1,250",
+            "extendedInfo": {
+              "formatter": "speedline",
+              "value": {
+                "timings": {
+                  "firstVisualChange": 974,
+                  "visuallyComplete": 974,
+                  "speedIndex": 974.1219999790192,
+                  "perceptualSpeedIndex": 974.1219999790192
+                },
+                "timestamps": {
+                  "firstVisualChange": 192838846154,
+                  "visuallyComplete": 192838846154,
+                  "speedIndex": 192838846276,
+                  "perceptualSpeedIndex": 192838846276
+                },
+                "frames": [
+                  {
+                    "timestamp": 192837872.154,
+                    "progress": 0
+                  },
+                  {
+                    "timestamp": 192838846.276,
+                    "progress": 99.99999999999999
+                  },
+                  {
+                    "timestamp": 192838889.344,
+                    "progress": 99.99999999999999
+                  },
+                  {
+                    "timestamp": 192839073.243,
+                    "progress": 99.99999999999999
+                  }
+                ]
+              }
+            },
+            "scoringMode": "numeric",
+            "name": "speed-index-metric",
+            "category": "Performance",
+            "description": "Perceptual Speed Index",
+            "helpText": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index)."
+          },
+          "score": 99
+        },
+        {
+          "id": "estimated-input-latency",
+          "weight": 1,
+          "result": {
+            "score": 100,
+            "displayValue": "16ms",
+            "rawValue": 16,
+            "optimalValue": "50ms",
+            "extendedInfo": {
+              "value": [
+                {
+                  "percentile": 0.5,
+                  "time": 16
+                },
+                {
+                  "percentile": 0.75,
+                  "time": 16
+                },
+                {
+                  "percentile": 0.9,
+                  "time": 16
+                },
+                {
+                  "percentile": 0.99,
+                  "time": 100.71772000008696
+                },
+                {
+                  "percentile": 1,
+                  "time": 159.878999999999
+                }
+              ],
+              "formatter": "null"
+            },
+            "scoringMode": "numeric",
+            "name": "estimated-input-latency",
+            "category": "Performance",
+            "description": "Estimated Input Latency",
+            "helpText": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency. If your score is higher than Lighthouse's target score, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency)."
+          },
+          "score": 100
+        },
+        {
+          "id": "time-to-interactive",
+          "weight": 5,
+          "result": {
+            "score": 100,
+            "displayValue": "1118.3ms",
+            "rawValue": 1118.3,
+            "optimalValue": "5,000ms",
+            "extendedInfo": {
+              "value": {
+                "timings": {
+                  "fMP": 955.554,
+                  "visuallyReady": 968.336,
+                  "timeToInteractive": 1118.336,
+                  "timeToInteractiveB": 1105.5539999902248,
+                  "timeToInteractiveC": 955.5539999902248,
+                  "endOfTrace": 6865.895999997854
+                },
+                "timestamps": {
+                  "fMP": 192838833494,
+                  "visuallyReady": 192838846276,
+                  "timeToInteractive": 192838996276,
+                  "timeToInteractiveB": 192838983494,
+                  "timeToInteractiveC": 192838833494,
+                  "endOfTrace": 192844743836
+                },
+                "latencies": {
+                  "timeToInteractive": [
+                    {
+                      "estLatency": 109.87899999999996,
+                      "startTime": "968.3"
+                    },
+                    {
+                      "estLatency": 109.87899999999996,
+                      "startTime": "1018.3"
+                    },
+                    {
+                      "estLatency": 82.62799998307224,
+                      "startTime": "1068.3"
+                    },
+                    {
+                      "estLatency": 32.62799998307224,
+                      "startTime": "1118.3"
+                    }
+                  ],
+                  "timeToInteractiveB": [
+                    {
+                      "estLatency": 109.87899999999996,
+                      "startTime": "955.6"
+                    },
+                    {
+                      "estLatency": 109.87899999999996,
+                      "startTime": "1005.6"
+                    },
+                    {
+                      "estLatency": 95.40999998831745,
+                      "startTime": "1055.6"
+                    },
+                    {
+                      "estLatency": 45.40999998831745,
+                      "startTime": "1105.6"
+                    }
+                  ],
+                  "timeToInteractiveC": [
+                    {
+                      "estLatency": 16,
+                      "startTime": "955.6"
+                    }
+                  ]
+                },
+                "expectedLatencyAtTTI": 32.628
+              },
+              "formatter": "null"
+            },
+            "scoringMode": "numeric",
+            "name": "time-to-interactive",
+            "category": "Performance",
+            "description": "Time To Interactive (alpha)",
+            "helpText": "Time to Interactive identifies the time at which your app appears to be ready enough to interact with. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)."
+          },
+          "score": 100
+        },
+        {
+          "id": "link-blocking-first-paint",
+          "weight": 0,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [],
+                "tableHeadings": {
+                  "url": "URL",
+                  "totalKb": "Size (KB)",
+                  "totalMs": "Delayed Paint By (ms)"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "link-blocking-first-paint",
+            "category": "Performance",
+            "description": "Render-blocking stylesheets",
+            "helpText": "Link elements are blocking the first paint of your page. Consider inlining critical links and deferring non-critical ones. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)."
+          },
+          "score": 100
+        },
+        {
+          "id": "script-blocking-first-paint",
+          "weight": 0,
+          "result": {
+            "score": false,
+            "displayValue": "1 resource delayed first paint by 10ms",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "url": "/dobetterweb/dbw_tester.js",
+                    "totalKb": "2 KB",
+                    "totalMs": "10ms"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "totalKb": "Size (KB)",
+                  "totalMs": "Delayed Paint By (ms)"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "script-blocking-first-paint",
+            "category": "Performance",
+            "description": "Render-blocking scripts",
+            "helpText": "Script elements are blocking the first paint of your page. Consider inlining critical scripts and deferring non-critical ones. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)."
+          },
+          "score": 0
+        },
+        {
+          "id": "uses-optimized-images",
+          "weight": 0,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [],
+                "tableHeadings": {
+                  "preview": "",
+                  "url": "URL",
+                  "totalKb": "Original",
+                  "webpSavings": "WebP Savings",
+                  "jpegSavings": "JPEG Savings"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "uses-optimized-images",
+            "category": "Images",
+            "description": "Unoptimized images",
+            "helpText": "Images should be optimized to save network bytes. The following images could have smaller file sizes when compressed with [WebP](https://developers.google.com/speed/webp/) or JPEG at 80 quality. [Learn more about image optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)."
+          },
+          "score": 100
+        },
+        {
+          "id": "uses-responsive-images",
+          "weight": 0,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [],
+                "tableHeadings": {
+                  "preview": "",
+                  "url": "URL",
+                  "totalKb": "Original",
+                  "potentialSavings": "Potential Savings"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "uses-responsive-images",
+            "category": "Images",
+            "description": "Oversized images",
+            "helpText": "Image sizes served should be based on the device display size to save network bytes. Learn more about [responsive images](https://developers.google.com/web/fundamentals/design-and-ui/media/images) and [client hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints)."
+          },
+          "score": 100
+        },
+        {
+          "id": "total-byte-weight",
+          "weight": 0,
+          "result": {
+            "score": 100,
+            "displayValue": "Total size was 60 KB",
+            "rawValue": 61436,
+            "optimalValue": "1,600 KB",
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "url": "…3.2.1/jquery.min.js",
+                    "totalBytes": 30808,
+                    "totalKb": "30 KB",
+                    "totalMs": "140ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.html",
+                    "totalBytes": 10401,
+                    "totalKb": "10 KB",
+                    "totalMs": "50ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.html",
+                    "totalBytes": 10401,
+                    "totalKb": "10 KB",
+                    "totalMs": "50ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.js",
+                    "totalBytes": 1749,
+                    "totalKb": "2 KB",
+                    "totalMs": "10ms"
+                  },
+                  {
+                    "url": "/favicon.ico",
+                    "totalBytes": 1616,
+                    "totalKb": "2 KB",
+                    "totalMs": "10ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_disabled.css?delay=200",
+                    "totalBytes": 1273,
+                    "totalKb": "1 KB",
+                    "totalMs": "10ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.css?delay=2200",
+                    "totalBytes": 984,
+                    "totalKb": "1 KB",
+                    "totalMs": "0ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.css?delay=2000&async=true",
+                    "totalBytes": 984,
+                    "totalKb": "1 KB",
+                    "totalMs": "0ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+                    "totalBytes": 984,
+                    "totalKb": "1 KB",
+                    "totalMs": "0ms"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_partial_a.html?delay=200",
+                    "totalBytes": 920,
+                    "totalKb": "1 KB",
+                    "totalMs": "0ms"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "totalKb": "Total Size",
+                  "totalMs": "Transfer Time"
+                }
+              }
+            },
+            "scoringMode": "numeric",
+            "informative": true,
+            "name": "total-byte-weight",
+            "category": "Network",
+            "description": "Avoids enormous network payloads",
+            "helpText": "Network transfer size [costs users real dollars](https://whatdoesmysitecost.com/) and is [highly correlated](http://httparchive.org/interesting.php#onLoad) with long load times. Try to find ways to reduce the size of required files."
+          },
+          "score": 100
+        },
+        {
+          "id": "dom-size",
+          "weight": 0,
+          "result": {
+            "score": 100,
+            "displayValue": "34 nodes",
+            "rawValue": 34,
+            "optimalValue": "1,500 nodes",
+            "extendedInfo": {
+              "formatter": "cards",
+              "value": [
+                {
+                  "title": "Total DOM Nodes",
+                  "value": "34",
+                  "target": "< 1,500 nodes"
+                },
+                {
+                  "title": "DOM Depth",
+                  "value": "4",
+                  "snippet": "html >\n  body >\n    div >\n      h2",
+                  "target": "< 32"
+                },
+                {
+                  "title": "Maximum Children",
+                  "value": "21",
+                  "snippet": "Element with most children:\nhead",
+                  "target": "< 60 nodes"
+                }
+              ]
+            },
+            "scoringMode": "numeric",
+            "name": "dom-size",
+            "category": "Performance",
+            "description": "Avoids an excessive DOM size",
+            "helpText": "Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/fundamentals/performance/rendering/)."
+          },
+          "score": 100
+        },
+        {
+          "id": "critical-request-chains",
+          "weight": 0,
+          "result": {
+            "score": false,
+            "displayValue": "12",
+            "rawValue": false,
+            "optimalValue": 0,
+            "extendedInfo": {
+              "formatter": "critical-request-chains",
+              "value": {
+                "chains": {
+                  "63880.1": {
+                    "request": {
+                      "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                      "startTime": 192837.880497,
+                      "endTime": 192838.083213,
+                      "responseReceivedTime": 192838.040445,
+                      "transferSize": 10401
+                    },
+                    "children": {
+                      "63880.3": {
+                        "request": {
+                          "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=100",
+                          "startTime": 192838.109187,
+                          "endTime": 192838.120654,
+                          "responseReceivedTime": -1,
+                          "transferSize": 0
+                        },
+                        "children": {}
+                      },
+                      "63880.2": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2000&async=true",
+                          "startTime": 192838.106304,
+                          "endTime": 192838.262348,
+                          "responseReceivedTime": 192838.261846,
+                          "transferSize": 984
+                        },
+                        "children": {}
+                      },
+                      "63880.4": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/unknown404.css?delay=200",
+                          "startTime": 192838.110022,
+                          "endTime": 192838.270392,
+                          "responseReceivedTime": 192838.268949,
+                          "transferSize": 133
+                        },
+                        "children": {}
+                      },
+                      "63880.5": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2200",
+                          "startTime": 192838.110848,
+                          "endTime": 192838.27654,
+                          "responseReceivedTime": 192838.276007,
+                          "transferSize": 984
+                        },
+                        "children": {}
+                      },
+                      "63880.6": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_disabled.css?delay=200",
+                          "startTime": 192838.111531,
+                          "endTime": 192838.283845,
+                          "responseReceivedTime": 192838.283433,
+                          "transferSize": 1273
+                        },
+                        "children": {}
+                      },
+                      "63880.7": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_partial_a.html?delay=200",
+                          "startTime": 192838.11218,
+                          "endTime": 192838.291128,
+                          "responseReceivedTime": 192838.29073,
+                          "transferSize": 920
+                        },
+                        "children": {}
+                      },
+                      "63880.8": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_partial_b.html?delay=200",
+                          "startTime": 192838.113003,
+                          "endTime": 192838.305212,
+                          "responseReceivedTime": 192838.304678,
+                          "transferSize": 917
+                        },
+                        "children": {}
+                      },
+                      "63880.10": {
+                        "request": {
+                          "url": "http://localhost:8080/zone.js",
+                          "startTime": 192838.114049,
+                          "endTime": 192838.442309,
+                          "responseReceivedTime": 192838.440616,
+                          "transferSize": 133
+                        },
+                        "children": {}
+                      },
+                      "63880.9": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                          "startTime": 192838.113495,
+                          "endTime": 192838.447924,
+                          "responseReceivedTime": 192838.426118,
+                          "transferSize": 1749
+                        },
+                        "children": {}
+                      },
+                      "63880.11": {
+                        "request": {
+                          "url": "http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js",
+                          "startTime": 192838.114548,
+                          "endTime": 192838.469705,
+                          "responseReceivedTime": 192838.297821,
+                          "transferSize": 30808
+                        },
+                        "children": {}
+                      },
+                      "63880.21": {
+                        "request": {
+                          "url": "http://localhost:8080/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+                          "startTime": 192838.486006,
+                          "endTime": 192838.641138,
+                          "responseReceivedTime": 192838.640742,
+                          "transferSize": 984
+                        },
+                        "children": {}
+                      },
+                      "63880.23": {
+                        "request": {
+                          "url": "http://localhost:8080/zone.js",
+                          "startTime": 192838.758833,
+                          "endTime": 192838.914029,
+                          "responseReceivedTime": 192838.912662,
+                          "transferSize": 133
+                        },
+                        "children": {}
+                      }
+                    }
+                  }
+                },
+                "longestChain": {
+                  "duration": 1033.532000001287,
+                  "length": 2,
+                  "transferSize": 133
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "critical-request-chains",
+            "category": "Performance",
+            "description": "Critical Request Chains",
+            "helpText": "The Critical Request Chains below show you what resources are required for first render of this page. Improve page load by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)."
+          },
+          "score": 0
+        },
+        {
+          "id": "user-timings",
+          "weight": 0,
+          "result": {
+            "score": true,
+            "displayValue": "0",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "user-timings",
+              "value": []
+            },
+            "scoringMode": "binary",
+            "informative": true,
+            "name": "user-timings",
+            "category": "Performance",
+            "description": "User Timing marks and measures",
+            "helpText": "Consider instrumenting your app with the User Timing API to create custom, real-world measurements of key user experiences. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing)."
+          },
+          "score": 100
+        }
+      ],
+      "score": 99.91666666666667
+    },
+    {
+      "name": "Accessibility",
+      "description": "These audits validate that your app [works for all users](https://developers.google.com/web/fundamentals/accessibility/).",
+      "audits": [
+        {
+          "id": "accesskeys",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "accesskeys",
+            "category": "Accessibility",
+            "description": "`[accesskey]` values are unique.",
+            "helpText": "`accesskey` attributes allow the user to quickly activate or focus part of the page.Using the same `accesskey` more than once could lead to a confusing experience."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-allowed-attr",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-allowed-attr",
+            "category": "Accessibility",
+            "description": "`[aria-*]` attributes match their roles.",
+            "helpText": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/aria-allowed-attributes)."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-required-attr",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-required-attr",
+            "category": "Accessibility",
+            "description": "`[role]`s have all required `[aria-*]` attributes.",
+            "helpText": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/required-aria-attributes)."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-required-children",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-required-children",
+            "category": "Accessibility",
+            "description": "`[role]`s that require child `[role]`s contain them.",
+            "helpText": "Some ARIA parent roles require specific roles on their children to perform their accessibility function."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-required-parent",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-required-parent",
+            "category": "Accessibility",
+            "description": "`[role]`s are contained by their required parent element.",
+            "helpText": "Some ARIA roles require specific roles on their parent element to perform their accessibility function."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-roles",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-roles",
+            "category": "Accessibility",
+            "description": "`[role]` values are valid.",
+            "helpText": "ARIA roles require specific values to perform their accessibility function."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-valid-attr-value",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-valid-attr-value",
+            "category": "Accessibility",
+            "description": "`[aria-*]` attributes have valid values.",
+            "helpText": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/valid-aria-values)."
+          },
+          "score": 100
+        },
+        {
+          "id": "aria-valid-attr",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "aria-valid-attr",
+            "category": "Accessibility",
+            "description": "`[aria-*]` attributes are valid and not misspelled.",
+            "helpText": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/valid-aria-attributes)."
+          },
+          "score": 100
+        },
+        {
+          "id": "audio-caption",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "audio-caption",
+            "category": "Accessibility",
+            "description": "`<audio>` elements contain a `<track>` element with `[kind=\"captions\"]`.",
+            "helpText": "Captions convey information such as identifying who is speaking, dialogue, and non-speech information. This can help deaf or hearing impaired users access meaningful content."
+          },
+          "score": 100
+        },
+        {
+          "id": "button-name",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "button-name",
+            "category": "Accessibility",
+            "description": "Buttons have an accessible name.",
+            "helpText": "An accessible name helps convey the purpose of a button. Without one, a screen reader will only announce the word \"button\"."
+          },
+          "score": 100
+        },
+        {
+          "id": "bypass",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "bypass",
+            "category": "Accessibility",
+            "description": "The page contains a heading, skip link, or landmark region.",
+            "helpText": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently."
+          },
+          "score": 100
+        },
+        {
+          "id": "color-contrast",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "accessibility",
+              "value": {
+                "id": "color-contrast",
+                "impact": "critical",
+                "tags": [
+                  "wcag2aa",
+                  "wcag143"
+                ],
+                "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
+                "help": "Elements must have sufficient color contrast",
+                "helpUrl": "https://dequeuniversity.com/rules/axe/2.1/color-contrast?application=axeAPI",
+                "nodes": [
+                  {
+                    "any": [
+                      {
+                        "id": "color-contrast",
+                        "data": {
+                          "fgColor": "#ffc0cb",
+                          "bgColor": "#eeeeee",
+                          "contrastRatio": "1.33",
+                          "fontSize": "18.0pt",
+                          "fontWeight": "bold"
+                        },
+                        "relatedNodes": [
+                          {
+                            "html": "<body>",
+                            "target": [
+                              "body"
+                            ]
+                          }
+                        ],
+                        "impact": "critical",
+                        "message": "Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold)"
+                      }
+                    ],
+                    "all": [],
+                    "none": [],
+                    "impact": "critical",
+                    "html": "<h2>Do better web tester page</h2>",
+                    "target": [
+                      "body > div > h2"
+                    ],
+                    "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold)"
+                  },
+                  {
+                    "any": [
+                      {
+                        "id": "color-contrast",
+                        "data": {
+                          "fgColor": "#ffc0cb",
+                          "bgColor": "#eeeeee",
+                          "contrastRatio": "1.33",
+                          "fontSize": "12.0pt",
+                          "fontWeight": "normal"
+                        },
+                        "relatedNodes": [
+                          {
+                            "html": "<body>",
+                            "target": [
+                              "body"
+                            ]
+                          }
+                        ],
+                        "impact": "critical",
+                        "message": "Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal)"
+                      }
+                    ],
+                    "all": [],
+                    "none": [],
+                    "impact": "critical",
+                    "html": "<span>Hi there!</span>",
+                    "target": [
+                      "body > div > span"
+                    ],
+                    "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.33 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal)"
+                  }
+                ]
+              }
+            },
+            "scoringMode": "binary",
+            "name": "color-contrast",
+            "category": "Accessibility",
+            "description": "Background and foreground colors have a sufficient contrast ratio.",
+            "helpText": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/contrast-ratio)."
+          },
+          "score": 0
+        },
+        {
+          "id": "definition-list",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "definition-list",
+            "category": "Accessibility",
+            "description": "`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or <template> elements.",
+            "helpText": "When definition lists are not properly marked up screen readers may produce confusing or inaccurate output."
+          },
+          "score": 100
+        },
+        {
+          "id": "dlitem",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "dlitem",
+            "category": "Accessibility",
+            "description": "Definition list items are wrapped in `<dl>` elements.",
+            "helpText": "Definition list items (<dt> and/or <dd>) wrapped in parent <dl> elements enable screen readers to properly announce content."
+          },
+          "score": 100
+        },
+        {
+          "id": "document-title",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "document-title",
+            "category": "Accessibility",
+            "description": "Document has a `<title>` element.",
+            "helpText": "Screen reader users use page titles to get an overview of the contents of the page."
+          },
+          "score": 100
+        },
+        {
+          "id": "duplicate-id",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "duplicate-id",
+            "category": "Accessibility",
+            "description": "`[id]` attributes on the page are unique.",
+            "helpText": "Unique `id=\"\"` attributes help ensure assistive technologies do not overlook elements with the same id."
+          },
+          "score": 100
+        },
+        {
+          "id": "frame-title",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "frame-title",
+            "category": "Accessibility",
+            "description": "`<frame>` or `<iframe>` elements have a title.",
+            "helpText": "Screen reader users rely on a frame title to describe the contents of the frame."
+          },
+          "score": 100
+        },
+        {
+          "id": "html-has-lang",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "accessibility",
+              "value": {
+                "id": "html-has-lang",
+                "impact": "serious",
+                "tags": [
+                  "wcag2a",
+                  "wcag311"
+                ],
+                "description": "Ensures every HTML document has a lang attribute",
+                "help": "<html> element must have a lang attribute",
+                "helpUrl": "https://dequeuniversity.com/rules/axe/2.1/html-has-lang?application=axeAPI",
+                "nodes": [
+                  {
+                    "any": [
+                      {
+                        "id": "has-lang",
+                        "data": null,
+                        "relatedNodes": [],
+                        "impact": "serious",
+                        "message": "The <html> element does not have a lang attribute"
+                      }
+                    ],
+                    "all": [],
+                    "none": [],
+                    "impact": "serious",
+                    "html": "<html manifest=\"clock.appcache\">",
+                    "target": [
+                      "html"
+                    ],
+                    "failureSummary": "Fix any of the following:\n  The <html> element does not have a lang attribute"
+                  }
+                ]
+              }
+            },
+            "scoringMode": "binary",
+            "name": "html-has-lang",
+            "category": "Accessibility",
+            "description": "`<html>` element has a `[lang]` attribute.",
+            "helpText": "The `lang` attribute is useful for multilingual screen reader users who may prefer a language other than the default."
+          },
+          "score": 0
+        },
+        {
+          "id": "html-lang-valid",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "html-lang-valid",
+            "category": "Accessibility",
+            "description": "`<html>` element has a valid value for its `[lang]` attribute.",
+            "helpText": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) helps screen readers announce text properly."
+          },
+          "score": 100
+        },
+        {
+          "id": "image-alt",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "image-alt",
+            "category": "Accessibility",
+            "description": "Image elements have `[alt]` attributes.",
+            "helpText": "Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attributes, e.g. [alt=\"\"].[Learn more](https://developers.google.com/web/tools/lighthouse/audits/alt-attribute)."
+          },
+          "score": 100
+        },
+        {
+          "id": "input-image-alt",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "input-image-alt",
+            "category": "Accessibility",
+            "description": "`<input type=\"image\">` elements have `[alt]` text.",
+            "helpText": "When an image is being used as an `<input>` button, providing alternative text can help screen reader users understand the purpose of the button."
+          },
+          "score": 100
+        },
+        {
+          "id": "label",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "label",
+            "category": "Accessibility",
+            "description": "Form elements have associated labels.",
+            "helpText": "Labels ensure that form controls are announced properly by assistive technologies, like screen readers. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/form-labels)."
+          },
+          "score": 100
+        },
+        {
+          "id": "layout-table",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "layout-table",
+            "category": "Accessibility",
+            "description": "Presentational `<table>` elements avoid using `<th>`, `<caption>` or the `[summary]` attribute.",
+            "helpText": "The presence of `<th>`, `<caption>` or the `summary` attribute on a presentational table may produce a confusing experince for a screen reader user as these elements usually indicates a data table."
+          },
+          "score": 100
+        },
+        {
+          "id": "link-name",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "link-name",
+            "category": "Accessibility",
+            "description": "Links have a discernable name.",
+            "helpText": "Link text (and alternate text for images, when used as links) that is discernible, not duplicated, and focusable improves the navigating experience for screen reader users."
+          },
+          "score": 100
+        },
+        {
+          "id": "list",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "list",
+            "category": "Accessibility",
+            "description": "Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).",
+            "helpText": "Screen readers have a specific way of announcing lists. Ensuring proper list structure aides screen reader output."
+          },
+          "score": 100
+        },
+        {
+          "id": "listitem",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "listitem",
+            "category": "Accessibility",
+            "description": "List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements.",
+            "helpText": "Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly"
+          },
+          "score": 100
+        },
+        {
+          "id": "meta-refresh",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "meta-refresh",
+            "category": "Accessibility",
+            "description": "The document does not use `<meta http-equiv=\"refresh\">`.",
+            "helpText": "Users do not expect a page to refresh automatically, and doing so will move focus back to the top of the page. This may create a frustrating or confusing experience"
+          },
+          "score": 100
+        },
+        {
+          "id": "meta-viewport",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "meta-viewport",
+            "category": "Accessibility",
+            "description": "`[user-scalable=\"no\"]` is not used in the `<meta name=\"viewport\">` element and the `[maximum-scale]` attribute is not less than 5.",
+            "helpText": "Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page."
+          },
+          "score": 100
+        },
+        {
+          "id": "object-alt",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "object-alt",
+            "category": "Accessibility",
+            "description": "`<object>` elements have `[alt]` text.",
+            "helpText": "Screen readers cannot translate non-text content. Adding alt text to `<object>` elements will help a screen reader convey the meaning to a user."
+          },
+          "score": 100
+        },
+        {
+          "id": "tabindex",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "tabindex",
+            "category": "Accessibility",
+            "description": "No element has a `[tabindex]` value greater than 0.",
+            "helpText": "A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/tabindex)."
+          },
+          "score": 100
+        },
+        {
+          "id": "td-headers-attr",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "td-headers-attr",
+            "category": "Accessibility",
+            "description": "Cells in a `<table>` element that use the `[headers]` attribute only refer to other cells of that same table.",
+            "helpText": "Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users."
+          },
+          "score": 100
+        },
+        {
+          "id": "th-has-data-cells",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "th-has-data-cells",
+            "category": "Accessibility",
+            "description": "`<th>` elements and elements with `[role=\"columnheader\"/\"rowheader\"]` have data cells they describe.",
+            "helpText": "Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users."
+          },
+          "score": 100
+        },
+        {
+          "id": "valid-lang",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "valid-lang",
+            "category": "Accessibility",
+            "description": "`[lang]` attributes have a valid value.",
+            "helpText": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) on elements helps ensure that text is pronounced correctly by a screen reader."
+          },
+          "score": 100
+        },
+        {
+          "id": "video-caption",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "video-caption",
+            "category": "Accessibility",
+            "description": "`<video>` elements contain a `<track>` element with `[kind=\"captions\"]`.",
+            "helpText": "When a video provides a caption it is easier for deaf and hearing impaired users to access its information."
+          },
+          "score": 100
+        },
+        {
+          "id": "video-description",
+          "weight": 1,
+          "result": {
+            "score": true,
+            "displayValue": "",
+            "rawValue": true,
+            "extendedInfo": {
+              "formatter": "accessibility"
+            },
+            "scoringMode": "binary",
+            "name": "video-description",
+            "category": "Accessibility",
+            "description": "`<video>` elements contain a `<track>` element with `[kind=\"description\"]`.",
+            "helpText": "Audio descriptions provide relevant information for videos that dialogue cannot, such as facial expressions and scenes."
+          },
+          "score": 100
+        }
+      ],
+      "score": 94.28571428571429
+    },
+    {
+      "name": "Best Practices",
+      "description": "We've compiled some recommendations for modernizing your web app and avoiding performance pitfalls. These audits do not affect your score but are worth a look.",
+      "audits": [
+        {
+          "id": "appcache-manifest",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Found <html manifest=\"clock.appcache\">.",
+            "scoringMode": "binary",
+            "name": "appcache-manifest",
+            "category": "Offline",
+            "description": "Avoids Application Cache",
+            "helpText": "Application Cache has been [deprecated](https://html.spec.whatwg.org/multipage/browsers.html#offline) by [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers). Consider implementing an offline solution using the [Cache Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)."
+          },
+          "score": 0
+        },
+        {
+          "id": "no-websql",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Found database \"mydb\", version: 1.0.",
+            "scoringMode": "binary",
+            "name": "no-websql",
+            "category": "Offline",
+            "description": "Avoids WebSQL DB",
+            "helpText": "Web SQL is deprecated. Consider using IndexedDB instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/web-sql)."
+          },
+          "score": 0
+        },
+        {
+          "id": "is-on-https",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "1 insecure request found",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "url": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "is-on-https",
+            "category": "Security",
+            "description": "Uses HTTPS",
+            "helpText": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/https).",
+            "details": {
+              "type": "list",
+              "header": {
+                "type": "text",
+                "text": "Insecure URLs:"
+              },
+              "items": [
+                {
+                  "type": "text",
+                  "text": "ajax.googleapis.com/…3.2.1/jquery.min.js"
+                }
+              ]
+            }
+          },
+          "score": 0
+        },
+        {
+          "id": "uses-http2",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "13 requests were not handled over h2",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2000&async=true"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/unknown404.css?delay=200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?delay=2200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_disabled.css?delay=200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_partial_a.html?delay=200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_partial_b.html?delay=200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/zone.js"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.js"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.css?scriptActivated&delay=200"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/zone.js"
+                  },
+                  {
+                    "protocol": "http/1.1",
+                    "url": "http://localhost:8080/favicon.ico"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "protocol": "Protocol"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "name": "uses-http2",
+            "category": "Performance",
+            "description": "Uses HTTP/2 for its own resources",
+            "helpText": "HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http2)."
+          },
+          "score": 0
+        },
+        {
+          "id": "no-old-flexbox",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "url": "inline",
+                    "location": "4:17",
+                    "startLine": 5,
+                    "pre": "p,div {\n  display: box;\n}"
+                  },
+                  {
+                    "url": "inline",
+                    "location": "4:17",
+                    "startLine": 10,
+                    "pre": ".span {\n  display: box;\n}"
+                  },
+                  {
+                    "url": "inline",
+                    "location": "10:23",
+                    "startLine": 14,
+                    "pre": ".span2,.span3 {\n  display: box;\n}"
+                  },
+                  {
+                    "url": "inline",
+                    "location": "11:28",
+                    "startLine": 18,
+                    "pre": ".span4,.span5 {\n  display:     box;\n}"
+                  },
+                  {
+                    "url": "/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+                    "location": "2:19",
+                    "startLine": 21,
+                    "pre": ".doesnotapply {\n  display: flexbox;\n}"
+                  },
+                  {
+                    "url": "inline",
+                    "location": "4:24",
+                    "startLine": 5,
+                    "pre": ".failedselector {\n  -webkit-box-flex: 1;\n}"
+                  },
+                  {
+                    "url": "inline",
+                    "location": "4:16",
+                    "startLine": 6,
+                    "pre": ".failedselector {\n  box-flex: 1;\n}"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "startLine": "Line in the stylesheet / <style>",
+                  "location": "Column start/end",
+                  "pre": "Snippet"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "name": "no-old-flexbox",
+            "category": "CSS",
+            "description": "Avoids old CSS flexbox",
+            "helpText": "The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox)."
+          },
+          "score": 0
+        },
+        {
+          "id": "uses-passive-event-listeners",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "line": 223,
+                    "col": 44,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "touchmove",
+                    "pre": "section#touchmove-section.addEventListener('touchmove', function (e) {\n    console.log('touchmove');\n  })\n\n",
+                    "label": "line: 223, col: 44"
+                  },
+                  {
+                    "line": 38,
+                    "col": 38,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                    "type": "wheel",
+                    "pre": "document.addEventListener('wheel', e => {\n    console.log('wheel: arrow function');\n  })\n\n",
+                    "label": "line: 38, col: 38"
+                  },
+                  {
+                    "line": 197,
+                    "col": 44,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "wheel",
+                    "pre": "window.addEventListener('wheel', function (e) {\n    console.log('wheel');\n  })\n\n",
+                    "label": "line: 197, col: 44"
+                  },
+                  {
+                    "line": 207,
+                    "col": 49,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "mousewheel",
+                    "pre": "window.addEventListener('mousewheel', function (e) {\n    console.log('mousewheel');\n  })\n\n",
+                    "label": "line: 207, col: 49"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "lineCol": "Line/Col",
+                  "type": "Type",
+                  "pre": "Snippet"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "name": "uses-passive-event-listeners",
+            "category": "JavaScript",
+            "description": "Uses passive listeners to improve scrolling performance",
+            "helpText": "Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners)."
+          },
+          "score": 0
+        },
+        {
+          "id": "no-mutation-events",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "table",
+              "value": {
+                "results": [
+                  {
+                    "line": 174,
+                    "col": 61,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "DOMNodeInserted",
+                    "pre": "body.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+                    "label": "line: 174, col: 61"
+                  },
+                  {
+                    "line": 180,
+                    "col": 50,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "DOMNodeInserted",
+                    "pre": "section#touchmove-section.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted on element');\n  })\n\n",
+                    "label": "line: 180, col: 50"
+                  },
+                  {
+                    "line": 31,
+                    "col": 56,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                    "type": "DOMNodeInserted",
+                    "pre": "document.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+                    "label": "line: 31, col: 56"
+                  },
+                  {
+                    "line": 164,
+                    "col": 56,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "DOMNodeInserted",
+                    "pre": "document.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+                    "label": "line: 164, col: 56"
+                  },
+                  {
+                    "line": 169,
+                    "col": 55,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "DOMNodeRemoved",
+                    "pre": "document.addEventListener('DOMNodeRemoved', function (e) {\n    console.log('DOMNodeRemoved');\n  })\n\n",
+                    "label": "line: 169, col: 55"
+                  },
+                  {
+                    "line": 185,
+                    "col": 54,
+                    "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                    "type": "DOMNodeInserted",
+                    "pre": "window.addEventListener('DOMNodeInserted', function (e) {\n    console.log('DOMNodeInserted');\n  })\n\n",
+                    "label": "line: 185, col: 54"
+                  }
+                ],
+                "tableHeadings": {
+                  "url": "URL",
+                  "lineCol": "Line/Col",
+                  "type": "Event",
+                  "code": "Snippet"
+                }
+              }
+            },
+            "scoringMode": "binary",
+            "name": "no-mutation-events",
+            "category": "JavaScript",
+            "description": "Avoids Mutation Events in its own scripts",
+            "helpText": "Mutation Events are deprecated and harm performance. Consider using Mutation Observers instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/mutation-events)."
+          },
+          "score": 0
+        },
+        {
+          "id": "no-document-write",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "label": "line: 153, col: 12",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [
+                    "Hi"
+                  ],
+                  "line": 153,
+                  "col": 12,
+                  "isEval": false,
+                  "isExtension": false
+                },
+                {
+                  "label": "line: 154, col: 12",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [
+                    "There"
+                  ],
+                  "line": 154,
+                  "col": 12,
+                  "isEval": false,
+                  "isExtension": false
+                },
+                {
+                  "label": "line: 155, col: 12",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [
+                    "2.0!"
+                  ],
+                  "line": 155,
+                  "col": 12,
+                  "isEval": false,
+                  "isExtension": false
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "no-document-write",
+            "category": "Performance",
+            "description": "Avoids `document.write()`",
+            "helpText": "For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/document-write)."
+          },
+          "score": 0
+        },
+        {
+          "id": "external-anchors-use-rel-noopener",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "debugString": "Lighthouse was unable to determine the destination of some anchor tags. If they are not used as hyperlinks, consider removing the _blank target.",
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "url": "<a href=\"https://www.google.com/\" target=\"_blank\">"
+                },
+                {
+                  "url": "<a target=\"_blank\">"
+                },
+                {
+                  "url": "<a href=\"./doesnotexist\" target=\"_blank\">"
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "external-anchors-use-rel-noopener",
+            "category": "Performance",
+            "description": "Opens external anchors using `rel=\"noopener\"`",
+            "helpText": "Open new tabs using `rel=\"noopener\"` to improve performance and prevent security vulnerabilities. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/noopener)."
+          },
+          "score": 0
+        },
+        {
+          "id": "geolocation-on-start",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "label": "line: 252, col: 25",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [
+                    null
+                  ],
+                  "line": 252,
+                  "col": 25,
+                  "isEval": false,
+                  "isExtension": false
+                },
+                {
+                  "label": "line: 256, col: 41",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [
+                    null
+                  ],
+                  "line": 256,
+                  "col": 41,
+                  "isEval": false,
+                  "isExtension": false
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "geolocation-on-start",
+            "category": "UX",
+            "description": "Avoids requesting the geolocation permission on page load",
+            "helpText": "Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load)."
+          },
+          "score": 0
+        },
+        {
+          "id": "notification-on-start",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "label": "line: 262, col: 16",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "args": [],
+                  "line": 262,
+                  "col": 16,
+                  "isEval": false,
+                  "isExtension": false
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "notification-on-start",
+            "category": "UX",
+            "description": "Avoids requesting the notification permission on page load",
+            "helpText": "Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/notifications-on-load)."
+          },
+          "score": 0
+        },
+        {
+          "id": "deprecations",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "4 warnings found",
+            "rawValue": false,
+            "extendedInfo": {
+              "formatter": "url-list",
+              "value": [
+                {
+                  "label": "line: 45",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                  "code": "Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.",
+                  "source": "deprecation",
+                  "level": "warning",
+                  "text": "Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.",
+                  "timestamp": 1491432109913.31,
+                  "lineNumber": 45,
+                  "stackTrace": {
+                    "callFrames": [
+                      {
+                        "functionName": "",
+                        "scriptId": "88",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                        "lineNumber": 45,
+                        "columnNumber": 6
+                      },
+                      {
+                        "functionName": "",
+                        "scriptId": "88",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.js",
+                        "lineNumber": 48,
+                        "columnNumber": 2
+                      }
+                    ]
+                  }
+                },
+                {
+                  "label": "line: 291",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "code": "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
+                  "source": "deprecation",
+                  "level": "warning",
+                  "text": "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
+                  "timestamp": 1491432109941.21,
+                  "lineNumber": 291,
+                  "stackTrace": {
+                    "callFrames": [
+                      {
+                        "functionName": "deprecationsTest",
+                        "scriptId": "90",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                        "lineNumber": 291,
+                        "columnNumber": 6
+                      },
+                      {
+                        "functionName": "",
+                        "scriptId": "90",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                        "lineNumber": 311,
+                        "columnNumber": 2
+                      }
+                    ]
+                  }
+                },
+                {
+                  "label": "line: 294",
+                  "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                  "code": "'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.",
+                  "source": "deprecation",
+                  "level": "warning",
+                  "text": "'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.",
+                  "timestamp": 1491432109944.14,
+                  "lineNumber": 294,
+                  "stackTrace": {
+                    "callFrames": [
+                      {
+                        "functionName": "deprecationsTest",
+                        "scriptId": "90",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                        "lineNumber": 294,
+                        "columnNumber": 8
+                      },
+                      {
+                        "functionName": "",
+                        "scriptId": "90",
+                        "url": "http://localhost:8080/dobetterweb/dbw_tester.html",
+                        "lineNumber": 311,
+                        "columnNumber": 2
+                      }
+                    ]
+                  }
+                },
+                {
+                  "label": "line: ???",
+                  "url": "Unable to determine URL",
+                  "code": "/deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.",
+                  "source": "deprecation",
+                  "level": "warning",
+                  "text": "/deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.",
+                  "timestamp": 1491432109945.27
+                }
+              ]
+            },
+            "scoringMode": "binary",
+            "name": "deprecations",
+            "category": "Deprecations",
+            "description": "Avoids deprecated APIs",
+            "helpText": "Deprecated APIs will eventually be removed from the browser. [Learn more](https://www.chromestatus.com/features#deprecated)."
+          },
+          "score": 0
+        },
+        {
+          "id": "manifest-short-name-length",
+          "weight": 1,
+          "result": {
+            "score": false,
+            "displayValue": "",
+            "rawValue": false,
+            "scoringMode": "binary",
+            "name": "manifest-short-name-length",
+            "category": "Manifest",
+            "description": "Manifest's `short_name` won't be truncated when displayed on homescreen",
+            "helpText": "Make your app's `short_name` less than 12 characters to ensure that it's not truncated on homescreens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated)."
+          },
+          "score": 0
+        }
+      ],
+      "score": 0
+    }
+  ],
+  "aggregations": [
+    {
+      "name": "Progressive Web App",
+      "description": "These audits validate the aspects of a Progressive Web App. They are a subset of the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).",
+      "scored": true,
+      "total": 0.37475,
+      "categorizable": true,
+      "score": [
+        {
+          "overall": 0,
+          "name": "App can load on offline/flaky connections",
+          "description": "Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through use of a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-worker/).",
+          "subItems": [
+            "service-worker",
+            "works-offline"
+          ]
+        },
+        {
+          "overall": 0.998,
+          "name": "Page load performance is fast",
+          "description": "Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.",
+          "subItems": [
+            "load-fast-enough-for-pwa",
+            "first-meaningful-paint",
+            "speed-index-metric",
+            "estimated-input-latency",
+            "time-to-interactive"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Site is progressively enhanced",
+          "description": "Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.",
+          "subItems": [
+            "without-javascript"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Network connection is secure",
+          "description": "Security is an important part of the web for both developers and users. Moving forward, Transport Layer Security (TLS) support will be required for many APIs.",
+          "subItems": [
+            "is-on-https",
+            "redirects-http"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "User can be prompted to Add to Homescreen",
+          "subItems": [
+            "webapp-install-banner"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Installed web app will launch with custom splash screen",
+          "subItems": [
+            "splash-screen"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Address bar matches brand colors",
+          "subItems": [
+            "themed-omnibox"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Design is mobile-friendly",
+          "description": "Users increasingly experience your app on mobile devices, so it's important to ensure that the experience can adapt to smaller screens.",
+          "subItems": [
+            "viewport",
+            "content-width"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Best Practices",
+      "description": "We've compiled some recommendations for modernizing your web app and avoiding performance pitfalls. These audits do not affect your score but are worth a look.",
+      "scored": false,
+      "total": null,
+      "categorizable": true,
+      "score": [
+        {
+          "overall": 0,
+          "name": "Using modern offline features",
+          "subItems": [
+            "appcache-manifest",
+            "no-websql"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Using modern protocols",
+          "subItems": [
+            "is-on-https",
+            "uses-http2"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Using modern CSS features",
+          "subItems": [
+            "no-old-flexbox"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Using modern JavaScript features",
+          "subItems": [
+            "uses-passive-event-listeners",
+            "no-mutation-events"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Avoiding APIs that harm the user experience",
+          "subItems": [
+            "no-document-write",
+            "external-anchors-use-rel-noopener",
+            "geolocation-on-start",
+            "notification-on-start"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Avoiding deprecated APIs and browser interventions",
+          "subItems": [
+            "deprecations"
+          ]
+        },
+        {
+          "overall": 0,
+          "name": "Other",
+          "subItems": [
+            "manifest-short-name-length"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Accessibility",
+      "description": "These checks highlight opportunities to improve the accessibility of your app.",
+      "scored": false,
+      "total": null,
+      "categorizable": true,
+      "score": [
+        {
+          "overall": 0,
+          "name": "Color contrast of elements is satisfactory",
+          "subItems": [
+            "color-contrast"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Elements are well structured",
+          "subItems": [
+            "definition-list",
+            "dlitem",
+            "duplicate-id",
+            "list",
+            "listitem"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Elements avoid incorrect use of attributes",
+          "subItems": [
+            "accesskeys",
+            "audio-caption",
+            "image-alt",
+            "input-image-alt",
+            "tabindex",
+            "td-headers-attr",
+            "th-has-data-cells"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Elements applying ARIA follow correct practices",
+          "subItems": [
+            "aria-allowed-attr",
+            "aria-required-attr",
+            "aria-required-children",
+            "aria-required-parent",
+            "aria-roles",
+            "aria-valid-attr-value",
+            "aria-valid-attr"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Elements describe their contents well",
+          "subItems": [
+            "document-title",
+            "frame-title",
+            "label",
+            "layout-table",
+            "object-alt",
+            "video-caption",
+            "video-description"
+          ]
+        },
+        {
+          "overall": 0.6666666666666666,
+          "name": "The page's language is specified and valid",
+          "subItems": [
+            "html-has-lang",
+            "html-lang-valid",
+            "valid-lang"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "The document does not use <meta http-equiv=\"refresh\">",
+          "subItems": [
+            "meta-refresh"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "The <meta name=\"viewport\"> element follows best practices",
+          "subItems": [
+            "meta-viewport"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Links and buttons have discernable names",
+          "subItems": [
+            "button-name",
+            "link-name"
+          ]
+        },
+        {
+          "overall": 1,
+          "name": "Repetitive content can be bypassed",
+          "subItems": [
+            "bypass"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Performance",
+      "description": "These encapsulate your app's performance.",
+      "scored": false,
+      "total": null,
+      "categorizable": false,
+      "score": [
+        {
+          "overall": 0.7777777777777778,
+          "subItems": [
+            "total-byte-weight",
+            "dom-size",
+            "uses-optimized-images",
+            "uses-responsive-images",
+            "offscreen-images",
+            "link-blocking-first-paint",
+            "script-blocking-first-paint",
+            "critical-request-chains",
+            "user-timings"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Fancier stuff",
+      "description": "A list of newer features that you could be using in your app. These audits do not affect your score and are just suggestions.",
+      "scored": false,
+      "additional": true,
+      "total": null,
+      "categorizable": true,
+      "score": [
+        {
+          "overall": 0,
+          "name": "New JavaScript features",
+          "subItems": [
+            "no-datenow",
+            "no-console-time"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index b1da826b1721..d3412a3b31a3 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "gulp-replace": "^0.5.4",
     "gulp-util": "^3.0.7",
     "istanbul": "^0.4.3",
-    "jsdom": "^9.0.0",
+    "jsdom": "^9.12.0",
     "mocha": "^3.2.0",
     "zone.js": "^0.7.3"
   },
diff --git a/yarn.lock b/yarn.lock
index ee0da5f13298..36b3ebbecc77 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6,7 +6,7 @@
   version "6.0.46"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.46.tgz#8d9e48572831f05b11cc4c793754d43437219d62"
 
-abab@^1.0.0:
+abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
 
@@ -14,11 +14,11 @@ abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
-acorn-globals@^1.0.4:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
   dependencies:
-    acorn "^2.1.0"
+    acorn "^4.0.4"
 
 acorn-jsx@^3.0.0:
   version "3.0.1"
@@ -26,10 +26,6 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
-acorn@^2.1.0, acorn@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
-
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -38,6 +34,10 @@ acorn@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.3.tgz#1a3e850b428e73ba6b09d1cc527f5aaad4d03ef1"
 
+acorn@^4.0.4:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
+
 ajv-keywords@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.1.1.tgz#02550bc605a3e576041565628af972e06c549d50"
@@ -49,6 +49,13 @@ ajv@^4.7.0:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^4.9.1:
+  version "4.11.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -399,6 +406,10 @@ caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
 
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
 center-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
@@ -541,6 +552,10 @@ configstore@^3.0.0:
     write-file-atomic "^1.1.2"
     xdg-basedir "^3.0.0"
 
+content-type-parser@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.1.tgz#c3e56988c53c65127fb46d4032a3a900246fdc94"
+
 convert-source-map@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
@@ -586,11 +601,11 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
-cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.1.tgz#c9e37ef2490e64f6d1baa10fda852257082c25d3"
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
 
-"cssstyle@>= 0.2.36 < 0.3.0":
+"cssstyle@>= 0.2.37 < 0.3.0":
   version "0.2.37"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
   dependencies:
@@ -1048,6 +1063,14 @@ form-data@~2.0.0:
     combined-stream "^1.0.5"
     mime-types "^2.1.11"
 
+form-data@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
 fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
@@ -1380,6 +1403,10 @@ handlebars@^3.0.0:
   optionalDependencies:
     uglify-js "~2.3"
 
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
 har-validator@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
@@ -1389,6 +1416,13 @@ har-validator@~2.0.6:
     is-my-json-valid "^2.12.4"
     pinkie-promise "^2.0.0"
 
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -1429,6 +1463,12 @@ hosted-git-info@^2.1.4:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
 
+html-encoding-sniffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
@@ -1437,7 +1477,7 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-iconv-lite@^0.4.13:
+iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
@@ -1745,27 +1785,29 @@ jsbn@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
 
-jsdom@^9.0.0:
-  version "9.6.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.6.0.tgz#e0e9b15ba07e90b1d9ec083f9bedee0f6800a4fb"
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
   dependencies:
-    abab "^1.0.0"
-    acorn "^2.4.0"
-    acorn-globals "^1.0.4"
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
     array-equal "^1.0.0"
-    cssom ">= 0.3.0 < 0.4.0"
-    cssstyle ">= 0.2.36 < 0.3.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
     escodegen "^1.6.1"
-    iconv-lite "^0.4.13"
-    nwmatcher ">= 1.3.7 < 2.0.0"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
     parse5 "^1.5.1"
-    request "^2.55.0"
-    sax "^1.1.4"
-    symbol-tree ">= 3.1.0 < 4.0.0"
-    tough-cookie "^2.3.1"
-    webidl-conversions "^3.0.1"
-    whatwg-url "^3.0.0"
-    xml-name-validator ">= 2.0.1 < 3.0.0"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
 
 jsesc@^1.3.0:
   version "1.3.0"
@@ -2097,7 +2139,7 @@ mime-db@~1.24.0:
   version "1.24.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
 
-mime-types@^2.1.11, mime-types@~2.1.7:
+mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.7:
   version "2.1.12"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
   dependencies:
@@ -2217,9 +2259,9 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-"nwmatcher@>= 1.3.7 < 2.0.0":
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.8.tgz#34edb93de1aa6cb4448b573c9f2a059300241157"
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
 
 oauth-sign@~0.8.1:
   version "0.8.2"
@@ -2404,6 +2446,10 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -2454,10 +2500,18 @@ pseudomap@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
 qs@~6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
 
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
 randomatic@^1.1.3:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
@@ -2614,7 +2668,7 @@ replacestream@^4.0.0:
     object-assign "^4.0.1"
     readable-stream "^2.0.2"
 
-request@2.75.0, request@^2.55.0:
+request@2.75.0:
   version "2.75.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
   dependencies:
@@ -2640,6 +2694,33 @@ request@2.75.0, request@^2.55.0:
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
 
+request@^2.79.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
 require-uncached@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.2.tgz#67dad3b733089e77030124678a459589faf6a7ec"
@@ -2693,9 +2774,9 @@ safe-buffer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
-sax@^1.1.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+sax@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
 semver-diff@^2.0.0:
   version "2.1.0"
@@ -2906,9 +2987,9 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-"symbol-tree@>= 3.1.0 < 4.0.0":
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.1.4.tgz#02b279348d337debc39694c5c95f882d448a312a"
+symbol-tree@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
 table@^3.7.8:
   version "3.8.0"
@@ -2978,7 +3059,13 @@ to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
 
-tough-cookie@^2.3.1, tough-cookie@~2.3.0:
+tough-cookie@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+tough-cookie@~2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.1.tgz#99c77dfbb7d804249e8a299d4cb0fd81fef083fd"
 
@@ -2994,6 +3081,12 @@ tryit@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.2.tgz#c196b0073e6b1c595d93c9c830855b7acc32a453"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
 tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
@@ -3088,6 +3181,10 @@ util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
 v8flags@^2.0.2:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
@@ -3169,10 +3266,20 @@ vinyl@^2.0.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-webidl-conversions@^3.0.0, webidl-conversions@^3.0.1:
+webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
 
+webidl-conversions@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
+
+whatwg-encoding@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  dependencies:
+    iconv-lite "0.4.13"
+
 whatwg-url@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.0.0.tgz#5be362f0b6e2f8760f7260df6e0e1df536f5479c"
@@ -3180,9 +3287,9 @@ whatwg-url@4.0.0:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
 
-whatwg-url@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-3.0.0.tgz#b9033c50c7ce763e91d78777ce825a6d7f56dac5"
+whatwg-url@^4.3.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
@@ -3254,7 +3361,7 @@ xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
-"xml-name-validator@>= 2.0.1 < 3.0.0":
+xml-name-validator@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
 

From 0550aec70a61bc9043cbf94aaced7edc9e341200 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Wed, 5 Apr 2017 18:22:03 -0700
Subject: [PATCH 05/10] Turn travis green. Node doesnt have "self" defined

---
 lighthouse-core/report/v2/report-renderer.js           | 2 +-
 lighthouse-core/test/report/v2/report-renderer-test.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index ce57949d5fb8..bcf3cc6ee55f 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -25,7 +25,7 @@
 /* eslint-env browser */
 /* eslint indent: [2, 2, { "SwitchCase": 1, "outerIIFEBody": 0 }] */
 
-(function() {
+(function(self) {
 const RATINGS = {
   PASS: {label: 'pass', minScore: 75},
   AVERAGE: {label: 'average', minScore: 45},
diff --git a/lighthouse-core/test/report/v2/report-renderer-test.js b/lighthouse-core/test/report/v2/report-renderer-test.js
index 9d9578c75897..bf8e2240817e 100644
--- a/lighthouse-core/test/report/v2/report-renderer-test.js
+++ b/lighthouse-core/test/report/v2/report-renderer-test.js
@@ -24,21 +24,24 @@ const path = require('path');
 const jsdom = require('jsdom');
 const sampleResults = require('../../results/sample_v2.json');
 
-require('../../../report/v2/report-renderer.js');
-
 const TEMPLATES_FILE = fs.readFileSync(
     path.join(__dirname, '../../../report/v2/templates.html'), 'utf8');
 
 function setupJsDomGlobals() {
   global.document = jsdom.jsdom(TEMPLATES_FILE);
   global.window = global.document.defaultView;
+  global.self = global.window;
 }
 
 function cleanupJsDomGlobals() {
   global.document = undefined;
   global.window = undefined;
+  global.self = undefined;
 }
 
+setupJsDomGlobals(); // Run jsdom setup code before report renderer is executed.
+require('../../../report/v2/report-renderer.js');
+
 describe('DOM', () => {
   const window = self;
   const DOM = window.DOM;

From ed21330b25ffcdd478d231e9556e207701bf2073 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Thu, 6 Apr 2017 11:05:37 -0700
Subject: [PATCH 06/10] Feedback

---
 docs/hacking-tips.md                          |   4 +-
 lighthouse-core/report/v2/report-generator.js |   9 +-
 lighthouse-core/report/v2/report-renderer.js  | 113 ++++++++----------
 .../test/report/v2/report-renderer-test.js    |  16 +--
 4 files changed, 67 insertions(+), 75 deletions(-)

diff --git a/docs/hacking-tips.md b/docs/hacking-tips.md
index b3ffa8900a59..f01cef1aafcc 100644
--- a/docs/hacking-tips.md
+++ b/docs/hacking-tips.md
@@ -16,12 +16,14 @@ node --trace-warnings lighthouse-cli http://example.com
 ## Updating fixture dumps
 
 `lighthouse-core/test/results/samples_v2.json` is generated from running LH against
-dbw_tester.html. To update this file:
+dbw_tester.html. To update this file, run:
 
 ```sh
 npm run start -- --output=json --output-path=lighthouse-core/test/results/sample_v2.json http://localhost:8080/dobetterweb/dbw_tester.html
 ```
 
+After updating, consider deleting any irrelevant changes from the diff (exact timings, timestamps, etc). Be sure to run the tests.
+
 ## Iterating on the v2 report
 
 This will generate new reports from the same results json.
diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js
index c2cf27bb354e..5e04779b4aca 100644
--- a/lighthouse-core/report/v2/report-generator.js
+++ b/lighthouse-core/report/v2/report-generator.js
@@ -17,13 +17,12 @@
 'use strict';
 
 const fs = require('fs');
-const path = require('path');
 
-const REPORT_TEMPLATE = fs.readFileSync(path.join(__dirname, './report-template.html'), 'utf8');
+const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/report-template.html', 'utf8');
 // TODO: Setup a gulp pipeline to concat and minify the renderer files?
-const REPORT_JAVASCRIPT = fs.readFileSync(path.join(__dirname, './report-renderer.js'), 'utf8');
-const REPORT_CSS = fs.readFileSync(path.join(__dirname, './report-styles.css'), 'utf8');
-const REPORT_TEMPLATES = fs.readFileSync(path.join(__dirname, './templates.html'), 'utf8');
+const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/report-renderer.js', 'utf8');
+const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8');
+const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/templates.html', 'utf8');
 
 class ReportGeneratorV2 {
   /**
diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index bcf3cc6ee55f..09af2d779c61 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -34,29 +34,23 @@ const RATINGS = {
 
 /**
  * Convert a score to a rating label.
- * @param {!number} score
- * @param {!string} scoringMode One of Audit.SCORING_MODES.
- * @return {!string}
+ * @param {number} score
+ * @return {string}
  */
-function calculateRating(score, scoringMode) {
-  if (scoringMode === 'numeric') {
-    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;
+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;
   }
-
-  // Treat as binary by default.
-  return score === 100 ? RATINGS.PASS.label : RATINGS.FAIL.label;
+  return rating;
 }
 
 /**
  * Format number.
- * @param {!number} number
- * @return {!string}
+ * @param {number} number
+ * @return {string}
  */
 function formatNumber(number) {
   return number.toLocaleString(undefined, {maximumFractionDigits: 1});
@@ -71,10 +65,10 @@ class DOM {
   }
 
   /**
-   * Sets the text content of an element, safely. If the element does not exist,
+   * Sets the text content of an element. If the element does not exist,
    * results in a noop.
    * @param {Element} element
-   * @param {!string} text
+   * @param {string} text
    * @return {Element}
    */
   static setText(element, text) {
@@ -85,15 +79,15 @@ class DOM {
   }
 
   /**
-   * Adds a class to an element, safely. If the element does not exist, results
+   * Adds a class to an element. If the element does not exist, results
    * in a noop.
    * @param {Element} element
-   * @param {...!string} classes
+   * @param {...string} classNames
    * @return {Element}
    */
-  static addClass(element, ...classes) {
+  static addClass(element, ...classNames) {
     if (element) {
-      element.classList.add(...classes);
+      element.classList.add(...classNames);
     }
     return element;
   }
@@ -116,7 +110,7 @@ class DOM {
   }
 
   /**
-   * @param {!string} selector
+   * @param {string} selector
    * @return {!DocumentFragment} A clone of the template content.
    * @throws {Error}
    */
@@ -150,47 +144,55 @@ class ReportRenderer {
   }
 
   /**
-   * @param {!Element} tmpl Parent node to populate with values.
-   * @param {!{value: string, scoringMode: string}} score
-   * @param {!string} title
-   * @param {!string} description
+   * @param {!Element} element DOM node to populate with values.
+   * @param {number} score
+   * @param {string} scoringMode
+   * @param {string} title
+   * @param {string} description
    * @return {!Element}
    */
-  _populateScore(tmpl, score, title, description) {
-    const rating = calculateRating(score.value, score.scoringMode);
-
+  _populateResult(element, score, scoringMode, title, description) {
     // Fill in the blanks.
-    const valueEl = tmpl.querySelector('.lighthouse-score__value');
-    DOM.setText(valueEl, formatNumber(score.value));
-    DOM.addClass(valueEl, `lighthouse-score__value--${rating}`,
-                          `lighthouse-score__value--${score.scoringMode}`);
+    const valueEl = element.querySelector('.lighthouse-score__value');
+    DOM.setText(valueEl, formatNumber(score));
+    DOM.addClass(valueEl, `lighthouse-score__value--${calculateRating(score)}`,
+        `lighthouse-score__value--${scoringMode}`);
 
-    DOM.setText(tmpl.querySelector('.lighthouse-score__title'), title);
-    DOM.setText(tmpl.querySelector('.lighthouse-score__description'), description);
+    DOM.setText(element.querySelector('.lighthouse-score__title'), title);
+    DOM.setText(element.querySelector('.lighthouse-score__description'), description);
 
-    return tmpl;
+    return element;
   }
 
   /**
-   * @param {!{value: string, scoringMode: string}} score
-   * @param {!string} title
-   * @param {!string} description
+   * @param {!AuditJSON} audit
    * @return {!Element}
    */
-  _renderAuditScore(score, title, description) {
+  _renderAuditScore(audit) {
     const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-audit-score');
-    return this._populateScore(tmpl, score, title, description);
+
+    const scoringMode = audit.result.scoringMode;
+    const description = audit.result.helpText;
+    let title = audit.result.description;
+
+    if (audit.result.displayValue) {
+      title += `:  ${audit.result.displayValue}`;
+    }
+    if (audit.result.optimalValue) {
+      title += ` (target: ${audit.result.optimalValue})`;
+    }
+
+    return this._populateResult(tmpl, audit.score, scoringMode, title, description);
   }
 
   /**
-   * @param {!{value: string, scoringMode: string}} score
-   * @param {!string} title
-   * @param {!string} description
+   * @param {!CategoryJSON} category
    * @return {!Element}
    */
-  _renderCategoryScore(score, title, description) {
+  _renderCategoryScore(category) {
     const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-category-score');
-    return this._populateScore(tmpl, score, title, description);
+    const score = Math.round(category.score);
+    return this._populateResult(tmpl, score, 'numeric', category.name, category.description);
   }
 
   /**
@@ -280,9 +282,7 @@ class ReportRenderer {
    */
   _renderCategory(category) {
     const element = this._dom.createElement('div', 'lighthouse-category');
-    const score = {value: Math.round(category.score), scoringMode: 'numeric'};
-    element.appendChild(
-        this._renderCategoryScore(score, category.name, category.description, category));
+    element.appendChild(this._renderCategoryScore(category));
     for (const audit of category.audits) {
       element.appendChild(this._renderAudit(audit));
     }
@@ -295,16 +295,7 @@ class ReportRenderer {
    */
   _renderAudit(audit) {
     const element = this._dom.createElement('div', 'lighthouse-audit');
-    let title = audit.result.description;
-    if (audit.result.displayValue) {
-      title += `:  ${audit.result.displayValue}`;
-    }
-    if (audit.result.optimalValue) {
-      title += ` (target: ${audit.result.optimalValue})`;
-    }
-
-    const score = {value: audit.score, scoringMode: audit.result.scoringMode};
-    element.appendChild(this._renderAuditScore(score, title, audit.result.helpText, audit));
+    element.appendChild(this._renderAuditScore(audit));
 
     // Append audit details to to header section so the entire audit is within one <details>.
     const header = element.querySelector('.lighthouse-score__header');
diff --git a/lighthouse-core/test/report/v2/report-renderer-test.js b/lighthouse-core/test/report/v2/report-renderer-test.js
index bf8e2240817e..4595eb9f3c71 100644
--- a/lighthouse-core/test/report/v2/report-renderer-test.js
+++ b/lighthouse-core/test/report/v2/report-renderer-test.js
@@ -15,17 +15,13 @@
  */
 'use strict';
 
-/* eslint-env mocha */
-/* global document self */
+/* eslint-env mocha, browser */
 
 const assert = require('assert');
 const fs = require('fs');
-const path = require('path');
 const jsdom = require('jsdom');
 const sampleResults = require('../../results/sample_v2.json');
-
-const TEMPLATES_FILE = fs.readFileSync(
-    path.join(__dirname, '../../../report/v2/templates.html'), 'utf8');
+const TEMPLATES_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
 
 function setupJsDomGlobals() {
   global.document = jsdom.jsdom(TEMPLATES_FILE);
@@ -110,7 +106,7 @@ describe('DOM', () => {
     it('fails when template cannot be found', () => {
       const dom = new DOM(document);
       assert.throws(() => {
-        const clone = dom.cloneTemplate('#unknown-selector'); // eslint-disable-line no-unused-vars
+        dom.cloneTemplate('#unknown-selector');
       });
     });
   });
@@ -133,7 +129,11 @@ describe('ReportRenderer V2', () => {
 
     it('should render an exception for invalid input', () => {
       const renderer = new ReportRenderer(document);
-      const output = renderer.renderReport({});
+      const output = renderer.renderReport({
+        get reportCategories() {
+          throw new Error();
+        }
+      });
       assert.ok(output.classList.contains('lighthouse-exception'));
     });
 

From e01d13e686d3d441571f0fba3350469dc5850a73 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Thu, 6 Apr 2017 14:01:20 -0700
Subject: [PATCH 07/10] Test feedback

---
 lighthouse-core/report/v2/report-renderer.js    |  9 +++------
 .../test/report/v2/report-generator-test.js     | 17 +++++++++++++++++
 .../test/report/v2/report-renderer-test.js      |  9 ++-------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index 09af2d779c61..cfd5aec4d32a 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -23,9 +23,7 @@
  */
 
 /* eslint-env browser */
-/* eslint indent: [2, 2, { "SwitchCase": 1, "outerIIFEBody": 0 }] */
 
-(function(self) {
 const RATINGS = {
   PASS: {label: 'pass', minScore: 75},
   AVERAGE: {label: 'average', minScore: 45},
@@ -144,7 +142,7 @@ class ReportRenderer {
   }
 
   /**
-   * @param {!Element} element DOM node to populate with values.
+   * @param {!DocumentFragment|Element} element DOM node to populate with values.
    * @param {number} score
    * @param {string} scoringMode
    * @param {string} title
@@ -311,9 +309,8 @@ class ReportRenderer {
 }
 
 // Exports
-self.ReportRenderer = ReportRenderer;
-self.DOM = DOM;
-})(self);
+window.ReportRenderer = ReportRenderer;
+window.DOM = DOM;
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */
 let DetailsJSON; // eslint-disable-line no-unused-vars
diff --git a/lighthouse-core/test/report/v2/report-generator-test.js b/lighthouse-core/test/report/v2/report-generator-test.js
index cc685d57cb28..f1983f8f4f2d 100644
--- a/lighthouse-core/test/report/v2/report-generator-test.js
+++ b/lighthouse-core/test/report/v2/report-generator-test.js
@@ -16,7 +16,10 @@
 'use strict';
 
 const assert = require('assert');
+const fs = require('fs');
+const jsdom = require('jsdom');
 const ReportGeneratorV2 = require('../../../report/v2/report-generator.js');
+const TEMPLATES_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
 
 /* eslint-env mocha */
 
@@ -143,6 +146,20 @@ describe('ReportGeneratorV2', () => {
       assert.ok(result.includes('LIGHTHOUSE_JAVASCRIPT'), 'cannot be tricked');
     });
 
+    it('should inject the report templates', () => {
+      const page = jsdom.jsdom(new ReportGeneratorV2().generateReportHtml({}));
+      const templates = jsdom.jsdom(TEMPLATES_FILE);
+
+      assert.deepEqual(page.querySelectorAll('template[id^="tmpl-"]'),
+          templates.querySelectorAll('template[id^="tmpl-"]'), 'all templates injected');
+    });
+
+    it('should inject the report CSS', () => {
+      const result = new ReportGeneratorV2().generateReportHtml({});
+      assert.ok(!result.includes('/*%%LIGHTHOUSE_CSS%%*/'));
+      assert.ok(result.includes('--pass-color'));
+    });
+
     it('should inject the report renderer javascript', () => {
       const result = new ReportGeneratorV2().generateReportHtml({});
       assert.ok(result.includes('ReportRenderer'), 'injects the script');
diff --git a/lighthouse-core/test/report/v2/report-renderer-test.js b/lighthouse-core/test/report/v2/report-renderer-test.js
index 4595eb9f3c71..9c1163c85cb6 100644
--- a/lighthouse-core/test/report/v2/report-renderer-test.js
+++ b/lighthouse-core/test/report/v2/report-renderer-test.js
@@ -21,25 +21,22 @@ const assert = require('assert');
 const fs = require('fs');
 const jsdom = require('jsdom');
 const sampleResults = require('../../results/sample_v2.json');
-const TEMPLATES_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
+const TEMPLATE_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
 
 function setupJsDomGlobals() {
-  global.document = jsdom.jsdom(TEMPLATES_FILE);
+  global.document = jsdom.jsdom(TEMPLATE_FILE);
   global.window = global.document.defaultView;
-  global.self = global.window;
 }
 
 function cleanupJsDomGlobals() {
   global.document = undefined;
   global.window = undefined;
-  global.self = undefined;
 }
 
 setupJsDomGlobals(); // Run jsdom setup code before report renderer is executed.
 require('../../../report/v2/report-renderer.js');
 
 describe('DOM', () => {
-  const window = self;
   const DOM = window.DOM;
 
   before(setupJsDomGlobals);
@@ -113,8 +110,6 @@ describe('DOM', () => {
 });
 
 describe('ReportRenderer V2', () => {
-  const window = self;
-
   before(setupJsDomGlobals);
   after(cleanupJsDomGlobals);
 

From 2abfebceb34989825f6107ceaef3128eaba6dab1 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Thu, 6 Apr 2017 17:44:07 -0700
Subject: [PATCH 08/10] Remove DOM class, update tests

---
 lighthouse-core/report/v2/report-generator.js |   4 +-
 lighthouse-core/report/v2/report-renderer.js  | 111 +++++----------
 .../test/report/v2/report-renderer-test.js    | 127 +++++-------------
 3 files changed, 70 insertions(+), 172 deletions(-)

diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js
index 5e04779b4aca..53d3541b19c3 100644
--- a/lighthouse-core/report/v2/report-generator.js
+++ b/lighthouse-core/report/v2/report-generator.js
@@ -97,14 +97,12 @@ class ReportGeneratorV2 {
   generateReportHtml(reportAsJson) {
     const sanitizedJson = JSON.stringify(reportAsJson).replace(/</g, '\\u003c');
     const sanitizedJavascript = REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
-    // Remove script in templates files just to be safe.
-    const sanitizedTemplates = REPORT_TEMPLATES.replace(/<script>([\s\S]*?)<\/script>/g, '');
 
     return ReportGeneratorV2.replaceStrings(REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
       {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: REPORT_CSS},
-      {search: '%%LIGHTHOUSE_TEMPLATES%%', replacement: sanitizedTemplates},
+      {search: '%%LIGHTHOUSE_TEMPLATES%%', replacement: REPORT_TEMPLATES},
     ]);
   }
 }
diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index cfd5aec4d32a..6bb5f66cf3a0 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -54,7 +54,7 @@ function formatNumber(number) {
   return number.toLocaleString(undefined, {maximumFractionDigits: 1});
 }
 
-class DOM {
+class ReportRenderer {
   /**
    * @param {!Document} document
    */
@@ -63,40 +63,24 @@ class DOM {
   }
 
   /**
-   * Sets the text content of an element. If the element does not exist,
-   * results in a noop.
-   * @param {Element} element
-   * @param {string} text
-   * @return {Element}
-   */
-  static setText(element, text) {
-    if (element) {
-      element.textContent = text;
-    }
-    return element;
-  }
-
-  /**
-   * Adds a class to an element. If the element does not exist, results
-   * in a noop.
-   * @param {Element} element
-   * @param {...string} classNames
-   * @return {Element}
+   * @param {!ReportJSON} report
+   * @return {!Element}
    */
-  static addClass(element, ...classNames) {
-    if (element) {
-      element.classList.add(...classNames);
+  renderReport(report) {
+    try {
+      return this._renderReport(report);
+    } catch (e) {
+      return this._renderException(e);
     }
-    return element;
   }
 
-  /**
+ /**
    * @param {string} name
    * @param {string=} className
    * @param {!Object<string, string>=} attrs Attribute key/val pairs.
    * @return {!Element}
    */
-  createElement(name, className, attrs = {}) {
+  _createElement(name, className, attrs = {}) {
     const element = this._document.createElement(name);
     if (className) {
       element.className = className;
@@ -112,34 +96,13 @@ class DOM {
    * @return {!DocumentFragment} A clone of the template content.
    * @throws {Error}
    */
-  cloneTemplate(selector) {
+  _cloneTemplate(selector) {
     const template = this._document.querySelector(selector);
     if (!template) {
       throw new Error(`Template not found: template${selector}`);
     }
     return this._document.importNode(template.content, true);
   }
-}
-
-class ReportRenderer {
-  /**
-   * @param {!Document} document
-   */
-  constructor(document) {
-    this._dom = new DOM(document);
-  }
-
-  /**
-   * @param {!ReportJSON} report
-   * @return {!Element}
-   */
-  renderReport(report) {
-    try {
-      return this._renderReport(report);
-    } catch (e) {
-      return this._renderException(e);
-    }
-  }
 
   /**
    * @param {!DocumentFragment|Element} element DOM node to populate with values.
@@ -149,15 +112,15 @@ class ReportRenderer {
    * @param {string} description
    * @return {!Element}
    */
-  _populateResult(element, score, scoringMode, title, description) {
+  _populateScore(element, score, scoringMode, title, description) {
     // Fill in the blanks.
     const valueEl = element.querySelector('.lighthouse-score__value');
-    DOM.setText(valueEl, formatNumber(score));
-    DOM.addClass(valueEl, `lighthouse-score__value--${calculateRating(score)}`,
-        `lighthouse-score__value--${scoringMode}`);
+    valueEl.textContent = formatNumber(score);
+    valueEl.classList.add(`lighthouse-score__value--${calculateRating(score)}`,
+                          `lighthouse-score__value--${scoringMode}`);
 
-    DOM.setText(element.querySelector('.lighthouse-score__title'), title);
-    DOM.setText(element.querySelector('.lighthouse-score__description'), description);
+    element.querySelector('.lighthouse-score__title').textContent = title;
+    element.querySelector('.lighthouse-score__description').textContent = description;
 
     return element;
   }
@@ -167,7 +130,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderAuditScore(audit) {
-    const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-audit-score');
+    const tmpl = this._cloneTemplate('#tmpl-lighthouse-audit-score');
 
     const scoringMode = audit.result.scoringMode;
     const description = audit.result.helpText;
@@ -180,7 +143,7 @@ class ReportRenderer {
       title += ` (target: ${audit.result.optimalValue})`;
     }
 
-    return this._populateResult(tmpl, audit.score, scoringMode, title, description);
+    return this._populateScore(tmpl, audit.score, scoringMode, title, description);
   }
 
   /**
@@ -188,9 +151,9 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderCategoryScore(category) {
-    const tmpl = this._dom.cloneTemplate('#tmpl-lighthouse-category-score');
+    const tmpl = this._cloneTemplate('#tmpl-lighthouse-category-score');
     const score = Math.round(category.score);
-    return this._populateResult(tmpl, score, 'numeric', category.name, category.description);
+    return this._populateScore(tmpl, score, 'numeric', category.name, category.description);
   }
 
   /**
@@ -215,7 +178,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderText(text) {
-    const element = this._dom.createElement('div', 'lighthouse-text');
+    const element = this._createElement('div', 'lighthouse-text');
     element.textContent = text.text;
     return element;
   }
@@ -225,7 +188,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderBlock(block) {
-    const element = this._dom.createElement('div', 'lighthouse-block');
+    const element = this._createElement('div', 'lighthouse-block');
     for (const item of block.items) {
       element.appendChild(this._renderDetails(item));
     }
@@ -237,14 +200,14 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderList(list) {
-    const element = this._dom.createElement('details', 'lighthouse-list');
+    const element = this._createElement('details', 'lighthouse-list');
     if (list.header) {
-      const summary = this._dom.createElement('summary', 'lighthouse-list__header');
+      const summary = this._createElement('summary', 'lighthouse-list__header');
       summary.textContent = list.header.text;
       element.appendChild(summary);
     }
 
-    const items = this._dom.createElement('div', 'lighthouse-list__items');
+    const items = this._createElement('div', 'lighthouse-list__items');
     for (const item of list.items) {
       items.appendChild(this._renderDetails(item));
     }
@@ -257,7 +220,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderException(e) {
-    const element = this._dom.createElement('div', 'lighthouse-exception');
+    const element = this._createElement('div', 'lighthouse-exception');
     element.textContent = String(e.stack);
     return element;
   }
@@ -267,7 +230,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderReport(report) {
-    const element = this._dom.createElement('div', 'lighthouse-report');
+    const element = this._createElement('div', 'lighthouse-report');
     for (const category of report.reportCategories) {
       element.appendChild(this._renderCategory(category));
     }
@@ -279,7 +242,7 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderCategory(category) {
-    const element = this._dom.createElement('div', 'lighthouse-category');
+    const element = this._createElement('div', 'lighthouse-category');
     element.appendChild(this._renderCategoryScore(category));
     for (const audit of category.audits) {
       element.appendChild(this._renderAudit(audit));
@@ -292,25 +255,23 @@ class ReportRenderer {
    * @return {!Element}
    */
   _renderAudit(audit) {
-    const element = this._dom.createElement('div', 'lighthouse-audit');
+    const element = this._createElement('div', 'lighthouse-audit');
     element.appendChild(this._renderAuditScore(audit));
 
     // Append audit details to to header section so the entire audit is within one <details>.
     const header = element.querySelector('.lighthouse-score__header');
-    if (header) {
-      header.open = audit.score < 100; // expand failed audits
-      if (audit.result.details) {
-        header.appendChild(this._renderDetails(audit.result.details));
-      }
+    header.open = audit.score < 100; // expand failed audits
+    if (audit.result.details) {
+      header.appendChild(this._renderDetails(audit.result.details));
     }
 
     return element;
   }
 }
 
-// Exports
-window.ReportRenderer = ReportRenderer;
-window.DOM = DOM;
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = ReportRenderer;
+}
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */
 let DetailsJSON; // eslint-disable-line no-unused-vars
diff --git a/lighthouse-core/test/report/v2/report-renderer-test.js b/lighthouse-core/test/report/v2/report-renderer-test.js
index 9c1163c85cb6..8d3590bb3b1e 100644
--- a/lighthouse-core/test/report/v2/report-renderer-test.js
+++ b/lighthouse-core/test/report/v2/report-renderer-test.js
@@ -20,110 +20,22 @@
 const assert = require('assert');
 const fs = require('fs');
 const jsdom = require('jsdom');
+const ReportRenderer = require('../../../report/v2/report-renderer.js');
 const sampleResults = require('../../results/sample_v2.json');
-const TEMPLATE_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
-
-function setupJsDomGlobals() {
-  global.document = jsdom.jsdom(TEMPLATE_FILE);
-  global.window = global.document.defaultView;
-}
-
-function cleanupJsDomGlobals() {
-  global.document = undefined;
-  global.window = undefined;
-}
-
-setupJsDomGlobals(); // Run jsdom setup code before report renderer is executed.
-require('../../../report/v2/report-renderer.js');
-
-describe('DOM', () => {
-  const DOM = window.DOM;
-
-  before(setupJsDomGlobals);
-  after(cleanupJsDomGlobals);
 
-  describe('setText', () => {
-    it('sets text of element', () => {
-      const el = document.createElement('div');
-      const result = DOM.setText(el, 'hello world');
-      assert.deepStrictEqual(result, el);
-      assert.equal(result.textContent, 'hello world');
-    });
-
-    it('does not fail when given null element argument', () => {
-      assert.doesNotThrow(() => {
-        const result = DOM.setText(null, 'hello world');
-        assert.strictEqual(result, null);
-      });
-    });
-  });
-
-  describe('addClass', () => {
-    it('adds classes to element', () => {
-      const el = document.createElement('div');
-      const result = DOM.addClass(el, 'class1', 'class2');
-      assert.ok(result.classList.contains, 'class1');
-      assert.ok(result.classList.contains, 'class2');
-    });
-
-    it('does not fail when given null element argument', () => {
-      assert.doesNotThrow(() => {
-        const result = DOM.addClass(null, 'class1');
-        assert.strictEqual(result, null);
-      });
-    });
-  });
-
-  describe('createElement', () => {
-    it('creates a simple element using default values', () => {
-      const dom = new DOM(document);
-      const el = dom.createElement('div');
-      assert.equal(el.localName, 'div');
-      assert.equal(el.className, '');
-      assert.equal(el.className, el.attributes.length);
-    });
-
-    it('creates an element from parameters', () => {
-      const dom = new DOM(document);
-      const el = dom.createElement('div', 'class1 class2', {title: 'title attr', tabindex: 0});
-      assert.equal(el.localName, 'div');
-      assert.equal(el.className, 'class1 class2');
-      assert.equal(el.getAttribute('title'), 'title attr');
-      assert.equal(el.getAttribute('tabindex'), '0');
-    });
-  });
-
-  describe('cloneTemplate', () => {
-    it('should clone a template', () => {
-      const dom = new DOM(document);
-      const clone = dom.cloneTemplate('#tmpl-lighthouse-audit-score');
-      assert.ok(clone.querySelector('.lighthouse-score'));
-    });
-
-    it('fails when template cannot be found', () => {
-      const dom = new DOM(document);
-      assert.throws(() => {
-        dom.cloneTemplate('#unknown-selector');
-      });
-    });
-  });
-});
+const TEMPLATE_FILE = fs.readFileSync(__dirname + '/../../../report/v2/templates.html', 'utf8');
 
 describe('ReportRenderer V2', () => {
-  before(setupJsDomGlobals);
-  after(cleanupJsDomGlobals);
-
   describe('renderReport', () => {
-    const ReportRenderer = window.ReportRenderer;
+    const document = jsdom.jsdom(TEMPLATE_FILE);
+    const renderer = new ReportRenderer(document);
 
     it('should render a report', () => {
-      const renderer = new ReportRenderer(document);
       const output = renderer.renderReport(sampleResults);
       assert.ok(output.classList.contains('lighthouse-report'));
     });
 
     it('should render an exception for invalid input', () => {
-      const renderer = new ReportRenderer(document);
       const output = renderer.renderReport({
         get reportCategories() {
           throw new Error();
@@ -132,8 +44,36 @@ describe('ReportRenderer V2', () => {
       assert.ok(output.classList.contains('lighthouse-exception'));
     });
 
+    describe('createElement', () => {
+      it('creates a simple element using default values', () => {
+        const el = renderer._createElement('div');
+        assert.equal(el.localName, 'div');
+        assert.equal(el.className, '');
+        assert.equal(el.className, el.attributes.length);
+      });
+
+      it('creates an element from parameters', () => {
+        const el = renderer._createElement(
+            'div', 'class1 class2', {title: 'title attr', tabindex: 0});
+        assert.equal(el.localName, 'div');
+        assert.equal(el.className, 'class1 class2');
+        assert.equal(el.getAttribute('title'), 'title attr');
+        assert.equal(el.getAttribute('tabindex'), '0');
+      });
+    });
+
+    describe('cloneTemplate', () => {
+      it('should clone a template', () => {
+        const clone = renderer._cloneTemplate('#tmpl-lighthouse-audit-score');
+        assert.ok(clone.querySelector('.lighthouse-score'));
+      });
+
+      it('fails when template cannot be found', () => {
+        assert.throws(() => renderer._cloneTemplate('#unknown-selector'));
+      });
+    });
+
     it('renders an audit', () => {
-      const renderer = new ReportRenderer(document);
       const audit = sampleResults.reportCategories[0].audits[0];
       const auditDOM = renderer._renderAudit(audit);
 
@@ -149,7 +89,6 @@ describe('ReportRenderer V2', () => {
     });
 
     it('renders a category', () => {
-      const renderer = new ReportRenderer(document);
       const category = sampleResults.reportCategories[0];
       const categoryDOM = renderer._renderCategory(category);
 

From 25921d11acda9d623efc19c667162afd4847522f Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Fri, 7 Apr 2017 15:52:33 -0700
Subject: [PATCH 09/10] mmoooooar comments

---
 lighthouse-core/report/v2/report-renderer.js    | 17 ++++++++---------
 .../test/report/v2/report-generator-test.js     |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
index 6bb5f66cf3a0..531bd2ffa412 100644
--- a/lighthouse-core/report/v2/report-renderer.js
+++ b/lighthouse-core/report/v2/report-renderer.js
@@ -105,7 +105,7 @@ class ReportRenderer {
   }
 
   /**
-   * @param {!DocumentFragment|Element} element DOM node to populate with values.
+   * @param {!DocumentFragment|!Element} element DOM node to populate with values.
    * @param {number} score
    * @param {string} scoringMode
    * @param {string} title
@@ -143,6 +143,13 @@ class ReportRenderer {
       title += ` (target: ${audit.result.optimalValue})`;
     }
 
+    // Append audit details to header section so the entire audit is within a <details>.
+    const header = tmpl.querySelector('.lighthouse-score__header');
+    header.open = audit.score < 100; // expand failed audits
+    if (audit.result.details) {
+      header.appendChild(this._renderDetails(audit.result.details));
+    }
+
     return this._populateScore(tmpl, audit.score, scoringMode, title, description);
   }
 
@@ -257,14 +264,6 @@ class ReportRenderer {
   _renderAudit(audit) {
     const element = this._createElement('div', 'lighthouse-audit');
     element.appendChild(this._renderAuditScore(audit));
-
-    // Append audit details to to header section so the entire audit is within one <details>.
-    const header = element.querySelector('.lighthouse-score__header');
-    header.open = audit.score < 100; // expand failed audits
-    if (audit.result.details) {
-      header.appendChild(this._renderDetails(audit.result.details));
-    }
-
     return element;
   }
 }
diff --git a/lighthouse-core/test/report/v2/report-generator-test.js b/lighthouse-core/test/report/v2/report-generator-test.js
index f1983f8f4f2d..2116ea538478 100644
--- a/lighthouse-core/test/report/v2/report-generator-test.js
+++ b/lighthouse-core/test/report/v2/report-generator-test.js
@@ -150,7 +150,7 @@ describe('ReportGeneratorV2', () => {
       const page = jsdom.jsdom(new ReportGeneratorV2().generateReportHtml({}));
       const templates = jsdom.jsdom(TEMPLATES_FILE);
 
-      assert.deepEqual(page.querySelectorAll('template[id^="tmpl-"]'),
+      assert.deepStrictEqual(page.querySelectorAll('template[id^="tmpl-"]'),
           templates.querySelectorAll('template[id^="tmpl-"]'), 'all templates injected');
     });
 

From 468aaa99a9db6c2a9f84d0f522b6f4547aec0bda Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Fri, 7 Apr 2017 16:32:07 -0700
Subject: [PATCH 10/10] tests

---
 lighthouse-core/test/report/v2/report-generator-test.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/lighthouse-core/test/report/v2/report-generator-test.js b/lighthouse-core/test/report/v2/report-generator-test.js
index 2116ea538478..07184c038922 100644
--- a/lighthouse-core/test/report/v2/report-generator-test.js
+++ b/lighthouse-core/test/report/v2/report-generator-test.js
@@ -149,9 +149,8 @@ describe('ReportGeneratorV2', () => {
     it('should inject the report templates', () => {
       const page = jsdom.jsdom(new ReportGeneratorV2().generateReportHtml({}));
       const templates = jsdom.jsdom(TEMPLATES_FILE);
-
-      assert.deepStrictEqual(page.querySelectorAll('template[id^="tmpl-"]'),
-          templates.querySelectorAll('template[id^="tmpl-"]'), 'all templates injected');
+      assert.equal(page.querySelectorAll('template[id^="tmpl-"]').length,
+          templates.querySelectorAll('template[id^="tmpl-"]').length, 'all templates injected');
     });
 
     it('should inject the report CSS', () => {