From ea8672132151f02b741f93480e7e8bec2754987b Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 27 Jun 2018 23:55:37 +0200
Subject: [PATCH] Fixed some minor bugs, rewrote some bits of the popup

---
 js/conf/Debug.js         |   4 +-
 js/conf/ExtensionConf.js |  37 ++++++++-
 js/conf/Settings.js      |  61 +++++++++++++-
 js/conf/SitesConf.js     |  19 +----
 js/lib/Comms.js          |  34 +++++++-
 js/lib/EdgeDetect.js     |  10 +--
 js/modules/ArDetect.js   |   6 +-
 js/modules/Stretcher.js  |   2 +-
 js/uw-bg.js              |  79 ++++++++++++++----
 js/uw.js                 |  35 ++++----
 res/popup/js/popup.js    | 171 +++++++++++++++++++++++++++++----------
 res/popup/popup.html     |  51 +++++++-----
 12 files changed, 374 insertions(+), 135 deletions(-)

diff --git a/js/conf/Debug.js b/js/conf/Debug.js
index 8fca609..5ebdc0a 100644
--- a/js/conf/Debug.js
+++ b/js/conf/Debug.js
@@ -21,8 +21,8 @@ Debug = {
     debugDetection: true
   },
   debugCanvas: {
-    enabled: true,
-    guardLine: true
+    enabled: false,
+    guardLine: false
   }
 }
 
diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js
index ccfccf3..2d2331c 100644
--- a/js/conf/ExtensionConf.js
+++ b/js/conf/ExtensionConf.js
@@ -20,7 +20,7 @@ var ExtensionConf = {
     timer_error: 3000,
     timer_minimumTimeout: 5,  // but regardless of above, we wait this many msec before retriggering
     autoDisable: {            // settings for automatically disabling the extension
-      maxExecutionTime: 15,   // if execution time of main autodetect loop exceeds this many milliseconds,
+      maxExecutionTime: 6000, // if execution time of main autodetect loop exceeds this many milliseconds,
                               // we disable it.
       consecutiveTimeoutCount: 5  // we only do it if it happens this many consecutive times
     },
@@ -152,5 +152,40 @@ var ExtensionConf = {
       //#endregion
     },
     modKeys: ["ctrlKey", "shiftKey", "altKey"]
+  },
+  // -----------------------------------------
+  //       ::: SITE CONFIGURATION :::
+  // -----------------------------------------
+  // Nastavitve za posamezno stran
+  // Config for a given page:
+  // 
+  // <hostname> : {
+  //    status: <option>              // should extension work on this site?
+  //    arStatus: <option>            // should we do autodetection on this site?
+  //    statusEmbedded: <option>      // reserved for future... maybe
+  // } 
+  //  
+  // Veljavne vrednosti za možnosti 
+  // Valid values for options:
+  //
+  //     status, arStatus, statusEmbedded:
+  //    
+  //    * enabled     — always allow
+  //    * default     — allow if default is to allow, block if default is to block
+  //    * disabled    — never allow
+  // 
+  sites: {
+    "www.youtube.com" : {
+      status: "enabled",                // should extension work on this site?
+      arStatus: "default",              // should we enable autodetection
+      statusEmbedded: "enabled",        // should extension work for this site when embedded on other sites?
+      override: true                   // ignore value localStorage in favour of this
+    },
+    "www.netflix.com" : {
+      status: "enabled",
+      arStatus: BrowserDetect.firefox ? "default" : "disabled",
+      statusEmbedded: "enabled",
+      override: true
+    },
   }
 }
diff --git a/js/conf/Settings.js b/js/conf/Settings.js
index 2bcef34..911fbba 100644
--- a/js/conf/Settings.js
+++ b/js/conf/Settings.js
@@ -63,8 +63,8 @@ var _se_init = async function(isSlave){
 var _se_patchUserSettings = function(saved, extDefaults){
   for(var k in extDefaults){
     if(extDefaults[k] != null && typeof extDefaults[k] === 'object' && extDefaults[k].constructor === Object){
-      if(typeof saved[k] !== 'object' || saved[k].constructor !== Object)
-        continue;
+      if(typeof saved[k] !== 'object' || saved[k].constructor !== Object || extDefaults[k].override === true)
+        continue;   // if user's settings are wrong or if override flag is set, we keep value in extDefaults
       
       _se_patchUserSettings(saved[k], extDefaults[k]);
     }
@@ -105,3 +105,60 @@ var Settings = {
   save: _se_save,
   reload: _se_reload,
 }
+
+
+// -----------------------------------------
+// Nastavitve za posamezno stran
+// Config for a given page:
+// 
+// <hostname> : {
+//    status: <option>              // should extension work on this site?
+//    arStatus: <option>            // should we do autodetection on this site?
+//    statusEmbedded: <option>      // reserved for future... maybe
+// } 
+//  
+// Veljavne vrednosti za možnosti 
+// Valid values for options:
+//
+//     status, arStatus, statusEmbedded:
+//    
+//    * enabled     — always allow
+//    * default     — allow if default is to allow, block if default is to block
+//    * disabled    — never allow
+// 
+
+canStartExtension = function(site) {
+  if(site === undefined) {
+    site = window.location.hostname;
+  }
+  
+  if (ExtensionConf.sites[site] === undefined) {
+    return ExtensionConf.arDetect.mode === "blacklist"; // site not defined, this does default option
+  }
+
+  if (ExtensionConf.arDetect.mode === "blacklist") {
+    return ExtensionConf.sites[site].status !== "disabled";
+  } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
+    return ExtensionConf.sites[site].status === "enabled";
+  } else {
+    return false;
+  }
+}
+
+canStartAutoAr = function(site) {
+  if(site === undefined) {
+    site = window.location.hostname;
+  }
+
+  if (ExtensionConf.sites[site] === undefined) {
+    return ExtensionConf.arDetect.mode === "blacklist"; // site not defined, this does default option
+  }
+  
+  if (ExtensionConf.arDetect.mode === "blacklist") {
+    return ExtensionConf.sites[site].arStatus !== "disabled";
+  } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
+    return ExtensionConf.sites[site].arStatus === "enabled";
+  } else {
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/js/conf/SitesConf.js b/js/conf/SitesConf.js
index 21ee71b..c380432 100644
--- a/js/conf/SitesConf.js
+++ b/js/conf/SitesConf.js
@@ -2,24 +2,7 @@ if(Debug.debug){
   console.log("Loading: SitesConf.js");
 }
 
-// Nastavitve za posamezno stran
-// Config for a given page:
-// 
-// <hostname> : {
-//    status: <option>              // should extension work on this site?
-//    arStatus: <option>            // should we do autodetection on this site?
-//    statusEmbedded: <option>      // should we do autodetection on this site?
-// } 
-//  
-// Veljavne vrednosti za možnosti 
-// Valid values for options:
-//
-//     status, arStatus, statusEmbedded:
-//    
-//    * whitelisted     — always allow
-//    * follow-global   — allow if default is to allow, block if default is to block
-//    * blacklisted     — never allow
-// 
+
 
 var _sc_sites = {
   "www.youtube.com" : {
diff --git a/js/lib/Comms.js b/js/lib/Comms.js
index a3a22b3..0183720 100644
--- a/js/lib/Comms.js
+++ b/js/lib/Comms.js
@@ -27,6 +27,7 @@ class CommsClient {
     } else if (message.cmd === "set-config") {
       this.hasSettings = true;
       ExtensionConf = message.conf;
+      // this.pageInfo.reset();
     } else if (message.cmd === "set-stretch") {
       this.pageInfo.setStretchMode(StretchMode[message.mode]);
     } else if (message.cmd === "autoar-start") {
@@ -44,6 +45,11 @@ class CommsClient {
     } else if (message.cmd === "reload-settings") {
       ExtensionConf = message.newConf;
       this.pageInfo.reset();
+      if(ExtensionConf.arDetect.mode === "disabled") {
+        this.pageInfo.stopArDetection();
+      } else {
+        this.pageInfo.startArDetection();
+      }
     }
   }
 
@@ -137,6 +143,10 @@ class CommsServer {
     }
   }
 
+  async getCurrentTabUrl() {
+
+  }
+
   sendToAll(message){
     for(p of this.ports){
       for(frame in p){
@@ -216,21 +226,21 @@ class CommsServer {
     }
 
     if (message.cmd === 'get-config') {
-      port.postMessage({cmd: "set-config", conf: ExtensionConf})
+      port.postMessage({cmd: "set-config", conf: ExtensionConf, site: this.server.currentSite})
     } else if (message.cmd === 'set-stretch') {
       this.sendToActive(message);
     } else if (message.cmd === 'set-ar') {
       this.sendToActive(message);
     } else if (message.cmd === 'autoar-start') {
       this.sendToActive(message);
-    } else if (message.cmd === "autoar-enable") {
+    } else if (message.cmd === "autoar-enable") {   // LEGACY - can be removed prolly?
       ExtensionConf.arDetect.mode = "blacklist";
       Settings.save(ExtensionConf);
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
       if(Debug.debug){
         console.log("[uw-bg] autoar set to enabled (blacklist). evidenz:", ExtensionConf);
       }
-    } else if (message.cmd === "autoar-disable") {
+    } else if (message.cmd === "autoar-disable") {  // LEGACY - can be removed prolly?
       ExtensionConf.arDetect.mode = "disabled";
       if(message.reason){
         ExtensionConf.arDetect.disabledReason = message.reason;
@@ -251,6 +261,22 @@ class CommsServer {
       ExtensionConf.arDetect.timer_playing = timeout;
       Settings.save(ExtensionConf);
       this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
+    } else if (message.cmd === "set-autoar-defaults") {
+      ExtensionConf.arDetect.mode = message.mode;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
+    } else if (message.cmd === "set-autoar-for-site") {
+      ExtensionConf.sites[this.server.currentSite].arStatus = message.mode;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: "reload-settings", sender: "uwbg"});
+    } else if (message.cmd === "set-extension-defaults") {
+      ExtensionConf.mode = message.mode;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
+    } else if (message.cmd === "set-extension-for-site") {
+      ExtensionConf.sites[this.server.currentSite].status = message.mode;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: "reload-settings", sender: "uwbg"});
     }
   }
 
@@ -302,7 +328,7 @@ class CommsServer {
     }
 
     if(message.cmd === 'get-config') {
-      sendResponse({extensionConf: JSON.stringify(ExtensionConf)});
+      sendResponse({extensionConf: JSON.stringify(ExtensionConf), site: getCurrentTabUrl()});
       // return true;
     } else if (message.cmd === "autoar-enable") {
       ExtensionConf.arDetect.mode = "blacklist";
diff --git a/js/lib/EdgeDetect.js b/js/lib/EdgeDetect.js
index c9e4792..aa67739 100644
--- a/js/lib/EdgeDetect.js
+++ b/js/lib/EdgeDetect.js
@@ -178,7 +178,7 @@ class EdgeDetect{
       if(Debug.debugCanvas.enabled) {
         this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.top, edgeCandidatesTop)
       } else {
-        this._imageTest(image, start, end, sample.top, edgeCandidatesTop)
+        this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.top, edgeCandidatesTop)
       }
     }
     
@@ -220,7 +220,7 @@ class EdgeDetect{
       if(Debug.debugCanvas.enabled) {
         this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.bottom, edgeCandidatesBottom);
       } else {
-        this._imageTest(image, start, end, sample.bottom, edgeCandidatesBottom);
+        this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.bottom, edgeCandidatesBottom);
       }
     }
     
@@ -510,7 +510,7 @@ class EdgeDetect{
               col: col,
               top: (i / this.conf.canvasImageDataRowLength) - 1
             });
-            colsIn.splice(cols_a.indexOf(col), 1);
+            colsIn.splice(colsIn.indexOf(col), 1);
           }
         }
         if(colsIn.length < this.colsTreshold)
@@ -577,7 +577,7 @@ class EdgeDetect{
   }
 
   _blackbarTest(image, start, end){
-    for(var i = sampleRow_black + sampleStart; i < loopEnd; i += 4){
+    for(var i = start; i < end; i += 4){
       if( image[i  ] > this.blackbarTreshold ||
           image[i+1] > this.blackbarTreshold ||
           image[i+2] > this.blackbarTreshold ){
@@ -612,7 +612,7 @@ class EdgeDetect{
         ++detections;
         }
     }
-    if(detections >= detectionTreshold){
+    if(detections >= this.detectionTreshold){
       if(edgeCandidates[sampleOffset] != undefined)
         edgeCandidates[sampleOffset].count++;
       else{
diff --git a/js/modules/ArDetect.js b/js/modules/ArDetect.js
index 8ff2c09..2c5d60e 100644
--- a/js/modules/ArDetect.js
+++ b/js/modules/ArDetect.js
@@ -27,7 +27,7 @@ class ArDetector {
     this.debugCanvas.destroy();
   }
 
-  setup(cwidth, cheight){
+  setup(cwidth, cheight, forceStart){
     
     this.guardLine = new GuardLine(this);
     this.edgeDetector = new EdgeDetect(this);
@@ -141,7 +141,9 @@ class ArDetector {
       this.canvasImageDataRowLength = cwidth << 2;
       this.noLetterboxCanvasReset = false;
       
-      this.start();
+      if(forceStart || canStartAutoAr() ) {
+        this.start();
+      }
     }
     catch(ex){
       console.log(ex);
diff --git a/js/modules/Stretcher.js b/js/modules/Stretcher.js
index f690cc9..b0793cd 100644
--- a/js/modules/Stretcher.js
+++ b/js/modules/Stretcher.js
@@ -105,7 +105,7 @@ class Stretcher {
       } else {
         // NEEDS CHECKING
         // player > video > actual — double pillarbox
-        stretchFactors.xFactor = playerAr / actualAr;
+        stretchFactors.xFactor = actualAr /  playerAr;
         stretchFactors.yFactor = 1;
         
         if(Debug.debug){
diff --git a/js/uw-bg.js b/js/uw-bg.js
index 2e4d966..35bce0f 100644
--- a/js/uw-bg.js
+++ b/js/uw-bg.js
@@ -5,34 +5,81 @@ var BgVars = {
 }
 
 class UWServer {
+
   constructor() {
     this.ports = [];
-
+    this.arIsActive = true;
+    this.hasVideos = false;
+    this.currentSite = "";
     this.setup();
   }
 
   async setup() {
     await Settings.init();
-    this.comms = new CommsServer(this);  
+    this.comms = new CommsServer(this);
+
+
+    var ths = this;
+    if(BrowserDetect.firefox) {
+      browser.tabs.onActivated.addListener((m) => ths.onTabSwitched(m));  
+    } else if (BrowserDetect.chrome) {
+      chrome.tabs.onActivated.addListener((m) => ths.onTabSwitched(m));
+    }
   }
+
+  async _promisifyTabsGet(browserObj, tabId){
+    return new Promise( (resolve, reject) => {
+      browserObj.tabs.get(tabId, (tab) => resolve(tab));
+    });
+  }
+
+  extractHostname(url){
+    var hostname;
+    
+    // extract hostname  
+    if (url.indexOf("://") > -1) {    //find & remove protocol (http, ftp, etc.) and get hostname
+      hostname = url.split('/')[2];
+    }
+    else {
+      hostname = url.split('/')[0];
+    }
+    
+    hostname = hostname.split(':')[0];   //find & remove port number
+    hostname = hostname.split('?')[0];   //find & remove "?"
+    
+    return hostname;
+  }
+
+  async onTabSwitched(activeInfo){
+    this.hasVideos = false;
+
+    if(Debug.debug)
+      console.log("[uw-bg::onTabSwitched] TAB CHANGED, GETTING INFO FROM MAIN TAB");
+
+    try {
+    var tabId = activeInfo.tabId;   // just for readability
+
+    var tab;
+    if (BrowserDetect.firefox) {
+      var tab = await browser.tabs.get(tabId);
+    } else if (BrowserDetect.chrome) {
+      var tab = await this._promisifyTabsGet(chrome, tabId);
+    }
+
+    this.currentSite = this.extractHostname(tab.url);
+    } catch(e) {
+      console.log(e);
+    }
+
+    console.log("TAB SWITCHED!", this.currentSite)
+    //TODO: change extension icon based on whether there's any videos on current page
+  }
+
 }
 
 var server = new UWServer();
 
-// function extractHostname(url){
-//   // extract hostname  
-//   if (url.indexOf("://") > -1) {    //find & remove protocol (http, ftp, etc.) and get hostname
-//     hostname = url.split('/')[2];
-//   }
-//   else {
-//     hostname = url.split('/')[0];
-//   }
-  
-//   hostname = hostname.split(':')[0];   //find & remove port number
-//   hostname = hostname.split('?')[0];   //find & remove "?"
-  
-//   return hostname;
-// }
+
 
 // async function main(){
 //   if(Debug.debug)
diff --git a/js/uw.js b/js/uw.js
index a9a80df..7768a78 100644
--- a/js/uw.js
+++ b/js/uw.js
@@ -23,36 +23,31 @@ async function init(){
   comms = new CommsClient('content-client-port');
 
   // load settings
-  // var isSlave = true;
-  // await Settings.init(isSlave);
   var settingsLoaded = await comms.requestSettings();
   if(!settingsLoaded){
-    console.log("[uw::main] failed to get settings (settingsLoaded=",settingsLoaded,") Waiting for settings the old fashioned way");
+    if(Debug.debug) {
+      console.log("[uw::main] failed to get settings (settingsLoaded=",settingsLoaded,") Waiting for settings the old fashioned way");
+    }
     comms.requestSettings_fallback();
     await comms.waitForSettings();
-    console.log("[uw::main] settings loaded.");
+    if(Debug.debug){
+      console.log("[uw::main] settings loaded.");
+    }
   }
-  // await Settings.init();
-
-  // za sporočilca poslušamo v vsakem primeru, tudi če je razširitev na spletnem mestu onemogočena
-  // we listen for messages in any case, even if extension is disabled on current site. 
-  // browser.runtime.onMessage.addListener(receiveMessage);  
-
-  // await SitesConf.init();
-  // če je trenutno mesto onemogočeno, potem zaključimo na tem mestu
-  // if current site is disabled, we quit here
-  
-  // if(! SitesConf.isEnabled(window.location.hostname)){
-  //   if(Debug.debug)
-  //     console.log("[uw:main] | site", window.location.hostname, "is blacklisted.");
-
-  //   return;
-  // } 
 
   if(Debug.debug)
     console.log("[uw::main] configuration should be loaded now");
 
   
+  // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar
+  // If extension is soft-disabled, don't do shit
+  if(! canStartExtension()){
+    if(Debug.debug) {
+      console.log("[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED")
+    }
+    return;
+  }
+
   pageInfo = new PageInfo();
   comms.setPageInfo(pageInfo);
 
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index d4e8281..ed41de0 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -20,16 +20,24 @@ MenuTab.cssHacks   = document.getElementById("_menu_hacks");
 MenuTab.about      = document.getElementById("_menu_about");
 MenuTab.autoAr     = document.getElementById("_menu_autoar");
 
-var ArPanel = {}
+var ExtPanel = {};
+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.siteOptions = {};
+AutoArPanel.siteOptions.disabled = document.getElementById("_ext_site_options_blacklist");
+AutoArPanel.siteOptions.enabled  = document.getElementById("_ext_site_options_whitelist");
+AutoArPanel.siteOptions.default  = document.getElementById("_ext_site_options_default");
+
+var ArPanel = {};
 ArPanel.alignment = {};
 ArPanel.alignment.left   = document.getElementById("_align_left");
 ArPanel.alignment.center = document.getElementById("_align_center");
 ArPanel.alignment.right  = document.getElementById("_align_right");
 ArPanel.autoar = {};
-ArPanel.autoar.enable      = document.getElementById("_autoar_enable");
-ArPanel.autoar.disable     = document.getElementById("_autoar_disable");
-ArPanel.autoar.enable_tmp  = document.getElementById("_autoar_enable_tmp");
-ArPanel.autoar.disable_tmp = document.getElementById("_autoar_disable_tmp");
 
 
 var selectedMenu = "arSettings";
@@ -44,7 +52,7 @@ port.onMessage.addListener( (m,p) => processReceivedMessage(m,p));
 
 async function processReceivedMessage(message, port){
   if(message.cmd === 'set-config'){
-    this.loadConfig(message.conf);
+    this.loadConfig(message.conf, message.site);
   }
 }
 
@@ -70,17 +78,46 @@ function stringToKeyCombo(key_in){
   return keys_out;
 }
 
-function loadConfig(extensionConf){
+function loadConfig(extensionConf, site){
   if(Debug.debug)
-    console.log("[popup.js::loadConfig] loading config. conf object:", extensionConf);
+    console.log("[popup.js::loadConfig] loading config. conf object:", extensionConf, "\n\n\n\n\n\n\n\n-------------------------------------");
     
   _extensionConf = extensionConf;
 
-  
-  document.getElementById("_checkbox_autoArEnabled").checked = extensionConf.arDetect.mode == "blacklist";
+  // ----------------------
+  //#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.siteOptions) {
+    ExtPanel.siteOptions[button].classList.remove("selected");
+  }
+
+  if(site && extensionConf.sites[site]) {
+    ExtPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
+  }
+  //#endregion extension-basics
+  //
+  // ------------
+  //#region autoar - SET AUTOAR OPTIONS
+  if(Debug.debug)
+    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("_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.siteOptions) {
+    AutoArPanel.siteOptions[button].classList.remove("selected");
+  }
+
+  if(site && extensionConf.sites[site]) {
+    AutoArPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
+  }
+  //#endregion
+
   // process video alignment:
   if(extensionConf.miscFullscreenSettings.videoFloat){
     for(var button in ArPanel.alignment)
@@ -135,9 +172,6 @@ function loadConfig(extensionConf){
     }
   }
   
-  
-  // process aspect ratio settings
-  showArctlButtons();
 
   if(Debug.debug)
     console.log("[popup.js::loadConfig] config loaded");
@@ -235,6 +269,15 @@ function toggleSite(option){
   Comms.sendToBackgroundScript({cmd:"enable-for-site", option:option});
 }
 
+function getMode(isEnabled, whitelistOnly) {
+  if(isEnabled) {
+    return whitelistOnly ? "whitelist" : "blacklist" 
+  } else {
+    return "disabled";
+  }
+}
+
+
 document.addEventListener("click", (e) => {
   
   
@@ -270,7 +313,43 @@ document.addEventListener("click", (e) => {
       // don't send commands
       return;
     }
-    
+    if(e.target.classList.contains("_ext")) {
+      var command = {};
+      if(e.target.classList.contains("_ext_enabled")){
+        var extStatus = document.getElementById("_checkbox_ext-enabled").checked;
+        var whitelist = document.getElementById("_checkbox_ext-whitelist").checked;
+
+        // if extension is set to disabled, we also disable 'whitelist only' checkbox
+        document.getElementById("_checkbox_ext-whitelist").disabled = !extStatus;
+
+        return {
+          cmd: "set-extension-defaults",
+          mode: getMode(extStatus, whitelist),
+          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")){
+          command.mode = "disabled";
+        } else if(e.target.classList.contains("_whitelist")) {
+          command.mode = "enabled";
+        } else {
+          command.mode = "default";
+        }
+        return command;
+      }
+    }
     if(e.target.classList.contains("_changeAr")){
       if(e.target.classList.contains("_ar_auto")){
         command.cmd = "autoar-start";
@@ -330,33 +409,32 @@ document.addEventListener("click", (e) => {
       return command;
     }
     if(e.target.classList.contains("_autoAr")){
-      // var command = {};
-      // if(e.target.classList.contains("_autoar_temp-disable")){
-      //   command = {cmd: "stop-autoar", sender: "popup", receiver: "uwbg"};
-      // }
-      // else if(e.target.classList.contains("_autoar_disable")){
-      //   command = {cmd: "disable-autoar", sender: "popup", receiver: "uwbg"};
-      // }
-      // else if(e.target.classList.contains("_autoar_enable")){
-      //   command = {cmd: "enable-autoar", sender: "popup", receiver: "uwbg"};
-      // }
-      // else{
-      //   command = {cmd: "force-ar", newAr: "auto", sender: "popup", receiver: "uwbg"};
-      // }
-      // _arctl_onclick(command);
-      // return command;
-      console.log("......");
+
       var command = {};
       if(e.target.classList.contains("_autoAr_enabled")){
         var arStatus = document.getElementById("_checkbox_autoArEnabled").checked;
-        
-        // this event fires before the checkbox is checked, therefore arStatus is opposite of what it should be
-        if(! arStatus){
-          return {cmd: "autoar-disable", sender: "popup", receiver: "uwbg"};
-        } else {
-          return {cmd: "autoar-enable", sender: "popup", receiver: "uwbg"};
-        }
-      } else if(e.target.classList.contains("_save_autoAr_frequency")) {
+        var whitelist = document.getElementById("_checkbox_autoar-whitelist").checked;
+
+        // if autoar is set to disabled, we also disable 'whitelist only' checkbox
+        document.getElementById("_checkbox_autoar-whitelist").disabled = !arStatus;
+
+        return {
+          cmd: "set-autoar-defaults",
+          mode: getMode(arStatus, whitelist),
+          sender: "popup",
+          receiver: "uwbg"
+        };
+      } else if (e.target.classList.contains("_autoAr_whitelist-only")) {
+        var arStatus = document.getElementById("_checkbox_autoArEnabled").checked;        
+        var whitelist = document.getElementById("_checkbox_autoar-whitelist").checked;
+
+        return {
+          cmd: "set-autoar-mode",
+          mode: getMode(arStatus, whitelist),
+          sender: "popup",
+          receiver: "uwbg"
+        };
+      } else if (e.target.classList.contains("_save_autoAr_frequency")) {
         var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim());
         
         if(! isNaN(value)){
@@ -365,6 +443,16 @@ document.addEventListener("click", (e) => {
           Comms.sendToBackgroundScript(command);
         }
         return;
+      } else if (e.target.classList.contains("_ar_site_options")) {
+        command.cmd = "set-autoar-for-site";
+        if(e.target.classList.contains("_blacklist")){
+          command.mode = "disabled";
+        } else if(e.target.classList.contains("_whitelist")) {
+          command.mode = "enabled";
+        } else {
+          command.mode = "default";
+        }
+        return command;
       }
     }
     
@@ -376,7 +464,7 @@ document.addEventListener("click", (e) => {
         command.cmd = "force-video-float",
         command.newFloat = "left"
         
-        console.log(".................\n\n\n..........\n\n              >>command<< \n\n\n\n            ",command,"\n\n\n.........\n\n\n................................");
+        // console.log(".................\n\n\n..........\n\n              >>command<< \n\n\n\n            ",command,"\n\n\n.........\n\n\n................................");
         
         return command;
       }
@@ -391,8 +479,7 @@ document.addEventListener("click", (e) => {
         return command;
       }
     }
-  
-    if(e.target.classList.contains("extensionEnabledOnCurrentSite")){
+    if(e.target.classList.contains("extensionEnabledOnCurrentSite")){  // legacy? can be removed?
       toggleSite(document.extensionEnabledOnCurrentSite.mode.value);
     }
     
diff --git a/res/popup/popup.html b/res/popup/popup.html
index a619abf..d9e8971 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -208,32 +208,39 @@
       </div>
       
       <div id="settings-for-current-site" class="suboption hidden">
-<!--         <p class="current-site-status" id="current-site-blacklisted">This site is currently blacklisted.</p> -->
-<!--         <p class="current-site-status" id="current-site-whitelist-only">Extension is set to only work on sites that have been whitelisted.</p> -->
-        <p>Allow this extension to run on this site? <small><br/>NOTE: changes take effect after reload!</small></p>
-        <form action="" name="extensionEnabledOnCurrentSite">
-          <input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_followGlobal" value="follow-global" > Follow default rules (currently: <span id="current-site-status-global-status"></span>)<br/>
-          <input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_whitelisted" value="whitelisted" > Allow (whitelist this site) <br/>
-          <input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_blacklisted" value="blacklisted" > Deny (blacklist this site)<br/>
-        </form>
-        <small>NOTE: this settings <b>don't</b> apply to videos embedded from other sites. This option takes effect after page reload.</small>
-        
+        <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/>
+          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
+          <input type="checkbox" id="_checkbox_ext-whitelist" class="_ext _ext_whitelist-only"> Only on whitelisted sites
+        </p>
+
+        <div class="row">
+          <span class="label">Options for this site:</span>
+          <div class="button-row">
+            <a id="_ext_site_options_blacklist" class="button _ext _ext_site_options _blacklist">Blacklist</a>
+            <a id="_ext_site_options_default"   class="button _ext _ext_site_options _default"  >Default</a>
+            <a id="_ext_site_options_whitelist" class="button _ext _ext_site_options _whitelist">Whitelist</a>
+          </div>
+        </div>
       </div>
       
       <div id="autoar-basic-settings" class="suboption hidden">
-        <p><input type="checkbox" id="_checkbox_autoArEnabled" class="_autoAr_enabled _autoAr"> Enable automatic aspect ratio detection?<br/><small class="color_warn" id="_autoAr_disabled_reason"></small></p>
-        <p>Check every <input id="_input_autoAr_timer" class="_autoAr_timer _autoAr" type="number" min="5" max="10000"> ms — <span class="button _save_autoAr_frequency _autoAr">Save</span></p>
-        
-        <!-- <div class="warning"><p>NOTE: increasing the frequency can result in <i>very</i> high RAM usage and slow performance.</p></div> -->
-        <p>
-          <b>Stretch video while using automatic detection (todo)</b>
-          <br/>
-          <input type="radio" id="_checkbox_arStretch" name="arStretchMode" class="_autoAr_ _autoAr"> No, I'm a civilized person<br/>
-          <input type="radio" id="_checkbox_arStretch" name="arStretchMode" class="_autoAr_removeThinBorders _autoAr"> Stretch to remove thin borders<br/>
-          <input type="radio" id="_checkbox_arStretch" name="arStretchMode" class="_autoAr_removeThinBorders _autoAr"> Always stretch in full screen<br/>
-          <input type="radio" id="_checkbox_arStretch" name="arStretchMode" class="_autoAr_removeThinBorders _autoAr"> Always stretch, even when not in full screen
-        </p>        
+        <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/>
+          <input type="checkbox" id="_checkbox_autoArEnabled" class="_autoAr _autoAr_enabled"> Enable automatic aspect ratio detection<br/>
+          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
+          <input type="checkbox" id="_checkbox_autoar-whitelist" class="_autoAr _autoAr_whitelist-only"> Only on whitelisted sites
+        </p>
+        <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">
+          <span class="label">Options for this site:</span>
+          <div class="button-row">
+            <a id="_ar_site_options_blacklist" class="button _autoAr _ar_site_options _blacklist">Blacklist</a>
+            <a id="_ar_site_options_default"   class="button _autoAr _ar_site_options _default"  >Default</a>
+            <a id="_ar_site_options_whitelist" class="button _autoAr _ar_site_options _whitelist">Whitelist</a>
+          </div>
+        </div>
       </div>
       
       <div id="aspect-ratio-settings" class="suboption hidden">