Popup menu updates (#934)

* Store a reference to the menu

* Allow close cancellation

* Add open event

1 files changed, 20 insertions, 6 deletions

diff --git a/ext/bg/js/settings/popup-menu.js b/ext/bg/js/settings/popup-menu.js
index 02ab67d2..def59055 100644
--- a/ext/bg/js/settings/popup-menu.js
+++ b/ext/bg/js/settings/popup-menu.js
@@ -19,15 +19,15 @@ class PopupMenu {
     constructor(sourceElement, container) {
         this._sourceElement = sourceElement;
         this._container = container;
+        this._menu = container.querySelector('.popup-menu');
         this._isClosed = false;
         this._eventListeners = new EventListenerCollection();
     }
 
     prepare() {
-        const menu = this._container.querySelector('.popup-menu');
-        const items = menu.querySelectorAll('.popup-menu-item');
-        this._setPosition(menu, items);
-        menu.focus();
+        const items = this._menu.querySelectorAll('.popup-menu-item');
+        this._setPosition(items);
+        this._menu.focus();
 
         this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
         this._eventListeners.addEventListener(this._container, 'click', this._onMenuContainerClick.bind(this), false);
@@ -36,6 +36,15 @@ class PopupMenu {
         for (const item of items) {
             this._eventListeners.addEventListener(item, 'click', onMenuItemClick, false);
         }
+
+        this._sourceElement.dispatchEvent(new CustomEvent('menuOpened', {
+            bubbles: false,
+            cancelable: false,
+            detail: {
+                container: this._container,
+                menu: this._menu
+            }
+        }));
     }
 
     close() {
@@ -59,7 +68,7 @@ class PopupMenu {
         this._close(null, 'resize');
     }
 
-    _setPosition(menu, items) {
+    _setPosition(items) {
         // Get flags
         let horizontal = 1;
         let vertical = 1;
@@ -107,6 +116,7 @@ class PopupMenu {
         }
 
         // Position
+        const menu = this._menu;
         const fullRect = this._container.getBoundingClientRect();
         const sourceRect = this._sourceElement.getBoundingClientRect();
         const menuRect = menu.getBoundingClientRect();
@@ -142,14 +152,18 @@ class PopupMenu {
         if (this._isClosed) { return; }
         const action = (item !== null ? item.dataset.menuAction : null);
 
-        this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
+        const result = this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
             bubbles: false,
+            cancelable: true,
             detail: {
+                container: this._container,
+                menu: this._menu,
                 item,
                 action,
                 cause
             }
         }));
+        if (!result) { return; }
 
         this._eventListeners.removeAllEventListeners();
         if (this._container.parentNode !== null) {