Menu refactor (#1277)

* Rename menuOpened event to menuOpen

* Rename menuClosed event to menuClose

* Rename close event

* Assign _isClosed

* Reuse event detail

* Expose PopupMenu.openMenus

* Rename and expose properties

* Add cancelable argument to close

* Update menuOpen detail

* Update menuClose detail

8 files changed, 93 insertions, 84 deletions

diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index 49bdea60..b816a47b 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -445,10 +445,10 @@ class AnkiCardController {
         this._validateField(node, index);
     }
 
-    _onFieldMenuClosed({currentTarget: node, detail: {action, item}}) {
+    _onFieldMenuClose({currentTarget: button, detail: {action, item}}) {
         switch (action) {
             case 'setFieldMarker':
-                this._setFieldMarker(node, item.dataset.marker);
+                this._setFieldMarker(button, item.dataset.marker);
                 break;
         }
     }
@@ -547,7 +547,7 @@ class AnkiCardController {
                 } else {
                     delete menuButton.dataset.menu;
                 }
-                this._fieldEventListeners.addEventListener(menuButton, 'menuClosed', this._onFieldMenuClosed.bind(this), false);
+                this._fieldEventListeners.addEventListener(menuButton, 'menuClose', this._onFieldMenuClose.bind(this), false);
             }
 
             totalFragment.appendChild(content);
diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js
index 6bd1bad7..125d8e16 100644
--- a/ext/bg/js/settings/anki-templates-controller.js
+++ b/ext/bg/js/settings/anki-templates-controller.js
@@ -69,7 +69,7 @@ class AnkiTemplatesController {
         resetButton.addEventListener('click', this._onReset.bind(this), false);
         resetConfirmButton.addEventListener('click', this._onResetConfirm.bind(this), false);
         if (menuButton !== null) {
-            menuButton.addEventListener('menuClosed', this._onFieldMenuClosed.bind(this), false);
+            menuButton.addEventListener('menuClose', this._onFieldMenuClose.bind(this), false);
         }
 
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
@@ -138,10 +138,10 @@ class AnkiTemplatesController {
         this._validate(infoNode, field, 'term-kanji', true, false);
     }
 
-    _onFieldMenuClosed({currentTarget: node, detail: {action, item}}) {
+    _onFieldMenuClose({currentTarget: button, detail: {action, item}}) {
         switch (action) {
             case 'setFieldMarker':
-                this._setFieldMarker(node, item.dataset.marker);
+                this._setFieldMarker(button, item.dataset.marker);
                 break;
         }
     }
diff --git a/ext/bg/js/settings/audio-controller.js b/ext/bg/js/settings/audio-controller.js
index 7c9e77f6..71f908d0 100644
--- a/ext/bg/js/settings/audio-controller.js
+++ b/ext/bg/js/settings/audio-controller.js
@@ -168,7 +168,7 @@ class AudioController {
             eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false);
         }
         if (menuButton !== null) {
-            eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this, entry), false);
+            eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this, entry), false);
         }
 
         this._audioSourceContainer.appendChild(container);
@@ -224,9 +224,8 @@ class AudioController {
         this._removeAudioSourceEntry(entry);
     }
 
-    _onMenuClosed(entry, e) {
-        const {detail: {action}} = e;
-        switch (action) {
+    _onMenuClose(entry, e) {
+        switch (e.detail.action) {
             case 'remove':
                 this._removeAudioSourceEntry(entry);
                 break;
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index e32e4d6f..941b2039 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -86,8 +86,8 @@ class DictionaryEntry {
             this._eventListeners.addEventListener(deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false);
         }
         if (menuButton !== null) {
-            this._eventListeners.addEventListener(menuButton, 'menuOpened', this._onMenuOpened.bind(this), false);
-            this._eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this), false);
+            this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this), false);
+            this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false);
         }
         if (detailsToggleLink !== null && this._detailsContainer !== null) {
             this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
@@ -116,10 +116,10 @@ class DictionaryEntry {
         this._delete();
     }
 
-    _onMenuOpened(e) {
-        const {detail: {menu}} = e;
-        const showDetails = menu.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
-        const hideDetails = menu.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
+    _onMenuOpen(e) {
+        const node = e.detail.menu.node;
+        const showDetails = node.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
+        const hideDetails = node.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
         const hasDetails = (this._detailsContainer !== null);
         const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
         if (showDetails !== null) {
@@ -132,9 +132,8 @@ class DictionaryEntry {
         }
     }
 
-    _onMenuClosed(e) {
-        const {detail: {action}} = e;
-        switch (action) {
+    _onMenuClose(e) {
+        switch (e.detail.action) {
             case 'delete':
                 this._delete();
                 break;
diff --git a/ext/bg/js/settings/popup-menu.js b/ext/bg/js/settings/popup-menu.js
index 63c257ad..5ae7435c 100644
--- a/ext/bg/js/settings/popup-menu.js
+++ b/ext/bg/js/settings/popup-menu.js
@@ -16,62 +16,72 @@
  */
 
 class PopupMenu extends EventDispatcher {
-    constructor(sourceElement, container) {
+    constructor(sourceElement, containerNode) {
         super();
         this._sourceElement = sourceElement;
-        this._container = container;
-        this._menu = container.querySelector('.popup-menu');
+        this._containerNode = containerNode;
+        this._node = containerNode.querySelector('.popup-menu');
         this._isClosed = false;
         this._eventListeners = new EventListenerCollection();
     }
 
+    get sourceElement() {
+        return this._sourceElement;
+    }
+
+    get containerNode() {
+        return this._containerNode;
+    }
+
+    get node() {
+        return this._node;
+    }
+
     get isClosed() {
         return this._isClosed;
     }
 
     prepare() {
-        const items = this._menu.querySelectorAll('.popup-menu-item');
+        const items = this._node.querySelectorAll('.popup-menu-item');
         this._setPosition(items);
-        this._container.focus();
+        this._containerNode.focus();
 
         this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
-        this._eventListeners.addEventListener(this._container, 'click', this._onMenuContainerClick.bind(this), false);
+        this._eventListeners.addEventListener(this._containerNode, 'click', this._onMenuContainerClick.bind(this), false);
 
         const onMenuItemClick = this._onMenuItemClick.bind(this);
         for (const item of items) {
             this._eventListeners.addEventListener(item, 'click', onMenuItemClick, false);
         }
 
-        this._sourceElement.dispatchEvent(new CustomEvent('menuOpened', {
+        PopupMenu.openMenus.add(this);
+
+        this._sourceElement.dispatchEvent(new CustomEvent('menuOpen', {
             bubbles: false,
             cancelable: false,
-            detail: {
-                popupMenu: this,
-                container: this._container,
-                menu: this._menu
-            }
+            detail: {menu: this}
         }));
     }
 
-    close() {
-        return this._close(null, 'close');
+    close(cancelable=true) {
+        return this._close(null, 'close', cancelable);
     }
 
     // Private
 
     _onMenuContainerClick(e) {
         if (e.currentTarget !== e.target) { return; }
-        this._close(null, 'outside');
+        this._close(null, 'outside', true);
     }
 
     _onMenuItemClick(e) {
         const item = e.currentTarget;
         if (item.disabled) { return; }
-        this._close(item, 'item');
+        this._close(item, 'item', true);
     }
 
     _onWindowResize() {
-        this._close(null, 'resize');
+        this._close(null, 'resize', true);
     }
 
     _setPosition(items) {
@@ -122,8 +132,8 @@ class PopupMenu extends EventDispatcher {
         }
 
         // Position
-        const menu = this._menu;
-        const fullRect = this._container.getBoundingClientRect();
+        const menu = this._node;
+        const fullRect = this._containerNode.getBoundingClientRect();
         const sourceRect = this._sourceElement.getBoundingClientRect();
         const menuRect = menu.getBoundingClientRect();
         let top = menuRect.top;
@@ -154,37 +164,35 @@ class PopupMenu extends EventDispatcher {
         menu.style.top = `${y}px`;
     }
 
-    _close(item, cause) {
+    _close(item, cause, cancelable) {
         if (this._isClosed) { return true; }
         const action = (item !== null ? item.dataset.menuAction : null);
 
-        const result = this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
-            bubbles: false,
-            cancelable: true,
-            detail: {
-                popupMenu: this,
-                container: this._container,
-                menu: this._menu,
-                item,
-                action,
-                cause
-            }
-        }));
-        if (!result) { return false; }
+        const detail = {
+            menu: this,
+            item,
+            action,
+            cause
+        };
+        const result = this._sourceElement.dispatchEvent(new CustomEvent('menuClose', {bubbles: false, cancelable, detail}));
+        if (cancelable && !result) { return false; }
+
+        PopupMenu.openMenus.delete(this);
 
+        this._isClosed = true;
         this._eventListeners.removeAllEventListeners();
-        if (this._container.parentNode !== null) {
-            this._container.parentNode.removeChild(this._container);
+        if (this._containerNode.parentNode !== null) {
+            this._containerNode.parentNode.removeChild(this._containerNode);
         }
 
-        this.trigger('closed', {
-            popupMenu: this,
-            container: this._container,
-            menu: this._menu,
-            item,
-            action,
-            cause
-        });
+        this.trigger('close', detail);
         return true;
     }
 }
+
+Object.defineProperty(PopupMenu, 'openMenus', {
+    configurable: false,
+    enumerable: true,
+    writable: false,
+    value: new Set()
+});
diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 9cedd1ac..1ab46b04 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -478,8 +478,8 @@ class ProfileConditionUI {
         this._eventListeners.addEventListener(this._operatorInput, 'change', this._onOperatorChange.bind(this), false);
         if (this._removeButton !== null) { this._eventListeners.addEventListener(this._removeButton, 'click', this._onRemoveButtonClick.bind(this), false); }
         if (this._menuButton !== null) {
-            this._eventListeners.addEventListener(this._menuButton, 'menuOpened', this._onMenuOpened.bind(this), false);
-            this._eventListeners.addEventListener(this._menuButton, 'menuClosed', this._onMenuClosed.bind(this), false);
+            this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false);
+            this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false);
         }
     }
 
@@ -545,15 +545,16 @@ class ProfileConditionUI {
         this._removeSelf();
     }
 
-    _onMenuOpened({detail: {menu}}) {
-        const deleteGroup = menu.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
+    _onMenuOpen(e) {
+        const node = e.detail.menu.node;
+        const deleteGroup = node.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
         if (deleteGroup !== null) {
             deleteGroup.hidden = (this._parent.childCount <= 1);
         }
     }
 
-    _onMenuClosed({detail: {action}}) {
-        switch (action) {
+    _onMenuClose(e) {
+        switch (e.detail.action) {
             case 'delete':
                 this._removeSelf();
                 break;
diff --git a/ext/bg/js/settings/profile-controller.js b/ext/bg/js/settings/profile-controller.js
index f40818c7..924e965e 100644
--- a/ext/bg/js/settings/profile-controller.js
+++ b/ext/bg/js/settings/profile-controller.js
@@ -612,8 +612,8 @@ class ProfileEntry {
         this._eventListeners.addEventListener(this._isDefaultRadio, 'change', this._onIsDefaultRadioChange.bind(this), false);
         this._eventListeners.addEventListener(this._nameInput, 'input', this._onNameInputInput.bind(this), false);
         this._eventListeners.addEventListener(this._countLink, 'click', this._onConditionsCountLinkClick.bind(this), false);
-        this._eventListeners.addEventListener(this._menuButton, 'menuOpened', this._onMenuOpened.bind(this), false);
-        this._eventListeners.addEventListener(this._menuButton, 'menuClosed', this._onMenuClosed.bind(this), false);
+        this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false);
+        this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false);
     }
 
     cleanup() {
@@ -658,16 +658,17 @@ class ProfileEntry {
         this._profileController.openProfileConditionsModal(this._index);
     }
 
-    _onMenuOpened({detail: {menu}}) {
+    _onMenuOpen(e) {
+        const node = e.detail.menu.node;
         const count = this._profileController.profileCount;
-        this._setMenuActionEnabled(menu, 'moveUp', this._index > 0);
-        this._setMenuActionEnabled(menu, 'moveDown', this._index < count - 1);
-        this._setMenuActionEnabled(menu, 'copyFrom', count > 1);
-        this._setMenuActionEnabled(menu, 'delete', count > 1);
+        this._setMenuActionEnabled(node, 'moveUp', this._index > 0);
+        this._setMenuActionEnabled(node, 'moveDown', this._index < count - 1);
+        this._setMenuActionEnabled(node, 'copyFrom', count > 1);
+        this._setMenuActionEnabled(node, 'delete', count > 1);
     }
 
-    _onMenuClosed({detail: {action}}) {
-        switch (action) {
+    _onMenuClose(e) {
+        switch (e.detail.action) {
             case 'moveUp':
                 this._profileController.moveProfile(this._index, -1);
                 break;
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index b8b3f710..a810a2fb 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -208,8 +208,8 @@ class ScanInputField {
             this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
         }
         if (menuButton !== null) {
-            this._eventListeners.addEventListener(menuButton, 'menuOpened', this._onMenuOpened.bind(this));
-            this._eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this));
+            this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this));
+            this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this));
         }
 
         this._updateDataSettingTargets();
@@ -245,9 +245,10 @@ class ScanInputField {
         this._removeSelf();
     }
 
-    _onMenuOpened({detail: {menu}}) {
-        const showAdvanced = menu.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
-        const hideAdvanced = menu.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
+    _onMenuOpen(e) {
+        const node = e.detail.menu.node;
+        const showAdvanced = node.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
+        const hideAdvanced = node.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
         const advancedVisible = (this._node.dataset.showAdvanced === 'true');
         if (showAdvanced !== null) {
             showAdvanced.hidden = advancedVisible;
@@ -257,8 +258,8 @@ class ScanInputField {
         }
     }
 
-    _onMenuClosed({detail: {action}}) {
-        switch (action) {
+    _onMenuClose(e) {
+        switch (e.detail.action) {
             case 'remove':
                 this._removeSelf();
                 break;