ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 00:10:00 +02:00
Code Releases Wiki Activity

chore: Refactored vertical tabs css and improved essentials layout, b=(no-bug), c=tabs, workspaces

Browse source
This commit is contained in:
Mr. M 2025-04-29 14:26:21 +02:00
parent a35ef0e735
commit 0dac5522fe
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
5 changed files with 650 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.prettierignore
View file

@ -22,7 +22,7 @@ docs/issue-metrics/*.md
# Some CSS files are preprocessed and prettier doesn't handle them well
# We also dont want to format the CSS files that are generated by the build
src/zen/tabs/zen-tabs/vertical-tabs.css
src/zen/tabs/zen-tabs.css
src/zen/compact-mode/zen-compact-mode.css
src/zen/common/ZenEmojies.mjs

4
src/browser/base/content/zen-assets.jar.inc.mn
View file

@ -51,8 +51,8 @@
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
* content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)

97
src/zen/tabs/zen-tabs.css
View file

@ -16,3 +16,100 @@
display: none !important;
}
}
/* ==========================================================================
Single Toolbar Mode - Top Bar Handling (Includes External CSS)
========================================================================== */
:root[zen-single-toolbar='true']:not([customizing]) {
#zen-appcontent-navbar-container {
display: flex;
-moz-window-dragging: drag; /* Allow dragging the window via this bar */
min-height: var(--zen-element-separation);
height: var(--zen-element-separation);
/* Ensure Personal Toolbar takes available width */
& #PersonalToolbar {
width: -moz-available;
}
/* Include styles for the top bar under certain conditions:
* - Bookmarks toolbar is visible OR
* - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include zen-tabs/vertical-tabs-topbar.inc.css
}
&[should-hide='true'] {
%include zen-tabs/vertical-tabs-topbar.inc.css
}
/* Hide the top bar completely in fullscreen mode */
:root[inDOMFullscreen='true'] & {
max-height: 0 !important;
min-height: unset !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
}
/* ==========================================================================
Very Special Occasions - Complex Layout Fixes
========================================================================== */
/* Exclude these complex fixes if in compact mode */
:root:not([zen-compact-mode='true']) {
/* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
&[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
/* Push toolbox down below the top toolbar */
& #navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
/* Pull window buttons container leftwards over the collapsed sidebar */
& .titlebar-buttonbox-container {
margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
}
/* Allow overflow for the button box */
& #zen-appcontent-wrapper {
overflow-x: visible;
}
/* Reset padding for top buttons */
& #zen-sidebar-top-buttons-customization-target {
padding-top: 0;
}
/* Add padding to the left of the nav container */
& #zen-appcontent-navbar-container {
padding-left: var(--zen-element-separation);
}
/* Include common fixes for this top-button scenario */
%include zen-tabs/vertical-tabs-topbuttons-fix.css
}
/* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
&:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
/* Push toolbox down below the top toolbar */
& #navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
/* Pull window buttons container rightwards over the collapsed sidebar */
& .titlebar-buttonbox-container {
margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
}
/* Allow overflow for the button box */
& #zen-appcontent-wrapper {
overflow-x: visible;
}
/* Reset padding for top buttons */
& #zen-sidebar-top-buttons-customization-target {
padding-top: 0;
}
/* Add padding to the right of the nav container */
& #zen-appcontent-navbar-container {
padding-right: var(--zen-element-separation);
}
/* Include common fixes for this top-button scenario */
%include zen-tabs/vertical-tabs-topbuttons-fix.css
}
}

896
src/zen/tabs/zen-tabs/vertical-tabs.css
View file

File diff suppressed because it is too large Load diff

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

@ -2386,6 +2386,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
const workspaceObject = this.getWorkspaceFromId(workspaceId);
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
const essentialNumChildren = essentialContainer.children.length;
let essentialHackType = 0;
if (essentialNumChildren % 3 === 0) {
essentialHackType = 3;
} else if (essentialNumChildren % 4 === 0 || essentialNumChildren % 4 === 3) {
essentialHackType = 4;
}
if (essentialHackType > 0) {
essentialContainer.setAttribute('data-hack-type', essentialHackType);
} else {
essentialContainer.removeAttribute('data-hack-type');
}
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
}