Implement sidebar splitter and overflow handling; enhance customizable UI features

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -13,6 +13,7 @@ export var ZenCustomizableUI = new (class {
         type: this.TYPE_TOOLBAR,
         defaultPlacements: [''],
         defaultCollapsed: null,
+        overflowable: true,
       },
       true
     );
@@ -34,6 +35,16 @@ export var ZenCustomizableUI = new (class {
   }
 
   _addSidebarButtons(window) {
+    const toolbox = window.document.getElementById('navigator-toolbox');
+
+    // Set a splitter to navigator-toolbox
+    const splitter = window.document.createXULElement('splitter');
+    splitter.setAttribute('id', 'zen-sidebar-splitter');
+    splitter.setAttribute('orient', 'horizontal');
+    splitter.setAttribute('resizebefore', 'sibling');
+    splitter.setAttribute('resizeafter', 'none');
+    toolbox.insertAdjacentElement('afterend', splitter);
+
     const sidebarBox = window.MozXULElement.parseXULToFragment(`
       <toolbar id="zen-sidebar-top-buttons"
         fullscreentoolbar="true"
@@ -45,12 +56,29 @@ export var ZenCustomizableUI = new (class {
         flex="1"
         skipintoolbarset="true"
         customizationtarget="zen-sidebar-top-buttons-customization-target"
+        overflowable="true"
+        default-overflowbutton="nav-bar-overflow-button"
+        default-overflowtarget="widget-overflow-list"
+        default-overflowpanel="widget-overflow"
+        addon-webext-overflowbutton="unified-extensions-button"
+        addon-webext-overflowtarget="overflowed-extensions-list"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
         </hbox>
       </toolbar>
     `);
-    window.document.getElementById('navigator-toolbox').prepend(sidebarBox);
+    toolbox.prepend(sidebarBox);
+    new window.MutationObserver((e) => {
+      if (e[0].type !== 'attributes' || e[0].attributeName !== 'width') return;
+      this._dispatchResizeEvent(window);
+    }).observe(toolbox, {
+      attributes: true, //configure it to listen to attribute changes
+    });
+
+    // remove all styles except for the width, since we are xulstoring the complet style list
+    const width = toolbox.style.width || '180px';
+    toolbox.removeAttribute('style');
+    toolbox.style.width = width;
 
     const newTab = window.document.getElementById('vertical-tabs-newtab-button');
     newTab.classList.add('zen-sidebar-action-button');
@@ -93,6 +121,10 @@ export var ZenCustomizableUI = new (class {
     }
   }
 
+  _dispatchResizeEvent(window) {
+    window.dispatchEvent(new window.Event('resize'));
+  }
+
   registerToolbarNodes(window) {
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));

src/browser/base/content/ZenStartup.mjs

@@ -84,19 +84,6 @@
           sidebarPanelWrapper.prepend(elem);
         }
       }
-
-      // remove all styles except for the width, since we are xulstoring the complet style list
-      const width = toolbox.style.width || '180px';
-      toolbox.removeAttribute('style');
-      toolbox.style.width = width;
-
-      // Set a splitter to navigator-toolbox
-      const splitter = document.createXULElement('splitter');
-      splitter.setAttribute('id', 'zen-sidebar-splitter');
-      splitter.setAttribute('orient', 'horizontal');
-      splitter.setAttribute('resizebefore', 'sibling');
-      splitter.setAttribute('resizeafter', 'none');
-      toolbox.insertAdjacentElement('afterend', splitter);
     },
 
     _initSearchBar() {

src/browser/base/content/ZenUIManager.mjs

@@ -201,6 +201,7 @@ var gZenVerticalTabsManager = {
     this.__topButtonsSeparatorElement = document.createElement('div');
     this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator';
     this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true');
+    this.__topButtonsSeparatorElement.setAttribute('overflows', 'false');
     return this.__topButtonsSeparatorElement;
   },
 
@@ -332,7 +333,10 @@ var gZenVerticalTabsManager = {
           this._topButtonsSeparatorElement.after(button);
         }
         buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
-        buttonsTarget.prepend(document.getElementById('PanelUI-button'));
+        const panelUIButton = document.getElementById('PanelUI-button');
+        buttonsTarget.prepend(panelUIButton);
+        panelUIButton.setAttribute('overflows', 'false');
+        buttonsTarget.parentElement.append(document.getElementById('nav-bar-overflow-button'));
         if (this.isWindowsStyledButtons && !doNotChangeWindowButtons) {
           appContentNavbarContaienr.append(windowButtons);
         }
@@ -357,7 +361,10 @@ var gZenVerticalTabsManager = {
         }
         this._topButtonsSeparatorElement.remove();
         document.documentElement.removeAttribute('zen-single-toolbar');
-        navBar.appendChild(document.getElementById('PanelUI-button'));
+        const panelUIButton = document.getElementById('PanelUI-button');
+        navBar.appendChild(panelUIButton);
+        panelUIButton.removeAttribute('overflows');
+        navBar.appendChild(document.getElementById('nav-bar-overflow-button'));
         this._toolbarOriginalParent.prepend(navBar);
         if (!dontRebuildAreas) {
           this.rebuildAreas();
@@ -420,6 +427,7 @@ var gZenVerticalTabsManager = {
 
       // Always move the splitter next to the sidebar
       this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
+      window.dispatchEvent(new Event('resize'));
     } catch (e) {
       console.error(e);
     }
@@ -452,4 +460,15 @@ var gZenVerticalTabsManager = {
     const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
     Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
   },
+
+  appendCustomizableItem(target, child, placements) {
+    if (
+      target.id === 'zen-sidebar-top-buttons-customization-target' &&
+      this._hasSetSingleToolbar &&
+      placements.includes(child.id)
+    ) {
+      return this._topButtonsSeparatorElement.before(child);
+    }
+    target.appendChild(child);
+  },
 };

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

@@ -361,6 +361,7 @@
 /* Mark: toolbox as expanded */
 #navigator-toolbox[zen-sidebar-expanded='true'] {
   --zen-toolbox-min-width: fit-content;
+
   --tab-icon-end-margin: 8.5px;
   padding: var(--zen-toolbox-padding);
   padding-left: 0;
@@ -809,6 +810,14 @@
 
   :root[zen-single-toolbar='true'] & {
     --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
+
+    & #PanelUI-button {
+      order: -2;
+    }
+
+    & #unified-extensions-button {
+      order: -1;
+    }
   }
 
   & #zen-sidebar-top-buttons-customization-target {