From 22b9565c52ab926ca1bd0b611ccf7fbfd72f8167 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Tue, 22 May 2018 14:57:45 -0700
Subject: [PATCH 01/10] short header for devtools

---
 .../report/html/renderer/report-renderer.js   | 31 +++++++-
 .../html/renderer/report-ui-features.js       |  3 +
 lighthouse-core/report/html/report-styles.css |  1 -
 lighthouse-core/report/html/templates.html    | 79 +++++++++++--------
 4 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index 23edaaaa7019..3b60f14a8b76 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -61,18 +61,33 @@ class ReportRenderer {
    */
   _renderReportHeader(report) {
     const header = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
+    const scoreContainer = this._dom.cloneTemplate('#tmpl-lh-score-container', this._templateContext);
+    const toolbarEl = this._dom.find('.lh-toolbar', header);
+    /** @type {HTMLDivElement} */ (toolbarEl.parentNode).insertBefore(scoreContainer, toolbarEl);
+
     this._dom.find('.lh-config__timestamp', header).textContent =
         Util.formatDateTime(report.fetchTime);
     this._dom.find('.lh-product-info__version', header).textContent = report.lighthouseVersion;
-    const url = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-metadata__url', header));
+    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-metadata__url', header));
     const toolbarUrl = /** @type {HTMLAnchorElement}*/ (this._dom.find('.lh-toolbar__url', header));
-    url.href = url.textContent = toolbarUrl.href = toolbarUrl.textContent = report.finalUrl;
+    metadataUrl.href = metadataUrl.textContent = toolbarUrl.href = toolbarUrl.textContent = report.finalUrl;
 
     const emulationDescriptions = Util.getEmulationDescriptions(report.configSettings || {});
     this._dom.find('.lh-config__emulation', header).textContent = emulationDescriptions.summary;
     return header;
   }
 
+  /**
+   * @return {Element}
+   */
+  _renderReportShortHeader() {
+    const shortHeaderContainer = this._dom.createElement('div', 'lh-header-container');
+    const scoreContainer = this._dom.cloneTemplate('#tmpl-lh-score-container', this._templateContext);
+    shortHeaderContainer.appendChild(scoreContainer);
+    return shortHeaderContainer;
+  }
+
+
   /**
    * @param {ReportJSON} report
    * @return {DocumentFragment}
@@ -124,10 +139,18 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReport(report) {
-    const headerStickyContainer = this._dom.createElement('div', 'lh-header-sticky');
-    headerStickyContainer.appendChild(this._renderReportHeader(report));
+    let headerStickyContainer;
+    // No header if it's devtools
+    if (this._dom.document().querySelector('.lh-devtools')) {
+      headerStickyContainer = this._dom.createElement('div', 'lh-header-nonsticky');
+      headerStickyContainer.appendChild(this._renderReportShortHeader());
+    } else {
+      headerStickyContainer = this._dom.createElement('div', 'lh-header-sticky');
+      headerStickyContainer.appendChild(this._renderReportHeader(report));
+    }
     const scoreContainer = this._dom.find('.lh-scores-container', headerStickyContainer);
 
+
     const container = this._dom.createElement('div', 'lh-container');
 
     const reportSection = container.appendChild(this._dom.createElement('div', 'lh-report'));
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 3f849dba494e..28d6d0a8b974 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -71,6 +71,9 @@ class ReportUIFeatures {
    * @param {ReportJSON} report
    */
   initFeatures(report) {
+    // Quit if it's a devtools report.
+    if (this._dom.document().querySelector('.lh-devtools')) return;
+
     this.json = report;
     this._setupMediaQueryListeners();
     this._setupExportButton();
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 614755a6ad14..c069e10984dd 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -105,7 +105,6 @@
   --lh-section-vpadding: 8px;
 }
 
-
 @keyframes fadeIn {
   0% { opacity: 0;}
   100% { opacity: 0.6;}
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 95bd0434516c..c12d0531329a 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -99,6 +99,39 @@
   </div>
 </template>
 
+
+<!-- Lighthouse score container -->
+<template id="tmpl-lh-score-container">
+  <style>
+    .lh-scores-wrapper__background,
+    .lh-scores-wrapper__shadow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: white;
+      border-radius: 8px;
+    }
+    .lh-scores-wrapper__shadow {
+      border-radius: 0;
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 0px -2px
+    }
+    .lh-scores-container {
+      padding-bottom: calc(var(--section-indent) / 2);
+      position: relative;
+      width: 100%;
+    }
+  </style>
+  <div class="lh-scores-wrapper">
+    <div class="lh-scores-container">
+      <div class="lh-scores-wrapper__background"></div>
+      <div class="lh-scores-wrapper__shadow"></div>
+    </div>
+  </div>
+</template>
+
+
 <!-- Lighthouse header -->
 <template id="tmpl-lh-heading">
   <style>
@@ -149,39 +182,25 @@
       margin-top: -30px;
       transform: translateZ(1px);
     }
+    .lh-scores-wrapper__shadow {
+      opacity: 0;
+    }
     .lh-scores-wrapper__background,
     .lh-scores-wrapper__shadow {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: white;
       box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-      opacity: 1;
       border-radius: 8px;
       will-change: opacity, transform;
       transform-origin: top;
     }
-    .lh-scores-wrapper__shadow {
-      opacity: 0;
-      border-radius: 0;
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 0px -2px
-    }
-    .lh-scores-container {
-      padding-bottom: calc(var(--section-indent) / 2);
-      position: relative;
-      width: 100%;
-    }
+
     .lh-product-info, .lh-toolbar__metadata {
       align-items: center;
+      white-space: nowrap;
       color: #5F6369;
       display: flex;
-      font-size: 12px;
-      left: var(--section-indent);
+      font-size: calc(var(--body-font-size) * 0.9);
+      margin-left: var(--section-indent);
       opacity: 0;
-      position: absolute;
-      top: 50%;
       transform: translateY(-50%);
       will-change: opacity;
     }
@@ -192,18 +211,20 @@
     .lh-toolbar {
       height: 50px;
       position: absolute;
-      top: 0;
-      width: 100%;
+      top: 25px;
       will-change: transform;
+      display: flex;
+      width: calc(100% - 70px);  /* give room for export */
     }
     .lh-toolbar__metadata {
-      left: 25%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
     }
     .lh-toolbar__url {
       color: currentColor;
       display: block;
       white-space: nowrap;
-      font-size: 14px;
       margin-right: 2px;
     }
     .lh-export {
@@ -355,12 +376,7 @@
       </div>
     </div>
 
-    <div class="lh-scores-wrapper">
-      <div class="lh-scores-container">
-        <div class="lh-scores-wrapper__background"></div>
-        <div class="lh-scores-wrapper__shadow"></div>
-      </div>
-    </div>
+   <!-- score container -->
 
     <div class="lh-toolbar">
       <div class="lh-product-info">
@@ -389,6 +405,7 @@
     </div>
 </template>
 
+
 <!-- Lighthouse footer -->
 <template id="tmpl-lh-footer">
   <style>

From 5f1b7888265ffcbbabeb0c37f62c6c3d6b3af420 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Tue, 22 May 2018 15:00:03 -0700
Subject: [PATCH 02/10] whitespace tweaks.

---
 lighthouse-core/report/html/report-styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index c069e10984dd..c6f46dd6abc1 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -93,8 +93,8 @@
   --caption-font-size: 11px;
   --caption-line-height: 14px;
   --default-padding: 12px;
-  --section-padding: 16px;
-  --section-indent: 16px;
+  --section-padding: 12px;
+  --section-indent: 8px;
   --audit-group-indent: 16px;
   --audit-indent: 16px;
   --expandable-indent: 16px;

From a6c3c664dfb90f7d8156ba688f77495c3f22e85a Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Tue, 22 May 2018 15:05:16 -0700
Subject: [PATCH 03/10] add margin on top

---
 lighthouse-core/report/html/report-styles.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index c6f46dd6abc1..71958f7b35cc 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -609,6 +609,10 @@
   z-index: 2;
   will-change: transform;
 }
+.lh-header-nonsticky {
+  margin-top: var(--section-padding);
+}
+
 .lh-header-container {
   display: block;
   margin: 0 auto;

From e8a9ecc640aa6f8f4b582a512243e529a5dc1335 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Tue, 22 May 2018 15:11:44 -0700
Subject: [PATCH 04/10] cleanup of displayValue

---
 lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js | 4 ++--
 lighthouse-core/audits/dobetterweb/uses-http2.js              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js b/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
index dff555f48518..7cc93bce003a 100644
--- a/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
+++ b/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
@@ -171,9 +171,9 @@ class NoVulnerableLibrariesAudit extends Audit {
 
     let displayValue = '';
     if (totalVulns > 1) {
-      displayValue = `${totalVulns} vulnerabilities detected.`;
+      displayValue = `${totalVulns} vulnerabilities detected`;
     } else if (totalVulns === 1) {
-      displayValue = `${totalVulns} vulnerability was detected.`;
+      displayValue = `${totalVulns} vulnerability was detected`;
     }
 
     const headings = [
diff --git a/lighthouse-core/audits/dobetterweb/uses-http2.js b/lighthouse-core/audits/dobetterweb/uses-http2.js
index ce68259a7eaf..54c41b4ae4ae 100644
--- a/lighthouse-core/audits/dobetterweb/uses-http2.js
+++ b/lighthouse-core/audits/dobetterweb/uses-http2.js
@@ -61,9 +61,9 @@ class UsesHTTP2Audit extends Audit {
       let displayValue = '';
       if (resources.length > 1) {
         displayValue =
-          `${Util.formatNumber(resources.length)} requests were not handled over HTTP/2`;
+          `${Util.formatNumber(resources.length)} requests not served via HTTP/2`;
       } else if (resources.length === 1) {
-        displayValue = `${resources.length} request was not handled over HTTP/2`;
+        displayValue = `${resources.length} request not served via HTTP/2`;
       }
 
       const headings = [

From ddaa310cff98b48a261ef411e786ab1e054bc0d9 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Tue, 22 May 2018 17:30:41 -0700
Subject: [PATCH 05/10] data tables can go narrow. tooltips stay on screen.

---
 lighthouse-core/report/html/report-styles.css | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 71958f7b35cc..ab97174d131b 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -66,6 +66,7 @@
   --lh-audit-group-vpadding: 8px;
   --lh-section-vpadding: 12px;
   --chevron-size: 12px;
+  --bytes-col-width: 3px;
   --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="hsl(139, 70%, 30%)" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
   --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="hsl(31, 100%, 45%)" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
   --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="hsl(1, 73%, 45%)" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');
@@ -98,6 +99,7 @@
   --audit-group-indent: 16px;
   --audit-indent: 16px;
   --expandable-indent: 16px;
+  --bytes-col-width: 3px;
 
   --lh-audit-vpadding: 4px;
   --lh-audit-hgap: 12px;
@@ -822,8 +824,6 @@ summary.lh-passed-audits-summary {
 .lh-table {
   --image-preview-size: 24px;
   border-collapse: collapse;
-
-  --url-col-max-width: 450px;
 }
 
 .lh-table thead {
@@ -857,7 +857,17 @@ summary.lh-passed-audits-summary {
   text-align: left;
   min-width: 250px;
   white-space: nowrap;
-  max-width: var(--url-col-max-width);
+  max-width: 0;
+}
+
+/* Keep bytes columns narrow if they follow urls */
+.lh-table-column--url + th.lh-table-column--bytes,
+.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes {
+  min-width: var(--bytes-col-width);
+  width: var(--bytes-col-width);
+}
+th.lh-table-column--bytes {
+  white-space: normal!important;
 }
 
 .lh-table-column--code {
@@ -941,13 +951,22 @@ summary.lh-passed-audits-summary {
   position: absolute;
   display: none; /* Don't retain these layers when not needed */
   opacity: 0;
-
   background: #ffffff;
-  min-width: 23em;
+  min-width: 246px;
+  max-width: 275px;
   padding: 15px;
   border-radius: 5px;
   text-align: initial;
 }
+/* shrink tooltips to not be cutoff on left edge of narrow viewports
+   45vw is chosen to be ~= width of the left column of metrics
+*/
+@media screen and (max-width: 535px) {
+  .tooltip {
+    min-width: 45vw;
+    padding: 3vw;
+  }
+}
 
 .tooltip-boundary:hover {
   background-color: #F8F9FA;

From e074cba29e8c95a97f2e9da0e8c241cdd8cff5e9 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 23 May 2018 12:15:43 -0700
Subject: [PATCH 06/10] sample json

---
 lighthouse-core/test/results/sample_v2.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index 6d058e6e7919..e0a96ae286ce 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -2450,7 +2450,7 @@
       "score": 0,
       "scoreDisplayMode": "binary",
       "rawValue": false,
-      "displayValue": "1 vulnerability was detected.",
+      "displayValue": "1 vulnerability was detected",
       "details": {
         "type": "table",
         "headings": [
@@ -2561,7 +2561,7 @@
       "score": 0,
       "scoreDisplayMode": "binary",
       "rawValue": false,
-      "displayValue": "15 requests were not handled over HTTP/2",
+      "displayValue": "15 requests not served via HTTP/2",
       "details": {
         "type": "table",
         "headings": [

From e62e292f344bc4507c2e269b11ecddd26067c4d0 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 23 May 2018 15:33:50 -0700
Subject: [PATCH 07/10] feedback. sticky. isDevTools

---
 lighthouse-core/report/html/renderer/dom.js   |  7 +++++++
 .../report/html/renderer/report-renderer.js   | 21 +++++++++----------
 .../html/renderer/report-ui-features.js       |  3 +--
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/dom.js b/lighthouse-core/report/html/renderer/dom.js
index f6905b2af8ec..e912fb26f817 100644
--- a/lighthouse-core/report/html/renderer/dom.js
+++ b/lighthouse-core/report/html/renderer/dom.js
@@ -152,6 +152,13 @@ class DOM {
     return this._document;
   }
 
+  /**
+   * @return {boolean}
+   */
+  isDevTools() {
+    return !!this._document.querySelector('.lh-devtools');
+  }
+
   /**
    * Guaranteed context.querySelector. Always returns an element or throws if
    * nothing matches query.
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index 3b60f14a8b76..1e907042e1a5 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -139,20 +139,19 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReport(report) {
-    let headerStickyContainer;
-    // No header if it's devtools
-    if (this._dom.document().querySelector('.lh-devtools')) {
-      headerStickyContainer = this._dom.createElement('div', 'lh-header-nonsticky');
-      headerStickyContainer.appendChild(this._renderReportShortHeader());
+    let header;
+    const headerContainer = this._dom.createElement('div');
+    if (this._dom.isDevTools()) {
+      headerContainer.classList.add('lh-header-nonsticky');
+      header = this._renderReportShortHeader();
     } else {
-      headerStickyContainer = this._dom.createElement('div', 'lh-header-sticky');
-      headerStickyContainer.appendChild(this._renderReportHeader(report));
+      headerContainer.classList.add('lh-header-sticky');
+      header = this._renderReportHeader(report);
     }
-    const scoreContainer = this._dom.find('.lh-scores-container', headerStickyContainer);
-
+    headerContainer.appendChild(header);
+    const scoreContainer = this._dom.find('.lh-scores-container', headerContainer);
 
     const container = this._dom.createElement('div', 'lh-container');
-
     const reportSection = container.appendChild(this._dom.createElement('div', 'lh-report'));
 
     reportSection.appendChild(this._renderReportWarnings(report));
@@ -192,7 +191,7 @@ class ReportRenderer {
     reportSection.appendChild(this._renderReportFooter(report));
 
     const reportFragment = this._dom.createFragment();
-    reportFragment.appendChild(headerStickyContainer);
+    reportFragment.appendChild(headerContainer);
     reportFragment.appendChild(container);
 
     return reportFragment;
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 28d6d0a8b974..d230b1486ed0 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -71,8 +71,7 @@ class ReportUIFeatures {
    * @param {ReportJSON} report
    */
   initFeatures(report) {
-    // Quit if it's a devtools report.
-    if (this._dom.document().querySelector('.lh-devtools')) return;
+    if (this._dom.isDevTools()) return;
 
     this.json = report;
     this._setupMediaQueryListeners();

From 2771b954007385cd00be46d4f9de3299e2c048f4 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 23 May 2018 16:58:01 -0700
Subject: [PATCH 08/10] naming feedback.

---
 .../report/html/renderer/report-renderer.js   | 37 ++++++++++---------
 lighthouse-core/report/html/report-styles.css |  7 +++-
 lighthouse-core/report/html/templates.html    |  4 +-
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index 1e907042e1a5..15bedb50d352 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -60,21 +60,22 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReportHeader(report) {
-    const header = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
-    const scoreContainer = this._dom.cloneTemplate('#tmpl-lh-score-container', this._templateContext);
-    const toolbarEl = this._dom.find('.lh-toolbar', header);
-    /** @type {HTMLDivElement} */ (toolbarEl.parentNode).insertBefore(scoreContainer, toolbarEl);
+    const el = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
+    const domFragment = this._dom.cloneTemplate('#tmpl-lh-scores-wrapper', this._templateContext);
+    const placeholder = this._dom.find('.lh-scores-wrapper-placeholder', el);
+    /** @type {HTMLDivElement} */ (placeholder.parentNode).replaceChild(domFragment, placeholder);
 
-    this._dom.find('.lh-config__timestamp', header).textContent =
+    this._dom.find('.lh-config__timestamp', el).textContent =
         Util.formatDateTime(report.fetchTime);
-    this._dom.find('.lh-product-info__version', header).textContent = report.lighthouseVersion;
-    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-metadata__url', header));
-    const toolbarUrl = /** @type {HTMLAnchorElement}*/ (this._dom.find('.lh-toolbar__url', header));
-    metadataUrl.href = metadataUrl.textContent = toolbarUrl.href = toolbarUrl.textContent = report.finalUrl;
+    this._dom.find('.lh-product-info__version', el).textContent = report.lighthouseVersion;
+    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-metadata__url', el));
+    const toolbarUrl = /** @type {HTMLAnchorElement}*/ (this._dom.find('.lh-toolbar__url', el));
+    metadataUrl.href = metadataUrl.textContent = report.finalUrl;
+    toolbarUrl.href = toolbarUrl.textContent = report.finalUrl;
 
     const emulationDescriptions = Util.getEmulationDescriptions(report.configSettings || {});
-    this._dom.find('.lh-config__emulation', header).textContent = emulationDescriptions.summary;
-    return header;
+    this._dom.find('.lh-config__emulation', el).textContent = emulationDescriptions.summary;
+    return el;
   }
 
   /**
@@ -82,8 +83,8 @@ class ReportRenderer {
    */
   _renderReportShortHeader() {
     const shortHeaderContainer = this._dom.createElement('div', 'lh-header-container');
-    const scoreContainer = this._dom.cloneTemplate('#tmpl-lh-score-container', this._templateContext);
-    shortHeaderContainer.appendChild(scoreContainer);
+    const wrapper = this._dom.cloneTemplate('#tmpl-lh-scores-wrapper', this._templateContext);
+    shortHeaderContainer.appendChild(wrapper);
     return shortHeaderContainer;
   }
 
@@ -142,14 +143,14 @@ class ReportRenderer {
     let header;
     const headerContainer = this._dom.createElement('div');
     if (this._dom.isDevTools()) {
-      headerContainer.classList.add('lh-header-nonsticky');
+      headerContainer.classList.add('lh-header-plain');
       header = this._renderReportShortHeader();
     } else {
       headerContainer.classList.add('lh-header-sticky');
       header = this._renderReportHeader(report);
     }
     headerContainer.appendChild(header);
-    const scoreContainer = this._dom.find('.lh-scores-container', headerContainer);
+    const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
 
     const container = this._dom.createElement('div', 'lh-container');
     const reportSection = container.appendChild(this._dom.createElement('div', 'lh-report'));
@@ -160,6 +161,8 @@ class ReportRenderer {
     const isSoloCategory = report.reportCategories.length === 1;
     if (!isSoloCategory) {
       scoreHeader = this._dom.createElement('div', 'lh-scores-header');
+    } else {
+      headerContainer.classList.add('lh-header--solo-category');
     }
 
     const detailsRenderer = new DetailsRenderer(this._dom);
@@ -184,8 +187,8 @@ class ReportRenderer {
 
     if (scoreHeader) {
       const scoreScale = this._dom.cloneTemplate('#tmpl-lh-scorescale', this._templateContext);
-      scoreContainer.appendChild(scoreHeader);
-      scoreContainer.appendChild(scoreScale);
+      scoresContainer.appendChild(scoreHeader);
+      scoresContainer.appendChild(scoreScale);
     }
 
     reportSection.appendChild(this._renderReportFooter(report));
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index ab97174d131b..cc55536af519 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -611,7 +611,7 @@
   z-index: 2;
   will-change: transform;
 }
-.lh-header-nonsticky {
+.lh-header-plain {
   margin-top: var(--section-padding);
 }
 
@@ -701,6 +701,11 @@
   background-color: var(--fail-color);
 }
 
+/* Hide category score gauages if it's a single category report */
+.lh-header--solo-category .lh-scores-wrapper {
+  display: none;
+}
+
 
 .lh-categories {
   width: 100%;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index c12d0531329a..81672fe55e3b 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -101,7 +101,7 @@
 
 
 <!-- Lighthouse score container -->
-<template id="tmpl-lh-score-container">
+<template id="tmpl-lh-scores-wrapper">
   <style>
     .lh-scores-wrapper__background,
     .lh-scores-wrapper__shadow {
@@ -376,7 +376,7 @@
       </div>
     </div>
 
-   <!-- score container -->
+    <div class="lh-scores-wrapper-placeholder"></div>
 
     <div class="lh-toolbar">
       <div class="lh-product-info">

From 7681ff6ab00fabfd357e53d9836dffc95e1c3d2f Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 23 May 2018 17:04:22 -0700
Subject: [PATCH 09/10] css sizing of table columns. gonna write a blog post
 about you.

---
 lighthouse-core/report/html/report-styles.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index cc55536af519..be52fb27333b 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -66,7 +66,10 @@
   --lh-audit-group-vpadding: 8px;
   --lh-section-vpadding: 12px;
   --chevron-size: 12px;
-  --bytes-col-width: 3px;
+
+  /* Voodoo magic here to get narrow columns. 0 doesn't size the column like our friend 1px does */
+  --bytes-col-width: 1px;
+
   --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="hsl(139, 70%, 30%)" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
   --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="hsl(31, 100%, 45%)" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
   --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="hsl(1, 73%, 45%)" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');
@@ -99,7 +102,6 @@
   --audit-group-indent: 16px;
   --audit-indent: 16px;
   --expandable-indent: 16px;
-  --bytes-col-width: 3px;
 
   --lh-audit-vpadding: 4px;
   --lh-audit-hgap: 12px;
@@ -865,15 +867,11 @@ summary.lh-passed-audits-summary {
   max-width: 0;
 }
 
-/* Keep bytes columns narrow if they follow urls */
+/* Keep bytes columns narrow if they follow the URL column */
 .lh-table-column--url + th.lh-table-column--bytes,
 .lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes {
-  min-width: var(--bytes-col-width);
   width: var(--bytes-col-width);
 }
-th.lh-table-column--bytes {
-  white-space: normal!important;
-}
 
 .lh-table-column--code {
   max-width: var(--url-col-max-width);

From a8c26ec3cd6e8f0c81100d6b119d1df9a524ea81 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 23 May 2018 17:38:26 -0700
Subject: [PATCH 10/10] brendan feedback

---
 lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js | 2 +-
 lighthouse-core/report/html/renderer/dom.js                   | 1 +
 lighthouse-core/test/audits/dobetterweb/uses-http2-test.js    | 4 ++--
 lighthouse-core/test/results/sample_v2.json                   | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js b/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
index 7cc93bce003a..8278a520b7e6 100644
--- a/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
+++ b/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js
@@ -173,7 +173,7 @@ class NoVulnerableLibrariesAudit extends Audit {
     if (totalVulns > 1) {
       displayValue = `${totalVulns} vulnerabilities detected`;
     } else if (totalVulns === 1) {
-      displayValue = `${totalVulns} vulnerability was detected`;
+      displayValue = `${totalVulns} vulnerability detected`;
     }
 
     const headings = [
diff --git a/lighthouse-core/report/html/renderer/dom.js b/lighthouse-core/report/html/renderer/dom.js
index e912fb26f817..69ce25b9f15e 100644
--- a/lighthouse-core/report/html/renderer/dom.js
+++ b/lighthouse-core/report/html/renderer/dom.js
@@ -153,6 +153,7 @@ class DOM {
   }
 
   /**
+   * TODO(paulirish): import and conditionally apply the DevTools frontend subclasses instead of this
    * @return {boolean}
    */
   isDevTools() {
diff --git a/lighthouse-core/test/audits/dobetterweb/uses-http2-test.js b/lighthouse-core/test/audits/dobetterweb/uses-http2-test.js
index b855484e9b84..c73aadcf740a 100644
--- a/lighthouse-core/test/audits/dobetterweb/uses-http2-test.js
+++ b/lighthouse-core/test/audits/dobetterweb/uses-http2-test.js
@@ -22,7 +22,7 @@ describe('Resources are fetched over http/2', () => {
       requestNetworkRecords: () => Promise.resolve(networkRecords),
     }).then(auditResult => {
       assert.equal(auditResult.rawValue, false);
-      assert.ok(auditResult.displayValue.match('3 requests were not'));
+      assert.ok(auditResult.displayValue.match('3 requests not'));
       assert.equal(auditResult.details.items.length, 3);
       assert.equal(auditResult.details.items[0].url, 'https://webtide.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70');
       const headers = auditResult.details.headings;
@@ -38,7 +38,7 @@ describe('Resources are fetched over http/2', () => {
       devtoolsLogs: {[UsesHTTP2Audit.DEFAULT_PASS]: []},
       requestNetworkRecords: () => Promise.resolve(entryWithHTTP1),
     }).then(auditResult => {
-      assert.ok(auditResult.displayValue.match('1 request was not'));
+      assert.ok(auditResult.displayValue.match('1 request not'));
     });
   });
 
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index e0a96ae286ce..6f14fc22542f 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -2450,7 +2450,7 @@
       "score": 0,
       "scoreDisplayMode": "binary",
       "rawValue": false,
-      "displayValue": "1 vulnerability was detected",
+      "displayValue": "1 vulnerability detected",
       "details": {
         "type": "table",
         "headings": [