diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index fbbe44a16..5f8aa87b8 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/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);
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index c7cf100ae..c0d4dd75c 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/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",
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 769760c44..698d2d02d 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -21,9 +21,14 @@
-
+
+
+
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 64b36c73c..7250212a3 100644
--- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
+++ b/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
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index a45d47b81..3d7f2fdf2 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/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"]) {