report: add options disableFireworks and disableDarkMode (#13649)

flow-report/src/wrappers/report.tsx

@@ -33,7 +33,8 @@ export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
 ({hashState}) => {
   const ref = useExternalRenderer<HTMLDivElement>(() => {
     return renderReport(hashState.currentLhr, {
-      disableAutoDarkModeAndFireworks: true,
+      disableFireworks: true,
+      disableDarkMode: true,
       omitTopbar: true,
       omitGlobalStyles: true,
       onPageAnchorRendered: link => convertAnchor(link, hashState.index),

report/renderer/report-ui-features.js

@@ -70,12 +70,13 @@ export class ReportUIFeatures {
     this._setupThirdPartyFilter();
     this._setupElementScreenshotOverlay(this._dom.rootEl);
 
-    let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
-    const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
+    // TODO: set `disableDarkMode` in devtools and delete this special case.
+    const disableDarkMode = this._dom.isDevTools() ||
+      this._opts.disableDarkMode || this._opts.disableAutoDarkModeAndFireworks;
     if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      turnOffTheLights = true;
+      toggleDarkTheme(this._dom, true);
     }
 
     // Fireworks!
@@ -85,13 +86,12 @@ export class ReportUIFeatures {
       const cat = lhr.categories[id];
       return cat && cat.score === 1;
     });
-    if (scoresAll100 && !this._opts.disableAutoDarkModeAndFireworks) {
-      turnOffTheLights = true;
+    const disableFireworks =
+      this._opts.disableFireworks || this._opts.disableAutoDarkModeAndFireworks;
+    if (scoresAll100 && !disableFireworks) {
       this._enableFireworks();
-    }
-
-    if (turnOffTheLights) {
-      toggleDarkTheme(this._dom, true);
+      // If dark mode is allowed, force it on because it looks so much better.
+      if (!disableDarkMode) toggleDarkTheme(this._dom, true);
     }
 
     // Show the metric descriptions by default when there is an error.

report/test-assets/faux-psi.js

@@ -46,7 +46,8 @@ async function renderLHReport() {
 
       const reportRootEl = lighthouseRenderer.renderReport(lhr, {
         omitTopbar: true,
-        disableAutoDarkModeAndFireworks: true,
+        disableFireworks: true,
+        disableDarkMode: true,
       });
       // TODO: display warnings if appropriate.
       for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {

report/types/report-renderer.d.ts

@@ -12,8 +12,16 @@ declare module Renderer {
 
   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. */
+     * Disables automatically applying dark mode based on `prefers-color-scheme: dark`. Dark mode can still
+     * be manually applied by assigning the class `lh-dark` to the report element.
+     */
+    disableDarkMode?: boolean;
+    /** Disables the fireworks animation that plays when all core categories have a 100 score. */
+    disableFireworks?: boolean;
+    /**
+     * Disable dark mode and fireworks.
+     * @deprecated Use `disableDarkMode` and `disableFireworks` instead.
+     */
     disableAutoDarkModeAndFireworks?: boolean;
 
     /** Disable the topbar UI component */