Skip to content

Sidebar issue #11909 / Compact sidebar pinning bug #11941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ostaver wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Sidebar issue #11909 / Compact sidebar pinning bug #11941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/zen/common/modules/ZenUIManager.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,7 +894,7 @@ window.gZenVerticalTabsManager = {
easing: "ease-out",
}
)
.then(() => {})
.then(() => { })
.catch((err) => {
console.error(err);
})
Expand All @@ -916,7 +916,7 @@ window.gZenVerticalTabsManager = {
easing: "ease-out",
}
)
.then(() => {})
.then(() => { })
.catch((err) => {
console.error(err);
})
Expand All @@ -943,8 +943,8 @@ window.gZenVerticalTabsManager = {
...(isLastItem
? {}
: {
marginBottom: [`0px`, `-${height}px`],
}),
marginBottom: [`0px`, `-${height}px`],
}),
},
{
duration: 0.075,
Expand All @@ -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,
Expand All @@ -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() {
Expand Down
11 changes: 8 additions & 3 deletions src/zen/compact-mode/ZenCompactMode.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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",
Expand Down
237 changes: 121 additions & 116 deletions src/zen/compact-mode/sidebar.inc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -63,20 +64,24 @@
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
* titlebar */
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;
}
Expand Down Expand Up @@ -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'] & {
Expand All @@ -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),
Expand All @@ -261,11 +265,12 @@
}

left: calc(var(--zen-compact-float) / -2);

:root[zen-right-side='true'] & {
right: calc(var(--zen-compact-float) / -2);
left: auto;
}
}
}
}
}
}