Version 2.0! Woohoooo!

README.md

@@ -19,11 +19,15 @@ The technology has been here for a while, but plenty of people don't know how to
 * **Fit video to width/height**
 * **Force specific aspect ratio**
 * **Attempts to automatically detect aspect ratio**
-* ~~**Rebindable shortcuts**~~
+* **Rebindable shortcuts**
+
+**Note that changing aspect ratio only works in fullscreen (at this time), which is a regression from 1.x**
 
 ### User interface
 
-There's no longer any user interface lol. Only keybinds.
+Most quick options for a page are accessible through a button in the extension bar. The options are pretty self-explanatory.
+
+![UI demo](img-demo/ui-popup-0.png)
 
 ### Default keyboard shortcuts
 
@@ -31,16 +35,15 @@ There's no longer any user interface lol. Only keybinds.
 `e`   - fit to height  
 `r`   - reset
 
-`a`   - attempt to automatically determine the aspect ratio (netflix only)  
+`a`   - attempt to automatically determine the aspect ratio 
 
-`s`   - force 21:9  
+`s`   - force 16:9  
-`d`   - force 16:9  
+`d`   - force 21:9  
-`x`   - force 16:10  
+`x`   - force 18:9  
-`c`   - force 4:3  
 
 ### About aspect ratio autodetection
 
-This is not available in AMO/Chrome version.
+This is not available in Chrome version yet. (Coming soon to AMO version).
 
 Aspect ratio autodetection is achieved by performing some black magic every 30-something milliseconds. This currently can't be turned off by default. If this extension makes video sites lag too much, open an issue and include your hardware and OS — **this is important for me to know in order to better optimize autodetection.**.
 
@@ -84,7 +87,16 @@ TODO: add stuff for 2.0
 
 ## Changelog
 
-###v2.0a1 (git/current version)
+###v2.0 (git version)
+
+* Completely rewritten
+* Automatic aspect ratio detection works on Youtube _and_ Netflix
+* Added popup for quick actions (serves as a replacement for player UI)
+* Restored settings page for keybinds.
+
+Getting automatic aspect ratio detection required some hacks, not sure how easy will be to port to chrome.
+
+###v2.0a1
 
 The extension is being rewritten almost ground-up, around automatic aspect ratio detection. By default, this extension now only works in fullscreen, but due to some simplification it should work on most sites. As direct result of this simplification:
 
@@ -95,7 +107,7 @@ The extension is being rewritten almost ground-up, around automatic aspect ratio
 * Zoom/unzoom options are gone
 * Can't customize keybinds yet
 
-###v1.3a1  (git/current version)
+###v1.3a1
 
 * Adding ability to add custom sites (in progress)
 * Most of the extension is being completely rewritten to accomodate that feature, which means there's a serious regression with Netflix support (no netflix at the moment)

js/conf/Debug.js

@@ -1,12 +1,22 @@
+// Set prod to true when releasing
+_prod = true; 
+// _prod = false;
+
 Debug = {
   debug: true,
   keyboard: true,
   debugResizer: true,
-  debugArDetect: false,
+  debugArDetect: true,
   debugStorage: true,
   showArDetectCanvas: false,
   flushStoredSettings: true
 }
 
+if(_prod){
+  for(var key in Debug){
+    Debug[key] = false;
+  }
+}
+
 if(Debug.debug)
   console.log("Guess we're debugging ultrawidify then. Debug.js must always load first, and others must follow.\nLoading: Debug.js");

js/conf/ExtensionConf.js

@@ -5,8 +5,11 @@ var _ec_mode = "blacklist"
 
 
 var _ec_init = function() {
-  console.log("pls implement");
+  
-  console.log("this: ", this);
+  if(Debug.debug){
+    console.log("pls implement");
+    console.log("this: ", this);
+  }
 }
 
 ExtensionConf = {

js/conf/Keybinds.js

@@ -4,56 +4,6 @@ if(Debug.debug)
 var _kbd_ModKeys = ["ctrlKey", "shiftKey", "altKey"];
 var _kbd_keybinds = {};
 
-var DEFAULT_KEYBINDINGS_OLD = [
-  { action: "fitw",
-    key: 'w',
-    modifiers: []
-  },
-  {
-    action: "fith", 
-    key: 'e',
-    modifiers: []
-  },
-  {
-    action: "reset",
-    key: 'r',
-    modifiers: []
-  },
-  {
-    action: "zoom",
-    key: "z",
-    modifiers: []
-  },
-  {
-    action: "unzoom",
-    key: "u",
-    modifiers: []
-  },
-  {
-    action: "char",
-    targetAR: 2.39,
-    key: "d",
-    modifiers: []
-  },
-  {
-    action: "char",
-    targetAR: 1.78,
-    key: "s",
-    modifiers: []
-  },
-  {
-    action: "char",
-    targetAR: 2.0,
-    key: "c",
-    modifiers: []
-  },
-  {
-    action: "autoar",
-    key: "a",
-    modifiers: []
-  }
-];
-
 var DEFAULT_KEYBINDINGS = {
   "w": {
     action: "fitw"

js/conf/Settings.js

@@ -46,6 +46,12 @@ var Settings = {
     allowedArVariance: 0.025, // % by which old ar can differ from the new
     timer_playing: 30,
     timer_paused: 3000,
+    timer_error: 3000,
+    hSamples: 1280,
+    vSamples: 720,
+    staticSampleCols: 9,      // we take a column at [0-n]/n-th parts along the width and sample it
+    randomSampleCols: 0,      // we add this many randomly selected columns to the static columns
+    staticSampleRows: 9,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks
     blacklist: [],            // banned on enabled: "global" 
     whitelist: []             // enabled on enabled: "whitelist-only", disabled on "disabled"
   },
@@ -55,6 +61,9 @@ var Settings = {
   miscFullscreenSettings: {
     videoFloat: "center"
   },
+  colors:{
+//     criticalFail: "background: #fa2; color: #000"
+  },
   init: _se_init,
   save: _se_save,
   reload: _se_reload,

js/modules/ArDetect.js

@@ -17,19 +17,33 @@ var _ard_timer
 // vrednosti v tabeli so na osminskih intervalih od [0, <sample height * 4> - 4].
 // we sample these lines in blackbox/stuff. 9 samples. If we change the canvas sample size, we have to correct these values as well
 // samples are every eighth between [0, <sample height * 4> - 4].
-var _ard_sampleLines = [ 0, 360, 720, 1080, 1440, 1800, 2160, 2520, 2876]
+var _ard_sampleLines = [ 0, 360, 720, 1080, 1440, 1800, 2160, 2520, 2876];
-
+var _ard_sampleCols = [ 128, 256, 384, 512, 640, 768, 896, 1024, 1125 ];
-
 
+var _ard_canvasWidth;
+var _ard_canvasHeight;
+var _ard_canvasDrawWindowHOffset = 0;
 
 // **** FUNCTIONS **** //
 
-var _arSetup = function(){
+var _arSetup = function(cwidth, cheight){
   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];
+  var existingCanvas = document.getElementById("uw_ArDetect_canvas");
+  if(existingCanvas){
+    if(Debug.debug)
+      console.log("[ArDetect::_ard_setup] existing canvas found. REMOVING KEBAB removing kebab\n\n\n\n(im hungry and you're not authorized to have it)");
+    
+    existingCanvas.remove();
+    
+    if(Debug.debug)
+      console.log("[ArDetect::_ard_setup] canvas removed");
+  }
+  
+    var vid = document.getElementsByTagName("video")[0];
   
   if(vid === undefined){
     _ard_setup_timer = setTimeout(_arSetup, 1000);
@@ -39,16 +53,19 @@ var _arSetup = function(){
   // imamo video, pa tudi problem. Ta problem bo verjetno kmalu popravljen, zato setup začnemo hitreje kot prej
   // we have a video, but also a problem. This problem will prolly be fixed very soon, so setup is called with
   // less delay than before
-  if(vid.videoWidth == 0){
+  if(vid.videoWidth === 0 || vid.videoHeight === 0){
     _ard_setup_timer = setTimeout(_arSetup, 100);
     return;
   }
   
+  
   var canvas = document.createElement("canvas");
   canvas.style.position = "absolute";
   
   //todo: change those values to push canvas off-screen
   
+  _ard_canvasWidth = cwidth ? cwidth : Settings.arDetect.hSamples;
+  _ard_canvasHeight = cheight ? cheight : Settings.arDetect.vSamples;
   
   if(Debug.showArDetectCanvas){
     canvas.style.left = "200px";
@@ -69,11 +86,16 @@ var _arSetup = function(){
   
   // do setup once
   // tho we could do it for every frame
-  var canvasScaleFactor =  1280 / vid.videoWidth;
+  if(cwidth && cheight){
-  var canvasWidth = vid.videoWidth * canvasScaleFactor;
+    var canvasWidth = cwidth;
-  var canvasHeight = vid.videoHeight * canvasScaleFactor;
+    var canvasHeight = cheight;
-  
+    var canvasScaleFactor = cheight / vid.videoHeight;
-  console.log("canvasScaleFactor, vid.videoWidth: ", canvasScaleFactor, vid.videoWidth);
+  }
+  else{
+    var canvasScaleFactor =  _ard_canvasWidth / vid.videoWidth;
+    var canvasWidth = vid.videoWidth * canvasScaleFactor;
+    var canvasHeight = vid.videoHeight * canvasScaleFactor;
+  }
   
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
@@ -83,18 +105,58 @@ var _arSetup = function(){
   _ard_oldAr = vid.videoWidth / vid.videoHeight;
   _ard_currentAr = _ard_oldAr;
   
+  try{
+    // determine where to sample
+    var ncol = Settings.arDetect.staticSampleCols;
+    var nrow = Settings.arDetect.staticSampleRows;
+    
+    var colSpacing = _ard_canvasWidth / ncol;
+    var rowSpacing = (_ard_canvasHeight * 4) / nrow;
+    
+    _ard_sampleLines = [];
+    _ard_sampleCols = [];
+
+    for(var i = 0; i < ncol; i++){
+      if(i < ncol - 1)
+        _ard_sampleCols.push(Math.round(colSpacing * i));
+      else{
+        _ard_sampleCols.push(Math.round(colSpacing * i) - 1);
+      }
+    }
+    
+    for(var i = 0; i < nrow; i++){
+      if(i < ncol - 5)
+        _ard_sampleLines.push(Math.round(rowSpacing * i));
+      else{
+        _ard_sampleLines.push(Math.round(rowSpacing * i) - 4);
+      }
+    }
+  }
+  catch(ex){
+    console.log("%c[ArDetect::_arSetup] something went terribly wrong when calcuating sample colums.", Settings.colors.criticalFail);
+    console.log("settings object:", Settings);
+    console.log("error:", ex);
+  }
+  
   this._forcehalt = false;
   _ard_vdraw(vid, context, canvasWidth, canvasHeight, false);
 };
 
+var _ard_canvasReadyForDrawWindow = function(){
+  if(Debug.debug)
+    console.log("%c[ArDetect::_ard_canvasReadyForDrawWindow] (?)", "color: #44f", _ard_canvasHeight == window.innerHeight, "(ard_height:", _ard_canvasHeight, "| window height:", window.innerHeight, ")");
   
+  return _ard_canvasHeight == window.innerHeight
+}
 
-
+var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode){
-var _ard_processAr = function(video, width, height, edge_h, edge_w){
   // width, height —> canvas/sample
   
   //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 we don't specify these things, they'll have some default values.
   if(edge_h === undefined){
     edge_h = 0;
@@ -104,7 +166,14 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
   var letterbox = 2 * edge_h;
   var trueHeight = height - letterbox;
   
+  if(fallbackMode){
+    if(edge_h > 1 && edge_h < 20)
+      return;
     
+    // let's add some safety border to avoid automatic ar toggling between 21:9 and 16:9
+    
+    trueHeight += 6;
+  }
   
   
   var trueAr = width / trueHeight;
@@ -146,6 +215,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   if(this._forcehalt)
     return;
   
+  var fallbackMode = false;
   var blackbar_tresh = 10;  // how non-black can the bar be
   var how_far_treshold = 8; // how much can the edge pixel vary (*4)
   
@@ -154,15 +224,56 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   
   if(vid === undefined || vid.paused || vid.ended || Status.arStrat != "auto"){
     // we slow down if paused, no detection
-    _ard_timer = setTimeout(_ard_vdraw, 3000, vid, context, w, h);
+    _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_paused, vid, context, w, h);
     return false;
   }
   
+  try{
+    context.drawImage(vid, 0,0, w, h);
+  }
+  catch(ex){
+    if(Debug.debug)
+      console.log("%c[ArDetect::_ard_vdraw] can't draw image on canvas. Trying canvas.drawWindow instead", "color:#000; backgroud:#f51;", ex);
     
-  context.drawImage(vid, 0,0, w, h);
+    try{
+      if(_ard_canvasReadyForDrawWindow()){
+        context.drawWindow(window, _ard_canvasDrawWindowHOffset, 0, w, h, "rgba(0,0,0,1)");
+        if(Debug.debug)
+          console.log("%c[ArDetect::_ard_vdraw] canvas.drawImage seems to have worked", "color:#000; backgroud:#2f5;");
+        fallbackMode = true;
+      }
+      else{
+        // canvas needs to be resized, so let's change setup
+        _ard_stop();
         
+        var newCanvasWidth = window.innerHeight * 1.77;
+        var newCanvasHeight = window.innerHeight;
+        
+        if(Settings.miscFullscreenSettings.videoFloat == "center")
+          _ard_canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);
+        else if(Settings.miscFullscreenSettings.videFloat == "left")
+          _ard_canvasDrawWindowHOffset = 0;
+        else
+          _ard_canvasDrawWindowHOffset = window.innerWidth - newCanvasWidth;
+        
+        _arSetup(newCanvasWidth, newCanvasHeight);
+        return;
+      }
+      
+    }
+    catch(ex){
+      if(Debug.debug)
+        console.log("%c[ArDetect::_ard_vdraw] okay this didnt work either", "color:#000; backgroud:#f51;", ex);
+      
+      _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_error, vid, context, w, h);
+      return;  
+    }
+    
+//     _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_error, vid, context, w, h);
+//     return;
+  }
   // "random" columns — todo: randomly pick some more
-  var rc = [ 128, 256, 384, 512, 640, 768, 896, 1024, 1125 ];
+  var rc = _ard_sampleCols;
 
 
   var cimg = [];
@@ -178,7 +289,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   isLetter=true;
   for(var i in cols){
     // if any of those points fails this check, we aren't letterboxed
-    isLetter &= (cols[i][4] <= blackbar_tresh && cols[i][5] <= blackbar_tresh && cols[i][6] <= blackbar_tresh);
+    isLetter &= (cols[i][0] <= blackbar_tresh && cols[i][1] <= blackbar_tresh && cols[i][2] <= blackbar_tresh);
     // should also check bottom
   }
 
@@ -187,6 +298,10 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     // sedaj razveljaviti
     // even if we don't deect letterbox, we still issue processAr in case we adjusted for letterbox earlier and need to exit
     // corrected mode.
+    if(Debug.debug){
+      console.log("%c[ArDetect::_ard_vdraw] no edge detected. canvas has no edge.", "color: #aaf");
+    }
+    
     _ard_processAr(vid, w, h);
     
     _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
@@ -334,7 +449,11 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     // zakaj smo potem sploh tukaj?
     // why exactly are we here again?
     
-    _ard_processAr(vid, w, h);
+    if(Debug.debug){
+      console.log("%c[ArDetect.js] aspect ratio change is being triggered by an event we thought shouldn't be triggering it. Strange.\n\n","color: #4af", "color_lowermost (8=bad):", color_lowermost, "color_uppermost (0=bad):", color_uppermost);
+    }
+    
+//     _ard_processAr(vid, w, h);
     _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
     return;
   }
@@ -357,7 +476,8 @@ var _ard_vdraw = function (vid, context, w, h, conf){
          cols[  cu_col[i]  ][ j+1 ] > blackbar_tresh &&
          cols[  cu_col[i]  ][ j+2 ] > blackbar_tresh ){
         
-        console.log("detecting value higher than blackbar_tresh!");
+        if(Debug.debug)
+          console.log("detecting value higher than blackbar_tresh!");
         
         tmpEndPixel = j >> 2;
         break;
@@ -411,7 +531,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   isLetter = (letterDiff < h * Settings.arDetect.allowedMisaligned);
   
   if(isLetter)
-    _ard_processAr(vid, w, h, topPixel);
+    _ard_processAr(vid, w, h, topPixel, null, fallbackMode);
   
   _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h);
 }

js/uw.js

@@ -51,8 +51,15 @@ async function main(){
   
   
   
-  if(Settings.arDetect.enable == "global")
+  if(Settings.arDetect.enabled == "global"){
+    if(Debug.debug)
+      console.log("[uw::main] Aspect ratio detection is enabled. Starting ArDetect");
     ArDetect.arSetup();
+  }
+  else{
+    if(Debug.debug)
+      console.log("[uw::main] Aspect ratio detection is disabled. This is in settings:", Settings.arDetect.enabled);
+  }
   
   document.addEventListener("mozfullscreenchange", function( event ) {
     if(Debug.debug){

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Ultrawidify-git",
-  "version": "2-a1",
+  "version": "2.0",
   
   "icons": {
     "32":"res/icons/uw-32.png",

res/settings/settings.js.old

@@ -1,860 +0,0 @@
-// Autogenerated using buildext. This file should not be modified — modify source files instead.
-
-//BEGIN included from lib/libopts.js
-// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča
-// setopt, getopt, delopt. They set/get/delete stuff from the storage
-
-function setopt(item){
-  browser.storage.local.set(item);
-}
-function getopt(prop, callback){
-  if(usebrowser == "chrome")
-    browser.storage.local.get(prop, callback);
-  else
-    browser.storage.local.get(prop).then(callback);
-} 
-function delopt(item){
-  browser.storage.local.remove(item);
-}
-//END included from lib/libopts.js
-
-
-//BEGIN included from lib/uiutils.js
- 
-//END included from lib/uiutils.js
-
-
-//BEGIN included from conf/sitesconf.js
-var UW_SITES = {
-  youtube: {
-    enabled: true,
-    type: "official",
-    urlRules: ["youtu"],
-    player: {
-      name: "movie_player",
-      isClass: false,
-    },
-    iframe: {
-      name: "player",
-      isClass: false
-    },
-    ui: {
-      uiMode: "native",
-      uiconf: {
-        sampleButton: {
-          class: "ytp-button ytp-settings-button",
-          index: 0,
-          buttonSizeBase: "x",
-        },
-        uiParent: {
-          name: "ytp-right-controls",
-          isClass: true,
-          insertStrat: "prepend",
-        },
-        uiOffset: {
-          offsetBy: "10vh",
-          offsetType: "css"
-        }
-      }
-    },
-    autoar_imdb:{
-      enabled: false
-    }
-  },
-  netflix: {
-    enabled: true,
-    type: "official",
-    urlRules: ["netflix"],
-    player: {
-      name: "placeholder",
-      isClass: true,
-    },
-    ui: {
-      uiMode: "native",
-      uiconf: {
-        sampleButton: {
-          class: "ytp-button ytp-settings-button",
-          index: 0,
-          buttonSizeBase: "x",
-        },
-        uiParent: {
-          name: "player-controls-wrapper",
-          isClass: true,
-          insertStrat: "append"
-        },
-        uiOffset: {
-          offsetBy: "0px",
-          offsetType: "css"
-        }
-      }
-    },
-    autoar_imdb:{
-      enabled: true,
-      title: "player-status-main-title",
-      isClass: true
-    }
-  },
-  dummy: {
-    type: "add new site",
-    urlRules: [""],
-    player: {
-      name: "",
-      isClass: false,
-    },
-    sampleButton: {
-      class: "ytp-button ytp-settings-button",
-      index: 0,
-      buttonSizeBase: "x",
-    },
-    uiParent: {
-      name: "",
-      isClass: false,
-      insertStrat: "prepend",
-    },
-    autoar_imdb:{
-      enabled: false
-    }
-  }
-} 
-//END included from conf/sitesconf.js
-
-
-
-var browser_autodetect = true;
-var usebrowser = "chrome";
-var debugmsg = true;
-
-if(browser_autodetect){
-  if(typeof browser === "undefined"){ 
-    if(chrome){
-      browser = chrome; 
-      usebrowser = "chrome";
-    }
-  }
-  else
-    usebrowser = "firefox";
-}
-else{
-  if(usebrowser == "chrome")
-    browser = chrome;
-}
-
-var UW_SITES = {};
-
-function showAbout(){
-  clearPage();
-  
-  document.getElementById("about").classList.remove("hide");
-  document.getElementById("tab_about").classList.add("tab-selected");
-}
-function showShortcuts(){
-  clearPage();
-  
-  document.getElementById("uw_shortcuts").classList.remove("hide");
-  document.getElementById("tab_shortcuts").classList.add("tab-selected");
-}
-function showGeneralSettings(){
-  clearPage();
-  
-  document.getElementById("general_settings").classList.remove("hide");
-  document.getElementById("tab_general_settings").classList.add("tab-selected");
-}
-
-function showSites(){
-  clearPage();
-  document.getElementById("uw_sites").classList.remove("hide");
-  document.getElementById("tab_sites").classList.add("tab-selected");
-}
-
-function clearPage(){
-  // Hide you sections
-  document.getElementById("uw_shortcuts").classList.add("hide");
-  document.getElementById("about").classList.add("hide");
-  document.getElementById("general_settings").classList.add("hide");
-  document.getElementById("uw_sites").classList.add("hide");
-  
-  // Hide you tabs
-  document.getElementById("tab_shortcuts").classList.remove("tab-selected");
-  document.getElementById("tab_about").classList.remove("tab-selected");
-  document.getElementById("tab_general_settings").classList.remove("tab-selected");
-  document.getElementById("tab_sites").classList.remove("tab-selected");
-  
-}
-
-function saveopts(){
-  
-  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
-  var new_keybinds = {};
-
-  // Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami.
-  // Let's read our form and make a new object with keybinds.
-  
-  for(var i = 0; i < actions.length; i++){
-    var action = actions[i];
-    var targetAR = "";
-    
-    if(action == "ar219"){
-      action = "char";
-      targetAR = (21/9);
-    }
-    if(action == "ar169"){
-      action = "char";
-      targetAR = (16/9);
-    }
-    if(action == "ar1610"){
-      action = "char";
-      targetAR = (16/10);
-    }
-    if(action == "ar43"){
-      action = "char";
-      targetAR = (4/3);
-    }
-    
-    if(targetAR != ""){
-      var keybind = {
-        action: action,
-        targetAR: targetAR,
-        key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
-        modifiers: []
-      }
-    }
-    else{
-      var keybind = {
-        action: action,
-        key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
-        modifiers: []
-      }
-    }
-    
-    if(document.querySelector("#" + actions[i] + "_ctrl").checked)
-      keybind.modifiers.push("ctrl");
-    if(document.querySelector("#" + actions[i] + "_alt").checked)
-      keybind.modifiers.push("alt");
-    if(document.querySelector("#" + actions[i] + "_shift").checked)
-      keybind.modifiers.push("shift");
-    
-    new_keybinds[i] = keybind;
-  }
-  
-  // Preveriti moramo, da nismo dvema možnostima dodali isto bližnjico.
-  // We need to check if all keybinds are unique.
-  
-  var fail = false;
-
-  for(var i = 0; i < actions.length; i++)
-    document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
-  
-  for(var i = 0; i < actions.length; i++){
-    if(new_keybinds[i].key == "")
-      continue;
-    
-    for(var j = i + 1; j < actions.length; j++){
-      if(new_keybinds[i].key == new_keybinds[j].key){
-        if(compareModifiers(new_keybinds[i].modifiers, new_keybinds[j].modifiers)){
-          fail = true;
-          document.querySelector("#" + actions[i] + "_letter").classList.add("dup_keybinds");
-          document.querySelector("#" + actions[j] + "_letter").classList.add("dup_keybinds");
-        }
-      }
-    }
-  }
-  
-  if (!fail){
-    browser.storage.local.set({ultrawidify_keybinds:new_keybinds});
-  }
-  
-}
-
-function saveAutoar(){
-  setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked});
-}
-
-function saveUI(){
-  var show_ui = document.querySelector("#enable_ui");
-  var ui_compact = document.querySelector("#enable_ui_compact");
-  var optionLine = document.getElementById("compact_ui_suboption");
-  
-  if(show_ui.checked){
-    ui_compact.disabled = false;
-    optionLine.classList.remove("hide");
-    setopt({ultrawidify_ui: ui_compact.checked ? "compact" : "all" });
-  }
-  else{
-    ui_compact.disabled = true;
-    optionLine.classList.add("hide");
-    setopt({ultrawidify_ui: "none"});
-  }
-}
-
-
-function compareModifiers(a,b){
-  //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj
-  //      dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo).
-  //NOTE: this is bad and totally unfoolproof practice. In our example comparing arrays the way we do works
-  //      because values ALWAYS appear in the same order: 'ctrl' always appears before 'alt' (or it doesn't
-  //      appear at all). 'alt' always appears before 'shift' (or it doesn't appear at all). 
-  if(a.length != b.length)
-    return false;
-  
-  var match = true;
-  for(var i = 0; i < a.length; i++)
-    match &= a[i] == b[i]
-  
-  return match;
-}
-
-function printerr(err){
-  console.log(err);
-}
-
-function gotopts(opts){
-  if(!opts.ultrawidify_keybinds){
-    console.log("ultrawidify keybinds are undefined. the fuck?",opts);
-    return;
-  }
-  var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
-  // google chrome is really the untermensch browse       // google chrome is really the untermensch browserr
-  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
-  for(var i = 0; i < actions.length; i++){
-    document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
-    document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key;
-    for(var j = 0; j < KEYBINDS[i].modifiers.length; j++){
-      if(KEYBINDS[i].modifiers[j] == "ctrl")
-        document.querySelector("#" + actions[i] + "_ctrl").checked = true;
-      if(KEYBINDS[i].modifiers[j] == "alt")
-        document.querySelector("#" + actions[i] + "_alt").checked = true;
-      if(KEYBINDS[i].modifiers[j] == "shift")
-        document.querySelector("#" + actions[i] + "_shift").checked = true;
-    }
-  }
-}
-
-function gotar(opts){
-  
-}
-
-function gotui(opts){
-  var show_ui = document.querySelector("#enable_ui");
-  var ui_compact = document.querySelector("#enable_ui_compact");
-  var optionLine = document.getElementById("compact_ui_suboption");
-  
-  if(opts.ultrawidify_ui == "all"){
-    show_ui.checked = true;
-    ui_compact.checked = false;
-    optionLine.classList.remove("hide");
-  }
-  else if(opts.ultrawidify_ui == "compact"){
-    show_ui.checked = true;
-    ui_compact.checked = true;
-    optionLine.classList.remove("hide");
-  }
-  else if(opts.ultrawidify_ui == "none"){
-    show_ui.checked = false;
-    ui_compact.checked = false;
-    optionLine.classList.add("hide");
-  }
-}
-
-function gotsites(opts){
-  
-  var list = document.getElementById("uw_sites_list");
-  
-  if(list)
-    list.remove();
-  
-  var anchor = document.getElementById("uw_sites_body");
-  
-  // at the top of the list, there is this option to reset site config
-  resetLink = document.createElement("a");
-  resetLink.onclick = function(){ delopt("ultrawidify_siterules"); setopt({"ultrawidify_siterules":UW_SITES}); };
-  resetLink.textContent = "Reset site options to default";
-  anchor.appendChild(resetLink); 
-  
-  
-  list = document.createElement("div");
-  list.id = "uw_sites_list";
-  list.className = "uw_sites";
-  
-  anchor.appendChild(list);
-  
-  uw_sites = opts.ultrawidify_siterules;
-  UW_SITES = uw_sites;
-  if(debugmsg)
-    console.log("uw settings::gotopts | site opts:",opts);
-  
-  for (type in {"official":1,"non-official":1,"custom":1, "add new site":1} ) {  // unparalleled laziness!
-    if(debugmsg){
-      console.log("uw settings::gotopts | adding sites of type" , type);
-    }
-    var head = document.createElement("div");
-    head.className = "sites_header";
-    head.textContent = type.charAt(0).toUpperCase() + type.slice(1);
-    
-    var category_desc = document.createElement("div");
-    if(type == "official"){
-      category_desc.innerHTML = "These sites are officially supported by the extension developer. These sites should always work. <small>(Pro tip: if you don't want extension to run on some of the following sites, uncheck the checkbox for that site)</small>";
-    }
-    else if(type == "non-official"){
-      category_desc.textContent = "Sites in this category have been contribued by third parties. These sites will probably work, but the developer couldn't test whether they work or not.";
-    }
-    else if(type == "custom"){
-      category_desc.textContent = "In this section, you can define rules for sites that aren't supported either officially or non-officially. See [todo: link] contributing for details. If you define a custom site, please consider sharing configuration on github (see contributing for details).";
-    }
-    else if(type == "add new site"){
-      category_desc.textContent = "Add a custom site by filling the form below.";
-    }
-    
-    list.append(head);
-    list.append(category_desc);
-    
-    var category_counter = 0;
-    
-    for (site in uw_sites) {
-      if(debugmsg)
-        console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring");
-      
-      if(uw_sites[site].type == type){
-        var entry = document.createElement("div");
-        var header = document.createElement("div");
-        
-        header.id = site + "_display";
-        header.className = "uw_options_line site_details";
-        
-        
-        var siteTitle = document.createElement("div");
-        siteTitle.className = "site_name";
-        {
-          var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true);
-          var editTitle = mkebox(site, site, "title");
-          editTitle.className = "site_title_ebox";
-          siteTitle.append(sitecb);
-          siteTitle.append(editTitle);
-          
-          var editBtn = document.createElement("div");
-          editBtn.textContent = "« edit »";
-          editBtn.className = "inline_button";
-          editBtn.id = site + "_edit_button";
-          editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)});
-          
-          var saveBtn = document.createElement("div");
-          saveBtn.textContent = "« save »";
-          saveBtn.className = "inline_button hide";
-          saveBtn.id = site + "_save_button";
-          saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)});
-          
-          var cancelBtn = document.createElement("div");
-          cancelBtn.textContent = "« cancel »";
-          cancelBtn.className = "inline_button hide";
-          cancelBtn.id = site + "_cancel_button";
-          cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)});
-          
-          siteTitle.append(editBtn);
-          siteTitle.append(saveBtn);
-          siteTitle.append(cancelBtn);
-        }
-        header.appendChild(siteTitle);
-        entry.appendChild(header);
-        
-        var body = document.createElement("div");
-        var jsonForm = document.createElement("textarea");
-        jsonForm.cols = 64;
-        jsonForm.rows = 32;
-        
-        jsonForm.value = JSON.stringify(uw_sites[site], null, 2);
-        
-        body.appendChild(jsonForm);
-//         body.classNamež
-        entry.appendChild(body);
-        list.append(entry);
-        
-        
-        category_counter++;
-      }
-    }
-    
-    
-//     for (site in uw_sites){
-//       if(debugmsg)
-//         console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring");
-//       
-//       if(uw_sites[site].type == type){
-//         
-//         var entry = document.createElement("div");
-//         var displayedInfo = document.createElement("div");
-//         displayedInfo.id = site + "_display";
-//         displayedInfo.className = "uw_options_line site_details";
-//         
-//         var siteTitle = document.createElement("div");
-//         siteTitle.className = "site_name";
-//         
-//         {
-//           var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true);
-//           var editTitle = mkebox(site, site, "title");
-//           editTitle.className = "site_title_ebox";
-//           siteTitle.append(sitecb);
-//           siteTitle.append(editTitle);
-//           
-//           var editBtn = document.createElement("div");
-//           editBtn.textContent = "« edit »";
-//           editBtn.className = "inline_button";
-//           editBtn.id = site + "_edit_button";
-//           editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)});
-//           
-//           var saveBtn = document.createElement("div");
-//           saveBtn.textContent = "« save »";
-//           saveBtn.className = "inline_button hide";
-//           saveBtn.id = site + "_save_button";
-//           saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)});
-//           
-//           var cancelBtn = document.createElement("div");
-//           cancelBtn.textContent = "« cancel »";
-//           cancelBtn.className = "inline_button hide";
-//           cancelBtn.id = site + "_cancel_button";
-//           cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)});
-//           
-//           siteTitle.append(editBtn);
-//           siteTitle.append(saveBtn);
-//           siteTitle.append(cancelBtn);
-//         }
-//         
-//         var siteDetails = document.createElement("div");
-//         siteDetails.id = site + "_conf_details";
-//         siteDetails.classList = "hide";
-//         
-//         var urlRules = document.createElement("div");
-//         {
-//           var urlRulesLabel = document.createElement("span");
-//           urlRulesLabel.textContent = "URL rule: ";
-//           
-//           urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0], "url_rules");
-//           
-//           urlRules.append(urlRulesLabel);
-//           urlRules.append(urlRulesEbox);
-//         }
-//         
-//         var playerElement = document.createElement("div");
-//         
-//         {
-//           var playerName = document.createElement("div");
-//           
-//           var playerNameLabel = document.createElement("span");
-//           
-//           playerNameLabel.textContent = "id of the player container:";
-//           var playerNameEbox = mkebox(site, uw_sites[site].player.name, "player_name");
-//           
-//           playerName.append(playerNameLabel);
-//           playerName.append(playerNameEbox);
-//           
-//           var playerClass = document.createElement("div");
-//           var pcb = document.createElement("input");
-//           pcb.className = site + "_ebox";
-//           pcb.type = "checkbox";
-//           pcb.name = site + "_pccb_name";
-//           pcb.id = site + "_pccb_id";
-//           pcb.checked = uw_sites[site].player.isClass;
-//           pcb.disabled = true;
-//           
-//           var pcblabel = document.createElement("span");
-//           pcblabel.textContent = " Name of the player container is a class";
-//           
-//           playerClass.append(pcb);
-//           playerClass.append(pcblabel);
-//           playerElement.append(playerName);
-//           playerElement.append(playerClass);
-//         }
-//         
-//         var iframe_playerName = document.createElement("div");
-//         var ipn_label = document.createElement("span");
-//         ipn_label.textContent = "id of the player container when in an iframe:";
-//         ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "iframe_name");
-//         iframe_playerName.append(ipn_label);
-//         iframe_playerName.append(ipn_ebox);
-//         
-//         var iframe_playerClass = document.createElement("div");
-//         var ipc_label = document.createElement("span");
-//         ipc_label.textContent = " Name of the player container is a class";
-//         var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "iframe_class");
-//         iframe_playerClass.append(ipc_cb);
-//         iframe_playerClass.append(ipc_label);
-//         
-//         
-//         var sampleButton = document.createElement("div");
-//         var sbc = document.createElement("div");
-//         var sbi = document.createElement("div");
-//         var sbo = document.createElement("div");
-//         var sbc_label = document.createElement("span");
-//         var sbi_label = document.createElement("span");
-//         var sbo_label = document.createElement("span");
-//         sbc_label.textContent = "Sample button class:";
-//         sbi_label.textContent = "Sample button index:";
-//         sbo_label.textContent = "Use height for UI scaling";
-//         var sampleButtonClass = mkebox(site, uw_sites[site].sampleButton.class, "sample_button_class");
-//         var sampleButtonIndex = mkebox(site, uw_sites[site].sampleButton.index, "sample_button_index");
-//         var buttonSizeBase = mkcb(site, uw_sites[site].sampleButton.buttonSizeBase == "y", "sample_button_size_base");
-//         
-//         sbc.append(sbc_label);
-//         sbc.append(sampleButtonClass);
-//         sampleButton.append(sbc);
-//         
-//         sbi.append(sbi_label);
-//         sbi.append(sampleButtonIndex);
-//         sampleButton.append(sbi);
-//         
-//         sbo.append(buttonSizeBase);
-//         sbo.append(sbo_label);
-//         sampleButton.append(sbo);
-//         
-//         var imdbar = document.createElement("div");
-//         var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb, "imdbar");
-//         var imdbar_label = document.createElement("span");
-//         imdbar_label.textContent = " This site supports automatic aspect ratio detection";
-//         imdbar.append(imdbar_cb);
-//         imdbar.append(imdbar_label);
-//         
-//         var imdbar_title = document.createElement("div");
-//         var it_label = document.createElement("span");
-//         it_label.textContent = "id of the element containing video title:";
-//         it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "imdbar_title");
-//         imdbar_title.append(it_label);
-//         imdbar_title.append(it_ebox);
-//         
-//         var imdbar_class = document.createElement("div");
-//         var ic_label = document.createElement("span");
-//         ic_label.textContent = " Name of the title container is a class";
-//         var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "imdbar_class");
-//         imdbar_class.append(ic_cb);
-//         imdbar_class.append(ic_label);
-//         
-//         
-//         
-//         
-//         
-//         var optionspad = document.createElement("div");
-//         optionspad.textContent = "-------------";
-//         
-//         
-//         siteDetails.append(urlRules);
-//         siteDetails.append(playerElement);
-//         siteDetails.append(optionspad);
-//         siteDetails.append(iframe_playerName);
-//         siteDetails.append(iframe_playerClass);
-//         siteDetails.append(optionspad);
-//         
-//         siteDetails.append(sampleButton);
-//         
-//         siteDetails.append(imdbar);
-//         siteDetails.append(imdbar_title);
-//         siteDetails.append(imdbar_class);
-// //         siteDetails.append(optionspad);
-//         
-//         
-//         displayedInfo.append(siteTitle);
-//         displayedInfo.append(siteDetails);
-//         
-//         entry.append(displayedInfo);
-//         
-//         list.append(entry);
-//         
-//         category_counter++;
-//         
-//         if(site == "dummy" && type == "add new site"){
-//           if(debugmsg)
-//             console.log("uw settings::gotsites | we are adding dummy site");
-//           enableEditing("dummy");
-//           document.getElementById("dummy_title_ebox").disabled = false;
-//         }
-//       }
-//     }
-    if(! category_counter){
-      var noEntriesMsg = document.createElement("div");
-      noEntriesMsg.textContent = "There's no entries in this category yet";
-      noEntriesMsg.classList = "red";
-      list.append(noEntriesMsg);
-    }
-  }
-  
-}
-
-function mkebox(site, value, id){
-  var ebox = document.createElement("input");
-  ebox.className = "site_details details_ebox " + site + "_ebox",
-  ebox.id = site + "_" + id + "_ebox";
-  ebox.type = "text";
-  ebox.value = value;
-  ebox.disabled = true;
-  
-  return ebox;
-}
-
-function mkcb(site, checked, id, forceEnable){
-  var cb = document.createElement("input");
-  cb.type = "checkbox";
-  cb.name = site + "_cb_name";
-  cb.id = site + "_" + id + "_cb";
-  cb.checked = checked;
-  
-  if(!forceEnable){
-    cb.disabled = true;
-    cb.className = site + "_ebox";
-  }
-  return cb;
-}
-
-function enableEditing(site){
-  showSiteDetails(site);
-  if(debugmsg)
-    console.log("uw settings :: enableEditing | enabling editing for",site);
-  
-  var formElements = document.getElementsByClassName(site + "_ebox");
-  
-  if(!formElements)
-    return;
-  
-  if(debugmsg)
-    console.log("form elements: ", formElements);
-  
-  for(var i = 0; i < formElements.length; i++){
-    formElements[i].disabled = false;
-  }
-  
-  var editButton = document.getElementById(site + "_edit_button");
-  if( editButton )
-    editButton.classList.add("hide");
-  else
-    return;
-  
-  try{
-    document.getElementById(site + "_save_button").classList.remove("hide");
-    document.getElementById(site + "_cancel_button").classList.remove("hide");
-  } catch (e){};
-}
-
-function disableEditing(site){
-  var formElements = document.getElementsByClassName(site + "_ebox");
-  
-  if(!formElements)
-    return;
-  
-  for(var i = 0; i < formElements.length; i++){
-    formElements[i].disabled = true;
-  }
-  
-  var editButton = document.getElementById(site + "_edit_button");
-  if( editButton )
-    editButton.classList.remove("hide");
-  else
-    return;
-  
-  try{
-    document.getElementById(site + "_save_button").classList.add("hide");
-    document.getElementById(site + "_cancel_button").classList.add("hide");
-  } catch (e){};
-}
-
-function cancelEditing(site){
-  if(site != "dummy"){
-    disableEditing(site);
-    hideSiteDetails(site);
-  }
-  setSiteOpts(site, UW_SITES[site]);
-}
-
-function saveEdited(site){
-  
-  console.log("uw settings::saveEdited | this is our site:",site,"is this 'dummy'?", site == "dummy");
-  
-  if(site == "dummy"){
-    var newsite = getSiteOpts(site);
-    newsite.type = "custom";
-    newsite.enabled = true;
-    UW_SITES[document.getElementById("dummy_title_ebox").value] = newsite;
-  }
-  else{
-    UW_SITES[site] = getSiteOpts(site);
-//     disableEditing(site);
-//     hideSiteDetails(site);
-  }
-  setopt({ultrawidify_siterules: UW_SITES});
-  
-  if(site == "dummy")
-    gotsites({ultrawidify_siterules: UW_SITES});
-  
-}
-
-function showSiteDetails(site){
-  try{
-    document.getElementById(site + "_conf_details").classList.remove("hide");
-  }catch(me_outside_how_about_that){}
-}
-
-function hideSiteDetails(site){
-  try{
-    document.getElementById(site + "_conf_details").classList.add("hide");
-  }catch(me_outside_how_about_that){}
-}
-
-
-function getSiteOpts(site){
-  var newOptions = {};
-  
-  newOptions.urlRules = [ document.getElementById(site + "_url_rules_ebox").value ];
-  newOptions.player = {};
-  newOptions.player.name = document.getElementById(site + "_player_name_ebox").value;
-  newOptions.player.isClass = document.getElementById(site + "_pccb_id").checked;
-  newOptions.iframe = {};
-  newOptions.iframe.name = document.getElementById(site + "_iframe_name_ebox").value;
-  newOptions.iframe.isClass = document.getElementById(site + "_iframe_class_cb").checked;
-  newOptions.autoar_imdb = {};
-  newOptions.autoar_imdb.enabled = document.getElementById(site + "_imdbar_cb").value;
-  newOptions.autoar_imdb.title = document.getElementById(site + "_imdbar_title_ebox").value;
-  newOptions.autoar_imdb.isClass = document.getElementById(site + "_imdbar_class_cb").checked;
-  
-  return newOptions;
-}
-
-function setSiteOpts(site, opts){
-  document.getElementById(site + "_url_rules_ebox").value = opts.urlRules[0];
-  document.getElementById(site + "_player_name_ebox").value = opts.player.name;
-  document.getElementById(site + "_pccb_id").checked = opts.player.isClass;
-  if(opts.iframe){
-    document.getElementById(site + "_iframe_name_ebox").value = opts.iframe.name;
-    document.getElementById(site + "_iframe_class_cb").checked = opts.iframe.isClass;
-  }
-  if(opts.autoar_imdb){
-    document.getElementById(site + "_imdbar_cb").checked = opts.autoar_imdb.enabled;
-    if(opts.autoar_imdb.enabled){
-      document.getElementById(site + "_imdbar_title_ebox").value = opts.autoar_imdb.title;
-      document.getElementById(site + "_imdbar_class_cb").value = opts.autoar_imdb.isClass
-    }
-  }
-}
-
-
-function loadopts(){
-  
-  getopt("ultrawidify_keybinds", gotopts);
-//   getopt("ultrawidify_autoar", gotar)
-  getopt("ultrawidify_ui", gotui);
-  getopt("ultrawidify_siterules", gotsites);
-  
-  // We build ui for 'site options' here
-//   buildSites();
-  
-}
-
-
-// page init
-document.addEventListener("DOMContentLoaded", loadopts);
-
-document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
-document.querySelector("#tab_about").addEventListener("click", showAbout);
-document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings);
-document.querySelector("#tab_sites").addEventListener("click", showSites);
-
-document.querySelector("#kb_save").addEventListener("click", saveopts);
-document.querySelector("#kb_cancel").addEventListener("click",loadopts);
-
-document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
-document.querySelector("#enable_ui").addEventListener("click", saveUI);
-document.querySelector("#enable_ui_compact").addEventListener("click", saveUI);
-getopt("ultrawidify_autoar",function(obj){document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar});