diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index a16572f3c..feb5e9dfe 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -115,6 +115,7 @@ pref('zen.splitView.working', false);
pref('zen.workspaces.enabled', true);
pref('zen.workspaces.hide-default-container-indicator', true);
pref('zen.workspaces.individual-pinned-tabs', true);
+pref('zen.workspaces.show-icon-strip', true);
pref('zen.workspaces.icons', '["🌐", "📁", "📎", "📝", "📅", "📊"]');
// Zen Watermark
diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs
index c36dfb6d6..fdef0a321 100644
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -129,6 +129,7 @@
this._moveWindowButtons();
this._addSidebarButtons();
+ this._hideToolbarButtons();
},
_moveWindowButtons() {
@@ -139,22 +140,34 @@
}
},
+ _hideToolbarButtons() {
+ const elementsToHide = [
+ 'alltabs-button',
+ ];
+ for (let id of elementsToHide) {
+ const elem = document.getElementById(id);
+ if (elem) {
+ elem.setAttribute('hidden', 'true');
+ }
+ }
+ },
+
_addSidebarButtons() {
const sidebarBox = window.MozXULElement.parseXULToFragment(`
`);
@@ -162,11 +175,31 @@
const sideBarTopButtons = document.getElementById('zen-sidebar-top-buttons')
.querySelector('#zen-sidebar-top-buttons-customization-target');
- const panelMenu = document.getElementById('PanelUI-menu-button');
- panelMenu.classList.add('zen-sidebar-action-button');
- panelMenu.setAttribute('cui-areatype', 'toolbar');
+ const newTab = document.getElementById('vertical-tabs-newtab-button');
+ newTab.classList.add('zen-sidebar-action-button');
+ newTab.setAttribute('cui-areatype', 'toolbar');
- sideBarTopButtons.prepend(panelMenu);
+ const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper');
+ iconsWrapper.appendChild(newTab);
+
+ setTimeout(async () => {
+ CustomizableUI.registerArea(
+ "zen-sidebar-top-buttons",
+ {
+ type: CustomizableUI.TYPE_TOOLBAR,
+ defaultPlacements: ["zen-expand-sidebar-button", "zen-profile-button"],
+ }
+ );
+ CustomizableUI.registerToolbarNode(
+ document.getElementById('zen-sidebar-top-buttons')
+ );
+
+ const panelMenu = document.getElementById('PanelUI-menu-button');
+ panelMenu.classList.add('zen-sidebar-action-button');
+ panelMenu.setAttribute('cui-areatype', 'toolbar');
+
+ sideBarTopButtons.prepend(panelMenu);
+ }, 100);
},
_focusSearchBar() {
diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index a4ffded16..1d5e33646 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit a4ffded16b2461012e63c3bb12e250091739ee93
+Subproject commit 1d5e336462a828b4c492a8049be04477c3a96847
diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
index 37c305428..9ff3315a9 100644
--- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
@@ -1,4 +1,3 @@
\ No newline at end of file
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index 779b22ca2..040918170 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -136,3 +136,33 @@
display: none !important;
}
}
+
+@keyframes zen-workspaces-button-active {
+ from {
+ bottom: -20px;
+ }
+
+ to {
+ bottom: -2px;
+ }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-left {
+ from {
+ left: -20px;
+ }
+
+ to {
+ left: -2px;
+ }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-right {
+ from {
+ right: -20px;
+ }
+
+ to {
+ right: -2px;
+ }
+}
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 3bd1224b5..2c4c399c1 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -27,6 +27,7 @@
padding: var(--zen-toolbox-padding);
padding-top: var(--zen-toolbox-top-align);
+ padding-bottom: var(--zen-element-separation);
margin-top: 0 !important;
display: flex;
@@ -50,6 +51,12 @@
}
}
+ #vertical-tabs-newtab-button {
+ &:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon {
+ background: transparent !important;
+ }
+ }
+
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
@@ -92,31 +99,15 @@
#zen-sidebar-icons-wrapper {
background: transparent;
+ padding: 0;
- & toolbarbutton:not(#zen-workspaces-button) {
- width: fit-content;
+ & > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
}
}
#newtab-button-container {
- margin-inline-end: 0 !important;
- padding-top: 0 !important;
- border-top: solid transparent 0px !important;
-
- &[showborder] {
- padding-top: 4px !important;
-
- &::before {
- content: '';
- display: block;
- height: 1px;
- background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
- margin: 0 auto;
- margin-block-end: 4px;
- width: 80%;
- }
- }
+ display: none !important;
}
#tabbrowser-arrowscrollbox {
@@ -152,7 +143,11 @@
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
- --zen-toolbox-min-width: 150px;
+ --zen-toolbox-min-width: fit-content;
+
+ & #titlebar {
+ min-width: 150px;
+ }
& #zen-sidebar-icons-wrapper {
display: flex;
@@ -160,7 +155,7 @@
flex-direction: row;
justify-content: space-between;
- padding-top: calc(var(--zen-toolbox-padding) * 2);
+ padding-top: var(--zen-element-separation);
width: 100%;
position: relative;
@@ -186,28 +181,6 @@
}
}
- & #newtab-button-container {
- &::before {
- width: 100%;
- margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
- }
-
- & #vertical-tabs-newtab-button {
- padding: 0 !important;
-
- & label {
- display: flex;
- text-align: start;
- align-items: center;
- padding: 0;
- }
-
- &:hover * {
- background: transparent !important;
- }
- }
- }
-
& #tabbrowser-tabs {
& .tabbrowser-tab {
& .tab-background {
@@ -266,7 +239,7 @@
& #zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
- padding-top: calc(var(--zen-toolbox-padding) * 2);
+ padding-top: var(--zen-element-separation);
align-items: center;
}
@@ -323,6 +296,38 @@
margin-inline-end: 0 !important;
}
}
+
+ & #zen-workspaces-button {
+ flex-direction: column;
+
+ &:not([as-button='true']) {
+ margin: 5px 0 !important;
+
+ & toolbarbutton {
+ &[active='true']::after {
+ bottom: 50% !important;
+ transform: translateY(50%) !important;
+
+ :root:has(#navigator-toolbox[zen-right-side='true']) & {
+ left: unset !important;
+ right: -2px !important;
+ animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
+ }
+ }
+
+ :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
+ left: -2px;
+ animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
+ }
+
+ :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
+ left: unset !important;
+ right: -2px !important;
+ animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
+ }
+ }
+ }
+ }
}
/* Mark: Separator styling */
@@ -457,20 +462,34 @@
}
/* Customization mode */
- /*:root[customizing] #navigator-toolbox {
+ :root[customizing] #titlebar {
overflow: hidden;
max-width: 0 !important;
margin-right: var(--zen-element-separation);
padding: 0 !important;
opacity: 0;
display: none;
- }*/
+ }
/* Mark: Sidebar top buttons */
#zen-sidebar-top-buttons {
+ min-width: unset !important;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
- gap: 5px;
+ & #zen-sidebar-top-buttons-customization-target {
+ height: 100%;
+ align-items: center;
+
+ #nav-bar:has(&) & {
+ padding-inline-start: calc(var(--zen-toolbox-padding) * 1.5) !important;
+ }
+
+ & toolbarbutton {
+ height: 100%;
+ padding: 0 var(--toolbarbutton-outer-padding) !important;
+ }
+ }
+
& .zen-sidebar-action-button {
padding: 0 !important;
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 741949b90..6b76a703b 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -77,6 +77,7 @@
/* Toolbar */
--zen-toolbar-height: 39px;
--zen-toolbar-button-inner-padding: 6px;
+ --toolbarbutton-outer-padding: 4px;
/* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index f7a7a0f14..db829dcfd 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -255,7 +255,7 @@ button.popup-notification-dropmarker {
}
#browser:not(:has([zen-expanded="true"])) #nav-bar {
- padding-left: calc(var(--zen-toolbox-padding) * 2 + 1px);
+ padding-left: calc(var(--zen-toolbox-padding) 4px);
}
/* Other small tweaks */
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index a363d7941..5c5aed818 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -2,8 +2,71 @@
justify-content: center;
align-items: center;
display: flex;
- margin: 0 30px;
- opacity: .6;
+ margin: 0 5px;
+
+ position: relative;
+
+ &:not([as-button='true']) {
+ border-radius: var(--zen-button-border-radius);
+ background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
+ padding: 7px;
+ gap: 3px;
+
+ & toolbarbutton {
+ margin: 0 !important;
+ width: 25px;
+ display: flex;
+ justify-content: center;
+ padding: 0 !important;
+ align-items: center;
+ position: relative;
+
+ & > * {
+ opacity: .6;
+ }
+
+ &[active='true']::after {
+ content: '';
+ position: absolute;
+ width: 4px;
+ border-radius: 99px;
+ height: 4px;
+ background: var(--zen-primary-color);
+ bottom: -2px;
+ left: 50%;
+ transform: translateX(-50%);
+ animation: zen-workspaces-button-active 0.1s ease-in-out;
+ }
+ }
+ }
+
+ &[as-button='true'] {
+ border-radius: var(--tab-border-radius);
+
+ &:hover {
+ background: var(--toolbarbutton-hover-background);
+ }
+ }
+
+ :root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] {
+ margin: 0 !important;
+ padding: var(--toolbarbutton-inner-padding) !important;
+ width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+ height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+ border-radius: var(--tab-border-radius) !important;
+
+ &:hover {
+ background: var(--toolbarbutton-hover-background) !important;
+ }
+ }
+}
+
+#zen-workspaces-button .zen-workspace-sidebar-wrapper {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
@@ -27,17 +90,21 @@
:not([zen-user-hover='true'])
) {
- & #zen-workspaces-button {
- width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
- margin-top: .2rem;
+ & #zen-workspaces-button[as-button='true'] {
+ width: 100% !important;
+ margin: 0 10px;
}
& #zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
- & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
- display: none;
+ & #zen-workspaces-button .zen-workspace-sidebar-icon {
+ margin-inline-end: 5px;
+
+ & [no-icon='true'] {
+ display: none;
+ }
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
index d7533e8ef..e12859749 100644
--- a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
+++ b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..f15e9e92a27f1779cda6521e33915ddc4e3a93e5 100644
+index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e075a5680d0 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -36,3 +36,11 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..f15e9e92a27f1779cda6521e33915ddc
],
defaultCollapsed: null,
},
+@@ -331,6 +330,7 @@ var CustomizableUIInternal = {
+ CustomizableUI.AREA_NAVBAR,
+ CustomizableUI.AREA_BOOKMARKS,
+ CustomizableUI.AREA_TABSTRIP,
++ "zen-sidebar-top-buttons",
+ ]);
+ if (AppConstants.platform != "macosx") {
+ toolbars.add(CustomizableUI.AREA_MENUBAR);