From 8dbdbe988f01a32a7740a83c7bd890d3730cabcf Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 14 Dec 2017 05:50:58 +0300
Subject: [PATCH] fixup dc126e1b: more adjustments for persistent child in
 #installed

* use .entry collection instead of installed.children
* adjust CSS counters

also:

* KeyboardEvent#code is checked first now - available since Chrome48 and FF32
* synthetic click event is cancelable, otherwise FF would open the editor in popup
---
 popup/hotkeys.js | 56 +++++++++++++++++++++++++++---------------------
 popup/popup.css  | 15 +++++++------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/popup/hotkeys.js b/popup/hotkeys.js
index fc37a78f..8787fd94 100644
--- a/popup/hotkeys.js
+++ b/popup/hotkeys.js
@@ -3,6 +3,7 @@
 
 // eslint-disable-next-line no-var
 var hotkeys = (() => {
+  const entries = document.getElementsByClassName('entry');
   let togglablesShown;
   let togglables;
   let enabled = false;
@@ -36,41 +37,46 @@ var hotkeys = (() => {
       return;
     }
     let entry;
-    const {which: k, key} = event;
-    if (key ? key >= '0' && key <= '9' : k >= 48 && k <= 57 || k >= 96 && k <= 105) {
-      // 0-9, numpad 0-9
-      const i = key === '0' ? 9 : key ? Number(key) - 1 : k === 48 || k === 96 ? 9 : k - (k > 96 ? 97 : 49);
-      entry = installed.children[i];
-    } else if (key ? key === '`' || key === '*' && !event.shiftKey : k === 192 || k === 106) {
-      // backtick ` and numpad *
+    const {which: k, key, code} = event;
+
+    if (code.startsWith('Digit') || code.startsWith('Numpad') && code.length === 7) {
+      entry = entries[(Number(code.slice(-1)) || 10) - 1];
+
+    } else if (
+        code === 'Backquote' || code === 'NumpadMultiply' ||
+        key && (key === '`' || key === '*') ||
+        k === 192 || k === 106) {
       invertTogglables();
-    } else if (key ? key === '-' : k === 109) {
-      // numpad -
-      toggleState(installed.children, 'enabled', false);
-    } else if (key ? key === '+' : k === 107) {
-      // numpad +
-      toggleState(installed.children, 'disabled', true);
-    } else if (key ? key.length === 1 : k >= 65 && k <= 90) {
-      // any single character
+
+    } else if (
+        code === 'NumpadSubtract' ||
+        key && key === '-' ||
+        k === 109) {
+      toggleState(entries, 'enabled', false);
+
+    } else if (
+        code === 'NumpadAdd' ||
+        key && key === '+' ||
+        k === 107) {
+      toggleState(entries, 'disabled', true);
+
+    } else if (
+    // any single character
+        key && key.length === 1 ||
+        k >= 65 && k <= 90) {
       const letter = new RegExp(key ? '^' + key : '^\\x' + k.toString(16), 'i');
-      entry = [...installed.children].find(entry => letter.test(entry.textContent));
+      entry = [...entries].find(entry => letter.test(entry.textContent));
     }
     if (!entry) {
       return;
     }
     const target = $(event.shiftKey ? '.style-edit-link' : '.checker', entry);
-    target.dispatchEvent(new MouseEvent('click'));
+    target.dispatchEvent(new MouseEvent('click', {cancelable: true}));
   }
 
   function getTogglables() {
-    const all = [...installed.children];
-    const enabled = [];
-    for (const entry of all) {
-      if (entry.classList.contains('enabled')) {
-        enabled.push(entry.id);
-      }
-    }
-    return enabled.length ? enabled : all.map(entry => entry.id);
+    const enabledOrAll = $('.entry.enabled') ? $$('.entry.enabled') : [...entries];
+    return enabledOrAll.map(entry => entry.id);
   }
 
   function countEnabledTogglables() {
diff --git a/popup/popup.css b/popup/popup.css
index cce0d50e..7896b261 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -184,11 +184,6 @@ html[style] .entry {
   padding: 0 14px;
 }
 
-html[style] .entry:nth-child(-n+10):before,
-html[style] .entry:nth-child(10):before {
-  right: 7px;
-}
-
 .entry .actions {
   display: inline-flex;
 }
@@ -220,7 +215,7 @@ html[style] .entry:nth-child(10):before {
 }
 
 .entry:nth-child(-n+10):before,
-.entry:nth-child(10):before {
+.entry:nth-child(11):before {
   counter-increment: style-number;
   content: counter(style-number);
   position: absolute;
@@ -229,10 +224,16 @@ html[style] .entry:nth-child(10):before {
   color: #aaa;
 }
 
-.entry:nth-child(10):before {
+.entry:nth-child(11):before {
   content: "0";
 }
 
+html[style*="border"] .entry:nth-child(-n+10):before,
+html[style*="border"] .entry:nth-child(11):before {
+  /* the "show side borders" option adds 2px */
+  right: 7px;
+}
+
 .entry .actions {
   margin-left: -1px;
   margin-right: -1px;