From 96ed5edb459c56073899dcac15336630659109e6 Mon Sep 17 00:00:00 2001
From: Alex Kontos <MrAlex94@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:40:21 +0100
Subject: [PATCH] Better Waterfox custom CSS, enable on non-default themes by
 default.

---
 .../content/preferences-theme.xhtml           |  11 +-
 .../components/preferences/content/theme.js   | 443 +++++++++---------
 2 files changed, 237 insertions(+), 217 deletions(-)

diff --git a/waterfox/browser/components/preferences/content/preferences-theme.xhtml b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
index f25d1fc3a1477..313c6ecdfd977 100644
--- a/waterfox/browser/components/preferences/content/preferences-theme.xhtml
+++ b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
@@ -26,7 +26,16 @@
     </hbox>
 
     <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
-        <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" />
+        <!-- <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" /> -->
+        <hbox>
+            <menulist id="enableWaterfoxTheme" preference="browser.theme.enableWaterfoxCustomizations">
+                <menupopup>
+                    <menuitem data-l10n-id="enable-waterfox-theme-0" value="0" />
+                    <menuitem data-l10n-id="enable-waterfox-theme-1" value="1" />
+                    <menuitem data-l10n-id="enable-waterfox-theme-2" value="2" />
+                </menupopup>
+            </menulist>
+        </hbox>
         <hbox>
             <vbox id="waterfoxUserChromeCustomizations">
                 <!-- Tab Bar -->
diff --git a/waterfox/browser/components/preferences/content/theme.js b/waterfox/browser/components/preferences/content/theme.js
index b384f97603b84..431fd626cc2fa 100644
--- a/waterfox/browser/components/preferences/content/theme.js
+++ b/waterfox/browser/components/preferences/content/theme.js
@@ -2,376 +2,387 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* eslint-env mozilla/browser-window */
-"use strict";
-
 const { PrefUtils } = ChromeUtils.importESModule(
-  "resource:///modules/PrefUtils.sys.mjs"
-);
+  'resource:///modules/PrefUtils.sys.mjs'
+)
 
 XPCOMUtils.defineLazyServiceGetter(
   this,
-  "styleSheetService",
-  "@mozilla.org/content/style-sheet-service;1",
-  "nsIStyleSheetService"
-);
-
-var gThemePane = {
-  WATERFOX_THEME_PREF: "userChrome.theme.enable",
+  'styleSheetService',
+  '@mozilla.org/content/style-sheet-service;1',
+  'nsIStyleSheetService'
+)
+
+const gThemePane = {
+  WATERFOX_THEME_PREF: 'browser.theme.enableWaterfoxCustomizations',
+  WATERFOX_CUSTOMIZATIONS_PREF: 'browser.theme.enableWaterfoxCustomizations',
+  WATERFOX_DEFAULT_THEMES: [
+    'default-theme@mozilla.org',
+    'firefox-compact-light@mozilla.org',
+    'firefox-compact-dark@mozilla.org',
+    'firefox-alpenglow@mozilla.org',
+  ],
 
   _prefObservers: [],
 
   get preferences() {
     return [
       // Waterfox Customizations
-      { id: "userChrome.theme.enable", type: "bool" },
+      { id: 'browser.theme.enableWaterfoxCustomizations', type: 'int' },
 
       // Tab Bar
-      { id: "userChrome.autohide.tab", type: "bool" },
-      { id: "userChrome.autohide.tab.blur", type: "bool" },
-      { id: "userChrome.autohide.tabbar", type: "bool" },
-      { id: "userChrome.centered.tab", type: "bool" },
-      { id: "userChrome.centered.tab.label", type: "bool" },
-      { id: "userChrome.rounding.square_tab", type: "bool" },
-      { id: "userChrome.tab.bottom_rounded_corner", type: "bool" },
-      { id: "userChrome.tab.photon_like_contextline", type: "bool" },
-      { id: "userChrome.tab.squareTabCorners", type: "bool" },
-      { id: "userChrome.padding.drag_space", type: "bool" },
-      { id: "userChrome.tab.close_button_at_hover", type: "bool" },
+      { id: 'userChrome.autohide.tab', type: 'bool' },
+      { id: 'userChrome.autohide.tab.blur', type: 'bool' },
+      { id: 'userChrome.autohide.tabbar', type: 'bool' },
+      { id: 'userChrome.centered.tab', type: 'bool' },
+      { id: 'userChrome.centered.tab.label', type: 'bool' },
+      { id: 'userChrome.rounding.square_tab', type: 'bool' },
+      { id: 'userChrome.tab.bottom_rounded_corner', type: 'bool' },
+      { id: 'userChrome.tab.photon_like_contextline', type: 'bool' },
+      { id: 'userChrome.tab.squareTabCorners', type: 'bool' },
+      { id: 'userChrome.padding.drag_space', type: 'bool' },
+      { id: 'userChrome.tab.close_button_at_hover', type: 'bool' },
 
       // Nav Bar
-      { id: "userChrome.autohide.back_button", type: "bool" },
-      { id: "userChrome.autohide.forward_button", type: "bool" },
-      { id: "userChrome.autohide.page_action", type: "bool" },
-      { id: "userChrome.hidden.urlbar_iconbox", type: "bool" },
-      { id: "userChrome.centered.urlbar", type: "bool" },
-      { id: "userChrome.rounding.square_button", type: "bool" },
-      { id: "userChrome.padding.urlView_expanding", type: "bool" },
+      { id: 'userChrome.autohide.back_button', type: 'bool' },
+      { id: 'userChrome.autohide.forward_button', type: 'bool' },
+      { id: 'userChrome.autohide.page_action', type: 'bool' },
+      { id: 'userChrome.hidden.urlbar_iconbox', type: 'bool' },
+      { id: 'userChrome.centered.urlbar', type: 'bool' },
+      { id: 'userChrome.rounding.square_button', type: 'bool' },
+      { id: 'userChrome.padding.urlView_expanding', type: 'bool' },
 
       // Bookmarks Bar
-      { id: "userChrome.autohide.bookmarkbar", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_icon", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_label", type: "bool" },
+      { id: 'userChrome.autohide.bookmarkbar', type: 'bool' },
+      { id: 'userChrome.hidden.bookmarkbar_icon', type: 'bool' },
+      { id: 'userChrome.hidden.bookmarkbar_label', type: 'bool' },
 
       // Panels
-      { id: "userChrome.theme.transparent.panel", type: "bool" },
-      { id: "userChrome.theme.transparent.menu", type: "bool" },
-      { id: "userChrome.decoration.disable_panel_animate", type: "bool" },
-      { id: "userChrome.hidden.disabled_menu", type: "bool" },
-      { id: "userChrome.rounding.square_panel", type: "bool" },
-      { id: "userChrome.rounding.square_panelitem", type: "bool" },
-      { id: "userChrome.rounding.square_menupopup", type: "bool" },
-      { id: "userChrome.rounding.square_menuitem", type: "bool" },
-      { id: "userChrome.rounding.square_field", type: "bool" },
-      { id: "userChrome.rounding.square_checklabel", type: "bool" },
-      { id: "userChrome.padding.menu_compact", type: "bool" },
-      { id: "userChrome.padding.bookmark_menu.compact", type: "bool" },
-      { id: "userChrome.padding.panel_header", type: "bool" },
-      { id: "userChrome.panel.remove_strip", type: "bool" },
-      { id: "userChrome.panel.full_width_separator", type: "bool" },
+      { id: 'userChrome.theme.transparent.panel', type: 'bool' },
+      { id: 'userChrome.theme.transparent.menu', type: 'bool' },
+      { id: 'userChrome.decoration.disable_panel_animate', type: 'bool' },
+      { id: 'userChrome.hidden.disabled_menu', type: 'bool' },
+      { id: 'userChrome.rounding.square_panel', type: 'bool' },
+      { id: 'userChrome.rounding.square_panelitem', type: 'bool' },
+      { id: 'userChrome.rounding.square_menupopup', type: 'bool' },
+      { id: 'userChrome.rounding.square_menuitem', type: 'bool' },
+      { id: 'userChrome.rounding.square_field', type: 'bool' },
+      { id: 'userChrome.rounding.square_checklabel', type: 'bool' },
+      { id: 'userChrome.padding.menu_compact', type: 'bool' },
+      { id: 'userChrome.padding.bookmark_menu.compact', type: 'bool' },
+      { id: 'userChrome.padding.panel_header', type: 'bool' },
+      { id: 'userChrome.panel.remove_strip', type: 'bool' },
+      { id: 'userChrome.panel.full_width_separator', type: 'bool' },
 
       // Sidebar
-      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
-      { id: "userChrome.autohide.sidebar", type: "bool" },
-      { id: "userChrome.hidden.sidebar_header", type: "bool" },
+      { id: 'userChrome.decoration.disable_sidebar_animate', type: 'bool' },
+      { id: 'userChrome.autohide.sidebar', type: 'bool' },
+      { id: 'userChrome.hidden.sidebar_header', type: 'bool' },
 
       // Icons
-      { id: "userChrome.icon.disabled", type: "bool" },
-      { id: "userChrome.hidden.tab_icon", type: "bool" },
-      { id: "userChrome.icon.menu.full", type: "bool" },
-      { id: "userChrome.icon.global_menu.mac", type: "bool" },
+      { id: 'userChrome.icon.disabled', type: 'bool' },
+      { id: 'userChrome.hidden.tab_icon', type: 'bool' },
+      { id: 'userChrome.icon.menu.full', type: 'bool' },
+      { id: 'userChrome.icon.global_menu.mac', type: 'bool' },
 
       // Font
-      { id: "userContent.page.monospace", type: "bool" },
-      { id: "userChrome.theme.monospace", type: "bool" },
-    ];
+      { id: 'userContent.page.monospace', type: 'bool' },
+      { id: 'userChrome.theme.monospace', type: 'bool' },
+    ]
   },
 
   get nestedPrefs() {
     return [
       {
-        id: "autoBlurTabs",
-        pref: "userChrome.autohide.tab",
+        id: 'autoBlurTabs',
+        pref: 'userChrome.autohide.tab',
       },
       {
-        id: "centerTabLabel",
-        pref: "userChrome.centered.tab",
+        id: 'centerTabLabel',
+        pref: 'userChrome.centered.tab',
       },
-    ];
+    ]
   },
 
   get presets() {
     return [
       {
-        id: "roundedCorners",
+        id: 'roundedCorners',
         on: [
-          { id: "userChrome.tab.squareTabCorners", value: false },
-          { id: "userChrome.rounding.square_button", value: false },
-          { id: "userChrome.rounding.square_panel", value: false },
-          { id: "userChrome.rounding.square_panelitem", value: false },
-          { id: "userChrome.rounding.square_menupopup", value: false },
-          { id: "userChrome.rounding.square_menuitem", value: false },
-          { id: "userChrome.rounding.square_field", value: false },
-          { id: "userChrome.rounding.square_checklabel", value: false },
+          { id: 'userChrome.tab.squareTabCorners', value: false },
+          { id: 'userChrome.rounding.square_button', value: false },
+          { id: 'userChrome.rounding.square_panel', value: false },
+          { id: 'userChrome.rounding.square_panelitem', value: false },
+          { id: 'userChrome.rounding.square_menupopup', value: false },
+          { id: 'userChrome.rounding.square_menuitem', value: false },
+          { id: 'userChrome.rounding.square_field', value: false },
+          { id: 'userChrome.rounding.square_checklabel', value: false },
         ],
         off: [
-          { id: "userChrome.tab.squareTabCorners", value: true },
-          { id: "userChrome.rounding.square_button", value: true },
-          { id: "userChrome.rounding.square_panel", value: true },
-          { id: "userChrome.rounding.square_panelitem", value: true },
-          { id: "userChrome.rounding.square_menupopup", value: true },
-          { id: "userChrome.rounding.square_menuitem", value: true },
-          { id: "userChrome.rounding.square_field", value: true },
-          { id: "userChrome.rounding.square_checklabel", value: true },
+          { id: 'userChrome.tab.squareTabCorners', value: true },
+          { id: 'userChrome.rounding.square_button', value: true },
+          { id: 'userChrome.rounding.square_panel', value: true },
+          { id: 'userChrome.rounding.square_panelitem', value: true },
+          { id: 'userChrome.rounding.square_menupopup', value: true },
+          { id: 'userChrome.rounding.square_menuitem', value: true },
+          { id: 'userChrome.rounding.square_field', value: true },
+          { id: 'userChrome.rounding.square_checklabel', value: true },
         ],
       },
       {
-        id: "autohideElements",
+        id: 'autohideElements',
         on: [
-          { id: "userChrome.autohide.tab", value: true },
-          { id: "userChrome.autohide.tab.blur", value: true },
-          { id: "userChrome.autohide.tabbar", value: true },
-          { id: "userChrome.autohide.back_button", value: true },
-          { id: "userChrome.autohide.forward_button", value: true },
-          { id: "userChrome.autohide.page_action", value: true },
-          { id: "userChrome.autohide.bookmarkbar", value: true },
-          { id: "userChrome.autohide.sidebar", value: true },
-          { id: "userChrome.hidden.urlbar_iconbox", value: true },
+          { id: 'userChrome.autohide.tab', value: true },
+          { id: 'userChrome.autohide.tab.blur', value: true },
+          { id: 'userChrome.autohide.tabbar', value: true },
+          { id: 'userChrome.autohide.back_button', value: true },
+          { id: 'userChrome.autohide.forward_button', value: true },
+          { id: 'userChrome.autohide.page_action', value: true },
+          { id: 'userChrome.autohide.bookmarkbar', value: true },
+          { id: 'userChrome.autohide.sidebar', value: true },
+          { id: 'userChrome.hidden.urlbar_iconbox', value: true },
         ],
         off: [
-          { id: "userChrome.autohide.tab", value: false },
-          { id: "userChrome.autohide.tab.blur", value: false },
-          { id: "userChrome.autohide.tabbar", value: false },
-          { id: "userChrome.autohide.back_button", value: false },
-          { id: "userChrome.autohide.forward_button", value: false },
-          { id: "userChrome.autohide.page_action", value: false },
-          { id: "userChrome.autohide.bookmarkbar", value: false },
-          { id: "userChrome.autohide.sidebar", value: false },
-          { id: "userChrome.hidden.urlbar_iconbox", value: false },
+          { id: 'userChrome.autohide.tab', value: false },
+          { id: 'userChrome.autohide.tab.blur', value: false },
+          { id: 'userChrome.autohide.tabbar', value: false },
+          { id: 'userChrome.autohide.back_button', value: false },
+          { id: 'userChrome.autohide.forward_button', value: false },
+          { id: 'userChrome.autohide.page_action', value: false },
+          { id: 'userChrome.autohide.bookmarkbar', value: false },
+          { id: 'userChrome.autohide.sidebar', value: false },
+          { id: 'userChrome.hidden.urlbar_iconbox', value: false },
         ],
       },
       {
-        id: "centerElements",
+        id: 'centerElements',
         on: [
-          { id: "userChrome.centered.tab", value: true },
-          { id: "userChrome.centered.tab.label", value: true },
-          { id: "userChrome.centered.urlbar", value: true },
+          { id: 'userChrome.centered.tab', value: true },
+          { id: 'userChrome.centered.tab.label', value: true },
+          { id: 'userChrome.centered.urlbar', value: true },
         ],
         off: [
-          { id: "userChrome.centered.tab", value: false },
-          { id: "userChrome.centered.tab.label", value: false },
-          { id: "userChrome.centered.urlbar", value: false },
+          { id: 'userChrome.centered.tab', value: false },
+          { id: 'userChrome.centered.tab.label', value: false },
+          { id: 'userChrome.centered.urlbar', value: false },
         ],
       },
       {
-        id: "padElements",
+        id: 'padElements',
         on: [
-          { id: "userChrome.padding.drag_space", value: false },
-          { id: "userChrome.padding.urlView_expanding", value: true },
-          { id: "userChrome.padding.menu_compact", value: true },
-          { id: "userChrome.padding.bookmark_menu.compact", value: true },
-          { id: "userChrome.padding.panel_header", value: true },
+          { id: 'userChrome.padding.drag_space', value: false },
+          { id: 'userChrome.padding.urlView_expanding', value: true },
+          { id: 'userChrome.padding.menu_compact', value: true },
+          { id: 'userChrome.padding.bookmark_menu.compact', value: true },
+          { id: 'userChrome.padding.panel_header', value: true },
         ],
         off: [
-          { id: "userChrome.padding.drag_space", value: true },
-          { id: "userChrome.padding.urlView_expanding", value: false },
-          { id: "userChrome.padding.menu_compact", value: false },
-          { id: "userChrome.padding.bookmark_menu.compact", value: false },
-          { id: "userChrome.padding.panel_header", value: false },
+          { id: 'userChrome.padding.drag_space', value: true },
+          { id: 'userChrome.padding.urlView_expanding', value: false },
+          { id: 'userChrome.padding.menu_compact', value: false },
+          { id: 'userChrome.padding.bookmark_menu.compact', value: false },
+          { id: 'userChrome.padding.panel_header', value: false },
         ],
       },
-    ];
+    ]
   },
 
   init() {
     // Initialize prefs
-    window.Preferences.addAll(this.preferences);
-    const userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
-    for (let pref of this.preferences) {
+    window.Preferences.addAll(this.preferences)
+    const userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF)
+    for (const pref of this.preferences) {
       this._prefObservers.push(
         PrefUtils.addObserver(pref.id, _ => {
-          this.refreshTheme();
+          this.refreshTheme()
         })
-      );
+      )
     }
 
     // Init presets
-    for (let preset of this.presets) {
-      let button = document.getElementById(preset.id);
+    for (const preset of this.presets) {
+      const button = document.getElementById(preset.id)
       if (button) {
-        button.addEventListener("click", event => {
-          const target = event.target.getAttribute("data-l10n-args");
+        button.addEventListener('click', event => {
+          const target = event.target.getAttribute('data-l10n-args')
           if (!target) {
             // Something has gone wrong as all our event targets should
             // have a data-l10n-args attr.
-            return;
+            return
           }
 
-          const [presetKey, presetValue] = Object.entries(
-            JSON.parse(target)
-          )[0];
+          const [presetKey, presetValue] = Object.entries(JSON.parse(target))[0]
           event.target.setAttribute(
-            "data-l10n-args",
+            'data-l10n-args',
             JSON.stringify({ [presetKey]: !presetValue })
-          );
+          )
 
           // If the button is initially true, we want to set the
           // false preset values.
-          for (let pref of preset[presetValue ? "off" : "on"]) {
-            PrefUtils.set(pref.id, pref.value);
+          for (const pref of preset[presetValue ? 'off' : 'on']) {
+            PrefUtils.set(pref.id, pref.value)
           }
-        });
+        })
       }
     }
 
     // Init default button
-    let defaultButton = document.getElementById("waterfoxDefaults");
+    const defaultButton = document.getElementById('waterfoxDefaults')
     if (defaultButton) {
-      defaultButton.addEventListener("click", this);
+      defaultButton.addEventListener('click', this)
     }
 
     // Init popups
-    let popups = document.getElementsByClassName("popup-container");
-    for (let popup of popups) {
-      popup.addEventListener("mouseover", this);
-      popup.addEventListener("mouseout", this);
+    const popups = document.getElementsByClassName('popup-container')
+    for (const popup of popups) {
+      popup.addEventListener('mouseover', this)
+      popup.addEventListener('mouseout', this)
     }
 
     // Init theme customizations
-    let waterfoxCustomizations = document.getElementById(
-      "waterfoxUserChromeCustomizations"
-    );
+    const waterfoxCustomizations = document.getElementById(
+      'waterfoxUserChromeCustomizations'
+    )
     if (waterfoxCustomizations) {
-      let presetBox = document.getElementById("waterfoxUserChromePresets");
-      presetBox.hidden = !userChromeEnabled;
-      let themeGroup = document.getElementById(
-        "waterfoxUserChromeCustomizations"
-      );
-      themeGroup.hidden = !userChromeEnabled;
+      const presetBox = document.getElementById('waterfoxUserChromePresets')
+      presetBox.hidden = userChromeEnabled === 2
+      const themeGroup = document.getElementById(
+        'waterfoxUserChromeCustomizations'
+      )
+      themeGroup.hidden = userChromeEnabled === 2
 
       this._prefObservers.push(
         PrefUtils.addObserver(this.WATERFOX_THEME_PREF, isEnabled => {
-          presetBox.hidden = !isEnabled;
-          themeGroup.hidden = !isEnabled;
+          presetBox.hidden = isEnabled === 2
+          themeGroup.hidden = isEnabled === 2
         })
-      );
+      )
     }
 
     // Init Tab Rounding
-    this.initTabRounding();
+    this.initTabRounding()
 
     // Init Nested Prefs
-    for (let el of this.nestedPrefs) {
-      this.initNestedPrefs(el.id, el.pref);
+    for (const el of this.nestedPrefs) {
+      this.initNestedPrefs(el.id, el.pref)
     }
 
     // Register unload listener
-    window.addEventListener("unload", this);
+    window.addEventListener('unload', this)
   },
 
   destroy() {
-    window.removeEventListener("unload", this);
-    for (let obs of this._prefObservers) {
-      PrefUtils.removeObserver(obs);
+    window.removeEventListener('unload', this)
+    for (const obs of this._prefObservers) {
+      PrefUtils.removeObserver(obs)
     }
   },
 
   // nsIDOMEventListener
   handleEvent(event) {
     switch (event.type) {
-      case "mouseover":
-      case "mouseout":
-        event.target.nextElementSibling?.classList.toggle("show");
-        break;
-      case "click":
+      case 'mouseover':
+      case 'mouseout':
+        event.target.nextElementSibling?.classList.toggle('show')
+        break
+      case 'click':
         switch (event.target.id) {
-          case "waterfoxDefaults":
+          case 'waterfoxDefaults':
             this.preferences.map(pref => {
-              Services.prefs.clearUserPref(pref.id);
-            });
-            this.refreshTheme();
-            break;
+              Services.prefs.clearUserPref(pref.id)
+            })
+            this.refreshTheme()
+            break
         }
-        break;
-      case "unload":
-        this.destroy();
-        break;
+        break
+      case 'unload':
+        this.destroy()
+        break
     }
   },
 
-  refreshTheme() {
-    const userChromeSheet = "chrome://browser/skin/userChrome.css";
-    const userContentSheet = "chrome://browser/skin/userContent.css";
-
-    this.unregisterStylesheet(userChromeSheet);
-    this.unregisterStylesheet(userContentSheet);
-    this.registerStylesheet(userChromeSheet);
-    this.registerStylesheet(userContentSheet);
+  async refreshTheme() {
+    // Only refresh theme if Waterfox customizations should be applied
+    if (
+      PrefUtils.get(this.WATERFOX_CUSTOMIZATIONS_PREF, 0) === 0 ||
+      (PrefUtils.get(this.WATERFOX_CUSTOMIZATIONS_PREF, 0) === 1 &&
+        this.WATERFOX_DEFAULT_THEMES.includes(
+          PrefUtils.get('extensions.activeThemeID', '')
+        ))
+    ) {
+      const userChromeSheet = 'chrome://browser/skin/userChrome.css'
+      const userContentSheet = 'chrome://browser/skin/userContent.css'
+
+      this.unregisterStylesheet(userChromeSheet)
+      this.unregisterStylesheet(userContentSheet)
+      this.registerStylesheet(userChromeSheet)
+      this.registerStylesheet(userContentSheet)
+    }
   },
 
   registerStylesheet(uri) {
-    let url = Services.io.newURI(uri);
-    let type = styleSheetService.USER_SHEET;
-    styleSheetService.loadAndRegisterSheet(url, type);
+    const url = Services.io.newURI(uri)
+    const 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);
+    const url = Services.io.newURI(uri)
+    const type = styleSheetService.USER_SHEET
+    styleSheetService.unregisterSheet(url, type)
   },
 
   async initTabRounding() {
-    let checkbox = document.getElementById("squareTabCorners");
+    let checkbox = document.getElementById('squareTabCorners')
     // If it doesn't exist yet, try again.
     while (!checkbox) {
-      const wait = ms => new Promise(res => setTimeout(res, ms, {}));
-      await wait(500);
-      checkbox = document.getElementById("squareTabCorners");
+      const wait = ms => new Promise(res => setTimeout(res, ms, {}))
+      await wait(500)
+      checkbox = document.getElementById('squareTabCorners')
     }
 
     // Update the checkbox initially, and observe pref changes.
-    this.updateTabRoundingCheckbox();
+    this.updateTabRoundingCheckbox()
     this._prefObservers.push(
-      PrefUtils.addObserver("userChrome.tab.squareTabCorners", square => {
-        PrefUtils.set("userChrome.rounding.square_tab", square);
-        PrefUtils.set("userChrome.tab.bottom_rounded_corner", !square);
+      PrefUtils.addObserver('userChrome.tab.squareTabCorners', square => {
+        PrefUtils.set('userChrome.rounding.square_tab', square)
+        PrefUtils.set('userChrome.tab.bottom_rounded_corner', !square)
       })
-    );
+    )
   },
 
   updateTabRoundingCheckbox() {
-    let checkbox = document.getElementById("squareTabCorners");
+    const checkbox = document.getElementById('squareTabCorners')
     const enabled = PrefUtils.get(
-      "userChrome.tab.squareTabCorners",
-      PrefUtils.get("userChrome.rounding.square_tab", false) &&
-        PrefUtils.set("userChrome.tab.bottom_rounded_corner", true)
-    );
+      'userChrome.tab.squareTabCorners',
+      PrefUtils.get('userChrome.rounding.square_tab', false) &&
+        PrefUtils.set('userChrome.tab.bottom_rounded_corner', true)
+    )
 
-    checkbox.checked = enabled;
+    checkbox.checked = enabled
   },
 
   async initNestedPrefs(id, controllingPref) {
-    let checkbox = document.getElementById(id);
+    let checkbox = document.getElementById(id)
     // If it doesn't exist yet, try again.
     while (!checkbox) {
-      const wait = ms => new Promise(res => setTimeout(res, ms, {}));
-      await wait(500);
-      checkbox = document.getElementById(id);
+      const wait = ms => new Promise(res => setTimeout(res, ms, {}))
+      await wait(500)
+      checkbox = document.getElementById(id)
     }
-    const enabled = PrefUtils.get(controllingPref, false);
+    const enabled = PrefUtils.get(controllingPref, false)
 
-    checkbox.setAttribute("disabled", !enabled);
+    checkbox.setAttribute('disabled', !enabled)
 
     this._prefObservers.push(
       PrefUtils.addObserver(controllingPref, (enabled, pref) => {
         // We need this as observer fires for pref and pref.<some sub path>
         if (pref !== controllingPref) {
-          return;
+          return
         }
-        const checkbox = document.getElementById(id);
-        checkbox.setAttribute("disabled", !enabled);
+        const checkbox = document.getElementById(id)
+        checkbox.setAttribute('disabled', !enabled)
       })
-    );
+    )
   },
-};
+}