Update zen view compact mode preferences

src/browser/app/profile/zen-browser.js

@@ -81,18 +81,20 @@ pref('zen.theme.border-radius', 8); // In pixels
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
-pref('zen.view.compact', false);
 pref('zen.view.experimental-rounded-view', true);
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
 pref('zen.theme.color-prefs.amoled', false);
 pref('zen.theme.color-prefs.colorful', false);
 
+pref('zen.view.compact', false);
 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.compact.toolbar-flash-popup', true);
 pref('zen.view.compact.toolbar-flash-popup.duration', 800);
 pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
+pref('zen.view.compact.color-toolbar', true);
+pref('zen.view.compact.color-sidebar', true);
 
 pref('zen.glance.enabled', true);
 pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -50,13 +50,17 @@
       }
 
       #titlebar {
-        background: var(--zen-main-browser-background) !important;
-        background-attachment: fixed !important;
-        background-size: 2000px !important; /* Dont ask me why */
         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
         border-radius: calc(var(--zen-border-radius) - 2px);
         padding: var(--zen-toolbox-padding) !important;
         position: relative;
+        background: var(--zen-dialog-background);
+
+        @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
+          background: var(--zen-main-browser-background) !important;
+          background-attachment: fixed !important;
+          background-size: 2000px !important; /* Dont ask me why */
+        }
       }
       /* Mark: toolbox as collapsed */
       #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
@@ -125,11 +129,14 @@
         transition: all 0.1s ease-in-out;
         width: calc(100% - ((var(--zen-element-separation) + var(--zen-compact-toolbar-offset)) * 2));
         opacity: 0;
+        background: var(--zen-dialog-background);
 
-        background-attachment: fixed;
+        @media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
-        backdrop-filter: blur(5px);
+          background-attachment: fixed;
-        background: var(--zen-main-browser-background);
+          backdrop-filter: blur(5px);
-        background-size: 100% 2000px;
+          background: var(--zen-main-browser-background);
+          background-size: 100% 2000px;
+        }
       }
 
       #zen-appcontent-navbar-container:hover,

src/browser/components/preferences/zen-settings.js

@@ -1088,4 +1088,14 @@ Preferences.addAll([
     type: "bool",
     default: false,
   },
+  {
+    id: "zen.view.compact.color-toolbar",
+    type: "bool",
+    default: true,
+  },
+  {
+    id: "zen.view.compact.color-sidebar",
+    type: "bool",
+    default: true,
+  }
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -236,6 +236,12 @@
             <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>
+            <checkbox id="zenLooksAndFeelEnableThemedToolbarCompactMode"
+                      data-l10n-id="zen-look-and-feel-compact-toolbar-themed"
+                      preference="zen.view.compact.color-toolbar"/>
+            <checkbox id="zenLooksAndFeelEnableThemedSidebarCompactMode"
+                      data-l10n-id="zen-look-and-feel-compact-sidebar-themed"
+                      preference="zen.view.compact.color-sidebar"/>
       </vbox>
 </groupbox>