Popup is now approximately functional

js/conf/Settings.js

@@ -132,11 +132,26 @@ canStartExtension = function(site) {
     site = window.location.hostname;
   }
   
+  console.log("CAN WE START THIS EXTENSION ON SITE", site,
+              "?\n\nExtensionConf.sites[site]=",ExtensionConf.sites[site],
+              "\nExtension mode?", ExtensionConf.extensionMode
+            );
+
   if (ExtensionConf.sites[site] === undefined) {
-    return ExtensionConf.arDetect.mode === "blacklist"; // site not defined, this does default option
+    return ExtensionConf.extensionMode === "blacklist"; // site not defined, this does default option
   }
 
-  if (ExtensionConf.arDetect.mode === "blacklist") {
+  if (ExtensionConf.extensionMode === "blacklist") {
+    console.log("Extension mode is 'blacklist', returning true unless disabled. Ret:", ExtensionConf.sites[site].status !== "disabled");
+  } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
+    console.log("Extension mode set to 'whitelist, returning true only if enabled", ExtensionConf.sites[site].status === "enabled");
+  } else {
+    console.log("Extension is not even enabled globally");
+    return false;
+  }
+
+
+  if (ExtensionConf.extensionMode === "blacklist") {
     return ExtensionConf.sites[site].status !== "disabled";
   } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
     return ExtensionConf.sites[site].status === "enabled";

js/lib/Comms.js

@@ -148,8 +148,8 @@ class CommsServer {
   }
 
   sendToAll(message){
-    for(p of this.ports){
+    for(var p of this.ports){
-      for(frame in p){
+      for(var frame in p){
         p[frame].postMessage(message);
       }
     }
@@ -266,18 +266,41 @@ class CommsServer {
       Settings.save(ExtensionConf);
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
     } else if (message.cmd === "set-autoar-for-site") {
+      if (ExtensionConf.sites[this.server.currentSite]) {
         ExtensionConf.sites[this.server.currentSite].arStatus = message.mode;
         Settings.save(ExtensionConf);
+      } else {
+        ExtensionConf.sites[this.server.currentSite] = {
+          status: "default",
+          arStatus: message.mode,
+          statusEmbedded: "default"
+        };
+        Settings.save(ExtensionConf);
+      }
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"});
     } else if (message.cmd === "set-extension-defaults") {
-      ExtensionConf.mode = message.mode;
+      ExtensionConf.extensionMode = message.mode;
       Settings.save(ExtensionConf);
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
     } else if (message.cmd === "set-extension-for-site") {
+      if (ExtensionConf.sites[this.server.currentSite]) {
         ExtensionConf.sites[this.server.currentSite].status = message.mode;
         Settings.save(ExtensionConf);
+      } else {
+        ExtensionConf.sites[this.server.currentSite] = {
+          status: message.mode,
+          arStatus: "default",
+          statusEmbedded: message.mode
+        };
+        Settings.save(ExtensionConf);        
+        console.log("SAVING PER-SITE OPTIONS,", this.server.currentSite, ExtensionConf.sites[this.server.currentSite])
+      }
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"});
     }
+
+    if (message.cmd.startsWith('set-')) {
+      port.postMessage({cmd: "set-config", conf: ExtensionConf, site: this.server.currentSite});
+    }
   }
 
   processReceivedMessage_nonpersistent_ff(message, sender){

manifest.json

@@ -15,12 +15,13 @@
     "js": [ 
     "js/conf/Debug.js",
 
-    "js/run/GlobalVars.js",
     "js/lib/BrowserDetect.js",
+    "js/conf/ExtensionConf.js",    
+
+    "js/run/GlobalVars.js",
     "js/lib/StorageManager.js",
     "js/lib/Comms.js",
     
-    "js/conf/ExtensionConf.js",    
     "js/conf/Settings.js",
     "js/conf/SitesConf.js",
     "js/conf/Status.js",
@@ -50,12 +51,13 @@
   "background": {
     "scripts": [
     "js/conf/Debug.js",
-      
     "js/lib/BrowserDetect.js",
+
+    "js/conf/ExtensionConf.js",
+    
     "js/lib/StorageManager.js",
     "js/lib/Comms.js",
     
-    "js/conf/ExtensionConf.js",
     "js/conf/Settings.js",
     "js/conf/SitesConf.js",
     "js/conf/Status.js",

res/popup/js/popup.js

@@ -21,16 +21,24 @@ MenuTab.about      = document.getElementById("_menu_about");
 MenuTab.autoAr     = document.getElementById("_menu_autoar");
 
 var ExtPanel = {};
+ExtPanel.globalOptions = {};
+ExtPanel.globalOptions.blacklist = document.getElementById("_ext_global_options_blacklist");
+ExtPanel.globalOptions.whitelist = document.getElementById("_ext_global_options_whitelist");
+ExtPanel.globalOptions.disabled  = document.getElementById("_ext_global_options_disabled");
 ExtPanel.siteOptions = {};
 ExtPanel.siteOptions.disabled = document.getElementById("_ext_site_options_blacklist");
 ExtPanel.siteOptions.enabled  = document.getElementById("_ext_site_options_whitelist");
 ExtPanel.siteOptions.default  = document.getElementById("_ext_site_options_default");
 
 var AutoArPanel = {};
+AutoArPanel.globalOptions = {};
+AutoArPanel.globalOptions.blacklist = document.getElementById("_ar_global_options_blacklist");
+AutoArPanel.globalOptions.whitelist = document.getElementById("_ar_global_options_whitelist");
+AutoArPanel.globalOptions.disabled  = document.getElementById("_ar_global_options_disabled");
 AutoArPanel.siteOptions = {};
-AutoArPanel.siteOptions.disabled = document.getElementById("_ext_site_options_blacklist");
+AutoArPanel.siteOptions.disabled = document.getElementById("_ar_site_options_blacklist");
-AutoArPanel.siteOptions.enabled  = document.getElementById("_ext_site_options_whitelist");
+AutoArPanel.siteOptions.enabled  = document.getElementById("_ar_site_options_whitelist");
-AutoArPanel.siteOptions.default  = document.getElementById("_ext_site_options_default");
+AutoArPanel.siteOptions.default  = document.getElementById("_ar_site_options_default");
 
 var ArPanel = {};
 ArPanel.alignment = {};
@@ -86,35 +94,42 @@ function loadConfig(extensionConf, site){
 
   // ----------------------
   //#region extension-basics - SET BASIC EXTENSION OPTIONS
-  if(Debug.debug)
-    console.log("Extension mode?", extensionConf.extensionMode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].status : "fucky wucky?");
-  document.getElementById("_checkbox_ext-enabled").checked = extensionConf.extensionMode !== "disabled";
-  document.getElementById("_checkbox_ext-whitelist").checked = extensionConf.extensionMode === "whitelist";  
 
+  for(var button in ExtPanel.globalOptions) {
+    ExtPanel.globalOptions[button].classList.remove("selected");
+  }
   for(var button in ExtPanel.siteOptions) {
     ExtPanel.siteOptions[button].classList.remove("selected");
   }
 
+  ExtPanel.globalOptions[extensionConf.extensionMode].classList.add("selected");
   if(site && extensionConf.sites[site]) {
     ExtPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
+  } else {
+    ExtPanel.siteOptions.default.classList.add("selected");
   }
   //#endregion extension-basics
   //
   // ------------
   //#region autoar - SET AUTOAR OPTIONS
-  if(Debug.debug)
+  // if(Debug.debug)
-    console.log("Autodetect mode?", extensionConf.arDetect.mode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].arStatus : "fucky wucky?" );
+  //   console.log("Autodetect mode?", extensionConf.arDetect.mode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].arStatus : "fucky wucky?" );
-  document.getElementById("_checkbox_autoArEnabled").checked = extensionConf.arDetect.mode !== "disabled";
+  // document.getElementById("_autoAr_disabled_reason").textContent = extensionConf.arDetect.DisabledReason;
-  document.getElementById("_checkbox_autoar-whitelist").checked = extensionConf.arDetect.mode === "whitelist";  
-  document.getElementById("_autoAr_disabled_reason").textContent = extensionConf.arDetect.DisabledReason;
   document.getElementById("_input_autoAr_timer").value = extensionConf.arDetect.timer_playing;
 
+
+  for(var button in AutoArPanel.globalOptions) {
+    AutoArPanel.globalOptions[button].classList.remove("selected");
+  }
   for(var button in AutoArPanel.siteOptions) {
     AutoArPanel.siteOptions[button].classList.remove("selected");
   }
 
+  AutoArPanel.globalOptions[extensionConf.arDetect.mode].classList.add("selected");
   if(site && extensionConf.sites[site]) {
     AutoArPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
+  } else {
+    AutoArPanel.siteOptions.default.classList.add("selected");
   }
   //#endregion
 
@@ -315,29 +330,16 @@ document.addEventListener("click", (e) => {
     }
     if(e.target.classList.contains("_ext")) {
       var command = {};
-      if(e.target.classList.contains("_ext_enabled")){
+      if(e.target.classList.contains("_ext_global_options")){
-        var extStatus = document.getElementById("_checkbox_ext-enabled").checked;
+        command.cmd = "set-extension-defaults";
-        var whitelist = document.getElementById("_checkbox_ext-whitelist").checked;
+        if (e.target.classList.contains("_blacklist")) {
-
+          command.mode = "blacklist";
-        // if extension is set to disabled, we also disable 'whitelist only' checkbox
+        } else if (e.target.classList.contains("_whitelist")) {
-        document.getElementById("_checkbox_ext-whitelist").disabled = !extStatus;
+          command.mode = "whitelist";
-
+        } else {
-        return {
+          command.mode = "disabled";
-          cmd: "set-extension-defaults",
+        }
-          mode: getMode(extStatus, whitelist),
+        return command;
-          sender: "popup",
-          receiver: "uwbg"
-        };
-      } else if (e.target.classList.contains("_ext_whitelist-only")) {
-        var extStatus = document.getElementById("_checkbox_ext-enabled").checked;
-        var whitelist = document.getElementById("_checkbox_ext-whitelist").checked;
-
-        return {
-          cmd: "set-extension-defaults",
-          mode: getMode(extStatus, whitelist),
-          sender: "popup",
-          receiver: "uwbg"
-        };
       } else if (e.target.classList.contains("_ext_site_options")) {
         command.cmd = "set-extension-for-site";
         if(e.target.classList.contains("_blacklist")){
@@ -411,23 +413,25 @@ document.addEventListener("click", (e) => {
     if(e.target.classList.contains("_autoAr")){
 
       var command = {};
-      if(e.target.classList.contains("_autoAr_enabled")){
+      if(e.target.classList.contains("_ext_global_options")){
-        var arStatus = document.getElementById("_checkbox_autoArEnabled").checked;
+        command.cmd = "set-autoar-defaults";
-        var whitelist = document.getElementById("_checkbox_autoar-whitelist").checked;
+        if (e.target.classList.contains("_blacklist")) {
-
+          command.mode = "blacklist";
-        // if autoar is set to disabled, we also disable 'whitelist only' checkbox
+        } else if (e.target.classList.contains("_whitelist")) {
-        document.getElementById("_checkbox_autoar-whitelist").disabled = !arStatus;
+          command.mode = "whitelist";
-
+        } else {
-        return {
+          command.mode = "disabled";
-          cmd: "set-autoar-defaults",
+        }
-          mode: getMode(arStatus, whitelist),
+        return command;
-          sender: "popup",
-          receiver: "uwbg"
-        };
       } else if (e.target.classList.contains("_autoAr_whitelist-only")) {
-        var arStatus = document.getElementById("_checkbox_autoArEnabled").checked;        
+        var arStatus = document.getElementById("_checkbox_autoar-enabled").checked;        
         var whitelist = document.getElementById("_checkbox_autoar-whitelist").checked;
 
+
+        if(Debug.debug) {
+          console.log("CHANGED CHECKMARK IN _AR-WHTIELIST:", extStatus, whitelist)
+        }
+
         return {
           cmd: "set-autoar-mode",
           mode: getMode(arStatus, whitelist),

res/popup/popup.html

@@ -209,11 +209,15 @@
       
       <div id="settings-for-current-site" class="suboption hidden">
         <div class="warn">Some settings will only apply after reload. Settings don't apply to videos embedded from other sites.</div>
-        <p>
+        
-          <input type="checkbox" id="_checkbox_ext-enabled" class="_ext _ext_enabled"> Enable this extension<br/>
+        <div class="row">
-          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
+          <span class="label">Enable this extension:</span>
-          <input type="checkbox" id="_checkbox_ext-whitelist" class="_ext _ext_whitelist-only"> Only on whitelisted sites
+          <div class="button-row">
-        </p>
+            <a id="_ext_global_options_blacklist" class="button _ext _ext_global_options _blacklist">Always</a>
+            <a id="_ext_global_options_whitelist" class="button _ext _ext_global_options _whitelist">On whitelisted sites</a>
+            <a id="_ext_global_options_disabled"  class="button _ext _ext_global_options _disabled" >Never</a>
+          </div>
+        </div>
 
         <div class="row">
           <span class="label">Options for this site:</span>
@@ -226,11 +230,16 @@
       </div>
       
       <div id="autoar-basic-settings" class="suboption hidden">
-        <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/>
+          <div class="row">
-          <input type="checkbox" id="_checkbox_autoArEnabled" class="_autoAr _autoAr_enabled"> Enable automatic aspect ratio detection<br/>
+            <span class="label">Enable autodetection:</span>
-          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
+            <div class="button-row">
-          <input type="checkbox" id="_checkbox_autoar-whitelist" class="_autoAr _autoAr_whitelist-only"> Only on whitelisted sites
+              <a id="_ar_global_options_blacklist" class="button _autoAr _ar_global_options _blacklist">Always</a>
-        </p>
+              <a id="_ar_global_options_whitelist" class="button _autoAr _ar_global_options _whitelist">On whitelisted sites</a>
+              <a id="_ar_global_options_disabled"  class="button _autoAr _ar_global_options _disabled" >Never</a>
+            </div>
+          </div>
+          <!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
+
         <p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span class="button _save_autoAr_frequency _autoAr">Save</span></p>
         
         <div class="row">