feat: add onPhoenixEmbeddedInfoAvailable callback and isPhoenixEmbeddedIframe support

Add a callback mechanism to detect when a live preview iframe is embedded
within Phoenix vs popped out. The callback is guaranteed to fire in embedded
iframes but not in non-embedded frames. Also pass isPhoenixEmbeddedIframe
in the WHO_AM_I_RESPONSE handshake.

Author: abose

src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js

@@ -441,9 +441,28 @@
     let alertQueue = [], confirmCalled = false, promptCalled = false;
     let addToQueue = true;
     window.__PHOENIX_APP_INFO = {isTauri, platform};
+    const _embeddedInfoCallbacks = [];
     if(!isExternalBrowser){
         // this is an embedded iframe we always take hold of the alert api for better ux within the live preivew frame.
-        window.__PHOENIX_EMBED_INFO = {isTauri, platform};
+        // __PHOENIX_EMBED_INFO will be present in browser popped out windows as its actually an embedded
+        // iframe inside phcode.live server, so to detect if its a truly embedded iframe within phoenix code
+        // itself, rely on the isEmbeddedIframe which will be set with `WHO_AM_I_RESPONSE` handshake
+        window.__PHOENIX_EMBED_INFO = {isTauri, platform, isPhoenixEmbeddedIframe: undefined};
+        /**
+         * Register a callback to be notified when `isPhoenixEmbeddedIframe` is resolved.
+         * The callback is guaranteed to fire in embedded iframes, but NOT guaranteed to fire
+         * in non-embedded (popped out) frames. Do not rely on this to confirm non-embedded state;
+         * instead, assume non-embedded by default and use this only to detect embedded iframes.
+         * If `isPhoenixEmbeddedIframe` is already determined, the callback fires immediately.
+         * @param {function(boolean): void} callback - receives `true` if embedded, `false` if popped out.
+         */
+        window.__PHOENIX_EMBED_INFO.onPhoenixEmbeddedInfoAvailable = function (callback) {
+            if (window.__PHOENIX_EMBED_INFO.isPhoenixEmbeddedIframe !== undefined) {
+                callback(window.__PHOENIX_EMBED_INFO.isPhoenixEmbeddedIframe);
+            } else {
+                _embeddedInfoCallbacks.push(callback);
+            }
+        };
         const shouldPatchAlert = (isTauri && platform === "mac");
         if(shouldPatchAlert){
             // In Mac embedded live preview iframe in tauri, alert, prompt, and confirm apis
@@ -493,6 +512,13 @@
                 // this is set from transport config. We should be here
                 console.error("Expected window.__PHOENIX_EMBED_INFO to be set, but not???");
             }
+            // all embedded iframes will have this set to distinguish between embedded iframes and popped out iframes
+            const isPhoenixEmbeddedIframe = !!event.data.isPhoenixEmbeddedIframe;
+            window.__PHOENIX_EMBED_INFO.isPhoenixEmbeddedIframe = isPhoenixEmbeddedIframe;
+            for (let i = 0; i < _embeddedInfoCallbacks.length; i++) {
+                _embeddedInfoCallbacks[i](isPhoenixEmbeddedIframe);
+            }
+            _embeddedInfoCallbacks.length = 0;
         }
     });
     if(window.self !== window.parent){

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -194,7 +194,8 @@ define(function (require, exports, module) {
             iframeDom.contentWindow.postMessage({
                 type: "WHO_AM_I_RESPONSE",
                 isTauri: Phoenix.isNativeApp,
-                platform: Phoenix.platform
+                platform: Phoenix.platform,
+                isPhoenixEmbeddedIframe: true
             }, "*"); // this is not sensitive info, and is only dispatched if requested by the iframe
         }
     });

src/extensionsIntegrated/Phoenix-live-preview/markdown.html

@@ -28,7 +28,8 @@
             if(event.data.type === "WHO_AM_I_RESPONSE") {
                 window.__PHOENIX_EMBED_INFO = {
                     isTauri: event.data.isTauri,
-                    platform: event.data.platform
+                    platform: event.data.platform,
+                    isEmbeddedIframe: event.data.isEmbeddedIframe
                 };
             } else if(event.data.type === "_TEST_FOCUS_CLICK") { // for integ tests
                 document.body.click();