GoogleChrome · paulirish · Jul 21, 2021 · Jul 23, 2021 · Jul 21, 2021 · Jul 21, 2021
diff --git a/lighthouse-core/scripts/build-report-for-autodeployment.js b/lighthouse-core/scripts/build-report-for-autodeployment.js
@@ -40,7 +40,7 @@ const DIST = path.join(LH_ROOT, `dist/now`);
         // TODO: Make the DevTools Audits panel "emulation" more comprehensive
         // - the parent widget/vbox container with overflow
         // - a more constrained/realistic default size
-        html = html.replace(`"lh-root lh-vars"`, `"lh-root lh-vars lh-devtools"`);
+        html = html.replace(`"lh-vars"`, `"lh-vars lh-devtools"`);
       }
       const filepath = `${DIST}/${variant}${filename}/index.html`;
       fs.mkdirSync(path.dirname(filepath), {recursive: true});

diff --git a/lighthouse-viewer/app/index.html b/lighthouse-viewer/app/index.html
@@ -15,7 +15,7 @@
   <meta name="theme-color" content="#304ffe">
   <link rel="stylesheet" href="styles/bundled.css">
 </head>
-<body class="lh-root lh-vars">
+<body class="lh-vars">
 <div hidden>%%LIGHTHOUSE_TEMPLATES%%</div>
 
 <div class="drop_zone"></div>

diff --git a/lighthouse-viewer/test/viewer-test-pptr.js b/lighthouse-viewer/test/viewer-test-pptr.js
@@ -90,7 +90,7 @@ describe('Lighthouse Viewer', () => {
       await viewerPage.goto(viewerUrl, {waitUntil: 'networkidle2', timeout: 30000});
       const fileInput = await viewerPage.$('#hidden-file-input');
       await fileInput.uploadFile(sampleLhr);
-      await viewerPage.waitForSelector('.lh-container', {timeout: 30000});
+      await viewerPage.waitForSelector('.lh-main', {timeout: 30000});
     });
 
     it('should load with no errors', async () => {

@@ -23,7 +23,7 @@
   <title>Lighthouse Report</title>
   <style>/*%%LIGHTHOUSE_CSS%%*/</style>
 </head>
-<body class="lh-root lh-vars">
+<body class="lh-vars">
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
   <div hidden>%%LIGHTHOUSE_TEMPLATES%%</div>
 

@@ -220,14 +220,12 @@
       contain: none;
     }
   </style>
-  <div class="lh-scores-wrapper">
     <div class="lh-scores-container">
       <div class="pyro">
         <div class="before"></div>
         <div class="after"></div>
       </div>
     </div>
-  </div>
 </template>
 
 <!-- Lighthouse topbar -->
@@ -475,14 +473,15 @@
     }
   </style>
 
-  <div class="lh-header-container">
+  <div class="lh-header-inner">
     <div class="lh-scores-wrapper-placeholder"></div>
   </div>
 </template>
 
 
 <!-- Lighthouse footer -->
 <template id="tmpl-lh-footer">
+  <footer class="lh-footer">
   <style>
     .lh-footer {
       padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
@@ -525,7 +524,6 @@
       flex: 1;
     }
   </style>
-  <footer class="lh-footer">
     <!-- TODO(i18n): localize runtime settings -->
     <div class="lh-env">
       <div class="lh-env__title">Runtime Settings</div>

@@ -80,7 +80,7 @@ export class ReportRenderer {
   /**
    * @return {DocumentFragment}
    */
-  _renderReportHeader() {
+  _renderScoresWrapper() {
     const el = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
     const domFragment = this._dom.cloneTemplate('#tmpl-lh-scores-wrapper', this._templateContext);
     const placeholder = this._dom.find('.lh-scores-wrapper-placeholder', el);
@@ -222,24 +222,23 @@ export class ReportRenderer {
       renderer.setTemplateContext(this._templateContext);
     });
 
-    const headerContainer = this._dom.createElement('div');
-    headerContainer.appendChild(this._renderReportHeader());
-
-    const reportContainer = this._dom.createElement('div', 'lh-container');
-    const reportSection = this._dom.createElement('div', 'lh-report');
-    reportSection.appendChild(this._renderReportWarnings(report));
+    const mainEl = this._dom.createElement('div', 'lh-main');
+    const headerEl = this._dom.createElement('header', 'lh-header');
+    mainEl.appendChild(headerEl);
+    headerEl.appendChild(this._renderScoresWrapper());
+    headerEl.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');
+      headerEl.classList.add('lh-header--solo-category');
     }
 
     if (scoreHeader) {
       const scoreScale = this._dom.cloneTemplate('#tmpl-lh-scorescale', this._templateContext);
-      const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
+      const scoresContainer = this._dom.find('.lh-scores-container', headerEl);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
       scoresContainer.appendChild(scoreHeader);
@@ -248,10 +247,10 @@ export class ReportRenderer {
       const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
       stickyHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      reportContainer.appendChild(stickyHeader);
+      headerEl.prepend(stickyHeader);
     }
 
-    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categories = mainEl.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.
@@ -264,14 +263,12 @@ export class ReportRenderer {
     const topbarDocumentFragment = this._renderReportTopbar(report);
 
     reportFragment.appendChild(topbarDocumentFragment);
-    reportFragment.appendChild(reportContainer);
-    reportContainer.appendChild(headerContainer);
-    reportContainer.appendChild(reportSection);
-    reportSection.appendChild(this._renderReportFooter(report));
+    reportFragment.appendChild(mainEl);
+    mainEl.appendChild(this._renderReportFooter(report));
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        reportContainer, fullPageScreenshot.screenshot);
+        mainEl, fullPageScreenshot.screenshot);
     }
 
     return reportFragment;

@@ -73,7 +73,6 @@ export class ReportUIFeatures {
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
 
-    this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     this.onCopy = this.onCopy.bind(this);
     this.onDropDownMenuClick = this.onDropDownMenuClick.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
@@ -91,10 +90,9 @@ export class ReportUIFeatures {
   initFeatures(report) {
     this.json = report;
 
-    this._setupMediaQueryListeners();
     this._dropDown.setup(this.onDropDownMenuClick);
     this._setupThirdPartyFilter();
-    this._setupElementScreenshotOverlay(this._dom.find('.lh-container', this._document));
+    this._setupElementScreenshotOverlay(this._dom.find('.lh-main', this._document));
     this._setUpCollapseDetailsAfterPrinting();
     this._resetUIState();
     this._document.addEventListener('keyup', this.onKeyUp);
@@ -129,7 +127,7 @@ export class ReportUIFeatures {
     // There is only a sticky header when at least 2 categories are present.
     if (Object.keys(this.json.categories).length >= 2) {
       this._setupStickyHeaderElements();
-      const containerEl = this._dom.find('.lh-container', this._document);
+      const containerEl = this._dom.find('.lh-main', this._document);
       const elToAddScrollListener = this._getScrollParent(containerEl);
       elToAddScrollListener.addEventListener('scroll', this._updateStickyHeaderOnScroll);
 
@@ -248,22 +246,6 @@ export class ReportUIFeatures {
     target.dispatchEvent(event);
   }
 
-  _setupMediaQueryListeners() {
-    const mediaQuery = self.matchMedia('(max-width: 500px)');
-    mediaQuery.addListener(this.onMediaQueryChange);
-    // Ensure the handler is called on init
-    this.onMediaQueryChange(mediaQuery);
-  }
-
-  /**
-   * Handle media query change events.
-   * @param {MediaQueryList|MediaQueryListEvent} mql
-   */
-  onMediaQueryChange(mql) {
-    const root = this._dom.find('.lh-root', this._document);
-    root.classList.toggle('lh-narrow', mql.matches);
-  }
-
   _setupThirdPartyFilter() {
     // Some audits should not display the third party filter option.
     const thirdPartyFilterAuditExclusions = [

@@ -52,8 +52,8 @@ describe('ReportRenderer', () => {
     it('should render a report', () => {
       const container = renderer._dom._document.body;
       const output = renderer.renderReport(sampleResults, container);
-      assert.ok(output.querySelector('.lh-header-container'), 'has a header');
-      assert.ok(output.querySelector('.lh-report'), 'has report body');
+      assert.ok(output.querySelector('.lh-header-inner'), 'has a header');
+      assert.ok(output.querySelector('.lh-main'), 'has report body');
       // 3 sets of gauges - one in sticky header, one in scores header, and one in each section.
       assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
           Object.keys(sampleResults.categories).length * 3, 'renders category gauges');
@@ -74,7 +74,7 @@ describe('ReportRenderer', () => {
     });
 
     it('renders a header', () => {
-      const header = renderer._renderReportHeader();
+      const header = renderer._renderScoresWrapper();
       assert.ok(header.querySelector('.lh-scores-container'), 'contains score container');
     });