[WFX-454] Add loading of Waterfox custom CSS with nsIStyleSheetService.

waterfox/browser/app/profile/000-waterfox.js

@@ -152,6 +152,7 @@ pref("xpinstall.signatures.required", false);
 
 // ** Theme Related Options ****************************************************
 // == Theme Distribution Settings ==============================================
+pref("userChrome.theme.enable",                   true); // Original, Photon
 pref("userChrome.tab.connect_to_window",          true); // Original, Photon
 pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon
 

waterfox/browser/components/WaterfoxGlue.jsm

@@ -15,8 +15,10 @@ const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 XPCOMUtils.defineLazyModuleGetters(this, {
   AddonManager: "resource://gre/modules/AddonManager.jsm",
   AttributionCode: "resource:///modules/AttributionCode.jsm",
+  BrowserUtils: "resource:///modules/BrowserUtils.jsm",
   ChromeManifest: "resource:///modules/ChromeManifest.jsm",
   Overlays: "resource:///modules/Overlays.jsm",
+  PrefUtils: "resource:///modules/PrefUtils.jsm",
   PrivateTab: "resource:///modules/PrivateTab.jsm",
   StatusBar: "resource:///modules/StatusBar.jsm",
   TabFeatures: "resource:///modules/TabFeatures.jsm",
@@ -30,6 +32,15 @@ const WaterfoxGlue = {
     // Parse attribution data
     this._setAttributionData();
 
+    // Set pref observers
+    this._setPrefObservers();
+
+    // Load always on Waterfox custom CSS.
+    // Add additional CSS here.
+    BrowserUtils.registerStylesheet(
+      "chrome://browser/skin/waterfox/general.css"
+    );
+
     // Parse chrome.manifest
     this.startupManifest = await this.getChromeManifest("startup");
     this.privateManifest = await this.getChromeManifest("private");
@@ -128,6 +139,19 @@ const WaterfoxGlue = {
     }
   },
 
+  async _setPrefObservers() {
+    this.leptonListener = PrefUtils.addObserver(
+      "userChrome.theme.enable",
+      isEnabled => {
+        // Pref being false means we need to unload the sheet.
+        const userChromeSheet = "chrome://browser/skin/userChrome.css";
+        const userContentSheet = "chrome://browser/skin/userContent.css"
+        BrowserUtils.registerOrUnregisterSheet(userChromeSheet, isEnabled);
+        BrowserUtils.registerOrUnregisterSheet(userContentSheet, isEnabled);
+      }
+    );
+  },
+
   async getChromeManifest(manifest) {
     let uri;
     let privateWindow = false;

waterfox/browser/components/utils/BrowserUtils.jsm

@@ -6,6 +6,10 @@
 
 const EXPORTED_SYMBOLS = ["BrowserUtils"];
 
+const { XPCOMUtils } = ChromeUtils.import(
+  "resource://gre/modules/XPCOMUtils.jsm"
+);
+
 const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 
 const { CustomizableUI } = ChromeUtils.import(
@@ -16,6 +20,13 @@ const { PanelMultiView } = ChromeUtils.import(
   "resource:///modules/PanelMultiView.jsm"
 );
 
+XPCOMUtils.defineLazyServiceGetter(
+  this,
+  "styleSheetService",
+  "@mozilla.org/content/style-sheet-service;1",
+  "nsIStyleSheetService"
+);
+
 const BrowserUtils = {
   // internal functions/props
   get mostRecentWindow() {
@@ -61,15 +72,48 @@ const BrowserUtils = {
     }
   },
 
-  executeInAllWindows(aFunc) {
+  /**
+   * Helper function to execute a given function with some args in every open browser window.
+   * Window must be the functions first arg, subsequent args are passed in the same manner
+   * as to executeInAllWindows().
+   * @param func - The function to be called in each open browser window.
+   * @param args - The arguments to supply to the function.
+   * Example:
+   * BrowserUtils.executeInAllWindows(Urlbar.addDynamicStylesheet, "chrome://browser/skin/waterfox.css")
+   */
+  executeInAllWindows(func, ...args) {
     let windows = Services.wm.getEnumerator("navigator:browser");
     while (windows.hasMoreElements()) {
-      let win = windows.getNext();
-      let { document } = win;
-      aFunc(document, win);
+      let window = windows.getNext();
+      func(window, ...args);
+    }
+  },
+
+  /**
+   * Helper method to register or unregister a given stylesheet depending on the bool arg passed.
+   * @param uri - The URI of the stylesheet to register or unregister.
+   * @param enabled - A boolean indicating whether to register or unregister the sheet.
+   */
+  registerOrUnregisterSheet(uri, enabled = false) {
+    if (enabled) {
+      BrowserUtils.registerStylesheet(uri);
+    } else {
+      BrowserUtils.unregisterStylesheet(uri);
     }
   },
 
+  registerStylesheet(uri) {
+    let url = Services.io.newURI(uri);
+    let type = styleSheetService.USER_SHEET;
+    styleSheetService.loadAndRegisterSheet(url, type);
+  },
+
+  unregisterStylesheet(uri) {
+    let url = Services.io.newURI(uri);
+    let type = styleSheetService.USER_SHEET;
+    styleSheetService.unregisterSheet(url, type);
+  },
+
   setStyle(aStyleSheet) {
     let styleSheetService = Cc[
       "@mozilla.org/content/style-sheet-service;1"

waterfox/browser/themes/jar.mn

@@ -4,6 +4,7 @@
 
 browser.jar:
 %  skin browser classic/1.0 %skin/classic/browser/
- skin/classic/browser/userChrome.css     (lepton/leptonChrome.css)
- skin/classic/browser/userContent.css    (lepton/leptonContent.css)
- skin/classic/browser/lepton/            (lepton/icons/*.svg)
+ skin/classic/browser/userChrome.css              (lepton/leptonChrome.css)
+ skin/classic/browser/userContent.css             (lepton/leptonContent.css)
+ skin/classic/browser/lepton/                     (lepton/icons/*.svg)
+* skin/classic/browser/waterfox/general.css       (waterfox/general.css)

waterfox/browser/themes/waterfox/general.css

@@ -0,0 +1,13 @@
+/* Add any imports of other css here. */
+
+%ifndef XP_MACOSX
+  /* Ensure that bottom positioned tabs are colored according to theme */
+  #browser-bottombox {
+    background-color: var(--lwt-accent-color);
+  }
+%endif
+
+/* Ensure that bottom positioned tabs collapse when video's are fullscreen */
+:root[inDOMFullscreen] #browser-bottombox {
+  visibility: collapse;
+}