feat: Add compact view option to preferences

The code changes introduce a new preference option for enabling the compact view in the Zen browser. This allows users to show only the toolbars they use, improving the browsing experience for those who prefer a minimalistic interface.

(closes #31)

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

@@ -105,7 +105,7 @@ pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.toolbar-themed', true);
-
+pref('zen.view.compact', false);
 
 pref('browser.cache.jsbc_compression_level', 3);
 

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

@@ -59,4 +59,9 @@ Preferences.addAll([
     type: "bool",
     default: true,
   },
+  {
+    id: "zen.view.compact",
+    type: "bool",
+    default: false,
+  },
 ]);

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

@@ -17,6 +17,13 @@
       <checkbox id="zenLooksAndFeelUseThemedToolbar"
             data-l10n-id="zen-look-and-feel-themed-toolbar"
             preference="zen.theme.toolbar-themed"/>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
+
+      <checkbox id="zenLooksAndFeelUseThemedToolbar"
+            data-l10n-id="zen-look-and-feel-compact-view-enabled"
+            preference="zen.view.compact"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -14,3 +14,9 @@ zen-side-panels-header = General settings for web panels
 zen-side-panels-description = Increase productivity by having multiple views at once!
 zen-side-panels-enabled = 
     .label = Enable Web Side Panels
+
+
+zen-look-and-feel-compact-view-header = Show in compact view
+zen-look-and-feel-compact-view-description = Only show the toolbars you use!
+zen-look-and-feel-compact-view-enabled = 
+    .label = Enable { -brand-short-name }'s compact mode

src/browser/themes/shared/zen-browser-shared.css

@@ -470,3 +470,53 @@ panelmultiview {
 #zen-main-app-wrapper {
   background: var(--zen-main-browser-background);
 }
+
+@media (-moz-bool-pref: "zen.view.compact") {
+  #navigator-toolbox,
+  #zen-appcontent-navbar-container {
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  #navigator-toolbox {
+    width: 1px;
+    min-width: 0;
+    height: 100%;
+  }
+
+  #zen-appcontent-navbar-container {
+    min-height: 0;
+    height: 1px;
+    width: 100%;
+  }
+
+  #navigator-toolbox:hover,
+  #navigator-toolbox:has([open="true"]) {
+    width: unset;
+    overflow: visible;
+    opacity: 1;
+  }
+
+  #zen-appcontent-navbar-container:hover,
+  #zen-appcontent-navbar-container:has([open="true"]) {
+    height: unset;
+    background: var(--zen-themed-toolbar-bg) !important;
+    overflow: visible;
+    border-bottom: var(--zen-appcontent-border) !important;
+    opacity: 1;
+  }
+  
+  #navigator-toolbox:hover #titlebar,
+  #navigator-toolbox:has([open="true"]) #titlebar {
+    background: var(--zen-themed-toolbar-bg) !important;
+    border-right: var(--zen-appcontent-border) !important;
+    padding: 0 5px;
+  }
+
+  #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
+    margin-top: 10px;
+    margin-left: 10px;
+  }
+}