Popup: extra buttons, console output beautify, changed experimental notice, disabled text selection

res/css/common.css

@@ -3,6 +3,10 @@ html, body {
   background-color: #1f1f1f;
   font-family: "overpass";
   font-size: 1em;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 }
 
 
@@ -191,8 +195,18 @@ input {
   font-size: 2.5em;
   margin-left: -35px;
   padding-right: 10px;
-/*       top: 0px; */
+}
-  float: left;
+
+.experimental::after {
+  content: "Experimental";
+  background-color: #ffde12;
+  color: #1f1f1f;
+  display: inline-block;
+  font-size: .75em;
+  font-variant: small-caps;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: 10px;
 }
 
 

res/popup/js/popup.js

@@ -42,16 +42,17 @@ SitePanel.arOptions.disabled   = document.getElementById("_ar_site_options_disab
 SitePanel.arOptions.enabled    = document.getElementById("_ar_site_options_enabled");
 SitePanel.arOptions.default    = document.getElementById("_ar_site_options_default");
 SitePanel.alignment = {};
-SitePanel.alignment.left       = document.getElementById("_align_ext_left");
+SitePanel.alignment.left       = document.getElementById("_align_site_left");
-SitePanel.alignment.center     = document.getElementById("_align_ext_center");
+SitePanel.alignment.center     = document.getElementById("_align_site_center");
-SitePanel.alignment.right      = document.getElementById("_align_ext_right");
+SitePanel.alignment.right      = document.getElementById("_align_site_right");
+SitePanel.alignment.default    = document.getElementById("_align_site_default");
 //#endregion
 
 var VideoPanel = {};
 VideoPanel.alignment = {};
-VideoPanel.alignment.left   = document.getElementById("_align_left");
+VideoPanel.alignment.left   = document.getElementById("_align_video_left");
-VideoPanel.alignment.center = document.getElementById("_align_center");
+VideoPanel.alignment.center = document.getElementById("_align_video_center");
-VideoPanel.alignment.right  = document.getElementById("_align_right");
+VideoPanel.alignment.right  = document.getElementById("_align_video_right");
 
 // labels on buttons
 VideoPanel.buttonLabels = {};
@@ -174,8 +175,9 @@ function configurePopupTabs(site) {
 
 function configureGlobalTab() {
   if (Debug.debug) {
-    console.log("[popup.js] Configuring global tab (ExtPanel).\nextension mode?", settings.active.extensionMode,
+    console.log("[popup.js] Configuring global tab (ExtPanel).",
-    "\narDetect mode:", settings.active.arDetect.mode,
+    "\nextension mode:  ", settings.active.extensionMode,
+    "\narDetect mode:   ", settings.active.arDetect.mode,
     "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
     "\n..")
   }
@@ -201,11 +203,13 @@ function configureGlobalTab() {
 
 function configureSitesTab(site) {
   if (Debug.debug) {
-    console.log("[popup.js] Configuring sites tab (SitePanel).\nsite:",site,
+    console.log("[popup.js] Configuring sites tab (SitePanel).",
-    "extension mode?", settings.active.sites[site].status,
+    "\nsite:            ", site,
-    "\narDetect mode:", settings.active.sites[site].arStatus,
+    "extension mode:    ", settings.active.sites[site].status,
-    // "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
+    "\narDetect mode:   ", settings.active.sites[site].arStatus,
-    "\n", SitePanel.extOptions, SitePanel.arOptions,
+    "\nvideo float mode:", settings.active.sites[site].videoFloat,
+    "\ndefault ar:      ", settings.active.sites[site].ar,
+    "\nstretch mode:    ", settings.active.sites[site].stretch,
     "\n...")
   }
 
@@ -221,7 +225,13 @@ function configureSitesTab(site) {
 
   SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
   SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
-  // SitePanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
+
+  // optional settings:
+  if (settings.active.sites.ar) {
+    SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected");
+  } else {
+    SitePanel.alignment.default.classList.add('selected');
+  }
 }
 
 function configureVideoTab() {
@@ -294,35 +304,15 @@ function configureVideoTab() {
 async function loadConfig(site){
 
   if(Debug.debug)
-    console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------");
+    console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active);
   
   configurePopupTabs(site);
   configureGlobalTab();
   configureSitesTab(site);
   configureVideoTab();
 
-  //#region - SET STRETCH
-  //
-  // // set stretching
-  // for (var button in StretchPanel.global) {
-  //   StretchPanel.global[button].classList.remove("selected");
-  // }
-  // if (settings.active.stretch.initialMode === 0) {
-  //   StretchPanel.global.none.classList.add("selected");
-  // } else if (settings.active.stretch.initialMode === 1) {
-  //   StretchPanel.global.basic.classList.add("selected");
-  // } else if (settings.active.stretch.initialMode === 2) {
-  //   StretchPanel.global.hybrid.classList.add("selected");
-  // } else if (settings.active.stretch.initialMode === 3) {
-  //   StretchPanel.global.conditional.classList.add("selected");
-  // }
-  //#endregion
-
-
-  
-
   if(Debug.debug)
-    console.log("[popup.js::loadConfig] config loaded");
+    console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n");
 }
 
 async function getSite(){

res/popup/popup.html

@@ -61,10 +61,7 @@
           </div>
 
           <!-- TODO: default aspect ratio settings -->
-          <p class="warning">
+          <span class="label experimental">Default stretching mode</span>
-            <b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
-          </p>
-          <span class="label">Default stretching mode</span>
           <div class="button-row">
             <a id="_stretch_global_none"        class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
             <a id="_stretch_global_basic"       class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>            
@@ -109,9 +106,10 @@
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a id="_align_site_left"   class="button _align _align_site_left">left</a>
+            <a id="_align_site_left"   class="button _align _align_video_left">left</a>
-            <a id="_align_site_center" class="button _align _align_site_center">center</a>
+            <a id="_align_site_center" class="button _align _align_video_center">center</a>
-            <a id="_align_site_right"  class="button _align _align_site_right">right</a>
+            <a id="_align_site_right"  class="button _align _align_video_right">right</a>
+            <a id="_align_site_default"class="button _align _align_site_right">default</a>
           </div>
         </div>
       </div>
@@ -145,10 +143,7 @@
         </div>
 
         <!-- ZOOM STUFF -->
-        <p class="warning">
+        <span class="label experimental">Manual zooming and panning</span>
-          <b>Zoom settings currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
-        </p>
-        <span class="label">Manual zooming and panning</span>
         <div class="row">
           <!--
             min, max and value need to be implemented in js as this slider 
@@ -176,10 +171,7 @@
         </div>
 
         <!-- STRETCH STUFF -->
-        <p class="warning">
+        <span class="label experimental">Stretching mode</span>
-          <b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
-        </p>
-        <span class="label">Stretching mode</span>
         <div class="button-row">
           <a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
           <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>