From ba2a8547847a11104b0cba0241d74446a18aa869 Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com>
Date: Fri, 6 Feb 2026 22:56:11 +0100
Subject: [PATCH] feat: Overflow web extensions below the urlbar, p=#12273

* feat: Overflow web extensions below the urlbar, b=no-bug, c=common

* chore: Ignore toolbar CSS, b=no-bug, c=no-component
---
 .prettierignore                               |  1 +
 prefs/zen/view.yaml                           |  3 ++
 .../content/navigator-toolbox-inc-xhtml.patch |  9 ++--
 .../CustomizableUI-sys-mjs.patch              | 24 ++++++++++-
 src/zen/common/jar.inc.mn                     |  2 +-
 src/zen/common/modules/ZenUIManager.mjs       |  9 ++++
 src/zen/common/styles/zen-browser-ui.css      |  1 +
 src/zen/common/styles/zen-omnibox.css         |  2 +-
 .../common/styles/zen-overflowing-addons.css  | 43 +++++++++++++++++++
 src/zen/common/styles/zen-theme.css           |  7 +--
 src/zen/common/styles/zen-toolbar.css         |  3 ++
 11 files changed, 91 insertions(+), 13 deletions(-)
 create mode 100644 src/zen/common/styles/zen-overflowing-addons.css

diff --git a/.prettierignore b/.prettierignore
index df0ad852b..f47fa179c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -37,5 +37,6 @@ src/zen/common/ZenEmojis.mjs
 
 src/zen/split-view/zen-decks.css
 src/zen/workspaces/zen-workspaces.css
+src/zen/common/styles/zen-toolbar.css
 
 *.inc
diff --git a/prefs/zen/view.yaml b/prefs/zen/view.yaml
index b6a158026..b5c498ea4 100644
--- a/prefs/zen/view.yaml
+++ b/prefs/zen/view.yaml
@@ -54,3 +54,6 @@
 
 - name: zen.view.draggable-sidebar
   value: true
+
+- name: zen.view.overflow-webext-toolbar
+  value: true
diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index f4dabd442..a436b5bb1 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 68c24f730d56f548cf1e286198a04f8363529378..71418c93ce7216d71412f2fa67295322bb73abad 100644
+index 68c24f730d56f548cf1e286198a04f8363529378..eb9aa5e77cf549062d8d3770f8057ceafe67c317 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -22,16 +22,17 @@ index 68c24f730d56f548cf1e286198a04f8363529378..71418c93ce7216d71412f2fa67295322
    <toolbar id="TabsToolbar"
             class="browser-toolbar browser-titlebar"
             fullscreentoolbar="true"
-@@ -62,6 +61,8 @@
+@@ -62,6 +61,9 @@
            <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"/>
            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
-@@ -81,6 +82,7 @@
+@@ -81,6 +83,7 @@
                                tooltip="dynamic-shortcut-tooltip"
                                data-l10n-id="tabs-toolbar-new-tab"/>
            <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
@@ -39,7 +40,7 @@ index 68c24f730d56f548cf1e286198a04f8363529378..71418c93ce7216d71412f2fa67295322
          </tabs>
  
          <toolbarbutton id="new-tab-button"
-@@ -106,9 +108,10 @@
+@@ -106,9 +109,10 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>
  
diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
index d6b203a2f..84e3dae36 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 9a98f56d83ee38e0f1aa41467b4ddf215c3d90f7..39e947ce083ce3b293337f5dbb40cd0b46db12e2 100644
+index 9a98f56d83ee38e0f1aa41467b4ddf215c3d90f7..2c9ea050174021c5323b3bec172409f115ad6684 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -214,7 +214,27 @@ index 9a98f56d83ee38e0f1aa41467b4ddf215c3d90f7..39e947ce083ce3b293337f5dbb40cd0b
        }
        child.removeAttribute("cui-anchorid");
        child.removeAttribute("overflowedItem");
-@@ -8340,7 +8351,7 @@ class OverflowableToolbar {
+@@ -8121,6 +8132,9 @@ class OverflowableToolbar {
+    *   if no such list exists.
+    */
+   get #webExtList() {
++    if (this.#toolbar.getAttribute("addon-webext-overflowtarget") !== this.#webExtListRef?.id) {
++      this.#webExtListRef = null;
++    }
+     if (!this.#webExtListRef) {
+       let targetID = this.#toolbar.getAttribute("addon-webext-overflowtarget");
+       if (!targetID) {
+@@ -8132,6 +8146,9 @@ class OverflowableToolbar {
+       let win = this.#toolbar.ownerGlobal;
+       let { panel } = win.gUnifiedExtensions;
+       this.#webExtListRef = panel.querySelector(`#${targetID}`);
++      if (!this.#webExtListRef) {
++        this.#webExtListRef = win.document.getElementById(targetID);
++      }
+     }
+     return this.#webExtListRef;
+   }
+@@ -8340,7 +8357,7 @@ class OverflowableToolbar {
          break;
        }
        case "mousedown": {
diff --git a/src/zen/common/jar.inc.mn b/src/zen/common/jar.inc.mn
index 2cac29cc3..bd87aa4b1 100644
--- a/src/zen/common/jar.inc.mn
+++ b/src/zen/common/jar.inc.mn
@@ -25,7 +25,7 @@
         content/browser/zen-styles/zen-panel-ui.css                             (../../zen/common/styles/zen-panel-ui.css)
         content/browser/zen-styles/zen-single-components.css                    (../../zen/common/styles/zen-single-components.css)
         content/browser/zen-styles/zen-sidebar.css                              (../../zen/common/styles/zen-sidebar.css)
-        content/browser/zen-styles/zen-toolbar.css                              (../../zen/common/styles/zen-toolbar.css)
+*       content/browser/zen-styles/zen-toolbar.css                              (../../zen/common/styles/zen-toolbar.css)
         content/browser/zen-styles/zen-browser-container.css                    (../../zen/common/styles/zen-browser-container.css)
         content/browser/zen-styles/zen-omnibox.css                              (../../zen/common/styles/zen-omnibox.css)
         content/browser/zen-styles/zen-popup.css                                (../../zen/common/styles/zen-popup.css)
diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs
index 21e103a6d..131a6474d 100644
--- a/src/zen/common/modules/ZenUIManager.mjs
+++ b/src/zen/common/modules/ZenUIManager.mjs
@@ -1275,6 +1275,15 @@ window.gZenVerticalTabsManager = {
         appContentNavbarContaienr.append(windowButtons);
       }
 
+      if (
+        this._hasSetSingleToolbar &&
+        Services.prefs.getBoolPref("zen.view.overflow-webext-toolbar", true)
+      ) {
+        topButtons.setAttribute("addon-webext-overflowtarget", "zen-overflow-extensions-list");
+      } else {
+        topButtons.setAttribute("addon-webext-overflowtarget", "overflowed-extensions-list");
+      }
+
       gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
 
       // Always move the splitter next to the sidebar
diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index c3a0c46a0..1c0688f4d 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -132,6 +132,7 @@
 }
 
 #nav-bar {
+  overflow: clip;
   border-top-color: transparent !important;
 
   :root[zen-single-toolbar="true"] & {
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index f2d48fd61..79f2651af 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -80,7 +80,7 @@
 
 #urlbar:not([breakout-extend="true"]) {
   &:hover .urlbar-background {
-    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
+    background-color: var(--zen-toolbar-element-bg-hover) !important;
   }
 }
 
diff --git a/src/zen/common/styles/zen-overflowing-addons.css b/src/zen/common/styles/zen-overflowing-addons.css
new file mode 100644
index 000000000..f5af66cdf
--- /dev/null
+++ b/src/zen/common/styles/zen-overflowing-addons.css
@@ -0,0 +1,43 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+#zen-overflow-extensions-list:not(:empty) {
+  --uei-icon-size: 16px;
+  display: flex;
+  gap: 8px;
+  padding: 8px calc(var(--zen-toolbox-padding) - 4px);
+  padding-bottom: 0px;
+
+  & .unified-extensions-item {
+    flex: 1;
+    margin: 0;
+  }
+
+  & .toolbarbutton-badge-stack {
+    margin: 0;
+  }
+
+  & .unified-extensions-item-action-button {
+    background-color: var(--zen-toolbar-element-bg);
+    height: 32px;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-medium);
+    overflow: clip;
+    padding: 0;
+
+    &:hover {
+      background-color: var(--zen-toolbar-element-bg-hover);
+    }
+  }
+
+  .unified-extensions-item-contents,
+  .unified-extensions-item-menu-button,
+  unified-extensions-item-messagebar-wrapper {
+    display: none;
+  }
+}
diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index 69dd44f26..46e4151f4 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -141,14 +141,11 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   --zen-toolbar-element-bg: light-dark(
-    color-mix(in oklch, var(--toolbox-textcolor) 10%, transparent),
+    color-mix(in oklch, var(--toolbox-textcolor) 8%, transparent),
     color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
   );
 
-  --zen-toolbar-element-bg-hover: light-dark(
-    color-mix(in srgb, var(--zen-toolbar-element-bg) 75%, transparent),
-    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent)
-  );
+  --zen-toolbar-element-bg-hover: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
 
   /* Toolbar */
   --tab-selected-color-scheme: inherit !important;
diff --git a/src/zen/common/styles/zen-toolbar.css b/src/zen/common/styles/zen-toolbar.css
index 126690245..af3984b7b 100644
--- a/src/zen/common/styles/zen-toolbar.css
+++ b/src/zen/common/styles/zen-toolbar.css
@@ -3,6 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
 #nav-bar,
 #zen-sidebar-top-buttons {
   background: transparent;
@@ -11,3 +12,5 @@
 :root[inDOMFullscreen="true"] #zen-appcontent-navbar-wrapper {
   visibility: collapse;
 }
+
+%include zen-overflowing-addons.css