fix: Fixed single buttons overflowing the sid

ebar, b=closes #10968, c=common, tabs
This commit is contained in:
mr. m
2025-10-23 15:01:28 +02:00
parent cd241c2e74
commit 43209411b9
7 changed files with 38 additions and 40 deletions

View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index d9a059f608779fea7cd8c595a432f6fe95183e0c..31c43bc3d5b05713299c1b822b9774909445e862 100644 index d9a059f608779fea7cd8c595a432f6fe95183e0c..c359e5115b315dbb4b14e07ab34526aab438565f 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs --- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, { @@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -176,17 +176,23 @@ index d9a059f608779fea7cd8c595a432f6fe95183e0c..31c43bc3d5b05713299c1b822b977490
}); });
lazy.log.debug( lazy.log.debug(
@@ -7909,7 +7909,8 @@ class OverflowableToolbar { @@ -7909,7 +7909,14 @@ class OverflowableToolbar {
Math.max(targetWidth, targetChildrenWidth) Math.max(targetWidth, targetChildrenWidth)
); );
totalAvailWidth = Math.ceil(totalAvailWidth); totalAvailWidth = Math.ceil(totalAvailWidth);
- let isOverflowing = targetContentWidth > totalAvailWidth; - let isOverflowing = targetContentWidth > totalAvailWidth;
+ if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar.id == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth }; + if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar.id == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth };
+ let isOverflowing = targetContentWidth + (win.gZenVerticalTabsManager._hasSetSingleToolbar ? 0.1 : 0) > totalAvailWidth; + let isOverflowing = targetContentWidth + (win.gZenVerticalTabsManager._hasSetSingleToolbar ? 0.1 : 0) > totalAvailWidth;
+ if (win.gZenVerticalTabsManager._hasSetSingleToolbar &&
+ this.#target.id == 'zen-sidebar-top-buttons-customization-target' &&
+ Array.from(this.#target.children).filter(child => child.getAttribute("overflows") != "false").length == 1 &&
+ this.#overflowedInfo.size == 0) {
+ isOverflowing = false;
+ }
return { isOverflowing, targetContentWidth, totalAvailWidth }; return { isOverflowing, targetContentWidth, totalAvailWidth };
} }
@@ -7970,7 +7971,11 @@ class OverflowableToolbar { @@ -7970,7 +7977,11 @@ class OverflowableToolbar {
return; return;
} }
} }
@@ -199,7 +205,7 @@ index d9a059f608779fea7cd8c595a432f6fe95183e0c..31c43bc3d5b05713299c1b822b977490
lazy.log.debug( lazy.log.debug(
`Need ${minSize} but width is ${totalAvailWidth} so bailing` `Need ${minSize} but width is ${totalAvailWidth} so bailing`
); );
@@ -8003,7 +8008,7 @@ class OverflowableToolbar { @@ -8003,7 +8014,7 @@ class OverflowableToolbar {
} }
} }
if (!inserted) { if (!inserted) {
@@ -208,7 +214,7 @@ index d9a059f608779fea7cd8c595a432f6fe95183e0c..31c43bc3d5b05713299c1b822b977490
} }
child.removeAttribute("cui-anchorid"); child.removeAttribute("cui-anchorid");
child.removeAttribute("overflowedItem"); child.removeAttribute("overflowedItem");
@@ -8348,7 +8353,7 @@ class OverflowableToolbar { @@ -8348,7 +8359,7 @@ class OverflowableToolbar {
break; break;
} }
case "mousedown": { case "mousedown": {

View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c64ab7bed9 100644 index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..ef88cc762969f206c9b16274c4af526c738c5704 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs --- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -76,6 +76,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () => @@ -76,6 +76,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -122,14 +122,13 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
// Enable the animation only after the first extend call to ensure it // Enable the animation only after the first extend call to ensure it
// doesn't run when opening a new window. // doesn't run when opening a new window.
if (!this.hasAttribute("breakout-extend-animate")) { if (!this.hasAttribute("breakout-extend-animate")) {
@@ -2331,6 +2396,25 @@ export class UrlbarInput { @@ -2331,6 +2396,24 @@ export class UrlbarInput {
return; return;
} }
+ if (this._zenHandleUrlbarClose) { + if (this._zenHandleUrlbarClose) {
+ this._zenHandleUrlbarClose(); + this._zenHandleUrlbarClose();
+ } + }
+ this.window.gZenUIManager.onUrlbarClose();
+ +
+ // Arc like URLbar: Blur the input on exit + // Arc like URLbar: Blur the input on exit
+ const zenToolbox = this.document.getElementById("navigator-toolbox"); + const zenToolbox = this.document.getElementById("navigator-toolbox");
@@ -142,13 +141,13 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
+ this.document.ownerGlobal.setTimeout(() => { + this.document.ownerGlobal.setTimeout(() => {
+ this.window.document.documentElement.removeAttribute("supress-primary-adjustment"); + this.window.document.documentElement.removeAttribute("supress-primary-adjustment");
+ }, 100); + }, 100);
+ + this.window.gZenUIManager.onUrlbarClose();
+ this.removeAttribute("zen-floating-urlbar"); + this.removeAttribute("zen-floating-urlbar");
+ +
this.removeAttribute("breakout-extend"); this.removeAttribute("breakout-extend");
this.#updateTextboxPosition(); this.#updateTextboxPosition();
} }
@@ -2595,10 +2679,12 @@ export class UrlbarInput { @@ -2595,10 +2678,12 @@ export class UrlbarInput {
return; return;
} }
this.textbox.style.top = px( this.textbox.style.top = px(
@@ -161,7 +160,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
); );
} }
@@ -2658,9 +2744,10 @@ export class UrlbarInput { @@ -2658,9 +2743,10 @@ export class UrlbarInput {
return; return;
} }
@@ -173,7 +172,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
); );
this.textbox.style.setProperty( this.textbox.style.setProperty(
"--urlbar-height", "--urlbar-height",
@@ -3093,6 +3180,7 @@ export class UrlbarInput { @@ -3093,6 +3179,7 @@ export class UrlbarInput {
} }
_toggleActionOverride(event) { _toggleActionOverride(event) {
@@ -181,7 +180,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if ( if (
event.keyCode == KeyEvent.DOM_VK_SHIFT || event.keyCode == KeyEvent.DOM_VK_SHIFT ||
event.keyCode == KeyEvent.DOM_VK_ALT || event.keyCode == KeyEvent.DOM_VK_ALT ||
@@ -3197,7 +3285,7 @@ export class UrlbarInput { @@ -3197,7 +3284,7 @@ export class UrlbarInput {
return val; return val;
} }
let trimmedValue = lazy.UrlbarPrefs.get("trimURLs") let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -190,7 +189,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
: val; : val;
// Only trim value if the directionality doesn't change to RTL and we're not // Only trim value if the directionality doesn't change to RTL and we're not
// showing a strikeout https protocol. // showing a strikeout https protocol.
@@ -3501,6 +3589,7 @@ export class UrlbarInput { @@ -3501,6 +3588,7 @@ export class UrlbarInput {
resultDetails = null, resultDetails = null,
browser = this.window.gBrowser.selectedBrowser browser = this.window.gBrowser.selectedBrowser
) { ) {
@@ -198,7 +197,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if (this.isAddressbar) { if (this.isAddressbar) {
this.#prepareAddressbarLoad( this.#prepareAddressbarLoad(
url, url,
@@ -3608,6 +3697,10 @@ export class UrlbarInput { @@ -3608,6 +3696,10 @@ export class UrlbarInput {
} }
reuseEmpty = true; reuseEmpty = true;
} }
@@ -209,7 +208,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if ( if (
where == "tab" && where == "tab" &&
reuseEmpty && reuseEmpty &&
@@ -3615,6 +3708,9 @@ export class UrlbarInput { @@ -3615,6 +3707,9 @@ export class UrlbarInput {
) { ) {
where = "current"; where = "current";
} }
@@ -219,7 +218,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
return where; return where;
} }
@@ -3872,6 +3968,7 @@ export class UrlbarInput { @@ -3872,6 +3967,7 @@ export class UrlbarInput {
this.setResultForCurrentValue(null); this.setResultForCurrentValue(null);
this.handleCommand(); this.handleCommand();
this.controller.clearLastQueryContextCache(); this.controller.clearLastQueryContextCache();
@@ -227,7 +226,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
this._suppressStartQuery = false; this._suppressStartQuery = false;
}); });
@@ -3879,7 +3976,6 @@ export class UrlbarInput { @@ -3879,7 +3975,6 @@ export class UrlbarInput {
contextMenu.addEventListener("popupshowing", () => { contextMenu.addEventListener("popupshowing", () => {
// Close the results pane when the input field contextual menu is open, // Close the results pane when the input field contextual menu is open,
// because paste and go doesn't want a result selection. // because paste and go doesn't want a result selection.
@@ -235,7 +234,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
let controller = let controller =
this.document.commandDispatcher.getControllerForCommand("cmd_paste"); this.document.commandDispatcher.getControllerForCommand("cmd_paste");
@@ -3991,7 +4087,11 @@ export class UrlbarInput { @@ -3991,7 +4086,11 @@ export class UrlbarInput {
if (!engineName && !source && !this.hasAttribute("searchmode")) { if (!engineName && !source && !this.hasAttribute("searchmode")) {
return; return;
} }
@@ -248,7 +247,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if (this._searchModeIndicatorTitle) { if (this._searchModeIndicatorTitle) {
this._searchModeIndicatorTitle.textContent = ""; this._searchModeIndicatorTitle.textContent = "";
this._searchModeIndicatorTitle.removeAttribute("data-l10n-id"); this._searchModeIndicatorTitle.removeAttribute("data-l10n-id");
@@ -4302,6 +4402,7 @@ export class UrlbarInput { @@ -4302,6 +4401,7 @@ export class UrlbarInput {
this.document.l10n.setAttributes( this.document.l10n.setAttributes(
this.inputField, this.inputField,
@@ -256,7 +255,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
l10nId, l10nId,
l10nId == "urlbar-placeholder-with-name" ? { name } : undefined l10nId == "urlbar-placeholder-with-name" ? { name } : undefined
); );
@@ -4413,6 +4514,11 @@ export class UrlbarInput { @@ -4413,6 +4513,11 @@ export class UrlbarInput {
} }
_on_click(event) { _on_click(event) {
@@ -268,7 +267,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if ( if (
event.target == this.inputField || event.target == this.inputField ||
event.target == this._inputContainer event.target == this._inputContainer
@@ -4485,7 +4591,7 @@ export class UrlbarInput { @@ -4485,7 +4590,7 @@ export class UrlbarInput {
} }
} }
@@ -277,7 +276,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
this.view.autoOpen({ event }); this.view.autoOpen({ event });
} else { } else {
if (this._untrimOnFocusAfterKeydown) { if (this._untrimOnFocusAfterKeydown) {
@@ -4525,9 +4631,16 @@ export class UrlbarInput { @@ -4525,9 +4630,16 @@ export class UrlbarInput {
} }
_on_mousedown(event) { _on_mousedown(event) {
@@ -295,7 +294,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
if ( if (
event.target != this.inputField && event.target != this.inputField &&
@@ -4538,6 +4651,10 @@ export class UrlbarInput { @@ -4538,6 +4650,10 @@ export class UrlbarInput {
this.focusedViaMousedown = !this.focused; this.focusedViaMousedown = !this.focused;
this._preventClickSelectsAll = this.focused; this._preventClickSelectsAll = this.focused;
@@ -306,7 +305,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
// Keep the focus status, since the attribute may be changed // Keep the focus status, since the attribute may be changed
// upon calling this.focus(). // upon calling this.focus().
@@ -4573,7 +4690,7 @@ export class UrlbarInput { @@ -4573,7 +4689,7 @@ export class UrlbarInput {
} }
// Don't close the view when clicking on a tab; we may want to keep the // Don't close the view when clicking on a tab; we may want to keep the
// view open on tab switch, and the TabSelect event arrived earlier. // view open on tab switch, and the TabSelect event arrived earlier.
@@ -315,7 +314,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..b286fc5b40a6e32a3af0bb0f209e58c6
break; break;
} }
@@ -4890,7 +5007,7 @@ export class UrlbarInput { @@ -4890,7 +5006,7 @@ export class UrlbarInput {
// When we are in actions search mode we can show more results so // When we are in actions search mode we can show more results so
// increase the limit. // increase the limit.
let maxResults = let maxResults =

View File

@@ -69,12 +69,12 @@ export var ZenCustomizableUI = new (class {
addon-webext-overflowtarget="overflowed-extensions-list" addon-webext-overflowtarget="overflowed-extensions-list"
mode="icons"> mode="icons">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1"> <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<toolbaritem id="zen-toggle-compact-mode" removable="true"> <toolbaritem id="zen-toggle-compact-mode" removable="true" data-l10n-id="zen-toggle-compact-mode-button">
<toolbarbutton <toolbarbutton
class="toolbarbutton-1" class="toolbarbutton-1"
command="cmd_toggleCompactModeIgnoreHover" command="cmd_toggleCompactModeIgnoreHover"
flex="1" data-l10n-id="zen-toggle-compact-mode-button"
data-l10n-id="zen-toggle-compact-mode-button" /> flex="1" />
</toolbaritem> </toolbaritem>
<html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div> <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
</hbox> </hbox>

View File

@@ -296,13 +296,6 @@
:root[zen-single-toolbar='true'] { :root[zen-single-toolbar='true'] {
--urlbar-icon-border-radius: 8px !important; --urlbar-icon-border-radius: 8px !important;
.urlbar-page-action:not([open]):not([showing]):not(
:is(#zen-copy-url-button, #identity-permission-box)
),
#tracking-protection-icon-container {
display: none;
}
#identity-permission-box > *:not(#zen-site-data-icon-button) { #identity-permission-box > *:not(#zen-site-data-icon-button) {
visibility: collapse; visibility: collapse;
} }
@@ -313,7 +306,7 @@
#urlbar:not([breakout-extend='true']) { #urlbar:not([breakout-extend='true']) {
#identity-box:not([pageproxystate='invalid']) { #identity-box:not([pageproxystate='invalid']) {
order: 9; order: 2;
} }
} }

View File

@@ -883,7 +883,7 @@
); );
for (const tab of pinnedTabs) { for (const tab of pinnedTabs) {
if (allAreUnloaded && closeIfPending) { if (allAreUnloaded && closeIfPending) {
return await this._onCloseTabShortcut(event, tab, { behavior: 'close' }); return await this.onCloseTabShortcut(event, tab, { behavior: 'close' });
} }
} }
await gBrowser.explicitUnloadTabs(pinnedTabs); await gBrowser.explicitUnloadTabs(pinnedTabs);

View File

@@ -121,7 +121,7 @@
* words, the first of the two selectors above. * words, the first of the two selectors above.
*/ */
:root:not([zen-window-buttons-reversed='true']) & { :root:not([zen-window-buttons-reversed='true']) & {
margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-element-separation)); margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-element-separation) + 4px);
} }
} }
} }

View File

@@ -19,7 +19,7 @@
"brandShortName": "Zen", "brandShortName": "Zen",
"brandFullName": "Zen Browser", "brandFullName": "Zen Browser",
"release": { "release": {
"displayVersion": "1.17.1b", "displayVersion": "1.17.2b",
"github": { "github": {
"repo": "zen-browser/desktop" "repo": "zen-browser/desktop"
}, },