diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs index e22db2c560..9909996b8f 100644 --- a/src/zen/common/modules/ZenUIManager.mjs +++ b/src/zen/common/modules/ZenUIManager.mjs @@ -894,7 +894,7 @@ window.gZenVerticalTabsManager = { easing: "ease-out", } ) - .then(() => {}) + .then(() => { }) .catch((err) => { console.error(err); }) @@ -916,7 +916,7 @@ window.gZenVerticalTabsManager = { easing: "ease-out", } ) - .then(() => {}) + .then(() => { }) .catch((err) => { console.error(err); }) @@ -943,8 +943,8 @@ window.gZenVerticalTabsManager = { ...(isLastItem ? {} : { - marginBottom: [`0px`, `-${height}px`], - }), + marginBottom: [`0px`, `-${height}px`], + }), }, { duration: 0.075, @@ -965,6 +965,9 @@ window.gZenVerticalTabsManager = { }, async _preCustomize() { + // Flag to prevent getAndApplySidebarWidth from storing the expanded width + gZenCompactModeManager._skipWidthUpdate = true; + await this._multiWindowFeature.foreachWindowAsActive(async (browser) => { browser.gZenVerticalTabsManager._updateEvent({ forCustomizableMode: true, @@ -974,6 +977,8 @@ window.gZenVerticalTabsManager = { this.rebuildAreas(); this.navigatorToolbox.setAttribute("zen-sidebar-expanded", "true"); document.documentElement.setAttribute("zen-sidebar-expanded", "true"); // force expanded sidebar + // Clear the flag to allow normal width recalculation + delete gZenCompactModeManager._skipWidthUpdate; }, _postCustomize() { diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index 8a9314ca54..c71ea6b0ab 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -349,6 +349,11 @@ window.gZenCompactModeManager = { delete this._ignoreNextResize; return; } + // Skip width updates during customization (pin/unpin) to + // prevent the expanded width from being stored as the new permanent width (Only compact mode) + if (this._skipWidthUpdate && this.preference) { + return; + } let sidebarWidth = this.sidebar.getBoundingClientRect().width; const shouldRecalculate = this.preference || document.documentElement.hasAttribute("zen-creating-workspace"); @@ -499,9 +504,9 @@ window.gZenCompactModeManager = { this.sidebar, this.sidebarIsOnRight ? { - marginRight: [`-${sidebarWidth}px`, 0], - transform: ["translateX(100%)", "translateX(0)"], - } + marginRight: [`-${sidebarWidth}px`, 0], + transform: ["translateX(100%)", "translateX(0)"], + } : { marginLeft: 0 }, { ease: "easeOut", diff --git a/src/zen/compact-mode/sidebar.inc.css b/src/zen/compact-mode/sidebar.inc.css index 58adaaee7c..18ba20ef52 100644 --- a/src/zen/compact-mode/sidebar.inc.css +++ b/src/zen/compact-mode/sidebar.inc.css @@ -31,9 +31,7 @@ } #zen-sidebar-top-buttons-customization-target { - padding-inline-start: calc( - var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding) - ) !important; + padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; } &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar { @@ -42,9 +40,12 @@ } #navigator-toolbox { - --zen-toolbox-max-width: 74px !important; + --zen-toolbox-max-width: 60px !important; + /* 60px looked optimal to me, if you find think 74 is better, change it */ --zen-compact-float: var(--zen-element-separation); - + max-width: fit-content !important; + min-width: fit-content !important; + :root[zen-no-padding='true'] & { --zen-compact-float: 10px; --zen-compact-top-toolbar-hidden-fix: var(--zen-compact-float); @@ -63,6 +64,7 @@ visibility 0.15s ease; bottom: var(--zen-compact-float); padding: 0 var(--zen-compact-float) !important; + :root[zen-single-toolbar='true'] & { /* We add an extra offset since windows users have a border top * in the window in order to compensate how windows renders the @@ -70,13 +72,16 @@ top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px)); height: calc(100% - var(--zen-compact-float)); } + :root:not([zen-single-toolbar='true']) & { bottom: calc(var(--zen-compact-float) / 2); - height: calc(100% - var(--zen-toolbar-height-with-bookmarks)); + height: calc(100% - var(--zen-toolbar-height-with-bookmarks)); + @media -moz-pref('zen.view.compact.hide-toolbar') { height: calc(100% - var(--zen-compact-top-toolbar-hidden-fix, 0px)); } } + & #zen-sidebar-top-buttons { margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0; } @@ -119,14 +124,17 @@ #navigator-toolbox:not([animate='true']) #titlebar { padding: var(--zen-toolbox-padding) !important; + :root:not([zen-sidebar-expanded='true']) & { padding: var(--zen-toolbox-padding) 0 !important; max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2); width: var(--zen-sidebar-width); } + position: relative; min-width: var(--zen-toolbox-min-width); - transition: visibility 0.15s; /* Same as the toolbox */ + transition: visibility 0.15s; + /* Same as the toolbox */ visibility: hidden; :root[zen-sidebar-expanded='true'] & { @@ -138,117 +146,113 @@ } } - #navigator-toolbox:is( - [zen-has-hover], [zen-user-show], + #navigator-toolbox:is([zen-has-hover], [zen-user-show], [zen-has-empty-tab], [flash-popup], - [has-popup-menu], [movingtab], - [zen-compact-mode-active] - ), + [has-popup-menu], [movingtab], + [zen-compact-mode-active]), &[zen-renaming-tab='true'] #navigator-toolbox { &:not([animate='true']) { - --zen-compact-mode-func: linear( - 0 0%, - 0.002748 1%, - 0.010544 2%, - 0.022757 3%, - 0.038804 4%, - 0.058151 5%, - 0.080308 6%, - 0.104828 7.000000000000001%, - 0.131301 8%, - 0.159358 9%, - 0.188662 10%, - 0.21891 11%, - 0.249828 12%, - 0.281172 13%, - 0.312724 14.000000000000002%, - 0.344288 15%, - 0.375693 16%, - 0.40679 17%, - 0.437447 18%, - 0.467549 19%, - 0.497 20%, - 0.525718 21%, - 0.553633 22%, - 0.580688 23%, - 0.60684 24%, - 0.632052 25%, - 0.656298 26%, - 0.679562 27%, - 0.701831 28.000000000000004%, - 0.723104 28.999999999999996%, - 0.743381 30%, - 0.76267 31%, - 0.780983 32%, - 0.798335 33%, - 0.814744 34%, - 0.830233 35%, - 0.844826 36%, - 0.858549 37%, - 0.87143 38%, - 0.883498 39%, - 0.894782 40%, - 0.905314 41%, - 0.915125 42%, - 0.924247 43%, - 0.93271 44%, - 0.940547 45%, - 0.947787 46%, - 0.954463 47%, - 0.960603 48%, - 0.966239 49%, - 0.971397 50%, - 0.976106 51%, - 0.980394 52%, - 0.984286 53%, - 0.987808 54%, - 0.990984 55.00000000000001%, - 0.993837 56.00000000000001%, - 0.99639 56.99999999999999%, - 0.998664 57.99999999999999%, - 1.000679 59%, - 1.002456 60%, - 1.004011 61%, - 1.005363 62%, - 1.006528 63%, - 1.007522 64%, - 1.008359 65%, - 1.009054 66%, - 1.009618 67%, - 1.010065 68%, - 1.010405 69%, - 1.010649 70%, - 1.010808 71%, - 1.01089 72%, - 1.010904 73%, - 1.010857 74%, - 1.010757 75%, - 1.010611 76%, - 1.010425 77%, - 1.010205 78%, - 1.009955 79%, - 1.009681 80%, - 1.009387 81%, - 1.009077 82%, - 1.008754 83%, - 1.008422 84%, - 1.008083 85%, - 1.00774 86%, - 1.007396 87%, - 1.007052 88%, - 1.00671 89%, - 1.006372 90%, - 1.00604 91%, - 1.005713 92%, - 1.005394 93%, - 1.005083 94%, - 1.004782 95%, - 1.004489 96%, - 1.004207 97%, - 1.003935 98%, - 1.003674 99%, - 1.003423 100% - ); + --zen-compact-mode-func: linear(0 0%, + 0.002748 1%, + 0.010544 2%, + 0.022757 3%, + 0.038804 4%, + 0.058151 5%, + 0.080308 6%, + 0.104828 7.000000000000001%, + 0.131301 8%, + 0.159358 9%, + 0.188662 10%, + 0.21891 11%, + 0.249828 12%, + 0.281172 13%, + 0.312724 14.000000000000002%, + 0.344288 15%, + 0.375693 16%, + 0.40679 17%, + 0.437447 18%, + 0.467549 19%, + 0.497 20%, + 0.525718 21%, + 0.553633 22%, + 0.580688 23%, + 0.60684 24%, + 0.632052 25%, + 0.656298 26%, + 0.679562 27%, + 0.701831 28.000000000000004%, + 0.723104 28.999999999999996%, + 0.743381 30%, + 0.76267 31%, + 0.780983 32%, + 0.798335 33%, + 0.814744 34%, + 0.830233 35%, + 0.844826 36%, + 0.858549 37%, + 0.87143 38%, + 0.883498 39%, + 0.894782 40%, + 0.905314 41%, + 0.915125 42%, + 0.924247 43%, + 0.93271 44%, + 0.940547 45%, + 0.947787 46%, + 0.954463 47%, + 0.960603 48%, + 0.966239 49%, + 0.971397 50%, + 0.976106 51%, + 0.980394 52%, + 0.984286 53%, + 0.987808 54%, + 0.990984 55.00000000000001%, + 0.993837 56.00000000000001%, + 0.99639 56.99999999999999%, + 0.998664 57.99999999999999%, + 1.000679 59%, + 1.002456 60%, + 1.004011 61%, + 1.005363 62%, + 1.006528 63%, + 1.007522 64%, + 1.008359 65%, + 1.009054 66%, + 1.009618 67%, + 1.010065 68%, + 1.010405 69%, + 1.010649 70%, + 1.010808 71%, + 1.01089 72%, + 1.010904 73%, + 1.010857 74%, + 1.010757 75%, + 1.010611 76%, + 1.010425 77%, + 1.010205 78%, + 1.009955 79%, + 1.009681 80%, + 1.009387 81%, + 1.009077 82%, + 1.008754 83%, + 1.008422 84%, + 1.008083 85%, + 1.00774 86%, + 1.007396 87%, + 1.007052 88%, + 1.00671 89%, + 1.006372 90%, + 1.00604 91%, + 1.005713 92%, + 1.005394 93%, + 1.005083 94%, + 1.004782 95%, + 1.004489 96%, + 1.004207 97%, + 1.003935 98%, + 1.003674 99%, + 1.003423 100%); --zen-compact-mode-time: 0.25s; transition: left var(--zen-compact-mode-time) var(--zen-compact-mode-func), @@ -261,6 +265,7 @@ } left: calc(var(--zen-compact-float) / -2); + :root[zen-right-side='true'] & { right: calc(var(--zen-compact-float) / -2); left: auto; @@ -268,4 +273,4 @@ } } } -} +} \ No newline at end of file