From 2885d200d5b36c35c6326553d6e97f8c256b9c68 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Tue, 21 May 2024 19:13:03 +0200
Subject: [PATCH] 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        |  2 +-
 .../components/preferences/zen-looks.js       |  5 ++
 .../preferences/zenLooksAndFeel.inc.xhtml     |  7 +++
 .../browser/preferences/zen-preferences.ftl   |  6 +++
 .../themes/shared/zen-browser-shared.css      | 50 +++++++++++++++++++
 5 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 4110f951c..3a32d36b7 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/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);
 
diff --git a/src/browser/components/preferences/zen-looks.js b/src/browser/components/preferences/zen-looks.js
index 90586d5ca..82b2a4e05 100644
--- a/src/browser/components/preferences/zen-looks.js
+++ b/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,
+  },
 ]);
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 5755c9054..2e0f46e7c 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/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"
diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
index 4efd9ed89..60517347f 100644
--- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
+++ b/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
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index ddecfce93..6d3cfd755 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/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;
+  }
+}