Refactor ZenStartup to update default placements for sidebar buttons

src/browser/base/content/ZenStartup.mjs

@@ -156,7 +156,7 @@
       const sidebarBox = window.MozXULElement.parseXULToFragment(`
         <toolbar id="zen-sidebar-top-buttons"
           fullscreentoolbar="true" 
-          class="browser-toolbar customization-target"
+          class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
           brighttext="true"
           data-l10n-id="tabs-toolbar"
           customizable="true"
@@ -182,7 +182,7 @@
       const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper');
       iconsWrapper.appendChild(newTab);
 
-      setTimeout(async () => {
+      setTimeout(() => {
         CustomizableUI.registerArea(
           "zen-sidebar-top-buttons",
           {
@@ -202,6 +202,28 @@
         panelMenu.setAttribute('cui-areatype', 'toolbar');
 
         sideBarTopButtons.prepend(panelMenu);
+
+        const defaultSidebarIcons = [
+          'zen-sidepanel-button',
+          'zen-workspaces-button',
+          'vertical-tabs-newtab-button'
+        ];
+        for (let id of defaultSidebarIcons) {
+          if (id === 'zen-workspaces-button') continue;
+          const elem = document.getElementById(id);
+          elem.setAttribute('removable', 'true');
+        }
+        CustomizableUI.registerArea(
+          "zen-sidebar-icons-wrapper",
+          {
+            type: CustomizableUI.TYPE_TOOLBAR,
+            defaultPlacements: defaultSidebarIcons,
+            defaultCollapsed: null,
+          }
+        );
+        CustomizableUI.registerToolbarNode(
+          document.getElementById('zen-sidebar-icons-wrapper')
+        );
       }, 100);
     },
 

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,3 +1,11 @@
-<toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
+<toolbar brighttext="true" 
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
+  id="zen-sidebar-icons-wrapper" 
+  fullscreentoolbar="true" 
+  class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
+  data-l10n-id="tabs-toolbar"
+  customizable="true"
+  toolbarname="Zen Sidebar Icons"
+  context="toolbar-context-menu"
+  mode="icons">
+  <toolbarbutton removeable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

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

@@ -100,6 +100,7 @@
   #zen-sidebar-icons-wrapper {
     background: transparent;
     padding: 0;
+    gap: 5px;
 
     & > toolbarbutton:not(#zen-workspaces-button) {
       padding: 0 !important;
@@ -149,6 +150,10 @@
       min-width: 150px;
     }
 
+    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
+      display: none;
+    }
+
     & #zen-sidebar-icons-wrapper {
       display: flex;
       /* Make sure the icons take most of the space, smartly */
@@ -161,8 +166,6 @@
       position: relative;
 
       --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
-
-      justify-content: space-between;
     }
 
     /* Mark: Fix separator paddings */
@@ -176,7 +179,7 @@
 
     & #TabsToolbar-customization-target {
       &::after {
-        width: 98%;
+        width: 100%;
         bottom: calc(-0.5 * var(--zen-toolbox-padding));
       }
     }
@@ -231,11 +234,15 @@
     --zen-toolbox-max-width: 50px;
     max-width: var(--zen-toolbox-max-width) !important;
 
-    #vertical-tabs-newtab-button {
+    & #vertical-tabs-newtab-button {
       padding: 0 !important;
       background: transparent !important;
     }
 
+    :root[customizing] & #zen-sidebar-icons-wrapper {
+      min-width: unset !important;
+    }
+
     & #zen-sidebar-icons-wrapper {
       display: flex;
       flex-direction: column;
@@ -247,6 +254,41 @@
       display: none !important;
     }
 
+    &:has(#newtab-button-container tab:not([hidden])) #vertical-pinned-tabs-container {
+      padding-bottom: 5px !important;
+      margin-bottom: 5px !important;
+      border-bottom: 1px solid var(--zen-colors-border) !important;
+    }
+
+    & #zen-workspaces-button[as-button='true']::after {
+      content: '';
+      display: block;
+      height: 80%;
+      width: 3px;
+      background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%);
+      position: absolute;
+      left: calc(-1 * var(--zen-toolbox-padding) - 1px);
+      top: 50%;
+      transform: translateY(-50%);
+      border-top-right-radius: var(--zen-border-radius);
+      border-bottom-right-radius: var(--zen-border-radius);
+    }
+
+    &[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after {
+      left: unset;
+      right: calc(-1 * var(--zen-toolbox-padding) - 1px);
+
+      border-top-left-radius: var(--zen-border-radius);
+      border-bottom-left-radius: var(--zen-border-radius);
+
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & #TabsToolbar-customization-target::after {
+      bottom: 0 !important;
+    }
+
     & #tabbrowser-tabs {
       --tab-min-width: 36px !important;
 
@@ -301,7 +343,6 @@
       flex-direction: column;
 
       &:not([as-button='true']) {
-        margin: 5px 0 !important;
         
         & toolbarbutton {
           &[active='true']::after {
@@ -409,31 +450,6 @@
         display: none !important;
         visibility: hidden !important;
       }
-
-      & #zen-sidebar-icons-wrapper {
-        display: block !important;
-      }
-
-      & #titlebar .zen-sidebar-action-button {
-        width: 100%;
-        border-radius: var(--zen-button-border-radius);
-
-        &:hover {
-          background: var(--button-hover-bgcolor);
-        }
-
-        & > *,
-        &:hover > * {
-          background: transparent !important;
-          --toolbarbutton-active-background: transparent;
-        }
-
-        & label:not(.toolbarbutton-badge) {
-          --toolbarbutton-hover-background: transparent;
-          display: block !important;
-          text-align: start;
-        }
-      }
     }
   }
 
@@ -462,7 +478,7 @@
   }
 
   /* Customization mode */
-  :root[customizing] #titlebar {
+  :root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
     overflow: hidden;
     max-width: 0 !important;
     margin-right: var(--zen-element-separation);
@@ -498,4 +514,9 @@
       }
     }
   }
+
+  /** Add transition delays */
+  #navigator-toolbox, #navigator-toolbox > * {
+    transition-delay: 2s !important;
+  }
 }

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -2,7 +2,6 @@
   justify-content: center;
   align-items: center;
   display: flex;
-  margin: 0 5px;
 
   position: relative;
 
@@ -67,6 +66,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  pointer-events: none;
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
@@ -76,7 +76,6 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 13px;
-  pointer-events: none;
 }
 
 @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
@@ -92,7 +91,13 @@
 
     & #zen-workspaces-button[as-button='true'] {
       width: 100% !important;
-      margin: 0 10px;
+      margin: 2px;
+      min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+
+      & .zen-workspace-sidebar-wrapper {
+        left: calc(var(--toolbarbutton-outer-padding) + 5px);
+        width: calc(100% - (var(--toolbarbutton-outer-padding) * 3  ));
+      }
     }
     
     & #zen-workspaces-button .zen-workspace-sidebar-name {

src/browser/components/preferences/zen-settings.js

@@ -776,4 +776,9 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.workspaces.show-icon-strip',
+    type: 'bool',
+    default: true,
+  }
 ]);

src/browser/components/preferences/zenWorkspaces.inc.xhtml

@@ -27,6 +27,9 @@
             <checkbox id="zenWorkspacesAllowPinnedTabsForDifferentWorkspaces"
                   data-l10n-id="zen-settings-workspaces-allow-pinned-tabs-for-different-workspaces"
                   preference="zen.workspaces.individual-pinned-tabs"/>
+            <checkbox id="zenWorkspacesDisplayAsIconStrip"
+                  data-l10n-id="zen-settings-workspaces-display-as-icon-strip"
+                  preference="zen.workspaces.show-icon-strip"/>
       </vbox>
 </groupbox>
 

src/browser/themes/shared/zen-icons/icons.css

@@ -173,7 +173,7 @@
 
 #zoom-in-button,
 #tabs-newtab-button,
-#TabsToolbar #new-tab-button,
+#new-tab-button,
 #appMenu-zoomEnlarge-button2,
 #PanelUI-zen-profiles-newProfile,
 #zen-sidebar-add-panel-button,