add styling based on item type

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,
       };
     });
   }

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;

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');
+    });
   });
 });