Popup seems to be more or less fixed.

js/conf/ExtensionConf.js

@@ -139,6 +139,10 @@ var ExtensionConf = {
         action: "crop",
         arg: 2.0
       },
+      "q": {
+        action: "crop",
+        arg: 2.35
+      },
       //#endregion
       //#region zoom
       "z": {

js/lib/Comms.js

@@ -235,6 +235,10 @@ class CommsServer {
       this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
     } else if (message.cmd === 'set-ar') {
       this.sendToActive(message);
+    } else if (message.cmd === 'set-custom-ar') {
+      ExtensionConf.keyboard.shortcuts.q.arg = message.ratio;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
     } else if (message.cmd === 'autoar-start') {
       this.sendToActive(message);
     } else if (message.cmd === "autoar-enable") {   // LEGACY - can be removed prolly?

res/popup/js/popup.js

@@ -61,7 +61,7 @@ var selectedMenu = "arSettings";
 var hasVideos = false;
 
 var _config; 
-var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none" }
+var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" }
 
 var comms = new Comms();
 var port = browser.runtime.connect({name: 'popup-port'});
@@ -120,6 +120,7 @@ function loadConfig(extensionConf, site){
   } else {
     ExtPanel.siteOptions.default.classList.add("selected");
   }
+
   //#endregion extension-basics
   //
   // ------------
@@ -155,6 +156,8 @@ function loadConfig(extensionConf, site){
   }
 
   //#region - SET STRETCH
+
+  // set stretching
   for (var button in StretchPanel.global) {
     StretchPanel.global[button].classList.remove("selected");
   }
@@ -178,7 +181,10 @@ function loadConfig(extensionConf, site){
       
       try{
         if(shortcut.action == "crop"){
-          if(shortcut.arg == 2.0){
+          if (key == 'q') {
+            _changeAr_button_shortcuts["custom"] = keypress;
+          }
+          else if(shortcut.arg == 2.0){
             _changeAr_button_shortcuts["189"] = keypress;
           }
           else if(shortcut.arg == 2.39){
@@ -204,6 +210,11 @@ function loadConfig(extensionConf, site){
       catch(Ex){
         //do nothing if key doesn't exist
       }
+
+      // fill in custom aspect ratio
+      if (extensionConf.keyboard.shortcuts.q) {
+        document.getElementById("_input_custom_ar").value = extensionConf.keyboard.shortcuts.q.arg;
+      }
     }
     for(var key in _changeAr_button_shortcuts){
       try{
@@ -304,6 +315,47 @@ function showArctlButtons(){
   // }
 }
 
+function getCustomAspectRatio() {
+  var textBox_value = document.getElementById("_input_custom_ar").value.trim();
+  // validate value - this spaghett will match the following stuff
+  //   [int]/[int]
+  //   1:[float]
+  //   [float]
+  if (! /(^[0-9]+\/[0-9]+$|^(1:)?[0-9]+\.?[0-9]*$)/.test(textBox_value)) {
+    return false; // validation failed!
+  }
+
+  if (! isNaN(parseFloat(textBox_value))) {
+    return parseFloat(textBox_value);
+  }
+  if (/\//.test(textBox_value)) {
+    const vars = textBox_value.split('/');
+    return parseInt(vars[0])/parseInt(vars[1]); // non-ints shouldn't make it past regex
+  }
+  if (/:/.test(textBox_value)) {
+    const vars = textBox_value.split(':');
+    return parseFloat(vars[1]);
+  }
+
+   // we should never come this far. 
+   // If we do, then there's something wrong with the input and our regex
+  return false;
+}
+
+function validateCustomAr(){
+  console.log("validating!")
+  const valid = getCustomAspectRatio() !== false;
+  const inputField = document.getElementById("_input_custom_ar");
+  const valueSaveButton = document.getElementById("_b_changeAr_save_custom_ar");
+
+  if (valid) {
+    inputField.classList.remove("invalid-input");
+    valueSaveButton.classList.remove("disabled-button");
+  } else {
+    inputField.classList.add("invalid-input");
+    valueSaveButton.classList.add("disabled-button");
+  }
+}
 
 function toggleSite(option){
   if(Debug.debug)
@@ -326,6 +378,7 @@ document.addEventListener("click", (e) => {
   
   function getcmd(e){
     
+    
     var command = {};
     command.sender = "popup";
     command.receiver = "uwbg";
@@ -424,6 +477,18 @@ document.addEventListener("click", (e) => {
         command.ratio = 1.6;
         return command;
       }
+      if(e.target.classList.contains("_ar_custom")){
+        ratio = getCustomAspectRatio();
+        command.cmd = "set-ar";
+        command.ratio = ratio;
+        return ratio !== false ? command : null;
+      }
+      if(e.target.classList.contains("_ar_save_custom_ar")){
+        ratio = getCustomAspectRatio();
+        command.cmd = "set-custom-ar";
+        command.ratio = ratio;
+        return ratio !== false ? command : null; // this validates input
+      }
     }
     if(e.target.classList.contains("_stretch")){
       if (e.target.classList.contains("_ar_stretch_global")) {
@@ -487,7 +552,7 @@ document.addEventListener("click", (e) => {
         var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim());
         
         if(! isNaN(value)){
-          var timeout = parseInt(1000 / value);
+          var timeout = parseInt(value);
           command = {cmd: "autoar-set-timer-playing", timeout: timeout, sender: "popup", receiver: "uwbg"};
           Comms.sendToBackgroundScript(command);
         }
@@ -541,9 +606,14 @@ document.addEventListener("click", (e) => {
   return true;
 });
 
+const inputField = document.getElementById("_input_custom_ar");
+inputField.addEventListener("blur", (event) => {
+  validateCustomAr();
+});
+inputField.addEventListener("mouseleave", (event) => {
+  validateCustomAr();
+});
+
 hideWarning("script-not-running-warning");
 openMenu(selectedMenu);
-// check4videos();
 getConf();
-
-// check4siteStatus();

res/popup/popup.html

@@ -27,6 +27,13 @@
       color: #c0924e;
     }
 
+    input {
+      border: 1px solid #322;
+      padding: 0.5em;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+    }
+
     .hidden {
       display: none !important;
     }
@@ -60,6 +67,18 @@
     .disabled {
       color: #666;
     }
+    .disabled-button {
+      color: #666 !important;
+      cursor: not-allowed !important;     
+    }
+    .disabled-button:hover {
+      color: #777 !important;
+      background-color: #222 !important;
+    }
+    .invalid-input {
+      border: 1px solid #720 !important;
+      background-color: #410 !important;
+    }
     .header {
       background-color: #7f1416;
       color: #fff;
@@ -183,7 +202,7 @@
         Crop settings
       </div>
       <div id="_menu_stretch" class="menu-item _menu_stretch">
-        Stretc settings
+        Stretch settings
       </div>
       <div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
         CSS hacks for this site
@@ -263,22 +282,25 @@
         <div class="row">
           <span class="label">Cropping mode</span>
           <div class="button-row">
-            <a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span></a>
+            <a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span>&nbsp;</a>
-            <a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+            <a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker"></span></a>
+            <a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker"></span></a>
+            <a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker"></span></a>
+            <a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
+            <a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
           </div>
         </div>
-        <!--<div class="row">
+        <div class="row">
-          <span class="label">Automatic aspect ratio autodetection:</span>
+          <span class="label">Custom aspect ratio</span>
-          <div class="button-row">
+          <div>
-            <a id="_autoar_disable_tmp" class="button _autoar _autoar_temp-disable">Temporarily disable</a>
+            <input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
-            <a id="_autoar_enable_tmp"          class="button _autoar _ar_auto hidden">Re-enable</a>
+            <br/><small>Aspect ratio can be entered in any of these forms (without quotes): 
-            <a id="_autoar_disable"           class="button _autoar _autoar_disable">Disable</a>
+              <ul style="display: block; padding-top: 0px; margin-top: 0px">
-            <a id="_autoar_enable"            class="button _autoar _autoar_enable hidden">Enable</a>
+                <li>fraction (<i>width/height</i>, e.g. <i>16/10</i>, <i>2560/1080</i>, etc.)</li>
+                <li>ratio (e.g. <i>1:2.35</i> or simply <i>2.35</i> — <i>1:</i> bit can be left out)</li>
+              </ul></small>
+          </div>
         </div>
-        </div>-->
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
@@ -291,23 +313,23 @@
       
       <div id="stretch-settings" class="suboption hidden">
         <p class="warning">
-          Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting via github or email.
+          Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting them.
         </p>
         
-        <span class="label">Default stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
+        <span class="label">Default stretching mode<br><small>You may need to reload for this option to take effect. NOTE: Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
         <div class="button-row">
-          <a id="_stretch_global_none"        class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+          <a id="_stretch_global_none"        class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
-          <a id="_stretch_global_basic"       class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
+          <a id="_stretch_global_basic"       class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>            
-          <a id="_stretch_global_hybrid"      class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
+          <a id="_stretch_global_hybrid"      class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
-          <a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
+          <a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
         </div>
         
-        <span class="label">Stretching mode for this video<br><small>Temporarily overrides default stretching mode.</small></span>
+        <span class="label">Temporary stretching mode<br><small>Temporarily overrides default stretching mode.</small></span>
         <div class="button-row">
-          <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
-          <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
+          <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>            
-          <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
-          <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
         </div>
       </div>