popup: show hotkey info upon clicking the area on the right

_locales/en/messages.json

@@ -639,6 +639,14 @@
     "message": "Shift-click or right-click opens manager with styles applicable for current site",
     "description": "Tooltip for the 'Manage' button in the popup."
   },
+  "popupHotkeysInfo": {
+    "message": "<1>-<9>, <0>, also on numpad - toggles Nth style (0 is 10)\n<A>-<Z> toggles first style with a name that starts with the letter\n<Shift> opens editor instead of toggling\n<Numpad +> enables listed styles\n<Numpad –> disables listed styles\n<Numpad *> and <`> (backtick) - toggles initially enabled styles; doesn't apply to subsequently enabled styles while the popup is open so you can restore the initial selection after testing stuff: simply disable all, then toggle i.e. <Numpad –> <Numpad *>\nMore info on wiki",
+    "description": "NOTE1: preserve < and > symbols so that <hotkey> is styled as a key.\nNOTE2: the last line is displayed as a text of the link to the wiki page.\nNOTE3: this is the list of hotkeys displayed after clicking the right edge of the extension popup."
+  },
+  "popupHotkeysTooltip": {
+    "message": "Click to see available hotkeys",
+    "description": "Tooltip displayed when hovering the right edge of the extension popup"
+  },
   "popupOpenEditInWindow": {
     "message": "Open editor in a new window",
     "description": "Label for the checkbox controlling 'edit' action behavior in the popup."

popup.html

@@ -102,6 +102,8 @@
     </div>
   </div>
 
+  <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
+
   <div id="installed"></div>
 
   <div class="actions">

popup/hotkeys.js

@@ -8,6 +8,7 @@ window.addEventListener('showStyles:done', function _() {
   let togglables = getTogglables();
 
   window.addEventListener('keydown', onKeyDown);
+  initHotkeyInfo();
   return;
 
   function onKeyDown(event) {
@@ -102,4 +103,66 @@ window.addEventListener('showStyles:done', function _() {
       }
     });
   }
+
+  function initHotkeyInfo() {
+    const container = $('#hotkey-info');
+    let title;
+    container.onclick = ({target}) => {
+      if (target.localName === 'button') {
+        close();
+      } else if (!container.dataset.active) {
+        open();
+      }
+    };
+
+    function close() {
+      delete container.dataset.active;
+      document.body.style.height = '';
+      container.title = title;
+    }
+
+    function open() {
+      title = container.title;
+      container.title = '';
+      container.dataset.active = true;
+      if (!container.firstElementChild) {
+        buildElement();
+      }
+      const height = 4 +
+        container.firstElementChild.scrollHeight +
+        container.lastElementChild.scrollHeight +
+        parseFloat(getComputedStyle(container.firstElementChild).paddingBottom) * 4;
+      if (height > document.body.clientHeight) {
+        document.body.style.height = height + 'px';
+      }
+    }
+
+    function buildElement() {
+      const keysToElements = line =>
+        line
+          .split(/(<.*?>)/)
+          .map(s => (!s.startsWith('<') ? s :
+            $element({tag: 'mark', textContent: s.slice(1, -1)})));
+      const linesToElements = text =>
+        text
+          .trim()
+          .split('\n')
+          .map((line, i, array) =>
+            $element(i < array.length - 1 ? {
+              tag: 'p',
+              appendChild: keysToElements(line),
+            } : {
+              tag: 'a',
+              target: '_blank',
+              href: 'https://github.com/openstyles/stylus/wiki/Popup',
+              textContent: line,
+            }));
+      [
+        linesToElements(t('popupHotkeysInfo')),
+        $element({tag: 'button', textContent: t('confirmOK')}),
+      ].forEach(child => {
+        container.appendChild($element({appendChild: child}));
+      });
+    }
+  }
 });

popup/popup.css

@@ -109,21 +109,27 @@ body.blocked > DIV {
   display: flex;
   align-items: center;
   padding: 5px 0.75em;
+  position: relative;
 }
 
 .entry:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.entry:nth-child(-n+10):before {
+.entry:nth-child(-n+10):before,
+.entry:nth-child(10):before {
   counter-increment: style-number;
   content: counter(style-number);
   position: absolute;
+  top: .9ex;
   right: 5px;
-  margin-top: 1px;
   color: #aaa;
 }
 
+.entry:nth-child(10):before {
+  content: "0";
+}
+
 .entry .style-edit-link {
   margin-right: 2px;
 }
@@ -231,6 +237,9 @@ a:hover .svg-icon {
 
 body > .actions {
   margin-top: 0.5em;
+  /* raise the actions above the hotkey-info */
+  position: relative;
+  z-index: 4;
 }
 
 .actions > div:not(:last-child):not(#disable-all-wrapper),
@@ -439,6 +448,76 @@ body.blocked .actions > .left-gutter {
   margin: 0;
 }
 
+/******************************************/
+
+#hotkey-info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  cursor: help;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  hyphens: auto;
+}
+
+#hotkey-info:not([data-active]) > * {
+  display: none;
+}
+
+#hotkey-info[data-active] {
+  left: 6ex;
+  width: auto;
+  cursor: auto;
+  display: flex;
+  flex-direction: column;
+  border-left: 2px solid white;
+  box-shadow: 0 0 90px rgba(0, 0, 0, .5);
+  z-index: 5;
+}
+
+#hotkey-info div:first-child {
+  flex-grow: 1;
+  padding: 0 1em;
+  font-size: 11px;
+  overflow-y: auto;
+}
+
+#hotkey-info div {
+  padding: 1em;
+  border-top: 1px solid #ddd;
+  background-color: white;
+}
+
+#hotkey-info div:last-child {
+  box-shadow: 0 0 90px rgba(0, 0, 0, .25);
+  position: relative;
+}
+
+#hotkey-info p {
+  text-indent: -3px;
+}
+
+#hotkey-info p:last-child {
+  margin-bottom: 0;
+}
+
+#hotkey-info mark {
+  display: inline-block;
+  background: linear-gradient(#ccc, #fff);
+  padding: 1px 6px 0;
+  margin: 2px;
+  border: 1px solid white;
+  border-radius: 4px;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+/******************************************/
+
 @keyframes lights-off {
   from {
     background-color: transparent;