From 6d74a7c97f168b7342f11dc87988d4fd05234634 Mon Sep 17 00:00:00 2001
From: Patrick Hulce <patrick.hulce@gmail.com>
Date: Wed, 10 May 2017 12:29:58 -0700
Subject: [PATCH] add styling based on item type

---
 .../audits/dobetterweb/uses-http2.js          |  9 +++-
 .../report/v2/renderer/details-renderer.js    | 11 +++--
 lighthouse-core/report/v2/report-styles.css   | 36 +++++++++++++++
 .../v2/renderer/details-renderer-test.js      | 45 +++++++++++++++++++
 4 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/lighthouse-core/audits/dobetterweb/uses-http2.js b/lighthouse-core/audits/dobetterweb/uses-http2.js
index 70b83737b790..ae92a6cad3a7 100644
--- a/lighthouse-core/audits/dobetterweb/uses-http2.js
+++ b/lighthouse-core/audits/dobetterweb/uses-http2.js
@@ -71,6 +71,12 @@ class UsesHTTP2Audit extends Audit {
         displayValue = `${resources.length} request was not handled over h2`;
       }
 
+      const headings = [
+        {key: 'url', itemType: 'url', text: 'URL'},
+        {key: 'protocol', itemType: 'text', text: 'Protocol'},
+      ];
+      const details = Audit.makeV2TableDetails(headings, resources);
+
       return {
         rawValue: resources.length === 0,
         displayValue: displayValue,
@@ -80,7 +86,8 @@ class UsesHTTP2Audit extends Audit {
             results: resources,
             tableHeadings: {url: 'URL', protocol: 'Protocol'}
           }
-        }
+        },
+        details,
       };
     });
   }
diff --git a/lighthouse-core/report/v2/renderer/details-renderer.js b/lighthouse-core/report/v2/renderer/details-renderer.js
index 6dbb5a5e4570..c32eee112d54 100644
--- a/lighthouse-core/report/v2/renderer/details-renderer.js
+++ b/lighthouse-core/report/v2/renderer/details-renderer.js
@@ -126,15 +126,18 @@ class DetailsRenderer {
     const theadElem = this._dom.createChildOf(tableElem, 'thead');
     const theadTrElem = this._dom.createChildOf(theadElem, 'tr');
 
-    for (const heading of details.itemHeaders) {
-      this._dom.createChildOf(theadTrElem, 'th').appendChild(this.render(heading));
-    }
+    details.itemHeaders.forEach((heading, index) => {
+      const itemType = details.items[0][index].type;
+      const classes = `lh-table-column--${itemType}`;
+      this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(this.render(heading));
+    });
 
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
     for (const row of details.items) {
       const rowElem = this._dom.createChildOf(tbodyElem, 'tr');
       for (const columnItem of row) {
-        this._dom.createChildOf(rowElem, 'td').appendChild(this.render(columnItem));
+        const classes = `lh-table-column--${columnItem.type}`;
+        this._dom.createChildOf(rowElem, 'td', classes).appendChild(this.render(columnItem));
       }
     }
     return element;
diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css
index f6103b9f96a0..d8a466245a3f 100644
--- a/lighthouse-core/report/v2/report-styles.css
+++ b/lighthouse-core/report/v2/report-styles.css
@@ -38,6 +38,10 @@
   --lh-score-highlight-bg: #fafafa;
   --lh-score-icon-background-size: 24px;
   --lh-score-margin: calc(var(--default-padding) / 2);
+
+  --lh-table-header-bg: #ccc;
+  --lh-table-higlight-bg: #fafafa;
+
   --lh-sparkline-height: 10px;
   --lh-audit-score-width: 35px;
   --lh-category-score-width: 60px;
@@ -602,6 +606,38 @@ summary.lh-passed-audits-summary::-webkit-details-marker {
 
 .lh-table {
   --image-preview-size: 24px;
+  border: 1px solid var(--report-secondary-border-color);
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.lh-table thead {
+  background: var(--lh-table-header-bg);
+}
+
+.lh-table tbody tr:nth-child(even) {
+  background-color: var(--lh-table-higlight-bg);
+}
+
+.lh-table th,
+.lh-table td {
+  padding: 10px;
+  overflow: auto;
+}
+
+.lh-table-column--text {
+  text-align: right;
+}
+
+.lh-table-column--thumbnail {
+  width: calc(var(--image-preview-size) * 2);
+}
+
+.lh-table-column--url {
+  text-align: left;
+  min-width: 250px;
+  white-space: nowrap;
 }
 
 .lh-thumbnail {
diff --git a/lighthouse-core/test/report/v2/renderer/details-renderer-test.js b/lighthouse-core/test/report/v2/renderer/details-renderer-test.js
index 0affc60343e7..2c3234b50e58 100644
--- a/lighthouse-core/test/report/v2/renderer/details-renderer-test.js
+++ b/lighthouse-core/test/report/v2/renderer/details-renderer-test.js
@@ -122,5 +122,50 @@ describe('DetailsRenderer', () => {
       assert.ok(el.classList.contains('lh-code'));
       assert.equal(el.textContent, 'code snippet');
     });
+
+    it('renders thumbnails', () => {
+      const el = renderer.render({
+        type: 'thumbnail',
+        url: 'http://example.com/my-image.jpg',
+        mimeType: 'image/jpeg',
+      });
+
+      assert.ok(el.localName === 'img');
+      assert.ok(el.classList.contains('lh-thumbnail'));
+      assert.equal(el.src, 'http://example.com/my-image.jpg');
+    });
+
+    it('renders tables', () => {
+      const el = renderer.render({
+        type: 'table',
+        header: 'View Items',
+        itemHeaders: [
+          {type: 'text', text: 'First'},
+          {type: 'text', text: 'Second'},
+          {type: 'text', text: 'Preview'},
+        ],
+        items: [
+          [
+            {type: 'text', text: 'value A.1'},
+            {type: 'text', text: 'value A.2'},
+            {type: 'thumbnail', url: 'http://example.com/image.jpg', mimeType: 'image/jpeg'},
+          ],
+          [
+            {type: 'text', text: 'value B.1'},
+            {type: 'text', text: 'value B.2'},
+            {type: 'thumbnail', url: 'unknown'},
+          ],
+        ],
+      });
+
+      assert.equal(el.localName, 'details');
+      assert.ok(el.querySelector('table'), 'did not render table');
+      assert.ok(el.querySelector('img'), 'did not render recursive items');
+      assert.equal(el.querySelectorAll('th').length, 3, 'did not render header items');
+      assert.equal(el.querySelectorAll('td').length, 6, 'did not render table cells');
+      assert.equal(el.querySelectorAll('.lh-table-column--text').length, 6, '--text not set');
+      assert.equal(el.querySelectorAll('.lh-table-column--thumbnail').length, 3,
+          '--thumbnail not set');
+    });
   });
 });