Popup: functional. TODO: implement command handling in CommsClient

js/conf/Debug.js

@@ -10,7 +10,8 @@ Debug = {
   debugStorage: false,
   comms: false,
   // showArDetectCanvas: true,
-  flushStoredSettings: false,
+  flushStoredSettings: true,
+  // flushStoredSettings: false,
   playerDetectDebug: true,
   periodic: true,
   videoRescan: true,

js/conf/ExtensionConf.js

@@ -203,7 +203,7 @@ var ExtensionConf = {
   //    arStatus: <option>            // should we do autodetection on this site?
   //    statusEmbedded: <option>      // reserved for future... maybe
   //    
-  //    ar?: <ratio>                  // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
+  //    defaultAar?: <ratio>          // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
   //    stretch? <stretch mode>       // automatically stretch video on this site in this manner
   //    videoAlignment? <left|center|right>
   //

js/lib/Settings.js

@@ -275,26 +275,26 @@ class Settings {
   getDefaultAr(site) {
     site = this.getSiteSettings(site);
 
-    if (this.active.sites[site].ar) {
+    if (site.defaultAr) {
-      return this.active.sites[site].ar;
+      return site.defaultAr;
     }
     return this.active.miscFullscreenSettings.defaultAr;
   }
 
-  getDefaultStretch(site) {
+  getDefaultStretchMode(site) {
     site = this.getSiteSettings(site);
 
-    if (this.active.sites[site].stretch) {
+    if (site.stretch) {
-      return this.active.sites[site].stretch;
+      return site.stretch;
     }
-    return this.active.miscFullscreenSettings.stretch.initialMode;
+    return this.active.stretch.initialMode;
   }
 
   getDefaultVideoAlignment(site) {
     site = this.getSiteSettings(site);
 
-    if (this.active.sites[site].videoAlignment) {
+    if (site.videoAlignment) {
-      return this.active.sites[site].videoAlignment;
+      return site.videoAlignment;
     }
     return this.active.miscFullscreenSettings.videoFloat;
   }

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Ultrawidify",
-  "version": "3.2.0",
+  "version": "3.2.0-a1",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

res/popup/js/popup.js

@@ -30,6 +30,11 @@ ExtPanel.alignment = {};
 ExtPanel.alignment.left       = document.getElementById("_align_ext_left");
 ExtPanel.alignment.center     = document.getElementById("_align_ext_center");
 ExtPanel.alignment.right      = document.getElementById("_align_ext_right");
+ExtPanel.stretch = {};
+ExtPanel.stretch['0']         = document.getElementById("_stretch_global_none");
+ExtPanel.stretch['1']         = document.getElementById("_stretch_global_basic");
+ExtPanel.stretch['2']         = document.getElementById("_stretch_global_hybrid");
+ExtPanel.stretch['3']         = document.getElementById("_stretch_global_conditional");
 //#endregion
 //#region SitePanel
 var SitePanel = {};
@@ -46,8 +51,14 @@ SitePanel.alignment.left       = document.getElementById("_align_site_left");
 SitePanel.alignment.center     = document.getElementById("_align_site_center");
 SitePanel.alignment.right      = document.getElementById("_align_site_right");
 SitePanel.alignment.default    = document.getElementById("_align_site_default");
+SitePanel.stretch = {};
+SitePanel.stretch['-1']        = document.getElementById("_stretch_site_default")
+SitePanel.stretch['0']         = document.getElementById("_stretch_site_none")
+SitePanel.stretch['1']         = document.getElementById("_stretch_site_basic")
+SitePanel.stretch['2']         = document.getElementById("_stretch_site_hybrid")
+SitePanel.stretch['3']         = document.getElementById("_stretch_site_conditional")
 //#endregion
-
+//#region VideoPanel
 var VideoPanel = {};
 VideoPanel.alignment = {};
 VideoPanel.alignment.left   = document.getElementById("_align_video_left");
@@ -70,6 +81,9 @@ VideoPanel.buttons = {};
 VideoPanel.buttons.zoom = {};
 VideoPanel.buttons.zoom.showShortcuts = document.getElementById("_zoom_b_show_shortcuts");
 VideoPanel.buttons.zoom.hideShortcuts = document.getElementById("_zoom_b_hide_shortcuts");
+VideoPanel.buttons.changeAr = {};
+VideoPanel.buttons.changeAr.showCustomAr = document.getElementById("_changeAr_b_show_customAr");
+VideoPanel.buttons.changeAr.hideCustomAr = document.getElementById("_changeAr_b_hide_customAr");
 
 // inputs (getting values)
 VideoPanel.inputs = {};
@@ -81,6 +95,12 @@ VideoPanel.inputs.allowPan         = document.getElementById("_input_zoom_site_a
 VideoPanel.labels = {};
 VideoPanel.labels.zoomLevel        = document.getElementById("_label_zoom_level");
 
+// misc stuff
+VideoPanel.misc = {};
+VideoPanel.misc.zoomShortcuts      = document.getElementById("_zoom_shortcuts");
+VideoPanel.misc.customArChanger    = document.getElementById("_changeAr_customAr");
+
+//#endregion
 
 var selectedMenu = "";
 var hasVideos = false;
@@ -179,6 +199,7 @@ function configureGlobalTab() {
     "\nextension mode:  ", settings.active.extensionMode,
     "\narDetect mode:   ", settings.active.arDetect.mode,
     "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
+    "\nstretch mode:    ", settings.active.stretch.initialMode,
     "\n..")
   }
 
@@ -186,19 +207,20 @@ function configureGlobalTab() {
   for(var button in ExtPanel.extOptions) {
     ExtPanel.extOptions[button].classList.remove("selected");
   }
-  try{
   for(var button in ExtPanel.arOptions) {
     ExtPanel.arOptions[button].classList.remove("selected");
   }
-  } catch (e) {};
   for(var button in ExtPanel.alignment) {
     ExtPanel.alignment[button].classList.remove("selected");
   }
+  for(var button in ExtPanel.stretch) {
+    ExtPanel.stretch[button].classList.remove("selected");
+  }
 
   ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
-
   ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
   ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
+  ExtPanel.stretch[settings.active.stretch.initialMode].classList.add("selected");
 }
 
 function configureSitesTab(site) {
@@ -222,16 +244,25 @@ function configureSitesTab(site) {
   for(const button in SitePanel.alignment) {
     SitePanel.alignment[button].classList.remove("selected");
   }
+  for(const button in SitePanel.stretch) {
+    SitePanel.stretch[button].classList.remove("selected");
+  }
 
   SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
   SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
 
   // optional settings:
-  if (settings.active.sites.ar) {
+  if (settings.active.sites[site].videoAlignment) {
     SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected");
   } else {
     SitePanel.alignment.default.classList.add('selected');
   }
+
+  if(settings.active.sites[site].stretch !== undefined) {  // can be 0
+    SitePanel.stretch[settings.active.sites[site].stretch].classList.add("selected");
+  } else {
+    SitePanel.stretch['-1'].classList.add("selected");
+  }
 }
 
 function configureVideoTab() {
@@ -294,10 +325,18 @@ function configureVideoTab() {
   VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
   VideoPanel.inputs.zoomSlider.max = Math.log2(8);
   VideoPanel.inputs.zoomSlider.value = 0;
+
   VideoPanel.inputs.zoomSlider.addEventListener('input', (event) => {
     var newZoom = Math.pow(2, VideoPanel.inputs.zoomSlider.value);
     // TODO: send new zoom value to current tab
     VideoPanel.labels.zoomLevel.textContent = (newZoom * 100).toFixed();
+
+    var command = {
+      cmd: 'set-zoom',
+      zoom: newZoom
+    };
+
+    port.postMessage(command);
   });
 }
 
@@ -517,6 +556,7 @@ document.addEventListener("click", (e) => {
       }
     }
     if(e.target.classList.contains("_stretch")){
+      // stretch, global
       if (e.target.classList.contains("_ar_stretch_global")) {
         if (e.target.classList.contains("_none")) {
           settings.active.stretch.initialMode = 0;
@@ -531,6 +571,23 @@ document.addEventListener("click", (e) => {
         return;
       }
 
+      // stretch, site
+      if (e.target.classList.contains("_ar_stretch_site")) {
+        if (e.target.classList.contains("_none")) {
+          settings.active.sites[site].stretch = 0;
+        } else if (e.target.classList.contains("_basic")) {
+          settings.active.sites[site].stretch = 1;
+        } else if (e.target.classList.contains("_hybrid")) {
+          settings.active.sites[site].stretch = 2;
+        } else if (e.target.classList.contains("_conditional")) {
+          settings.active.sites[site].stretch = 3;
+        } else {
+          delete(settings.active.sites[site].stretch);
+        }
+        settings.save();
+        return;
+      }
+
       if(e.target.classList.contains("_ar_stretch_none")) {
         command.cmd = "set-stretch";
         command.mode = "NO_STRETCH";
@@ -591,21 +648,83 @@ document.addEventListener("click", (e) => {
       }
     }
     
-    if(e.target.classList.contains("_align")){
+
-      
+    if (e.target.classList.contains("_align_ext")) {
-      command.global = true;
+      if (e.target.classList.contains("_align_ext_left")) {
-      
-      if (e.target.classList.contains("_align_left")) {
         settings.active.miscFullscreenSettings.videoFloat = 'left';
-      } else if (e.target.classList.contains("_align_center")) {
+      } else if (e.target.classList.contains("_align_ext_center")) {
         settings.active.miscFullscreenSettings.videoFloat = 'center';
-      } else if (e.target.classList.contains("_align_right")) {
+      } else if (e.target.classList.contains("_align_ext_right")) {
-        settings.active.miscFullscreenSettings.videoFloat = 'left';
+        settings.active.miscFullscreenSettings.videoFloat = 'right';
+      }
+    }
+    if (e.target.classList.contains("_align_site")) {
+      if (!site) {
+        return;
+      }
+      if (e.target.classList.contains("_align_site_left")) {
+        settings.active.sites[site].videoAlignment = 'left';
+      } else if (e.target.classList.contains("_align_site_center")) {
+        settings.active.sites[site].videoAlignment = 'center';
+      } else if (e.target.classList.contains("_align_site_right")) {
+        settings.active.sites[site].videoAlignment = 'right';
+      } else {
+        // default case — remove this object
+        delete(settings.active.sites[site].videoAlignment);
       }
 
       settings.save();
       return;
-    }    
+    }
+    if (e.target.classList.contains("_align")) {
+      command.cmd = "set-alignment";
+
+      if (e.target.classList.contains("_align_left")) {
+        command.mode = 'left';
+      } else if (e.target.classList.contains("_align_center")) {
+        command.mode = 'center';
+      } else if (e.target.classList.contains("_align_right")) {
+        command.mode = 'right';
+      }
+      
+      return command;
+    }
+
+    //#region zoom buttons
+    if (e.target.classList.contains("_zoom_show_shortcuts")) {
+      VideoPanel.misc.zoomShortcuts.classList.remove("hidden");
+      VideoPanel.buttons.zoom.hideShortcuts.classList.remove("hidden");
+      VideoPanel.buttons.zoom.showShortcuts.classList.add("hidden");
+      return;
+    }
+    if (e.target.classList.contains("_zoom_hide_shortcuts")) {
+      VideoPanel.misc.zoomShortcuts.classList.add("hidden");
+      VideoPanel.buttons.zoom.hideShortcuts.classList.add("hidden");
+      VideoPanel.buttons.zoom.showShortcuts.classList.remove("hidden");
+      return;
+    }
+    if (e.target.classList.contains("_zoom_reset")) {
+      VideoPanel.labels.zoomLevel.textContent = 100;
+      VideoPanel.inputs.zoomSlider.value = 0;         // log₂(1)
+      command.cmd = 'set-zoom';
+      command.zoom = 1;
+      return;
+    }
+    //#endregion
+    //#region show/hide custom ar
+    if (e.target.classList.contains("_changeAr_show_customAr")) {
+      VideoPanel.misc.customArChanger.classList.remove("hidden");
+      VideoPanel.buttons.changeAr.showCustomAr.classList.add("hidden");
+      VideoPanel.buttons.changeAr.hideCustomAr.classList.remove("hidden");
+      return;
+    }
+    if (e.target.classList.contains("_changeAr_hide_customAr")) {
+      VideoPanel.misc.customArChanger.classList.add("hidden");
+      VideoPanel.buttons.changeAr.showCustomAr.classList.remove("hidden");
+      VideoPanel.buttons.changeAr.hideCustomAr.classList.add("hidden");
+      return;
+    }
+    //#endregion
   }
   
   var command = getcmd(e);  

res/popup/popup.html

@@ -61,6 +61,7 @@
           </div>
 
           <!-- TODO: default aspect ratio settings -->
+
           <span class="label experimental">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>
@@ -74,9 +75,9 @@
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a id="_align_ext_left"   class="button _align _align_ext_left">left</a>
+            <a id="_align_ext_left"   class="button _align_ext _align_ext_left">Left</a>
-            <a id="_align_ext_center" class="button _align _align_ext_center">center</a>
+            <a id="_align_ext_center" class="button _align_ext _align_ext_center">Center</a>
-            <a id="_align_ext_right"  class="button _align _align_ext_right">right</a>
+            <a id="_align_ext_right"  class="button _align_ext _align_ext_right">Right</a>
           </div>
         </div>
       </div>
@@ -100,16 +101,29 @@
             <a id="_ar_site_options_disabled" class="button _autoAr _ar_site_options _disabled">Blacklist</a>
           </div>
         </div>
+
         <!-- TODO: default aspect ratio, default settings -->
 
+        <!-- STRETCH MODE -->
+        <div class="row">
+          <span class="label experimental">Default stretching mode</span>
+          <div class="button-row">
+            <a id="_stretch_site_none"        class="button _stretch _ar_stretch_site _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
+            <a id="_stretch_site_basic"       class="button _stretch _ar_stretch_site _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>            
+            <a id="_stretch_site_hybrid"      class="button _stretch _ar_stretch_site _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
+            <a id="_stretch_site_conditional" class="button _stretch _ar_stretch_site _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
+            <a id="_stretch_site_default"     class="button _stretch _ar_stretch_site _default w24">Default<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
+          </div>
+        </div>
+
         <!-- VIDEO ALIGNMENT -->
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a id="_align_site_left"   class="button _align _align_video_left">left</a>
+            <a id="_align_site_left"   class="button _align_site _align_site_left">Left</a>
-            <a id="_align_site_center" class="button _align _align_video_center">center</a>
+            <a id="_align_site_center" class="button _align_site _align_site_center">Center</a>
-            <a id="_align_site_right"  class="button _align _align_video_right">right</a>
+            <a id="_align_site_right"  class="button _align_site _align_site_right">Right</a>
-            <a id="_align_site_default"class="button _align _align_site_right">default</a>
+            <a id="_align_site_default"class="button _align_site _align_site_default">Default</a>
           </div>
         </div>
       </div>
@@ -129,8 +143,14 @@
             <a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
             <a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
           </div>
+          <div style="overflow: auto">
+            <div class="float-right medium-small">
+              <a id="_changeAr_b_show_customAr" class="_changeAr_show_customAr x-pad-1em">Set custom aspect ratio</a>
+              <a id="_changeAr_b_hide_customAr" class="_changeAr_hide_customAr hidden x-pad-1em">Hide custom aspect ratio settings</a>
+            </div>
+          </div>
         </div>
-        <div class="row">
+        <div id="_changeAr_customAr" class="row hidden">
           <span class="label">Custom aspect ratio</span>
           <div>
             <input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
@@ -158,16 +178,25 @@
               Zoom: <span id="_label_zoom_level">100</span>%
             </div>
             <div class="inline-block float-right medium-small">
-              <a class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a><a class="_zoom_hide_shortcuts hidden x-pad-1em">show shortcuts</a><a class="_zoom_reset x-pad-1em">reset</a>
+              <a id="_zoom_b_show_shortcuts" class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a>
+              <a id="_zoom_b_hide_shortcuts" class="_zoom_hide_shortcuts hidden x-pad-1em">hide shortcuts</a>
+              <a class="_zoom_reset x-pad-1em">reset</a>
             </div> 
           </div>
-          <div class="m-t-0-33em w100 display-block">
+          <!-- <div class="m-t-0-33em w100 display-block">
             <input id="_input_zoom_site_allow_pan"
                    type="checkbox" 
                    />
             Pan with mouse
+          </div> -->
+          <div id="_zoom_shortcuts" class="row hidden">
+            <small>Keyboard shortcuts:<ul>
+              <li>Z: zoom</li>
+              <li>U: unzoom</li>
+              <li>P: toggle pan</li>
+              <li>shift: hold to enable/prevent pan</li>
+            </ul></small>
           </div>
-          <!-- <small>Keyboard shortcuts:<ul><li>Z: zoom</li><li>U: unzoom</li><li>P: toggle pan</li><li>shift: hold to enable/prevent pan</li></ul></small> -->
         </div>
 
         <!-- STRETCH STUFF -->
@@ -183,9 +212,9 @@
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a id="_align_video_left"   class="button _align _align_video_left">left</a>
+            <a id="_align_video_left"   class="button _align _align_video_left">Left</a>
-            <a id="_align_video_center" class="button _align _align_video_center">center</a>
+            <a id="_align_video_center" class="button _align _align_video_center">Center</a>
-            <a id="_align_video_right"  class="button _align _align_video_right">right</a>
+            <a id="_align_video_right"  class="button _align _align_video_right">Right</a>
           </div>
         </div>
       </div>