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 @@ +
@@ -43,7 +46,6 @@
    -
    Log debug info to console
    @@ -188,5 +192,7 @@ + + 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 @@
    Show debug information
    -
    A link to log debugging information will be shown in the search results.
    +
    A menu option to log debugging information will be shown in the search results.