Expanded functionality of compact mode

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

@@ -62,6 +62,7 @@ pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
+pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.show-button', true);
 

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

@@ -69,6 +69,11 @@ Preferences.addAll([
     type: "bool",
     default: false,
   },
+  {
+    id: "zen.view.compact.hide-toolbar",
+    type: "bool",
+    default: false,
+  },
   {
     id: "zen.workspaces.enabled",
     type: "bool",

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

@@ -21,9 +21,14 @@
       <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"
+      <checkbox id="zenLooksAndFeelShowCompactView"
             data-l10n-id="zen-look-and-feel-compact-view-enabled"
             preference="zen.view.compact"/>
+      <vbox class="indent">
+            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
+                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
+                  preference="zen.view.compact.hide-toolbar"/> 
+      </vbox>
 
       <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />

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

@@ -21,6 +21,9 @@ 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
 
+zen-look-and-feel-compact-view-top-toolbar = 
+    .label = Hide the top toolbar as well in compact mode
+
 zen-look-and-feel-buttons-header = Button style
 zen-look-and-feel-buttons-description = Choose the style of buttons you want to see
 

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

@@ -581,6 +581,36 @@ panelmultiview {
     margin-left: 10px !important;
     margin-right: 10px !important;
   }
+
+  @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+    #zen-appcontent-navbar-container {
+      height: 10px;
+      transition: .2s ease-in-out height;
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      border-bottom: 1px solid var(--zen-colors-border);
+      top: 0;
+      background: var(--zen-main-browser-background);
+      z-index: 1;
+    } 
+
+    #zen-appcontent-navbar-container:hover,
+    #zen-appcontent-navbar-container:focus-within,
+    #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
+    #zen-appcontent-navbar-container:has(*[open="true"]) {
+      height: fit-content;
+      opacity: 1;
+    }
+
+    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
+      margin-top: 10px !important;
+    }
+
+    #titlebar {
+      padding-top: 5px !important;
+    }
+  }
 }
 
 :root:is([chromehidden~="location"],[chromehidden~="toolbar"]) {