mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 19:59:59 +02:00
Refactor sidebar scrolling logic and improve tab height calculations for better UI performance
This commit is contained in:
parent
3931f8195b
commit
b9ae18a0ca
7 changed files with 52 additions and 35 deletions
|
@ -84,31 +84,31 @@
|
|||
|
||||
_initSidebarScrolling() {
|
||||
// Disable smooth scroll
|
||||
if (!Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false)) {
|
||||
gBrowser.tabContainer.addEventListener('wheel', (event) => {
|
||||
event.preventDefault(); // Prevent the smooth scroll behavior
|
||||
gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
|
||||
});
|
||||
}
|
||||
const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
|
||||
const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
|
||||
const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
|
||||
gBrowser.tabContainer.addEventListener('wheel', (event) => {
|
||||
if (canSmoothScroll) return;
|
||||
event.preventDefault(); // Prevent the smooth scroll behavior
|
||||
gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
|
||||
});
|
||||
// Detect overflow and underflow
|
||||
const observer = new ResizeObserver((_) => {
|
||||
const tabContainer = gBrowser.tabContainer;
|
||||
const isVertical = tabContainer.getAttribute('orient') === 'vertical';
|
||||
let contentSize =
|
||||
tabContainer.getBoundingClientRect()[isVertical ? 'height' : 'width'];
|
||||
let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
|
||||
// NOTE: This should be contentSize > scrollClientSize, but due
|
||||
// to how Gecko internally rounds in those cases, we allow for some
|
||||
// minor differences (the internal Gecko layout size is 1/60th of a
|
||||
// pixel, so 0.02 should cover it).
|
||||
let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
|
||||
|
||||
tabContainer.arrowScrollbox.toggleAttribute("overflowing", overflowing);
|
||||
tabContainer.arrowScrollbox.dispatchEvent(
|
||||
new CustomEvent(overflowing ? "overflow" : "underflow")
|
||||
);
|
||||
window.requestAnimationFrame(() => {
|
||||
tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
|
||||
tabContainer.arrowScrollbox.dispatchEvent(new CustomEvent(overflowing ? 'overflow' : 'underflow'));
|
||||
});
|
||||
});
|
||||
observer.observe(document.getElementById('navigator-toolbox'));
|
||||
|
||||
observer.observe(tabsWrapper);
|
||||
},
|
||||
|
||||
_initSearchBar() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue