ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-08 13:49:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor ZenCompactMode to add mouse hover actions

Browse source
This commit is contained in:
mauro-balades 2024-09-21 14:31:23 +02:00
parent 9a5770b183
commit b84a9418c2
1 changed files with 41 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/ZenCompactMode.mjs
View file

@ -7,6 +7,8 @@ var gZenCompactModeManager = {
gZenUIManager.addPopupTrackingAttribute(this.sidebar); gZenUIManager.addPopupTrackingAttribute(this.sidebar);
gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container')); gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container'));
this.addMouseActions();
}, },
get prefefence() { get prefefence() {
@ -47,22 +49,56 @@ var gZenCompactModeManager = {
return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration'); return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
}, },
flashSidebar() { get hideAfterHoverDuration() {
if (this._hideAfterHoverDuration) {
return this._hideAfterHoverDuration;
}
return Services.prefs.getIntPref('zen.view.compact.toolbar-hide-after-hover.duration');
},
get hoverableElements() {
return [
this.sidebar,
document.getElementById('zen-appcontent-navbar-container'),
];
},
flashSidebar(element = null, duration = null) {
if (!element) {
element = this.sidebar;
}
if (!duration) {
duration = this.flashSidebarDuration;
}
let tabPanels = document.getElementById('tabbrowser-tabpanels'); let tabPanels = document.getElementById('tabbrowser-tabpanels');
if (this.sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) { if (element.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
return; return;
} }
if (this._flashSidebarTimeout) { if (this._flashSidebarTimeout) {
clearTimeout(this._flashSidebarTimeout); clearTimeout(this._flashSidebarTimeout);
} else { } else {
window.requestAnimationFrame(() => this.sidebar.setAttribute('flash-popup', '')); window.requestAnimationFrame(() => element.setAttribute('flash-popup', ''));
} }
this._flashSidebarTimeout = setTimeout(() => { this._flashSidebarTimeout = setTimeout(() => {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.sidebar.removeAttribute('flash-popup'); element.removeAttribute('flash-popup');
this._flashSidebarTimeout = null; this._flashSidebarTimeout = null;
}); });
}, this.flashSidebarDuration); }, duration);
},
addMouseActions() {
for (let i = 0; i < this.hoverableElements.length; i++) {
this.hoverableElements[i].addEventListener('mouseenter', (event) => {
let target = this.hoverableElements[i];
target.setAttribute('zen-user-hover', 'true');
});
this.hoverableElements[i].addEventListener('mouseleave', (event) => {
let target = this.hoverableElements[i];
this.flashSidebar(target, this.hideAfterHoverDuration);
});
}
}, },
toggleToolbar() { toggleToolbar() {