diff --git a/src/zen/common/ZenStartup.mjs b/src/zen/common/ZenStartup.mjs index 289266a2b..f1b6c5a0f 100644 --- a/src/zen/common/ZenStartup.mjs +++ b/src/zen/common/ZenStartup.mjs @@ -32,9 +32,6 @@ toolbarBackground.removeAttribute('id'); toolbarBackground.classList.add('zen-toolbar-background'); document.getElementById('titlebar').prepend(toolbarBackground); - document - .getElementById('zen-appcontent-navbar-container') - .prepend(toolbarBackground.cloneNode(true)); } #zenInitBrowserLayout() { diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index faf3cf950..aa03fef2a 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -57,6 +57,7 @@ var gZenUIManager = { this._debloatContextMenus(); this._addNewCustomizableButtonsIfNeeded(); this._initOmnibox(); + this._initBookmarkCollapseListener(); }, _addNewCustomizableButtonsIfNeeded() { @@ -75,6 +76,19 @@ var gZenUIManager = { Services.prefs.setBoolPref(kPref, true); }, + _initBookmarkCollapseListener() { + document + .getElementById('PersonalToolbar') + .addEventListener('toolbarvisibilitychange', (event) => { + const visible = event.detail.visible; + if (visible) { + document.documentElement.setAttribute('zen-has-bookmarks', 'true'); + } else { + document.documentElement.removeAttribute('zen-has-bookmarks'); + } + }); + }, + _initOmnibox() { const { registerZenUrlbarProviders } = ChromeUtils.importESModule( 'resource:///modules/ZenUBProvider.sys.mjs' @@ -231,7 +245,7 @@ var gZenUIManager = { continue; } document.removeEventListener('mousemove', this.__removeHasPopupAttribute); - el.setAttribute('has-popup-menu', ''); + gZenCompactModeManager._setElementExpandAttribute(el, true, 'has-popup-menu'); this.__currentPopup = showEvent.target; this.__currentPopupTrackElement = el; break; @@ -244,9 +258,10 @@ var gZenUIManager = { } const element = this.__currentPopupTrackElement; if (document.getElementById('main-window').matches(':hover')) { - element.removeAttribute('has-popup-menu'); + gZenCompactModeManager._setElementExpandAttribute(element, false, 'has-popup-menu'); } else { - this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu'); + this.__removeHasPopupAttribute = () => + gZenCompactModeManager._setElementExpandAttribute(element, false, 'has-popup-menu'); document.addEventListener('mousemove', this.__removeHasPopupAttribute, { once: true }); } this.__currentPopup = null; @@ -978,7 +993,7 @@ var gZenVerticalTabsManager = { (isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) && isSingleToolbar ) { - appContentNavbarWrapper.setAttribute('should-hide', 'true'); + appContentNavbarWrapper.setAttribute('should-hide', true); shouldHide = true; } else { appContentNavbarWrapper.removeAttribute('should-hide'); diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index ea34f8434..77a0172c8 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -10,10 +10,11 @@ position: relative; &.browserSidebarContainer { + overflow: clip; + :root:not([zen-no-padding='true']) &:not(.zen-glance-overlay) { border-radius: var(--zen-native-inner-radius); box-shadow: var(--zen-big-shadow); - overflow: clip; } & browser[type='content'] { @@ -41,4 +42,26 @@ } } } + + @media not ((-moz-pref('zen.view.experimental-no-window-controls') or not -moz-pref('zen.view.hide-window-controls') ) and -moz-pref('zen.view.use-single-toolbar')) { + .browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer { + transition: margin 0.15s ease; + + :root[zen-single-toolbar='true'] & { + transition-delay: 0.2s; + } + + #tabbrowser-tabpanels[has-toolbar-hovered] & { + --margin-top-fix: calc(-1 * var(--zen-toolbar-height) + var(--zen-element-separation)); + + :root:not([zen-single-toolbar='true']) & { + --margin-top-fix: calc( + -1 * var(--zen-toolbar-height-with-bookmarks) + var(--zen-element-separation) + ); + } + + margin-top: var(--margin-top-fix); + } + } + } } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 1de665622..77472547b 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -156,6 +156,11 @@ --zen-toolbar-height: 38px; --zen-toolbar-button-inner-padding: 6px; --toolbarbutton-outer-padding: 4px; + --zen-toolbar-height-with-bookmarks: var(--zen-toolbar-height); + &[zen-has-bookmarks='true'] { + /* Make sure `30px` matches the bookmarks toolbar height */ + --zen-toolbar-height-with-bookmarks: calc(var(--zen-toolbar-height) + 30px); + } --toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important; diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index 720174d5f..f6b02d86c 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -79,7 +79,7 @@ var gZenCompactModeManager = { window.addEventListener('mouseover', (event) => { const buttons = gZenVerticalTabsManager.actualWindowButtons; if (event.target.closest('.titlebar-buttonbox-container') === buttons) return; - buttons.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(buttons, false); }); } @@ -323,7 +323,7 @@ var gZenCompactModeManager = { this.sidebar.setAttribute('animate', 'true'); } if (this._ignoreNextHover) { - this.sidebar.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(this.sidebar, false); } this.sidebar.style.removeProperty('margin-right'); this.sidebar.style.removeProperty('margin-left'); @@ -354,7 +354,7 @@ var gZenCompactModeManager = { } else { sidebarWidth -= elementSeparation; } - this.sidebar.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(this.sidebar, false); gZenUIManager.motion .animate( this.sidebar, @@ -405,6 +405,8 @@ var gZenCompactModeManager = { }); }); } else if (canHideSidebar && !isCompactMode) { + // Shouldn't be ever true, but just in case + delete this._ignoreNextHover; document.getElementById('browser').style.overflow = 'clip'; if (this.sidebarIsOnRight) { this.sidebar.style.marginRight = `-${sidebarWidth}px`; @@ -443,6 +445,7 @@ var gZenCompactModeManager = { } else { this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating document.documentElement.removeAttribute('zen-compact-animating'); + delete this._ignoreNextHover; resolve(); } }); @@ -530,17 +533,14 @@ var gZenCompactModeManager = { }, flashElement(element, duration, id, attrName = 'flash-popup') { - //if (element.matches(':hover')) { - // return; - //} if (this._flashTimeouts[id]) { clearTimeout(this._flashTimeouts[id]); } else { - requestAnimationFrame(() => element.setAttribute(attrName, 'true')); + requestAnimationFrame(() => this._setElementExpandAttribute(element, true, attrName)); } this._flashTimeouts[id] = setTimeout(() => { window.requestAnimationFrame(() => { - element.removeAttribute(attrName); + this._setElementExpandAttribute(element, false, attrName); this._flashTimeouts[id] = null; }); }, duration); @@ -551,11 +551,34 @@ var gZenCompactModeManager = { this._flashTimeouts[id] = null; }, + _setElementExpandAttribute(element, value, attr = 'zen-has-hover') { + const kVerifiedAttributes = ['zen-has-hover', 'has-popup-menu']; + const isToolbar = element.id === 'zen-appcontent-navbar-wrapper'; + if (value) { + element.setAttribute(attr, 'true'); + if ( + isToolbar && + (element.hasAttribute('should-hide') || + (this.preference && + Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') && + !gZenVerticalTabsManager._hasSetSingleToolbar)) + ) { + gBrowser.tabpanels.setAttribute('has-toolbar-hovered', 'true'); + } + } else { + element.removeAttribute(attr); + // Only remove if none of the verified attributes are present + if (isToolbar && !kVerifiedAttributes.some((attr) => element.hasAttribute(attr))) { + gBrowser.tabpanels.removeAttribute('has-toolbar-hovered'); + } + } + }, + addMouseActions() { gURLBar.textbox.addEventListener('mouseenter', (event) => { if (event.target.closest('#urlbar[zen-floating-urlbar]')) { window.requestAnimationFrame(() => { - this.sidebar.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(gZenVerticalTabsManager.actualWindowButtons, false); }); this._hasHoveredUrlbar = true; return; @@ -567,7 +590,7 @@ var gZenCompactModeManager = { // Add the attribute on startup if the mouse is already over the element if (target.matches(':hover')) { - target.setAttribute('zen-has-hover', 'true'); + this._setElementExpandAttribute(target, true); } const onEnter = (event) => { @@ -585,7 +608,7 @@ var gZenCompactModeManager = { ) { return; } - target.setAttribute('zen-has-hover', 'true'); + this._setElementExpandAttribute(target, true); }); }, this.HOVER_HACK_DELAY); }; @@ -633,7 +656,7 @@ var gZenCompactModeManager = { ); } else { this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => - target.removeAttribute('zen-has-hover') + this._setElementExpandAttribute(target, false) ); } }, this.HOVER_HACK_DELAY); @@ -669,7 +692,7 @@ var gZenCompactModeManager = { 'mousemove', () => { if (target.matches(':hover')) return; - target.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(target, false); this.clearFlashTimeout('has-hover' + target.id); }, { once: true } @@ -710,7 +733,7 @@ var gZenCompactModeManager = { for (let entry of this.hoverableElements) { const target = entry.element; if (target && !target.matches(':hover') && target.hasAttribute('zen-has-hover')) { - target.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(target, false); this.clearFlashTimeout('has-hover' + target.id); } } @@ -718,7 +741,7 @@ var gZenCompactModeManager = { isSidebarPotentiallyOpen() { if (this._ignoreNextHover) { - this.sidebar.removeAttribute('zen-has-hover'); + this._setElementExpandAttribute(this.sidebar, false); } return ( this.sidebar.hasAttribute('zen-user-show') || diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index f58134b53..6ca231175 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -9,8 +9,7 @@ --zen-toolbox-top-align: var(--zen-element-separation); } - & #titlebar, - & #zen-appcontent-wrapper { + & #titlebar { margin-top: var(--zen-element-separation) !important; } @@ -22,33 +21,23 @@ & .zen-toolbar-background { display: flex; } - --zen-compact-toolbar-offset: 5px; - position: absolute; - top: calc(-1 * var(--zen-toolbar-height) + 1px); - left: 0; - z-index: 20; - transition: all 0.15s ease; - width: 100%; + transition: height 0.15s ease; - max-height: var(--zen-toolbar-height); - overflow: hidden; + height: calc(var(--zen-element-separation) + 0.1px); + overflow: clip; & #urlbar:not([breakout-extend='true']) { - opacity: 0 !important; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease; } - & #zen-appcontent-navbar-container { + & .titlebar-buttonbox-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%; + /* We need to hide them since on Windows the native + * panels when hovering over them can interfere with the + * web content */ + transition: visibility 0.15s ease; } } @@ -63,22 +52,18 @@ #urlbar[zen-floating-urlbar='true'] ):not(.zen-compact-mode-ignore) ) { - & #zen-appcontent-navbar-container { - visibility: visible !important; - } - border-top-width: 0px; - top: -1px; - overflow: initial; - max-height: unset; + height: var(--zen-toolbar-height-with-bookmarks); + overflow: inherit; + + & .titlebar-buttonbox-container { + visibility: visible; + transition: none; + } & #urlbar { - opacity: 1 !important; - } - - & #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) { - top: 2px !important; opacity: 1; + pointer-events: auto; } } } diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css index bfd25a1ff..aa71f65a7 100644 --- a/src/zen/tabs/zen-tabs.css +++ b/src/zen/tabs/zen-tabs.css @@ -36,7 +36,7 @@ * - Bookmarks toolbar is visible OR * - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls) */ - &:has(#PersonalToolbar:not([collapsed])) { + :root[zen-has-bookmarks] & { %include zen-tabs/vertical-tabs-topbar.inc.css } &[should-hide='true'] { @@ -108,4 +108,11 @@ /* Include common fixes for this top-button scenario */ %include zen-tabs/vertical-tabs-topbuttons-fix.css } + + &:not([zen-right-side='true']):not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']), + &[zen-right-side='true']:not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] { + & #titlebar { + padding-top: var(--zen-toolbar-height); + } + } } \ No newline at end of file diff --git a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css index 5bd8997da..f66ee357b 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css @@ -8,31 +8,22 @@ z-index: 1; #zen-appcontent-navbar-container { display: flex; + min-height: var(--zen-toolbar-height); } @media -moz-pref('zen.view.hide-window-controls') { - & { - transition: - height 0.15s ease, - opacity 0.1s ease-out; - transition-delay: 0.2s; - - & > * { - transition: opacity 0.2s ease-out; - transition-delay: 0.2s; - } - } + transition: height 0.15s ease, opacity 0.15s ease; + will-change: height, opacity; + transition-delay: 0.2s; + overflow: clip; &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not( :has(*:is([panelopen='true'], [open='true'])) ) { - transition-delay: 0.2s; /* In order to still use it on fullscreen, even if it's 0px, add .1px (almost invisible) */ height: calc(var(--zen-element-separation) + 0.1px); - overflow: hidden; opacity: 0; - & > * { - opacity: 0; + & #zen-appcontent-navbar-container { pointer-events: none; } @@ -43,7 +34,7 @@ z-index: 1; } @media -moz-pref('zen.view.experimental-no-window-controls') { - &:has(#PersonalToolbar[collapsed]) { + :root:not([zen-has-bookmarks]) & { max-height: 0 !important; overflow: hidden; opacity: 0 !important; diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 4220c5375..8be3fe996 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -30,9 +30,10 @@ Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`) ========================================================================== */ :root[zen-single-toolbar='true'] { + --zen-toolbar-height: 32px; + & #zen-appcontent-navbar-wrapper, & #zen-sidebar-top-buttons { - --zen-toolbar-height: 32px; height: var(--zen-toolbar-height); }