audit details are not longer collapsible. fix width and margin.

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 <details>.
     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}`);

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

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;
   }
 
   /**

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;

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,20 +880,16 @@ 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;
 }
 
 .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) {

lighthouse-core/report/html/templates.html

@@ -522,6 +522,7 @@ <h1 class="leftnav__header__title">Lighthouse</h1>
 
 <!-- Lighthouse crtiical request chains component -->
 <template id="tmpl-lh-crc">
+<div class="lh-crc-container">
   <style>
     .lh-crc .tree-marker {
       width: 12px;
@@ -575,22 +576,20 @@ <h1 class="leftnav__header__title">Lighthouse</h1>
     <b class="lh-crc__longest_transfersize"><!-- fill me: longestChain.length --></b>
   </div>
   <div class="lh-crc">
-    <details class="lh-details">
-      <summary></summary>
-      <div class="crc-initial-nav">Initial Navigation</div>
-      <!-- stamp for each chain -->
-      <template id="tmpl-lh-crc__chains">
-        <div class="crc-node">
-          <span class="crc-node__tree-marker">
+    <div class="crc-initial-nav">Initial Navigation</div>
+    <!-- stamp for each chain -->
+    <template id="tmpl-lh-crc__chains">
+      <div class="crc-node">
+        <span class="crc-node__tree-marker">
 
-          </span>
-          <span class="crc-node__tree-value">
-            <span class="crc-node__tree-file"><!-- fill me: node.request.url.file --></span>
-            <span class="crc-node__tree-hostname">(<!-- fill me: node.request.url.host -->)</span>
+        </span>
+        <span class="crc-node__tree-value">
+          <span class="crc-node__tree-file"><!-- fill me: node.request.url.file --></span>
+          <span class="crc-node__tree-hostname">(<!-- fill me: node.request.url.host -->)</span>
 
-          </span>
-        </div>
-      </template>
-    </details>
+        </span>
+      </div>
+    </template>
   </div>
+</div>
 </template>

lighthouse-core/test/report/html/renderer/crc-details-renderer-test.js

@@ -91,8 +91,7 @@ describe('DetailsRenderer', () => {
 
   it('renders tree structure', () => {
     const el = CriticalRequestChainRenderer.render(dom, dom.document(), DETAILS);
-    const details = el.querySelector('.lh-details');
-    const chains = details.querySelectorAll('.crc-node');
+    const chains = el.querySelectorAll('.crc-node');
 
     // Main request
     assert.equal(chains.length, 4, 'generates correct number of chain nodes');

lighthouse-core/test/report/html/renderer/details-renderer-test.js

@@ -110,8 +110,7 @@ describe('DetailsRenderer', () => {
         ],
       });
 
-      assert.equal(el.localName, 'details');
-      assert.ok(el.querySelector('table'), 'did not render table');
+      assert.equal(el.localName, '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');