Popup is working properly now.

js/modules/ArDetect.js

@@ -27,6 +27,7 @@ var _ard_sampleLines = [ 0, 360, 720, 1080, 1440, 1800, 2160, 2520, 2876]
 var _arSetup = function(){
   if(Debug.debug)
     console.log("%c[ArDetect::_ard_setup] Starting automatic aspect ratio detection", _ard_console_start);
+  this._halted = false;
   
   var vid = document.getElementsByTagName("video")[0];
   
@@ -420,17 +421,23 @@ var _ard_stop = function(){
     console.log("%c[ArDetect::_ard_stop] Stopping automatic aspect ratio detection", _ard_console_stop);    
   }
   this._forcehalt = true;
+  this._halted = true;
   clearTimeout(_ard_timer);
   clearTimeout(_ard_setup_timer);
 }
 
+var _ard_isRunning = function(){
+  return ! this._halted;
+}
+
 var ArDetect = {
   _forcehalt: false,
-
+  _halted: false,
   arSetup: _arSetup,
   init: _arSetup,
   vdraw: _ard_vdraw,
   detectedAr: 1,
   arChangedCallback: function() {},
   stop: _ard_stop,
+  isRunning: _ard_isRunning
 }

js/uw-bg.js

@@ -37,6 +37,34 @@ async function _uwbg_rcvmsg(message){
     }
     return Promise.resolve(response);
   }
+  if(message.cmd == "get-config"){
+    
+    var config = {};
+    config.videoAlignment = Settings.miscFullscreenSettings.videoFloat;
+    config.arConf = {};
+    config.arConf.enabled_global = Settings.arDetect.enabled == "global";
+    
+    
+    
+    // predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor
+    // assume current is same as global & change that when you get response from content script
+    config.arConf.enabled_current = Settings.arDetect.enabled == "global";
+    
+    try{
+      message.cmd = "get-ardetect-active";
+      var response = await sendMessage(message);
+      if(Debug.debug){
+        console.log("[uw-bg::_uwbg_rcvmsg] received response to get-ardetect-active!", {message: message, response: response});
+      }
+      config.arConf.enabled_current = response.response.arDetect_active;
+      
+    }
+    catch(ex){
+      console.log("%c[uw-bg::_uwbg_rcvmsg] there was something wrong with request for get-ardetect-active.", "color: #f00", ex);
+    }
+    
+    return Promise.resolve({response: config});
+  }
   else if(message.cmd == "force-ar"){
     sendMessage(message);  // args: {cmd: string, newAr: number/"auto"}
   }

js/uw.js

@@ -79,7 +79,16 @@ function receiveMessage(message) {
   if(Debug.debug)
     console.log("[uw::receiveMessage] we received a message.", message);
   
-  if(message.cmd == "force-ar"){
+  
+  if(message.cmd == "has-videos"){
+    var anyVideos = PageInfo.hasVideos();
+    return Promise.resolve({response: {"hasVideos": anyVideos }});
+  }
+  else if(message.cmd == "get-ardetect-active"){
+    var arDetect_active = ArDetect.isRunning();
+    return Promise.resolve({response: {"arDetect_active": arDetect_active }});
+  }
+  else if(message.cmd == "force-ar"){
     if(Debug.debug)
       console.log("[uw::receiveMessage] we're being commanded to change aspect ratio to", message.newAr);
     
@@ -94,23 +103,19 @@ function receiveMessage(message) {
       Resizer.setFsAr(message.newAr);
     }
   }
-  if(message.cmd == "force-video-float"){
+  else if(message.cmd == "force-video-float"){
     if(Debug.debug)
       console.log("[uw::receiveMessage] we're aligning video to", message.newFloat);
     
     Settings.miscFullscreenSettings.videoFloat = message.newFloat;
     Settings.save();
   }
-  if(message.cmd == "stop-autoar"){
+  else if(message.cmd == "stop-autoar"){
     ArDetect.stop();
   }
-  if(message.cmd == "reload-settings"){
+  else if(message.cmd == "reload-settings"){
     Settings.reload();
   }
-  if(message.cmd == "has-videos"){
-    var anyVideos = PageInfo.hasVideos();
-    return Promise.resolve({response: {"hasVideos": anyVideos }});
-  }
 }
 
 

res/popup/js/popup.js

@@ -16,9 +16,23 @@ MenuTab.arSettings = document.getElementById("_menu_aspectratio");
 MenuTab.cssHacks   = document.getElementById("_menu_hacks");
 MenuTab.about      = document.getElementById("_menu_about");
 
+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";
 var hasVideos = false;
 
+var _config; 
+
 function check4videos(){
   var command = {};
   command.cmd = "has-videos";
@@ -43,6 +57,46 @@ function check4videos(){
   });
 }
 
+function check4conf(){
+  var command = {};
+  command.cmd = "get-config";
+  command.sender = "popup";
+  command.receiver = "uwbg";
+  
+  browser.runtime.sendMessage(command)
+  .then(response => {
+    if(Debug.debug)
+      console.log("[popup.js::check4conf] received response:",response);
+    
+    loadConfig(response.response);
+  })
+  .catch(error => {
+    if(Debug.debug)
+      console.log("%c[popup.js::check4conf] sending message failed with error", "color: #f00", error, "%c retrying in 1s ...", "color: #f00");
+    
+    setTimeout(check4conf, 1000);
+  });
+}
+
+function loadConfig(config){
+  if(Debug.debug)
+    console.log("[popup.js::loadConfig] loading config. conf object:",config);
+    
+  _config = config;
+  
+  // process video alignment:
+  if(config.videoAlignment){
+    for(var button in ArPanel.alignment)
+      ArPanel.alignment[button].classList.remove("selected");
+    
+    ArPanel.alignment[config.videoAlignment].classList.add("selected");
+  }
+  
+  // process aspect ratio settings
+  showArctlButtons();
+}
+
+
 function openMenu(menu){
   if(Debug.debug){
     console.log("[popup.js::openMenu] trying to open menu", menu, "| element: ", Menu[menu]);
@@ -79,6 +133,51 @@ function openMenu(menu){
   }
 }
 
+function _arctl_onclick(command){
+  if(! _config)
+    return;
+  
+  if(command.cmd == "stop-autoar")
+    _config.arConf.enabled_current = false;
+  else if(command.cmd == "force-ar")
+    _config.arConf.enabled_current = true;
+  else if(command.cmd == "disable-autoar")
+    _config.arConf.enabled_global = false;
+  else if(command.cmd == "enable-autoar")
+    _config.arConf.enabled_global = true;
+  
+  showArctlButtons();
+}
+
+function showArctlButtons(){
+  if(! _config)
+    return;
+  
+  if(_config.arConf){
+    if(! _config.arConf.enabled_global){
+      ArPanel.autoar.disable.classList.add("hidden");
+      ArPanel.autoar.enable.classList.remove("hidden");
+      
+      ArPanel.autoar.enable_tmp.textContent = "Temporarily enable";
+      ArPanel.autoar.disable_tmp.textContent = "Temporarily disable";
+    }
+    else{
+      ArPanel.autoar.disable.classList.remove("hidden");
+      ArPanel.autoar.enable.classList.add("hidden");
+      
+      ArPanel.autoar.enable_tmp.textContent = "Re-enable";
+      ArPanel.autoar.disable_tmp.textContent = "Temporarily disable";
+    }
+    if(! _config.arConf.enabled_current){
+      ArPanel.autoar.disable_tmp.classList.add("hidden");
+      ArPanel.autoar.enable_tmp.classList.remove("hidden");
+    }
+    else{
+      ArPanel.autoar.disable_tmp.classList.remove("hidden");
+      ArPanel.autoar.enable_tmp.classList.add("hidden");
+    }
+  }
+}
 
 document.addEventListener("click", (e) => {
   
@@ -146,15 +245,21 @@ document.addEventListener("click", (e) => {
     }
     
     if(e.target.classList.contains("_autoar")){
+      var command = {};
       if(e.target.classList.contains("_autoar_temp-disable")){
-        return {cmd: "stop-autoar", sender: "popup", receiver: "uwbg"};
+        command = {cmd: "stop-autoar", sender: "popup", receiver: "uwbg"};
       }
-      if(e.target.classList.contains("_autoar_disable")){
+      else if(e.target.classList.contains("_autoar_disable")){
-        return {cmd: "disable-autoar", sender: "popup", receiver: "uwbg"};
+        command = {cmd: "disable-autoar", sender: "popup", receiver: "uwbg"};
       }
-      if(e.target.classList.contains("_autoar_enable")){
+      else if(e.target.classList.contains("_autoar_enable")){
-        return {cmd: "enable-autoar", sender: "popup", receiver: "uwbg"};
+        command = {cmd: "enable-autoar", sender: "popup", receiver: "uwbg"};
       }
+      else{
+        command = {cmd: "force-ar", newAr: "auto", sender: "popup", receiver: "uwbg"};
+      }
+      _arctl_onclick(command);
+      return command;
     }
     
     if(e.target.classList.contains("_align")){
@@ -190,3 +295,4 @@ document.addEventListener("click", (e) => {
 
 
 check4videos();
+check4conf();

res/popup/popup.html

@@ -23,6 +23,12 @@
       font-weight: 200;
     }
     
+    .label{
+      font-size: 1.1em;
+      font-weight: 600;
+      color: #ffe;
+    }
+    
     .smallcaps{
       font-variant: small-caps;
     }
@@ -87,6 +93,11 @@
       border: 1px solid #444;
       margin-top: 3px;
       margin-bottom: 3px;
+      color: #dbb;
+    }
+    .button:hover {
+      color: #fff;
+      background-color: #433221;
     }
     
     .row {
@@ -148,7 +159,7 @@
       
       <div id="aspect-ratio-settings" class="suboption hidden">
         <div class="row">
-          Force aspect ratio:<br/>
+          <span class="label">Force aspect ratio:</span>
           <div class="button-row">
             <a class="button _changeAr _ar_auto">Auto-detect</a>
             <a class="button _changeAr _ar_reset">Reset</a>
@@ -158,19 +169,20 @@
           </div>
         </div>
         <div class="row">
-          Automatic aspect ratio autodetection:
+          <span class="label">Automatic aspect ratio autodetection:</span>
           <div class="button-row">
-            <a id="ard_temporary_disable" class="button _autoar _autoar_temp-disable">Temporarily disable</a><br/>
+            <a id="_autoar_disable_tmp" class="button _autoar _autoar_temp-disable">Temporarily disable</a>
-            <a id="ard_disable"           class="button _autoar _autoar_disable">Disable</a>
+            <a id="_autoar_enable_tmp"          class="button _autoar _ar_auto hidden">Re-enable</a>
-            <a id="ard_enable"            class="button _autoar _autoar_enable hidden">Enable</a>
+            <a id="_autoar_disable"           class="button _autoar _autoar_disable">Disable</a>
+            <a id="_autoar_enable"            class="button _autoar _autoar_enable hidden">Enable</a>
           </div>
         </div>
         <div class="row">
-          Video alignment:
+          <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a class="button _align _align_left">left</a>
+            <a id="_align_left"   class="button _align _align_left">left</a>
-            <a class="button _align _align_center">center</a>
+            <a id="_align_center" class="button _align _align_center">center</a>
-            <a class="button _align _align_right">right</a>
+            <a id="_align_right"  class="button _align _align_right">right</a>
           </div>
         </div>
       </div>
@@ -181,10 +193,10 @@
       
       <div id="panel-about" class="suboption hidden">
         <div class="row">
-          Ultrawidify version: <span id="uw-version"></span>
+          <span class="label">Ultrawidify version:</span><br/> <span id="uw-version"></span>
         </div>
         <div class="row">
-          Having an issue? Report <strike>undocumented features</strike>bugs <a href="https://github.com/xternal7/ultrawidify/issues">here</a>.
+          <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs <a href="https://github.com/xternal7/ultrawidify/issues">here</a>.
         </div>
       </div>
     </div>