lighthouse 8.6.0 → 9.0.0-dev.20211115

package/report/renderer/crc-details-renderer.js

@@ -21,12 +21,21 @@
  * critical request chains network tree.
  */
 
+import {Util} from './util.js';
+
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
+/**
+ * @typedef CRCSegment
+ * @property {LH.Audit.Details.SimpleCriticalRequestNode[string]} node
+ * @property {boolean} isLastChild
+ * @property {boolean} hasChildren
+ * @property {number} startTime
+ * @property {number} transferSize
+ * @property {boolean[]} treeMarkers
+ */
 
-import {Util} from './util.js';
-
-export class CriticalRequestChainRenderer {
+class CriticalRequestChainRenderer {
   /**
    * Create render context for critical-request-chain tree display.
    * @param {LH.Audit.Details.SimpleCriticalRequestNode} tree
@@ -191,12 +200,6 @@ export class CriticalRequestChainRenderer {
 // Alias b/c the name is really long.
 const CRCRenderer = CriticalRequestChainRenderer;
 
-/** @typedef {{
-      node: LH.Audit.Details.SimpleCriticalRequestNode[string],
-      isLastChild: boolean,
-      hasChildren: boolean,
-      startTime: number,
-      transferSize: number,
-      treeMarkers: Array<boolean>
-  }} CRCSegment
- */
+export {
+  CriticalRequestChainRenderer,
+};

package/report/renderer/dom.js

@@ -27,14 +27,18 @@ import {createComponent} from './components.js';
 export class DOM {
   /**
    * @param {Document} document
+   * @param {HTMLElement} rootEl
    */
-  constructor(document) {
+  constructor(document, rootEl) {
     /** @type {Document} */
     this._document = document;
     /** @type {string} */
     this._lighthouseChannel = 'unknown';
     /** @type {Map<string, DocumentFragment>} */
     this._componentCache = new Map();
+    /** @type {HTMLElement} */
+    // For legacy Report API users, this'll be undefined, but set in renderReport
+    this.rootEl = rootEl;
   }
 
   /**
@@ -76,6 +80,15 @@ export class DOM {
     return this._document.createDocumentFragment();
   }
 
+  /**
+   * @param {string} data
+   * @return {!Node}
+   */
+  createTextNode(data) {
+    return this._document.createTextNode(data);
+  }
+
+
   /**
    * @template {string} T
    * @param {Element} parentElem
@@ -216,6 +229,8 @@ export class DOM {
   }
 
   /**
+   * ONLY use if `dom.rootEl` isn't sufficient for your needs. `dom.rootEl` is preferred
+   * for all scoping, because a document can have multiple reports within it.
    * @return {Document}
    */
   document() {

package/report/renderer/drop-down-menu.js

@@ -36,11 +36,11 @@ export class DropDownMenu {
    * @param {function(MouseEvent): any} menuClickHandler
    */
   setup(menuClickHandler) {
-    this._toggleEl = this._dom.find('button.lh-tools__button', this._dom.document());
+    this._toggleEl = this._dom.find('.lh-topbar button.lh-tools__button', this._dom.rootEl);
     this._toggleEl.addEventListener('click', this.onToggleClick);
     this._toggleEl.addEventListener('keydown', this.onToggleKeydown);
 
-    this._menuEl = this._dom.find('div.lh-tools__dropdown', this._dom.document());
+    this._menuEl = this._dom.find('.lh-topbar div.lh-tools__dropdown', this._dom.rootEl);
     this._menuEl.addEventListener('keydown', this.onMenuKeydown);
     this._menuEl.addEventListener('click', menuClickHandler);
   }

package/report/renderer/element-screenshot-renderer.js

@@ -18,7 +18,7 @@
 /**
  * @typedef InstallOverlayFeatureParams
  * @property {DOM} dom
- * @property {Element} reportEl
+ * @property {Element} rootEl
  * @property {Element} overlayContainerEl
  * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
  */
@@ -51,7 +51,7 @@ function clamp(value, min, max) {
 /**
  * @param {Rect} rect
  */
-function getRectCenterPoint(rect) {
+function getElementRectCenterPoint(rect) {
   return {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2,
@@ -68,7 +68,7 @@ export class ElementScreenshotRenderer {
    * @param {Size} screenshotSize
    */
   static getScreenshotPositions(elementRectSC, elementPreviewSizeSC, screenshotSize) {
-    const elementRectCenter = getRectCenterPoint(elementRectSC);
+    const elementRectCenter = getElementRectCenterPoint(elementRectSC);
 
     // Try to center clipped region.
     const screenshotLeftVisibleEdge = clamp(
@@ -135,7 +135,7 @@ export class ElementScreenshotRenderer {
    * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
-    el.style.setProperty('--element-screenshot-url', `url(${screenshot.data})`);
+    el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
   }
 
   /**
@@ -143,14 +143,14 @@ export class ElementScreenshotRenderer {
    * @param {InstallOverlayFeatureParams} opts
    */
   static installOverlayFeature(opts) {
-    const {dom, reportEl, overlayContainerEl, fullPageScreenshot} = opts;
+    const {dom, rootEl, overlayContainerEl, fullPageScreenshot} = opts;
     const screenshotOverlayClass = 'lh-screenshot-overlay--enabled';
     // Don't install the feature more than once.
-    if (reportEl.classList.contains(screenshotOverlayClass)) return;
-    reportEl.classList.add(screenshotOverlayClass);
+    if (rootEl.classList.contains(screenshotOverlayClass)) return;
+    rootEl.classList.add(screenshotOverlayClass);
 
     // Add a single listener to the provided element to handle all clicks within (event delegation).
-    reportEl.addEventListener('click', e => {
+    rootEl.addEventListener('click', e => {
       const target = /** @type {?HTMLElement} */ (e.target);
       if (!target) return;
       // Only activate the overlay for clicks on the screenshot *preview* of an element, not the full-size too.

package/report/renderer/features-util.js

@@ -14,7 +14,7 @@
  * @param {boolean} [force]
  */
 export function toggleDarkTheme(dom, force) {
-  const el = dom.find('.lh-vars', dom.document());
+  const el = dom.rootEl;
   // This seems unnecessary, but in DevTools, passing "undefined" as the second
   // parameter acts like passing "false".
   // https://github.com/ChromeDevTools/devtools-frontend/blob/dd6a6d4153647c2a4203c327c595692c5e0a4256/front_end/dom_extension/DOMExtension.js#L809-L819

package/report/renderer/open-tab.js

@@ -90,7 +90,7 @@ async function openTabWithUrlData(data, url_, windowName) {
  * @param {LH.Result} lhr
  * @protected
  */
-export async function openViewer(lhr) {
+async function openViewer(lhr) {
   const windowName = 'viewer-' + computeWindowNameSuffix(lhr);
   const url = getAppsOrigin() + '/viewer/';
   await openTabWithUrlData({lhr}, url, windowName);
@@ -101,7 +101,7 @@ export async function openViewer(lhr) {
  * @param {LH.Result} lhr
  * @protected
  */
-export async function openViewerAndSendData(lhr) {
+async function openViewerAndSendData(lhr) {
   const windowName = 'viewer-' + computeWindowNameSuffix(lhr);
   const url = getAppsOrigin() + '/viewer/';
   openTabAndSendData({lhr}, url, windowName);
@@ -111,7 +111,7 @@ export async function openViewerAndSendData(lhr) {
  * Opens a new tab to the treemap app and sends the JSON results using URL.fragment
  * @param {LH.Result} json
  */
-export function openTreemap(json) {
+function openTreemap(json) {
   const treemapData = json.audits['script-treemap-data'].details;
   if (!treemapData) {
     throw new Error('no script treemap data found');
@@ -135,3 +135,9 @@ export function openTreemap(json) {
 
   openTabWithUrlData(treemapOptions, url, windowName);
 }
+
+export {
+  openViewer,
+  openViewerAndSendData,
+  openTreemap,
+};

package/report/renderer/performance-category-renderer.js

@@ -152,42 +152,62 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     return url.href;
   }
 
+  /**
+   * For performance, audits with no group should be a diagnostic or opportunity.
+   * The audit details type will determine which of the two groups an audit is in.
+   *
+   * @param {LH.ReportResult.AuditRef} audit
+   * @return {'load-opportunity'|'diagnostic'|null}
+   */
+  _classifyPerformanceAudit(audit) {
+    if (audit.group) return null;
+    if (audit.result.details && audit.result.details.type === 'opportunity') {
+      return 'load-opportunity';
+    }
+    return 'diagnostic';
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
-   * @param {{gatherMode: LH.Result.GatherMode, environment?: 'PSI'}=} options
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    * @override
    */
   render(category, groups, options) {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
-    if (options && options.environment === 'PSI') {
-      const gaugeEl = this.dom.createElement('div', 'lh-score__gauge');
-      gaugeEl.appendChild(this.renderCategoryScore(category, groups, options));
-      element.appendChild(gaugeEl);
-    } else {
-      element.id = category.id;
-      element.appendChild(this.renderCategoryHeader(category, groups, options));
-    }
+    element.id = category.id;
+    element.appendChild(this.renderCategoryHeader(category, groups, options));
 
     // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
     if (metricAudits.length) {
-      const metricAuditsEl = this.renderAuditGroup(groups.metrics);
+      const [metricsGroupEl, metricsFooterEl] = this.renderAuditGroup(groups.metrics);
 
       // Metric descriptions toggle.
-      const toggleTmpl = this.dom.createComponent('metricsToggle');
-      const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-      metricAuditsEl.append(..._toggleEl.childNodes);
-
-      const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
-
+      const checkboxEl = this.dom.createElement('input', 'lh-metrics-toggle__input');
+      const checkboxId = `lh-metrics-toggle${Util.getUniqueSuffix()}`;
+      checkboxEl.setAttribute('aria-label', 'Toggle the display of metric descriptions');
+      checkboxEl.type = 'checkbox';
+      checkboxEl.id = checkboxId;
+      metricsGroupEl.prepend(checkboxEl);
+      const metricHeaderEl = this.dom.find('.lh-audit-group__header', metricsGroupEl);
+      const labelEl = this.dom.createChildOf(metricHeaderEl, 'label', 'lh-metrics-toggle__label');
+      labelEl.htmlFor = checkboxId;
+      const showEl = this.dom.createChildOf(labelEl, 'span', 'lh-metrics-toggle__labeltext--show');
+      const hideEl = this.dom.createChildOf(labelEl, 'span', 'lh-metrics-toggle__labeltext--hide');
+      showEl.textContent = Util.i18n.strings.expandView;
+      hideEl.textContent = Util.i18n.strings.collapseView;
+
+      const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
+      metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
       metricAudits.forEach(item => {
         metricsBoxesEl.appendChild(this._renderMetric(item));
       });
 
-      const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
+      const descriptionEl = this.dom.find('.lh-category-header__description', element);
+      const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
       const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
       estValuesEl.appendChild(disclaimerEl);
 
@@ -198,8 +218,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
 
 
-      metricAuditsEl.classList.add('lh-audit-group--metrics');
-      element.appendChild(metricAuditsEl);
+      metricsGroupEl.classList.add('lh-audit-group--metrics');
+      element.appendChild(metricsGroupEl);
     }
 
     // Filmstrip
@@ -214,10 +234,10 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Opportunities
     const opportunityAudits = category.auditRefs
-        .filter(audit => audit.group === 'load-opportunities' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'load-opportunity')
+        .filter(audit => !Util.showAsPassed(audit.result))
         .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
 
-
     const filterableMetrics = metricAudits.filter(a => !!a.relevantAudits);
     // TODO: only add if there are opportunities & diagnostics rendered.
     if (filterableMetrics.length) {
@@ -230,7 +250,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const wastedMsValues = opportunityAudits.map(audit => this._getWastedMs(audit));
       const maxWaste = Math.max(...wastedMsValues);
       const scale = Math.max(Math.ceil(maxWaste / 1000) * 1000, minimumScale);
-      const groupEl = this.renderAuditGroup(groups['load-opportunities']);
+      const [groupEl, footerEl] = this.renderAuditGroup(groups['load-opportunities']);
       const tmpl = this.dom.createComponent('opportunityHeader');
 
       this.dom.find('.lh-load-opportunity__col--one', tmpl).textContent =
@@ -239,15 +259,17 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         strings.opportunitySavingsColumnLabel;
 
       const headerEl = this.dom.find('.lh-load-opportunity__header', tmpl);
-      groupEl.appendChild(headerEl);
-      opportunityAudits.forEach(item => groupEl.appendChild(this._renderOpportunity(item, scale)));
+      groupEl.insertBefore(headerEl, footerEl);
+      opportunityAudits.forEach(item =>
+        groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
       groupEl.classList.add('lh-audit-group--load-opportunities');
       element.appendChild(groupEl);
     }
 
     // Diagnostics
     const diagnosticAudits = category.auditRefs
-        .filter(audit => audit.group === 'diagnostics' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'diagnostic')
+        .filter(audit => !Util.showAsPassed(audit.result))
         .sort((a, b) => {
           const scoreA = a.result.scoreDisplayMode === 'informative' ? 100 : Number(a.result.score);
           const scoreB = b.result.scoreDisplayMode === 'informative' ? 100 : Number(b.result.score);
@@ -255,16 +277,15 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         });
 
     if (diagnosticAudits.length) {
-      const groupEl = this.renderAuditGroup(groups['diagnostics']);
-      diagnosticAudits.forEach(item => groupEl.appendChild(this.renderAudit(item)));
+      const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
+      diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
       element.appendChild(groupEl);
     }
 
     // Passed audits
     const passedAudits = category.auditRefs
-        .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
-            Util.showAsPassed(audit.result));
+        .filter(audit => this._classifyPerformanceAudit(audit) && Util.showAsPassed(audit.result));
 
     if (!passedAudits.length) return element;
 
@@ -284,16 +305,16 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         const table = this.detailsRenderer.render(audit.result.details);
         if (table) {
           table.id = id;
-          table.classList.add('lh-audit');
+          table.classList.add('lh-details', 'lh-details--budget', 'lh-audit');
           budgetTableEls.push(table);
         }
       }
     });
     if (budgetTableEls.length > 0) {
-      const budgetsGroupEl = this.renderAuditGroup(groups.budgets);
-      budgetTableEls.forEach(table => budgetsGroupEl.appendChild(table));
-      budgetsGroupEl.classList.add('lh-audit-group--budgets');
-      element.appendChild(budgetsGroupEl);
+      const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
+      budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
+      groupEl.classList.add('lh-audit-group--budgets');
+      element.appendChild(groupEl);
     }
 
     return element;

package/report/renderer/pwa-category-renderer.js

@@ -47,16 +47,6 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     return categoryElem;
   }
 
-  /**
-   * Alias for backcompat.
-   * @param {LH.ReportResult.Category} category
-   * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
-   * @return {DocumentFragment}
-   */
-  renderScoreGauge(category, groupDefinitions) {
-    return this.renderCategoryScore(category, groupDefinitions);
-  }
-
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions

package/report/renderer/report-renderer.js

@@ -36,22 +36,43 @@ export class ReportRenderer {
   constructor(dom) {
     /** @type {DOM} */
     this._dom = dom;
+    /** @type {LH.Renderer.Options} */
+    this._opts = {};
   }
 
   /**
    * @param {LH.Result} lhr
-   * @param {Element} container Parent element to render the report into.
+   * @param {HTMLElement?} rootEl Report root element containing the report
+   * @param {LH.Renderer.Options=} opts
    * @return {!Element}
    */
-  renderReport(lhr, container) {
+  renderReport(lhr, rootEl, opts) {
+    // Allow legacy report rendering API
+    if (!this._dom.rootEl && rootEl) {
+      console.warn('Please adopt the new report API in renderer/api.js.');
+      const closestRoot = rootEl.closest('.lh-root');
+      if (closestRoot) {
+        this._dom.rootEl = /** @type {HTMLElement} */ (closestRoot);
+      } else {
+        rootEl.classList.add('lh-root', 'lh-vars');
+        this._dom.rootEl = rootEl;
+      }
+    } else if (this._dom.rootEl && rootEl) {
+      // Handle legacy flow-report case
+      this._dom.rootEl = rootEl;
+    }
+    if (opts) {
+      this._opts = opts;
+    }
+
     this._dom.setLighthouseChannel(lhr.configSettings.channel || 'unknown');
 
     const report = Util.prepareReportResult(lhr);
 
-    container.textContent = ''; // Remove previous report.
-    container.appendChild(this._renderReport(report));
+    this._dom.rootEl.textContent = ''; // Remove previous report.
+    this._dom.rootEl.appendChild(this._renderReport(report));
 
-    return container;
+    return this._dom.rootEl;
   }
 
   /**
@@ -85,44 +106,64 @@ export class ReportRenderer {
   _renderReportFooter(report) {
     const footer = this._dom.createComponent('footer');
 
-    const env = this._dom.find('.lh-env__items', footer);
-    env.id = 'runtime-settings';
-    this._dom.find('.lh-env__title', footer).textContent = Util.i18n.strings.runtimeSettingsTitle;
-
-    const envValues = Util.getEnvironmentDisplayValues(report.configSettings || {});
-    const runtimeValues = [
-      {name: Util.i18n.strings.runtimeSettingsUrl, description: report.finalUrl},
-      {name: Util.i18n.strings.runtimeSettingsFetchTime,
-        description: Util.i18n.formatDateTime(report.fetchTime)},
-      ...envValues,
-      {name: Util.i18n.strings.runtimeSettingsChannel, description: report.configSettings.channel},
-      {name: Util.i18n.strings.runtimeSettingsUA, description: report.userAgent},
-      {name: Util.i18n.strings.runtimeSettingsUANetwork, description: report.environment &&
-        report.environment.networkUserAgent},
-      {name: Util.i18n.strings.runtimeSettingsBenchmark, description: report.environment &&
-        report.environment.benchmarkIndex.toFixed(0)},
-    ];
-    if (report.environment.credits && report.environment.credits['axe-core']) {
-      runtimeValues.push({
-        name: Util.i18n.strings.runtimeSettingsAxeVersion,
-        description: report.environment.credits['axe-core'],
-      });
-    }
-
-    for (const runtime of runtimeValues) {
-      if (!runtime.description) continue;
-
-      const item = this._dom.createComponent('envItem');
-      this._dom.find('.lh-env__name', item).textContent = runtime.name;
-      this._dom.find('.lh-env__description', item).textContent = runtime.description;
-      env.appendChild(item);
-    }
+    this._renderMetaBlock(report, footer);
 
     this._dom.find('.lh-footer__version_issue', footer).textContent = Util.i18n.strings.footerIssue;
     this._dom.find('.lh-footer__version', footer).textContent = report.lighthouseVersion;
     return footer;
   }
 
+  /**
+   * @param {LH.ReportResult} report
+   * @param {DocumentFragment} footer
+   */
+  _renderMetaBlock(report, footer) {
+    const envValues = Util.getEmulationDescriptions(report.configSettings || {});
+
+
+    const match = report.userAgent.match(/(\w*Chrome\/[\d.]+)/); // \w* to include 'HeadlessChrome'
+    const chromeVer = Array.isArray(match)
+      ? match[1].replace('/', ' ').replace('Chrome', 'Chromium')
+      : 'Chromium';
+    const channel = report.configSettings.channel;
+    const benchmarkIndex = report.environment.benchmarkIndex.toFixed(0);
+    const axeVersion = report.environment.credits?.['axe-core'];
+
+    // [CSS icon class, textContent, tooltipText]
+    const metaItems = [
+      ['date',
+        `Captured at ${Util.i18n.formatDateTime(report.fetchTime)}`],
+      ['devices',
+        `${envValues.deviceEmulation} with Lighthouse ${report.lighthouseVersion}`,
+        `${Util.i18n.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}` +
+            `\n${Util.i18n.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}` +
+            (axeVersion ? `\n${Util.i18n.strings.runtimeSettingsAxeVersion}: ${axeVersion}` : '')],
+      ['samples-one',
+        Util.i18n.strings.runtimeSingleLoad,
+        Util.i18n.strings.runtimeSingleLoadTooltip],
+      ['stopwatch',
+        Util.i18n.strings.runtimeAnalysisWindow],
+      ['networkspeed',
+        `${envValues.summary}`,
+        `${Util.i18n.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
+      ['chrome',
+        `Using ${chromeVer}` + (channel ? ` with ${channel}` : ''),
+        `${Util.i18n.strings.runtimeSettingsUANetwork}: "${report.environment.networkUserAgent}"`],
+    ];
+
+    const metaItemsEl = this._dom.find('.lh-meta__items', footer);
+    for (const [iconname, text, tooltip] of metaItems) {
+      const itemEl = this._dom.createChildOf(metaItemsEl, 'li', 'lh-meta__item');
+      itemEl.textContent = text;
+      if (tooltip) {
+        itemEl.classList.add('lh-tooltip-boundary');
+        const tooltipEl = this._dom.createChildOf(itemEl, 'div', 'lh-tooltip');
+        tooltipEl.textContent = tooltip;
+      }
+      itemEl.classList.add('lh-report-icon', `lh-report-icon--${iconname}`);
+    }
+  }
+
   /**
    * Returns a div with a list of top-level warnings, or an empty div if no warnings.
    * @param {LH.ReportResult} report
@@ -177,7 +218,7 @@ export class ReportRenderer {
         gaugeWrapperEl.addEventListener('click', e => {
           if (!gaugeWrapperEl.matches('[href^="#"]')) return;
           const selector = gaugeWrapperEl.getAttribute('href');
-          const reportRoot = gaugeWrapperEl.closest('.lh-vars');
+          const reportRoot = this._dom.rootEl;
           if (!selector || !reportRoot) return;
           const destEl = this._dom.find(selector, reportRoot);
           e.preventDefault();
@@ -192,7 +233,7 @@ export class ReportRenderer {
         // The renderer for default categories is just the default CategoryRenderer.
         // If the functions are equal, then renderer is an instance of CategoryRenderer.
         // For example, the PWA category uses PwaCategoryRenderer, which overrides
-        // CategoryRenderer.renderScoreGauge, so it would fail this check and be placed
+        // CategoryRenderer.renderCategoryScore, so it would fail this check and be placed
         // in the customGauges bucket.
         defaultGauges.push(categoryGauge);
       } else {
@@ -247,8 +288,10 @@ export class ReportRenderer {
       headerContainer.classList.add('lh-header--solo-category');
     }
 
+    const scoreScale = this._dom.createElement('div');
+    scoreScale.classList.add('lh-scorescale-wrap');
+    scoreScale.append(this._dom.createComponent('scorescale'));
     if (scoreHeader) {
-      const scoreScale = this._dom.createComponent('scorescale');
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
@@ -266,7 +309,7 @@ export class ReportRenderer {
     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);
+      // .lh-category within has the max-width: var(--report-content-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
       wrapper.appendChild(renderer.render(
         category,
@@ -275,11 +318,15 @@ export class ReportRenderer {
       ));
     }
 
+    categoryRenderer.injectFinalScreenshot(categories, report.audits, scoreScale);
+
     const reportFragment = this._dom.createFragment();
     reportFragment.append(this._dom.createComponent('styles'));
-    const topbarDocumentFragment = this._renderReportTopbar(report);
 
-    reportFragment.appendChild(topbarDocumentFragment);
+    if (!this._opts.omitTopbar) {
+      reportFragment.appendChild(this._renderReportTopbar(report));
+    }
+
     reportFragment.appendChild(reportContainer);
     reportContainer.appendChild(headerContainer);
     reportContainer.appendChild(reportSection);
@@ -287,7 +334,7 @@ export class ReportRenderer {
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        reportContainer, fullPageScreenshot.screenshot);
+        this._dom.rootEl, fullPageScreenshot.screenshot);
     }
 
     return reportFragment;