mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-08 04:47:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Overflow web extensions below the urlbar, p=#12273

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

* chore: Ignore toolbar CSS, b=no-bug, c=no-component
This commit is contained in:
mr. m
2026-02-06 22:56:11 +01:00
committed by GitHub
parent c9474cecc0
commit ba2a854784
11 changed files with 91 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@@ -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

3
prefs/zen/view.yaml
View File

@@ -54,3 +54,6 @@
- name: zen.view.draggable-sidebar
value: true
- name: zen.view.overflow-webext-toolbar
value: true

9
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -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"/>

24
src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
View File

@@ -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": {

2
src/zen/common/jar.inc.mn
View File

@@ -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)

9
src/zen/common/modules/ZenUIManager.mjs
View File

@@ -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

1
src/zen/common/styles/zen-browser-ui.css
View File

@@ -132,6 +132,7 @@
}
#nav-bar {
overflow: clip;
border-top-color: transparent !important;
:root[zen-single-toolbar="true"] & {

2
src/zen/common/styles/zen-omnibox.css
View File

@@ -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;
}
}

43
src/zen/common/styles/zen-overflowing-addons.css Normal file
View File

@@ -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;
}
}

7
src/zen/common/styles/zen-theme.css
View File

@@ -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;

3
src/zen/common/styles/zen-toolbar.css
View File

@@ -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