mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-03 16:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor vertical tab styles and improve toolbar layout for better usability

Browse Source
This commit is contained in:
mr. M
2024-11-29 00:33:32 +01:00
parent be92638cf2
commit 0b42ee83bb
2 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -213,7 +213,7 @@ var gZenVerticalTabsManager = {
const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
const titlebar = document.getElementById('titlebar');
// gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');

156
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -42,85 +42,11 @@
}
}
}
}
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
margin-right: auto;
width: fit-content;
}
: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;
}
/* We enable this trick IF we follow any of theses conditions:
* - We are on a Mac
* - 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
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include vertical-tabs-topbar.inc.css
}
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
:root[zen-window-buttons-reversed='true'] & {
&:has(#PersonalToolbar[collapsed="true"]) {
display: none;
}
}
}
}
:root[zen-single-toolbar='true'] {
#urlbar-container {
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 12px;
height: 12px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
padding: 6px !important;
}
& #urlbar-container,
& #urlbar {
--urlbar-container-height: 40px !important;
--urlbar-height: 38px !important;
}
& #nav-bar {
margin-bottom: 8px;
}
& #zen-sidebar-top-buttons {
margin: 4px 0;
}
& #PanelUI-menu-button {
padding: 0 !important;
}
}
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
margin-right: auto;
width: fit-content;
}
#TabsToolbar > * {
@@ -138,6 +64,48 @@
}
}
:root[zen-single-toolbar='true'] {
#urlbar-container {
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 12px;
height: 12px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
padding: 6px !important;
}
& #urlbar-container,
& #urlbar {
--urlbar-container-height: 40px !important;
--urlbar-height: 38px !important;
}
& #nav-bar {
margin-bottom: 8px;
}
& #zen-sidebar-top-buttons {
margin: 4px 0;
}
& #PanelUI-menu-button {
padding: 0 !important;
}
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
@@ -175,6 +143,38 @@
display: none;
}
: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;
}
/* We enable this trick IF we follow any of theses conditions:
* - We are on a Mac
* - 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
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include vertical-tabs-topbar.inc.css
}
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
:root[zen-window-buttons-reversed='true'] & {
&:has(#PersonalToolbar[collapsed="true"]) {
display: none;
}
}
}
}
#TabsToolbar-customization-target {
position: relative;
max-width: 100%;