From 5daea178a06049d4432162c4006c03a763d94721 Mon Sep 17 00:00:00 2001 From: abose Date: Wed, 28 Aug 2024 15:29:59 +0530 Subject: [PATCH 1/2] fix: window.alert, confirm and prompt apis not present in embedded tauri mac live preview --- .../LivePreviewTransportRemote.js | 115 +++++++++++++++++- .../transports/LivePreviewTransport.js | 6 + src/nls/root/strings.js | 3 +- 3 files changed, 118 insertions(+), 6 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js index e5e89df61..4be16c4d6 100644 --- a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js +++ b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js @@ -329,16 +329,123 @@ } }); + function alertPatch(message) { + // Create the modal container + const modal = document.createElement('div'); + modal.style.position = 'fixed'; + modal.style.top = '0'; + modal.style.left = '0'; + modal.style.width = '100%'; + modal.style.height = '100vh'; + modal.style.backgroundColor = 'rgba(0,0,0,0.5)'; + modal.style.display = 'flex'; + modal.style.justifyContent = 'center'; + modal.style.alignItems = 'center'; + modal.style.zIndex = '1000000000'; + + // Create the modal content box + const modalContent = document.createElement('div'); + modalContent.style.backgroundColor = 'white'; + modalContent.style.padding = '20px'; + modalContent.style.borderRadius = '5px'; + modalContent.style.minWidth = '300px'; + modalContent.style.margin = 'auto'; + modalContent.style.textAlign = 'center'; + + // Add title to the modal with the current page URL + const title = document.createElement('h3'); + title.textContent = "alert"; // not translated as window.alert is same in all languages. + title.style.marginBottom = '10px'; + + // Add text to the modal + const text = document.createElement('p'); + text.textContent = message; + text.style.marginBottom = '20px'; + + // Create OK button to close the modal + const button = document.createElement('button'); + button.textContent = 'OK'; + button.style.padding = '10px 20px'; + button.style.border = 'none'; + button.style.backgroundColor = '#007BFF'; + button.style.color = 'white'; + button.style.borderRadius = '5px'; + button.style.cursor = 'pointer'; + + button.onclick = function() { + document.body.removeChild(modal); + }; + + // Append elements + modalContent.appendChild(title); + modalContent.appendChild(text); + modalContent.appendChild(button); + modal.appendChild(modalContent); + document.body.appendChild(modal); + } + + function unsupported() { + alertPatch(TRANSPORT_CONFIG.STRINGS.UNSUPPORTED_DOM_APIS_CONFIRM); + } + + // all externally opened live previews have the phcodeLivePreview="true" query string parameter set. + const currentUrl = new URL(window.location.href); + const queryParams = new URLSearchParams(currentUrl.search); + const isExternalBrowser = queryParams.get("phcodeLivePreview") === "true"; + const isTauri = TRANSPORT_CONFIG.IS_NATIVE_APP; + const platform = TRANSPORT_CONFIG.PLATFORM; + + let alertQueue = [], confirmOrPromptCalled = false; + let addToQueue = true; + 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}; + const shouldPatchAlert = (isTauri && platform === "mac"); + if(shouldPatchAlert){ + // In Mac embedded live preview iframe in tauri, alert, prompt, and confirm apis + // are not available, so we need to patch the other apis in mac + window.alert = function (...args) { + // at this time, we cant add our html alert as body is not loaded yet. So we queue alerts. + addToQueue && alertQueue.push(...args); + }; + window.confirm = function () { + // confirm and prompt is no-op in mac, we just need to show that the api is not supported, so we just + // keep a flag. + confirmOrPromptCalled = true; + }; + window.prompt = function () { + confirmOrPromptCalled = true; + }; + function drainAlertQueues() { + addToQueue = false; + if(confirmOrPromptCalled) { + unsupported(); + } + for(let i=0; iRead more about working with large projects.", // Live Preview error strings - "ALERT": "Alert", - "CONFIRM": "Confirm", + "UNSUPPORTED_DOM_APIS_CONFIRM": "window.confirm and window.prompt APIS are not available in embedded Live Preview in {APP_NAME}. Please popout Live Preview to use these APIs in the browser.", "ERROR_LAUNCHING_BROWSER_TITLE": "Error Launching Browser", "ERROR_CANT_FIND_CHROME": "The Google Chrome browser could not be found. Please make sure it is installed.", "ERROR_LAUNCHING_BROWSER": "An error occurred when launching the browser. (error {0})", From 35733478daaf31d5a9cf595cf7e6fdfd25114b6a Mon Sep 17 00:00:00 2001 From: abose Date: Wed, 28 Aug 2024 15:52:57 +0530 Subject: [PATCH 2/2] chore: alert api patch only in tauri mac embedded live preview --- .../LivePreviewTransportRemote.js | 28 +++++++++++-------- src/nls/root/strings.js | 2 +- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js index 4be16c4d6..646bc7c03 100644 --- a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js +++ b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js @@ -329,7 +329,7 @@ } }); - function alertPatch(message) { + function alertPatch(message, titleText) { // Create the modal container const modal = document.createElement('div'); modal.style.position = 'fixed'; @@ -354,7 +354,7 @@ // Add title to the modal with the current page URL const title = document.createElement('h3'); - title.textContent = "alert"; // not translated as window.alert is same in all languages. + title.textContent = titleText || "alert"; // not translated as window.alert is same in all languages. title.style.marginBottom = '10px'; // Add text to the modal @@ -384,8 +384,11 @@ document.body.appendChild(modal); } - function unsupported() { - alertPatch(TRANSPORT_CONFIG.STRINGS.UNSUPPORTED_DOM_APIS_CONFIRM); + function unsupportedConfirm() { + alertPatch(TRANSPORT_CONFIG.STRINGS.UNSUPPORTED_DOM_APIS_CONFIRM, "window.confirm"); + } + function unsupportedPrompt() { + alertPatch(TRANSPORT_CONFIG.STRINGS.UNSUPPORTED_DOM_APIS_CONFIRM, "window.prompt"); } // all externally opened live previews have the phcodeLivePreview="true" query string parameter set. @@ -395,7 +398,7 @@ const isTauri = TRANSPORT_CONFIG.IS_NATIVE_APP; const platform = TRANSPORT_CONFIG.PLATFORM; - let alertQueue = [], confirmOrPromptCalled = false; + let alertQueue = [], confirmCalled = false, promptCalled = false; let addToQueue = true; if(!isExternalBrowser){ // this is an embedded iframe we always take hold of the alert api for better ux within the live preivew frame. @@ -411,23 +414,26 @@ window.confirm = function () { // confirm and prompt is no-op in mac, we just need to show that the api is not supported, so we just // keep a flag. - confirmOrPromptCalled = true; + confirmCalled = true; }; window.prompt = function () { - confirmOrPromptCalled = true; + promptCalled = true; }; function drainAlertQueues() { addToQueue = false; - if(confirmOrPromptCalled) { - unsupported(); + if(confirmCalled) { + unsupportedConfirm(); + } + if(promptCalled) { + unsupportedPrompt(); } for(let i=0; iRead more about working with large projects.", // Live Preview error strings - "UNSUPPORTED_DOM_APIS_CONFIRM": "window.confirm and window.prompt APIS are not available in embedded Live Preview in {APP_NAME}. Please popout Live Preview to use these APIs in the browser.", + "UNSUPPORTED_DOM_APIS_CONFIRM": "The `window.confirm` and `window.prompt` APIs are unavailable in the embedded Live Preview of {APP_NAME}. Please popout Live Preview to use these APIs in the browser.", "ERROR_LAUNCHING_BROWSER_TITLE": "Error Launching Browser", "ERROR_CANT_FIND_CHROME": "The Google Chrome browser could not be found. Please make sure it is installed.", "ERROR_LAUNCHING_BROWSER": "An error occurred when launching the browser. (error {0})",