diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index abfc1ef79..3ee1d41cc 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -212,8 +212,17 @@ var gZenVerticalTabsManager = { const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target'); if (isRightSide && isVerticalTabs) { this.navigatorToolbox.setAttribute('zen-right-side', 'true'); + document.documentElement.setAttribute('zen-right-side', 'true'); } else { this.navigatorToolbox.removeAttribute('zen-right-side'); + document.documentElement.removeAttribute('zen-right-side'); + } + + const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container'); + if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)) { + appContentNavbarContaienr.setAttribute('should-hide', 'true'); + } else { + appContentNavbarContaienr.removeAttribute('should-hide'); } // Check if the sidebar is in hover mode @@ -275,13 +284,6 @@ var gZenVerticalTabsManager = { } document.documentElement.removeAttribute("zen-single-toolbar"); navBar.appendChild(document.getElementById('PanelUI-button')); - if (!doNotChangeWindowButtons) { - if (this.isWindowsStyledButtons) { - navBar.append(windowButtons); - } else { - navBar.prepend(windowButtons); - } - } this._toolbarOriginalParent.prepend(navBar); CustomizableUI.zenInternalCU._rebuildRegisteredAreas(); } @@ -294,6 +296,20 @@ var gZenVerticalTabsManager = { if (doNotChangeWindowButtons) { document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons); + } else if (!isSingleToolbar && !isCompactMode) { + if (this.isWindowsStyledButtons) { + if (isRightSide) { + document.getElementById('zen-appcontent-navbar-container').append(windowButtons); + } else { + navBar.append(windowButtons); + } + } else { + if (isRightSide) { + document.getElementById('zen-appcontent-navbar-container').prepend(windowButtons); + } else { + navBar.prepend(windowButtons); + } + } } // Always move the splitter next to the sidebar diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index db767710e..2aa1b9bf5 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -26,7 +26,7 @@ content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css) content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css) content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css) - content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css) +* content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css) content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css) content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css) content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css) diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index f11886588..b165cd293 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -9,7 +9,7 @@ overflow: hidden; margin: 1px; - #browser:has(#navigator-toolbox[zen-right-side='true']) & { + :root[zen-right-side='true'] & { margin-right: 0; margin-left: var(--zen-element-separation); } diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index b80167859..223a31775 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -84,7 +84,7 @@ margin-top: 0; } - & #browser:has(#navigator-toolbox[zen-right-side='true']) #zen-appcontent-wrapper { + &[zen-right-side='true'] #zen-appcontent-wrapper { margin-right: 0; } } diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index f50073b3e..6a8ec6903 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -42,7 +42,7 @@ } } - & #browser:has(#navigator-toolbox[zen-right-side='true']) { + &[zen-right-side='true'] { & #navigator-toolbox { --zen-compact-float: calc(var(--zen-element-separation) + 1px); padding-left: unset !important; @@ -91,7 +91,7 @@ opacity: 1; transform: translateX(calc(100% - var(--zen-element-separation))); - #browser:has(#navigator-toolbox[zen-right-side='true']) & { + :root[zen-right-side='true'] & { transform: translateX(calc(-100% + var(--zen-element-separation) + 1px)); } } diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css index a3687668f..891aac3f5 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -250,7 +250,7 @@ animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important; } -:root:has(#navigator-toolbox:not([zen-right-side='true'])) { +:root:not([zen-right-side='true']) { #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) { margin-left: 0 !important; } diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index f3fb1822a..7536d0ecb 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -60,11 +60,11 @@ overflow: hidden; border: 1px solid var(--zen-colors-border); - :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend='true'] { + :root:not([zen-right-side='true']) &[positionend='true'] { margin-right: var(--zen-element-separation); } - :root:has(#navigator-toolbox[zen-right-side='true']) & { + :root[zen-right-side='true'] & { margin-left: var(--zen-element-separation); } } diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css new file mode 100644 index 000000000..0e84a5260 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css @@ -0,0 +1,23 @@ +height: var(--zen-toolbar-height); + +@media (-moz-bool-pref: 'zen.view.hide-window-controls') { + & { + transition: height 0.2s ease-out, opacity 0.2s ease-out; + transition-delay: 0.05s; + } + + &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) { + transition-delay: 0.2s; + height: var(--zen-element-separation); + overflow: hidden; + opacity: 0; + & > * { + pointer-events: none; + } + } +} + +:root:not([zen-window-buttons-reversed='true']) & .titlebar-buttonbox-container { + margin-left: auto; + width: fit-content; +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 2e31cebf7..95288c7e0 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -119,11 +119,12 @@ display: none; } - :root[zen-single-toolbar='true'] { + :root[zen-single-toolbar='true']:not([customizing]) { #zen-appcontent-navbar-container { display: flex; -moz-window-dragging: drag; min-height: var(--zen-element-separation); + height: var(--zen-element-separation); & #PersonalToolbar { width: -moz-available; @@ -134,31 +135,12 @@ * - We are on a Linux with reversed CSD * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled */ - :root:is( - [zen-window-buttons-reversed='true']:has(#TabsToolbar:not([collapsed='true'])), - :not([zen-window-buttons-reversed='false']) - ):not([customizing]) & { - @media (-moz-bool-pref: 'zen.view.hide-window-controls') { - & { - transition: height 0.2s ease-out, opacity 0.2s ease-out; - transition-delay: 0.05s; - } + &:has(#PersonalToolbar[collapsed='false']) { +%include vertical-tabs-topbar.inc.css + } - &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) { - transition-delay: 0.2s; - height: var(--zen-element-separation); - overflow: hidden; - opacity: 0; - & > * { - pointer-events: none; - } - } - } - - & .titlebar-buttonbox-container { - margin-left: auto; - width: fit-content; - } + &[should-hide='true'] { +%include vertical-tabs-topbar.inc.css } :root[zen-window-buttons-reversed='true'] & { @@ -355,7 +337,7 @@ padding-left: 2px; } - #browser:has(#navigator-toolbox[zen-right-side='true']) & { + :root[zen-right-side='true'] & { margin-left: 0; margin-right: var(--zen-toolbox-padding); @@ -516,7 +498,7 @@ } /* Mark: Move sidebar to the right */ - #browser:has(#navigator-toolbox[zen-right-side='true']) { + :root[zen-right-side='true'] { & #navigator-toolbox { order: 3 !important; } @@ -630,7 +612,7 @@ padding-inline-start: var(--toolbarbutton-outer-padding); } - #browser:has(#navigator-toolbox[zen-right-side='true']) & { + :root[zen-right-side='true'] & { padding-inline-start: 0; padding-inline-end: var(--zen-toolbox-padding); }