form for editing site options was turned into a textarea. todo: proper saving

js/uw.js

@@ -1,5 +1,34 @@
 // Autogenerated using buildext. This file should not be modified — modify source files instead.
 
+//BEGIN included from lib/debuginit.js
+ var debugmsg = true;
+ var debugmsg_click = false;
+ var debugmsg_message = false;
+ var debugmsg_autoar = false;
+ var debugmsg_periodic = false;
+ var debugmsg_ui = true;
+ var force_conf_reload = true;
+ if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){
+   console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+   console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n");
+   
+   if(debugmsg)
+     console.log("Logging all");
+   
+   if(debugmsg_click)
+     console.log("Logging debugmsg_click");
+   
+   if(debugmsg_message)
+     console.log("Logging debugmsg_message");
+   
+   if(debugmsg_autoar)
+     console.log("Logging autoar");
+   
+   console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+ }
+//END included from lib/debuginit.js
+
+
 //BEGIN included from conf/uiconf.js
  var UW_UI_BUTTONS = {
    fitw: {
@@ -134,15 +163,24 @@ var UW_SITES = {
       name: "player",
       isClass: false
     },
-    sampleButton: {
+    ui: {
-      class: "ytp-button ytp-settings-button",
+      uiMode: "native",
-      index: 0,
+      uiconf: {
-      buttonSizeBase: "x",
+        sampleButton: {
-    },
+          class: "ytp-button ytp-settings-button",
-    uiParent: {
+          index: 0,
-      name: "ytp-right-controls",
+          buttonSizeBase: "x",
-      isClass: true,
+        },
-      insertStrat: "prepend",
+        uiParent: {
+          name: "ytp-right-controls",
+          isClass: true,
+          insertStrat: "prepend",
+        },
+        uiOffset: {
+          offsetBy: "10vh",
+          offsetType: "css"
+        }
+      }
     },
     autoar_imdb:{
       enabled: false
@@ -156,15 +194,24 @@ var UW_SITES = {
       name: "placeholder",
       isClass: true,
     },
-    sampleButton: {
+    ui: {
-      class: "ytp-button ytp-settings-button",
+      uiMode: "native",
-      index: 0,
+      uiconf: {
-      buttonSizeBase: "x",
+        sampleButton: {
-    },
+          class: "ytp-button ytp-settings-button",
-    uiParent: {
+          index: 0,
-      name: "player-controls-wrapper",
+          buttonSizeBase: "x",
-      isClass: true,
+        },
-      insertStrat: "append"
+        uiParent: {
+          name: "player-controls-wrapper",
+          isClass: true,
+          insertStrat: "append"
+        },
+        uiOffset: {
+          offsetBy: "0px",
+          offsetType: "css"
+        }
+      }
     },
     autoar_imdb:{
       enabled: true,
@@ -259,8 +306,8 @@ var DEFAULT_KEYBINDINGS = {
 
 
 //BEGIN included from lib/libopts.js
-// setopt in getopt. Shranita oz. dobita stvari iz skladišča
+// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča
-// setopt, getopt. They set/get stuff from the storage
+// setopt, getopt, delopt. They set/get/delete stuff from the storage
 
 function setopt(item){
   browser.storage.local.set(item);
@@ -271,10 +318,14 @@ function getopt(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/browser_autodetect.js
+var browser_autodetect = true;
 usebrowser = "firefox";
 
 if(typeof browser === "undefined"){ // This means we're probably not on Firefox.
@@ -305,39 +356,300 @@ IGNORE_STORAGE_CHANGES = false;
 //END included from lib/optinit.js
 
 
-var usebrowser = "chrome";
+//BEGIN included from conf/uwvars.js
-var browser_autodetect = true;
+ 
+//END included from conf/uwvars.js
 
-var debugmsg = true;
+
-var debugmsg_click = false;
+//BEGIN included from lib/player_ui.js
-var debugmsg_message = false;
+var UICONF;
-var debugmsg_autoar = false;
+
-var debugmsg_periodic = false;
+function uinit(){
-var debugmsg_ui = true;
+  if(debugmsg)
-var force_conf_reload = true;
+    console.log("player_ui::uinit | initializing elements from the webpage");
-if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){
+  
-  console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+  var site = UW_SITES[SITE];
-  console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n");
   
   if(debugmsg)
-    console.log("Logging all");
+    console.log("player_ui::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass);
   
-  if(debugmsg_click)
+  SITE_ENABLED = site.enabled;
-    console.log("Logging debugmsg_click");
+  SITE_TYPE = site.type;
+  SITE_URL_RULES = site.urlRules;
+  SITE_PROPS = site;
   
-  if(debugmsg_message)
+  if(debugmsg)
-    console.log("Logging debugmsg_message");
+    console.log("player_ui::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false );
   
-  if(debugmsg_autoar)
+  if(inIframe() && site.iframe){
-    console.log("Logging autoar");
+    console.log("player_ui::uinit | we're in iframe.");
+    PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name);
+  }
+  else{
+    PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name);
+  }
   
-  console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+  // 
+  if( site.ui.uiMode == "native")
+    NATIVE_UI = true;
+  else
+    NATIVE_UI = false;
+  
+  UICONF = site.ui.uiconf;
+  
+  console.log("player_ui::uinit |\nsite.ui.uiMode: ", site.ui.uiMode,"\nsite.ui.uiMode.uiconf:",site.ui.uiconf,"\nUICONF: ", UICONF);
+    
+  IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled;
+  
+  if(debugmsg)
+    console.log("player_ui::uinit | initializing elements from the webpage");
 }
 
+function buildUInative(){
+  /** This function builds UI in the native bar.
+  * 
+  */
+  if(debugmsg || debugmsg_ui)
+    console.log("player_ui::buildUInative | starting ...");
+  
+  if(ui_anchor){
+    console.log("player_ui::buildUInative | anchor found, doing nothing");
+    return;
+  
+  }
+  if(!ui_anchor)
+    mkanchor();
+  
+  if(UW_UI_MODE == "none"){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
+    return;
+  }
+  if(UW_UI_MODE == "compact"){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
+    
+    if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
+      if(debugmsg || debugmsg_ui)
+        console.log("player_ui::buildUInative | compact ui is not possible on this site. Reverting to full.");
+      UW_UI_MODE == "all";
+    }
+  }
+  
+  if(debugmsg || debugmsg_ui )
+    console.log("player_ui::buildUInative | starting to build UI");
+  
+  var el;
+  
+  if(UW_UI_MODE == "compact"){       // no need for loop if all we add is the 'settings' buton
+    el = UW_UI_BUTTONS.settings;
+    uiel = mkbutton(el);
+    uiel.appendChild(mksubmenu(el));
+    ui_anchor.appendChild(uiel);
+  }
+  else{
+    for(key in UW_UI_BUTTONS){
+      
+      el = UW_UI_BUTTONS[key];
+      
+      if(UW_UI_BANLIST[SITE][key]){
+        if(debugmsg)
+          console.log("player_ui::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
+        
+        continue;
+      }
+      
+      if(!el.native_bar)
+        continue;
+      
+      var uiel; //ui element
+      
+      if(el.button){
+        uiel = mkbutton(el);
+      }
+      
+      if(!uiel)
+        continue;
+      
+      ui_anchor.appendChild(uiel);
+      
+      if(el.has_submenu){
+        uiel.appendChild(mksubmenu(el));
+      }
+    }
+  }
+  
+  if(debugmsg || debugmsg_ui )
+    console.log("player_ui::buildUInative | ui finished");
+}
 
+function mksubmenu(el){
+  var submenu = document.createElement("div");
+  submenu.id = el.submenu_id;
+  submenu.className = "uw_element uw_submenu";
+  
+  for(var i = 0; i < el.submenu.length; i++){
+    if(UW_UI_BANLIST[SITE][el.submenu[i]]){
+      if(debugmsg)
+        console.log("player_ui::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing.");
+      
+      continue;
+    }
+    submenu.appendChild(mkmenuitem(el.submenu[i]));
+  }
+  
+  return submenu;
+}
 
+function mkmenuitem(key){
+  var el = UW_UI_BUTTONS[key];
+  var item = document.createElement("div");
+  item.textContent = el.text;
+  item.className = "uw-setmenu-item uw_element";
+  item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); };
+  
+  if(el.has_submenu){
+    item.appendChild(mksubmenu(el)); 
+    
+    if(debugmsg){
+      console.log("player_ui::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu");
+    }
+    
+    if(el.parent)
+      $(item).on("mouseenter", function(){
+        // We determine where the submenu goes - to the left or to the right. showMenu handles position,
+        // this function gets sizes of all objects
+        var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id);
+        var supmenusize = div.getBoundingClientRect();
+        div = document.getElementById(el.submenu_id);
+        var submenusize = div.getBoundingClientRect();
+        var playersize = player.getBoundingClientRect();
+        
+        if(debugmsg)
+          console.log("player_ui::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize);
+        
+        showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize});
+      });
+      else
+        $(item).on("mouseenter", function(){showMenu(el.submenu_id)});
+      
+      $(item).on("mouseleave", function(){hideMenu(el.submenu_id)});
+  }
+  
+  return item;
+}
 
+function mkanchor(){
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | starting.\nNATIVE_UI: ",NATIVE_UI);
+  
+  
+  if( NATIVE_UI !== true ){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::mkanchor | we don't use native UI, calling mkanchor_notify(common=true) to take over");
+    
+    mkanchor_notify(true);
+    return;
+  }
+  else{
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::mkanchor | will make anchor for notifications, calling mkanchor_notify(common=false)");
+    
+    mkanchor_notify(false);
+  }
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | anchor for notifications created.");
+  
+  
+  ui_anchor = document.createElement("div");
+  ui_anchor.className = "uw_ui_anchor";
+  ui_anchor.id = "uw_ui_anchor";
+  
+  if(UICONF.uiParent.insertStrat == "prepend"){
+    $(document.getElementsByClassName(UICONF.uiParent.name)[0]).prepend(ui_anchor);
+  }
+  else{
+    document.getElementsByClassName(UICONF.uiParent.name)[0].appendChild(ui_anchor);
+  }
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | anchor created.");
+  
+}
 
+function mkanchor_notify(common){
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor_common | starting.\n\ncommon anchor: ",common,"\nUICONF: ",UICONF,"\nUICONF.uiOffset: ",UICONF.uiOffset);
+  
+  if( document.getElementById("uw_common_anchor") )
+    return;
+  
+  
+  var anchor = document.createElement("div");
+  anchor.className = "uw_common_anchor";
+  anchor.id = "uw_common_anchor";
+  
+  // Izračunamo zamik zaradi drugih elementov na zaslonu
+  // Let's calculate offset due to other elements on the screen
+  
+  var offsetTop = "0px";
+  
+  if ( UICONF.uiOffset.offsetType == "element_id" || UICONF.uiOffset.offsetType == "element_class"){
+    
+    var blockingElement;
+    if( UICONF.uiOffset.offsetType == "element_id" )
+      blockingElement = document.getElementById(UICONF.uiOffset.offsetBy);
+    else
+      blockingElement = document.getElementsByClassName(UICONF.uiOffset.offsetBy)[0];
+    
+    offsetTop = blockingElement.offsetTop + blockingElement.offsetHeight + "px";
+  }
+  else if( UICONF.uiOffset.offsetType == "css" )
+    offsetTop = UICONF.uiOffset.offsetBy;
+  
+  if(debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor_notify | notification box will be offset by this much:", offsetTop);
+  
+  
+  var padding = document.createElement("div");
+  padding.style.width = "100%";
+  padding.style.height = offsetTop;
+  
+  anchor.appendChild(padding);
+  
+  var notification_box = document.createElement("div");
+  notification_box.style.width = "50%";
+  notification_box.style.height = "25%";
+  notification_box.textContent = "test box";
+  
+  if(debugmsg)
+    console.log("player_ui::mkanchor_notify | this is our notification box: ", notification_box);
+  
+  anchor.appendChild(notification_box);
+    
+  PLAYER.appendChild(anchor);
+  
+  
+}
+
+function mkbutton(el){
+  if(debugmsg | debugmsg_ui)
+    console.log("player_ui::mkbutton | trying to make a button", el.text);
+  
+  var button = document.createElement("div");
+  button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')';
+  button.className += " uw_button uw_element";
+  button.onclick = function(event) {event.stopPropagation(); el.onclick() };
+  
+  if(debugmsg | debugmsg_ui)
+    console.log("player_ui::mkbutton | button completed");
+  
+  return button;
+}
+//END included from lib/player_ui.js
 
 
 const playercheck_recursion_depth_limit = 3;
@@ -427,7 +739,7 @@ function init(force_reload){
   }
   
   if(debugmsg)
-    console.log("uw::init | %cpage_url: "+page_url,"color: #99F");
+    console.log("uw | %cpage_url: "+page_url,"color: #99F");
 
   //Youtube:
   if(page_url.indexOf("youtu") != -1){
@@ -726,6 +1038,8 @@ function stagetracker(op){
   return all_done;  
 }
 
+
+
 function extsetup_stage2(op){
   
   if(debugmsg)
@@ -743,15 +1057,36 @@ function extsetup_stage2(op){
   // SITE is set in loadFromStorage. If SITE is still undefined at this point, then we aren't on a known page.
   
   if(debugmsg){
-    console.log("uw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------");
+    console.log("\n\n\n\nuw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------");
   }
   
   if(SITE){
+    
+    if(debugmsg){
+      console.log("uw::extSetup (stage 2) | site found, starting config");
+      console.log("starting uinit ...");
+      console.log("progress: %c |                                           |", "background-color: #161211; color: #f51;")
+    }
     uinit();
+    if(debugmsg){
+      console.log("uw::extSetup (stage 2)\nprogress: %c |===>                    |\nuinit complete\n\n", "background-color: #161211; color: #f51;");
+    }
+    
     keydownSetup();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |=======>                |\nkeydownSetup complete\n\n", "background-color: #161211;color: #f51;");
+    
     extsetup_comms();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |============>           |\nextSetup complete; starting buildUInative\n\n", "background-color: #161211; color: #f51;");
+    
     buildUInative();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |=================>      |\nbuildUInative complete\n\n", "background-color: #161211; color: #f51;");
+    
     updateUICSS();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |========================|\nupdateUICSS complete\n\n", "background-color: #161211; color: #f51;");
     
     if(page_url.indexOf("netflix.com") != -1){
       console.log("uw::extSetup (stage 2) | starting netflix-specific setup steps");
@@ -771,47 +1106,6 @@ function extsetup_stage2(op){
 }
 
 
-function uinit(){
-  if(debugmsg)
-    console.log("uw::uinit | initializing elements from the webpage");
-  
-  var site = UW_SITES[SITE];
-//   var inIframe = inIframe();
-  
-  if(debugmsg)
-    console.log("uw::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass);
-  
-//   if(inIframe){
-//     
-//   }
-//   else{
-  SITE_ENABLED = site.enabled;
-  SITE_TYPE = site.type;
-  SITE_URL_RULES = site.urlRules;
-  SITE_PROPS = site;
-  
-  if(debugmsg)
-    console.log("uw::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false );
-
-  if(inIframe() && site.iframe){
-    console.log("uw::uinit | we're in iframe.");
-    PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name);
-  }
-  else{
-    PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name);
-  }
-  
-  SAMPLE_BUTTON_CLASS = site.sampleButton.class;
-  SAMPLE_BUTTON_INDEX = site.sampleButton.index;
-  BUTTON_SIZE_BASE = site.sampleButton.buttonSizeBase;
-//   }
-  
-  IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled;
-  
-  if(debugmsg)
-    console.log("uw::uinit | initializing elements from the webpage");
-}
-
 function loadFromStorage(){
   if(debugmsg || debugmsg_autoar)
     console.log("uw::loadFromStorage | loading stuff from storage.");
@@ -1109,166 +1403,6 @@ function check4player(recursion_depth){
   return false;
 }
 
-function mkanchor(){
-  ui_anchor = document.createElement("div");
-  ui_anchor.className = "uw_ui_anchor";
-  ui_anchor.id = "uw_ui_anchor";
-    
-  var site = UW_SITES[SITE];
-  
-  if(site.uiParent.insertStrat == "prepend"){
-    $(document.getElementsByClassName(site.uiParent.name)[0]).prepend(ui_anchor);
-  }
-  
-}
- 
-function buildUInative(){
-  /** This function builds UI in the native bar.
-   * 
-   */
-  
-  
-  if(ui_anchor)
-    return;
-  
-  if(!ui_anchor)
-    mkanchor();
-  
-  if(UW_UI_MODE == "none"){
-    if(debugmsg || debugmsg_ui)
-      console.log("uw::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
-    return;
-  }
-  if(UW_UI_MODE == "compact"){
-    if(debugmsg || debugmsg_ui)
-      console.log("uw::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
-    
-    if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
-      if(debugmsg || debugmsg_ui)
-        console.log("uw::buildUInative | compact ui is not possible on this site. Reverting to full.");
-      UW_UI_MODE == "all";
-    }
-  }
-  
-  if(debugmsg || debugmsg_ui )
-    console.log("uw::buildUInative | starting to build UI");
-  
-  var el;
-  
-  if(UW_UI_MODE == "compact"){       // no need for loop if all we add is the 'settings' buton
-    el = UW_UI_BUTTONS.settings;
-    uiel = mkbutton(el);
-    uiel.appendChild(mksubmenu(el));
-    ui_anchor.appendChild(uiel);
-  }
-  else{
-    for(key in UW_UI_BUTTONS){
-      
-      el = UW_UI_BUTTONS[key];
-      
-      if(UW_UI_BANLIST[SITE][key]){
-        if(debugmsg)
-          console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
-        
-        continue;
-      }
-      
-      if(!el.native_bar)
-        continue;
-      
-      var uiel; //ui element
-      
-      if(el.button){
-        uiel = mkbutton(el);
-      }
-      
-      if(!uiel)
-        continue;
-      
-      ui_anchor.appendChild(uiel);
-      
-      if(el.has_submenu){
-        uiel.appendChild(mksubmenu(el));
-      }
-    }
-  }
-  
-  if(debugmsg || debugmsg_ui )
-    console.log("uw::buildUInative | ui finished");
-}
-
-function mksubmenu(el){
-  var submenu = document.createElement("div");
-  submenu.id = el.submenu_id;
-  submenu.className = "uw_element uw_submenu";
-  
-  for(var i = 0; i < el.submenu.length; i++){
-    if(UW_UI_BANLIST[SITE][el.submenu[i]]){
-      if(debugmsg)
-        console.log("uw::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing.");
-      
-      continue;
-    }
-    submenu.appendChild(mkmenuitem(el.submenu[i]));
-  }
-  
-  return submenu;
-}
-
-function mkmenuitem(key){
-  var el = UW_UI_BUTTONS[key];
-  var item = document.createElement("div");
-  item.textContent = el.text;
-  item.className = "uw-setmenu-item uw_element";
-  item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); };
-  
-  if(el.has_submenu){
-    item.appendChild(mksubmenu(el)); 
-
-    if(debugmsg){
-      console.log("uw::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu");
-    }
-    
-    if(el.parent)
-      $(item).on("mouseenter", function(){
-        // We determine where the submenu goes - to the left or to the right. showMenu handles position,
-        // this function gets sizes of all objects
-        var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id);
-        var supmenusize = div.getBoundingClientRect();
-        div = document.getElementById(el.submenu_id);
-        var submenusize = div.getBoundingClientRect();
-        var playersize = player.getBoundingClientRect();
-        
-        if(debugmsg)
-          console.log("uw::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize);
-        
-        showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize});
-      });
-    else
-      $(item).on("mouseenter", function(){showMenu(el.submenu_id)});
-    
-    $(item).on("mouseleave", function(){hideMenu(el.submenu_id)});
-  }
-  
-  return item;
-}
-
-
-function mkbutton(el){
-  if(debugmsg | debugmsg_ui)
-    console.log("uw::mkbutton | trying to make a button", el.text);
-  
-  var button = document.createElement("div");
-  button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')';
-  button.className += " uw_button uw_element";
-  button.onclick = function(event) {event.stopPropagation(); el.onclick() };
-  
-  if(debugmsg | debugmsg_ui)
-    console.log("uw::mkbutton | button completed");
-  
-  return button;
-}
-
 function hideAllMenus(){
   var el;
   for(key in UW_UI_BUTTONS){

manifest.json

@@ -13,7 +13,7 @@
   
   "content_scripts": [
   {
-    "matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*","*://www.netflix.com/*"],
+    "matches": ["*://*/*"],
     "js": [ "js/jquery-3.1.1.js", "js/uw_libbuttons.js", "js/uw.js" ],
     "all_frames": true
   }

res/css/uw_common.css

@@ -31,6 +31,15 @@
   padding-left: 2em !important;
 }
 
+.common_anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .uw_button{
   display: inline-block;
 /*   height: 100% !important;  */

res/settings.js

@@ -1,3 +1,125 @@
+// 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;
@@ -164,19 +286,6 @@ function saveUI(){
   }
 }
 
-// setopt in getopt. Shranita oz. dobita stvari iz skladišča
-// setopt, getopt. They set/get 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 compareModifiers(a,b){
   //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj
@@ -254,6 +363,14 @@ function gotsites(opts){
     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";
@@ -291,20 +408,21 @@ function gotsites(opts){
     list.append(category_desc);
     
     var category_counter = 0;
-    for (site in uw_sites){
+    
+    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");
+        var header = document.createElement("div");
-        displayedInfo.id = site + "_display";
+        
-        displayedInfo.className = "uw_options_line site_details";
+        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");
@@ -334,155 +452,219 @@ function gotsites(opts){
           siteTitle.append(saveBtn);
           siteTitle.append(cancelBtn);
         }
+        header.appendChild(siteTitle);
+        entry.appendChild(header);
         
-        var siteDetails = document.createElement("div");
+        var body = document.createElement("div");
-        siteDetails.id = site + "_conf_details";
+        var jsonForm = document.createElement("textarea");
-        siteDetails.classList = "hide";
+        jsonForm.cols = 64;
+        jsonForm.rows = 32;
         
-        var urlRules = document.createElement("div");
+        jsonForm.value = JSON.stringify(uw_sites[site], null, 2);
-        {
-          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);
         
+        body.appendChild(jsonForm);
+//         body.classNamež
+        entry.appendChild(body);
         list.append(entry);
         
-        category_counter++;
         
-        if(site == "dummy" && type == "add new site"){
+        category_counter++;
-          if(debugmsg)
-            console.log("uw settings::gotsites | we are adding dummy site");
-          enableEditing("dummy");
-          document.getElementById("dummy_title_ebox").disabled = false;
-        }
       }
     }
+    
+    
+//     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";

src/conf/sitesconf.js

@@ -11,15 +11,24 @@ var UW_SITES = {
       name: "player",
       isClass: false
     },
-    sampleButton: {
+    ui: {
-      class: "ytp-button ytp-settings-button",
+      uiMode: "native",
-      index: 0,
+      uiconf: {
-      buttonSizeBase: "x",
+        sampleButton: {
-    },
+          class: "ytp-button ytp-settings-button",
-    uiParent: {
+          index: 0,
-      name: "ytp-right-controls",
+          buttonSizeBase: "x",
-      isClass: true,
+        },
-      insertStrat: "prepend",
+        uiParent: {
+          name: "ytp-right-controls",
+          isClass: true,
+          insertStrat: "prepend",
+        },
+        uiOffset: {
+          offsetBy: "10vh",
+          offsetType: "css"
+        }
+      }
     },
     autoar_imdb:{
       enabled: false
@@ -33,15 +42,24 @@ var UW_SITES = {
       name: "placeholder",
       isClass: true,
     },
-    sampleButton: {
+    ui: {
-      class: "ytp-button ytp-settings-button",
+      uiMode: "native",
-      index: 0,
+      uiconf: {
-      buttonSizeBase: "x",
+        sampleButton: {
-    },
+          class: "ytp-button ytp-settings-button",
-    uiParent: {
+          index: 0,
-      name: "player-controls-wrapper",
+          buttonSizeBase: "x",
-      isClass: true,
+        },
-      insertStrat: "append"
+        uiParent: {
+          name: "player-controls-wrapper",
+          isClass: true,
+          insertStrat: "append"
+        },
+        uiOffset: {
+          offsetBy: "0px",
+          offsetType: "css"
+        }
+      }
     },
     autoar_imdb:{
       enabled: true,

src/conf/uwvars.js

@@ -0,0 +1 @@
+ 

src/lib/browser_autodetect.js

@@ -1,3 +1,4 @@
+var browser_autodetect = true;
 usebrowser = "firefox";
 
 if(typeof browser === "undefined"){ // This means we're probably not on Firefox.

src/lib/debuginit.js

@@ -0,0 +1,25 @@
+ var debugmsg = true;
+ var debugmsg_click = false;
+ var debugmsg_message = false;
+ var debugmsg_autoar = false;
+ var debugmsg_periodic = false;
+ var debugmsg_ui = true;
+ var force_conf_reload = true;
+ if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){
+   console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+   console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n");
+   
+   if(debugmsg)
+     console.log("Logging all");
+   
+   if(debugmsg_click)
+     console.log("Logging debugmsg_click");
+   
+   if(debugmsg_message)
+     console.log("Logging debugmsg_message");
+   
+   if(debugmsg_autoar)
+     console.log("Logging autoar");
+   
+   console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
+ }

src/lib/libopts.js

@@ -1,5 +1,5 @@
-// setopt in getopt. Shranita oz. dobita stvari iz skladišča
+// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča
-// setopt, getopt. They set/get stuff from the storage
+// setopt, getopt, delopt. They set/get/delete stuff from the storage
 
 function setopt(item){
   browser.storage.local.set(item);
@@ -10,3 +10,6 @@ function getopt(prop, callback){
   else
     browser.storage.local.get(prop).then(callback);
 } 
+function delopt(item){
+  browser.storage.local.remove(item);
+}

src/lib/player_ui.js

@@ -0,0 +1,287 @@
+var UICONF;
+
+function uinit(){
+  if(debugmsg)
+    console.log("player_ui::uinit | initializing elements from the webpage");
+  
+  var site = UW_SITES[SITE];
+  
+  if(debugmsg)
+    console.log("player_ui::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass);
+  
+  SITE_ENABLED = site.enabled;
+  SITE_TYPE = site.type;
+  SITE_URL_RULES = site.urlRules;
+  SITE_PROPS = site;
+  
+  if(debugmsg)
+    console.log("player_ui::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false );
+  
+  if(inIframe() && site.iframe){
+    console.log("player_ui::uinit | we're in iframe.");
+    PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name);
+  }
+  else{
+    PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name);
+  }
+  
+  // 
+  if( site.ui.uiMode == "native")
+    NATIVE_UI = true;
+  else
+    NATIVE_UI = false;
+  
+  UICONF = site.ui.uiconf;
+  
+  console.log("player_ui::uinit |\nsite.ui.uiMode: ", site.ui.uiMode,"\nsite.ui.uiMode.uiconf:",site.ui.uiconf,"\nUICONF: ", UICONF);
+    
+  IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled;
+  
+  if(debugmsg)
+    console.log("player_ui::uinit | initializing elements from the webpage");
+}
+
+function buildUInative(){
+  /** This function builds UI in the native bar.
+  * 
+  */
+  if(debugmsg || debugmsg_ui)
+    console.log("player_ui::buildUInative | starting ...");
+  
+  if(ui_anchor){
+    console.log("player_ui::buildUInative | anchor found, doing nothing");
+    return;
+  
+  }
+  if(!ui_anchor)
+    mkanchor();
+  
+  if(UW_UI_MODE == "none"){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
+    return;
+  }
+  if(UW_UI_MODE == "compact"){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
+    
+    if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
+      if(debugmsg || debugmsg_ui)
+        console.log("player_ui::buildUInative | compact ui is not possible on this site. Reverting to full.");
+      UW_UI_MODE == "all";
+    }
+  }
+  
+  if(debugmsg || debugmsg_ui )
+    console.log("player_ui::buildUInative | starting to build UI");
+  
+  var el;
+  
+  if(UW_UI_MODE == "compact"){       // no need for loop if all we add is the 'settings' buton
+    el = UW_UI_BUTTONS.settings;
+    uiel = mkbutton(el);
+    uiel.appendChild(mksubmenu(el));
+    ui_anchor.appendChild(uiel);
+  }
+  else{
+    for(key in UW_UI_BUTTONS){
+      
+      el = UW_UI_BUTTONS[key];
+      
+      if(UW_UI_BANLIST[SITE][key]){
+        if(debugmsg)
+          console.log("player_ui::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
+        
+        continue;
+      }
+      
+      if(!el.native_bar)
+        continue;
+      
+      var uiel; //ui element
+      
+      if(el.button){
+        uiel = mkbutton(el);
+      }
+      
+      if(!uiel)
+        continue;
+      
+      ui_anchor.appendChild(uiel);
+      
+      if(el.has_submenu){
+        uiel.appendChild(mksubmenu(el));
+      }
+    }
+  }
+  
+  if(debugmsg || debugmsg_ui )
+    console.log("player_ui::buildUInative | ui finished");
+}
+
+function mksubmenu(el){
+  var submenu = document.createElement("div");
+  submenu.id = el.submenu_id;
+  submenu.className = "uw_element uw_submenu";
+  
+  for(var i = 0; i < el.submenu.length; i++){
+    if(UW_UI_BANLIST[SITE][el.submenu[i]]){
+      if(debugmsg)
+        console.log("player_ui::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing.");
+      
+      continue;
+    }
+    submenu.appendChild(mkmenuitem(el.submenu[i]));
+  }
+  
+  return submenu;
+}
+
+function mkmenuitem(key){
+  var el = UW_UI_BUTTONS[key];
+  var item = document.createElement("div");
+  item.textContent = el.text;
+  item.className = "uw-setmenu-item uw_element";
+  item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); };
+  
+  if(el.has_submenu){
+    item.appendChild(mksubmenu(el)); 
+    
+    if(debugmsg){
+      console.log("player_ui::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu");
+    }
+    
+    if(el.parent)
+      $(item).on("mouseenter", function(){
+        // We determine where the submenu goes - to the left or to the right. showMenu handles position,
+        // this function gets sizes of all objects
+        var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id);
+        var supmenusize = div.getBoundingClientRect();
+        div = document.getElementById(el.submenu_id);
+        var submenusize = div.getBoundingClientRect();
+        var playersize = player.getBoundingClientRect();
+        
+        if(debugmsg)
+          console.log("player_ui::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize);
+        
+        showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize});
+      });
+      else
+        $(item).on("mouseenter", function(){showMenu(el.submenu_id)});
+      
+      $(item).on("mouseleave", function(){hideMenu(el.submenu_id)});
+  }
+  
+  return item;
+}
+
+function mkanchor(){
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | starting.\nNATIVE_UI: ",NATIVE_UI);
+  
+  
+  if( NATIVE_UI !== true ){
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::mkanchor | we don't use native UI, calling mkanchor_notify(common=true) to take over");
+    
+    mkanchor_notify(true);
+    return;
+  }
+  else{
+    if(debugmsg || debugmsg_ui)
+      console.log("player_ui::mkanchor | will make anchor for notifications, calling mkanchor_notify(common=false)");
+    
+    mkanchor_notify(false);
+  }
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | anchor for notifications created.");
+  
+  
+  ui_anchor = document.createElement("div");
+  ui_anchor.className = "uw_ui_anchor";
+  ui_anchor.id = "uw_ui_anchor";
+  
+  if(UICONF.uiParent.insertStrat == "prepend"){
+    $(document.getElementsByClassName(UICONF.uiParent.name)[0]).prepend(ui_anchor);
+  }
+  else{
+    document.getElementsByClassName(UICONF.uiParent.name)[0].appendChild(ui_anchor);
+  }
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor | anchor created.");
+  
+}
+
+function mkanchor_notify(common){
+  
+  if (debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor_common | starting.\n\ncommon anchor: ",common,"\nUICONF: ",UICONF,"\nUICONF.uiOffset: ",UICONF.uiOffset);
+  
+  if( document.getElementById("uw_common_anchor") )
+    return;
+  
+  
+  var anchor = document.createElement("div");
+  anchor.className = "uw_common_anchor";
+  anchor.id = "uw_common_anchor";
+  
+  // Izračunamo zamik zaradi drugih elementov na zaslonu
+  // Let's calculate offset due to other elements on the screen
+  
+  var offsetTop = "0px";
+  
+  if ( UICONF.uiOffset.offsetType == "element_id" || UICONF.uiOffset.offsetType == "element_class"){
+    
+    var blockingElement;
+    if( UICONF.uiOffset.offsetType == "element_id" )
+      blockingElement = document.getElementById(UICONF.uiOffset.offsetBy);
+    else
+      blockingElement = document.getElementsByClassName(UICONF.uiOffset.offsetBy)[0];
+    
+    offsetTop = blockingElement.offsetTop + blockingElement.offsetHeight + "px";
+  }
+  else if( UICONF.uiOffset.offsetType == "css" )
+    offsetTop = UICONF.uiOffset.offsetBy;
+  
+  if(debugmsg || debugmsg_ui)
+    console.log("player_ui::mkanchor_notify | notification box will be offset by this much:", offsetTop);
+  
+  
+  var padding = document.createElement("div");
+  padding.style.width = "100%";
+  padding.style.height = offsetTop;
+  
+  anchor.appendChild(padding);
+  
+  var notification_box = document.createElement("div");
+  notification_box.style.width = "50%";
+  notification_box.style.height = "25%";
+  notification_box.textContent = "test box";
+  
+  if(debugmsg)
+    console.log("player_ui::mkanchor_notify | this is our notification box: ", notification_box);
+  
+  anchor.appendChild(notification_box);
+    
+  PLAYER.appendChild(anchor);
+  
+  
+}
+
+function mkbutton(el){
+  if(debugmsg | debugmsg_ui)
+    console.log("player_ui::mkbutton | trying to make a button", el.text);
+  
+  var button = document.createElement("div");
+  button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')';
+  button.className += " uw_button uw_element";
+  button.onclick = function(event) {event.stopPropagation(); el.onclick() };
+  
+  if(debugmsg | debugmsg_ui)
+    console.log("player_ui::mkbutton | button completed");
+  
+  return button;
+}

src/lib/uiutils.js

@@ -0,0 +1 @@
+ 

src/settings.js

@@ -0,0 +1,744 @@
+#location res
+#include lib/libopts.js
+#include lib/uiutils.js
+#include 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});

src/uw.js

@@ -1,45 +1,13 @@
 #location js
+#include lib/debuginit.js
 #include conf/uiconf.js
 #include conf/sitesconf.js
 #include conf/keybinds.js
 #include lib/libopts.js
 #include lib/browser_autodetect.js
 #include lib/optinit.js
-
+#include conf/uwvars.js
-var usebrowser = "chrome";
+#include lib/player_ui.js
-var browser_autodetect = true;
-
-var debugmsg = true;
-var debugmsg_click = false;
-var debugmsg_message = false;
-var debugmsg_autoar = false;
-var debugmsg_periodic = false;
-var debugmsg_ui = true;
-var force_conf_reload = true;
-if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){
-  console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
-  console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n");
-  
-  if(debugmsg)
-    console.log("Logging all");
-  
-  if(debugmsg_click)
-    console.log("Logging debugmsg_click");
-  
-  if(debugmsg_message)
-    console.log("Logging debugmsg_message");
-  
-  if(debugmsg_autoar)
-    console.log("Logging autoar");
-  
-  console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
-}
-
-
-
-
-
-
 
 const playercheck_recursion_depth_limit = 3;
 
@@ -427,6 +395,8 @@ function stagetracker(op){
   return all_done;  
 }
 
+
+
 function extsetup_stage2(op){
   
   if(debugmsg)
@@ -444,15 +414,36 @@ function extsetup_stage2(op){
   // SITE is set in loadFromStorage. If SITE is still undefined at this point, then we aren't on a known page.
   
   if(debugmsg){
-    console.log("uw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------");
+    console.log("\n\n\n\nuw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------");
   }
   
   if(SITE){
+    
+    if(debugmsg){
+      console.log("uw::extSetup (stage 2) | site found, starting config");
+      console.log("starting uinit ...");
+      console.log("progress: %c |                                           |", "background-color: #161211; color: #f51;")
+    }
     uinit();
+    if(debugmsg){
+      console.log("uw::extSetup (stage 2)\nprogress: %c |===>                    |\nuinit complete\n\n", "background-color: #161211; color: #f51;");
+    }
+    
     keydownSetup();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |=======>                |\nkeydownSetup complete\n\n", "background-color: #161211;color: #f51;");
+    
     extsetup_comms();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |============>           |\nextSetup complete; starting buildUInative\n\n", "background-color: #161211; color: #f51;");
+    
     buildUInative();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |=================>      |\nbuildUInative complete\n\n", "background-color: #161211; color: #f51;");
+    
     updateUICSS();
+    if(debugmsg)
+      console.log("uw::extSetup (stage 2)\nprogress: %c |========================|\nupdateUICSS complete\n\n", "background-color: #161211; color: #f51;");
     
     if(page_url.indexOf("netflix.com") != -1){
       console.log("uw::extSetup (stage 2) | starting netflix-specific setup steps");
@@ -472,47 +463,6 @@ function extsetup_stage2(op){
 }
 
 
-function uinit(){
-  if(debugmsg)
-    console.log("uw::uinit | initializing elements from the webpage");
-  
-  var site = UW_SITES[SITE];
-//   var inIframe = inIframe();
-  
-  if(debugmsg)
-    console.log("uw::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass);
-  
-//   if(inIframe){
-//     
-//   }
-//   else{
-  SITE_ENABLED = site.enabled;
-  SITE_TYPE = site.type;
-  SITE_URL_RULES = site.urlRules;
-  SITE_PROPS = site;
-  
-  if(debugmsg)
-    console.log("uw::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false );
-
-  if(inIframe() && site.iframe){
-    console.log("uw::uinit | we're in iframe.");
-    PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name);
-  }
-  else{
-    PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name);
-  }
-  
-  SAMPLE_BUTTON_CLASS = site.sampleButton.class;
-  SAMPLE_BUTTON_INDEX = site.sampleButton.index;
-  BUTTON_SIZE_BASE = site.sampleButton.buttonSizeBase;
-//   }
-  
-  IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled;
-  
-  if(debugmsg)
-    console.log("uw::uinit | initializing elements from the webpage");
-}
-
 function loadFromStorage(){
   if(debugmsg || debugmsg_autoar)
     console.log("uw::loadFromStorage | loading stuff from storage.");
@@ -810,166 +760,6 @@ function check4player(recursion_depth){
   return false;
 }
 
-function mkanchor(){
-  ui_anchor = document.createElement("div");
-  ui_anchor.className = "uw_ui_anchor";
-  ui_anchor.id = "uw_ui_anchor";
-    
-  var site = UW_SITES[SITE];
-  
-  if(site.uiParent.insertStrat == "prepend"){
-    $(document.getElementsByClassName(site.uiParent.name)[0]).prepend(ui_anchor);
-  }
-  
-}
- 
-function buildUInative(){
-  /** This function builds UI in the native bar.
-   * 
-   */
-  
-  
-  if(ui_anchor)
-    return;
-  
-  if(!ui_anchor)
-    mkanchor();
-  
-  if(UW_UI_MODE == "none"){
-    if(debugmsg || debugmsg_ui)
-      console.log("uw::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
-    return;
-  }
-  if(UW_UI_MODE == "compact"){
-    if(debugmsg || debugmsg_ui)
-      console.log("uw::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
-    
-    if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
-      if(debugmsg || debugmsg_ui)
-        console.log("uw::buildUInative | compact ui is not possible on this site. Reverting to full.");
-      UW_UI_MODE == "all";
-    }
-  }
-  
-  if(debugmsg || debugmsg_ui )
-    console.log("uw::buildUInative | starting to build UI");
-  
-  var el;
-  
-  if(UW_UI_MODE == "compact"){       // no need for loop if all we add is the 'settings' buton
-    el = UW_UI_BUTTONS.settings;
-    uiel = mkbutton(el);
-    uiel.appendChild(mksubmenu(el));
-    ui_anchor.appendChild(uiel);
-  }
-  else{
-    for(key in UW_UI_BUTTONS){
-      
-      el = UW_UI_BUTTONS[key];
-      
-      if(UW_UI_BANLIST[SITE][key]){
-        if(debugmsg)
-          console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
-        
-        continue;
-      }
-      
-      if(!el.native_bar)
-        continue;
-      
-      var uiel; //ui element
-      
-      if(el.button){
-        uiel = mkbutton(el);
-      }
-      
-      if(!uiel)
-        continue;
-      
-      ui_anchor.appendChild(uiel);
-      
-      if(el.has_submenu){
-        uiel.appendChild(mksubmenu(el));
-      }
-    }
-  }
-  
-  if(debugmsg || debugmsg_ui )
-    console.log("uw::buildUInative | ui finished");
-}
-
-function mksubmenu(el){
-  var submenu = document.createElement("div");
-  submenu.id = el.submenu_id;
-  submenu.className = "uw_element uw_submenu";
-  
-  for(var i = 0; i < el.submenu.length; i++){
-    if(UW_UI_BANLIST[SITE][el.submenu[i]]){
-      if(debugmsg)
-        console.log("uw::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing.");
-      
-      continue;
-    }
-    submenu.appendChild(mkmenuitem(el.submenu[i]));
-  }
-  
-  return submenu;
-}
-
-function mkmenuitem(key){
-  var el = UW_UI_BUTTONS[key];
-  var item = document.createElement("div");
-  item.textContent = el.text;
-  item.className = "uw-setmenu-item uw_element";
-  item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); };
-  
-  if(el.has_submenu){
-    item.appendChild(mksubmenu(el)); 
-
-    if(debugmsg){
-      console.log("uw::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu");
-    }
-    
-    if(el.parent)
-      $(item).on("mouseenter", function(){
-        // We determine where the submenu goes - to the left or to the right. showMenu handles position,
-        // this function gets sizes of all objects
-        var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id);
-        var supmenusize = div.getBoundingClientRect();
-        div = document.getElementById(el.submenu_id);
-        var submenusize = div.getBoundingClientRect();
-        var playersize = player.getBoundingClientRect();
-        
-        if(debugmsg)
-          console.log("uw::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize);
-        
-        showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize});
-      });
-    else
-      $(item).on("mouseenter", function(){showMenu(el.submenu_id)});
-    
-    $(item).on("mouseleave", function(){hideMenu(el.submenu_id)});
-  }
-  
-  return item;
-}
-
-
-function mkbutton(el){
-  if(debugmsg | debugmsg_ui)
-    console.log("uw::mkbutton | trying to make a button", el.text);
-  
-  var button = document.createElement("div");
-  button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')';
-  button.className += " uw_button uw_element";
-  button.onclick = function(event) {event.stopPropagation(); el.onclick() };
-  
-  if(debugmsg | debugmsg_ui)
-    console.log("uw::mkbutton | button completed");
-  
-  return button;
-}
-
 function hideAllMenus(){
   var el;
   for(key in UW_UI_BUTTONS){