Add ability to enable/disable from toolbar (igrigorik#528)

* Add ability to enable/disable from toolbar
codebicycle · Oct 18, 2019 · c3f44db · c3f44db
1 parent a01f397
commit c3f44db
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 19 deletions.
diff --git a/icons/icon19_disabled.png b/icons/icon19_disabled.png
diff --git a/icons/icon38_disabled.png b/icons/icon38_disabled.png
diff --git a/icons/icon48_disabled.png b/icons/icon48_disabled.png
diff --git a/inject.js b/inject.js
@@ -3,6 +3,7 @@
   var tc = {
     settings: {
       lastSpeed: 1.0,       // default 1x
+      enabled: true,        // default enabled
       speeds: {},           // empty object to hold speed for each source
 
       displayKeyCode: 86,   // default: V
@@ -77,6 +78,7 @@
         rememberSpeed: tc.settings.rememberSpeed,
         audioBoolean: tc.settings.audioBoolean,
         startHidden: tc.settings.startHidden,
+        enabled: tc.settings.enabled,
         controllerOpacity: tc.settings.controllerOpacity,
         blacklist: tc.settings.blacklist.replace(regStrip, '')
       });
@@ -85,6 +87,7 @@
     tc.settings.displayKeyCode = Number(storage.displayKeyCode);
     tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
     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.blacklist = String(storage.blacklist);
@@ -309,6 +312,7 @@
     }
   }
   function initializeNow(document) {
+      if (!tc.settings.enabled) return;
       // enforce init-once due to redundant callers
       if (!document.body || document.body.classList.contains('vsc-initialized')) {
         return;

diff --git a/options.html b/options.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title>Video Speed Controller: Options</title>
-		<link rel="stylesheet" href="options.css" />
-		<script src="options.js"></script>
-	</head>
-	<body>
-		<header>
-			<h1>Video Speed Controller</h1>
-		</header>
+    <head>
+        <title>Video Speed Controller: Options</title>
+        <link rel="stylesheet" href="options.css" />
+        <script src="options.js"></script>
+    </head>
+    <body>
+        <header>
+            <h1>Video Speed Controller</h1>
+        </header>
 
     <section id="customs">
       <h3>Shortcuts</h3>
@@ -81,26 +81,30 @@ <h3>Shortcuts</h3>
     </section>
 
     <section>
-            <h3>Other</h3>
-		<div class="row">
+      <h3>Other</h3>
+      <div class="row">
+        <label for="enabled">Enabled</label>
+        <input id="enabled" type="checkbox"/>
+      </div>
+      <div class="row">
         <label for="startHidden">Hide controller by default</label>
         <input id="startHidden" type="checkbox"/>
       </div>
       <div class="row">
-          <label for="rememberSpeed">Remember Playback Speed</label>
-          <input id="rememberSpeed" type="checkbox"/>
+        <label for="rememberSpeed">Remember Playback Speed</label>
+        <input id="rememberSpeed" type="checkbox"/>
       </div>
       <div class="row">
-          <label for="audioBoolean">Work on audio</label>
-          <input id="audioBoolean" type="checkbox"/>
+        <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="">
+        <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>
+        <label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label>
+        <textarea id="blacklist" rows="10" cols="50"></textarea>
       </div>
     </section>
 

diff --git a/options.js b/options.js
@@ -6,6 +6,7 @@ var tcDefaults = {
   rememberSpeed: false, // default: false
   audioBoolean: false, // default: false
   startHidden: false,   // default: false
+  enabled: true,        // default enabled
   controllerOpacity: 0.3, // default: 0.3
   keyBindings: [
     {action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S
@@ -168,6 +169,7 @@ function save_options() {
   var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
   var rememberSpeed = document.getElementById('rememberSpeed').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;
@@ -179,6 +181,7 @@ function save_options() {
     displayKeyCode: displayKeyCode,
     rememberSpeed:  rememberSpeed,
     audioBoolean:  audioBoolean,
+    enabled:  enabled,
     startHidden:    startHidden,
     controllerOpacity:    controllerOpacity,
     keyBindings:    keyBindings,
@@ -199,6 +202,7 @@ function restore_options() {
     updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
     document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
     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('blacklist').value = storage.blacklist;

diff --git a/popup.css b/popup.css
@@ -27,3 +27,7 @@ button {
   font-size: 0.95em;
   margin: 0.15em 0;
 }
+
+.hide {
+  display: none;
+}
diff --git a/popup.html b/popup.html
@@ -6,6 +6,10 @@
     <script src="popup.js"></script>
   </head>
   <body>
+    <button id="enable" class="hide">Enable</button>
+    <button id="disable">Disable</button>
+    <span id="status" class="hide"></span>
+    <hr />
     <button id="config">Settings</button>
     <hr />
     <button id="feedback" class="secondary">Send feedback</button>

diff --git a/popup.js b/popup.js
@@ -10,4 +10,49 @@ document.addEventListener('DOMContentLoaded', function () {
   document.querySelector('#feedback').addEventListener('click', function() {
     window.open("https://github.com/igrigorik/videospeed/issues");
   });
+
+  document.querySelector('#enable').addEventListener('click', function() {
+      toggleEnabled(true, settingsSavedReloadMessage);
+  });
+
+  document.querySelector('#disable').addEventListener('click', function() {
+      toggleEnabled(false, settingsSavedReloadMessage);
+  });
+
+  chrome.storage.sync.get({enabled: true}, function(storage) {
+    toggleEnabledUI(storage.enabled);
+  });
+
+  function toggleEnabled(enabled, callback){
+    chrome.storage.sync.set({
+      enabled: enabled,
+    }, function() {
+      toggleEnabledUI(enabled);
+      if(callback) callback(enabled);
+    });
+  }
+
+  function toggleEnabledUI(enabled){
+    document.querySelector('#enable').classList.toggle("hide", enabled);
+    document.querySelector('#disable').classList.toggle("hide", !enabled);
+
+    const suffix = `${(enabled ? "" : "_disabled")}.png`
+    chrome.browserAction.setIcon({
+      "path": {
+        "19": "icons/icon19" + suffix,
+        "38": "icons/icon38" + suffix,
+        "48": "icons/icon48" + suffix
+      }
+    });
+  }
+
+  function settingsSavedReloadMessage(enabled){
+    setStatusMessage(`${enabled ? "Enabled" : "Disabled"}. Reload page to see changes`);
+  }
+
+  function setStatusMessage(str){
+    const status_element = document.querySelector('#status')
+    status_element.classList.toggle("hide", false);
+    status_element.innerText = str;
+  }
 });