From 9265a336bc4b04b52f86ca3b2867bd1717026c9d Mon Sep 17 00:00:00 2001
From: Tamius Han <zp8324@student.uni-lj.si>
Date: Thu, 18 Jan 2018 00:11:03 +0100
Subject: [PATCH] Trying to add blanket support for theater mode. Changing
 aspect ratio works in youtube theater mode, but only when manually launched.
 Chaning to full screen mode stops it. This commit breaks vimeo support.

---
 js/conf/Debug.js          |   6 +--
 js/lib/BrowserDetect.js   |   2 +-
 js/lib/Comms.js           |   2 +-
 js/lib/PlayerDetect.js    |  82 ++++++++++++++++++++++++++++
 js/modules/ArDetect.js    |  24 ++++-----
 js/modules/Resizer.js     | 110 ++++++--------------------------------
 js/uw.js                  |  17 +++---
 manifest-chrome.json~HEAD |  73 +++++++++++++++++++++++++
 manifest-ff.json          |  72 +++++++++++++++++++++++++
 manifest.json             |  78 ++++++++++++++-------------
 res/popup/js/popup.js     |   4 +-
 res/popup/popup.html      |   1 +
 12 files changed, 314 insertions(+), 157 deletions(-)
 create mode 100644 js/lib/PlayerDetect.js
 create mode 100644 manifest-chrome.json~HEAD
 create mode 100644 manifest-ff.json

diff --git a/js/conf/Debug.js b/js/conf/Debug.js
index 3bd9aa4..a95f98f 100644
--- a/js/conf/Debug.js
+++ b/js/conf/Debug.js
@@ -1,12 +1,12 @@
 // Set prod to true when releasing
-_prod = true; 
-//_prod = false;
+// _prod = true; 
+_prod = false;
 
 Debug = {
   debug: true,
   keyboard: true,
   debugResizer: true,
-  debugArDetect: true,
+  debugArDetect: false,
   debugStorage: true,
   showArDetectCanvas: false,
   flushStoredSettings: true
diff --git a/js/lib/BrowserDetect.js b/js/lib/BrowserDetect.js
index bd39c58..8a5922e 100644
--- a/js/lib/BrowserDetect.js
+++ b/js/lib/BrowserDetect.js
@@ -16,7 +16,7 @@ catch (e) {};
 if(typeof browser === "undefined"){ // This is a good sign we're in chrome or chromium-based browsers
   if(chrome){
     browser = chrome;
-    _bd_usebrowser = "chrome;
+    _bd_usebrowser = "chrome";
     _bd_isChrome = true;
     _bd_isEdge = false;
   }
diff --git a/js/lib/Comms.js b/js/lib/Comms.js
index 00e98ef..8bab757 100644
--- a/js/lib/Comms.js
+++ b/js/lib/Comms.js
@@ -1,7 +1,7 @@
 var _com_chrome_tabquery_wrapper = async function(tabInfo){
   return new Promise(function (resolve, reject){    
     browser.tabs.query(tabInfo, function(response){
-      
+      browser.tabs.query(tabInfo);
       // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
       var r = response; 
       resolve(r);
diff --git a/js/lib/PlayerDetect.js b/js/lib/PlayerDetect.js
new file mode 100644
index 0000000..c59bcb9
--- /dev/null
+++ b/js/lib/PlayerDetect.js
@@ -0,0 +1,82 @@
+
+/* sprejme <video> tag (element
+// vrne dimenzije predvajalnika (širina, višina)
+// 
+// Na youtube v theater mode je razširitev rahlo pokvarjena. Video tag ostane večji od predvajalnika, ko se zapusti
+// celozaslonski način. Ta funkcija skuša to težavo rešiti tako, da poišče element predvajalnika, ki je zavit okoli videa.
+// 
+// Funkcija izkorišča lastnost, da bi načeloma moral biti vsak zunanji element večji od notranjega. Najmanjši element od
+// <video> značke pa do korena drevesa bi tako moral biti predvajalnik.
+// 
+// 
+// | EN |
+//
+// accepts <video> tag (element)
+// returns player dimensions (width, height)
+//
+// Theater mode is mildly broken on youtube. <video> tag remains bigger than the player after leaving the fullscreen mode, and
+// there's nothing we can do about that. This function aims to solve the problem by finding the player element that's wrapped around
+// the <video> tag.
+// 
+// In general, an outer tag should be bigger than the inner tag. Therefore the smallest element between <video> tag and the document
+// root should be the player.
+*/
+
+var _pd_getPlayerDimensions = function(element){
+  
+  if(FullScreenDetect.isFullScreen()){
+    if(Debug.debug){
+      console.log("[PlayerDetect::_pd_getPlayerDimensions] video is full screen, returning player dimensions!");
+    }
+    return {
+      width: screen.width,
+      height: screen.height
+    };
+  }
+  
+  if(Debug.debug){
+    console.log("[PlayerDetect::_pd_getPlayerDimensions] video is not full screen. Looking for player.");
+  }
+  
+  var playerCandidateNode = element;
+  
+  // in case our <video> is bigger than player in one dimension but smaller in the other
+  // if site is coded properly, player can't be wider than that
+  var candidate_width = Math.max(element.offsetWidth, screen.width);
+  var candidate_height = Math.max(element.offsetHeight, screen.height);
+  
+  // <video> can't be root in a document, so we can do this
+  element = element.parentNode;
+  
+  while(element.parentNode){    
+    // odstranimo čudne elemente, ti bi pokvarili zadeve
+    // remove weird elements, those would break our stuff
+    if ( element.offsetWidth == 0 || element.offsetHeight == 0){
+      element = element.parentNode;
+      continue;
+    }
+    
+    if ( element.offsetHeight <= candidate_height &&
+         element.offsetWidth  <= candidate_width  ){
+      playerCandidateNode = element;
+      candidate_width = element.offsetWidth;
+      candidate_height = element.offsetHeight;
+    
+      if(Debug.debug){
+        console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height);
+      }
+    }
+    
+    element = element.parentNode;
+  }
+  
+  return {
+    width: playerCandidateNode.offsetWidth,
+    height: playerCandidateNode.offsetHeight
+  };
+}
+
+
+var PlayerDetect = {
+  getPlayerDimensions: _pd_getPlayerDimensions
+}
diff --git a/js/modules/ArDetect.js b/js/modules/ArDetect.js
index 41f2736..e244dbb 100644
--- a/js/modules/ArDetect.js
+++ b/js/modules/ArDetect.js
@@ -154,8 +154,8 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode
   
   //edge_w -—> null/undefined, because we don't autocorrect pillarbox yet
   
-  if(Debug.debug){
-    console.log("[ArDetect::_ard_processAr] processing ar. width:", width, "; height:", height, "; edge top:", edge_h);
+  if(Debug.debug && Debug.debugArDetect){
+    console.log("[ArDetect::_ard_processAr] processing ar. sample width:", width, "; sample height:", height, "; edge top:", edge_h);
   }
   // if we don't specify these things, they'll have some default values.
   if(edge_h === undefined){
@@ -202,21 +202,21 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode
   }
   // če je sprememba več od dovoljenega, spremeni razmerje stranic. Stvari se razlikujejo glede na to, ali smo v fullscreen ali ne
   // if change is greater than allowed, change the aspect ratio.  Whether we do that depends on whether we're in fullscreen.
-  if( FullScreenDetect.isFullScreen() ){
+//   if( FullScreenDetect.isFullScreen() ){
     if(Debug.debug)
       console.log("[ArDetect::_ard_processAr] attempting to fix aspect ratio. New aspect ratio: ", trueAr);
       
     _ard_oldAr = trueAr;
     Resizer.setAr_fs(trueAr);
-  }
-  else{
-    // če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
-    // first, we'll check if our site allows for non-fs autoar detection
-    if( SitesConf.nonfsArDetectEnabled() ){
-      _ard_oldAr = trueAr;
-      Resizer.setAr_nonfs(trueAr);
-    }
-  }
+//   }
+//   else{
+//     // če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
+//     // first, we'll check if our site allows for non-fs autoar detection
+//     if( SitesConf.nonfsArDetectEnabled() ){
+//       _ard_oldAr = trueAr;
+//       Resizer.setAr_nonfs(trueAr);
+//     }
+//   }
   
   
 }
diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js
index 1ea00f8..d14e345 100644
--- a/js/modules/Resizer.js
+++ b/js/modules/Resizer.js
@@ -32,81 +32,6 @@ var _res_manual_autoar = function(siteProps){
     //     sending.then( function(){}, function(err1, err2){console.log("uw::periodic: there was an error while sending a message", err1, err2)} );
 }
 
-var _res_changeCSS = function(type, action, lastAction, conf, debugmsg){
-  if(debugmsg)
-    console.log("uw::changeCSS | starting function. type:", type, "; what_do:",what_do,"\nPlayer element is this:",PLAYER);
-  //   hideMenu("uw-armenu");
-  //   hideMenu("uw-smenu");
-  
-  var evideo = $("video")[0];
-  
-  if(!evideo){
-    if(debugmsg)
-      console.log("uw::changeCSS | no video element found. Doing nothing.");
-    
-    return;
-  }
-  
-  var video = { width: evideo.videoWidth, height: evideo.videoHeight };
-  var nplayer = { width: PLAYER.clientWidth, height: PLAYER.clientHeight };
-  
-  if(debugmsg)
-    console.log("uw::changeCSS | video dimensions:",video.width,"x",video.height,"; player:",nplayer.width,"x",nplayer.height);
-  
-  // Youtube predvajalnik privzeto resetira CSS ob prehodu v/iz fullscreen. Tukaj shranimo zadnje dejanje,
-  // da ga lahko onFullscreenOff/onFullscreenOn uveljavita.
-  // 
-  // Youtube player resets CSS on fullscreen state change. Here we save the last action taken, so 
-  // onFullscreenOff/onFullscreenOn are able to preserve it (if we want).
-  lastAction = {type:type, what_do:what_do};
-  
-  // -----------------------------------------------------------------------------------------
-  //  Handlanje dejanj se zgodi pod to črto
-  //  
-  //  Handling actions happens below this line
-  // -----------------------------------------------------------------------------------------
-  
-  if (type == "autoar"){
-    this.autochar();
-    return;
-  }
-  
-  if (type == "char"){      
-    if(debugmsg)
-      console.log("uw::changeCSS | trying to change aspect ratio.");
-    
-    // char = CHange Aspect Ratio
-    char(what_do, video, nplayer);
-    return;
-  }
-  
-  if (what_do == "reset"){
-    if(debugmsg)
-      console.log("uw::changeCSS | issuing reset.");
-    
-    resetCSS(video, nplayer); 
-    return;
-  }
-  
-  // Velikost videa spreminjamo samo, če smo v celozaslonskem načinu ALI če NE pišemo komentarja
-  // Videa ne spreminjamo tudi, če uporabljamo vrstico za iskanje.
-  // 
-  // We only change video size when we're in full screen OR if we are NOT writing a comment.
-  // We also leave video alone if we're using the search bar
-  
-  if(FullScreenDetect.isFullScreen() || (
-    (document.activeElement.getAttribute("role") != "textbox") &&
-    (document.activeElement.getAttribute("type") != "text")
-  )){
-    if(debugmsg)
-      console.log("uw::changeCSS | trying to fit width or height");
-    
-    changeCSS_nofs(what_do, video, nplayer);
-  }
-  
-  
-}
-
 
 var _res_char = function(newAr, video, player){
   
@@ -249,8 +174,8 @@ var _res_reset = function(force){
   if(Debug.debug)
     console.log("[Resizer::_res_reset] css applied. Dimensions/pos: w:",dimensions.width,"; h:",dimensions.height,"; top:",dimensions.top,"; left:",dimensions.left);
   
-  if(force)
-    this._currentAr = -1;
+//   if(force)
+//     this._currentAr = -1;
 }
 
 // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". Približevanje opuščeno.
@@ -279,12 +204,12 @@ var _res_legacyAr = function(action){
 }
 
 var _res_setAr_kbd = function(ar){
-  if(FullScreenDetect.isFullScreen()){
-    if(Debug.debug)
-      console.log("[Resizer::_res_setAr_kbd] We're in full screen. Setting ar to ", ar);
-    
-    _res_setAr(ar, {width: screen.width, height: screen.height} );
-  }
+//   if(FullScreenDetect.isFullScreen()){
+//     if(Debug.debug)
+//       console.log("[Resizer::_res_setAr_kbd] We're in full screen. Setting ar to ", ar);
+//     
+    _res_setAr(ar);
+//   }
 //   else
 //     _res_setAr_nonfs(ar);
 // TODO: check if site supports non-fs ar
@@ -305,22 +230,19 @@ var _res_setAr = function(ar, playerDimensions){
   // 
   
   if(Debug.debug)
-    console.log("[Resizer::_res_setArFs] ar is " ,ar, ", playerDimensions are ", playerDimensions);
+    console.log("[Resizer::_res_setAr] ar is " ,ar, ", playerDimensions are ", playerDimensions);
   
   var videoDimensions = {
     width: 0,
     height: 0
   }
   
-  if(Debug.debug){
-    console.log("[Resizer::_res_setArFs] Player dimensions?",playerDimensions);
-  }
   
-  if(playerDimensions === undefined){
-    playerDimensions = {
-      width: screen.width,
-      height: screen.height
-    }
+  if(playerDimensions === undefined)
+    playerDimensions = PlayerDetect.getPlayerDimensions(vid);
+  
+  if(Debug.debug){
+    console.log("[Resizer::_res_setAr] Player dimensions?",playerDimensions);
   }
   
   if( fileAr < ar ){
@@ -549,8 +471,8 @@ var _res_restore = function(){
   
   if(this._currentAr > 0)
     _res_setAr_kbd(this._currentAr);
-  else
-    _res_setAr_kbd("default");
+//   else 
+//     _res_setAr_kbd("default");
 }
 
 var Resizer = {
diff --git a/js/uw.js b/js/uw.js
index b0c2b85..0bd36a5 100644
--- a/js/uw.js
+++ b/js/uw.js
@@ -80,7 +80,7 @@ async function main(){
     if(Debug.debug){
       console.log("%c[uw::onfullscreenchange] are we in full screen?","color: #aaf", FullScreenDetect.isFullScreen());
     }
-    fullScreenCheck(0);
+//     fullScreenCheck(0);
   });
 
   browser.runtime.onMessage.addListener(receiveMessage);
@@ -98,13 +98,16 @@ function fullScreenCheck(count) {
   }
   
   var fsnow = FullScreenDetect.isFullScreen();
-  if(fsnow){
+  
+  // we restore, always — esp. now that we also do things in non-fullscreen
+  
+//   if(fsnow){
     // full screen is on
-    Resizer.restore();
-  }
-  else{
-    Resizer.reset();
-  }
+//     Resizer.restore();
+//   }
+//   else{
+//     Resizer.reset();
+//   }
   
   // kaj pa, če je FullScreenDetect vrnil narobno vrednost?
   // what if FullScreenDetect was not right? Let's verify; if it was wrong we re-trigger it in about 100 ms.
diff --git a/manifest-chrome.json~HEAD b/manifest-chrome.json~HEAD
new file mode 100644
index 0000000..0d35db9
--- /dev/null
+++ b/manifest-chrome.json~HEAD
@@ -0,0 +1,73 @@
+{
+  "manifest_version": 2,
+  "name": "Ultrawidify",
+  "version": "2.0.2",
+  
+  "icons": {
+    "32":"res/icons/uw-32.png",
+    "64":"res/icons/uw-64.png"
+  },
+  
+  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
+    
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": [ 
+      "js/dep/jquery-3.1.1.js",
+      "js/dep/chrome/chrome-extension-async.js",
+      
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      "js/lib/Comms.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      "js/conf/SitesConf.js",
+      "js/conf/Status.js",
+      "js/conf/ExtensionConf.js",
+      
+      "js/lib/FullScreenDetect.js",
+      
+      "js/modules/PageInfo.js",
+      "js/modules/ArDetect.js", 
+      "js/modules/Resizer.js",
+      
+      "js/conf/Keybinds.js",
+      
+      "js/uw.js" ], 
+    "all_frames": true
+  }],
+  
+  "permissions": [
+    "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
+  ],
+  
+  "browser_action": {
+    "default_icon": "res/icons/uw-32.png",
+    "default_popup": "res/popup/popup.html",
+    "default_title": "Ultrawidify"
+  },
+  
+  "web_accessible_resources": [
+    "js/*",
+  
+    "res/img/ytplayer-icons/zoom.png",
+    "res/img/ytplayer-icons/unzoom.png",
+    "res/img/ytplayer-icons/fitw.png",
+    "res/img/ytplayer-icons/fith.png",
+    "res/img/ytplayer-icons/reset.png",
+    "res/img/ytplayer-icons/settings.png",
+    
+    "res/img/settings/about-bg.png",
+    
+    "res/css/uw_common.css",
+    "res/css/uw_yt.css",
+    "res/css/uw_netflix.css",
+    "res/css/uw_settings.css"
+  ],
+  
+  "options_ui" : {
+    "page": "res/settings/settings.html",
+    "open_in_tab": true
+  }
+}
diff --git a/manifest-ff.json b/manifest-ff.json
new file mode 100644
index 0000000..4ca6b26
--- /dev/null
+++ b/manifest-ff.json
@@ -0,0 +1,72 @@
+{
+  "manifest_version": 2,
+  "name": "Ultrawidify",
+  "version": "2.0.3",
+  
+  "icons": {
+    "32":"res/icons/uw-32.png",
+    "64":"res/icons/uw-64.png"
+  },
+  
+  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
+    
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": [ 
+      "js/dep/jquery-3.1.1.js",
+      
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      "js/lib/Comms.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      "js/conf/SitesConf.js",
+      "js/conf/Status.js",
+      "js/conf/ExtensionConf.js",
+      
+      "js/lib/FullScreenDetect.js",
+      
+      "js/modules/PageInfo.js",
+      "js/modules/ArDetect.js", 
+      "js/modules/Resizer.js",
+      
+      "js/conf/Keybinds.js",
+      
+      "js/uw.js" ], 
+    "all_frames": true
+  }],
+  
+  "permissions": [
+    "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
+  ],
+  
+  "browser_action": {
+    "default_icon": "res/icons/uw-32.png",
+    "default_popup": "res/popup/popup.html",
+    "default_title": "Ultrawidify"
+  },
+  
+  "web_accessible_resources": [
+    "js/*",
+  
+    "res/img/ytplayer-icons/zoom.png",
+    "res/img/ytplayer-icons/unzoom.png",
+    "res/img/ytplayer-icons/fitw.png",
+    "res/img/ytplayer-icons/fith.png",
+    "res/img/ytplayer-icons/reset.png",
+    "res/img/ytplayer-icons/settings.png",
+    
+    "res/img/settings/about-bg.png",
+    
+    "res/css/uw_common.css",
+    "res/css/uw_yt.css",
+    "res/css/uw_netflix.css",
+    "res/css/uw_settings.css"
+  ],
+  
+  "options_ui" : {
+    "page": "res/settings/settings.html",
+    "open_in_tab": true
+  }
+}
diff --git a/manifest.json b/manifest.json
index 4ca6b26..4e176b9 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Ultrawidify",
-  "version": "2.0.3",
+  "version": "2.1.0",
   
   "icons": {
     "32":"res/icons/uw-32.png",
@@ -9,36 +9,38 @@
   },
   
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
-    
+  
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [ 
-      "js/dep/jquery-3.1.1.js",
-      
-      "js/lib/BrowserDetect.js",
-      "js/lib/StorageManager.js",
-      "js/lib/Comms.js",
-      
-      "js/conf/Debug.js",
-      "js/conf/Settings.js",
-      "js/conf/SitesConf.js",
-      "js/conf/Status.js",
-      "js/conf/ExtensionConf.js",
-      
-      "js/lib/FullScreenDetect.js",
-      
-      "js/modules/PageInfo.js",
-      "js/modules/ArDetect.js", 
-      "js/modules/Resizer.js",
-      
-      "js/conf/Keybinds.js",
-      
-      "js/uw.js" ], 
+    "js/dep/jquery-3.1.1.js",
+    "js/dep/chrome/chrome-extension-async.js",
+    
+    "js/lib/BrowserDetect.js",
+    "js/lib/StorageManager.js",
+    "js/lib/Comms.js",
+    
+    "js/conf/Debug.js",
+    "js/conf/Settings.js",
+    "js/conf/SitesConf.js",
+    "js/conf/Status.js",
+    "js/conf/ExtensionConf.js",
+    
+    "js/lib/FullScreenDetect.js",
+    "js/lib/PlayerDetect.js",
+    
+    "js/modules/PageInfo.js",
+    "js/modules/ArDetect.js", 
+    "js/modules/Resizer.js",
+    
+    "js/conf/Keybinds.js",
+    
+    "js/uw.js" ], 
     "all_frames": true
   }],
   
   "permissions": [
-    "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
+  "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
   ],
   
   "browser_action": {
@@ -48,21 +50,21 @@
   },
   
   "web_accessible_resources": [
-    "js/*",
+  "js/*",
   
-    "res/img/ytplayer-icons/zoom.png",
-    "res/img/ytplayer-icons/unzoom.png",
-    "res/img/ytplayer-icons/fitw.png",
-    "res/img/ytplayer-icons/fith.png",
-    "res/img/ytplayer-icons/reset.png",
-    "res/img/ytplayer-icons/settings.png",
-    
-    "res/img/settings/about-bg.png",
-    
-    "res/css/uw_common.css",
-    "res/css/uw_yt.css",
-    "res/css/uw_netflix.css",
-    "res/css/uw_settings.css"
+  "res/img/ytplayer-icons/zoom.png",
+  "res/img/ytplayer-icons/unzoom.png",
+  "res/img/ytplayer-icons/fitw.png",
+  "res/img/ytplayer-icons/fith.png",
+  "res/img/ytplayer-icons/reset.png",
+  "res/img/ytplayer-icons/settings.png",
+  
+  "res/img/settings/about-bg.png",
+  
+  "res/css/uw_common.css",
+  "res/css/uw_yt.css",
+  "res/css/uw_netflix.css",
+  "res/css/uw_settings.css"
   ],
   
   "options_ui" : {
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index 73b32be..95b6f54 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -55,7 +55,7 @@ var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none"
 
 async function sendMessage(message){
   console.log("SENDING MESSAGE TO CONTENT SCRIPT");
-  var tabs = await Comms.queryTabs({currentWindow: true, active: true}); 
+  var tabs = await browser.tabs.query({currentWindow: true, active: true}); 
   if(Debug.debug)
     console.log("[uw-bg::sendMessage] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")");
   
@@ -367,6 +367,8 @@ document.addEventListener("click", (e) => {
   var command = getcmd(e);  
   if(command)
     sendMessage(command);
+  
+  return true;
 });
 
 
diff --git a/res/popup/popup.html b/res/popup/popup.html
index 16910c9..9b13696 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -158,6 +158,7 @@
         <ul><li>Page hasn't finished loading<small><br/><span class="smallcaps">Note</span>: webextensions only start working when page is fully loaded.</small></li>
         <li>The video is embedded / in an iframe.<small><br/>This is a known issue/limitation. Use keyboard shortcuts to correct aspect ratio.</small></li>
         <li>Hamster Rajko is on strike.<small><br/>(Close this popup and reopen in a few seconds)</small></li></ul>
+        <p><u>Keyboard shortcuts:</u><br/>* <b>A</b> - attempt automatic detection<br/>* <b>W</b> - fit to width<br/>* <b>E</b> - fit to height<br/>* <b>R</b> - reset/stop automatic detection<br/><br/>Force aspect ratio:<br/>* <b>S</b>: 16:9<br/>* <b>D</b>: 21:9<br/>* <b>X</b>: 2:1</p>
       </div>
     
       <div id="extension-mode" class="suboption hidden">