Add feature to change controller opacity (#478)

* Add option for changing controller opacity

inject.js

@@ -9,6 +9,7 @@
       rememberSpeed: false, // default: false
       audioBoolean: false,  // default: false
       startHidden: false,   // default: false
+      controllerOpacity: 0.3, // default: 0.3
       keyBindings: [],
       blacklist: `
         www.instagram.com
@@ -75,6 +76,7 @@
         rememberSpeed: tc.settings.rememberSpeed,
         audioBoolean: tc.settings.audioBoolean,
         startHidden: tc.settings.startHidden,
+        controllerOpacity: tc.settings.controllerOpacity,
         blacklist: tc.settings.blacklist.replace(regStrip, '')
       });
     }
@@ -83,6 +85,7 @@
     tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
     tc.settings.audioBoolean = Boolean(storage.audioBoolean);
     tc.settings.startHidden = Boolean(storage.startHidden);
+    tc.settings.controllerOpacity = Number(storage.controllerOpacity);
     tc.settings.blacklist = String(storage.blacklist);
 
     initializeWhenReady(document);
@@ -213,7 +216,7 @@
           @import "${chrome.runtime.getURL('shadow.css')}";
         </style>
 
-        <div id="controller" style="top:${top}; left:${left}">
+        <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>

options.html

@@ -81,7 +81,7 @@
     </section>
 
     <section>
-			<h3>Other</h3>
+            <h3>Other</h3>
 		<div class="row">
         <label for="startHidden">Hide controller by default</label>
         <input id="startHidden" type="checkbox"/>
@@ -94,6 +94,10 @@
           <label for="audioBoolean">Work on audio</label>
           <input id="audioBoolean" type="checkbox"/>
       </div>
+      <div class="row">
+            <label for="controllerOpacity">Controller opacity</label>
+            <input id="controllerOpacity" type="text" value="">
+      </div>
       <div class="row">
           <label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label>
           <textarea id="blacklist" rows="10" cols="50"></textarea>

options.js

@@ -6,6 +6,7 @@ var tcDefaults = {
   rememberSpeed: false, // default: false
   audioBoolean: false, // default: false
   startHidden: false,   // default: false
+  controllerOpacity: 0.3, // default: 0.3
   keyBindings: [
     {action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S
     {action: "faster", key: 68, value: 0.1, force: false, predefined: true}, // D
@@ -151,6 +152,7 @@ function save_options() {
   var rememberSpeed = document.getElementById('rememberSpeed').checked;
   var audioBoolean = document.getElementById('audioBoolean').checked;
   var startHidden = document.getElementById('startHidden').checked;
+  var controllerOpacity = document.getElementById('controllerOpacity').value;
   var blacklist     = document.getElementById('blacklist').value;
 
   displayKeyCode = isNaN(displayKeyCode) ? tcDefaults.displayKeyCode : displayKeyCode;
@@ -161,6 +163,7 @@ function save_options() {
     rememberSpeed:  rememberSpeed,
     audioBoolean:  audioBoolean,
     startHidden:    startHidden,
+    controllerOpacity:    controllerOpacity,
     keyBindings:    keyBindings,
     blacklist:      blacklist.replace(regStrip,'')
   }, function() {
@@ -180,6 +183,7 @@ function restore_options() {
     document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
     document.getElementById('audioBoolean').checked = storage.audioBoolean;
     document.getElementById('startHidden').checked = storage.startHidden;
+    document.getElementById('controllerOpacity').value = storage.controllerOpacity;
     document.getElementById('blacklist').value = storage.blacklist;
 
     for (let i in storage.keyBindings) {

shadow.css

@@ -22,7 +22,6 @@
 
   cursor: default;
   z-index: 9999999;
-  opacity: 0.3;
 }
 
 #controller:hover {