From c82d314913a7626acd340b6042d103be7bc52ab8 Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com>
Date: Sun, 3 May 2026 14:53:37 +0200
Subject: [PATCH] no-bug: Make addons appear on the urlbar (gh-13535)

---
 .../content/navigator-toolbox-inc-xhtml.patch |  8 ++---
 .../CustomizableUI-sys-mjs.patch              | 36 +++++++++++++++----
 src/zen/common/modules/ZenUIManager.mjs       | 34 ++++++++++++++----
 src/zen/common/styles/zen-omnibox.css         |  8 ++++-
 .../common/styles/zen-overflowing-addons.css  |  4 ++-
 5 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index 2ee59a7b6..604d54485 100644
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index edeb473e46b3aa4b12eb4b59ce62e5ae48edd2a1..d2c6c8c150e732b77d65420520ca4905a9d3ea4d 100644
+index edeb473e46b3aa4b12eb4b59ce62e5ae48edd2a1..99210f8bb5633d50d2cba24f1e13ca866c5b6959 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -11,7 +11,7 @@ index edeb473e46b3aa4b12eb4b59ce62e5ae48edd2a1..d2c6c8c150e732b77d65420520ca4905
    <script src="chrome://browser/content/navigator-toolbox.js" />
  
    <!-- Menu -->
-@@ -18,9 +18,12 @@
+@@ -18,9 +18,13 @@
  #include browser-menubar.inc
      </toolbaritem>
      <spacer flex="1" skipintoolbarset="true" style="order: 1000;"/>
@@ -22,14 +22,14 @@ index edeb473e46b3aa4b12eb4b59ce62e5ae48edd2a1..d2c6c8c150e732b77d65420520ca4905
 +  <html:div id="zen-toolbar-background" class="zen-toolbar-background zen-browser-generic-background">
 +    <html:div class="zen-browser-grain" />
 +  </html:div>
++  <box id="zen-overflow-extensions-list" skipintoolbarset="true" contextmenu="toolbar-context-menu" />
    <toolbar id="TabsToolbar"
             class="browser-toolbar browser-titlebar"
             fullscreentoolbar="true"
-@@ -62,6 +65,9 @@
+@@ -62,6 +66,8 @@
            <html:sidebar-pins-promo id="drag-to-pin-promo-card"></html:sidebar-pins-promo>
            <arrowscrollbox id="pinned-tabs-container" orient="horizontal" clicktoscroll=""></arrowscrollbox>
            <splitter orient="vertical" id="vertical-pinned-tabs-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
-+<html:div id="zen-overflow-extensions-list" skipintoolbarset="true"></html:div>
 +<html:div id="zen-essentials" skipintoolbarset="true"></html:div>
 +<html:div id="zen-tabs-wrapper">
            <hbox class="tab-drop-indicator" hidden="true"/>
diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
index 7e4c06455..b1a3381da 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 db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f535e9d9e 100644
+index db617c65b89643015d91b0f6a20eab7d7a1b598f..1511b785a45ebd084de13b091f56a59e7e737b26 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -186,11 +186,33 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
      });
  
      lazy.log.debug(
-@@ -7933,7 +7934,14 @@ class OverflowableToolbar {
+@@ -7933,7 +7934,36 @@ class OverflowableToolbar {
        Math.max(targetWidth, targetChildrenWidth)
      );
      totalAvailWidth = Math.ceil(totalAvailWidth);
 -    let isOverflowing = targetContentWidth > totalAvailWidth;
++    if (this.#target.id == 'nav-bar-customization-target' && 
++        win.gZenVerticalTabsManager._hasSetSingleToolbar &&
++        Services.prefs.getBoolPref("zen.view.overflow-webext-toolbar", true)) {
++      const availSelectors = ":is(#page-action-buttons, #zen-copy-url-button, .unified-extensions-item)";
++      const width = [
++        ...win.gURLBar._inputContainer.querySelectorAll(availSelectors),
++        ...win.document.getElementById("zen-overflow-extensions-list").querySelectorAll(availSelectors)
++      ].length * 26;
++      const urlbarWidth = win.document.getElementById("urlbar-container").getBoundingClientRect().width;
++      let overflowing = width > urlbarWidth * 0.5;
++      let wasOverflowing = win.gURLBar._isOverflowingItems;
++      win.gURLBar._isOverflowingItems = overflowing;
++      if (wasOverflowing !== overflowing) {
++        const items = gPlacements.get("nav-bar");
++        for (let item of items) {
++          let [, node] = CustomizableUIInternal.getWidgetNode(item, win);
++          if (node?.hasAttribute("data-extensionid")) {
++            win.gZenVerticalTabsManager.appendCustomizableItem(win.document.getElementById("zen-sidebar-top-buttons-customization-target"), node);
++          }
++        }
++      }
++    }
 +    if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar.id == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth };
 +    let isOverflowing = targetContentWidth + (win.gZenVerticalTabsManager._hasSetSingleToolbar ? 0.1 : 0) > totalAvailWidth;
 +    if (win.gZenVerticalTabsManager._hasSetSingleToolbar &&
@@ -202,7 +224,7 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
      return { isOverflowing, targetContentWidth, totalAvailWidth };
    }
  
-@@ -7994,7 +8002,11 @@ class OverflowableToolbar {
+@@ -7994,7 +8024,11 @@ class OverflowableToolbar {
              return;
            }
          }
@@ -215,7 +237,7 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
            lazy.log.debug(
              `Need ${minSize} but width is ${totalAvailWidth} so bailing`
            );
-@@ -8027,7 +8039,7 @@ class OverflowableToolbar {
+@@ -8027,7 +8061,7 @@ class OverflowableToolbar {
          }
        }
        if (!inserted) {
@@ -224,7 +246,7 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
        }
        child.removeAttribute("cui-anchorid");
        child.removeAttribute("overflowedItem");
-@@ -8153,6 +8165,9 @@ class OverflowableToolbar {
+@@ -8153,6 +8187,9 @@ class OverflowableToolbar {
     *   if no such list exists.
     */
    get #webExtList() {
@@ -234,7 +256,7 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
      if (!this.#webExtListRef) {
        let targetID = this.#toolbar.getAttribute("addon-webext-overflowtarget");
        if (!targetID) {
-@@ -8164,6 +8179,9 @@ class OverflowableToolbar {
+@@ -8164,6 +8201,9 @@ class OverflowableToolbar {
        let win = this.#toolbar.ownerGlobal;
        let { panel } = win.gUnifiedExtensions;
        this.#webExtListRef = panel.querySelector(`#${targetID}`);
@@ -244,7 +266,7 @@ index db617c65b89643015d91b0f6a20eab7d7a1b598f..9acef640800bdc75f477a8e14e73f08f
      }
      return this.#webExtListRef;
    }
-@@ -8372,7 +8390,7 @@ class OverflowableToolbar {
+@@ -8372,7 +8412,7 @@ class OverflowableToolbar {
          break;
        }
        case "mousedown": {
diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs
index 5cd2ba2e8..79864f284 100644
--- a/src/zen/common/modules/ZenUIManager.mjs
+++ b/src/zen/common/modules/ZenUIManager.mjs
@@ -1355,7 +1355,7 @@ window.gZenVerticalTabsManager = {
           buttonsTarget.append(this._topButtonsSeparatorElement);
         }
         for (const button of elements) {
-          this._topButtonsSeparatorElement.after(button);
+          this.appendCustomizableItem(this._topButtonsSeparatorElement, button);
         }
         buttonsTarget.prepend(
           document.getElementById("unified-extensions-button")
@@ -1558,16 +1558,36 @@ window.gZenVerticalTabsManager = {
     Services.prefs.setBoolPref("zen.tabs.vertical.right-side", newVal);
   },
 
-  appendCustomizableItem(target, child, placements) {
+  appendCustomizableItem(target, child, placements = []) {
     if (
-      target.id === "zen-sidebar-top-buttons-customization-target" &&
       this._hasSetSingleToolbar &&
-      placements.includes(child.id)
+      (target.id === "zen-sidebar-top-buttons-customization-target" ||
+        target === this._topButtonsSeparatorElement)
     ) {
-      this._topButtonsSeparatorElement.before(child);
-      return;
+      if (placements.includes(child.id)) {
+        this._topButtonsSeparatorElement.before(child);
+        return;
+      } else if (
+        child.hasAttribute("data-extensionid") &&
+        Services.prefs.getBoolPref("zen.view.overflow-webext-toolbar", true)
+      ) {
+        if (gURLBar._isOverflowingItems) {
+          const overflowElements = document.getElementById(
+            "zen-overflow-extensions-list"
+          );
+          overflowElements.appendChild(child);
+        } else {
+          const element = document.getElementById("page-action-buttons");
+          element.before(child);
+        }
+        return;
+      }
+    }
+    if (target === this._topButtonsSeparatorElement) {
+      this._topButtonsSeparatorElement.after(child);
+    } else {
+      target.appendChild(child);
     }
-    target.appendChild(child);
   },
 
   async renameTabKeydown(event) {
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index f943090fc..a0c448675 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -139,10 +139,12 @@
   }
 
   .identity-box-button,
-  .urlbar-page-action {
+  .urlbar-page-action,
+  .unified-extensions-item {
     opacity: 0;
     height: 100%; /* To still be able to open popups */
     visibility: collapse;
+    margin: 0 !important;
 
     :root:not([supress-primary-adjustment="true"]) & {
       transition:
@@ -189,6 +191,10 @@
   }
 }
 
+:root[zen-single-toolbar="true"] #urlbar[breakout-extend="true"] .unified-extensions-item {
+  display: none !important;
+}
+
 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("zen.urlbar.single-toolbar-show-copy-url", false) {
   :root[zen-single-toolbar="true"] #zen-copy-url-button {
diff --git a/src/zen/common/styles/zen-overflowing-addons.css b/src/zen/common/styles/zen-overflowing-addons.css
index cd68ea2f1..ab172f5e4 100644
--- a/src/zen/common/styles/zen-overflowing-addons.css
+++ b/src/zen/common/styles/zen-overflowing-addons.css
@@ -6,10 +6,11 @@
 
 #zen-overflow-extensions-list:not(:empty) {
   --uei-icon-size: 14px;
-  display: flex;
+  display: grid;
   gap: 8px;
   padding: 8px 2px;
   padding-bottom: 0;
+  grid-template-columns: calc(var(--border-radius-medium) - 4px);
 
   & .unified-extensions-item {
     flex: 1;
@@ -26,6 +27,7 @@
   }
 
   & .unified-extensions-item-action-button {
+    appearance: none;
     background-color: var(--zen-toolbar-element-bg);
     height: 30px;
     margin: 0;