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

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();

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) {

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);
         }

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) {

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;

ext/bg/js/settings2/translation-text-replacements-controller.js

@@ -176,10 +176,10 @@ class TranslationTextReplacementsEntry {
     // Private
 
     _onMenuOpen(e) {
-        const node = e.detail.menu.node;
+        const bodyNode = e.detail.menu.bodyNode;
         const testVisible = this._isTestVisible();
-        node.querySelector('[data-menu-action=showTest]').hidden = testVisible;
-        node.querySelector('[data-menu-action=hideTest]').hidden = !testVisible;
+        bodyNode.querySelector('[data-menu-action=showTest]').hidden = testVisible;
+        bodyNode.querySelector('[data-menu-action=hideTest]').hidden = !testVisible;
     }
 
     _onMenuClose(e) {

ext/bg/settings2.html

@@ -1912,20 +1912,20 @@
     </div>
 </div></template>
 
-<template id="profile-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="profile-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="moveUp">Move up</button>
     <button class="popup-menu-item" data-menu-action="moveDown">Move down</button>
     <button class="popup-menu-item" data-menu-action="copyFrom">Copy from...</button>
     <button class="popup-menu-item" data-menu-action="editConditions">Edit conditions...</button>
     <button class="popup-menu-item" data-menu-action="duplicate">Duplicate</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
-</div></div></template>
+</div></div></div></template>
 
-<template id="profile-condition-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="profile-condition-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="resetValue">Reset value</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
     <button class="popup-menu-item" data-menu-action="deleteGroup">Delete group</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Dictionary modals -->
@@ -2119,11 +2119,11 @@
     </div>
 </div></template>
 
-<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="showDetails">Show details</button>
     <button class="popup-menu-item" data-menu-action="hideDetails" hidden>Hide details</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
-</div></div></template>
+</div></div></div></template>
 
 <template id="secondary-search-dictionary-template"><div class="settings-item dictionary-item"><div class="settings-item-inner">
     <div class="settings-item-left">
@@ -2271,9 +2271,9 @@
     <button class="icon-button audio-source-menu-button" data-menu="audio-source-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
 </div></template>
 
-<template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="remove">Remove</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Scanning inputs modal -->
@@ -2410,12 +2410,12 @@
     </div>
 </div></template>
 
-<template id="scanning-inputs-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="scanning-inputs-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="showAdvanced">Show advanced options</button>
     <button class="popup-menu-item" data-menu-action="hideAdvanced">Hide advanced options</button>
     <button class="popup-menu-item" data-menu-action="clearInputs">Clear inputs</button>
     <button class="popup-menu-item" data-menu-action="remove">Remove</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Input action prevention modal -->
@@ -2676,11 +2676,11 @@
     <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button>
 </div></template>
 
-<template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template>
+<template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
 
-<template id="anki-card-kanji-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template>
+<template id="anki-card-kanji-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
 
-<template id="anki-card-all-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template>
+<template id="anki-card-all-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
 
 
 <!-- Anki field template modals -->
@@ -2869,11 +2869,11 @@
     </div>
 </div></template>
 
-<template id="translation-text-replacement-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="translation-text-replacement-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="showTest">Test</button>
     <button class="popup-menu-item" data-menu-action="hideTest">Hide test</button>
     <button class="popup-menu-item" data-menu-action="remove">Remove</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Sentence parsing modal -->
@@ -2951,9 +2951,9 @@
     </td>
 </tr></template>
 
-<template id="sentence-termination-character-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="sentence-termination-character-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Keyboard shortcuts modal -->
@@ -3039,11 +3039,11 @@
     </div>
 </div></div></template>
 
-<template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="clearInputs">Clear input</button>
     <button class="popup-menu-item" data-menu-action="resetInput">Reset input</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Scripts -->

ext/bg/welcome.html

@@ -327,9 +327,9 @@
     </div>
 </div></template>
 
-<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
+<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
-</div></div></template>
+</div></div></div></template>
 
 
 <!-- Scripts -->

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 {

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 = (