report: responsive styles (#5706)

GoogleChrome · Aug 9, 2018 · 6100528 · 6100528
1 parent 5b4b191
commit 6100528
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 43 deletions.
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -134,9 +134,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const keyMetrics = metricAudits.filter(a => a.weight >= 3);
     const otherMetrics = metricAudits.filter(a => a.weight < 3);
 
-    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metric-container');
-    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
-    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-columns');
+    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');
+    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');
 
     keyMetrics.forEach(item => {
       metricsColumn1El.appendChild(this._renderMetric(item));

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -230,7 +230,7 @@ class ReportUIFeatures {
     this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`;
     this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`;
     this.lighthouseIcon.style.transform =
-      `translate3d(calc(var(--report-content-width) / 2),` +
+      `translate3d(calc(var(--report-width) / 2),` +
       ` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`;
     this.lighthouseIcon.style.opacity = Math.max(0, 1 - scrollPct).toString();
 

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
@@ -54,7 +54,6 @@
   --metric-timeline-rule-color: #b3b3b3;
   --display-value-gray: hsl(216, 5%, 39%);
   --report-width: calc(60 * var(--body-font-size));
-  --report-content-width: calc(var(--report-width));
   --report-header-height: 161px;
   --report-header-color: #202124;
   --navitem-font-size: var(--body-font-size);
@@ -80,16 +79,17 @@
 
   /* 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>');
 
-  --av-timer-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm0-28v8h4v-3.84c6.78.97 12 6.79 12 13.84 0 7.73-6.27 14-14 14s-14-6.27-14-14c0-3.36 1.18-6.43 3.15-8.85L24 26l2.83-2.83-13.6-13.6-.02.04C8.84 12.89 6 18.11 6 24c0 9.94 8.04 18 17.99 18S42 33.94 42 24 33.94 6 23.99 6H22zm14 18c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-24 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" fill="hsl(216, 5%, 39%)"/></svg>');
+  --content-paste-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="hsl(216, 5%, 39%)" d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+  --av-timer-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="hsl(216, 5%, 39%)"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
   --photo-filter-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="none" d="M0 0h48v48H0V0z"/><path d="M38.04 20v18H10V10h18V6H10.04c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V20h-4zM34 20l1.88-4.12L40 14l-4.12-1.88L34 8l-1.88 4.12L28 14l4.12 1.88zm-7.5 1.5L24 16l-2.5 5.5L16 24l5.5 2.5L24 32l2.5-5.5L32 24z" fill="hsl(216, 5%, 39%)"/></svg>');
   --visibility-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z" fill="hsl(216, 5%, 39%)"/></svg>');
   --check-circle-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path 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" fill="hsl(216, 5%, 39%)"/></svg>');
   --check-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>');
+
   --search-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0a9 9 0 1 1 .001-18.001A9 9 0 0 1 19 28z" fill="hsl(216, 5%, 39%)"/><path d="M0 0h48v48H0z" fill="none" /></svg>');
   --remove-circle-icon-url: url('data:image/svg+xml;utf8,<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="hsl(216, 5%, 39%)"/></svg>');
 }
@@ -142,10 +142,10 @@
     outline: -webkit-focus-ring-color auto 3px;
 }
 .lh-root summary:focus {
-    outline: 1px solid hsl(217, 89%, 61%);
+    outline: none;
+    box-shadow: 0 0 0 1px hsl(217, 89%, 61%);
 }
 
-
 .lh-root [hidden] {
   display: none !important;
 }
@@ -156,21 +156,21 @@
 }
 
 
-.lh-audit__description,
-.lh-load-opportunity__description,
-.lh-details {
+.lh-audit__description {
   --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);
-  margin-left: var(--inner-audit-left-padding);
-  margin-right: var(--inner-audit-right-padding);
+  padding-left: var(--inner-audit-left-padding);
+  padding-right: var(--inner-audit-right-padding);
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .lh-details {
   font-size: var(--body-font-size);
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
   /* whatever the .lh-details side margins are */
-  width: calc(100% - var(--inner-audit-left-padding) - var(--inner-audit-right-padding));
+  width: 100%;
 }
 
 .lh-details.flex .lh-code {
@@ -318,17 +318,39 @@
 
 /* Perf Metric */
 
-.lh-metric-container {
+.lh-columns {
   display: flex;
+  width: 100%;
 }
+@media screen and (max-width: 640px) {
+  .lh-columns {
+    flex-wrap: wrap;
 
-.lh-metric-column {
+  }
+}
+
+.lh-column {
   flex: 1;
 }
-.lh-metric-column:first-of-type {
-  margin-right: 20px;
+.lh-column:first-of-type {
+  margin-right: 24px;
 }
 
+@media screen and (max-width: 800px) {
+  .lh-column:first-of-type {
+    margin-right: 8px;
+  }
+}
+@media screen and (max-width: 640px) {
+  .lh-column {
+    flex-basis: 100%;
+  }
+  .lh-column:first-of-type {
+    margin-right: 0px;
+  }
+}
+
+
 .lh-metric {
   border-bottom: 1px solid var(--report-secondary-border-color);
 }
@@ -347,6 +369,7 @@
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
   display: flex;
+  white-space: nowrap;
 }
 
 .lh-metric__name {
@@ -389,6 +412,7 @@
 
 .lh-metric--average .lh-metric__value {
   color: var(--average-color);
+  padding-left: 16px;
 }
 .lh-metric--average .lh-metric__value::after {
   background: var(--average-icon-url) no-repeat 50% 50%;
@@ -481,10 +505,10 @@
 
 .lh-filmstrip-container {
   padding: 0 var(--expandable-indent);
-  margin: 0 auto;
+  /* smaller gap between metrics and filmstrip */
+  margin: -16px auto 0 auto;
 }
 
-
 .lh-filmstrip {
   display: flex;
   flex-direction: row;
@@ -503,29 +527,30 @@
   max-width: 60px;
 }
 
+@media screen and (max-width: 750px) {
+  .lh-filmstrip {
+    flex-wrap: wrap;
+    justify-content: left;
+  }
+  .lh-filmstrip__frame {
+    margin: calc(var(--default-padding) / 3);
+  }
+}
+
 /* Audit */
 
 .lh-audit {
   border-bottom: 1px solid var(--report-secondary-border-color);
 }
 
-.lh-audit:last-child  {
-  border-bottom: none;
-}
-
 .lh-audit--error .lh-audit__display-text {
   color: var(--fail-color);
 }
 
 /* Audit Group */
 
 .lh-audit-group {
-  padding: var(--lh-audit-group-vpadding) 0;
-  border-bottom: 1px solid var(--report-secondary-border-color);
-}
-
-.lh-audit-group:last-child {
-  border-bottom: none;
+  margin: var(--lh-audit-group-vpadding) 0;
 }
 
 .lh-audit-group__header {
@@ -560,7 +585,7 @@
   background-image: var(--check-icon-url);
 }
 .lh-audit-group--diagnostics .lh-audit-group__header::before {
-  background-image: var(--search-icon-url);
+  background-image: var(--content-paste-icon-url);
 }
 .lh-audit-group--opportunities .lh-audit-group__header::before {
   background-image: var(--photo-filter-icon-url);
@@ -586,7 +611,10 @@
 
 .lh-audit-group__itemcount {
   color: var(--display-value-gray);
-  margin: 0 10px;
+  margin: 3px 10px 0;
+}
+.lh-audit-group__summary .lh-chevron {
+  margin-top: calc((var(--body-line-height) - 5px) / 2);
 }
 
 .lh-audit-group__description {
@@ -612,7 +640,7 @@
 
 .lh-container {
   display: flex;
-  max-width: var(--report-content-width);
+  max-width: var(--report-width);
   word-wrap: break-word;
   margin: 0 auto;
 }
@@ -631,7 +659,7 @@
 .lh-header-container {
   display: block;
   margin: 0 auto;
-  max-width: var(--report-content-width);
+  max-width: var(--report-width);
   position: relative;
   word-wrap: break-word;
 }
@@ -683,7 +711,7 @@
 
 .lh-scores-header {
   display: flex;
-  justify-content: center;
+  justify-content: left;
   overflow-x: hidden;
   position: relative;
   padding: var(--section-indent) calc(var(--section-indent) / 2) calc(var(--section-indent) * 2);
@@ -693,6 +721,10 @@
   border: 0;
 }
 
+.lh-scores-header .lh-gauge__wrapper {
+  margin: 0 4px;
+}
+
 .lh-scorescale {
   color: var(--medium-75-gray);
   padding: 0 calc(var(--section-indent) * 1.5) 0;
@@ -703,6 +735,7 @@
 
 .lh-scorescale-range {
   margin-left: 10px;
+  white-space: nowrap;
 }
 
 .lh-scorescale-range::before {
@@ -739,9 +772,7 @@
 
 .lh-category {
   --circle-size: calc(2.5 * var(--header-font-size));
-
   padding: var(--section-padding);
-  border-top: 1px solid var(--report-border-color);
 }
 
 .lh-category:first-of-type {
@@ -778,7 +809,7 @@
   float: right;
 }
 
-.lh-category .lh-score__gauge {
+.lh-category-header .lh-score__gauge {
   margin-left: var(--section-indent);
 }
 
@@ -893,8 +924,9 @@ summary.lh-passed-audits-summary {
 
 /* 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--url + .lh-table-column--bytes + th.lh-table-column--bytes,
+.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--timespanMs {
+  max-width: var(--bytes-col-width);
 }
 
 .lh-table-column--code {

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -164,7 +164,7 @@
       position: absolute;
       top: var(--report-header-height);
       right: 50%;
-      transform: translate3d(calc(var(--report-content-width) / 2), -100%, 0);
+      transform: translate3d(calc(var(--report-width) / 2), -100%, 0);
       opacity: 1;
       transform-origin: bottom right;
       will-change: transform, opacity;
@@ -527,11 +527,12 @@
 
     .lh-gauge__percentage {
       --spacer: calc((var(--circle-size) - var(--inset-size)) / 2);
-      width: var(--inset-size);
+      width: 100%;
       height: var(--inset-size);
       position: absolute;
       border-radius: inherit;
       font-size: var(--header-font-size);
+      line-height: var(--header-font-size);
       text-align: center;
       top: calc(var(--circle-size) / 3);
     }