diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 40d87ef70..5fcb5702a 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -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'); diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index eda76c8a4..1f0e34bff 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -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),