diff --git a/.gitignore b/.gitignore
index 46868679..0453c462 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ local
 # IntelliJ IDEA
 .idea/
 node_modules
+
+web-ext-artifacts/
diff --git a/constants.js b/constants.js
new file mode 100644
index 00000000..f7c12624
--- /dev/null
+++ b/constants.js
@@ -0,0 +1,33 @@
+//TODO verify accuracy of and fix this comment
+// Strips out whitespace before a line, I think
+export const regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
+
+// The default values for each setting
+export const tcDefaults = {
+  // The default speed videos should play with
+  speed: 1.0,
+  //TODO is this value used? I don't see why it should be needed, can probably be refactored out?
+  displayKey: "v",
+  rememberSpeed: false,
+  audioBoolean: false,
+  startHidden: false,
+  forceLastSavedSpeed: false,
+  enabled: true,
+  controllerOpacity: 0.3,
+  controllerSize: "13px",
+  keyBindings: [
+    { action: "display", key: "v", value: 0, force: false, predefined: true },
+    { action: "slower", key: "s", value: 0.1, force: false, predefined: true },
+    { action: "faster", key: "d", value: 0.1, force: false, predefined: true },
+    { action: "rewind", key: "z", value: 10, force: false, predefined: true },
+    { action: "advance", key: "x", value: 10, force: false, predefined: true },
+    { action: "reset", key: "r", value: 1, force: false, predefined: true },
+    { action: "fast", key: "g", value: 1.8, force: false, predefined: true }
+  ],
+  blacklist: `\
+www.instagram.com
+twitter.com
+imgur.com
+teams.microsoft.com
+`
+};
diff --git a/inject.js b/inject.js
index 79f4e583..273da5d9 100644
--- a/inject.js
+++ b/inject.js
@@ -1,25 +1,54 @@
-var regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
+// Firefox is a bad browser, except all the rest - this import is not possible
+//import {regStrip, tcDefaults} from "./constants.js";
+const regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
+const tcDefaults = {
+  speed: 1.0,
+  displayKey: "v",
+  rememberSpeed: false,
+  audioBoolean: false,
+  startHidden: false,
+  forceLastSavedSpeed: false,
+  enabled: true,
+  controllerOpacity: 0.3,
+  controllerSize: "13px",
+  keyBindings: [
+    { action: "display", key: "v", value: 0, force: false, predefined: true },
+    { action: "slower", key: "s", value: 0.1, force: false, predefined: true },
+    { action: "faster", key: "d", value: 0.1, force: false, predefined: true },
+    { action: "rewind", key: "z", value: 10, force: false, predefined: true },
+    { action: "advance", key: "x", value: 10, force: false, predefined: true },
+    { action: "reset", key: "r", value: 1, force: false, predefined: true },
+    { action: "fast", key: "g", value: 1.8, force: false, predefined: true }
+  ],
+  blacklist: `\
+www.instagram.com
+twitter.com
+imgur.com
+teams.microsoft.com
+`
+};
 
+//TODO parts of this this may be able to be refactored out by using tcDefaults
 var tc = {
   settings: {
     lastSpeed: 1.0, // default 1x
-    enabled: true, // default enabled
+    enabled: true,
     speeds: {}, // empty object to hold speed for each source
 
-    displayKeyCode: 86, // default: V
-    rememberSpeed: false, // default: false
-    forceLastSavedSpeed: false, //default: false
-    audioBoolean: false, // default: false
-    startHidden: false, // default: false
-    controllerOpacity: 0.3, // default: 0.3
+    displayKey: "v",
+    rememberSpeed: false,
+    forceLastSavedSpeed: false,
+    audioBoolean: false,
+    startHidden: false,
+    controllerOpacity: 0.3,
+    controllerSize: "13px",
     keyBindings: [],
     blacklist: `\
-      www.instagram.com
-      twitter.com
-      vine.co
-      imgur.com
-      teams.microsoft.com
-    `.replace(regStrip, ""),
+www.instagram.com
+twitter.com
+imgur.com
+teams.microsoft.com
+`,
     defaultLogLevel: 4,
     logLevel: 3
   },
@@ -38,110 +67,80 @@ var tc = {
 */
 function log(message, level) {
   verbosity = tc.settings.logLevel;
-  if (typeof level === "undefined") {
-    level = tc.settings.defaultLogLevel;
-  }
+  let to_print = "";
   if (verbosity >= level) {
-    if (level === 2) {
-      console.log("ERROR:" + message);
-    } else if (level === 3) {
-      console.log("WARNING:" + message);
-    } else if (level === 4) {
-      console.log("INFO:" + message);
-    } else if (level === 5) {
-      console.log("DEBUG:" + message);
-    } else if (level === 6) {
-      console.log("DEBUG (VERBOSE):" + message);
-      console.trace();
+    switch (level) {
+      case 2:
+        to_print = "ERROR: ";
+        break;
+      case 3:
+        to_print = "WARNING: ";
+        break;
+      case 4:
+        to_print = "INFO: ";
+        break;
+      case 5:
+        to_print = "DEBUG: ";
+        break;
+      case 6:
+        to_print = "VERBOSE DEBUG: ";
+        console.trace();
+        break;
+      default:
+        console.log("ALERT: Please report how you got this to VideoSpeed");
+        console.trace();
     }
+    console.log(to_print + message);
+  }
+}
+
+// Needed because you cannot || with "undefined". Only used in the next lambda function
+function storageToString(stored_key, default_key) {
+  if (stored_key) {
+    return String(stored_key);
+  } else {
+    return default_key;
   }
 }
 
 chrome.storage.sync.get(tc.settings, function (storage) {
   tc.settings.keyBindings = storage.keyBindings; // Array
+
+  console.log(storage);
+
+  // The first time the extension runs...
   if (storage.keyBindings.length == 0) {
-    // if first initialization of 0.5.3
-    // UPDATE
-    tc.settings.keyBindings.push({
-      action: "slower",
-      key: Number(storage.slowerKeyCode) || 83,
-      value: Number(storage.speedStep) || 0.1,
-      force: false,
-      predefined: true
-    }); // default S
-    tc.settings.keyBindings.push({
-      action: "faster",
-      key: Number(storage.fasterKeyCode) || 68,
-      value: Number(storage.speedStep) || 0.1,
-      force: false,
-      predefined: true
-    }); // default: D
-    tc.settings.keyBindings.push({
-      action: "rewind",
-      key: Number(storage.rewindKeyCode) || 90,
-      value: Number(storage.rewindTime) || 10,
-      force: false,
-      predefined: true
-    }); // default: Z
-    tc.settings.keyBindings.push({
-      action: "advance",
-      key: Number(storage.advanceKeyCode) || 88,
-      value: Number(storage.advanceTime) || 10,
-      force: false,
-      predefined: true
-    }); // default: X
-    tc.settings.keyBindings.push({
-      action: "reset",
-      key: Number(storage.resetKeyCode) || 82,
-      value: 1.0,
-      force: false,
-      predefined: true
-    }); // default: R
-    tc.settings.keyBindings.push({
-      action: "fast",
-      key: Number(storage.fastKeyCode) || 71,
-      value: Number(storage.fastSpeed) || 1.8,
-      force: false,
-      predefined: true
-    }); // default: G
+    tc.settings.keyBindings = tcDefaults.keyBindings;
+
+    //TODO what does this do?
     tc.settings.version = "0.5.3";
 
+    //TODO we should refactor tc so we can just call chrome.storage.sync.set(tc.settings)
     chrome.storage.sync.set({
       keyBindings: tc.settings.keyBindings,
       version: tc.settings.version,
-      displayKeyCode: tc.settings.displayKeyCode,
+      displayKey: tc.settings.displayKey,
       rememberSpeed: tc.settings.rememberSpeed,
       forceLastSavedSpeed: tc.settings.forceLastSavedSpeed,
       audioBoolean: tc.settings.audioBoolean,
       startHidden: tc.settings.startHidden,
       enabled: tc.settings.enabled,
       controllerOpacity: tc.settings.controllerOpacity,
+      controllerSize: tc.settings.controllerSize,
       blacklist: tc.settings.blacklist.replace(regStrip, "")
     });
   }
   tc.settings.lastSpeed = Number(storage.lastSpeed);
-  tc.settings.displayKeyCode = Number(storage.displayKeyCode);
+  tc.settings.displayKey = String(storage.displayKey);
   tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
   tc.settings.forceLastSavedSpeed = Boolean(storage.forceLastSavedSpeed);
   tc.settings.audioBoolean = Boolean(storage.audioBoolean);
   tc.settings.enabled = Boolean(storage.enabled);
   tc.settings.startHidden = Boolean(storage.startHidden);
   tc.settings.controllerOpacity = Number(storage.controllerOpacity);
+  tc.settings.controllerSize = String(storage.controllerSize);
   tc.settings.blacklist = String(storage.blacklist);
 
-  // ensure that there is a "display" binding (for upgrades from versions that had it as a separate binding)
-  if (
-    tc.settings.keyBindings.filter((x) => x.action == "display").length == 0
-  ) {
-    tc.settings.keyBindings.push({
-      action: "display",
-      key: Number(storage.displayKeyCode) || 86,
-      value: 0,
-      force: false,
-      predefined: true
-    }); // default V
-  }
-
   initializeWhenReady(document);
 });
 
@@ -154,9 +153,8 @@ function getKeyBindings(action, what = "value") {
 }
 
 function setKeyBindings(action, value) {
-  tc.settings.keyBindings.find((item) => item.action === action)[
-    "value"
-  ] = value;
+  tc.settings.keyBindings.find((item) => item.action === action)["value"] =
+    value;
 }
 
 function defineVideoController() {
@@ -293,11 +291,14 @@ function defineVideoController() {
     var shadowTemplate = `
         <style>
           @import "${chrome.runtime.getURL("shadow.css")}";
+          * {
+            font-size:${tc.settings.controllerSize};
+          }
         </style>
 
         <div id="controller" style="top:${top}; left:${left}; opacity:${
       tc.settings.controllerOpacity
-    }">
+    };">
           <span data-action="drag" class="draggable">${speed}</span>
           <span id="controls">
             <button data-action="rewind" class="rw">«</button>
@@ -344,9 +345,10 @@ function defineVideoController() {
     var fragment = document.createDocumentFragment();
     fragment.appendChild(wrapper);
 
+    // This seemed strange to me at first, but switching on true here allows matching regexes
     switch (true) {
       case location.hostname == "www.amazon.com":
-      case location.hostname == "www.reddit.com":
+      case /\.*.reddit.com/.test(location.hostname):
       case /hbogo\./.test(location.hostname):
         // insert before parent to bypass overlay
         this.parent.parentElement.insertBefore(fragment, this.parent);
@@ -355,8 +357,9 @@ function defineVideoController() {
         // this is a monstrosity but new FB design does not have *any*
         // semantic handles for us to traverse the tree, and deep nesting
         // that we need to bubble up from to get controller to stack correctly
-        let p = this.parent.parentElement.parentElement.parentElement
-          .parentElement.parentElement.parentElement.parentElement;
+        let p =
+          this.parent.parentElement.parentElement.parentElement.parentElement
+            .parentElement.parentElement.parentElement;
         p.insertBefore(fragment, p.firstChild);
         break;
       case location.hostname == "tv.apple.com":
@@ -426,8 +429,7 @@ function setupListener() {
   function updateSpeedFromEvent(video) {
     // It's possible to get a rate change on a VIDEO/AUDIO that doesn't have
     // a video controller attached to it.  If we do, ignore it.
-    if (!video.vsc)
-      return;
+    if (!video.vsc) return;
     var speedIndicator = video.vsc.speedIndicator;
     var src = video.currentSrc;
     var speed = Number(video.playbackRate.toFixed(2));
@@ -481,7 +483,7 @@ function initializeWhenReady(document) {
   if (isBlacklisted()) {
     return;
   }
-  window.addEventListener('load', () => {
+  window.addEventListener("load", () => {
     initializeNow(window.document);
   });
   if (document) {
@@ -497,6 +499,7 @@ function initializeWhenReady(document) {
   }
   log("End initializeWhenReady", 5);
 }
+
 function inIframe() {
   try {
     return window.self !== window.top;
@@ -504,6 +507,7 @@ function inIframe() {
     return true;
   }
 }
+
 function getShadow(parent) {
   let result = [];
   function getChild(parent) {
@@ -556,8 +560,8 @@ function initializeNow(document) {
     doc.addEventListener(
       "keydown",
       function (event) {
-        var keyCode = event.keyCode;
-        log("Processing keydown event: " + keyCode, 6);
+        let key = event.key;
+        log("Processing keydown event: " + key, 6);
 
         // Ignore if following modifier is active.
         if (
@@ -569,7 +573,7 @@ function initializeNow(document) {
           event.getModifierState("Hyper") ||
           event.getModifierState("OS")
         ) {
-          log("Keydown event ignored due to active modifier: " + keyCode, 5);
+          log("Keydown event ignored due to active modifier: " + key, 5);
           return;
         }
 
@@ -587,7 +591,7 @@ function initializeNow(document) {
           return false;
         }
 
-        var item = tc.settings.keyBindings.find((item) => item.key === keyCode);
+        var item = tc.settings.keyBindings.find((item) => item.key === key);
         if (item) {
           runAction(item.action, item.value);
           if (item.force === "true") {
@@ -653,8 +657,7 @@ function initializeNow(document) {
                   (x) => x.tagName == "VIDEO"
                 )[0];
                 if (node) {
-                  if (node.vsc)
-                    node.vsc.remove();
+                  if (node.vsc) node.vsc.remove();
                   checkForVideo(node, node.parentNode || mutation.target, true);
                 }
               }
diff --git a/options.html b/options.html
index 242c326f..11fa38de 100644
--- a/options.html
+++ b/options.html
@@ -3,7 +3,7 @@
   <head>
     <title>Video Speed Controller: Options</title>
     <link rel="stylesheet" href="options.css" />
-    <script src="options.js"></script>
+    <script type="module" src="options.js"></script>
   </head>
   <body>
     <header>
@@ -160,6 +160,10 @@ <h3>Other</h3>
         <label for="controllerOpacity">Controller opacity</label>
         <input id="controllerOpacity" type="text" value="" />
       </div>
+      <div class="row">
+        <label for="controllerSize">Controller opacity</label>
+        <input id="controllerSize" type="text" value="" />
+      </div>
       <div class="row">
         <label for="blacklist"
           >Sites on which extension is disabled<br />
diff --git a/options.js b/options.js
index e1b8b95f..bea8473b 100644
--- a/options.js
+++ b/options.js
@@ -1,109 +1,34 @@
-var regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
-
-var tcDefaults = {
-  speed: 1.0, // default:
-  displayKeyCode: 86, // default: V
-  rememberSpeed: false, // default: false
-  audioBoolean: false, // default: false
-  startHidden: false, // default: false
-  forceLastSavedSpeed: false, //default: false
-  enabled: true, // default enabled
-  controllerOpacity: 0.3, // default: 0.3
-  keyBindings: [
-    { action: "display", key: 86, value: 0, force: false, predefined: true }, // V
-    { action: "slower", key: 83, value: 0.1, force: false, predefined: true }, // S
-    { action: "faster", key: 68, value: 0.1, force: false, predefined: true }, // D
-    { action: "rewind", key: 90, value: 10, force: false, predefined: true }, // Z
-    { action: "advance", key: 88, value: 10, force: false, predefined: true }, // X
-    { action: "reset", key: 82, value: 1, force: false, predefined: true }, // R
-    { action: "fast", key: 71, value: 1.8, force: false, predefined: true } // G
-  ],
-  blacklist: `www.instagram.com
-    twitter.com
-    imgur.com
-    teams.microsoft.com
-  `.replace(regStrip, "")
-};
+// Firefox is a bad browser, except for all the rest - this import is not possible.
+import { regStrip, tcDefaults } from "./constants.js";
 
 var keyBindings = [];
 
-var keyCodeAliases = {
-  0: "null",
-  null: "null",
-  undefined: "null",
-  32: "Space",
-  37: "Left",
-  38: "Up",
-  39: "Right",
-  40: "Down",
-  96: "Num 0",
-  97: "Num 1",
-  98: "Num 2",
-  99: "Num 3",
-  100: "Num 4",
-  101: "Num 5",
-  102: "Num 6",
-  103: "Num 7",
-  104: "Num 8",
-  105: "Num 9",
-  106: "Num *",
-  107: "Num +",
-  109: "Num -",
-  110: "Num .",
-  111: "Num /",
-  112: "F1",
-  113: "F2",
-  114: "F3",
-  115: "F4",
-  116: "F5",
-  117: "F6",
-  118: "F7",
-  119: "F8",
-  120: "F9",
-  121: "F10",
-  122: "F11",
-  123: "F12",
-  186: ";",
-  188: "<",
-  189: "-",
-  187: "+",
-  190: ">",
-  191: "/",
-  192: "~",
-  219: "[",
-  220: "\\",
-  221: "]",
-  222: "'",
-  59:  ";",
-  61:  "+",
-  173: "-",
-};
-
 function recordKeyPress(e) {
   if (
     (e.keyCode >= 48 && e.keyCode <= 57) || // Numbers 0-9
     (e.keyCode >= 65 && e.keyCode <= 90) || // Letters A-Z
     keyCodeAliases[e.keyCode] // Other character keys
   ) {
-    e.target.value =
-      keyCodeAliases[e.keyCode] || String.fromCharCode(e.keyCode);
+    e.target.value = getKeyCodeName(e);
+    e.target.key = e.key;
     e.target.keyCode = e.keyCode;
 
     e.preventDefault();
     e.stopPropagation();
   } else if (e.keyCode === 8) {
-    // Clear input when backspace pressed
+    // Clear input when backspace pressed, but keep the keycode the same
     e.target.value = "";
   } else if (e.keyCode === 27) {
-    // When esc clicked, clear input
+    // When esc clicked, clear input and unbind the key
     e.target.value = "null";
+    e.target.key = null;
     e.target.keyCode = null;
   }
 }
 
 function inputFilterNumbersOnly(e) {
-  var char = String.fromCharCode(e.keyCode);
-  if (!/[\d\.]$/.test(char) || !/^\d+(\.\d*)?$/.test(e.target.value + char)) {
+  var chr = e.key;
+  if (!/[\d\.]$/.test(chr) || !/^\d+(\.\d*)?$/.test(e.target.value + chr)) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -114,26 +39,19 @@ function inputFocus(e) {
 }
 
 function inputBlur(e) {
-  e.target.value =
-    keyCodeAliases[e.target.keyCode] || String.fromCharCode(e.target.keyCode);
+  e.target.value = getKeyCodeName(e);
 }
 
-function updateShortcutInputText(inputId, keyCode) {
-  document.getElementById(inputId).value =
-    keyCodeAliases[keyCode] || String.fromCharCode(keyCode);
-  document.getElementById(inputId).keyCode = keyCode;
+function updateCustomShortcutInputText(inputItem, key) {
+  inputItem.value = key;
+  inputItem.key = key;
 }
 
-function updateCustomShortcutInputText(inputItem, keyCode) {
-  inputItem.value = keyCodeAliases[keyCode] || String.fromCharCode(keyCode);
-  inputItem.keyCode = keyCode;
-}
-
-// List of custom actions for which customValue should be disabled
-var customActionsNoValues = ["pause", "muted", "mark", "jump", "display"];
+// List of custom actions for which there is no numeric argument
+const customActionsNoValues = ["pause", "muted", "mark", "jump", "display"];
 
 function add_shortcut() {
-  var html = `<select class="customDo">
+  const html = `<select class="customDo">
     <option value="slower">Decrease speed</option>
     <option value="faster">Increase speed</option>
     <option value="rewind">Rewind</option>
@@ -165,7 +83,7 @@ function add_shortcut() {
 
 function createKeyBindings(item) {
   const action = item.querySelector(".customDo").value;
-  const key = item.querySelector(".customKey").keyCode;
+  const key = item.querySelector(".customKey").key;
   const value = Number(item.querySelector(".customValue").value);
   const force = item.querySelector(".customForce").value;
   const predefined = !!item.id; //item.id ? true : false;
@@ -181,8 +99,7 @@ function createKeyBindings(item) {
 
 // Validates settings before saving
 function validate() {
-  var valid = true;
-  var status = document.getElementById("status");
+  let status = document.getElementById("status");
   document
     .getElementById("blacklist")
     .value.split("\n")
@@ -194,12 +111,11 @@ function validate() {
         } catch (err) {
           status.textContent =
             "Error: Invalid blacklist regex: " + match + ". Unable to save";
-          valid = false;
-          return;
+          return false;
         }
       }
     });
-  return valid;
+  return true;
 }
 
 // Saves options to chrome.storage
@@ -212,13 +128,16 @@ function save_options() {
     createKeyBindings(item)
   ); // Remove added shortcuts
 
-  var rememberSpeed = document.getElementById("rememberSpeed").checked;
-  var forceLastSavedSpeed = document.getElementById("forceLastSavedSpeed").checked;
-  var audioBoolean = document.getElementById("audioBoolean").checked;
-  var enabled = document.getElementById("enabled").checked;
-  var startHidden = document.getElementById("startHidden").checked;
-  var controllerOpacity = document.getElementById("controllerOpacity").value;
-  var blacklist = document.getElementById("blacklist").value;
+  let rememberSpeed = document.getElementById("rememberSpeed").checked;
+  let forceLastSavedSpeed = document.getElementById(
+    "forceLastSavedSpeed"
+  ).checked;
+  let audioBoolean = document.getElementById("audioBoolean").checked;
+  let enabled = document.getElementById("enabled").checked;
+  let startHidden = document.getElementById("startHidden").checked;
+  let controllerOpacity = document.getElementById("controllerOpacity").value;
+  let controllerSize = document.getElementById("controllerSize").value;
+  let blacklist = document.getElementById("blacklist").value;
 
   chrome.storage.sync.remove([
     "resetSpeed",
@@ -226,12 +145,12 @@ function save_options() {
     "fastSpeed",
     "rewindTime",
     "advanceTime",
-    "resetKeyCode",
-    "slowerKeyCode",
-    "fasterKeyCode",
-    "rewindKeyCode",
-    "advanceKeyCode",
-    "fastKeyCode"
+    "resetKey",
+    "slowerKey",
+    "fasterKey",
+    "rewindKey",
+    "advanceKey",
+    "fastKey"
   ]);
   chrome.storage.sync.set(
     {
@@ -241,12 +160,13 @@ function save_options() {
       enabled: enabled,
       startHidden: startHidden,
       controllerOpacity: controllerOpacity,
+      controllerSize: controllerSize,
       keyBindings: keyBindings,
-      blacklist: blacklist.replace(regStrip, "")
+      blacklist: blacklist
     },
     function () {
       // Update status to let user know options were saved.
-      var status = document.getElementById("status");
+      let status = document.getElementById("status");
       status.textContent = "Options saved";
       setTimeout(function () {
         status.textContent = "";
@@ -259,31 +179,24 @@ function save_options() {
 function restore_options() {
   chrome.storage.sync.get(tcDefaults, function (storage) {
     document.getElementById("rememberSpeed").checked = storage.rememberSpeed;
-    document.getElementById("forceLastSavedSpeed").checked = storage.forceLastSavedSpeed;
+    document.getElementById("forceLastSavedSpeed").checked =
+      storage.forceLastSavedSpeed;
     document.getElementById("audioBoolean").checked = storage.audioBoolean;
     document.getElementById("enabled").checked = storage.enabled;
     document.getElementById("startHidden").checked = storage.startHidden;
     document.getElementById("controllerOpacity").value =
       storage.controllerOpacity;
+    document.getElementById("controllerSize").value =
+      storage.controllerSize;
     document.getElementById("blacklist").value = storage.blacklist;
 
-    // ensure that there is a "display" binding for upgrades from versions that had it as a separate binding
-    if (storage.keyBindings.filter((x) => x.action == "display").length == 0) {
-      storage.keyBindings.push({
-        action: "display",
-        value: 0,
-        force: false,
-        predefined: true
-      });
-    }
-
     for (let i in storage.keyBindings) {
       var item = storage.keyBindings[i];
       if (item.predefined) {
         //do predefined ones because their value needed for overlay
         // document.querySelector("#" + item["action"] + " .customDo").value = item["action"];
         if (item["action"] == "display" && typeof item["key"] === "undefined") {
-          item["key"] = storage.displayKeyCode || tcDefaults.displayKeyCode; // V
+          item["key"] = storage.displayKey || tcDefaults.displayKey;
         }
 
         if (customActionsNoValues.includes(item["action"]))
@@ -353,7 +266,10 @@ document.addEventListener("DOMContentLoaded", function () {
     .addEventListener("click", show_experimental);
 
   function eventCaller(event, className, funcName) {
-    if (!event.target.classList || !event.target.classList.contains(className)) {
+    if (
+      !event.target.classList ||
+      !event.target.classList.contains(className)
+    ) {
       return;
     }
     funcName(event);
@@ -387,3 +303,64 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   });
 });
+
+function getKeyCodeName(e) {
+  // Letters A-Z may be capital or lowercase
+  if (e.keyCode >= 65 && e.keyCode <= 90) {
+    return e.key;
+  }
+  return keyCodeAliases[e.keyCode] || String.fromCharCode(e.keyCode);
+}
+
+// May be a prettier name than e.key
+const keyCodeAliases = {
+  0: "null",
+  null: "null",
+  undefined: "null",
+  32: "Space",
+  37: "Left",
+  38: "Up",
+  39: "Right",
+  40: "Down",
+  96: "Num 0",
+  97: "Num 1",
+  98: "Num 2",
+  99: "Num 3",
+  100: "Num 4",
+  101: "Num 5",
+  102: "Num 6",
+  103: "Num 7",
+  104: "Num 8",
+  105: "Num 9",
+  106: "Num *",
+  107: "Num +",
+  109: "Num -",
+  110: "Num .",
+  111: "Num /",
+  112: "F1",
+  113: "F2",
+  114: "F3",
+  115: "F4",
+  116: "F5",
+  117: "F6",
+  118: "F7",
+  119: "F8",
+  120: "F9",
+  121: "F10",
+  122: "F11",
+  123: "F12",
+  186: ";",
+  188: "<",
+  189: "-",
+  187: "+",
+  190: ">",
+  191: "/",
+  192: "~",
+  219: "[",
+  220: "\\",
+  221: "]",
+  222: "'",
+  59: ";",
+  61: "+",
+  173: "-"
+};
diff --git a/shadow.css b/shadow.css
index 8cab4a9c..a1b7a44d 100644
--- a/shadow.css
+++ b/shadow.css
@@ -1,7 +1,6 @@
 * {
   line-height: 1.9em;
   font-family: sans-serif;
-  font-size: 13px;
 }
 
 :host(:hover) #controls {
@@ -16,9 +15,9 @@
   background: black;
   color: white;
 
-  border-radius: 5px;
-  padding: 5px;
-  margin: 10px 10px 10px 15px;
+  border-radius: 0.4em;
+  padding: 0.4em;
+  margin: 4px;
 
   cursor: default;
   z-index: 9999999;
@@ -61,13 +60,11 @@ button {
   color: black;
   background: white;
   font-weight: bold;
-  border-radius: 5px;
-  padding: 3px 6px 3px 6px;
-  font-size: 14px;
-  line-height: 14px;
+  border-radius: 0.4em;
+  padding: 0.4em 0.55em 0.4em 0.55em;
+  line-height: 0.5em;
   border: 1px solid white;
   font-family: "Lucida Console", Monaco, monospace;
-  margin-bottom: 2px;
 }
 
 button:focus {