refactor: about:preferences

* feat: Waterfox custom CSS on non-default themes by default
* feat: Table of Contents to preferences
* feat: DoOH checkbox to privacy preferences
* feat panel and menu transparency options
* feat: Look & Feel about:preferences item

browser/components/preferences/main.js

@@ -190,7 +190,6 @@ Preferences.addAll([
   // WATERFOX
   // Enable auto update checking
   { id: "app.update.enabled", type: "bool" },
-
 ]);
 
 if (AppConstants.HAVE_SHELL_SERVICE) {
@@ -2630,11 +2629,19 @@ var gMainPane = {
       let radiogroup = document.getElementById("updateRadioGroup");
 
       radiogroup.disabled = true;
-      let enabled = await UpdateUtils.getAppUpdateAutoEnabled();
+      let autoPref = await UpdateUtils.getAppUpdateAutoEnabled();
       // WATERFOX
       // If user sets app.update.enabled to false, set value to disabled, else use enabled
-      let manualUpdates = Services.prefs.getBoolPref(PREF_UPDATE_ENABLED, true);
+      var enabledPref = Preferences.get("app.update.enabled");
-      radiogroup.value = !manualUpdates ? "disabled" : enabled;
+
+      if (!enabledPref.value) {
+        // Don't care for autoPref.value in this case.
+        radiogroup.value = "disabled"; // 3. Never check for updates.
+      } else if (autoPref.value) {
+        radiogroup.value = "true"; //1. Automatically install updates
+      } else {
+        radiogroup.value = "false"; // 2. Check, but let me choose
+      }
       radiogroup.disabled = false;
 
       this.maybeDisableBackgroundUpdateControls();
@@ -2657,14 +2664,15 @@ var gMainPane = {
       );
       radiogroup.disabled = true;
       try {
-        await UpdateUtils.setAppUpdateAutoEnabled(updateAutoValue);
+        // We need to set this pref first so that the auto pref observer
-        await _disableTimeOverPromise;
+        // has access to the correct enabled pref value.
-        // WATERFOX
-        // Ensure enabled pref is updated based on radiogroup value
         Services.prefs.setBoolPref(
           PREF_UPDATE_ENABLED,
           radiogroup.value != "disabled"
         );
+        await UpdateUtils.setAppUpdateAutoEnabled(updateAutoValue);
+        await _disableTimeOverPromise;
+
         radiogroup.disabled = false;
       } catch (error) {
         console.error(error);
@@ -2880,16 +2888,14 @@ var gMainPane = {
         throw new Error("Invalid preference value for app.update.auto");
       }
       // WATERFOX
-      // Going from Auto to Disable needs to be correctly reflected here
-      // At this point app.update.enabled has not yet been set, so we
-      // want to set disabled if it is going from true->false and is
-      // currently true
       let manualUpdates = Services.prefs.getBoolPref(
         "app.update.enabled",
         true
       );
+      // Only if enabledPref and autoPref are false should we select
+      // disabled, otherwise we just use the value of autoPref.
       document.getElementById("updateRadioGroup").value =
-        manualUpdates && !(aData === "true") ? "disabled" : aData;
+        !manualUpdates && !(aData === "true") ? "disabled" : aData;
       this.maybeDisableBackgroundUpdateControls();
     } else if (aTopic == BACKGROUND_UPDATE_CHANGED_TOPIC) {
       if (!AppConstants.MOZ_UPDATE_AGENT) {

waterfox/browser/components/preferences/content/general.js

@@ -1,11 +1,4 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
+const _gMainPaneOverlay = {
- * 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 gMainPaneOverlay = {
   init() {
     // Initialize prefs
     window.Preferences.addAll(this.preferences);
@@ -60,6 +53,9 @@ const gMainPaneOverlay = {
 
       // Scripts
       { id: "javascript.enabled", type: "bool" },
+
+      // DoOH
+      { id: "network.trr.use_ohttp", type: "bool" },
     ];
   },
 
@@ -72,15 +68,115 @@ const gMainPaneOverlay = {
       // Select the correct radio button based on current pref value
       this.showRelevantElements();
       this.setDynamicThemeGroupValue();
-      this.setEventListener("dynamicThemeGroup", "command", event => {
+      this.setEventListener("dynamicThemeGroup", "command", (event) => {
         this.updateDynamicThemePref(event.target.value);
       });
+      if (document.readyState === "complete") {
+        this.tocGenerate();
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            this.tocGenerate();
+          }
+        });
+      }
       document.initialized = true;
     }
+    this.setEventListener("enableObliviousDns", "click", () => {
+      const value = document.getElementById("enableObliviousDns").checked ? 2 : 0;
+      Services.prefs.setIntPref("network.trr.mode", value);
+    });
+  },
+
+  tocGenerate() {
+      const contentSelector = "#mainPrefPane";
+      const headingSelector =
+        "#mainPrefPane > hbox:not([hidden]) > h1, #mainPrefPane > groupbox:not([hidden]) > h2, #mainPrefPane > groupbox:not([hidden]) label:not([hidden]) > h2";
+      const headerTarget = headingSelector.replaceAll(":not([hidden])", "");
+      const specialCharRegex = /[!@#$%^&*():]/gi;
+      const createHeadingId = () => {
+        const content = document.querySelector(contentSelector);
+        const headings = content?.querySelectorAll(headerTarget);
+        const headingMap = {};
+
+        let count = 0;
+        /**
+         * @param {Element} heading
+         * @returns {string}
+         */
+        const getHeadingId = (heading) => {
+          const id = heading.id;
+          if (id) {
+            return id;
+          }
+
+          if (heading instanceof HTMLElement) {
+            const i18nId = heading.dataset.l10nId;
+            if (i18nId) {
+              return i18nId;
+            }
+          }
+
+          return (
+            heading.textContent
+              ?.trim()
+              .toLowerCase()
+              .split(" ")
+              .join("-")
+              .replace(specialCharRegex, "") ?? `${count++}`
+          );
+        };
+        /**
+         * @param {string} headingText
+         * @param {number} count
+         * @returns {string}
+         */
+        const createId = (headingText, count) =>
+          `${headingText}${count > 0 ? `-${count}` : ""}`;
+        if (headings) {
+          for (const heading of headings) {
+            const id = getHeadingId(heading);
+            headingMap[id] = !Number.isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+            heading.id = createId(id, headingMap[id]);
+          }
+        }
+      };
+
+      createHeadingId();
+      tocbot.init({
+        tocSelector: ".toc",
+        contentSelector,
+        headingSelector,
+        scrollContainer: ".main-content",
+        headingsOffset: 100, // 90 + margins
+        hasInnerContainers: false,
+
+        /**
+         * @param {MouseEvent} e
+         */
+        onClick(e) {
+          e.preventDefault();
+
+          /** @type {HTMLLinkElement} */
+          const link = e.target;
+          const targetSelector = link?.getAttribute("href");
+          if (targetSelector) {
+            const target = document.querySelector(targetSelector);
+            if (target) {
+              target.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+          }
+        },
+      });
+      const tocRefresh = () => {
+        createHeadingId();
+        tocbot.refresh();
+      };
+      window.addEventListener("hashchange", tocRefresh);
     },
 
   showRelevantElements() {
-    let idsGeneral = [
+    const idsGeneral = [
       "dynamicThemeGroup",
       "restartGroup",
       "statusBarGroup",
@@ -88,25 +184,25 @@ const gMainPaneOverlay = {
       "geolocationGroup",
     ];
 
-    let idsPrivacy = ["webrtc", "refheader"];
+    const idsPrivacy = ["webrtc", "refheader", "dohBox"];
-    let win = Services.wm.getMostRecentWindow("navigator:browser");
+    const win = Services.wm.getMostRecentWindow("navigator:browser");
-    let uri = win.gBrowser.currentURI.spec;
+    const uri = win.gBrowser.currentURI.spec;
     if (
-      (uri == "about:preferences" || uri == "about:preferences#general") &&
+      (uri === "about:preferences" || uri === "about:preferences#general") &&
-      document.visibilityState == "visible"
+      document.visibilityState === "visible"
     ) {
-      for (let id of idsGeneral) {
+      for (const id of idsGeneral) {
-        let el = document.getElementById(id);
+        const el = document.getElementById(id);
         if (el) {
           el.removeAttribute("hidden");
         }
       }
     } else if (
-      uri == "about:preferences#privacy" &&
+      uri === "about:preferences#privacy" &&
-      document.visibilityState == "visible"
+      document.visibilityState === "visible"
     ) {
-      for (let id of idsPrivacy) {
+      for (const id of idsPrivacy) {
-        let el = document.getElementById(id);
+        const el = document.getElementById(id);
         if (el) {
           el.removeAttribute("hidden");
         }
@@ -117,11 +213,11 @@ const gMainPaneOverlay = {
   setEventListener(aId, aEventType, aCallback) {
     document
       .getElementById(aId)
-      ?.addEventListener(aEventType, aCallback.bind(gMainPaneOverlay));
+      ?.addEventListener(aEventType, aCallback.bind(_gMainPaneOverlay));
   },
 
   async setDynamicThemeGroupValue() {
-    let radiogroup = document.getElementById("dynamicThemeRadioGroup");
+    const radiogroup = document.getElementById("dynamicThemeRadioGroup");
     radiogroup.disabled = true;
 
     radiogroup.value = Services.prefs.getIntPref("ui.systemUsesDarkTheme", -1);

waterfox/browser/components/preferences/content/preferences-general.xhtml

@@ -3,22 +3,20 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
+<?xml-stylesheet href="chrome://browser/content/overlays/tocbot.css" type="text/css"?>
 
 <overlay id="preferences-overlay" xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <script>
         /* eslint-env mozilla/browser-window */
         /* globals gMainPaneOverlay */
+        Services.scriptloader.loadSubScript("chrome://browser/content/overlays/tocbot.js", this);
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/general.js", this);
-        gMainPaneOverlay.init();
+        _gMainPaneOverlay.init();
     </script>
     <richlistbox id="categories">
-        <richlistitem id="category-theme"
+        <richlistitem id="category-theme" class="category" data-l10n-id="category-theme" data-l10n-attrs="tooltiptext"
-            class="category"
+            value="paneTheme" align="center">
-            data-l10n-id="category-theme"
-            data-l10n-attrs="tooltiptext"
-            value="paneTheme"
-            align="center">
             <image class="category-icon" />
             <label class="category-name" flex="1" data-l10n-id="pane-theme-title"></label>
         </richlistitem>
@@ -124,6 +122,8 @@
             </radiogroup>
         </groupbox>
 #endif
+      <!-- TOC Placeholder -->
+      <html:nav class="toc" />
     </vbox>
 
     <!-- Browsing -->

waterfox/browser/components/preferences/content/preferences-other.xhtml

@@ -19,7 +19,7 @@
         /* eslint-env mozilla/browser-window */
         /* globals gPrivacyPaneOverlay */
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/privacy.js", this);
-        gPrivacyPaneOverlay.init();
+        _gPrivacyPaneOverlay.init();
     </script>
     <vbox id="mainPrefPane">
         <!-- WebRTC peer connection -->
@@ -67,5 +67,13 @@
                     preference="javascript.enabled" flex="1" />
             </hbox>
         </groupbox>
+
+        <!-- DNS -->
+        <groupbox id="dohBox">
+            <hbox id="obliviousDns" data-subcategory="doh" insertbefore="dohCategories">
+                <checkbox id="enableObliviousDns" class="tail-with-learn-more" data-l10n-id="enable-dooh"
+                    preference="network.trr.use_ohttp" flex="1" />
+            </hbox>
+        </groupbox>
     </vbox>
 </overlay>

waterfox/browser/components/preferences/content/preferences-theme.xhtml

@@ -2,11 +2,11 @@
 
 <script>
     /* eslint-env mozilla/browser-window */
-    /* globals register_module gThemePane gotoPref */
+    /* globals register_module _gThemePane gotoPref */
     Services.scriptloader.loadSubScript("chrome://browser/content/overlays/theme.js", this);
 
     // Register the pane
-    register_module("paneTheme", gThemePane);
+    register_module("paneTheme", _gThemePane);
 
     // This ensure that we actually render the Theme page when refreshing on
     // about:preferences#theme. It is needed because the regular gotoPref in
@@ -22,73 +22,136 @@
 
 <html:template id="template-paneTheme">
     <hbox id="firefoxThemeCategory" class="subcategory" hidden="true" data-category="paneTheme">
-        <html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-theme-title" />
+        <!-- Theme -->
+        <html:h1 data-l10n-id="theme-header" />
     </hbox>
-
     <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
-        <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" />
         <hbox>
             <vbox id="waterfoxUserChromeCustomizations">
+                <!-- <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>
+            </vbox>
+            <vbox id="waterfoxUserChromePresetsWrapper" style="height: 0; z-index: 1;">
+                <vbox id="waterfoxUserChromePresets">
+                    <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
+                    <button id="waterfoxDefaults" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
+                    <button id="leptonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="lepton-style" />
+                    <button id="protonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="proton-style" />
+                </vbox>
+            </vbox>
+        </hbox>
+    </groupbox>
+    <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Appearance -->
+            <html:h2 data-l10n-id="appearance-header" />
+        </label>
+
+        <hbox>
+            <menulist id="accentColor">
+                <menupopup>
+                    <menuitem data-l10n-id="enable-default-accent-color" value="0" />
+                    <menuitem data-l10n-id="enable-cyan-accent-color" value="1" />
+                    <menuitem data-l10n-id="enable-system-accent-color" value="2" />
+                </menupopup>
+            </menulist>
+        </hbox>
+
+        <checkbox id="enablePanelTransparency" preference="userChrome.theme.transparent.panel"
+        data-l10n-id="enable-panel-transparency" />
+
+        <checkbox id="enableMenuTransparency" preference="userChrome.theme.transparent.menu"
+        data-l10n-id="enable-menu-transparency" />
+    </groupbox>
+    <groupbox id="themeIconGroup"  data-category="paneTheme" hidden="true">
+        <!-- Icons -->
+        <label>
+            <html:h2 data-l10n-id="icons-header" />
+        </label>
+        <checkbox id="hideAllIcons" preference="userChrome.icon.disabled" data-l10n-id="hide-all-icons" />
+        <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
+        <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
+#ifdef XP_MACOSX
+        <hbox>
+            <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
+                data-l10n-id="show-mac-menu-icons" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="showMacMenuIconsImage" class="info-popup" />
+            </div>
+        </hbox>
+#endif
+    </groupbox>
+    <groupbox id="themeFontGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="font-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="monospaceFont" preference="userContent.page.monospace"
+                data-l10n-id="monospace-font" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="monospaceFontTheme" preference="userChrome.theme.monospace"
+                data-l10n-id="monospace-font-theme" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontThemeImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="themeAnimationGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Animation-->
+            <html:h2 data-l10n-id="animation-header" />
+        </label>
+
+        <!-- Panels -->
+        <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
+            data-l10n-id="disable-panel-animate" />
+
+        <!-- Sidebar -->
+        <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
+            data-l10n-id="disable-sidebar-animate" />
+    </groupbox>
+
+
+    <hbox id="firefoxInterfaceComponentCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Interface Components -->
+        <html:h1 data-l10n-id="interface-component-header"/>
+    </hbox>
+    <groupbox id="tabbarComponentGroup"  data-category="paneTheme" hidden="true">
         <!-- Tab Bar -->
         <label>
             <html:h2 data-l10n-id="tab-bar-header" />
         </label>
+
         <hbox>
-                    <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
+            <checkbox id="tabContextLine" preference="userChrome.tab.photon_like_contextline"
+                data-l10n-id="tab-context-line" />
 
             <div class="popup-container">
                 <img class="preferences-info-button" />
-                        <img id="autoHideTabsImage" class="info-popup" />
+                <img id="contextLineImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
-                        data-l10n-id="auto-blur-tabs" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoBlurTabsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar"
-                        data-l10n-id="auto-hide-tabbar" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideTabBarImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerTabContent" preference="userChrome.centered.tab"
-                        data-l10n-id="center-tab-content" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerTabContentImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
-                        data-l10n-id="center-tab-label" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerTabLabelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="squareTabEdges" preference="userChrome.rounding.square_tab"
-                        data-l10n-id="square-tab-edges" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareTabEdgesImage" class="info-popup" />
             </div>
         </hbox>
 
@@ -110,212 +173,27 @@
                 <img id="closeButtonHoverImage" class="info-popup" />
             </div>
         </hbox>
-
+    </groupbox>
+    <groupbox id="navbarComponentGroup"  data-category="paneTheme" hidden="true">
         <!-- Nav Bar -->
         <label>
             <html:h2 data-l10n-id="nav-bar-header" />
         </label>
 
-                <hbox>
-                    <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
-                        data-l10n-id="auto-hide-back" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideBackImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
-                        data-l10n-id="auto-hide-forward" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideForwardImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
-                        data-l10n-id="auto-hide-pageaction" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHidePageActionImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
-                        data-l10n-id="hide-urlbar-iconbox" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideNavBarIconBoxImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
-                        data-l10n-id="center-navbar-text" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerNavBarTextImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
-                        data-l10n-id="square-button-edges" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareButtonEdgesImage" class="info-popup" />
-                    </div>
-                </hbox>
-
         <checkbox id="compactNavBarPopup" preference="userChrome.padding.urlView_expanding"
             data-l10n-id="compact-navbar-popup" />
 
-                <!-- Bookmarks Bar -->
-                <label>
-                    <html:h2 data-l10n-id="bookmark-header" />
-                </label>
-                <hbox>
-                    <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
-                        data-l10n-id="auto-hide-bookmarkbar" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideBookmarkBarImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerBookmarkBarItems" preference="userChrome.centered.bookmarkbar"
-                        data-l10n-id="center-bookmarkbar-items" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerBookmarkBarItemsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
-                        data-l10n-id="hide-bookmarkbar-icon" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmbarkBarIconImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
-                        data-l10n-id="hide-bookmarkbar-label" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmarkBarLabelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Font -->
-                <label>
-                    <html:h2 data-l10n-id="font-header" />
-                </label>
-
-                <hbox>
-                    <checkbox id="monospaceFont" preference="userContent.page.monospace"
-                        data-l10n-id="monospace-font" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="monospaceFontTheme" preference="userContent.theme.monospace"
-                        data-l10n-id="monospace-font-theme" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontThemeImage" class="info-popup" />
-                    </div>
-                </hbox>
-
         <!-- Full Screen -->
         <!-- <label>
             <html:h2 data-l10n-id="full-screen-header" />
         </label> -->
-
+    </groupbox>
+    <groupbox id="pannelComponentGroup"  data-category="paneTheme" hidden="true">
         <!-- Panels -->
         <label>
             <html:h2 data-l10n-id="panels-header" />
         </label>
 
-
-                <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
-                    data-l10n-id="disable-panel-animate" />
-
-                <hbox>
-                    <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
-                        data-l10n-id="hide-disabled-menuitems" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideDisabledMenuItemsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
-                            data-l10n-id="square-menu-panel" />
-                        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
-                            data-l10n-id="square-panel-item" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPanelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
-#ifndef XP_MACOSX
-                <hbox>
-                    <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
-                        data-l10n-id="square-menu-popup" />
-
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPopupImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
-                    data-l10n-id="square-menu-item" />
-#endif
-
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareField" preference="userChrome.rounding.square_field"
-                            data-l10n-id="square-field" />
-                        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
-                            data-l10n-id="square-checkbox" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareFieldImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-
         <checkbox id="compactContextMenu" preference="userChrome.padding.menu_compact"
             data-l10n-id="compact-context-menu" />
         <checkbox id="compactBookmarkMenu" preference="userChrome.padding.bookmark_menu.compact"
@@ -342,20 +220,200 @@
                 <img id="fullPanelStripImage" class="info-popup" />
             </div>
         </hbox>
+    </groupbox>
 
-                <!-- Sidebar -->
+    <hbox id="firefoxRoundingCategory" class="subcategory" hidden="true" data-category="paneTheme">
-                <label>
+        <!-- Rounding -->
-                    <html:h2 data-l10n-id="sidebar-header" />
+        <html:h1 data-l10n-id="rounding-header"/>
-                </label>
+    </hbox>
+    <groupbox id="roundingTabbarGroup"  data-category="paneTheme" hidden="true">
         <hbox>
-                    <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
+            <checkbox id="squareTabCorners" preference="userChrome.tab.squareTabCorners"
-                        data-l10n-id="disable-sidebar-animate" />
+                data-l10n-id="square-tab-edges" />
 
             <div class="popup-container">
                 <img class="preferences-info-button" />
-                        <img id="disableSidebarAnimateImage" class="info-popup" />
+                <img id="squareTabEdgesImage" class="info-popup" />
             </div>
         </hbox>
+    </groupbox>
+    <groupbox id="roundingNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+        <hbox>
+            <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
+                data-l10n-id="square-button-edges" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareButtonEdgesImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="roundingPannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
+                data-l10n-id="square-menu-panel" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPanelImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
+            data-l10n-id="square-panel-item" />
+
+        <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
+#ifndef XP_MACOSX
+        <hbox>
+            <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
+                data-l10n-id="square-menu-popup" />
+
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPopupImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
+            data-l10n-id="square-menu-item" />
+#endif
+
+        <hbox>
+            <checkbox id="squareField" preference="userChrome.rounding.square_field"
+                data-l10n-id="square-field" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareFieldImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
+            data-l10n-id="square-checkbox" />
+    </groupbox>
+
+
+    <hbox id="firefoxAutohideCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Auto Hide & Hidden -->
+        <html:h1 data-l10n-id="autohide-hidden-header"/>
+    </hbox>
+    <groupbox id="autohideTabbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideTabsImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <vbox class="indent">
+            <hbox>
+                <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
+                    data-l10n-id="auto-blur-tabs" />
+
+                <div class="popup-container">
+                    <img class="preferences-info-button" />
+                    <img id="autoBlurTabsImage" class="info-popup" />
+                </div>
+            </hbox>
+        </vbox>
+
+        <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar" data-l10n-id="auto-hide-tabbar" />
+    </groupbox>
+    <groupbox id="autohideNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
+                data-l10n-id="auto-hide-back" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideBackImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
+                data-l10n-id="auto-hide-forward" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideForwardImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
+            data-l10n-id="auto-hide-pageaction" />
+
+        <hbox>
+            <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
+                data-l10n-id="hide-urlbar-iconbox" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideNavBarIconBoxImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideBookmarkbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="bookmark-header" />
+        </label>
+
+        <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
+            data-l10n-id="auto-hide-bookmarkbar" />
+
+        <hbox>
+            <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
+                data-l10n-id="hide-bookmarkbar-icon" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmbarkBarIconImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
+                data-l10n-id="hide-bookmarkbar-label" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmarkBarLabelImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohidePannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
+                data-l10n-id="hide-disabled-menuitems" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideDisabledMenuItemsImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideSidebarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="sidebar-header" />
+        </label>
 
         <hbox>
             <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
@@ -376,64 +434,52 @@
                 <img id="hideSidebarHeaderImage" class="info-popup" />
             </div>
         </hbox>
+    </groupbox>
 
-                <!-- Icons -->
+    <hbox id="firefoxCenterCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Center -->
+        <html:h1 data-l10n-id="center-header"/>
+    </hbox>
+    <groupbox id="centerTabbarGroup"  data-category="paneTheme" hidden="true">
         <label>
-                    <html:h2 data-l10n-id="icons-header" />
+            <html:h2 data-l10n-id="tab-bar-header" />
         </label>
-                <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
+
-                <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
-#ifdef XP_MACOSX
         <hbox>
-                    <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
+            <checkbox id="centerTabContent" preference="userChrome.centered.tab"
-                        data-l10n-id="show-mac-menu-icons" />
+                data-l10n-id="center-tab-content" />
 
             <div class="popup-container">
                 <img class="preferences-info-button" />
-                        <img id="showMacMenuIconsImage" class="info-popup" />
+                <img id="centerTabContentImage" class="info-popup" />
             </div>
         </hbox>
-#endif
 
-                <!-- Media Player -->
+        <vbox class="indent">
-                <label>
-                    <html:h2 data-l10n-id="media-player-header" />
-                </label>
             <hbox>
-                    <checkbox id="twolineMediaPlayer" preference="userContent.player.ui.twoline"
+                <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
-                        data-l10n-id="twoline-media-player" />
+                    data-l10n-id="center-tab-label" />
 
                 <div class="popup-container">
                     <img class="preferences-info-button" />
-                        <img id="twolineMediaPlayerImage" class="info-popup" />
+                    <img id="centerTabLabelImage" class="info-popup" />
                 </div>
             </hbox>
         </vbox>
-            <vbox id="waterfoxUserChromePresets">
+    </groupbox>
-                <button id="refreshWaterfoxCustomTheme" is="highlightable-button"
+    <groupbox id="centerNavbarGroup"  data-category="paneTheme" hidden="true">
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="theme-refresh" />
+        <label>
-                <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
+            <html:h2 data-l10n-id="nav-bar-header" />
-                <button id="waterfoxDefaults" is="highlightable-button"
+        </label>
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
+
-                <button id="smoothCorners" is="highlightable-button"
+        <hbox>
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="smooth-corners" />
+            <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
-                <button id="squareCorners" is="highlightable-button"
+                data-l10n-id="center-navbar-text" />
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="square-corners" />
+
-                <button id="autohideAll" is="highlightable-button" class="themepage-button check-theme-page-controlled"
+            <div class="popup-container">
-                    data-l10n-id="autohide-all" />
+                <img class="preferences-info-button" />
-                <button id="autohideNone" is="highlightable-button" class="themepage-button check-theme-page-controlled"
+                <img id="centerNavBarTextImage" class="info-popup" />
-                    data-l10n-id="autohide-none" />
+            </div>
-                <button id="centerAll" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="center-all" />
-                <button id="centerNone" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="center-none" />
-                <button id="reducePadding" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="reduce-padding" />
-                <button id="increasePadding" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="increase-padding" />
-            </vbox>
         </hbox>
-
-
     </groupbox>
 </html:template>

waterfox/browser/components/preferences/content/privacy.js

@@ -1,12 +1,4 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
+const _gPrivacyPaneOverlay = {
- * 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 */
-/* globals Preferences setEventListener */
-"use strict";
-
-const gPrivacyPaneOverlay = {
   init() {
     // Ensure load images automatically checkbox value is correct.
     this.initLoadImages();
@@ -27,29 +19,34 @@ const gPrivacyPaneOverlay = {
 
   // Update privacy item default values
   async updatePrivacyDefaults() {
-    let webRtc = document.getElementById("enableWebRTCP2P");
+    const webRtc = document.getElementById("enableWebRTCP2P");
     webRtc.checked = Preferences.get(webRtc.getAttribute("preference")).value;
 
-    let refHeader = document.getElementById("doNotsendSecureXSiteReferrer");
+    const refHeader = document.getElementById("doNotsendSecureXSiteReferrer");
     refHeader.value = Preferences.get(
       refHeader.getAttribute("preference")
     ).value;
 
-    let imagePermissions = document.getElementById("loadImages");
+    const imagePermissions = document.getElementById("loadImages");
     imagePermissions.checked = !!Preferences.get("permissions.default.image")
       .value;
 
-    let javascriptPermissions = document.getElementById("enableJavaScript");
+    const javascriptPermissions = document.getElementById("enableJavaScript");
     javascriptPermissions.checked = Preferences.get(
       javascriptPermissions.getAttribute("preference")
     ).value;
+
+    const obliviousDns = document.getElementById("enableObliviousDns");
+    obliviousDns.checked = Preferences.get(
+      obliviousDns.getAttribute("preference")
+    ).value;
   },
 
   /**
    * Selects the right item of the Load Images Automatically checkbox.
    */
   initLoadImages() {
-    let liaCheckbox = document.getElementById("loadImages");
+    const liaCheckbox = document.getElementById("loadImages");
     // If it doesn't exist yet, try again.
     if (!liaCheckbox) {
       setTimeout(() => {
@@ -66,9 +63,9 @@ const gPrivacyPaneOverlay = {
   },
 
   loadImagesReadPref() {
-    let enabledPref = Preferences.get("permissions.default.image");
+    const enabledPref = Preferences.get("permissions.default.image");
-    let liaCheckbox = document.getElementById("loadImages");
+    const liaCheckbox = document.getElementById("loadImages");
-    if (enabledPref.value) {
+    if (enabledPref.value === 1) {
       liaCheckbox.checked = true;
     } else {
       liaCheckbox.checked = false;
@@ -76,7 +73,7 @@ const gPrivacyPaneOverlay = {
   },
 
   syncToLoadImagesPref() {
-    let value = document.getElementById("loadImages").checked ? 1 : 0;
+    const value = document.getElementById("loadImages").checked ? 1 : 2;
     Services.prefs.setIntPref("permissions.default.image", value);
   },
 };

waterfox/browser/components/preferences/content/theme.js

@@ -2,10 +2,9 @@
  * 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 */
+const { PrefUtils } = ChromeUtils.importESModule(
-"use strict";
+  "resource:///modules/PrefUtils.sys.mjs"
-
+);
-const { PrefUtils } = ChromeUtils.import("resource:///modules/PrefUtils.jsm");
 
 XPCOMUtils.defineLazyServiceGetter(
   this,
@@ -14,225 +13,299 @@ XPCOMUtils.defineLazyServiceGetter(
   "nsIStyleSheetService"
 );
 
-var gThemePane = {
+const _gThemePane = {
-  WATERFOX_THEME_PREF: "userChrome.theme.enable",
+  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
+      // == Theme ==============================================================
-      { id: "userChrome.theme.enable", type: "bool" },
+      { id: "browser.theme.enableWaterfoxCustomizations", type: "int" },
 
+      // Appearance
+      { id: "userChrome.theme.proton_color.dark_blue_accent", type: "bool" },
+      { id: "userContent.page.proton_color.dark_blue_accent", type: "bool" },
+
+      { id: "userContent.page.proton_color.system_accent", type: "bool" },
+      { id: "widget.non-native-theme.use-theme-accent", type: "bool" },
+
+      { id: "userChrome.theme.transparent.panel", type: "bool" },
+      { id: "userChrome.theme.transparent.menu", 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" },
+
+      // Fonts
+      { id: "userContent.page.monospace", type: "bool" },
+      { id: "userChrome.theme.monospace", type: "bool" },
+
+      // Animations
+      { id: "userChrome.decoration.disable_panel_animate", type: "bool" },
+      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
+
+      // == Interface Components ===============================================
       // Tab Bar
-      { id: "userChrome.autohide.tab", type: "bool" },
+      { id: "userChrome.tab.photon_like_contextline", 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.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" },
 
-      // Bookmarks Bar
-      { id: "userChrome.autohide.bookmarkbar", type: "bool" },
-      { id: "userChrome.centered.bookmarkbar", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_icon", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_label", type: "bool" },
-
       // Panels
-      { 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" },
 
+      // == Rounding ===========================================================
+      // Tab Bar
+      { id: "userChrome.rounding.square_tab", type: "bool" },
+      { id: "userChrome.tab.bottom_rounded_corner", type: "bool" },
+      { id: "userChrome.tab.squareTabCorners", type: "bool" },
+
+      // Nav Bar
+      { id: "userChrome.rounding.square_button", type: "bool" },
+
+      // Panels
+      { 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" },
+
+      // == Autohide & Hidden ==================================================
+      // Tab Bar
+      { id: "userChrome.autohide.tab", type: "bool" },
+      { id: "userChrome.autohide.tab.blur", type: "bool" },
+      { id: "userChrome.autohide.tabbar", 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" },
+
+      // Bookmarks Bar
+      { id: "userChrome.autohide.bookmarkbar", type: "bool" },
+      { id: "userChrome.hidden.bookmarkbar_icon", type: "bool" },
+      { id: "userChrome.hidden.bookmarkbar_label", type: "bool" },
+
+      // Panels
+      { id: "userChrome.hidden.disabled_menu", type: "bool" },
+
       // Sidebar
-      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
       { id: "userChrome.autohide.sidebar", type: "bool" },
       { id: "userChrome.hidden.sidebar_header", type: "bool" },
 
-      // Icons
+      // == Center =============================================================
-      { id: "userChrome.hidden.tab_icon", type: "bool" },
+      // Tab Bar
-      { id: "userChrome.icon.menu.full", type: "bool" },
+      { id: "userChrome.centered.tab", type: "bool" },
-      { id: "userChrome.icon.global_menu.mac", type: "bool" },
+      { id: "userChrome.centered.tab.label", type: "bool" },
 
-      // Media Player
+      // Nav Bar
-      { id: "userContent.player.ui.twoline", type: "bool" },
+      { id: "userChrome.centered.urlbar", type: "bool" },
+    ];
+  },
 
-      // Font
+  get nestedPrefs() {
-      { id: "userContent.page.monospace", type: "bool" },
+    return [
-      { id: "userContent.theme.monospace", type: "bool" },
+      {
+        id: "autoBlurTabs",
+        pref: "userChrome.autohide.tab",
+      },
+      {
+        id: "centerTabLabel",
+        pref: "userChrome.centered.tab",
+      },
     ];
   },
 
   get presets() {
     return [
       {
-        id: "smoothCorners",
+        id: "waterfoxDefaults",
-        prefs: [
+        on: [
-          { id: "userChrome.rounding.square_tab", value: false },
+          { id: "userChrome.tab.connect_to_window", value: true },
-          { id: "userChrome.rounding.square_button", value: false },
+          { id: "userChrome.tab.color_like_toolbar", value: true },
-          { id: "userChrome.rounding.square_panel", value: false },
+
-          { id: "userChrome.rounding.square_panelitem", value: false },
+          { id: "userChrome.tab.lepton_like_padding", value: false },
-          { id: "userChrome.rounding.square_menupopup", value: false },
+          { id: "userChrome.tab.photon_like_padding", value: true },
-          { id: "userChrome.rounding.square_menuitem", value: false },
+
-          { id: "userChrome.rounding.square_field", value: false },
+          { id: "userChrome.tab.dynamic_separator", value: false },
-          { id: "userChrome.rounding.square_checklabel", value: false },
+          { id: "userChrome.tab.static_separator", value: true },
-        ],
-      },
           {
-        id: "squareCorners",
+            id: "userChrome.tab.static_separator.selected_accent",
-        prefs: [
+            value: false,
+          },
+          { id: "userChrome.tab.bar_separator", value: false },
+
+          { id: "userChrome.tab.newtab_button_like_tab", value: false },
+          { id: "userChrome.tab.newtab_button_smaller", value: true },
+          { id: "userChrome.tab.newtab_button_proton", value: false },
+
+          { id: "userChrome.icon.panel_full", value: false },
+          { id: "userChrome.icon.panel_photon", value: true },
+
+          { id: "userChrome.tab.box_shadow", value: false },
+          { id: "userChrome.tab.bottom_rounded_corner", value: false },
+
+          { id: "userChrome.tab.photon_like_contextline", value: true },
           { id: "userChrome.rounding.square_tab", 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: "autohideAll",
+        id: "leptonStyle",
-        prefs: [
+        on: [
-          { id: "userChrome.autohide.tab", value: true },
+          { id: "userChrome.tab.connect_to_window", value: true },
-          { id: "userChrome.autohide.tab.blur", value: true },
+          { id: "userChrome.tab.color_like_toolbar", value: true },
-          { id: "userChrome.autohide.tabbar", value: true },
+
-          { id: "userChrome.autohide.back_button", value: true },
+          { id: "userChrome.tab.lepton_like_padding", value: true },
-          { id: "userChrome.autohide.forward_button", value: true },
+          { id: "userChrome.tab.photon_like_padding", value: false },
-          { id: "userChrome.autohide.page_action", value: true },
+
-          { id: "userChrome.autohide.bookmarkbar", value: true },
+          { id: "userChrome.tab.dynamic_separator", value: true },
-          { id: "userChrome.autohide.sidebar", value: true },
+          { id: "userChrome.tab.static_separator", value: false },
+          {
+            id: "userChrome.tab.static_separator.selected_accent",
+            value: false,
+          },
+          { id: "userChrome.tab.bar_separator", value: false },
+
+          { id: "userChrome.tab.newtab_button_like_tab", value: true },
+          { id: "userChrome.tab.newtab_button_smaller", value: false },
+          { id: "userChrome.tab.newtab_button_proton", value: false },
+
+          { id: "userChrome.icon.panel_full", value: true },
+          { id: "userChrome.icon.panel_photon", value: false },
+
+          { id: "userChrome.tab.box_shadow", value: true },
+          { id: "userChrome.tab.bottom_rounded_corner", value: true },
+
+          { id: "userChrome.tab.photon_like_contextline", value: false },
+          { id: "userChrome.rounding.square_tab", value: false },
         ],
       },
       {
-        id: "autohideNone",
+        id: "protonStyle",
-        prefs: [
+        on: [
-          { id: "userChrome.autohide.tab", value: false },
+          { id: "userChrome.tab.connect_to_window", value: false },
-          { id: "userChrome.autohide.tab.blur", value: false },
+          { id: "userChrome.tab.color_like_toolbar", value: false },
-          { id: "userChrome.autohide.tabbar", value: false },
+
-          { id: "userChrome.autohide.back_button", value: false },
+          { id: "userChrome.tab.lepton_like_padding", value: false },
-          { id: "userChrome.autohide.forward_button", value: false },
+          { id: "userChrome.tab.photon_like_padding", value: false },
-          { id: "userChrome.autohide.page_action", value: false },
+
-          { id: "userChrome.autohide.bookmarkbar", value: false },
+          { id: "userChrome.tab.dynamic_separator", value: true },
-          { id: "userChrome.autohide.sidebar", value: false },
+          { id: "userChrome.tab.static_separator", value: false },
-        ],
-      },
           {
-        id: "centerAll",
+            id: "userChrome.tab.static_separator.selected_accent",
-        prefs: [
+            value: false,
-          { id: "userChrome.centered.tab", value: true },
-          { id: "userChrome.centered.tab.label", value: true },
-          { id: "userChrome.centered.urlbar", value: true },
-          { id: "userChrome.centered.bookmarkbar", value: true },
-        ],
           },
-      {
+          { id: "userChrome.tab.bar_separator", value: false },
-        id: "centerNone",
+
-        prefs: [
+          { id: "userChrome.tab.newtab_button_like_tab", value: false },
-          { id: "userChrome.centered.tab", value: false },
+          { id: "userChrome.tab.newtab_button_smaller", value: false },
-          { id: "userChrome.centered.tab.label", value: false },
+          { id: "userChrome.tab.newtab_button_proton", value: true },
-          { id: "userChrome.centered.urlbar", value: false },
+
-          { id: "userChrome.centered.bookmarkbar", value: false },
+          { id: "userChrome.icon.panel_full", value: true },
-        ],
+          { id: "userChrome.icon.panel_photon", value: false },
-      },
+
-      {
+          { id: "userChrome.tab.box_shadow", value: false },
-        id: "reducePadding",
+          { id: "userChrome.tab.bottom_rounded_corner", value: false },
-        prefs: [
+
-          { id: "userChrome.padding.drag_space", value: false },
+          { id: "userChrome.tab.photon_like_contextline", value: false },
-          { id: "userChrome.padding.urlView_expanding", value: false },
+          { id: "userChrome.rounding.square_tab", 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: "increasePadding",
-        prefs: [
-          { id: "userChrome.padding.drag_space", value: true },
-          { 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 },
         ],
       },
     ];
   },
 
+  get accentPrefs() {
+    return {
+      0: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: true },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: true },
+
+        { id: "userContent.page.proton_color.system_accent", value: false },
+        { id: "widget.non-native-theme.use-theme-accent", value: false },
+      ],
+
+      1: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: false },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: false },
+
+        { id: "userContent.page.proton_color.system_accent", value: false },
+        { id: "widget.non-native-theme.use-theme-accent", value: false },
+      ],
+
+      2: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: false },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: false },
+
+        { id: "userContent.page.proton_color.system_accent", value: true },
+        { id: "widget.non-native-theme.use-theme-accent", value: true },
+      ],
+    };
+  },
+
   init() {
     // Initialize prefs
     window.Preferences.addAll(this.preferences);
-    const userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
+    const _userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
+    for (const pref of this.preferences) {
+      this._prefObservers.push(
+        PrefUtils.addObserver(pref.id, (_) => {
+          this.refreshTheme();
+        })
+      );
+    }
 
     // Init presets
-    for (let preset of this.presets) {
+    for (const preset of this.presets) {
-      let button = document.getElementById(preset.id);
+      const button = document.getElementById(preset.id);
       if (button) {
-        button.addEventListener("click", () => {
+        button.addEventListener("click", (_event) => {
-          for (let pref of preset.prefs) {
+          for (const pref of preset.on) {
             PrefUtils.set(pref.id, pref.value);
           }
-          this.refreshTheme();
         });
       }
     }
 
     // Init default button
-    let defaultButton = document.getElementById("waterfoxDefaults");
+    const defaultButton = document.getElementById("waterfoxDefaults");
     if (defaultButton) {
       defaultButton.addEventListener("click", this);
     }
 
-    // Init refresh button
-    let refreshButton = document.getElementById("refreshWaterfoxCustomTheme");
-    if (refreshButton) {
-      refreshButton.addEventListener("click", this);
-    }
-
     // Init popups
-    let popups = document.getElementsByClassName("popup-container");
+    const popups = document.getElementsByClassName("popup-container");
-    for (let popup of popups) {
+    for (const popup of popups) {
       popup.addEventListener("mouseover", this);
       popup.addEventListener("mouseout", this);
     }
 
-    // Init theme customizations
+    // Init AccentColor
-    let waterfoxCustomizations = document.getElementById(
+    this.initAccentColor();
-      "waterfoxUserChromeCustomizations"
-    );
-    if (waterfoxCustomizations) {
-      let presetBox = document.getElementById("waterfoxUserChromePresets");
-      presetBox.hidden = !userChromeEnabled;
-      let themeGroup = document.getElementById(
-        "waterfoxUserChromeCustomizations"
-      );
-      themeGroup.hidden = !userChromeEnabled;
 
-      this._prefObservers.push(
+    // Init Tab Rounding
-        PrefUtils.addObserver(this.WATERFOX_THEME_PREF, isEnabled => {
+    this.initTabRounding();
-          presetBox.hidden = !isEnabled;
+
-          themeGroup.hidden = !isEnabled;
+    // Init Nested Prefs
-        })
+    for (const el of this.nestedPrefs) {
-      );
+      this.initNestedPrefs(el.id, el.pref);
     }
 
     // Register unload listener
@@ -241,7 +314,7 @@ var gThemePane = {
 
   destroy() {
     window.removeEventListener("unload", this);
-    for (let obs of this._prefObservers) {
+    for (const obs of this._prefObservers) {
       PrefUtils.removeObserver(obs);
     }
   },
@@ -255,11 +328,8 @@ var gThemePane = {
         break;
       case "click":
         switch (event.target.id) {
-          case "refreshWaterfoxCustomTheme":
-            this.refreshTheme();
-            break;
           case "waterfoxDefaults":
-            this.preferences.map(pref => {
+            this.preferences.map((pref) => {
               Services.prefs.clearUserPref(pref.id);
             });
             this.refreshTheme();
@@ -272,24 +342,105 @@ var gThemePane = {
     }
   },
 
-  refreshTheme() {
+  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(userContentSheet);
+    }
   },
 
   registerStylesheet(uri) {
-    let url = Services.io.newURI(uri);
+    const url = Services.io.newURI(uri);
-    let type = styleSheetService.USER_SHEET;
+    const type = styleSheetService.USER_SHEET;
     styleSheetService.loadAndRegisterSheet(url, type);
   },
 
   unregisterStylesheet(uri) {
-    let url = Services.io.newURI(uri);
+    const url = Services.io.newURI(uri);
-    let type = styleSheetService.USER_SHEET;
+    const type = styleSheetService.USER_SHEET;
     styleSheetService.unregisterSheet(url, type);
   },
+
+  async initAccentColor() {
+    let menulist = document.getElementById("accentColor");
+    // If it doesn't exist yet, try again.
+    while (!menulist) {
+      const wait = (ms) => new Promise((res) => setTimeout(res, ms, {}));
+      await wait(500);
+      menulist = document.getElementById("accentColor");
+    }
+
+    menulist?.addEventListener("command", () => {
+      if (["0", "1", "2"].includes(menulist.value)) {
+        for (const pref of this.accentPrefs[menulist.value]) {
+          PrefUtils.set(pref.id, pref.value);
+        }
+      }
+    });
+  },
+
+  async initTabRounding() {
+    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");
+    }
+
+    // Update the checkbox initially, and observe pref changes.
+    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);
+      })
+    );
+  },
+
+  updateTabRoundingCheckbox() {
+    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)
+    );
+
+    checkbox.checked = enabled;
+  },
+
+  async initNestedPrefs(id, controllingPref) {
+    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 enabled = PrefUtils.get(controllingPref, false);
+
+    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;
+        }
+        const checkbox = document.getElementById(id);
+        checkbox.setAttribute("disabled", !enabled);
+      })
+    );
+  },
 };

waterfox/browser/components/preferences/content/tocbot.css

@@ -0,0 +1,104 @@
+.toc {
+  overflow-y: auto;
+}
+.toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+.toc > .toc-list li {
+  list-style: none;
+}
+.toc-list {
+  margin: 0;
+  padding-left: 10px;
+}
+a.toc-link {
+  color: currentColor;
+  height: 100%;
+}
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+.is-collapsed {
+  max-height: 0;
+}
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+.is-active-link {
+  font-weight: 700;
+}
+.toc-link::before {
+  background-color: #eee;
+  content: " ";
+  display: inline-block;
+  height: inherit;
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  width: 2px;
+}
+.is-active-link::before {
+  background-color: #54bc4b;
+} /*# sourceMappingURL=tocbot.css.map */
+
+/* Patched version */
+.toc {
+  --uc-toc-margin: 0.5em;
+  display: block;
+  position: fixed;
+  width: 300px;
+  height: calc(100vh - 90px); /* .main-content inline style scroll-padding-top: 90px; */
+  transform: translateX(calc(var(--main-pane-width, 664px) + max(60px, 8vw)));
+  scrollbar-width: none;
+}
+@media (max-width: 1280px) {
+  .toc {
+    display: none;
+  }
+}
+.toc-list > .toc-list-item:only-child:not(:has(.toc-list)) {
+  /* If only one exists, remove it. */
+  display: none;
+}
+
+.toc-list-item {
+  cursor: pointer;
+}
+.toc-list-item > .toc-list:not(.is-collapsed) {
+  margin-top: var(--uc-toc-margin);
+}
+.toc-list-item:not(:last-child) {
+  margin-bottom: var(--uc-toc-margin);
+}
+
+.toc-link {
+  font-size: 1.14em; /* as h2 */
+  text-decoration: none;
+}
+.toc-link::before {
+  background-color: #eeeeef;
+}
+.is-active-link::before {
+  background-color: var(--in-content-accent-color, AccentColor);
+}
+
+.toc-list-item:hover:not(:has(> .toc-list:hover)) > .toc-link {
+  font-weight: 700;
+}
+.toc-list-item:hover:not(:has(> .toc-list:hover))
+  > .toc-link:not(.is-active-link)::before {
+  background-color: #d1d1d6;
+}
+@media (prefers-color-scheme: dark) {
+  .toc-link:not(.is-active-link)::before {
+    background-color: #2c2b32;
+  }
+  .toc-list-item:hover:not(:has(> .toc-list:hover))
+    > .toc-link:not(.is-active-link)::before {
+    background-color: #57575d;
+  }
+}

waterfox/browser/components/preferences/jar.mn

@@ -5,6 +5,8 @@ browser.jar:
      content/browser/overlays/general.js                           (content/general.js)
      content/browser/overlays/privacy.js                           (content/privacy.js)
      content/browser/overlays/theme.js                             (content/theme.js)
+     content/browser/overlays/tocbot.js                            (content/tocbot.js)
+     content/browser/overlays/tocbot.css                           (content/tocbot.css)
      content/browser/overlays/images                               (images/**)
 
 %   resource waterfox %waterfox/ contentaccessible=yes

waterfox/browser/themes/waterfox/general.css

@@ -53,6 +53,7 @@
     bottom: 125%;
     left: 50%;
     margin-left: -80px;
+    max-height: 400px;
 }
 
 .popup-container .show {
@@ -73,15 +74,11 @@
 }
 
 #autoHideTabsImage {
-  content: url("chrome://browser/content/overlays/images/autohide_tab.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_tab.png");
 }
 
 #autoBlurTabsImage {
-  content: url("chrome://browser/content/overlays/images/autoblur_tab.gif");
+  content: url("chrome://browser/content/overlays/images/autoblur_tab.png");
-}
-
-#autoHideTabBarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_tabbar.gif");
 }
 
 #centerTabContentImage {
@@ -96,10 +93,6 @@
   content: url("chrome://browser/content/overlays/images/tab_square.png");
 }
 
-#smoothTabEdgesImage {
-  content: url("chrome://browser/content/overlays/images/tab_normal.png");
-}
-
 #dragSpaceImage {
   content: url("chrome://browser/content/overlays/images/drag_space.png");
 }
@@ -109,15 +102,11 @@
 }
 
 #autoHideBackImage {
-  content: url("chrome://browser/content/overlays/images/autohide_back.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_back.png");
 }
 
 #autoHideForwardImage {
-  content: url("chrome://browser/content/overlays/images/autohide_forward.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_forward.png");
-}
-
-#autoHidePageActionImage {
-  content: url("chrome://browser/content/overlays/images/autohide_pageaction.gif");
 }
 
 #hideNavBarIconBoxImage {
@@ -129,11 +118,7 @@
 }
 
 #squareButtonEdgesImage {
-  content: url("chrome://browser/content/overlays/images/square_button_compare.png");
+  content: url("chrome://browser/content/overlays/images/square_button.png");
-}
-
-#autoHideBookmarkBarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_bookmarksbar.gif");
 }
 
 #hideBookmbarkBarIconImage {
@@ -176,12 +161,8 @@
   content: url("chrome://browser/content/overlays/images/full_panel_separator.png");
 }
 
-#disableSidebarAnimateImage {
-  content: url("chrome://browser/content/overlays/images/sidebar_no_animate.gif");
-}
-
 #autoHideSidebarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_sidebar.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_sidebar.png");
 }
 
 #hideSidebarHeaderImage {
@@ -192,6 +173,11 @@
   content: url("chrome://browser/content/overlays/images/mac_icons.png");
 }
 
-#twolineMediaPlayerImage {
+#contextLineImage {
-  content: url("chrome://browser/content/overlays/images/media_player.png");
+  content: url("chrome://browser/content/overlays/images/tab_contextline.png");
+}
+
+/* Prevent any horizontal scrolling on about:preferences */
+#preferences-body .main-content {
+  overflow-x: hidden !important;
 }