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

2 files changed, 16 insertions, 10 deletions

diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index c9277088..ec55120b 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -928,11 +928,13 @@ button.icon-button:active {
     border-radius: var(--menu-border-radius);
     background-color: var(--background-color-light);
     padding: 0.5em 0;
+    min-width: 8em;
+    overflow: auto;
+}
+.popup-menu-body {
     display: flex;
     flex-flow: column nowrap;
     align-items: stretch;
-    min-width: 8em;
-    overflow: auto;
     white-space: nowrap;
 }
 button.popup-menu-item {
diff --git a/ext/mixed/js/popup-menu.js b/ext/mixed/js/popup-menu.js
index 2e3f395d..124c1984 100644
--- a/ext/mixed/js/popup-menu.js
+++ b/ext/mixed/js/popup-menu.js
@@ -21,6 +21,7 @@ class PopupMenu extends EventDispatcher {
         this._sourceElement = sourceElement;
         this._containerNode = containerNode;
         this._node = containerNode.querySelector('.popup-menu');
+        this._bodyNode = containerNode.querySelector('.popup-menu-body');
         this._isClosed = false;
         this._eventListeners = new EventListenerCollection();
     }
@@ -37,13 +38,17 @@ class PopupMenu extends EventDispatcher {
         return this._node;
     }
 
+    get bodyNode() {
+        return this._bodyNode;
+    }
+
     get isClosed() {
         return this._isClosed;
     }
 
     prepare() {
-        const items = this._node.querySelectorAll('.popup-menu-item');
-        this._setPosition(items);
+        const items = this._bodyNode.querySelectorAll('.popup-menu-item');
+        this._setPosition();
         this._containerNode.focus();
 
         this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
@@ -84,7 +89,7 @@ class PopupMenu extends EventDispatcher {
         this._close(null, 'resize', true);
     }
 
-    _setPosition(items) {
+    _setPosition() {
         // Get flags
         let horizontal = 1;
         let vertical = 1;
@@ -138,11 +143,10 @@ class PopupMenu extends EventDispatcher {
         const menuRect = menu.getBoundingClientRect();
         let top = menuRect.top;
         let bottom = menuRect.bottom;
-        if (verticalCover === 1 && items.length > 0) {
-            const rect1 = items[0].getBoundingClientRect();
-            const rect2 = items[items.length - 1].getBoundingClientRect();
-            top = rect1.top;
-            bottom = rect2.bottom;
+        if (verticalCover === 1) {
+            const bodyRect = this._bodyNode.getBoundingClientRect();
+            top = bodyRect.top;
+            bottom = bodyRect.bottom;
         }
 
         let x = (