Merge pull request #1532 from BrhmDev/fix/keep-sidebar-visable-on-right-click

Fix: keep sidebar visable on right click in compact mode, vertical tabs (expand on hover)

src/browser/base/content/ZenUIManager.mjs

@@ -141,6 +141,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() {
@@ -151,6 +153,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);
   },
@@ -164,8 +173,7 @@ var gZenCompactModeManager = {
   },
 
   toggleSidebar() {
-    let sidebar = document.getElementById('navigator-toolbox');
-    sidebar.toggleAttribute('zen-user-show');
+    this.sidebar.toggleAttribute('zen-user-show');
   },
 
   get flashSidebarDuration() {
@@ -176,24 +184,51 @@ 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: Wait for mousemove when popup item selected
+     */
+    if (!this.__removeHasPopupAttribute) {
+      this.__removeHasPopupAttribute = () => this.sidebar.removeAttribute('has-popup-menu');
+    }
+    removeEventListener('mousemove', this.__removeHasPopupAttribute);
+
+    const waitForMouseMoveOnPopupSelect = (event) => {
+      if (event.target.tagName === 'menuitem') {
+        removeEventListener('click', waitForMouseMoveOnPopupSelect);
+        removeEventListener('popuphidden', removeHasPopupOnPopupHidden);
+        addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
+      }
+    }
+    const removeHasPopupOnPopupHidden = (event) => {
+      if (['toolbar-context-menu', 'tabContextMenu'].includes(event.target.id)) {
+        removeEventListener('click', waitForMouseMoveOnPopupSelect);
+        removeEventListener('popuphidden', removeHasPopupOnPopupHidden);
+        this.__removeHasPopupAttribute();
+      }
+    }
+    addEventListener('click', waitForMouseMoveOnPopupSelect);
+    addEventListener('popuphidden', removeHasPopupOnPopupHidden);
+  },
+
   toggleToolbar() {
     let toolbar = document.getElementById('zen-appcontent-navbar-container');
     toolbar.toggleAttribute('zen-user-show');

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

@@ -46,6 +46,7 @@
     &,
     & #titlebar {
       min-width: var(--zen-toolbox-min-width) !important;
+      -moz-window-dragging: no-drag;
     }
   }
 
@@ -107,6 +108,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),

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -148,6 +148,7 @@
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],
+    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
     #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
@@ -250,6 +251,7 @@
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],
+    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
     #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
@@ -360,6 +362,7 @@
     #navigator-toolbox:focus-within,
     #navigator-toolbox[movingtab],
     #navigator-toolbox[flash-popup],
+    #navigator-toolbox[has-popup-menu],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),
     #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
@@ -379,6 +382,7 @@
         padding: var(--zen-toolbox-padding);
         transition: 0 !important;
         animation: zen-vtabs-animation 0.3s ease-in-out;
+        -moz-window-dragging: no-drag;
       }
 
       &[zen-right-side='true'] #TabsToolbar {

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -20,6 +20,7 @@
   /** Keep these selectors in sync with the ones in vertical-tabs.css */
   #navigator-toolbox:is(
       #navigator-toolbox[zen-user-hover='true']:hover,
+      #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
       #navigator-toolbox[zen-user-hover='true']:focus-within,
       #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
       #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),