Commands from popup to content script seem to work

src/common/components/shortcut-button.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="w100">
+      {{label}}
+    </div>
+    <div class="w100 dark">
+      <small>
+        {{shortcut ? `(${shortcut})` : ''}}
+      </small>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    shortcut: String
+  }
+}
+</script>
+
+<style>
+
+.dark {
+  opacity: 50%;
+}
+</style>

src/ext/conf/Debug.js

@@ -13,11 +13,11 @@ var Debug = {
   // comms: false,
   comms: true,
   // showArDetectCanvas: true,
-  flushStoredSettings: true,
-  // flushStoredSettings: false,
+  // flushStoredSettings: true,
+  flushStoredSettings: false,
   playerDetectDebug: true,
   periodic: true,
-  videoRescan: true,
+  // videoRescan: true,
   mousemove: true,
   arDetect: {
     edgeDetect: true
@@ -48,8 +48,6 @@ function __disableAllDebug(obj) {
   }
 }
 
-Debug = Debug;
-
 if(Debug.debug)
   console.log("Guess we're debugging ultrawidify then. Debug.js must always load first, and others must follow.\nLoading: Debug.js");
 

src/ext/lib/ActionHandler.js

@@ -1,6 +1,5 @@
 import Debug from '../conf/Debug';
 import PlayerData from './video-data/PlayerData';
-import Comms from './comms/Comms';
 
 class ActionHandler {
 
@@ -221,6 +220,8 @@ class ActionHandler {
           }
         }
 
+        // če smo našli dejanje za to tipko, potem ne preiskujemo naprej
+        // if we found an action for this key, we stop searching for a match
         return;
       }
     }

src/ext/lib/ObjectCopy.js

@@ -1,3 +1,5 @@
+import Debug from '../conf/Debug';
+
 class ObjectCopy {
   static addNew(existing, target){
     

src/ext/lib/Settings.js

@@ -2,6 +2,7 @@ import Debug from '../conf/Debug';
 import currentBrowser from '../conf/BrowserDetect';
 import ExtensionConf from '../conf/ExtensionConf';
 import ExtensionMode from '../../common/enums/extension-mode';
+import ObjectCopy from '../lib/ObjectCopy';
 
 class Settings {
 

src/ext/lib/comms/CommsServer.js

@@ -1,5 +1,5 @@
 import Debug from '../../conf/Debug';
-import BrowserDetect from '../../conf/Debug';
+import BrowserDetect from '../../conf/BrowserDetect';
 
 class CommsServer {
   constructor(server) {
@@ -9,12 +9,14 @@ class CommsServer {
 
     var ths = this;
 
+    console.log("[CommsServer::ctor] INIT! are we in ff?", BrowserDetect.firefox, "BrowserDetect says ...", BrowserDetect)
+
     if (BrowserDetect.firefox) {
       browser.runtime.onConnect.addListener(p => ths.onConnect(p));
       browser.runtime.onMessage.addListener(m => ths.processReceivedMessage_nonpersistent_ff(m));
     } else {
       chrome.runtime.onConnect.addListener(p => ths.onConnect(p));
-      chrome.runtime.onMessage.addListener((msg, sender, callback) => ths.processReceivedMessage_nonpersistent_chrome(m, sender, callback));
+      chrome.runtime.onMessage.addListener((m, sender, callback) => ths.processReceivedMessage_nonpersistent_chrome(m, sender, callback));
     }
   }
 
@@ -136,7 +138,15 @@ class CommsServer {
 
   async processReceivedMessage(message, port){
     if (Debug.debug && Debug.comms) {
-      console.log("[CommsServer.js::processMessage] Received message from background script!", message, "port", port, "\nsettings and server:", this.settings,this.server);
+      console.log("[CommsServer.js::processReceivedMessage] Received message from popup/content script!", message, "port", port, "\nsettings and server:", this.settings,this.server);
+    }
+
+    if (message.forwardToContentScript) {
+      if (Debug.debug && Debug.comms) {
+        console.log("[CommsServer.js::processReceivedMessage] Message has 'forward to content script' flag set. Forwarding message as is. Message:", message);
+      }
+
+      this.sendToFrame(message, message.targetFrame);
     }
 
     if (message.cmd === 'announce-zoom') {
@@ -162,33 +172,11 @@ class CommsServer {
         console.log("CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")")
       }
       port.postMessage({cmd: "set-config", conf: this.settings.active, site: this.server.currentSite})
-    } else if (message.cmd === 'set-stretch') {
-      this.sendToFrame(message, message.targetFrame);
-    } else if (message.cmd === 'set-ar') {
-      this.sendToFrame(message, message.targetFrame);
-    } else if (message.cmd === 'set-alignment') {
-      this.sendToFrame(message, message.targetFrame);
-    } else if (message.cmd === 'autoar-start') {
-      this.sendToFrame(message, message.targetFrame);
-    } else if (message.cmd === "autoar-disable") {  // LEGACY - can be removed prolly
-      this.settings.active.arDetect.mode = "disabled";
-      if(message.reason){
-        this.settings.active.arDetect.disabledReason = message.reason;
-      } else {
-        this.settings.active.arDetect.disabledReason = 'User disabled';
-      }
-      this.settings.save();
-    } else if (message.cmd === 'set-zoom') {
-      this.sendToFrame(message, message.targetFrame);      
     } else if (message.cmd === 'has-video') {
       this.server.registerVideo(port.sender);
     } else if (message.cmd === 'noVideo') {
       this.server.unregisterVideo(port.sender);
-    } else if (message.cmd === 'mark-player') {
-      this.sendToFrame(message, message.targetTab, message.targetFrame);
-    } else if (message.cmd === 'unmark-player') {
-      this.sendToAll(message);
-    }
+    } 
   }
 
   processReceivedMessage_nonpersistent_ff(message, sender){
@@ -196,6 +184,15 @@ class CommsServer {
       console.log("%c[CommsServer.js::processMessage_nonpersistent_ff] Received message from background script!", "background-color: #11D; color: #aad", message, sender);
     }
 
+    if (message.forwardToContentScript) {
+      if (Debug.debug && Debug.comms) {
+        console.log("[CommsServer.js::processMessage_nonpersistent_ff] Message has 'forward to content script' flag set. Forwarding message as is. Message:", message);
+        console.log("[CommsServer.js::processMessage_nonpersistent_ff] (btw we probably shouldn't be seeing this. This should prolly happen in persistent connection?");
+      }
+
+      this.sendToFrame(message, message.targetFrame);
+    }
+
     if (message.cmd === 'get-config') {
       var ret = {extensionConf: JSON.stringify(this.settings.active)};
       if (Debug.debug && Debug.comms) {
@@ -236,6 +233,10 @@ class CommsServer {
   processReceivedMessage_nonpersistent_chrome(message, sender, sendResponse){
     if (Debug.debug && Debug.comms) {
       console.log("[CommsServer.js::processMessage_nonpersistent_chrome] Received message from background script!", message);
+      
+      if (BrowserDetect.firefox) {
+        throw "WHAT THE FUCK WHY IS THIS RUNNING, THIS ISNT SUPPOSED TO BE RUNNING RN"
+      }
     }
 
     if(message.cmd === 'get-config') {

src/options/options.js

@@ -1,8 +1,6 @@
 // console.log("global browser", browser, global.browser)
 // global.browser = require('webextension-polyfill')
 
-
-
 import Vue from 'vue'
 import App from './App'
 

src/popup/App.vue

@@ -1,13 +1,44 @@
 <template>
   <div>
-    <p>Hello world!</p>
+    <div class="header">
+      <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
+    </div>
+
+     <!-- TABS/SIDEBAR -->
+    <div id="tablist" class="left-side">
+    </div>
+
+     <!-- PANELS/CONTENT -->
+    <div id="tab-content" class="right-side">
+      <VideoPanel v-if="settings && settings.active && true"
+                  class=""
+                  :settings="settings"
+                  :frame="selectedFrame"
+      >
+      </VideoPanel>
+    </div>
   </div>
 </template>
 
 <script>
+import VideoPanel from './panels/VideoPanel';
+import Settings from '../ext/lib/Settings';
+
 export default {
   data () {
-    return {}
+    return {
+      selectedTab: 'video',
+      selectedFrame: '__all',
+      settings: {},
+    }
+  },
+  async created() {
+    const ns = new Settings();
+    await ns.init();
+    this.settings = ns;
+  },
+  components: {
+    VideoPanel,
   }
 }
 </script>

src/popup/js/ExecAction.js

@@ -0,0 +1,49 @@
+import Comms from '../../ext/lib/comms/Comms';
+
+class ExecAction {
+  constructor(settings) {
+    this.settings = settings;
+  }
+
+  setSettings(settings) {
+    this.settings = settings;
+  }
+
+  exec(action, scope, frame) {
+    for (var cmd of action.cmd) {
+      if (scope === 'page') {
+        const message = {
+          forwardToContentScript: true,
+          targetFrame: frame,
+          cmd: cmd.action,
+          arg: cmd.arg
+        }
+        Comms.sendMessage(message);
+      } else if (scope === 'site') {
+        if (cmd.action === "set-stretch") {
+          this.settings.active.sites[window.location.host].stretch = cmd.arg;
+        } else if (cmd.action === "set-alignment") {
+          this.settings.active.sites[window.location.host].videoAlignment = cmd.arg;
+        } else if (cmd.action === "set-extension-mode") {
+          this.settings.active.sites[window.location.host].status = cmd.arg;
+        } else if (cmd.action === "set-autoar-mode") {
+          this.settings.active.sites[window.location.host].arStatus = cmd.arg;
+        }
+        this.settings.save();
+      } else if (scope === 'global') {
+        if (cmd.action === "set-stretch") {
+          this.settings.active.stretch.initialMode = cmd.arg;
+        } else if (cmd.action === "set-alignment") {
+          this.settings.active.miscSettings.videoAlignment = cmd.arg;
+        } else if (cmd.action === "set-extension-mode") {
+          this.settings.active.extensionMode = cmd.arg;
+        } else if (cmd.action === "set-autoar-mode") {
+          this.settings.active.arDetect.mode.arStatus = cmd.arg;
+        }
+        this.settings.save();
+      }
+    }
+  }
+}
+
+export default ExecAction;

src/popup/panels/AboutPanel.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div class="row">
+      <span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
+    </div>
+    <div class="row">
+    <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options:
+      <ul>
+        <li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (strongly preferred)</b></a><br/></li>
+        <li>PM me on <a target="_blank" href="https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM">reddit</a><br/></li>
+        <li>Email: <a target="_blank" href="mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D+ENTER+SUMMARY+OF+YOUR+ISSUE+HERE&body=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM">tamius.han@gmail.com</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    'addonVersion': String
+  }
+}
+</script>
+

src/popup/panels/DonatePanel.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    TODO: beggathon
+  </div>
+</template>

src/popup/panels/VideoPanel.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div v-if="true">
+      <div class="label">Cropping mode:</div>
+      <div class="flex flex-row">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
+                          class=""
+                          :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Zooming and panning</div>
+      <div class="row">
+        <!--
+          min, max and value need to be implemented in js as this slider 
+          should use logarithmic scale
+        -->
+        <input id="_input_zoom_slider" class="w100"
+                type="range"
+                step="any"
+                />
+        <div style="overflow: auto">
+          <div class="inline-block float-left medium-small x-pad-1em">
+            Zoom: <span id="_label_zoom_level">100</span>%
+          </div>
+          <div class="inline-block float-right medium-small">
+            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+          </div> 
+        </div>
+
+        <div class="m-t-0-33em w100 display-block">
+          <input id="_input_zoom_site_allow_pan"
+                  type="checkbox" 
+                  />
+          Pan with mouse
+        </div>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Stretching mode:</div>
+      <div class="flex flex-row">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
+                          class=""
+                          :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Video alignment:</div>
+      <div class="flex flex-row">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
+                          class=""
+                          :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Multi-command actions:</div>
+      <div class="flex flex-row">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length > 1"
+                          class=""
+                          :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import ExecAction from '../js/ExecAction'
+import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser'
+import ShortcutButton from '../../common/components/shortcut-button'
+
+export default {
+  data() {
+    return { }
+  },
+  props: [
+    'settings',
+    'frame'
+  ],
+  created() {
+    this.exec = new ExecAction(this.settings);
+  },
+  components: {
+    ShortcutButton,
+  },
+  methods: {
+    execAction(action) { 
+      this.exec.exec(action, 'page', this.frame);
+    },
+    parseShortcut(action) {
+      if (! action.scopes.page.shortcut) {
+        return '';
+      }
+      return KeyboardShortcutParser.parseShortcut(action.scopes.page.shortcut[0]);
+    },
+    resetZoom() {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/popup/popup.js

@@ -7,7 +7,5 @@ import App from './App'
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
-  store,
-  
   render: h => h(App)
 })