diff --git a/src/browser/base/content/browser-box-inc-xhtml.patch b/src/browser/base/content/browser-box-inc-xhtml.patch
index 9fc91dc5d..e272b980b 100644
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/src/browser/base/content/browser-box-inc-xhtml.patch
@@ -1,13 +1,15 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..d113b439888d26629ce5f6b5d35f8fa12249774b 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,13 @@
+@@ -23,7 +23,15 @@
+
-+
++
++
++
+
+#include zen-tabbrowser-elements.inc.xhtml
diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index 3a6f34a3d..231c5b394 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -798,6 +798,7 @@ var gZenVerticalTabsManager = {
}
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
+ const appContentNavbarWrapper = document.getElementById('zen-appcontent-navbar-wrapper');
let shouldHide = false;
if (
((!isRightSide && this.isWindowsStyledButtons) ||
@@ -805,10 +806,10 @@ var gZenVerticalTabsManager = {
(isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
isSingleToolbar
) {
- appContentNavbarContaienr.setAttribute('should-hide', 'true');
+ appContentNavbarWrapper.setAttribute('should-hide', 'true');
shouldHide = true;
} else {
- appContentNavbarContaienr.removeAttribute('should-hide');
+ appContentNavbarWrapper.removeAttribute('should-hide');
}
// Check if the sidebar is in hover mode
diff --git a/src/zen/common/styles/zen-toolbar.css b/src/zen/common/styles/zen-toolbar.css
index d2c4477b4..305654ae3 100644
--- a/src/zen/common/styles/zen-toolbar.css
+++ b/src/zen/common/styles/zen-toolbar.css
@@ -8,6 +8,6 @@
background: transparent;
}
-:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
+:root[inDOMFullscreen='true'] #zen-appcontent-navbar-wrapper {
visibility: collapse;
}
diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs
index ddc56bc7c..31fc64768 100644
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -51,7 +51,7 @@ var gZenCompactModeManager = {
gZenUIManager.addPopupTrackingAttribute(this.sidebar);
gZenUIManager.addPopupTrackingAttribute(
- document.getElementById('zen-appcontent-navbar-container')
+ document.getElementById('zen-appcontent-navbar-wrapper')
);
// Clear hover states when window state changes (minimize, maximize, etc.)
@@ -428,7 +428,7 @@ var gZenCompactModeManager = {
keepHoverDuration: 100,
},
{
- element: document.getElementById('zen-appcontent-navbar-container'),
+ element: document.getElementById('zen-appcontent-navbar-wrapper'),
screenEdge: 'top',
},
]),
@@ -608,7 +608,7 @@ var gZenCompactModeManager = {
},
toggleToolbar() {
- let toolbar = document.getElementById('zen-appcontent-navbar-container');
+ let toolbar = document.getElementById('zen-appcontent-navbar-wrapper');
toolbar.toggleAttribute('zen-user-show');
},
diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css
index d4d1a799e..91bedca44 100644
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -38,11 +38,11 @@
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
}
- &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
+ &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
margin-left: var(--zen-element-separation) !important;
}
- &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
+ &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
@@ -340,68 +340,76 @@
margin-top: calc(var(--zen-element-separation) * 2) !important;
}
- & #zen-appcontent-navbar-container {
+ & #zen-appcontent-navbar-wrapper {
--zen-compact-toolbar-offset: 5px;
position: absolute;
- top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
+ top: calc(-1 * var(--zen-toolbar-height) + 1px);
left: 0;
z-index: 20;
- box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
- border-bottom-left-radius: var(--zen-border-radius);
- border-bottom-right-radius: var(--zen-border-radius);
- border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
- border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
transition: all 0.15s ease;
width: 100%;
- visibility: hidden;
- background: var(--zen-dialog-background);
max-height: var(--zen-toolbar-height);
overflow: hidden;
- & > * {
- position: relative !important;
- }
-
& #urlbar:not([breakout-extend='true']) {
opacity: 0 !important;
}
- @media -moz-pref('zen.view.compact.color-toolbar') {
- background-attachment: fixed;
- background: var(--zen-main-browser-background-toolbar);
- background-size: 100% 2000px;
- border-bottom: 1px solid var(--zen-colors-border);
+ & #zen-appcontent-navbar-container {
+ visibility: hidden;
+
+ box-shadow: var(--zen-big-shadow);
+ border-bottom-left-radius: var(--zen-border-radius);
+ border-bottom-right-radius: var(--zen-border-radius);
+ :root:not([sizemode='maximized']) & {
+ border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+ border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+ }
+ transition: all 0.15s ease;
+ width: 100%;
+ background: var(--zen-dialog-background);
+
+ & > * {
+ position: relative !important;
+ }
+
+ @media -moz-pref('zen.view.compact.color-toolbar') {
+ background-attachment: fixed;
+ background: var(--zen-main-browser-background-toolbar);
+ background-size: 100% 2000px;
+ }
}
}
- & #zen-appcontent-navbar-container[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
- & #zen-appcontent-navbar-container[zen-user-show],
- & #zen-appcontent-navbar-container[has-popup-menu],
- & #zen-appcontent-navbar-container:has(
+ & #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
+ & #zen-appcontent-navbar-wrapper[zen-user-show],
+ & #zen-appcontent-navbar-wrapper[has-popup-menu],
+ & #zen-appcontent-navbar-wrapper:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
) {
- visibility: visible !important;
+ & #zen-appcontent-navbar-container {
+ visibility: visible !important;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: url(chrome://browser/content/zen-images/grain-bg.png);
+ pointer-events: none;
+ z-index: 0;
+ opacity: var(--zen-grainy-background-opacity, 0);
+ mix-blend-mode: overlay;
+ }
+ }
border-top-width: 1px;
top: -1px;
overflow: initial;
max-height: unset;
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-image: url(chrome://browser/content/zen-images/grain-bg.png);
- pointer-events: none;
- z-index: 0;
- opacity: var(--zen-grainy-background-opacity, 0);
- mix-blend-mode: overlay;
- }
-
& #urlbar {
opacity: 1 !important;
}
@@ -426,7 +434,7 @@
}
@media -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
- & #zen-appcontent-navbar-container {
+ & #zen-appcontent-navbar-wrapper {
opacity: 0;
}
}
diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css
index 7d346bf1e..e39bdbd71 100644
--- a/src/zen/tabs/zen-tabs.css
+++ b/src/zen/tabs/zen-tabs.css
@@ -21,7 +21,7 @@
Single Toolbar Mode - Top Bar Handling (Includes External CSS)
========================================================================== */
:root[zen-single-toolbar='true']:not([customizing]) {
- #zen-appcontent-navbar-container {
+ #zen-appcontent-navbar-wrapper {
display: flex;
-moz-window-dragging: drag; /* Allow dragging the window via this bar */
min-height: var(--zen-element-separation);
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index de3bc7751..44b839f34 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -17,12 +17,16 @@
height: 100%; /* Make sure they take up full height */
}
+#zen-appcontent-navbar-container {
+ width: 100%;
+}
+
/* ==========================================================================
Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
========================================================================== */
:root[zen-single-toolbar='true'] {
/* Define and apply a smaller toolbar height for single toolbar mode */
- & #zen-appcontent-navbar-container,
+ & #zen-appcontent-navbar-wrapper,
& #zen-sidebar-top-buttons {
--zen-toolbar-height: 32px;
height: var(--zen-toolbar-height);
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 1fb872d5c..e6448eef1 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -2273,15 +2273,17 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (shouldAnimate) {
gZenUIManager._preventToolbarRebuild = true;
gZenUIManager.updateTabsToolbar();
-
+ let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
+ '--zen-background-opacity'
+ );
+ if (previousBackgroundOpacity === '1') {
+ previousBackgroundOpacity = '0';
+ }
animations.push(
gZenUIManager.motion.animate(
document.documentElement,
{
- '--zen-background-opacity': [
- document.documentElement.style.getPropertyValue('--zen-background-opacity'),
- '1',
- ],
+ '--zen-background-opacity': [previousBackgroundOpacity, '1'],
},
{
type: 'spring',