feat: Add preferences page to customise Lepton

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

@@ -12,8 +12,20 @@
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/general.js", this);
         gMainPaneOverlay.init();
     </script>
+    <richlistbox id="categories">
+        <richlistitem id="category-theme"
+            class="category"
+            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>
+    </richlistbox>
 
     <vbox id="mainPrefPane">
+#include ./preferences-theme.xhtml
         <!-- Tab Bar Position preferences -->
         <vbox id="tabPositionSettingsContainer" insertafter="browserContainersbox">
             <label>

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

@@ -0,0 +1,439 @@
+<!-- Theme panel -->
+
+<script>
+    /* eslint-env mozilla/browser-window */
+    /* globals register_module gThemePane gotoPref */
+    Services.scriptloader.loadSubScript("chrome://browser/content/overlays/theme.js", this);
+
+    // Register the pane
+    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
+    // preferences.js cannot function properly as we do not register_module
+    // until this file is loaded, which has not been done when preferences.js
+    // is init'd.
+    if (location.href.includes("#theme")) {
+        setTimeout(() => {
+            gotoPref("paneTheme");
+        }, 0);
+    }
+</script>
+
+<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" />
+    </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">
+                <!-- 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" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="autoHideTabsImage" 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>
+
+                <hbox>
+                    <checkbox id="dragSpace" preference="userChrome.padding.drag_space" data-l10n-id="drag-space" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="dragSpaceImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <hbox>
+                    <checkbox id="closeButtonHover" preference="userChrome.tab.close_button_at_hover"
+                        data-l10n-id="close-button-hover" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="closeButtonHoverImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <!-- 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> -->
+
+                <!-- 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"
+                    data-l10n-id="compact-bookmark-menu" />
+                <checkbox id="compactPanelHeader" preference="userChrome.padding.panel_header"
+                    data-l10n-id="compact-panel-header" />
+
+                <hbox>
+                    <checkbox id="removePanelStrip" preference="userChrome.panel.remove_strip"
+                        data-l10n-id="remove-panel-strip" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="removePanelStripImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <hbox>
+                    <checkbox id="fullPanelStrip" preference="userChrome.panel.full_width_separator"
+                        data-l10n-id="full-panel-strip" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="fullPanelStripImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <!-- Sidebar -->
+                <label>
+                    <html:h2 data-l10n-id="sidebar-header" />
+                </label>
+                <hbox>
+                    <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
+                        data-l10n-id="disable-sidebar-animate" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="disableSidebarAnimateImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <hbox>
+                    <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
+                        data-l10n-id="auto-hide-sidebar" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="autoHideSidebarImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <hbox>
+                    <checkbox id="hideSidebarHeader" preference="userChrome.hidden.sidebar_header"
+                        data-l10n-id="hide-sidebar-header" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="hideSidebarHeaderImage" class="info-popup" />
+                    </div>
+                </hbox>
+
+                <!-- Icons -->
+                <label>
+                    <html:h2 data-l10n-id="icons-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"
+                        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
+
+                <!-- Media Player -->
+                <label>
+                    <html:h2 data-l10n-id="media-player-header" />
+                </label>
+                <hbox>
+                    <checkbox id="twolineMediaPlayer" preference="userContent.player.ui.twoline"
+                        data-l10n-id="twoline-media-player" />
+
+                    <div class="popup-container">
+                        <img class="preferences-info-button" />
+                        <img id="twolineMediaPlayerImage" class="info-popup" />
+                    </div>
+                </hbox>
+            </vbox>
+            <vbox id="waterfoxUserChromePresets">
+                <button id="refreshWaterfoxCustomTheme" is="highlightable-button"
+                    class="themepage-button check-theme-page-controlled" data-l10n-id="theme-refresh" />
+                <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="smoothCorners" is="highlightable-button"
+                    class="themepage-button check-theme-page-controlled" data-l10n-id="smooth-corners" />
+                <button id="squareCorners" is="highlightable-button"
+                    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"
+                    data-l10n-id="autohide-all" />
+                <button id="autohideNone" is="highlightable-button" class="themepage-button check-theme-page-controlled"
+                    data-l10n-id="autohide-none" />
+                <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/theme.js

@@ -0,0 +1,295 @@
+/* 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/. */
+
+/* eslint-env mozilla/browser-window */
+"use strict";
+
+const { PrefUtils } = ChromeUtils.import("resource:///modules/PrefUtils.jsm");
+
+XPCOMUtils.defineLazyServiceGetter(
+  this,
+  "styleSheetService",
+  "@mozilla.org/content/style-sheet-service;1",
+  "nsIStyleSheetService"
+);
+
+var gThemePane = {
+  WATERFOX_THEME_PREF: "userChrome.theme.enable",
+
+  _prefObservers: [],
+
+  get preferences() {
+    return [
+      // Waterfox Customizations
+      { id: "userChrome.theme.enable", type: "bool" },
+
+      // 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.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" },
+
+      // Sidebar
+      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
+      { id: "userChrome.autohide.sidebar", type: "bool" },
+      { id: "userChrome.hidden.sidebar_header", type: "bool" },
+
+      // Icons
+      { id: "userChrome.hidden.tab_icon", type: "bool" },
+      { id: "userChrome.icon.menu.full", type: "bool" },
+      { id: "userChrome.icon.global_menu.mac", type: "bool" },
+
+      // Media Player
+      { id: "userContent.player.ui.twoline", type: "bool" },
+
+      // Font
+      { id: "userContent.page.monospace", type: "bool" },
+      { id: "userContent.theme.monospace", type: "bool" },
+    ];
+  },
+
+  get presets() {
+    return [
+      {
+        id: "smoothCorners",
+        prefs: [
+          { id: "userChrome.rounding.square_tab", 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: "squareCorners",
+        prefs: [
+          { 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",
+        prefs: [
+          { 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: "autohideNone",
+        prefs: [
+          { 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: "centerAll",
+        prefs: [
+          { 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: "centerNone",
+        prefs: [
+          { id: "userChrome.centered.tab", value: false },
+          { id: "userChrome.centered.tab.label", value: false },
+          { id: "userChrome.centered.urlbar", value: false },
+          { id: "userChrome.centered.bookmarkbar", value: false },
+        ],
+      },
+      {
+        id: "reducePadding",
+        prefs: [
+          { id: "userChrome.padding.drag_space", value: false },
+          { 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: "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 },
+        ],
+      },
+    ];
+  },
+
+  init() {
+    // Initialize prefs
+    window.Preferences.addAll(this.preferences);
+    const userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
+
+    // Init presets
+    for (let preset of this.presets) {
+      let button = document.getElementById(preset.id);
+      if (button) {
+        button.addEventListener("click", () => {
+          for (let pref of preset.prefs) {
+            PrefUtils.set(pref.id, pref.value);
+          }
+          this.refreshTheme();
+        });
+      }
+    }
+
+    // Init default button
+    let 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");
+    for (let popup of popups) {
+      popup.addEventListener("mouseover", this);
+      popup.addEventListener("mouseout", this);
+    }
+
+    // Init theme customizations
+    let waterfoxCustomizations = document.getElementById(
+      "waterfoxUserChromeCustomizations"
+    );
+    if (waterfoxCustomizations) {
+      let presetBox = document.getElementById("waterfoxUserChromePresets");
+      presetBox.hidden = !userChromeEnabled;
+      let themeGroup = document.getElementById(
+        "waterfoxUserChromeCustomizations"
+      );
+      themeGroup.hidden = !userChromeEnabled;
+
+      this._prefObservers.push(
+        PrefUtils.addObserver(this.WATERFOX_THEME_PREF, isEnabled => {
+          presetBox.hidden = !isEnabled;
+          themeGroup.hidden = !isEnabled;
+        })
+      );
+    }
+
+    // Register unload listener
+    window.addEventListener("unload", this);
+  },
+
+  destroy() {
+    window.removeEventListener("unload", this);
+    for (let 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":
+        switch (event.target.id) {
+          case "refreshWaterfoxCustomTheme":
+            this.refreshTheme();
+            break;
+          case "waterfoxDefaults":
+            this.preferences.map(pref => {
+              Services.prefs.clearUserPref(pref.id);
+            });
+            this.refreshTheme();
+            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(userContentSheet);
+  },
+
+  registerStylesheet(uri) {
+    let url = Services.io.newURI(uri);
+    let type = styleSheetService.USER_SHEET;
+    styleSheetService.loadAndRegisterSheet(url, type);
+  },
+
+  unregisterStylesheet(uri) {
+    let url = Services.io.newURI(uri);
+    let type = styleSheetService.USER_SHEET;
+    styleSheetService.unregisterSheet(url, type);
+  },
+};

waterfox/browser/components/preferences/jar.mn

@@ -4,6 +4,8 @@ browser.jar:
      content/browser/overlays/preferences-other.xhtml            (content/preferences-other.xhtml)
      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/images                               (images/**)
 
 %   resource waterfox %waterfox/ contentaccessible=yes
     waterfox/overlays/preferences-general.overlay                  (preferences-general.overlay)

waterfox/browser/themes/waterfox/general.css

@@ -11,3 +11,180 @@
 :root[inDOMFullscreen] #browser-bottombox {
   visibility: collapse;
 }
+
+/* about:preferences Look & Feel icon */
+#category-theme > .category-icon {
+  list-style-image: url("chrome://browser/skin/customize.svg");
+}
+
+#waterfoxUserChromeCustomizations {
+  padding-right: 50px;
+}
+
+.presets-header {
+  max-height: 30px;
+}
+
+/* Popup container */
+.popup-container {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* The actual popup */
+.popup-container .info-popup {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -80px;
+}
+
+.popup-container .show {
+    visibility: visible;
+    max-width: 750px;
+}
+
+.preferences-info-button {
+  content: url("chrome://global/skin/icons/info.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  width: 16px;
+  /* Vertically center */
+  margin: 0 10px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#autoHideTabsImage {
+  content: url("chrome://browser/content/overlays/images/autohide_tab.gif");
+}
+
+#autoBlurTabsImage {
+  content: url("chrome://browser/content/overlays/images/autoblur_tab.gif");
+}
+
+#autoHideTabBarImage {
+  content: url("chrome://browser/content/overlays/images/autohide_tabbar.gif");
+}
+
+#centerTabContentImage {
+  content: url("chrome://browser/content/overlays/images/tab_center.png");
+}
+
+#centerTabLabelImage {
+  content: url("chrome://browser/content/overlays/images/tab_label.png");
+}
+
+#squareTabEdgesImage {
+  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");
+}
+
+#closeButtonHoverImage {
+  content: url("chrome://browser/content/overlays/images/close_button_hover.png");
+}
+
+#autoHideBackImage {
+  content: url("chrome://browser/content/overlays/images/autohide_back.gif");
+}
+
+#autoHideForwardImage {
+  content: url("chrome://browser/content/overlays/images/autohide_forward.gif");
+}
+
+#autoHidePageActionImage {
+  content: url("chrome://browser/content/overlays/images/autohide_pageaction.gif");
+}
+
+#hideNavBarIconBoxImage {
+  content: url("chrome://browser/content/overlays/images/hide_iconbox.png");
+}
+
+#centerNavBarTextImage {
+  content: url("chrome://browser/content/overlays/images/navbar_center.png");
+}
+
+#squareButtonEdgesImage {
+  content: url("chrome://browser/content/overlays/images/square_button_compare.png");
+}
+
+#autoHideBookmarkBarImage {
+  content: url("chrome://browser/content/overlays/images/autohide_bookmarksbar.gif");
+}
+
+#hideBookmbarkBarIconImage {
+  content: url("chrome://browser/content/overlays/images/bookmarkbar_label.png");
+}
+
+#hideBookmarkBarLabelImage {
+  content: url("chrome://browser/content/overlays/images/bookmarkbar_icon.png");
+}
+
+#monospaceFontImage {
+  content: url("chrome://browser/content/overlays/images/monospace_font.png");
+}
+
+#monospaceFontThemeImage {
+  content: url("chrome://browser/content/overlays/images/monospace_theme.png");
+}
+
+#hideDisabledMenuItemsImage {
+  content: url("chrome://browser/content/overlays/images/disabled_menu.png");
+}
+
+#squareMenuPanelImage {
+  content: url("chrome://browser/content/overlays/images/square_panel.png");
+}
+
+#squareMenuPopupImage {
+  content: url("chrome://browser/content/overlays/images/square_popup.png");
+}
+
+#squareFieldImage {
+  content: url("chrome://browser/content/overlays/images/square_field.png");
+}
+
+#removePanelStripImage {
+  content: url("chrome://browser/content/overlays/images/no_panel_separator.png");
+}
+
+#fullPanelStripImage {
+  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");
+}
+
+#hideSidebarHeaderImage {
+  content: url("chrome://browser/content/overlays/images/sidebar_no_header.png");
+}
+
+#showMacMenuIconsImage {
+  content: url("chrome://browser/content/overlays/images/mac_icons.png");
+}
+
+#twolineMediaPlayerImage {
+  content: url("chrome://browser/content/overlays/images/media_player.png");
+}