report: make metric value more prominent in table (#13036)

GoogleChrome · Sep 10, 2021 · ce8b184 · ce8b184
1 parent a691b25
commit ce8b184
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/report/assets/styles.css b/report/assets/styles.css
diff --git a/report/assets/templates.html b/report/assets/templates.html
@@ -110,6 +110,7 @@
 <template id="metric">
   <div class="lh-metric">
     <div class="lh-metric__innerwrap">
+      <div class="lh-metric__icon"></div>
       <span class="lh-metric__title"></span>
       <div class="lh-metric__value"></div>
       <div class="lh-metric__description"></div>

diff --git a/report/renderer/components.js b/report/renderer/components.js
@@ -379,10 +379,11 @@ function createMetricComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('div', 'lh-metric');
   const el2 = dom.createElement('div', 'lh-metric__innerwrap');
-  const el3 = dom.createElement('span', 'lh-metric__title');
-  const el4 = dom.createElement('div', 'lh-metric__value');
-  const el5 = dom.createElement('div', 'lh-metric__description');
-  el2.append(' ', el3, ' ', el4, ' ', el5, ' ');
+  const el3 = dom.createElement('div', 'lh-metric__icon');
+  const el4 = dom.createElement('span', 'lh-metric__title');
+  const el5 = dom.createElement('div', 'lh-metric__value');
+  const el6 = dom.createElement('div', 'lh-metric__description');
+  el2.append(' ', el3, ' ', el4, ' ', el5, ' ', el6, ' ');
   el1.append(' ', el2, ' ');
   el0.append(el1);
   return el0;