Toggle 'pointer-events' based on whether mouse hovers over a csui element or not

.vscode/settings.json

@@ -9,6 +9,7 @@
     "blackbars",
     "blackframe",
     "canvas",
+    "clickthrough",
     "com",
     "comms",
     "csui",

src/ext/lib/uwui/UI.js

@@ -9,6 +9,9 @@ class UI {
   ) {
     this.interfaceId = interfaceId;
     this.uiConfig = uiConfig;
+    this.lastProbeResponseTs = null;
+    this.uiURI = browser.runtime.getURL('/csui/csui.html');
+    this.extensionBase = browser.runtime.getURL('').replace(/\/$/, "");
 
     console.log('init init');
 
@@ -16,8 +19,6 @@ class UI {
   }
 
   async init() {
-    try {
-    console.log('—————————————— init');
     const random = Math.round(Math.random() * 69420);
     const uwid = `uw-ultrawidify-${this.interfaceId}-root-${random}`
 
@@ -37,8 +38,9 @@ class UI {
 
     this.element = rootDiv;
 
-    try {
+    // in onMouseMove, we currently can't access this because we didn't
-      const uiURI = browser.runtime.getURL('/csui/csui.html');
+    // do things the most properly
+    const uiURI = this.uiURI;
 
     const iframe = document.createElement('iframe');
     iframe.setAttribute('src', uiURI);
@@ -54,14 +56,8 @@ class UI {
     // extra javascript to deal with this
 
     iframe.onload = function() {
-        console.log('[iframe-onload]: we are doing the onload!')
-        const iframeDocument = iframe.contentDocument;
-
-        // console.log('[iframe-onload] iframe:', iframe, 'document:', iframeDocument);
 
       function onMouseMove(event) {
-          const iframeDocument = iframe.contentDocument;
-
         let coords;
         if (event.currentTarget === document) {
           coords = {
@@ -75,7 +71,7 @@ class UI {
           }
         }
 
-          console.log('[iframe-mm] mouse coords:', coords.x, coords.y, 'ui URI:', uiURI)
+        console.warn('coords:', coords, 'uiURI:', uiURI);
 
         // ask the iframe to check whether there's a clickable element
         iframe.contentWindow.postMessage(
@@ -87,38 +83,39 @@ class UI {
           uiURI
         );
 
-          // gentleman's agreement: elements with uw-clickable inside the iframe will
+        // iframe.style.pointerEvents = isClickable ? 'auto' : 'none';
-          // toggle pointerEvents on the iframe from 'none' to 'auto'
-          // Children of uw-clickable events should also do that.
-
-          let isClickable = false;
-          let element = iframeDocument.elementFromPoint(coords.x, coords.y);
-
-          while (element) {
-            if (element?.classList.includes('uw-clickable')) {
-              // we could set 'pointerEvents' here and now & simply use return, but that
-              // might cause us a problem if we ever try to add more shit to this function
-              isClickable = true;
-              break;
-            }
-          }
-
-          iframe.style.pointerEvents = isClickable ? 'auto' : 'none';
       }
 
       document.addEventListener('mousemove', onMouseMove, true);
-        // iframeDocument.addEventListener('mousemove', onMouseMove, true);
     }
 
     rootDiv.appendChild(iframe);
     console.log('ui created')
-    } catch(e) {
+
-      console.error('there was an oopsie while creating ui:', e)
+    // subscribe to events coming back to us
+    window.addEventListener('message', (event) => this.handleMessage(event));
+
+    // set uiIframe for handleMessage
+    this.uiIframe = iframe;
   }
 
-    console.log('——————————————————————————————————————— UI IS BEING CREATED ', rootDiv);
+  /**
-  } catch (e) {
+   * Handles events received from the iframe.
-    console.error('something went VERY wrong while creating ui:', e)
+   * @param {*} event
+   */
+  handleMessage(event) {
+    console.log('[main] received event:', event.origin, this.uiURI, this.extensionBase, event)
+    if (event.origin === this.extensionBase) {
+      console.log('this is the event we want', this.uiIframe );
+      if (event.data.cmd === 'uwui-clickable') {
+        if (event.data.ts < this.lastProbeResponseTs) {
+          console.log('event too early')
+          return;
+        }
+        this.lastProbeResponseTs = event.data.ts;
+        console.log('---- event is clickable?', event.data.clickable)
+        this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
+      }
     }
   }