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

3 files changed, 25 insertions, 4 deletions

diff --git a/ext/bg/context.html b/ext/bg/context.html
index 4b2bcb8c..afd89207 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -30,9 +30,9 @@
                 <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
             </select></span>
         </button>
-        <a class="nav-button action-open-settings" data-icon="cog" title="Options&#10;(Middle click to open in new tab)"></a>
-        <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search (Alt + Insert)&#10;(Middle click to open in new tab)"></a>
-        <a class="nav-button action-open-info" data-icon="question-mark" title="Information"></a>
+        <a class="nav-button action-open-settings" data-icon="cog" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'></a>
+        <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search" data-hotkey='["global:openSearchPage","title","Search ({0})"]'></a>
+        <a class="nav-button action-open-info" data-icon="question-mark" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'></a>
     </div>
 </div>
 
@@ -42,7 +42,7 @@
         <span class="link-group-icon"><input type="checkbox" id="enable-search2"></span><span class="link-group-label">Enable content scanning</span>
     </label>
     <a class="link-group action-open-settings">
-        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Options</span>
+        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Settings</span>
     </a>
     <a class="link-group action-open-search">
         <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
@@ -57,6 +57,9 @@
 <script src="/mixed/js/comm.js"></script>
 <script src="/mixed/js/api.js"></script>
 
+<script src="/mixed/js/hotkey-help-controller.js"></script>
+<script src="/mixed/js/hotkey-util.js"></script>
+
 <script src="/bg/js/context-main.js"></script>
 
 </body>
diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index 839b534e..65853514 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -16,6 +16,7 @@
  */
 
 /* global
+ * HotkeyHelpController
  * api
  */
 
@@ -35,6 +36,8 @@ class DisplayController {
         const optionsFull = await api.optionsGetFull();
         this._optionsFull = optionsFull;
 
+        this._setupHotkeys();
+
         const optionsPageUrl = optionsFull.global.useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page;
         this._setupButtonEvents('.action-open-settings', 'openSettingsPage', chrome.runtime.getURL(optionsPageUrl));
 
@@ -99,6 +102,19 @@ class DisplayController {
         }
     }
 
+    async _setupHotkeys() {
+        const hotkeyHelpController = new HotkeyHelpController();
+        await hotkeyHelpController.prepare();
+
+        const {profiles, profileCurrent} = this._optionsFull;
+        const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
+        if (primaryProfile !== null) {
+            hotkeyHelpController.setOptions(primaryProfile.options);
+        }
+
+        hotkeyHelpController.setupNode(document.documentElement);
+    }
+
     _updateProfileSelect(profiles, profileCurrent) {
         const select = document.querySelector('#profile-select');
         const optionGroup = document.querySelector('#profile-select-option-group');
diff --git a/ext/bg/search.html b/ext/bg/search.html
index f8e4d21c..4a0cac58 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -94,6 +94,8 @@
 <script src="/mixed/js/display-notification.js"></script>
 <script src="/mixed/js/dynamic-loader.js"></script>
 <script src="/mixed/js/hotkey-handler.js"></script>
+<script src="/mixed/js/hotkey-help-controller.js"></script>
+<script src="/mixed/js/hotkey-util.js"></script>
 <script src="/mixed/js/media-loader.js"></script>
 <script src="/mixed/js/scroll.js"></script>
 <script src="/mixed/js/text-scanner.js"></script>