report: updates for devtools roll (#5326)

* minimal header for devtools (just the scores) * hide it if only 1 category in the report * better column sizing in details tables * keep tooltips from going off-screen
GoogleChrome · May 24, 2018 · 754093b · 754093b
1 parent 4820a0b
commit 754093b
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 62 deletions.
diff --git 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 detected`;
     }
 
     const headings = [

diff --git 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 = [

diff --git a/lighthouse-core/report/html/renderer/dom.js b/lighthouse-core/report/html/renderer/dom.js
@@ -152,6 +152,14 @@ class DOM {
     return this._document;
   }
 
+  /**
+   * TODO(paulirish): import and conditionally apply the DevTools frontend subclasses instead of this
+   * @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
@@ -60,19 +60,35 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReportHeader(report) {
-    const header = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
-    this._dom.find('.lh-config__timestamp', header).textContent =
+    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', el).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 toolbarUrl = /** @type {HTMLAnchorElement}*/ (this._dom.find('.lh-toolbar__url', header));
-    url.href = url.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;
+  }
+
+  /**
+   * @return {Element}
+   */
+  _renderReportShortHeader() {
+    const shortHeaderContainer = this._dom.createElement('div', 'lh-header-container');
+    const wrapper = this._dom.cloneTemplate('#tmpl-lh-scores-wrapper', this._templateContext);
+    shortHeaderContainer.appendChild(wrapper);
+    return shortHeaderContainer;
   }
 
+
   /**
    * @param {ReportJSON} report
    * @return {DocumentFragment}
@@ -124,12 +140,19 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReport(report) {
-    const headerStickyContainer = this._dom.createElement('div', 'lh-header-sticky');
-    headerStickyContainer.appendChild(this._renderReportHeader(report));
-    const scoreContainer = this._dom.find('.lh-scores-container', headerStickyContainer);
+    let header;
+    const headerContainer = this._dom.createElement('div');
+    if (this._dom.isDevTools()) {
+      headerContainer.classList.add('lh-header-plain');
+      header = this._renderReportShortHeader();
+    } else {
+      headerContainer.classList.add('lh-header-sticky');
+      header = this._renderReportHeader(report);
+    }
+    headerContainer.appendChild(header);
+    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'));
 
     reportSection.appendChild(this._renderReportWarnings(report));
@@ -138,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);
@@ -162,14 +187,14 @@ 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));
 
     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
@@ -71,6 +71,8 @@ class ReportUIFeatures {
    * @param {ReportJSON} report
    */
   initFeatures(report) {
+    if (this._dom.isDevTools()) 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
@@ -66,6 +66,10 @@
   --lh-audit-group-vpadding: 8px;
   --lh-section-vpadding: 12px;
   --chevron-size: 12px;
+
+  /* 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>');
@@ -93,8 +97,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;
@@ -105,7 +109,6 @@
   --lh-section-vpadding: 8px;
 }
 
-
 @keyframes fadeIn {
   0% { opacity: 0;}
   100% { opacity: 0.6;}
@@ -610,6 +613,10 @@
   z-index: 2;
   will-change: transform;
 }
+.lh-header-plain {
+  margin-top: var(--section-padding);
+}
+
 .lh-header-container {
   display: block;
   margin: 0 auto;
@@ -708,6 +715,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%;
@@ -831,8 +843,6 @@ summary.lh-passed-audits-summary {
 .lh-table {
   --image-preview-size: 24px;
   border-collapse: collapse;
-
-  --url-col-max-width: 450px;
 }
 
 .lh-table thead {
@@ -866,7 +876,13 @@ 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 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 {
+  width: var(--bytes-col-width);
 }
 
 .lh-table-column--code {
@@ -950,13 +966,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;

diff --git 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-scores-wrapper">
+  <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>
+    <div class="lh-scores-wrapper-placeholder"></div>
 
     <div class="lh-toolbar">
       <div class="lh-product-info">
@@ -389,6 +405,7 @@
     </div>
 </template>
 
+
 <!-- Lighthouse footer -->
 <template id="tmpl-lh-footer">
   <style>

diff --git 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'));
     });
   });