Hotkey help controller (#1272)

* Create HotkeyHelpController

* Expose getAllTemplates

* Update hotkeys on the context page

* Update hotkeys on the display pages

* Fix display issue where a hotkey used to be defined but no longer is

5 files changed, 153 insertions, 13 deletions

diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 66cd9785..c261bcdb 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -2,16 +2,16 @@
 
 <!-- Term entry templates -->
 <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term">
-    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
+    <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
     <div class="entry-header1">
         <div class="entry-header2">
             <div class="entry-header3">
                 <div class="actions">
-                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
-                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
-                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button>
-                    <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio"></button>
-                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
+                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button>
+                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button>
+                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button>
+                    <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]'></button>
+                    <span class="entry-current-indicator-icon" title="Current entry"></span>
                 </div>
                 <div class="term-expression-list"></div>
             </div>
@@ -44,7 +44,7 @@
         </span>
     </div>
     <div class="term-expression-details">
-        <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio"></button>
+        <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]'></button>
         <div class="tags tag-list"></div>
     </div>
 </div></template>
@@ -84,14 +84,14 @@
 
 <!-- Kanji entry templates -->
 <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji">
-    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
+    <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
     <div class="entry-header1">
         <div class="entry-header2">
             <div class="entry-header3">
                 <div class="actions">
-                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
-                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
-                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
+                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button>
+                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'></button>
+                    <span class="entry-current-indicator-icon" title="Current entry"></span>
                 </div>
                 <div class="kanji-glyph-container">
                     <span class="term-expression-current-indicator"></span>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index b48ddadc..0102afbc 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -22,9 +22,10 @@
  */
 
 class DisplayGenerator {
-    constructor({japaneseUtil, mediaLoader}) {
+    constructor({japaneseUtil, mediaLoader, hotkeyHelpController}) {
         this._japaneseUtil = japaneseUtil;
         this._mediaLoader = mediaLoader;
+        this._hotkeyHelpController = hotkeyHelpController;
         this._templates = null;
         this._termPitchAccentStaticTemplateIsSetup = false;
     }
@@ -32,6 +33,14 @@ class DisplayGenerator {
     async prepare() {
         const html = await api.getDisplayTemplatesHtml();
         this._templates = new HtmlTemplateCollection(html);
+        this.updateHotkeys();
+    }
+
+    updateHotkeys() {
+        const hotkeyHelpController = this._hotkeyHelpController;
+        for (const template of this._templates.getAllTemplates()) {
+            hotkeyHelpController.setupNode(template.content);
+        }
     }
 
     preparePitchAccents() {
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index a9d59aff..6af35074 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -24,6 +24,7 @@
  * DocumentUtil
  * FrameEndpoint
  * Frontend
+ * HotkeyHelpController
  * MediaLoader
  * PopupFactory
  * QueryParser
@@ -50,9 +51,11 @@ class Display extends EventDispatcher {
         this._eventListeners = new EventListenerCollection();
         this._setContentToken = null;
         this._mediaLoader = new MediaLoader();
+        this._hotkeyHelpController = new HotkeyHelpController();
         this._displayGenerator = new DisplayGenerator({
             japaneseUtil,
-            mediaLoader: this._mediaLoader
+            mediaLoader: this._mediaLoader,
+            hotkeyHelpController: this._hotkeyHelpController
         });
         this._messageHandlers = new Map();
         this._directMessageHandlers = new Map();
@@ -201,6 +204,7 @@ class Display extends EventDispatcher {
         this._browser = browser;
 
         // Prepare
+        await this._hotkeyHelpController.prepare();
         await this._displayGenerator.prepare();
         this._displayAudio.prepare();
         this._queryParser.prepare();
@@ -285,6 +289,9 @@ class Display extends EventDispatcher {
         this._updateTheme(options.general.popupTheme);
         this.setCustomCss(options.general.customPopupCss);
         this._displayAudio.updateOptions(options);
+        this._hotkeyHelpController.setOptions(options);
+        this._displayGenerator.updateHotkeys();
+        this._hotkeyHelpController.setupNode(document.documentElement);
 
         this._queryParser.setOptions({
             selectedParser: options.parsing.selectedParser,
diff --git a/ext/mixed/js/hotkey-help-controller.js b/ext/mixed/js/hotkey-help-controller.js
new file mode 100644
index 00000000..032573c1
--- /dev/null
+++ b/ext/mixed/js/hotkey-help-controller.js
@@ -0,0 +1,120 @@
+/*
+ * Copyright (C) 2021  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * HotkeyUtil
+ * api
+ */
+
+class HotkeyHelpController {
+    constructor() {
+        this._hotkeyUtil = new HotkeyUtil();
+        this._localActionHotseys = new Map();
+        this._globalActionHotkeys = new Map();
+        this._replacementPattern = /\{0\}/g;
+    }
+
+    async prepare() {
+        const {platform: {os}} = await api.getEnvironmentInfo();
+        this._hotkeyUtil.os = os;
+        await this._setupGlobalCommands(this._globalActionHotkeys);
+    }
+
+    setOptions(options) {
+        const hotkeys = options.inputs.hotkeys;
+        const hotkeyMap = this._localActionHotseys;
+        hotkeyMap.clear();
+        for (const {enabled, action, key, modifiers} of hotkeys) {
+            if (!enabled || key === null || action === '' || hotkeyMap.has(action)) { continue; }
+            hotkeyMap.set(action, this._hotkeyUtil.getInputDisplayValue(key, modifiers));
+        }
+    }
+
+    setupNode(node) {
+        const globalPrexix = 'global:';
+        const replacementPattern = this._replacementPattern;
+        for (const node2 of node.querySelectorAll('[data-hotkey]')) {
+            const data = JSON.parse(node2.dataset.hotkey);
+            let [action, attributes, values] = data;
+            if (!Array.isArray(attributes)) { attributes = [attributes]; }
+            const multipleValues = Array.isArray(values);
+
+            const actionIsGlobal = action.startsWith(globalPrexix);
+            if (actionIsGlobal) { action = action.substring(globalPrexix.length); }
+
+            const defaultAttributeValues = this._getDefaultAttributeValues(node2, data, attributes);
+
+            const hotkey = (actionIsGlobal ? this._globalActionHotkeys : this._localActionHotseys).get(action);
+
+            for (let i = 0, ii = attributes.length; i < ii; ++i) {
+                const attribute = attributes[i];
+                let value = null;
+                if (typeof hotkey !== 'undefined') {
+                    value = (multipleValues ? values[i] : values);
+                    value = value.replace(replacementPattern, hotkey);
+                } else {
+                    value = defaultAttributeValues[i];
+                }
+
+                if (typeof value === 'string') {
+                    node2.setAttribute(attribute, value);
+                } else {
+                    node2.removeAttribute(attribute);
+                }
+            }
+        }
+    }
+
+    // Private
+
+    async _setupGlobalCommands(commandMap) {
+        const commands = await new Promise((resolve, reject) => {
+            chrome.commands.getAll((result) => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve(result);
+                }
+            });
+        });
+
+        commandMap.clear();
+        for (const {name, shortcut} of commands) {
+            if (shortcut.length === 0) { continue; }
+            const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut);
+            commandMap.set(name, this._hotkeyUtil.getInputDisplayValue(key, modifiers));
+        }
+        return commandMap;
+    }
+
+    _getDefaultAttributeValues(node, data, attributes) {
+        if (data.length > 3) {
+            return data[3];
+        }
+
+        const defaultAttributeValues = [];
+        for (let i = 0, ii = attributes.length; i < ii; ++i) {
+            const attribute = attributes[i];
+            const value = node.hasAttribute(attribute) ? node.getAttribute(attribute) : null;
+            defaultAttributeValues.push(value);
+        }
+        data[3] = defaultAttributeValues;
+        node.dataset.hotkey = JSON.stringify(data);
+        return defaultAttributeValues;
+    }
+}
diff --git a/ext/mixed/js/html-template-collection.js b/ext/mixed/js/html-template-collection.js
index 65b316c8..52d5f3b0 100644
--- a/ext/mixed/js/html-template-collection.js
+++ b/ext/mixed/js/html-template-collection.js
@@ -44,6 +44,10 @@ class HtmlTemplateCollection {
         return document.importNode(template.content, true);
     }
 
+    getAllTemplates() {
+        return this._templates.values();
+    }
+
     // Private
 
     _prepareTemplate(template) {