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 {

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 b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..b161c73fe690c172a9be266894f72427b1d934e3 100644
+index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..5b6d9e858ae1e55158eefc50d6aac67763ef7e00 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -72,7 +72,33 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..b161c73fe690c172a9be266894f72427
        // For toolbars that need it, mark as dirty.
        let defaultPlacements = areaProperties.get("defaultPlacements");
        if (
-@@ -3609,7 +3608,7 @@ var CustomizableUIInternal = {
+@@ -1540,7 +1539,7 @@ var CustomizableUIInternal = {
+         lazy.log.info(
+           "Widget " + aWidgetId + " not found, unable to remove from " + aArea
+         );
+-        continue;
++     // continue;
+       }
+ 
+       this.notifyDOMChange(widgetNode, null, container, true, () => {
+@@ -1550,7 +1549,7 @@ var CustomizableUIInternal = {
+         // We also need to remove the panel context menu if it's there:
+         this.ensureButtonContextMenu(widgetNode);
+         if (gPalette.has(aWidgetId) || this.isSpecialWidget(aWidgetId)) {
+-          container.removeChild(widgetNode);
++          widgetNode.remove();
+         } else {
+           window.gNavToolbox.palette.appendChild(widgetNode);
+         }
+@@ -2654,7 +2653,6 @@ var CustomizableUIInternal = {
+     if (!this.isWidgetRemovable(aWidgetId)) {
+       return;
+     }
+-
+     let placements = gPlacements.get(oldPlacement.area);
+     let position = placements.indexOf(aWidgetId);
+     if (position != -1) {
+@@ -3609,7 +3607,7 @@ var CustomizableUIInternal = {
      }
    },
  
@@ -81,7 +107,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..b161c73fe690c172a9be266894f72427
      for (let [areaId, areaNodes] of gBuildAreas) {
        let placements = gPlacements.get(areaId);
        let isFirstChangedToolbar = true;
-@@ -3620,7 +3619,7 @@ var CustomizableUIInternal = {
+@@ -3620,7 +3618,7 @@ var CustomizableUIInternal = {
          if (area.get("type") == CustomizableUI.TYPE_TOOLBAR) {
            let defaultCollapsed = area.get("defaultCollapsed");
            let win = areaNode.ownerGlobal;
@@ -90,7 +116,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..b161c73fe690c172a9be266894f72427
              win.setToolbarVisibility(
                areaNode,
                typeof defaultCollapsed == "string"
-@@ -4583,6 +4582,7 @@ export var CustomizableUI = {
+@@ -4583,6 +4581,7 @@ export var CustomizableUI = {
    unregisterArea(aName, aDestroyPlacements) {
      CustomizableUIInternal.unregisterArea(aName, aDestroyPlacements);
    },
@@ -98,3 +124,22 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..b161c73fe690c172a9be266894f72427
    /**
     * Add a widget to an area.
     * If the area to which you try to add is not known to CustomizableUI,
+@@ -6404,7 +6403,8 @@ class OverflowableToolbar {
+         this.#target
+       );
+       totalAvailWidth =
+-        getInlineSize(this.#toolbar) -
++        (parseInt(this.#toolbar.closest("#navigator-toolbox")?.getAttribute("width")) ||
++        getInlineSize(this.#toolbar)) -
+         parseFloat(style.paddingLeft) -
+         parseFloat(style.paddingRight) -
+         toolbarChildrenWidth;
+@@ -6516,7 +6516,7 @@ class OverflowableToolbar {
+         }
+       }
+       if (!inserted) {
+-        this.#target.appendChild(child);
++        win.gZenVerticalTabsManager.appendCustomizableItem(this.#target, child, gPlacements.get(this.#toolbar.id));
+       }
+       child.removeAttribute("cui-anchorid");
+       child.removeAttribute("overflowedItem");

src/browser/themes/shared/toolbarbuttons-css.patch

@@ -1,7 +1,16 @@
 diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
-index ca1d70b515f17922c3625e38e2110368ad0de652..22cb71fb3d254edf46a73c4308a0e136002f203a 100644
+index ca1d70b515f17922c3625e38e2110368ad0de652..3ac05678b10f054d16093a225eb93bb8ed26a116 100644
 --- a/browser/themes/shared/toolbarbuttons.css
 +++ b/browser/themes/shared/toolbarbuttons.css
+@@ -210,7 +210,7 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator {
+ #nav-bar-overflow-button {
+   list-style-image: url("chrome://global/skin/icons/chevron.svg");
+ 
+-  #nav-bar:not([overflowing], [nonemptyoverflow], [customizing]) > & {
++  toolbar:not([overflowing], [nonemptyoverflow], [customizing]) > & {
+     display: none;
+   }
+ 
 @@ -420,7 +420,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
       */
      align-items: stretch;