Merge pull request #1576 from BrhmDev/fix/add-general-popupTracking-method

Add method to gZenUIManager to track popups on any element

src/browser/base/content/ZenStartup.mjs

@@ -41,6 +41,7 @@
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
         ZenWorkspaces.init();
+        gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
         gZenKeyboardShortcuts.init();

src/browser/base/content/ZenUIManager.mjs

@@ -1,4 +1,12 @@
 var gZenUIManager = {
+  _popupTrackingElements: [],
+
+  init () {
+
+    document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
+    document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
+  },
+
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
       let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
@@ -24,6 +32,46 @@ var gZenUIManager = {
   createValidXULText(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   },
+
+  /**
+   * Adds the 'has-popup-menu' attribute to the element when popup is opened on it.
+   * @param element element to track
+   */
+  addPopupTrackingAttribute(element) {
+    this._popupTrackingElements.push(element);
+  },
+
+  removePopupTrackingAttribute(element) {
+    this._popupTrackingElements.remove(element);
+  },
+
+  onPopupShowing(showEvent) {
+    for (const el of this._popupTrackingElements) {
+      if (!el.contains(event.explicitOriginalTarget)) {
+        continue;
+      }
+      document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
+      el.setAttribute('has-popup-menu', '');
+      this.__currentPopup = showEvent.target;
+      this.__currentPopupTrackElement = el;
+      break;
+    }
+  },
+
+  onPopupHidden(hideEvent) {
+    if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) {
+      return;
+    }
+    const element = this.__currentPopupTrackElement;
+    if (document.getElementById('main-window').matches(':hover')) {
+      element.removeAttribute('has-popup-menu');
+    } else {
+      this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
+      document.addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
+    }
+    this.__currentPopup = null;
+    this.__currentPopupTrackElement = null;
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -151,7 +199,8 @@ var gZenCompactModeManager = {
     Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
     Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this));
 
-    addEventListener('popupshowing', this.keepSidebarVisibleOnContextMenu.bind(this));
+    gZenUIManager.addPopupTrackingAttribute(this.sidebar);
+    gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container'));
   },
 
   get prefefence() {
@@ -210,37 +259,6 @@ var gZenCompactModeManager = {
     }, this.flashSidebarDuration);
   },
 
-  keepSidebarVisibleOnContextMenu(event) {
-    if (!this.sidebar.contains(event.explicitOriginalTarget)) {
-      return;
-    }
-    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 = (hiddenEvent) => {
-      if (event.target === hiddenEvent.target) {
-        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');