mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-14 13:56:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fixed an issue with top toolbar not able to be hovered, b=(no-bug), c=common, compact-mode, tabs, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-05-20 19:02:44 +02:00
parent 9982b1af34
commit d3ec41d73f
8 changed files with 73 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/browser/base/content/browser-box-inc-xhtml.patch
View File

@@ -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 @@
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
+<vbox flex="1" id="zen-appcontent-wrapper">
+ <html:div id="zen-appcontent-navbar-container"></html:div>
+ <html:div id="zen-appcontent-navbar-wrapper">
+ <html:div id="zen-appcontent-navbar-container"></html:div>
+ </html:div>
+ <hbox id="zen-tabbox-wrapper" flex="1">
<tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
+#include zen-tabbrowser-elements.inc.xhtml

5
src/zen/common/ZenUIManager.mjs
View File

@@ -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

2
src/zen/common/styles/zen-toolbar.css
View File

@@ -8,6 +8,6 @@
background: transparent;
}
:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
:root[inDOMFullscreen='true'] #zen-appcontent-navbar-wrapper {
visibility: collapse;
}

6
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -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');
},

88
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -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;
}
}

2
src/zen/tabs/zen-tabs.css
View File

@@ -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);

6
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -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);

12
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -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',