lighthouse 8.6.0-dev.20211102 → 8.6.0-dev.20211103

package/report/test-assets/faux-psi.js

@@ -26,43 +26,25 @@ const lighthouseRenderer = window['report'];
   for (const [tabId, lhr] of Object.entries(lhrs)) {
     await distinguishLHR(lhr, tabId);
 
-    const container = document.querySelector(`#${tabId} main`);
+    const container = document.querySelector(`section#${tabId}`);
     if (!container) throw new Error('Unexpected DOM. Bailing.');
 
-    renderLHReport(lhr, container);
-  }
-})();
-
-/**
- * @param {LH.Result} lhrData
- * @param {HTMLElement} reportContainer
- */
-function renderLHReport(lhrData, reportContainer) {
-  /**
-   * @param {Document} doc
-   */
-  function getRenderer(doc) {
-    const dom = new lighthouseRenderer.DOM(doc);
-    return new lighthouseRenderer.ReportRenderer(dom);
-  }
-
-  const renderer = getRenderer(reportContainer.ownerDocument);
-  reportContainer.classList.add('lh-root', 'lh-vars');
-
-  try {
-    renderer.renderReport(lhrData, reportContainer);
-    // TODO: handle topbar removal better
-    // TODO: display warnings if appropriate.
-    for (const el of reportContainer.querySelectorAll('.lh-topbar, .lh-warnings')) {
-      el.setAttribute('hidden', 'true');
+    try {
+      const reportRootEl = lighthouseRenderer.renderReport(lhr, {
+        omitTopbar: true,
+        disableAutoDarkModeAndFireworks: true,
+      });
+      // TODO: display warnings if appropriate.
+      for (const el of reportRootEl.querySelectorAll('.lh-warnings')) {
+        el.setAttribute('hidden', 'true');
+      }
+      container.append(reportRootEl);
+    } catch (e) {
+      console.error(e);
+      container.textContent = 'Error: LHR failed to render.';
     }
-    const features = new lighthouseRenderer.ReportUIFeatures(renderer._dom);
-    features.initFeatures(lhrData);
-  } catch (e) {
-    console.error(e);
-    reportContainer.textContent = 'Error: LHR failed to render.';
   }
-}
+})();
 
 
 /**
@@ -72,7 +54,6 @@ function renderLHReport(lhrData, reportContainer) {
  * @param {string} tabId
  */
 async function distinguishLHR(lhr, tabId) {
-  lhr.categories.performance.title += ` ${tabId}`; // for easier identification
   if (tabId === 'desktop') {
     lhr.categories.performance.score = 0.81;
   }

package/report/types/html-renderer.d.ts

@@ -8,6 +8,7 @@ import AuditDetails from '../../types/lhr/audit-details';
 import {FormattedIcu as FormattedIcu_, IcuMessage as IcuMessage_} from '../../types/lhr/i18n';
 import LHResult from '../../types/lhr/lhr';
 import ReportResult_ from './report-result';
+import Renderer_ from './report-renderer';
 import * as Settings from '../../types/lhr/settings';
 import Treemap_ from '../../types/lhr/treemap';
 
@@ -16,6 +17,7 @@ declare global {
   module LH {
     export import Result = LHResult;
     export import ReportResult = ReportResult_;
+    export import Renderer = Renderer_;
     export import Locale = Settings.Locale;
     export type IcuMessage = IcuMessage_;
     export type FormattedIcu<T> = FormattedIcu_<T>;

package/report/types/report-renderer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Result as AuditResult } from "../../types/lhr/audit-result";
+
+declare module Renderer {
+  function renderReport(lhr: AuditResult, options?: Options): HTMLElement;
+
+  interface Options {
+    /**
+     * Don't automatically apply dark-mode to dark based on (prefers-color-scheme: dark). (DevTools and PSI don't want this.)
+     * Also, the fireworks easter-egg will want to flip to dark, so this setting will also disable chance of fireworks. */
+    disableAutoDarkModeAndFireworks?: boolean;
+
+    /** Disable the topbar UI component */
+    omitTopbar?: boolean;
+  }
+}
+
+export default Renderer;