feat: Implement Triangular Communication for OffscreenCanvas transfers to bypass Firefox Nightly SharedWorker bugs (#9479) (#9480)

Author: tobiu

src/component/Canvas.mjs

@@ -66,44 +66,19 @@ class Canvas extends Component {
             }
 
             if (offscreen) {
-                let data,
-                    delay = 50;
-
-                while (me.mounted && !me.offscreenRegistered && !me.isDestroyed) {
-                    data = await Neo.main.DomAccess.getOffscreenCanvas({
-                        nodeId: id,
-                        windowId
-                    });
-
-                    if (data.offscreen) {
-                        await Neo.worker.Canvas.registerCanvas({
-                            node  : data.offscreen,
-                            nodeId: id,
-                            windowId
-                        }, [data.offscreen]);
-
-                        me.offscreenRegistered = true;
-                        break
-                    } else if (data.transferred) {
-                        if (Neo.config.useSharedWorkers) {
-                            let retrieveData = await Neo.worker.Canvas.retrieveCanvas({
-                                nodeId: id,
-                                windowId
-                            });
-
-                            if (retrieveData.hasCanvas) {
-                                me.offscreenRegistered = true;
-                                break
-                            }
-                        }
-                    }
-
-                    await me.timeout(delay);
-
-                    if (delay < 1000) {
-                        delay *= 2
-                    }
-                }
+                me.registerCanvasCallbacks ??= {};
+
+                let promise = new Promise(resolve => {
+                    me.registerCanvasCallbacks[id] = resolve;
+                });
+
+                Neo.main.DomAccess.transferCanvasToWorker({
+                    nodeId: id,
+                    windowId
+                });
+
+                await promise;
+                me.offscreenRegistered = true;
             }
         } else if (offscreen) {
             if (me.offscreenRegistered) {

src/main/DomAccess.mjs

@@ -84,6 +84,7 @@ class DomAccess extends Base {
                 'setStyle',
                 'startViewTransition',
                 'syncModalMask',
+                'transferCanvasToWorker',
                 'trapFocus',
                 'windowScrollTo'
             ]
@@ -1120,6 +1121,36 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     * @summary Extracts an OffscreenCanvas and transfers it directly to the Canvas Worker.
+     *
+     * This method implements a "Triangular Communication" pattern required to bypass a core limitation in Firefox Nightly (and potentially other browsers) regarding SharedWorkers.
+     * Firefox fails silently when attempting to transfer an `OffscreenCanvas` from the Main Thread to the App Worker (SharedWorker), and then again from the App Worker to the Canvas Worker.
+     * By calling this method, the Main Thread extracts the canvas and sends it directly to the Canvas Worker, bypassing the App Worker entirely for the buffer transfer.
+     *
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.nodeId
+     */
+    transferCanvasToWorker({nodeId}) {
+        let me   = this,
+            node = me.getElement(nodeId);
+
+        if (node) {
+            try {
+                let offscreen = node.transferControlToOffscreen();
+
+                Neo.worker.Manager.sendMessage('canvas', {
+                    action: 'registerCanvasDirect',
+                    node  : offscreen,
+                    nodeId
+                }, [offscreen])
+            } catch (e) {
+                // Ignore, means the canvas was already transferred or we do not support it
+            }
+        }
+    }
+
     /**
      * Traps (or stops trapping) focus within a Component
      * @param {Object} data

src/worker/App.mjs

@@ -539,6 +539,27 @@ class App extends Base {
         }
     }
 
+    /**
+     * @summary Receives the ping from the Canvas Worker confirming a direct canvas transfer.
+     *
+     * This method resolves the promise created in `Neo.component.Canvas#afterSetMounted`.
+     * It is the final step in the "Triangular Communication" pattern where the Main Thread sends the
+     * `OffscreenCanvas` directly to the Canvas Worker, bypassing the App Worker's standard message payload,
+     * to avoid transfer restrictions in Firefox SharedWorkers.
+     *
+     * @param {Object} msg
+     * @param {String} msg.nodeId
+     * @protected
+     */
+    onCanvasRegistered({nodeId}) {
+        let instance = Neo.get(nodeId);
+
+        if (instance?.registerCanvasCallbacks?.[nodeId]) {
+            instance.registerCanvasCallbacks[nodeId]();
+            delete instance.registerCanvasCallbacks[nodeId]
+        }
+    }
+
     /**
      * @param {Object} data
      */

src/worker/Canvas.mjs

@@ -90,6 +90,43 @@ class Canvas extends Base {
         }
     }
 
+    /**
+     * Overrides worker/Base to handle specific messages like registerCanvasDirect
+     * @param {MessageEvent} e
+     */
+    onMessage(e) {
+        let msg = e.data;
+
+        if (msg.action === 'registerCanvasDirect') {
+            this.registerCanvasDirect(msg)
+        } else {
+            super.onMessage(e)
+        }
+    }
+
+    /**
+     * @param {Object} msg
+     */
+    onRegisterNeoConfig(msg) {
+        super.onRegisterNeoConfig(msg);
+
+        if (Neo.config.useCanvasWorkerStartingPoint) {
+            let path = Neo.config.appPath;
+
+            if (path.endsWith('.mjs')) {
+                path = path.slice(0, -8); // removing "/app.mjs"
+            }
+
+            import(
+                /* webpackExclude: /(?:\/|\\)(buildScripts|dist|node_modules)/ */
+                /* webpackMode: "lazy" */
+                `../../${path}/canvas.mjs`
+                ).then(module => {
+                module.onStart()
+            })
+        }
+    }
+
     /**
      * @param {Object} data
      */
@@ -106,6 +143,26 @@ class Canvas extends Base {
         return true
     }
 
+    /**
+     * @summary Receives an OffscreenCanvas directly from the Main Thread.
+     *
+     * This is the receiving end of the "Triangular Communication" pattern initiated by `Neo.main.DomAccess.transferCanvasToWorker`.
+     * By receiving the canvas directly from Main, we avoid the `OffscreenCanvas` transfer restrictions inherent in Firefox's SharedWorker implementation.
+     * Once the canvas is registered internally, this method pings the App Worker back over their direct `MessageChannel` to confirm receipt so the App Worker can proceed with rendering instructions.
+     *
+     * @param {Object} msg
+     * @protected
+     */
+    registerCanvasDirect(msg) {
+        this.registerCanvas(msg);
+
+        // Ping App worker that canvas was received from main.
+        this.sendMessage('app', {
+            action: 'canvasRegistered',
+            nodeId: msg.nodeId
+        })
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.nodeId
@@ -138,29 +195,6 @@ class Canvas extends Base {
             delete me.canvasWindowMap[data.nodeId]
         }
     }
-
-    /**
-     * @param {Object} msg
-     */
-    onRegisterNeoConfig(msg) {
-        super.onRegisterNeoConfig(msg);
-
-        if (Neo.config.useCanvasWorkerStartingPoint) {
-            let path = Neo.config.appPath;
-
-            if (path.endsWith('.mjs')) {
-                path = path.slice(0, -8); // removing "/app.mjs"
-            }
-
-            import(
-                /* webpackExclude: /(?:\/|\\)(buildScripts|dist|node_modules)/ */
-                /* webpackMode: "lazy" */
-                `../../${path}/canvas.mjs`
-            ).then(module => {
-                module.onStart()
-            })
-        }
-    }
 }
 
 export default Neo.setupClass(Canvas);