core(report): right-align DOM size table values (#6084)

GoogleChrome · Oct 24, 2018 · 3ecc2fe · 3ecc2fe
1 parent 9882514
commit 3ecc2fe
Show file tree

Hide file tree

Showing 5 changed files with 9,019 additions and 3 deletions.
diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/lighthouse-core/audits/dobetterweb/dom-size.js
@@ -104,7 +104,7 @@ class DOMSize extends Audit {
     const headings = [
       {key: 'statistic', itemType: 'text', text: str_(UIStrings.columnStatistic)},
       {key: 'element', itemType: 'code', text: str_(UIStrings.columnElement)},
-      {key: 'value', itemType: 'text', text: str_(UIStrings.columnValue)},
+      {key: 'value', itemType: 'numeric', text: str_(UIStrings.columnValue)},
     ];
 
     /** @type {Array<Object<string, LH.Audit.DetailsItem>>} */

diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js
@@ -80,6 +80,8 @@ class DetailsRenderer {
       case 'opportunity':
         // @ts-ignore - TODO(bckenny): Fix type hierarchy
         return this._renderOpportunityTable(details);
+      case 'numeric':
+        return this._renderNumeric(/** @type {StringDetailsJSON} */ (details));
       default: {
         throw new Error(`Unknown type: ${details.type}`);
       }
@@ -181,6 +183,16 @@ class DetailsRenderer {
     return element;
   }
 
+  /**
+   * @param {{value: string}} text
+   * @return {Element}
+   */
+  _renderNumeric(text) {
+    const element = this._dom.createElement('div', 'lh-numeric');
+    element.textContent = text.value;
+    return element;
+  }
+
   /**
    * Create small thumbnail with scaled down image asset.
    * If the supplied details doesn't have an image/* mimeType, then an empty span is returned.

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
@@ -905,7 +905,8 @@
 
 .lh-table-column--bytes,
 .lh-table-column--timespanMs,
-.lh-table-column--ms {
+.lh-table-column--ms,
+.lh-table-column--numeric {
   text-align: right;
 }
 

diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
@@ -2182,7 +2182,7 @@
           },
           {
             "key": "value",
-            "itemType": "text",
+            "itemType": "numeric",
             "text": "Value"
           }
         ],