From 7636cecf20dae589039c002262b63982c99f7f14 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 May 2018 14:59:22 -0700 Subject: [PATCH] audit details are not longer collapsible. fix width and margin. --- .../report/html/renderer/category-renderer.js | 3 +- .../html/renderer/crc-details-renderer.js | 18 +++++------- .../report/html/renderer/details-renderer.js | 8 ++--- .../renderer/performance-category-renderer.js | 4 ++- lighthouse-core/report/html/report-styles.css | 24 +++++---------- lighthouse-core/report/html/templates.html | 29 +++++++++---------- .../renderer/crc-details-renderer-test.js | 3 +- .../html/renderer/details-renderer-test.js | 3 +- 8 files changed, 38 insertions(+), 54 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 632edd5776f4..65e0fc8e0ab3 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -47,7 +47,8 @@ class CategoryRenderer { // Append audit details to header section so the entire audit is within a
. const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('details', auditEl)); if (audit.result.details && audit.result.details.type) { - header.appendChild(this.detailsRenderer.render(audit.result.details)); + const elem = header.appendChild(this.detailsRenderer.render(audit.result.details)); + elem.classList.add('lh-details'); } auditEl.classList.add(`lh-audit--${audit.result.scoreDisplayMode}`); diff --git a/lighthouse-core/report/html/renderer/crc-details-renderer.js b/lighthouse-core/report/html/renderer/crc-details-renderer.js index effc9d60eee7..89efee5eef8a 100644 --- a/lighthouse-core/report/html/renderer/crc-details-renderer.js +++ b/lighthouse-core/report/html/renderer/crc-details-renderer.js @@ -131,16 +131,16 @@ class CriticalRequestChainRenderer { * @param {!DOM} dom * @param {!DocumentFragment} tmpl * @param {!CriticalRequestChainRenderer.CRCSegment} segment - * @param {!Element} detailsEl Parent details element. + * @param {!Element} elem Parent element. * @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details */ - static buildTree(dom, tmpl, segment, detailsEl, details) { - detailsEl.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment)); + static buildTree(dom, tmpl, segment, elem, details) { + elem.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment)); for (const key of Object.keys(segment.node.children)) { const childSegment = CriticalRequestChainRenderer.createSegment(segment.node.children, key, segment.startTime, segment.transferSize, segment.treeMarkers, segment.isLastChild); - CriticalRequestChainRenderer.buildTree(dom, tmpl, childSegment, detailsEl, details); + CriticalRequestChainRenderer.buildTree(dom, tmpl, childSegment, elem, details); } } @@ -152,6 +152,7 @@ class CriticalRequestChainRenderer { */ static render(dom, templateContext, details) { const tmpl = dom.cloneTemplate('#tmpl-lh-crc', templateContext); + const containerEl = dom.find('.lh-crc', tmpl); // Fill in top summary. dom.find('.lh-crc__longest_duration', tmpl).textContent = @@ -160,20 +161,15 @@ class CriticalRequestChainRenderer { dom.find('.lh-crc__longest_transfersize', tmpl).textContent = Util.formatBytesToKB(details.longestChain.transferSize); - const detailsEl = dom.find('.lh-details', tmpl); - detailsEl.open = true; - - dom.find('.lh-details > summary', tmpl).textContent = details.header.text; - // Construct visual tree. const root = CriticalRequestChainRenderer.initTree(details.chains); for (const key of Object.keys(root.tree)) { const segment = CriticalRequestChainRenderer.createSegment(root.tree, key, root.startTime, root.transferSize); - CriticalRequestChainRenderer.buildTree(dom, tmpl, segment, detailsEl, details); + CriticalRequestChainRenderer.buildTree(dom, tmpl, segment, containerEl, details); } - return tmpl; + return dom.find('.lh-crc-container', tmpl); } } diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js index 86effddf9c9c..5e1683b86dc9 100644 --- a/lighthouse-core/report/html/renderer/details-renderer.js +++ b/lighthouse-core/report/html/renderer/details-renderer.js @@ -180,11 +180,7 @@ class DetailsRenderer { _renderTable(details) { if (!details.items.length) return this._dom.createElement('span'); - const element = this._dom.createElement('details', 'lh-details'); - element.open = true; - element.appendChild(this._dom.createElement('summary')).textContent = 'View Details'; - - const tableElem = this._dom.createChildOf(element, 'table', 'lh-table'); + const tableElem = this._dom.createElement('table', 'lh-table'); const theadElem = this._dom.createChildOf(tableElem, 'thead'); const theadTrElem = this._dom.createChildOf(theadElem, 'tr'); @@ -226,7 +222,7 @@ class DetailsRenderer { this._dom.createChildOf(rowElem, 'td', classes).appendChild(this.render(item)); } } - return element; + return tableElem; } /** diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index a467c50b1f31..b66c9da036ee 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -79,7 +79,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // If there's no `type`, then we only used details for `summary` if (details.type) { - element.appendChild(this.detailsRenderer.render(details)); + const detailsElem = this.detailsRenderer.render(details); + detailsElem.classList.add('lh-details'); + element.appendChild(detailsElem); } return element; diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 2c37d04c1dfa..e474659e0e12 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -120,8 +120,7 @@ scroll-behavior: smooth; } -.lh-root :focus, -.lh-root .lh-details > summary:focus { +.lh-root :focus { outline: -webkit-focus-ring-color auto 3px; } .lh-root summary:focus { @@ -145,21 +144,18 @@ .lh-audit__description, .lh-load-opportunity__description, .lh-details { - margin-left: calc(var(--text-indent) + var(--lh-audit-index-width) + 2 * var(--audit-item-gap)); - margin-right: calc(var(--text-indent) + 2px); + --inner-audit-left-padding: calc(var(--text-indent) + var(--lh-audit-index-width) + 2 * var(--audit-item-gap)); + --inner-audit-right-padding: calc(var(--text-indent) + 2px); + margin-left: var(--inner-audit-left-padding); + margin-right: var(--inner-audit-right-padding); } .lh-details { font-size: var(--body-font-size); margin-top: var(--default-padding); -} - -.lh-details[open] summary { margin-bottom: var(--default-padding); -} - -.lh-details summary::-webkit-details-marker { - color: #9e9e9e; + /* whatever the .lh-details side margins are */ + width: calc(100% - var(--inner-audit-left-padding) - var(--inner-audit-right-padding)); } .lh-details.flex .lh-code { @@ -884,8 +880,6 @@ summary.lh-passed-audits-summary { .lh-table { --image-preview-size: 24px; border-collapse: collapse; - width: 100%; - margin-bottom: var(--lh-audit-vpadding); --url-col-max-width: 450px; } @@ -893,11 +887,9 @@ summary.lh-passed-audits-summary { .lh-table thead { background: var(--lh-table-header-bg); } -.lh-table thead th, -.lh-details summary { +.lh-table thead th { color: var(--medium-75-gray); font-weight: normal; - text-align: left; } .lh-table tbody tr:nth-child(even) { diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index d5bffd69aab2..5828bb7fa996 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -522,6 +522,7 @@

Lighthouse