From 8a89e8817e0a0d71a35972430e3efbce293f43de Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 15:03:32 +0530 Subject: [PATCH 1/4] 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. --- .../LivePreviewTransportRemote.js | 28 ++++++++++++++++++- .../Phoenix-live-preview/main.js | 3 +- .../Phoenix-live-preview/markdown.html | 3 +- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js index 66a0d27065..a4812f3cd1 100644 --- a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js +++ b/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){ diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 5ecbb0031c..cbd86de9b1 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/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 } }); diff --git a/src/extensionsIntegrated/Phoenix-live-preview/markdown.html b/src/extensionsIntegrated/Phoenix-live-preview/markdown.html index 0bfd935d11..d2a10085bf 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/markdown.html +++ b/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(); From 2d06446a0e5a58a8aba1ac347115f287bf9b132a Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 15:30:26 +0530 Subject: [PATCH 2/4] fix: media query dropdown colors --- .../Phoenix-live-preview/live-preview.css | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index c59f9b47e5..9847eb1931 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/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 { From a2d33d4e002d1951b118aedada043f15ebe22467 Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 15:33:37 +0530 Subject: [PATCH 3/4] build: update pro deps --- tracking-repos.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tracking-repos.json b/tracking-repos.json index 748547bd09..95d34e1c72 100644 --- a/tracking-repos.json +++ b/tracking-repos.json @@ -1,5 +1,5 @@ { "phoenixPro": { - "commitID": "e5f085888f6c875a8c0013eed9ce97491cbcb250" + "commitID": "6f0ac36ce36ff5d524590442ef6e16320fa904f1" } } From 70dbba34bd7961148b1086d9589f7a52c6dc509c Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 15:43:46 +0530 Subject: [PATCH 4/4] fix: wrong ver name for isPhoenixEmbeddedIframe in md live preview --- src/extensionsIntegrated/Phoenix-live-preview/markdown.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/markdown.html b/src/extensionsIntegrated/Phoenix-live-preview/markdown.html index d2a10085bf..ecf33bba5e 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/markdown.html +++ b/src/extensionsIntegrated/Phoenix-live-preview/markdown.html @@ -29,7 +29,7 @@ window.__PHOENIX_EMBED_INFO = { isTauri: event.data.isTauri, platform: event.data.platform, - isEmbeddedIframe: event.data.isEmbeddedIframe + isPhoenixEmbeddedIframe: event.data.isPhoenixEmbeddedIframe }; } else if(event.data.type === "_TEST_FOCUS_CLICK") { // for integ tests document.body.click();