Implement scrollbar state management and adjust overflowing behavior in Zen UI components

This commit is contained in:
mr. M
2025-02-07 22:46:53 +01:00
parent 527b8a39f8
commit f0976bc582
3 changed files with 9 additions and 3 deletions

View File

@@ -101,7 +101,8 @@
// to how Gecko internally rounds in those cases, we allow for some // to how Gecko internally rounds in those cases, we allow for some
// minor differences (the internal Gecko layout size is 1/60th of a // minor differences (the internal Gecko layout size is 1/60th of a
// pixel, so 0.02 should cover it). // pixel, so 0.02 should cover it).
let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02; //let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing); tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);

View File

@@ -29,6 +29,7 @@ var gZenUIManager = {
}); });
window.addEventListener('TabClose', this.onTabClose.bind(this)); window.addEventListener('TabClose', this.onTabClose.bind(this));
this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
}, },
updateTabsToolbar() { updateTabsToolbar() {
@@ -68,10 +69,13 @@ var gZenUIManager = {
this._scrollbarState = this.tabsWrapper.scrollTop; this._scrollbarState = this.tabsWrapper.scrollTop;
}, },
restoreScrollbarState() {
this.tabsWrapper.scrollTop = this._scrollbarState;
},
onTabClose(event) { onTabClose(event) {
this.updateTabsToolbar(); this.updateTabsToolbar();
this.tabsWrapper.scrollTop = this._scrollbarState; this.restoreScrollbarState();
this._scrollbarState = 0;
}, },
openAndChangeToTab(url, options) { openAndChangeToTab(url, options) {

View File

@@ -144,6 +144,7 @@ var gZenCompactModeManager = {
getAndApplySidebarWidth() { getAndApplySidebarWidth() {
let sidebarWidth = this.sidebar.getBoundingClientRect().width; let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (sidebarWidth > 1) { if (sidebarWidth > 1) {
gZenUIManager.restoreScrollbarState();
this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`); this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
} }
return sidebarWidth; return sidebarWidth;