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"]) {