mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-29 14:38:37 +00:00
Implement scrollbar state management and adjust overflowing behavior in Zen UI components
This commit is contained in:
@@ -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);
|
||||||
|
@@ -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) {
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user