report(redesign): runtime settings footer (#8229)

GoogleChrome · Apr 17, 2019 · 53cea6d · 53cea6d
1 parent ed2676a
commit 53cea6d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -126,7 +126,7 @@ class ReportRenderer {
       if (!runtime.description) return;
 
       const item = this._dom.cloneTemplate('#tmpl-lh-env__items', env);
-      this._dom.find('.lh-env__name', item).textContent = `${runtime.name}:`;
+      this._dom.find('.lh-env__name', item).textContent = runtime.name;
       this._dom.find('.lh-env__description', item).textContent = runtime.description;
       env.appendChild(item);
     });

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
@@ -80,9 +80,11 @@
   --lh-audit-group-vpadding: 8px;
   --lh-section-vpadding: 12px;
   --chevron-size: 12px;
-  --circle-size: calc(3 * var(--header-font-size));
 
   /* TODO(cjamcl) clean up unused variables. */
+  --audits-margin-bottom: 40px;
+  --circle-size-big: 120px;
+  --circle-size: 96px;
   --color-black-100: #F5F5F5;
   --color-black-200: #E0E0E0;
   --color-black-400: #BDBDBD;
@@ -98,13 +100,14 @@
   --color-red-700: #EB0F00;
   --color-red: #FF4E42;
   --color-white: #FFFFFF;
+  --env-item-bg: var(--color-black-100);
+  --env-name-min-width: 220px;
+  --env-tem-padding: 10px 0px;
   --header-padding: 20px 0 20px 0;
   --score-container-padding: 12px;
   --score-container-width: 160px;
   --score-number-font-size-big: 42px;
   --score-number-font-size: 34px;
-  --circle-size-big: 120px;
-  --circle-size: 96px;
   --score-title-font-size-big: 28px;
   --score-title-font-size: 20px;
   --score-title-line-height-big: 36px;
@@ -138,10 +141,12 @@
 
 @media only screen and (max-width: 480px) {
   .lh-vars {
+    --audits-margin-bottom: 20px;
     --body-font-size: 14px;
     --body-line-height: 20px;
     --circle-size-big: 96px;
     --circle-size: 72px;
+    --env-name-min-width: 120px;
     --header-padding: 16px 0 16px 0;
     --score-container-padding: 8px;
     --score-container-width: 112px;
@@ -160,7 +165,7 @@
   --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --body-font-size: 12px;
-  --body-line-height: 16px;
+  --body-line-height: 20px;
   --subheader-font-size: 14px;
   --subheader-line-height: 18px;
   --header-font-size: 16px;
@@ -217,6 +222,10 @@
   cursor: pointer;
 }
 
+.lh-container {
+  word-break: break-word;
+}
+
 .lh-audit-group a,
 .lh-category-header__description a {
   color: #0c50c7;

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -505,36 +505,50 @@
 <template id="tmpl-lh-footer">
   <style>
     .lh-footer {
-      background-color: var(--header-bg-color);
       padding: var(--section-indent) calc(var(--default-padding) * 2);
       max-width: var(--report-width);
       margin: 0 auto;
     }
     .lh-footer .lh-generated {
       text-align: center;
-      border-top: 1px solid var(--report-border-color);
-      padding-top: var(--default-padding);
+    }
+    .lh-env__title {
+      font-size: var(--score-title-font-size-big);
+      line-height: var(--score-title-line-height-big);
+      text-align: center;
+      padding: var(--score-container-padding);
     }
     .lh-env {
       padding: var(--default-padding) 0;
     }
     .lh-env__items {
       padding-left: 16px;
+      margin: 0 0 var(--audits-margin-bottom);
+      padding: 0;
+    }
+    .lh-env__items .lh-env__item:nth-child(2n) {
+      background: var(--env-item-bg);
+    }
+    .lh-env__item {
+      display: flex;
+      padding: var(--env-tem-padding);
+      position: relative;
     }
     span.lh-env__name {
       font-weight: bold;
-      color: var(--secondary-text-color);
+      min-width: var(--env-name-min-width);
+      flex: 0.5;
+      padding: 0 8px;
     }
     span.lh-env__description {
-      font-family: var(--monospace-font-family);
-      font-size: var(--caption-font-size);
-      padding-left: 5px;
+      text-align: left;
+      flex: 1;
     }
   </style>
   <footer class="lh-footer">
     <!-- TODO(i18n): localize runtime settings -->
     <div class="lh-env">
-      <div class="lh-env__title">Runtime settings</div>
+      <div class="lh-env__title">Runtime Settings</div>
       <ul class="lh-env__items">
         <template id="tmpl-lh-env__items">
           <li class="lh-env__item">