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