From 062f95f7c9a4200cd85cde4a70b84d2b6eceb7f2 Mon Sep 17 00:00:00 2001
From: Alex Adam <alexadam@Alexs-MacBook-Pro.local>
Date: Sat, 20 Jan 2018 15:29:53 +0200
Subject: [PATCH] display shortcuts in the menu

---
 web-extension/menu.html | 26 +++++++++++++++++++++-----
 web-extension/menu.js   | 25 +++++++++++++++++++++----
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/web-extension/menu.html b/web-extension/menu.html
index b1aa747..d261441 100644
--- a/web-extension/menu.html
+++ b/web-extension/menu.html
@@ -30,7 +30,7 @@
       font-family: sans-serif;
       font-size: 14px;
       width: 100%;
-      padding: 8px 0;
+      padding: 4px 0;
       padding-left: 8px;
       border: none;
       background-color: white;
@@ -119,6 +119,10 @@
     #includeStyleCheck {
       outline: none;
     }
+    .shortcut {
+        font-size: 10px;
+        color: gray;
+    }
   </style>
 </head>
 
@@ -138,11 +142,23 @@
         </div>
     </div>
     <hr/>
-    <button id="savePage" type="button" name="button"></button>
-    <button id="saveSelection" type="button" name="button"></button>
+    <button id="savePage" type="button" name="button">
+        <div id="savePageLabel"></div>
+        <div id="savePageShortcut" class="shortcut"></div>
+    </button>
+    <button id="saveSelection" type="button" name="button">
+        <div id="saveSelectionLabel"></div>
+        <div id="saveSelectionShortcut" class="shortcut"></div>
+    </button>
     <hr/>
-    <button id="pageChapter" type="button" name="button"></button>
-    <button id="selectionChapter" type="button" name="button"></button>
+    <button id="pageChapter" type="button" name="button">
+        <div id="pageChapterLabel"></div>
+        <div id="pageChapterShortcut" class="shortcut"></div>
+    </button>
+    <button id="selectionChapter" type="button" name="button">
+        <div id="selectionChapterLabel"></div>
+        <div id="selectionChapterShortcut" class="shortcut"></div>
+    </button>
     <hr/>
     <button id="editChapters" type="button" name="button"></button>
   </div>
diff --git a/web-extension/menu.js b/web-extension/menu.js
index c22b365..d87f962 100644
--- a/web-extension/menu.js
+++ b/web-extension/menu.js
@@ -9,10 +9,10 @@ document.getElementById('includeStyle').innerHTML = chrome.i18n.getMessage('incl
 document.getElementById('styleLabel').innerHTML = chrome.i18n.getMessage('styleLabel');
 document.getElementById('applyStyle').innerHTML = chrome.i18n.getMessage('applyStyle');
 document.getElementById('editStyles').innerHTML = chrome.i18n.getMessage('editStyles');
-document.getElementById('savePage').innerHTML = chrome.i18n.getMessage('savePage');
-document.getElementById('saveSelection').innerHTML = chrome.i18n.getMessage('saveSelection');
-document.getElementById('pageChapter').innerHTML = chrome.i18n.getMessage('pageChapter');
-document.getElementById('selectionChapter').innerHTML = chrome.i18n.getMessage('selectionChapter');
+document.getElementById('savePageLabel').innerHTML = chrome.i18n.getMessage('savePage');
+document.getElementById('saveSelectionLabel').innerHTML = chrome.i18n.getMessage('saveSelection');
+document.getElementById('pageChapterLabel').innerHTML = chrome.i18n.getMessage('pageChapter');
+document.getElementById('selectionChapterLabel').innerHTML = chrome.i18n.getMessage('selectionChapter');
 document.getElementById('editChapters').innerHTML = chrome.i18n.getMessage('editChapters');
 document.getElementById('waitMessage').innerHTML = chrome.i18n.getMessage('waitMessage');
 
@@ -244,3 +244,20 @@ document.getElementById('pageChapter').onclick = function() {
 document.getElementById('selectionChapter').onclick = function() {
     dispatch('extract-selection', true);
 };
+
+// get all shortcuts and display them in the menuTitle
+chrome.commands.getAll((commands) => {
+    for (let command of commands) {
+        if (command.name === 'save-page') {
+            document.getElementById('savePageShortcut').appendChild(document.createTextNode(command.shortcut));
+        } else if (command.name === 'save-selection') {
+            document.getElementById('saveSelectionShortcut').appendChild(document.createTextNode(command.shortcut));
+        } else if (command.name === 'add-page') {
+            document.getElementById('pageChapterShortcut').appendChild(document.createTextNode(command.shortcut));
+        } else if (command.name === 'add-selection') {
+            document.getElementById('selectionChapterShortcut').appendChild(document.createTextNode(command.shortcut));
+        }
+
+    }
+    console.log('ALl commands', commands);
+})