devtools: move topbar out of scrollable container

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

@@ -184,22 +184,6 @@ class ReportRenderer {
    * @return {DocumentFragment}
    */
   _renderReport(report) {
-    const headerContainer = this._dom.createElement('div');
-    headerContainer.appendChild(this._renderReportHeader());
-
-    const container = this._dom.createElement('div', 'lh-container');
-    const reportSection = container.appendChild(this._dom.createElement('div', 'lh-report'));
-
-    reportSection.appendChild(this._renderReportWarnings(report));
-
-    let scoreHeader;
-    const isSoloCategory = Object.keys(report.categories).length === 1;
-    if (!isSoloCategory) {
-      scoreHeader = this._dom.createElement('div', 'lh-scores-header');
-    } else {
-      headerContainer.classList.add('lh-header--solo-category');
-    }
-
     const detailsRenderer = new DetailsRenderer(this._dom);
     const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer);
     categoryRenderer.setTemplateContext(this._templateContext);
@@ -213,19 +197,20 @@ class ReportRenderer {
       renderer.setTemplateContext(this._templateContext);
     });
 
-    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const headerContainer = this._dom.createElement('div');
+    headerContainer.appendChild(this._renderReportHeader());
 
-    for (const category of Object.values(report.categories)) {
-      const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
-      // .lh-category-wrapper is full-width and provides horizontal rules between categories.
-      // .lh-category within has the max-width: var(--report-width);
-      const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(category, report.categoryGroups));
-    }
+    const reportContainer = this._dom.createElement('div', 'lh-container');
+    const reportSection = this._dom.createElement('div', 'lh-report');
+    reportSection.appendChild(this._renderReportWarnings(report));
 
-    const reportFragment = this._dom.createFragment();
-    const topbarDocumentFragment = this._renderReportTopbar(report);
-    reportFragment.appendChild(topbarDocumentFragment);
+    let scoreHeader;
+    const isSoloCategory = Object.keys(report.categories).length === 1;
+    if (!isSoloCategory) {
+      scoreHeader = this._dom.createElement('div', 'lh-scores-header');
+    } else {
+      headerContainer.classList.add('lh-header--solo-category');
+    }
 
     if (scoreHeader) {
       const scoreScale = this._dom.cloneTemplate('#tmpl-lh-scorescale', this._templateContext);
@@ -238,11 +223,25 @@ class ReportRenderer {
       const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
       stickyHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      reportFragment.appendChild(stickyHeader);
+      reportContainer.appendChild(stickyHeader);
+    }
+
+    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    for (const category of Object.values(report.categories)) {
+      const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
+      // .lh-category-wrapper is full-width and provides horizontal rules between categories.
+      // .lh-category within has the max-width: var(--report-width);
+      const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
+      wrapper.appendChild(renderer.render(category, report.categoryGroups));
     }
 
-    reportFragment.appendChild(headerContainer);
-    reportFragment.appendChild(container);
+    const reportFragment = this._dom.createFragment();
+    const topbarDocumentFragment = this._renderReportTopbar(report);
+
+    reportFragment.appendChild(topbarDocumentFragment);
+    reportFragment.appendChild(reportContainer);
+    reportContainer.appendChild(headerContainer);
+    reportContainer.appendChild(reportSection);
     reportSection.appendChild(this._renderReportFooter(report));
 
     return reportFragment;

lighthouse-core/report/html/report-styles.css

@@ -269,7 +269,7 @@
   --header-padding: 16px 0 16px 0;
   --plugin-icon-size: 75%;
   --pwa-icon-margin: 0 7px 0 -3px;
-  --score-container-width: 92px;
+  --score-container-width: 97px;
   --score-number-font-size-big: 34px;
   --score-number-font-size: 26px;
   --score-shape-margin-left: 2px;
@@ -285,6 +285,18 @@
   --lh-section-vpadding: 8px;
 }
 
+.lh-devtools.lh-root {
+  height: 100%;
+}
+.lh-devtools .lh-container {
+  overflow-y: scroll;
+  height: calc(100% - var(--topbar-height));
+}
+.lh-devtools .lh-sticky-header {
+  /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */
+  top: 0;
+}
+
 @keyframes fadeIn {
   0% { opacity: 0;}
   100% { opacity: 0.6;}