Display menu button (#1992)

* Implement new menu which includes a debug log option

* Update wording

4 files changed, 46 insertions, 7 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index c8996f10..73e08eef 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1881,7 +1881,7 @@ button.footer-notification-close-button {
     display: none;
 }
 
-:root:not([data-debug=true]) .debug-info {
+:root:not([data-debug=true]) .action-button[data-action=menu] {
     display: none;
 }
 :root[data-anki-enabled=false] .action-button[data-action=view-note],
diff --git a/ext/display-templates.html b/ext/display-templates.html
index 04c0b5d6..8b2e4450 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -25,6 +25,9 @@
             <span class="entry-current-indicator-icon" title="Current entry">
                 <span class="icon color-icon" data-icon="entry-current"></span>
             </span>
+            <button class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover">
+                <span class="action-icon icon" data-icon="kebab-menu"></span>
+            </button>
         </div>
         <div class="headword-list"></div>
         <div class="headword-list-details">
@@ -43,7 +46,6 @@
             <ol class="entry-body-section-content definition-list"></ol>
         </div>
     </div>
-    <div class="debug-info"><a tabindex="0" class="debug-log-link">Log debug info to console</a></div>
 </div></template>
 <template id="headword-template" data-remove-whitespace-text="true"><div class="headword">
     <div class="headword-text-container">
@@ -117,6 +119,9 @@
             <span class="entry-current-indicator-icon" title="Current entry">
                 <span class="icon color-icon" data-icon="entry-current"></span>
             </span>
+            <button class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover">
+                <span class="action-icon icon" data-icon="kebab-menu"></span>
+            </button>
         </div>
         <div class="kanji-glyph-container">
             <span class="headword-current-indicator"></span>
@@ -147,7 +152,6 @@
         <tr><th colspan="3">Dictionary Indices</th></tr>
         <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
     </tbody></table>
-    <div class="debug-info"><a tabindex="0" class="debug-log-link">Log debug info to console</a></div>
 </div></template>
 <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
 <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>
@@ -188,5 +192,7 @@
 </div></template>
 <template id="view-note-button-popup-menu-template"><div class="popup-menu-container scan-disable view-note-button-popup-menu" tabindex="-1" role="dialog"><div class="popup-menu popup-menu-auto-size"><div class="popup-menu-body"></div></div></div></template>
 <template id="view-note-button-popup-menu-item-template"><button class="popup-menu-item"><span class="popup-menu-item-label"></span></button></template>
+<template id="dictionary-entry-popup-menu-template"><div class="popup-menu-container scan-disable dictionary-entry-popup-menu" tabindex="-1" role="dialog"><div class="popup-menu popup-menu-auto-size"><div class="popup-menu-body"></div></div></div></template>
+<template id="dictionary-entry-popup-menu-item-template"><button class="popup-menu-item"><span class="popup-menu-item-label"></span></button></template>
 
 </body></html>
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index a5c3f980..ba7ebd91 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -107,10 +107,13 @@ class Display extends EventDispatcher {
         this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
         this._elementOverflowController = new ElementOverflowController();
         this._frameVisible = (pageType === 'search');
+        this._menuContainer = document.querySelector('#popup-menus');
         this._onEntryClickBind = this._onEntryClick.bind(this);
         this._onKanjiLookupBind = this._onKanjiLookup.bind(this);
         this._onDebugLogClickBind = this._onDebugLogClick.bind(this);
         this._onTagClickBind = this._onTagClick.bind(this);
+        this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
+        this._onMenuButtonMenuCloseBind = this._onMenuButtonMenuClose.bind(this);
 
         this._hotkeyHandler.registerActions([
             ['close',             () => { this._onHotkeyClose(); }],
@@ -762,6 +765,35 @@ class Display extends EventDispatcher {
         this._showTagNotification(e.currentTarget);
     }
 
+    _onMenuButtonClick(e) {
+        const node = e.currentTarget;
+
+        const menuContainerNode = this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu');
+        const menuBodyNode = menuContainerNode.querySelector('.popup-menu-body');
+
+        const addItem = (menuAction, label) => {
+            const item = this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu-item');
+            item.querySelector('.popup-menu-item-label').textContent = label;
+            item.dataset.menuAction = menuAction;
+            menuBodyNode.appendChild(item);
+        };
+
+        addItem('log-debug-info', 'Log debug info');
+
+        this._menuContainer.appendChild(menuContainerNode);
+        const popupMenu = new PopupMenu(node, menuContainerNode);
+        popupMenu.prepare();
+    }
+
+    _onMenuButtonMenuClose(e) {
+        const {currentTarget: node, detail: {action}} = e;
+        switch (action) {
+            case 'log-debug-info':
+                this._logDictionaryEntryData(this.getElementDictionaryEntryIndex(node));
+                break;
+        }
+    }
+
     _showTagNotification(tagNode) {
         tagNode = tagNode.parentNode;
         if (tagNode === null) { return; }
@@ -1363,12 +1395,13 @@ class Display extends EventDispatcher {
         for (const node of entry.querySelectorAll('.headword-kanji-link')) {
             eventListeners.addEventListener(node, 'click', this._onKanjiLookupBind);
         }
-        for (const node of entry.querySelectorAll('.debug-log-link')) {
-            eventListeners.addEventListener(node, 'click', this._onDebugLogClickBind);
-        }
         for (const node of entry.querySelectorAll('.tag-label')) {
             eventListeners.addEventListener(node, 'click', this._onTagClickBind);
         }
+        for (const node of entry.querySelectorAll('.action-button[data-action=menu]')) {
+            eventListeners.addEventListener(node, 'click', this._onMenuButtonClickBind);
+            eventListeners.addEventListener(node, 'menuClose', this._onMenuButtonMenuCloseBind);
+        }
     }
 
     _updateContentTextScanner(options) {
diff --git a/ext/settings.html b/ext/settings.html
index 1c3dd065..d5020b18 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -732,7 +732,7 @@
         <div class="settings-item advanced-only"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Show debug information</div>
-                <div class="settings-item-description">A link to log debugging information will be shown in the search results.</div>
+                <div class="settings-item-description">A menu option to log debugging information will be shown in the search results.</div>
             </div>
             <div class="settings-item-right">
                 <label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>