Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1923844 - Account for hidden elements during sidebar animation in 'Always Hide' mode r=sidebar-reviewers,sfoster

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D225275
This commit is contained in:
Emilio Cobos Álvarez 2024-10-11 16:58:23 +00:00
parent de23d66fe3
commit fd668f9bb8
1 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
browser/components/sidebar/browser-sidebar.js
View File

@ -901,6 +901,7 @@ var SidebarController = {
el.style.maxWidth =
el.style.marginLeft =
el.style.marginRight =
el.style.display =
"";
}
};
@ -910,7 +911,10 @@ var SidebarController = {
resetElements();
}
let getRects = () => {
return animatingElements.map(e => e.getBoundingClientRect());
return animatingElements.map(e => [
e.hidden,
e.getBoundingClientRect().toJSON(),
]);
};
let fromRects = getRects();
@ -934,15 +938,28 @@ var SidebarController = {
};
let animations = [];
let sidebarOnLeft = this._positionStart != RTL_UI;
let sidebarShift = 0;
for (let i = 0; i < animatingElements.length; ++i) {
const el = animatingElements[i];
const from = fromRects[i];
const to = toRects[i];
const widthGrowth = to.width - from.width;
const [wasHidden, from] = fromRects[i];
const [isHidden, to] = toRects[i];
// For the sidebar, we need some special cases to make the animation
// nicer (keeping the icon positions).
const isSidebar = el === this.sidebarContainer;
if (wasHidden != isHidden) {
if (wasHidden) {
from.left = from.right = sidebarOnLeft ? to.left : to.right;
} else {
to.left = to.right = sidebarOnLeft ? from.left : from.right;
}
}
const widthGrowth = to.width - from.width;
if (isSidebar) {
sidebarShift = widthGrowth;
}
let fromTranslate = sidebarOnLeft
? from.left - to.left
: from.right - to.right;
@ -955,13 +972,26 @@ var SidebarController = {
el.style.maxWidth =
el.style.marginLeft =
el.style.marginRight =
el.style.display =
"";
if (isHidden && !wasHidden) {
el.style.display = "flex";
}
if (widthGrowth < 0) {
el.style.minWidth = el.style.maxWidth = from.width + "px";
el.style["margin-" + (sidebarOnLeft ? "right" : "left")] =
widthGrowth + "px";
if (isSidebar) {
toTranslate = sidebarOnLeft ? widthGrowth : -widthGrowth;
} else if (el === this._box) {
// This is very hacky, but this code doesn't deal well with
// more than two elements moving, and this is the less invasive change.
// It would be better to treat "sidebar + sidebar-box" as a unit.
// We only hit this when completely hiding the box.
fromTranslate = sidebarOnLeft ? -sidebarShift : sidebarShift;
toTranslate = sidebarOnLeft
? fromTranslate + widthGrowth
: fromTranslate - widthGrowth;
}
} else if (isSidebar && !this._positionStart) {
fromTranslate += sidebarOnLeft ? -widthGrowth : widthGrowth;