Update popup menu structure (#1301)

* Wrap menu items in popup-menu-body

* Use bodyNode instead of node

* Update selector

* Update _setPosition to not use items

5 files changed, 14 insertions, 14 deletions

diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index b816a47b..c2292bc9 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -240,7 +240,7 @@ class AnkiController {
             }
             markers = [...new Set(markers)];
 
-            const container = element.content.querySelector('.popup-menu');
+            const container = element.content.querySelector('.popup-menu-body');
             if (container === null) { return; }
 
             const fragment = document.createDocumentFragment();
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 941b2039..a25268d1 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -117,9 +117,9 @@ class DictionaryEntry {
     }
 
     _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 bodyNode = e.detail.menu.bodyNode;
+        const showDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
+        const hideDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
         const hasDetails = (this._detailsContainer !== null);
         const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
         if (showDetails !== null) {
diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 1ab46b04..5fda1dc0 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -546,8 +546,8 @@ class ProfileConditionUI {
     }
 
     _onMenuOpen(e) {
-        const node = e.detail.menu.node;
-        const deleteGroup = node.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
+        const bodyNode = e.detail.menu.bodyNode;
+        const deleteGroup = bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
         if (deleteGroup !== null) {
             deleteGroup.hidden = (this._parent.childCount <= 1);
         }
diff --git a/ext/bg/js/settings/profile-controller.js b/ext/bg/js/settings/profile-controller.js
index 924e965e..914fc679 100644
--- a/ext/bg/js/settings/profile-controller.js
+++ b/ext/bg/js/settings/profile-controller.js
@@ -659,12 +659,12 @@ class ProfileEntry {
     }
 
     _onMenuOpen(e) {
-        const node = e.detail.menu.node;
+        const bodyNode = e.detail.menu.bodyNode;
         const count = this._profileController.profileCount;
-        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);
+        this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0);
+        this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1);
+        this._setMenuActionEnabled(bodyNode, 'copyFrom', count > 1);
+        this._setMenuActionEnabled(bodyNode, 'delete', count > 1);
     }
 
     _onMenuClose(e) {
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index a810a2fb..eb179c6a 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -246,9 +246,9 @@ class ScanInputField {
     }
 
     _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 bodyNode = e.detail.menu.bodyNode;
+        const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
+        const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
         const advancedVisible = (this._node.dataset.showAdvanced === 'true');
         if (showAdvanced !== null) {
             showAdvanced.hidden = advancedVisible;