mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-05 19:37:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: keep sidebar visible on right click in compact mode

Browse Source
This commit is contained in:
brahim
2024-09-18 02:32:41 +02:00
parent 9d76fc8761
commit 4f88923d10
2 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/browser/base/content/ZenUIManager.mjs
View File

@@ -133,6 +133,8 @@ var gZenCompactModeManager = {
init() {
Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this));
this.sidebar.addEventListener('contextmenu', this.keepSidebarVisibleOnContextMenu.bind(this));
},
get prefefence() {
@@ -143,6 +145,13 @@ var gZenCompactModeManager = {
Services.prefs.setBoolPref('zen.view.compact', value);
},
get sidebar() {
if (!this._sidebar) {
this._sidebar= document.getElementById('navigator-toolbox');
}
return this._sidebar;
},
_updateEvent() {
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
},
@@ -156,8 +165,7 @@ var gZenCompactModeManager = {
},
toggleSidebar() {
let sidebar = document.getElementById('navigator-toolbox');
sidebar.toggleAttribute('zen-user-show');
this.sidebar.toggleAttribute('zen-user-show');
},
get flashSidebarDuration() {
@@ -168,24 +176,48 @@ var gZenCompactModeManager = {
},
flashSidebar() {
let sidebar = document.getElementById('navigator-toolbox');
let tabPanels = document.getElementById('tabbrowser-tabpanels');
if (sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
if (this.sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
return;
}
if (this._flashSidebarTimeout) {
clearTimeout(this._flashSidebarTimeout);
} else {
window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', ''));
window.requestAnimationFrame(() => this.sidebar.setAttribute('flash-popup', ''));
}
this._flashSidebarTimeout = setTimeout(() => {
window.requestAnimationFrame(() => {
sidebar.removeAttribute('flash-popup');
this.sidebar.removeAttribute('flash-popup');
this._flashSidebarTimeout = null;
});
}, this.flashSidebarDuration);
},
keepSidebarVisibleOnContextMenu() {
this.sidebar.setAttribute('has-popup-menu', '');
/* If the cursor is on the popup when it hides, the :hover effect will not be reapplied to the sidebar until the cursor moves,
to mitigate this: Check if the mouse is on the sidebar when popup removed, wait until mousemove to remove the has-popup-menu attribute.
*/
if (!this.__removeHasPopupAttribute) {
this.__removeHasPopupAttribute = () => this.sidebar.removeAttribute('has-popup-menu');
}
removeEventListener('mousemove', this.__removeHasPopupAttribute);
let lastMouseEvent;
const trackMouse = (event) => lastMouseEvent = event;
addEventListener('mousemove', trackMouse);
addEventListener('popuphidden', () => {
removeEventListener('mousemove', trackMouse);
const rect = this.sidebar.getBoundingClientRect();
if (rect.left < lastMouseEvent.screenX && lastMouseEvent.screenX < rect.right
&& rect.top < lastMouseEvent.screenY && lastMouseEvent.screenY < rect.bottom) {
addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
} else {
this.__removeHasPopupAttribute();
}
}, {once: true});
},
toggleToolbar() {
let toolbar = document.getElementById('zen-appcontent-navbar-container');
toolbar.toggleAttribute('zen-user-show');

11
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -14,8 +14,8 @@
#navigator-toolbox {
--zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
--zen-compact-toolbox-margin:
calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single)
--zen-compact-toolbox-margin:
calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single)
calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single);
position: absolute !important;
display: block;
@@ -92,9 +92,9 @@
* 3. Add element separation variable, to avoid overlaping with the toolbar
* 4. Calculate toolbar height, taken from zen-urlbar.css
*/
--zen-compact-toolbox-margin: calc(
var(--zen-element-separation) + 0.8rem +
(18px + (var(--toolbarbutton-inner-padding) * 2))
--zen-compact-toolbox-margin: calc(
var(--zen-element-separation) + 0.8rem +
(18px + (var(--toolbarbutton-inner-padding) * 2))
) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
margin-top: 0 !important;
@@ -120,6 +120,7 @@
#navigator-toolbox:focus-within,
#navigator-toolbox[zen-user-show],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active),