Fix: framework to detect embedded live preview in phoenix code

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/live-preview.css

@@ -109,17 +109,20 @@
     align-items: center;
     margin: 3.5px 4px 0 3px;
     cursor: pointer;
-    background: #3C3F41;
+    background: transparent;
     box-shadow: none;
-    border: 1px solid #3C3F41;
+    border: 1px solid transparent;
     box-sizing: border-box;
     color: #a0a0a0;
     padding: 0 0.35em;
 }
 
-.lp-device-size-icon:hover {
-    border: 1px solid rgba(0, 0, 0, 0.24) !important;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+.lp-device-size-icon:hover,
+.lp-device-size-icon:focus,
+.lp-device-size-icon:active {
+    background: transparent !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
 }
 
 #deviceSizeBtn.btn-dropdown::after {
@@ -178,9 +181,12 @@
     padding: 0 0.35em;
 }
 
-#livePreviewModeBtn:hover {
-    border: 1px solid rgba(0, 0, 0, 0.24) !important;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+#livePreviewModeBtn:hover,
+#livePreviewModeBtn:focus,
+#livePreviewModeBtn:active {
+    background: transparent !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
 }
 
 #livePreviewModeBtn.btn-dropdown::after {

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,
+                    isPhoenixEmbeddedIframe: event.data.isPhoenixEmbeddedIframe
                 };
             } else if(event.data.type === "_TEST_FOCUS_CLICK") { // for integ tests
                 document.body.click();

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "e5f085888f6c875a8c0013eed9ce97491cbcb250"
+    "commitID": "6f0ac36ce36ff5d524590442ef6e16320fa904f1"
   }
 }