Add some things we missed in initial implementation of pointer-events toggling

src/csui/PlayerUiBase.vue

@@ -135,8 +135,8 @@ export default {
       // NOTE: chromium doesn't allow us to access window.parent.location
       // meaning we will have to correct this value from our uwui-probe
       // messages ... which is a bummer.
-      // site: window.location.hostname,
       site: null,
+      origin: '*', // will be set appropriately once the first uwui-probe event is received
       lastProbeTs: null,
 
       uiVisible: true,
@@ -185,30 +185,35 @@ export default {
   },
 
   async created() {
-    try {
+    this.logger = new Logger();
-      this.logger = new Logger();
+    await this.logger.init({
-      await this.logger.init({
+        allowLogging: true,
-          allowLogging: true,
+    });
-      });
 
-      this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
+    this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
-      await this.settings.init();
+    await this.settings.init();
-      this.settingsInitialized = true;
+    this.settingsInitialized = true;
 
-      console.log("settings inited")
+    console.log("settings inited")
 
-      // set up communication with client script
+    // set up communication with client script
-      window.addEventListener('message', event => {
+    window.addEventListener('message', event => {
-        console.log('[iframe] received event:', event)
+      this.handleMessage(event);
-        try {
+    });
-          this.handleMessage(event);
+
-        } catch (e) {
+    /**
-          console.error('could not handle message:', e)
+     * Setup the "companion" onMouseMove handler to the one in the content script.
+     * We can handle events with the same function we use to handle events from
+     * the content script.
+     */
+    document.addEventListener('mousemove', (event) => {
+      this.handleProbe({
+        coords: {
+          x: event.clientX,
+          y: event.clientY
         }
-      });
+      }, this.origin);
-    } catch (e) {
+    });
-      console.error('Failed to initiate ultrawidify player ui.', e);
-    }
   },
 
   methods: {
@@ -226,8 +231,8 @@ export default {
      */
     handleMessage(event) {
       if (event.data.action === 'uwui-probe') {
-      if (event.data.cmd === 'uwui-probe') {
         if (!this.site) {
+          this.origin = event.origin;
           this.site = event.origin.split('//')[1];
         }
         this.handleProbe(event.data, event.origin);
@@ -241,7 +246,7 @@ export default {
      */
     handleProbe(eventData, origin) {
       if (eventData.ts < this.lastProbeTs) {
-        return; // i dont know if events can arrive out-of-order. Prolly not. We still check.
+        return; // i don't know if events can arrive out-of-order. Prolly not. We still check.
       }
       this.lastProbeTs = eventData.ts;
 
@@ -269,12 +274,17 @@ export default {
 
       window.parent.postMessage(
         {
-          cmd: 'uwui-clickable',
+          action: 'uwui-clickable',
           clickable: isClickable,
           ts: +new Date()
         },
         origin
       );
+    },
+
+    selectTab(tab) {
+      console.log('selected tab:', tab);
+      console.warn('NOTE: tab selection is not syet inplemented!')
     }
   }
 }

src/ext/lib/uwui/UI.js

@@ -13,7 +13,7 @@ class UI {
     this.uiURI = browser.runtime.getURL('/csui/csui.html');
     this.extensionBase = browser.runtime.getURL('').replace(/\/$/, "");
 
-    console.log('init init');
+    this.eventBus = uiConfig.eventBus;
 
     this.init();
   }
@@ -51,41 +51,33 @@ class UI {
     iframe.style.border = 0;
     iframe.style.pointerEvents = 'none';
 
-    // so we have a problem: we want iframe to be clickthrough everywhere except
+    /* so we have a problem: we want iframe to be clickthrough everywhere except
-    // on our actual overlay. There's no nice way of doing that, so we need some
+     * on our actual overlay. There's no nice way of doing that, so we need some
-    // extra javascript to deal with this
+     * extra javascript to deal with this.
+     *
+     * There's a second problem: while iframe is in clickable mode, onMouseMove
+     * will not work (as all events will be hijacked by the iframe). This means
+     * that iframe also needs to run its own instance of onMouseMove.
+     */
+
 
     iframe.onload = function() {
-
+      document.addEventListener('mousemove', (event) => {
-      function onMouseMove(event) {
+        const coords = {
-        let coords;
+          x: event.pageX - iframe.offsetLeft,
-        if (event.currentTarget === document) {
+          y: event.pageY - iframe.offsetTop
-          coords = {
+        };
-            x: event.pageX - iframe.offsetLeft,
-            y: event.pageY - iframe.offsetTop
-          }
-        } else {
-          coords = {
-            x: event.clientX,
-            y: event.clientY
-          }
-        }
-
 
         // ask the iframe to check whether there's a clickable element
         iframe.contentWindow.postMessage(
           {
-            cmd: 'uwui-probe',
+            action: 'uwui-probe',
             coords,
             ts: +new Date()   // this should be accurate enough for our purposes
           },
           uiURI
         );
-
+      }, true);
-        // iframe.style.pointerEvents = isClickable ? 'auto' : 'none';
-      }
-
-      document.addEventListener('mousemove', onMouseMove, true);
     }
 
     rootDiv.appendChild(iframe);
@@ -97,6 +89,7 @@ class UI {
     this.uiIframe = iframe;
   }
 
+
   /**
    * Handles events received from the iframe.
    * @param {*} event
@@ -105,12 +98,13 @@ class UI {
     console.log('[main] received event:', event.origin, this.uiURI, this.extensionBase, event)
     if (event.origin === this.extensionBase) {
       if (event.data.action === 'uwui-clickable') {
-      if (event.data.cmd === 'uwui-clickable') {
         if (event.data.ts < this.lastProbeResponseTs) {
           return;
         }
         this.lastProbeResponseTs = event.data.ts;
         this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
+      } else {
+        this.eventBus.send(event.data.action, event.data.arguments);
       }
     }
   }