From 401d0a7d6a1ef9818580ec684ec3bcccf4ed3280 Mon Sep 17 00:00:00 2001 From: Patrick Hulce Date: Wed, 10 May 2017 15:57:29 -0700 Subject: [PATCH] feat: table styles (#2210) * feat: table styles * feedback and tests * styleAs -> styleClass * Revert "styleAs -> styleClass" This reverts commit 43eee33865e85d377654b62097a026c91fcc31cd. * Revert "feedback and tests" This reverts commit a1286167a3b4d0003579deb5910ca130f3648914. * Revert "feat: table styles" This reverts commit c04f675384caaffca390537e6a419f40e8ff9639. * add styling based on item type * plumb through itemType * closure --- lighthouse-core/audits/audit.js | 1 + .../audits/dobetterweb/uses-http2.js | 9 +++- .../report/v2/renderer/details-renderer.js | 18 ++++++-- lighthouse-core/report/v2/report-styles.css | 36 +++++++++++++++ .../v2/renderer/details-renderer-test.js | 45 +++++++++++++++++++ 5 files changed, 105 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/audits/audit.js b/lighthouse-core/audits/audit.js index 040a344142..ae53d6b26e 100644 --- a/lighthouse-core/audits/audit.js +++ b/lighthouse-core/audits/audit.js @@ -95,6 +95,7 @@ class Audit { static makeV2TableHeaders(headings) { return headings.map(heading => ({ type: 'text', + itemType: heading.itemType, text: heading.text })); } diff --git a/lighthouse-core/audits/dobetterweb/uses-http2.js b/lighthouse-core/audits/dobetterweb/uses-http2.js index 70b83737b7..ae92a6cad3 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 6dbb5a5e45..42322df2cf 100644 --- a/lighthouse-core/report/v2/renderer/details-renderer.js +++ b/lighthouse-core/report/v2/renderer/details-renderer.js @@ -127,14 +127,17 @@ class DetailsRenderer { const theadTrElem = this._dom.createChildOf(theadElem, 'tr'); for (const heading of details.itemHeaders) { - this._dom.createChildOf(theadTrElem, 'th').appendChild(this.render(heading)); + const itemType = heading.itemType || 'text'; + 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; @@ -212,11 +215,20 @@ DetailsRenderer.ListDetailsJSON; // eslint-disable-line no-unused-expressions */ DetailsRenderer.CardsDetailsJSON; // eslint-disable-line no-unused-expressions +/** + * @typedef {{ + * type: string, + * itemType: (string|undefined), + * text: (string|undefined) + * }} + */ +DetailsRenderer.TableHeaderJSON; // eslint-disable-line no-unused-expressions + /** @typedef {{ * type: string, * header: ({text: string}|undefined), * items: !Array>, - * itemHeaders: !Array + * itemHeaders: !Array * }} */ DetailsRenderer.TableDetailsJSON; // eslint-disable-line no-unused-expressions diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css index f6103b9f96..d8a466245a 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 0affc60343..eb1d8448d9 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', itemType: 'thumbnail'}, + ], + 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'); + }); }); });