report(redesign): design review feedback (#8785)

GoogleChrome · May 6, 2019 · 34b9451 · 34b9451
1 parent aac5a08
commit 34b9451
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 42 deletions.
diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -128,10 +128,10 @@ class CategoryRenderer {
 
     // Add list of warnings or singular warning
     const warningsEl = this.dom.createChildOf(titleEl, 'div', 'lh-warnings');
+    this.dom.createChildOf(warningsEl, 'span').textContent = Util.UIStrings.warningHeader;
     if (warnings.length === 1) {
-      warningsEl.textContent = `${Util.UIStrings.warningHeader} ${warnings.join('')}`;
+      warningsEl.appendChild(this.dom.document().createTextNode(warnings.join('')));
     } else {
-      warningsEl.textContent = Util.UIStrings.warningHeader;
       const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
       for (const warning of warnings) {
         const item = this.dom.createChildOf(warningsUl, 'li');

diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -147,8 +147,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // 'Values are estimated and may vary' is used as the category description for PSI
     if (environment !== 'PSI') {
-      const estValuesEl = this.dom.createChildOf(metricsColumn2El, 'div',
-          'lh-metrics__disclaimer lh-metrics__disclaimer');
+      const estValuesEl = this.dom.createChildOf(metricsColumn1El, 'div', 'lh-metrics__disclaimer');
       estValuesEl.textContent = Util.UIStrings.varianceDisclaimer;
     }
 

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -82,7 +82,6 @@ class ReportUIFeatures {
 
     this.json = report;
     this._setupMediaQueryListeners();
-    this._setupSmoothScroll();
     this._setupExportButton();
     this._setupThirdPartyFilter();
     this._setupStickyHeaderElements();
@@ -114,17 +113,6 @@ class ReportUIFeatures {
     this.onMediaQueryChange(mediaQuery);
   }
 
-  _setupSmoothScroll() {
-    for (const el of this._dom.findAll('a.lh-gauge__wrapper', this._document)) {
-      const anchorElement = /** @type {HTMLAnchorElement} */ (el);
-      anchorElement.addEventListener('click', e => {
-        e.preventDefault();
-        window.history.pushState({}, '', anchorElement.hash);
-        this._dom.find(anchorElement.hash, this._document).scrollIntoView({behavior: 'smooth'});
-      });
-    }
-  }
-
   /**
    * Handle media query change events.
    * @param {MediaQueryList|MediaQueryListEvent} mql

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
@@ -76,6 +76,7 @@
   --lh-audit-group-vpadding: 8px;
   --lh-section-vpadding: 12px;
   --chevron-size: 12px;
+  --inner-audit-left-padding: calc(var(--score-shape-size) + var(--score-shape-margin-left) + var(--score-shape-margin-right));
 
   /* Palette. */
   --color-black-100: #F5F5F5;
@@ -105,8 +106,8 @@
   --env-name-min-width: 220px;
   --env-tem-padding: 10px 0px;
   --expandable-padding: 0 0 2px calc(var(--score-shape-margin-left) + var(--score-shape-size) + var(--score-shape-margin-right));
-  --gauge-circle-size-big: 120px;
-  --gauge-circle-size: 96px;
+  --gauge-circle-size-big: 112px;
+  --gauge-circle-size: 80px;
   --header-padding: 20px 0 20px 0;
   --highlighter-bg: var(--color-black-400);
   --icon-square-size: calc(var(--score-shape-size) * 0.88);
@@ -116,14 +117,13 @@
   --plugin-icon-size: 65%;
   --pwa-icon-margin: 0 6px 0 -2px;
   --pwa-icon-size: var(--topbar-icon-size);
-  --score-container-padding: 12px;
-  --score-container-width: 160px;
-  --score-number-font-size-big: 42px;
-  --score-number-font-size: 34px;
+  --score-container-padding: 8px;
+  --score-container-width: 148px;
+  --score-number-font-size-big: 38px;
+  --score-number-font-size: 28px;
   --score-shape-margin-left: 4px;
   --score-shape-margin-right: 12px;
-  --score-shape-margin-top: 7px;
-  --score-shape-margin: var(--score-shape-margin-top) var(--score-shape-margin-right) 0 var(--score-shape-margin-left);
+  --score-shape-margin: 0 var(--score-shape-margin-right) 0 var(--score-shape-margin-left);
   --score-shape-size: 12px;
   --score-title-font-size-big: 28px;
   --score-title-font-size: 20px;
@@ -133,7 +133,7 @@
   --scorescale-width: 18px;
   --section-padding: 40px;
   --topbar-bg: var(--color-black-100);
-  --topbar-height: 36px;
+  --topbar-height: 32px;
   --topbar-icon-size: 24px;
   --topbar-padding: 0 8px;
   --metrics-toggle-color: var(--color-black-200);
@@ -215,19 +215,17 @@
     --header-padding: 16px 0 16px 0;
     --plugin-icon-size: 75%;
     --pwa-icon-margin: 0 7px 0 -3px;
-    --score-container-padding: 8px;
     --score-container-width: 112px;
     --score-number-font-size-big: 34px;
     --score-number-font-size: 26px;
     --score-shape-margin-left: 2px;
-    --score-shape-margin-top: 7px;
     --score-shape-size: 10px;
     --score-title-font-size-big: 22px;
     --score-title-font-size: 14px;
     --score-title-line-height-big: 26px;
     --score-title-line-height: 20px;
     --section-padding: 24px;
-    --topbar-height: 32px;
+    --topbar-height: 28px;
     --topbar-icon-size: 20px;
   }
 
@@ -328,7 +326,6 @@
 }
 
 .lh-audit__description, .lh-audit__stackpack {
-  --inner-audit-left-padding: calc(var(--text-indent) + var(--lh-audit-index-width) + 2 * var(--audit-item-gap));
   --inner-audit-right-padding: calc(var(--text-indent) + 2px);
   padding-left: var(--inner-audit-left-padding);
   padding-right: var(--inner-audit-right-padding);
@@ -340,6 +337,7 @@
   font-size: var(--body-font-size);
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
+  margin-left: var(--inner-audit-left-padding);
   /* whatever the .lh-details side margins are */
   width: 100%;
 }
@@ -461,6 +459,7 @@
 }
 .lh-category-header__description  {
   font-size: var(--body-font-size);
+  text-align: center;
   margin: 0px auto;
   max-width: 400px;
 }
@@ -491,6 +490,7 @@
 /* Expandable Details (Audit Groups, Audits) */
 .lh-audit__header {
   display: flex;
+  align-items: center;
   font-weight: 500;
   padding: var(--lh-audit-vpadding) 0;
 }
@@ -563,9 +563,10 @@
 
 .lh-metric__innerwrap {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding: 8px var(--text-indent);
+  padding: 10px var(--text-indent);
 }
 
 .lh-metric__details {
@@ -579,7 +580,6 @@
 
 .lh-metrics__disclaimer {
   color: var(--medium-75-gray);
-  text-align: right;
   margin: var(--lh-section-vpadding) 0;
   padding: 0 var(--text-indent);
 }
@@ -711,9 +711,7 @@
 }
 
 .lh-load-opportunity__header .lh-load-opportunity__col {
-  background-color: var(--medium-50-gray);
   color: var(--medium-75-gray);
-  text-align: center;
   display: unset;
   line-height: calc(2.3 * var(--body-font-size));
 }
@@ -724,10 +722,12 @@
 
 .lh-load-opportunity__col--one {
   flex: 5;
+  align-items: center;
   margin-right: 2px;
 }
 .lh-load-opportunity__col--two {
   flex: 4;
+  text-align: right;
 }
 
 .lh-audit--load-opportunity .lh-audit__display-text {
@@ -888,6 +888,10 @@
   /* When the header takes 100% width, the chevron becomes small. */
   max-width: calc(100% - var(--chevron-size));
 }
+/* max-width makes the metric toggle not flush. metrics doesn't have a chevron so unset. */
+.lh-audit-group--metrics .lh-audit-group__header {
+  max-width: unset;
+}
 
 .lh-audit-group__header span.lh-audit-group__title {
   font-weight: bold;
@@ -970,11 +974,13 @@
 
 .lh-warnings {
   --item-margin: calc(var(--body-line-height) / 6);
-  border: 1px solid var(--color-average);
-  border-radius: 4px;
+  color: var(--color-average);
   margin: var(--lh-audit-vpadding) 0;
   padding: calc(var(--lh-audit-vpadding) / 2) var(--lh-audit-vpadding);
 }
+.lh-warnings span {
+  font-weight: bold;
+}
 
 .lh-warnings--toplevel {
   --item-margin: calc(var(--header-line-height) / 4);
@@ -1160,25 +1166,31 @@
 .lh-table {
   --image-preview-size: 24px;
   border-collapse: collapse;
+  /* Can't assign padding to table, so shorten the width instead. */
+  width: calc(100% - var(--inner-audit-left-padding));
 }
 
-.lh-table thead {
-  background-color: var(--lh-table-higlight-bg);
-}
 .lh-table thead th {
   font-weight: normal;
+  color: var(--color-black-600);
   /* See text-wrapping comment on .lh-container. */
   word-break: normal;
 }
 
-.lh-table tbody tr:nth-child(even) {
+.lh-table tbody tr:nth-child(odd) {
   background-color: var(--lh-table-higlight-bg);
 }
 
 .lh-table th,
 .lh-table td {
   padding: 8px 6px;
 }
+.lh-table th:first-child {
+  padding-left: 0;
+}
+.lh-table th:last-child {
+  padding-right: 0;
+}
 
 /* Looks unnecessary, but mostly for keeping the <th>s left-aligned */
 .lh-table-column--text,

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -180,8 +180,6 @@
       justify-content: center;
       background-color: var(--color-sticky-header-bg);
       border-bottom: 1px solid var(--color-black-200);
-      padding-top: var(--score-container-padding);
-      padding-bottom: 4px;
       z-index: 1000;
       pointer-events: none;
       opacity: 0;
@@ -234,6 +232,7 @@
     .lh-topbar__logo {
       width: var(--topbar-icon-size);
       height: var(--topbar-icon-size);
+      user-select: none;
     }
     .lh-topbar__logo .shape {
       fill: var(--body-text-color);
@@ -267,7 +266,7 @@
     }
     .lh-export__button.active + .lh-export__dropdown {
       opacity: 1;
-      clip: rect(0, 187px, 242px, 0);
+      clip: rect(-1px, 187px, 242px, -3px);
     }
     .lh-export__dropdown {
       position: absolute;