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

Refactor ZenUIManager and update CSS for compact mode layout adjustments

Browse Source
This commit is contained in:
mr. M
2024-11-24 11:59:57 +01:00
parent 20743f2b51
commit cfe354a35b
2 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/browser/base/content/ZenUIManager.mjs
View File

@@ -135,7 +135,7 @@ var gZenVerticalTabsManager = {
XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true); XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
if (this.isWindowsStyledButtons) { if (!this.isWindowsStyledButtons) {
document.documentElement.setAttribute("zen-window-buttons-reversed", true); document.documentElement.setAttribute("zen-window-buttons-reversed", true);
} }
@@ -198,6 +198,7 @@ var gZenVerticalTabsManager = {
const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical'); const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs; const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs; const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs;
const titlebar = document.getElementById('titlebar');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal'); gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal'); gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
@@ -247,15 +248,6 @@ var gZenVerticalTabsManager = {
document.getElementById('zen-appcontent-navbar-container').append(windowButtons); document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
} }
document.documentElement.setAttribute("zen-single-toolbar", true); document.documentElement.setAttribute("zen-single-toolbar", true);
if (isCompactMode) {
const titlebar = document.getElementById('titlebar');
titlebar.prepend(navBar);
titlebar.prepend(topButtons);
} else {
const titlebar = document.getElementById('titlebar');
titlebar.before(topButtons);
titlebar.before(navBar);
}
this._hasSetSingleToolbar = true; this._hasSetSingleToolbar = true;
} else if (this._hasSetSingleToolbar) { } else if (this._hasSetSingleToolbar) {
this._hasSetSingleToolbar = false; this._hasSetSingleToolbar = false;
@@ -281,6 +273,14 @@ var gZenVerticalTabsManager = {
CustomizableUI.zenInternalCU._rebuildRegisteredAreas(); CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
} }
if (isCompactMode) {
titlebar.prepend(navBar);
titlebar.prepend(topButtons);
} else {
titlebar.before(topButtons);
titlebar.before(navBar);
}
if (doNotChangeWindowButtons) { if (doNotChangeWindowButtons) {
document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons); document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
} }

45
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -26,12 +26,16 @@
z-index: 9; z-index: 9;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation)); right: calc(100% - var(--zen-element-separation));
top: var(--zen-element-separation); top: 0;
bottom: var(--zen-element-separation); bottom: var(--zen-element-separation);
opacity: 0; opacity: 0;
padding-left: var(--zen-compact-float) !important; padding-left: var(--zen-compact-float) !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
padding-top: 0 !important; padding-top: 0 !important;
:root[zen-single-toolbar='true'] & {
top: var(--zen-element-separation);
}
} }
& #browser:has(#navigator-toolbox[zen-right-side='true']) { & #browser:has(#navigator-toolbox[zen-right-side='true']) {
@@ -90,26 +94,27 @@
} }
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
:root:not([zen-single-toolbar='true']) { &:not([zen-single-toolbar='true']) {
#navigator-toolbox { & #navigator-toolbox {
top: var(--zen-element-separation); top: 0;
} }
#navigator-toolbox { & #navigator-toolbox {
--zen-toolbox-top-align: var(--zen-element-separation); --zen-toolbox-top-align: var(--zen-element-separation);
} }
#sidebar-box, & #sidebar-box,
#titlebar, & #titlebar,
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) { & #zen-appcontent-wrapper,
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
margin-top: var(--zen-element-separation) !important; margin-top: var(--zen-element-separation) !important;
} }
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-top: calc(var(--zen-element-separation) * 2) !important; margin-top: calc(var(--zen-element-separation) * 2) !important;
} }
#zen-appcontent-navbar-container { & #zen-appcontent-navbar-container {
--zen-compact-toolbar-offset: 5px; --zen-compact-toolbar-offset: 5px;
position: absolute; position: absolute;
top: 0; top: 0;
@@ -119,10 +124,18 @@
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
border-bottom-left-radius: var(--zen-border-radius); border-bottom-left-radius: var(--zen-border-radius);
border-bottom-right-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.1s ease-in-out; transition: all 0.1s ease-in-out;
width: 100%; width: 100%;
opacity: 0; opacity: 0;
background: var(--zen-dialog-background); background: var(--zen-dialog-background);
padding-left: var(--zen-toolbox-padding) !important;
:root[zen-window-buttons-reversed='true'] & {
padding-left: 0 !important;
padding-right: var(--zen-toolbox-padding) !important;
}
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') { @media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
background-attachment: fixed; background-attachment: fixed;
@@ -133,12 +146,12 @@
} }
} }
#zen-appcontent-navbar-container:hover, & #zen-appcontent-navbar-container:hover,
#zen-appcontent-navbar-container[zen-has-hover], & #zen-appcontent-navbar-container[zen-has-hover],
#zen-appcontent-navbar-container:focus-within, & #zen-appcontent-navbar-container:focus-within,
#zen-appcontent-navbar-container[zen-user-show], & #zen-appcontent-navbar-container[zen-user-show],
#zen-appcontent-navbar-container[has-popup-menu], & #zen-appcontent-navbar-container[has-popup-menu],
#zen-appcontent-navbar-container:has(*[open='true']) { & #zen-appcontent-navbar-container:has(*[open='true']) {
opacity: 1; opacity: 1;
border-top-width: 1px; border-top-width: 1px;