Merge pull request #12625 from Snuffleupagus/viewerCssTheme-option

Add a new preference, `viewerCssTheme`, to allow forcing the use of the light/dark viewer CSS themes (issue 12290)
mozilla · Nov 16, 2020 · eda730a · eda730a
2 parents f39d87b + 40a4d53
commit eda730a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/extensions/chromium/preferences_schema.json b/extensions/chromium/preferences_schema.json
@@ -198,6 +198,15 @@
         2
       ],
       "default": -1
+    },
+    "viewerCssTheme": {
+      "type": "integer",
+      "enum": [
+        0,
+        1,
+        2
+      ],
+      "default": 0
     }
   }
 }
diff --git a/web/app.js b/web/app.js
@@ -90,6 +90,12 @@ const ViewOnLoad = {
   INITIAL: 1,
 };
 
+const ViewerCssTheme = {
+  AUTOMATIC: 0, // Default value.
+  LIGHT: 1,
+  DARK: 2,
+};
+
 // Keep these in sync with mozilla-central's Histograms.json.
 const KNOWN_VERSIONS = [
   "1.0",
@@ -256,6 +262,7 @@ const PDFViewerApplication = {
 
     await this._readPreferences();
     await this._parseHashParameters();
+    this._forceCssTheme();
     await this._initializeL10n();
 
     if (
@@ -396,6 +403,46 @@ const PDFViewerApplication = {
     document.getElementsByTagName("html")[0].dir = dir;
   },
 
+  /**
+   * @private
+   */
+  _forceCssTheme() {
+    const cssTheme = AppOptions.get("viewerCssTheme");
+    if (
+      cssTheme === ViewerCssTheme.AUTOMATIC ||
+      !Object.values(ViewerCssTheme).includes(cssTheme)
+    ) {
+      return;
+    }
+    try {
+      const styleSheet = document.styleSheets[0];
+      const cssRules = styleSheet?.cssRules || [];
+      for (let i = 0, ii = cssRules.length; i < ii; i++) {
+        const rule = cssRules[i];
+        if (
+          rule instanceof CSSMediaRule &&
+          rule.media?.[0] === "(prefers-color-scheme: dark)"
+        ) {
+          if (cssTheme === ViewerCssTheme.LIGHT) {
+            styleSheet.deleteRule(i);
+            return;
+          }
+          // cssTheme === ViewerCssTheme.DARK
+          const darkRules = /^@media \(prefers-color-scheme: dark\) {\n\s*([\w\s-.,:;/\\{}()]+)\n}$/.exec(
+            rule.cssText
+          );
+          if (darkRules?.[1]) {
+            styleSheet.deleteRule(i);
+            styleSheet.insertRule(darkRules[1], i);
+          }
+          return;
+        }
+      }
+    } catch (reason) {
+      console.error(`_forceCssTheme: "${reason?.message}".`);
+    }
+  },
+
   /**
    * @private
    */

diff --git a/web/app_options.js b/web/app_options.js
@@ -154,6 +154,11 @@ const defaultOptions = {
     value: false,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
+  viewerCssTheme: {
+    /** @type {number} */
+    value: 0,
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  },
   viewOnLoad: {
     /** @type {boolean} */
     value: 0,