mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ZenCompactMode to use async for sidebar width calculation and update overflow style

Browse Source
This commit is contained in:
mr. M
2025-02-06 07:32:13 +01:00
parent 459a37fc59
commit 8eaceb49cf
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -135,8 +135,10 @@ var gZenCompactModeManager = {
this.animateCompactMode();
},
getAndApplySidebarWidth() {
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
async getAndApplySidebarWidth() {
let sidebarWidth = await window.promiseDocumentFlushed(() =>
window.windowUtils.getBoundsWithoutFlushing(this.sidebar).width
);
if (sidebarWidth > 1) {
this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
}
@@ -155,8 +157,11 @@ var gZenCompactModeManager = {
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
}
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
window.requestAnimationFrame(async () => {
let sidebarWidth = await this.getAndApplySidebarWidth();
if (!canAnimate) {
this.sidebar.removeAttribute('animate');
this._animating = false;
@@ -187,10 +192,10 @@ var gZenCompactModeManager = {
setTimeout(() => {
this._animating = false;
this.sidebar.style.removeProperty('transition');
}, 100);
});
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = 'hidden';
document.getElementById('browser').style.overflow = 'clip';
if (this.sidebarIsOnRight) {
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
} else {
@@ -201,7 +206,7 @@ var gZenCompactModeManager = {
this.sidebar,
this.sidebarIsOnRight
? {
marginRight: 0,
marginRight: [`-${sidebarWidth}px`, 0],
transform: ['translateX(100%)', 'translateX(0)'],
}
: { marginLeft: 0 },