From 4146e44948c5f2e56a82fe5f677810a4f98cc1b8 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 25 Oct 2025 17:32:47 +0530 Subject: [PATCH 01/37] refactor: improve image gallery UI --- .../BrowserScripts/RemoteFunctions.js | 112 ++++++++++-------- 1 file changed, 63 insertions(+), 49 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index f4bb2aa50b..5658067fc3 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -1343,7 +1343,7 @@ function RemoteFunctions(config = {}) { `, selectImageFromComputer: ` - + `, @@ -1355,13 +1355,13 @@ function RemoteFunctions(config = {}) { `, folderSettings: ` - + `, close: ` - + `, @@ -1370,6 +1370,12 @@ function RemoteFunctions(config = {}) { + `, + + search: ` + + + ` }; @@ -2261,7 +2267,7 @@ function RemoteFunctions(config = {}) { .phoenix-ribbon-container { width: 100% !important; - height: 156px !important; + height: 164px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; position: relative !important; } @@ -2272,19 +2278,19 @@ function RemoteFunctions(config = {}) { overflow: hidden !important; scroll-behavior: smooth !important; padding: 6px !important; - top: 30px !important; + top: 36px !important; } .phoenix-ribbon-row { display: flex !important; - gap: 2px !important; + gap: 4px !important; } .phoenix-ribbon-thumb { flex: 0 0 auto !important; width: 112px !important; height: 112px !important; - border-radius: 14px !important; + border-radius: 4px !important; overflow: hidden !important; position: relative !important; cursor: pointer !important; @@ -2395,70 +2401,68 @@ function RemoteFunctions(config = {}) { } .phoenix-ribbon-search { - display: flex !important; - align-items: stretch !important; - border-radius: 6px !important; margin-left: 8px !important; - border: 1px solid rgba(255,255,255,0.14) !important; - } - - .phoenix-ribbon-search:hover { - border: 1px solid rgba(0, 0, 0, 0.24) !important; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; - } - - .phoenix-ribbon-search:focus-within { - border: 1px solid rgba(0, 0, 0, 0.24) !important; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; + flex: 1 !important; + max-width: 200px !important; + position: relative !important; } .phoenix-ribbon-search input { - background: transparent !important; - border: none !important; + width: 100% !important; + height: 27px !important; + padding: 5px 32px 5px 5px !important; + box-sizing: border-box !important; + background: #555555 !important; + border: 1px solid #202020 !important; + border-radius: 3px !important; + color: #fff !important; + font-size: 13px !important; outline: none !important; - color: #c5c5c5 !important; - width: 150px !important; - padding: 4px 8px !important; - border-radius: 4px 0 0 4px !important; - transition: background 0.2s ease !important; - } - - .phoenix-ribbon-search input:focus { - background: rgba(255, 255, 255, 0.03) !important; } .phoenix-ribbon-search input::placeholder { - color: #a0a0a0 !important; - opacity: 0.7 !important; + color: #b4b4b4 !important; } .phoenix-ribbon-search input::-webkit-input-placeholder { - color: #a0a0a0 !important; - opacity: 0.7 !important; + color: #b4b4b4 !important; } .phoenix-ribbon-search input::-moz-placeholder { - color: #a0a0a0 !important; - opacity: 0.7 !important; + color: #b4b4b4 !important; + } + + .phoenix-ribbon-search input:focus { + border: 1px solid #2893ef !important; + box-shadow: 0 0 0 1px #94ceff !important; } .phoenix-ribbon-search-btn { + position: absolute !important; + right: 2px !important; + top: 50% !important; + transform: translateY(-50%) !important; background: transparent !important; border: 1px solid transparent !important; - border-left: 1px solid gray !important; color: #a0a0a0 !important; + border-radius: 2px !important; cursor: pointer !important; - padding: 2px 6px !important; - border-radius: 0 4px 4px 0 !important; - font-size: 12px !important; - font-weight: 500 !important; + padding: 4px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; transition: all 0.2s ease !important; - margin-left: 0 !important; + height: 25px !important; + width: 25px !important; } - .phoenix-ribbon-search-btn:hover { - border: 1px solid rgba(0, 0, 0, 0.24) !important; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; + .phoenix-ribbon-search-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.1) !important; + } + + .phoenix-ribbon-search-btn:disabled { + opacity: 0.3 !important; + cursor: not-allowed !important; } .phoenix-ribbon-select { @@ -2645,7 +2649,9 @@ function RemoteFunctions(config = {}) {
- +
@@ -2664,7 +2664,7 @@ function RemoteFunctions(config = {}) { -
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index c5ac3a6a8b..061c186ec3 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -89,7 +89,8 @@ define(function main(require, exports, module) { imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL, imageGalleryLoadingMore: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_MORE, imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES, - imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR + imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR, + imageGalleryClose: Strings.LIVE_DEV_IMAGE_GALLERY_CLOSE } }; // Status labels/styles are ordered: error, not connected, progress1, progress2, connected. diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index e6c14a3ada..94cd36c4c0 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -199,6 +199,7 @@ define({ "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading...", "LIVE_DEV_IMAGE_GALLERY_NO_IMAGES": "No images found", "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images", + "LIVE_DEV_IMAGE_GALLERY_CLOSE": "Close", "LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE": "Select Folder to Save Image", "LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION": "Choose where to download the image:", "LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER": "Type folder path (e.g., assets/images/)", From 6b49fe16e1b0d405e3a1c90c2004976ee5751609 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 25 Oct 2025 20:45:45 +0530 Subject: [PATCH 03/37] refactor: use ellipsis char instead of three dots --- src/nls/root/strings.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 94cd36c4c0..2022a08e7a 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -193,10 +193,10 @@ define({ "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image", "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer", "LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER": "Choose image download folder", - "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images...", + "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images\u2026", "LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON": "Search", - "LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL": "Loading images...", - "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading...", + "LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL": "Loading images\u2026", + "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading\u2026", "LIVE_DEV_IMAGE_GALLERY_NO_IMAGES": "No images found", "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images", "LIVE_DEV_IMAGE_GALLERY_CLOSE": "Close", From 81eb0f5fe06cdeb1e700448c368abfa3cb111228 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 25 Oct 2025 20:55:48 +0530 Subject: [PATCH 04/37] fix: image gallery nav buttons styling --- .../BrowserScripts/RemoteFunctions.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index dda2693cce..bc772e4c01 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -2283,7 +2283,7 @@ function RemoteFunctions(config = {}) { .phoenix-ribbon-row { display: flex !important; - gap: 4px !important; + gap: 5px !important; } .phoenix-ribbon-thumb { @@ -2314,8 +2314,7 @@ function RemoteFunctions(config = {}) { .phoenix-ribbon-nav { position: absolute !important; - top: 58% !important; - transform: translateY(-50%) !important; + top: 50% !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #eaeaf0 !important; @@ -2326,26 +2325,26 @@ function RemoteFunctions(config = {}) { user-select: none !important; transition: all 0.2s ease !important; z-index: 2147483647 !important; - padding: 2px 12px 6px 12px !important; + padding: 0 12px 6px 12px !important; } .phoenix-ribbon-nav:hover { background: rgba(21,25,36,0.85) !important; border-color: rgba(255,255,255,0.25) !important; - transform: translateY(-50%) scale(1.05) !important; + transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } .phoenix-ribbon-nav:active { - transform: translateY(-50%) scale(0.95) !important; + transform: scale(0.95) !important; } .phoenix-ribbon-nav.left { - left: 18px !important; + left: 15px !important; } .phoenix-ribbon-nav.right { - right: 18px !important; + right: 15px !important; } .phoenix-ribbon-loading { From 15d209bc24246aac35c97d9cd79c085078da1099 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 25 Oct 2025 21:49:10 +0530 Subject: [PATCH 05/37] fix: image flicker issue --- .../BrowserScripts/RemoteFunctions.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index bc772e4c01..b1163af918 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -2926,6 +2926,7 @@ function RemoteFunctions(config = {}) { _attachEventHandlers: function() { const ribbonContainer = this._shadow.querySelector('.phoenix-image-ribbon'); + const ribbonStrip = this._shadow.querySelector('.phoenix-ribbon-strip'); const searchInput = this._shadow.querySelector('.phoenix-ribbon-search input'); const searchButton = this._shadow.querySelector('.phoenix-ribbon-search-btn'); const closeButton = this._shadow.querySelector('.phoenix-ribbon-close'); @@ -3021,6 +3022,13 @@ function RemoteFunctions(config = {}) { }); } + // Restore original image when mouse leaves the entire ribbon strip + if (ribbonStrip) { + ribbonStrip.addEventListener('mouseleave', () => { + this.element.src = this._originalImageSrc; + }); + } + // Prevent clicks anywhere inside the ribbon from bubbling up if (ribbonContainer) { ribbonContainer.addEventListener('click', (e) => { @@ -3069,11 +3077,6 @@ function RemoteFunctions(config = {}) { this.element.src = image.url || image.thumb_url; }); - // show original image when hover ends - thumbDiv.addEventListener('mouseleave', () => { - this.element.src = this._originalImageSrc; - }); - // attribution overlay, we show this only in the image ribbon gallery const attribution = window.document.createElement('div'); attribution.className = 'phoenix-ribbon-attribution'; From c4e7553c9c562b3c95f6fc5d95600164e6eb950a Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 2 Nov 2025 16:40:33 +0530 Subject: [PATCH 06/37] refactor: modern image gallery UI --- .../BrowserScripts/RemoteFunctions.js | 594 ++++++++---------- 1 file changed, 277 insertions(+), 317 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index b1163af918..9099a0eeeb 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -1356,9 +1356,9 @@ function RemoteFunctions(config = {}) { folderSettings: ` - + - `, + `, close: ` @@ -2252,389 +2252,338 @@ function RemoteFunctions(config = {}) { this._shadow.innerHTML = ` -
-
-
-
-
- - -
-
- - -
+ + +
+
+
+
+ ${ICONS.imageGallery}
-
- - +
+ ${config.strings.imageGallery}
-
‹
-
-
- ${config.strings.imageGalleryLoadingInitial} -
+ +
+
+ + +
+
+ +
+ +
+ +
+ + + +
+
+ +
‹
+
+
+ ${config.strings.imageGalleryLoadingInitial}
-
›
+
›
`; }, From bab982a57dfb59970093453d96bcbc45dfedde58 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 2 Nov 2025 16:48:06 +0530 Subject: [PATCH 07/37] refactor: update classnames when selecting elements in DOM --- .../BrowserScripts/RemoteFunctions.js | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 9099a0eeeb..96abdda800 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -216,7 +216,7 @@ function RemoteFunctions(config = {}) { */ function scrollImageToViewportIfRequired(element, imageGalleryElement) { let elementRect = element.getBoundingClientRect(); - let galleryRect = imageGalleryElement._shadow.querySelector('.phoenix-image-ribbon').getBoundingClientRect(); + let galleryRect = imageGalleryElement._shadow.querySelector('.phoenix-image-gallery-container').getBoundingClientRect(); // this will get true when the image element and the image gallery overlaps each other if (elementRect.bottom >= galleryRect.top) { @@ -2616,6 +2616,7 @@ function RemoteFunctions(config = {}) {
+
@@ -2755,7 +2756,7 @@ function RemoteFunctions(config = {}) { _updateSearchInput: function(searchQuery) { // write the current query in the search input - const searchInput = this._shadow.querySelector('.phoenix-ribbon-search input'); + const searchInput = this._shadow.querySelector('.search-wrapper input'); if (searchInput && searchQuery) { searchInput.value = searchQuery; searchInput.placeholder = searchQuery; @@ -2796,7 +2797,7 @@ function RemoteFunctions(config = {}) { }, _handleNavLeft: function() { - const container = this._shadow.querySelector('.phoenix-ribbon-strip'); + const container = this._shadow.querySelector('.phoenix-image-gallery-strip'); if (!container) { return; } const containerWidth = container.clientWidth; @@ -2808,7 +2809,7 @@ function RemoteFunctions(config = {}) { }, _handleNavRight: function() { - const container = this._shadow.querySelector('.phoenix-ribbon-strip'); + const container = this._shadow.querySelector('.phoenix-image-gallery-strip'); if (!container) { return; } const containerWidth = container.clientWidth; @@ -2832,9 +2833,9 @@ function RemoteFunctions(config = {}) { // this function is responsible to update the nav buttons // when we're at the very left, we hide the nav-left button completely // when we're at the very right and no more pages available, we hide the nav-right button - const navLeft = this._shadow.querySelector('.phoenix-ribbon-nav.left'); - const navRight = this._shadow.querySelector('.phoenix-ribbon-nav.right'); - const container = this._shadow.querySelector('.phoenix-ribbon-strip'); + const navLeft = this._shadow.querySelector('.phoenix-image-gallery-nav.left'); + const navRight = this._shadow.querySelector('.phoenix-image-gallery-nav.right'); + const container = this._shadow.querySelector('.phoenix-image-gallery-strip'); if (!navLeft || !navRight || !container) { return; } @@ -2859,15 +2860,15 @@ function RemoteFunctions(config = {}) { }, _showLoading: function() { - const rowElement = this._shadow.querySelector('.phoenix-ribbon-row'); + const rowElement = this._shadow.querySelector('.phoenix-image-gallery-row'); if (!rowElement) { return; } rowElement.innerHTML = config.strings.imageGalleryLoadingInitial; - rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-loading'; + rowElement.className = 'phoenix-image-gallery-row phoenix-image-gallery-loading'; }, _showLoadingMore: function() { - const rowElement = this._shadow.querySelector('.phoenix-ribbon-row'); + const rowElement = this._shadow.querySelector('.phoenix-image-gallery-row'); if (!rowElement) { return; } // when loading more images we need to show the message at the end of the image ribbon @@ -2885,15 +2886,15 @@ function RemoteFunctions(config = {}) { }, _attachEventHandlers: function() { - const ribbonContainer = this._shadow.querySelector('.phoenix-image-ribbon'); - const ribbonStrip = this._shadow.querySelector('.phoenix-ribbon-strip'); - const searchInput = this._shadow.querySelector('.phoenix-ribbon-search input'); - const searchButton = this._shadow.querySelector('.phoenix-ribbon-search-btn'); - const closeButton = this._shadow.querySelector('.phoenix-ribbon-close'); - const folderSettingsButton = this._shadow.querySelector('.phoenix-ribbon-folder-settings'); - const navLeft = this._shadow.querySelector('.phoenix-ribbon-nav.left'); - const navRight = this._shadow.querySelector('.phoenix-ribbon-nav.right'); - const selectImageBtn = this._shadow.querySelector('.phoenix-select-image-btn'); + const ribbonContainer = this._shadow.querySelector('.phoenix-image-gallery-container'); + const ribbonStrip = this._shadow.querySelector('.phoenix-image-gallery-strip'); + const searchInput = this._shadow.querySelector('.search-wrapper input'); + const searchButton = this._shadow.querySelector('.search-icon'); + const closeButton = this._shadow.querySelector('.phoenix-image-gallery-close-button'); + const folderSettingsButton = this._shadow.querySelector('.phoenix-image-gallery-download-folder-button'); + const navLeft = this._shadow.querySelector('.phoenix-image-gallery-nav.left'); + const navRight = this._shadow.querySelector('.phoenix-image-gallery-nav.right'); + const selectImageBtn = this._shadow.querySelector('.phoenix-image-gallery-upload-container button'); const fileInput = this._shadow.querySelector('.phoenix-file-input'); if (searchInput && searchButton) { @@ -3000,16 +3001,16 @@ function RemoteFunctions(config = {}) { // append true means load more images (user clicked on nav-right) // append false means its a new query _renderImages: function(images, append = false) { - const rowElement = this._shadow.querySelector('.phoenix-ribbon-row'); + const rowElement = this._shadow.querySelector('.phoenix-image-gallery-row'); if (!rowElement) { return; } - const container = this._shadow.querySelector('.phoenix-ribbon-strip'); + const container = this._shadow.querySelector('.phoenix-image-gallery-strip'); const savedScrollPosition = container ? container.scrollLeft : 0; // if not appending we clear the phoenix ribbon if (!append) { rowElement.innerHTML = ''; - rowElement.className = 'phoenix-ribbon-row'; + rowElement.className = 'phoenix-image-gallery-row'; } else { // when appending we add the new images at the end const loadingIndicator = this._shadow.querySelector('.phoenix-loading-more'); @@ -3113,11 +3114,11 @@ function RemoteFunctions(config = {}) { }, _showError: function(message) { - const rowElement = this._shadow.querySelector('.phoenix-ribbon-row'); + const rowElement = this._shadow.querySelector('.phoenix-image-gallery-row'); if (!rowElement) { return; } rowElement.innerHTML = message; - rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-error'; + rowElement.className = 'phoenix-image-gallery-row phoenix-ribbon-error'; }, // file name with which we need to save the image From 664e4dba557cb4c4fe09100c3b1406d645df5185 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 2 Nov 2025 17:07:22 +0530 Subject: [PATCH 08/37] fix: redundant margin properties pushing down images --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 96abdda800..c0303be507 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -2372,8 +2372,6 @@ function RemoteFunctions(config = {}) { overflow: hidden; scroll-behavior: smooth; padding: 6px; - height: calc(100% - 36px); - margin-top: 36px; } .phoenix-image-gallery-row { From cc400923db1cf45aacdc7c0190210fc53dc7ab56 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 2 Nov 2025 17:38:12 +0530 Subject: [PATCH 09/37] fix: image gallery moving when live preview is scrolled due to absolute positioning --- .../BrowserScripts/RemoteFunctions.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index c0303be507..c55351bb12 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -2253,14 +2253,13 @@ function RemoteFunctions(config = {}) { this._shadow.innerHTML = `
${message}
`; + window.document.body.appendChild(toast); + + // Auto-dismiss after 3 seconds + _toastTimeout = setTimeout(() => { + if (toast && toast.parentNode) { + toast.remove(); + } + _toastTimeout = null; + }, 3000); + } + /** * Helper function to cleanup previously clicked element highlighting and state */ From 300f86c1d3f536dd66004874bc6aa607451422f0 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 8 Nov 2025 23:04:59 +0530 Subject: [PATCH 33/37] fix: info box not getting out of bounds for non-editable elements when live preview is resized --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index e68823d447..2c4d9b9273 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -4028,17 +4028,18 @@ function RemoteFunctions(config = {}) { } } - // recreate UI boxes (info box and more options box) + // recreate UI boxes so that they are placed properly function redrawUIBoxes() { if (_nodeMoreOptionsBox) { const element = _nodeMoreOptionsBox.element; _nodeMoreOptionsBox.remove(); _nodeMoreOptionsBox = new NodeMoreOptionsBox(element); + } - if (_nodeInfoBox) { - dismissNodeInfoBox(); - _nodeInfoBox = new NodeInfoBox(element); - } + if (_nodeInfoBox) { + const element = _nodeInfoBox.element; + _nodeInfoBox.remove(); + _nodeInfoBox = new NodeInfoBox(element); } if (_aiPromptBox) { From 92ae1fb10a4b5580c70333f73342c12f7a54f0b9 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 9 Nov 2025 13:48:02 +0530 Subject: [PATCH 34/37] feat: allow closing the toast notification with a dont show again button --- .../BrowserScripts/RemoteFunctions.js | 60 ++++++++++++++++--- 1 file changed, 52 insertions(+), 8 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 2c4d9b9273..591add6173 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -3847,9 +3847,12 @@ function RemoteFunctions(config = {}) { } // if element is not editable and user clicks on it, then we show a toast notification saying - // that this element is not editable + // that this element is not editable (unless user dismissed it permanently) if (!element.hasAttribute("data-brackets-id")) { - showToast("Element not editable - generated by script"); + const hideToast = localStorage.getItem('phoenix-hide-dynamic-toast'); + if (!hideToast) { + showToast("Element not editable - generated by script."); + } } // make sure that the element is actually visible to the user @@ -4579,22 +4582,42 @@ function RemoteFunctions(config = {}) { bottom: 30px !important; left: 50% !important; transform: translateX(-50%) translateY(0) !important; - background-color: #333333f2 !important; + background-color: rgba(51, 51, 51, 0.95) !important; color: white !important; - padding: 10px 12px !important; + padding: 10px 14px !important; border-radius: 6px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; font-family: Arial, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; z-index: 2147483647 !important; - pointer-events: none !important; text-align: center !important; max-width: 90% !important; box-sizing: border-box !important; animation: slideUp 0.3s ease-out !important; } + .toast-message { + margin-bottom: 6px !important; + } + + .toast-button { + background: none !important; + border: none !important; + color: #A0A0A0 !important; + cursor: pointer !important; + font-size: 12px !important; + font-family: Arial, sans-serif !important; + text-decoration: none !important; + pointer-events: auto !important; + transition: opacity 0.2s !important; + } + + .toast-button:hover { + opacity: 0.8 !important; + text-decoration: underline !important; + } + @keyframes slideUp { from { opacity: 0; @@ -4607,16 +4630,37 @@ function RemoteFunctions(config = {}) { } `; - shadow.innerHTML = `
${message}
`; + const content = ` +
+
${message}
+ +
+ `; + + shadow.innerHTML = `${content}`; window.document.body.appendChild(toast); - // Auto-dismiss after 3 seconds + // add click handler to "Don't show again" button + const button = shadow.querySelector('.toast-button'); + button.addEventListener('click', () => { + // save to localStorage to never show again and close toast rn + localStorage.setItem('phoenix-hide-dynamic-toast', 'true'); + if (toast && toast.parentNode) { + toast.remove(); + } + if (_toastTimeout) { + clearTimeout(_toastTimeout); + _toastTimeout = null; + } + }); + + // Auto-dismiss after 6 seconds _toastTimeout = setTimeout(() => { if (toast && toast.parentNode) { toast.remove(); } _toastTimeout = null; - }, 3000); + }, 6000); } /** From 2bce9c5df9cc0f4bb1acdcd050b1f02e90dc5f37 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 9 Nov 2025 14:11:56 +0530 Subject: [PATCH 35/37] feat: localize strings used in toast notification --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 4 ++-- src/LiveDevelopment/main.js | 4 +++- src/nls/root/strings.js | 2 ++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 591add6173..896f893bb2 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -3851,7 +3851,7 @@ function RemoteFunctions(config = {}) { if (!element.hasAttribute("data-brackets-id")) { const hideToast = localStorage.getItem('phoenix-hide-dynamic-toast'); if (!hideToast) { - showToast("Element not editable - generated by script."); + showToast(config.strings.toastNotEditable); } } @@ -4633,7 +4633,7 @@ function RemoteFunctions(config = {}) { const content = `
${message}
- +
`; diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index 4c0ae79d30..3819c467d2 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -120,7 +120,9 @@ define(function main(require, exports, module) { imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES, imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR, imageGalleryClose: Strings.LIVE_DEV_IMAGE_GALLERY_CLOSE, - imageGalleryUpload: Strings.LIVE_DEV_IMAGE_GALLERY_UPLOAD + imageGalleryUpload: Strings.LIVE_DEV_IMAGE_GALLERY_UPLOAD, + toastNotEditable: Strings.LIVE_DEV_TOAST_NOT_EDITABLE, + toastDontShowAgain: Strings.LIVE_DEV_TOAST_DONT_SHOW_AGAIN } }; // Status labels/styles are ordered: error, not connected, progress1, progress2, connected. diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 54f954826d..986e42901d 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -201,6 +201,8 @@ define({ "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images", "LIVE_DEV_IMAGE_GALLERY_CLOSE": "Close", "LIVE_DEV_IMAGE_GALLERY_UPLOAD": "Upload", + "LIVE_DEV_TOAST_NOT_EDITABLE": "Element not editable - generated by script.", + "LIVE_DEV_TOAST_DONT_SHOW_AGAIN": "Don't show again", "LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE": "Select Folder to Save Image", "LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION": "Choose where to download the image:", "LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER": "Type folder path (e.g., assets/images/)", From 8987188a9d85da7e69f0fe0e9997bec80eebc1ed Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 9 Nov 2025 15:29:30 +0530 Subject: [PATCH 36/37] fix: apostrophe in strings breaks the config json string --- src/LiveDevelopment/LiveDevMultiBrowser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js index e424e5271a..69a962fd24 100644 --- a/src/LiveDevelopment/LiveDevMultiBrowser.js +++ b/src/LiveDevelopment/LiveDevMultiBrowser.js @@ -733,7 +733,7 @@ define(function (require, exports, module) { */ function updateConfig(configJSON) { if (_protocol) { - _protocol.evaluate("_LD.updateConfig('" + configJSON + "')"); + _protocol.evaluate("_LD.updateConfig(" + JSON.stringify(configJSON) + ")"); } } From 6d41401fdd43798af659746bbe5284d2b7288525 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 9 Nov 2025 17:45:57 +0530 Subject: [PATCH 37/37] fix: live preview edit working unexpectedly on popped out live previews --- .../BrowserScripts/RemoteFunctions.js | 45 +++++++++++++++++++ src/LiveDevelopment/LiveDevMultiBrowser.js | 12 +++++ 2 files changed, 57 insertions(+) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 896f893bb2..6d2aa2e40d 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -3894,6 +3894,9 @@ function RemoteFunctions(config = {}) { function enableHoverListeners() { if (config.isProUser && (config.highlight || shouldShowHighlightOnHover())) { + window.document.removeEventListener("mouseover", onElementHover); + window.document.removeEventListener("mouseout", onElementHoverOut); + window.document.addEventListener("mouseover", onElementHover); window.document.addEventListener("mouseout", onElementHoverOut); } @@ -4693,6 +4696,37 @@ function RemoteFunctions(config = {}) { cleanupPreviousElementState(); } + /** + * this is a hard reset function, it resets every live preview edit thing, whether it be UI boxes + * highlighting, any timers or anything + */ + function resetState() { + _stopAutoScroll(); + + if (_hoverHighlight) { + _hoverHighlight.clear(); + _hoverHighlight = null; + } + if (_clickHighlight) { + _clickHighlight.clear(); + _clickHighlight = null; + } + + dismissUIAndCleanupState(); + + const allElements = window.document.querySelectorAll("[data-brackets-id]"); + for (let i = 0; i < allElements.length; i++) { + if (allElements[i]._originalBackgroundColor !== undefined) { + clearElementBackground(allElements[i]); + } + } + + if (config.isProUser) { + _hoverHighlight = new Highlight("#c8f9c5", true); + _clickHighlight = new Highlight("#cfc", true); + } + } + /** * This function is responsible to move the cursor to the end of the text content when we start editing @@ -4816,6 +4850,16 @@ function RemoteFunctions(config = {}) { _editHandler = new DOMEditHandler(window.document); function registerHandlers() { + // clear previous highlighting + if (_hoverHighlight) { + _hoverHighlight.clear(); + _hoverHighlight = null; + } + if (_clickHighlight) { + _clickHighlight.clear(); + _clickHighlight = null; + } + // Always remove existing listeners first to avoid duplicates window.document.removeEventListener("mouseover", onElementHover); window.document.removeEventListener("mouseout", onElementHoverOut); @@ -4862,6 +4906,7 @@ function RemoteFunctions(config = {}) { "finishEditing" : finishEditing, "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes, "dismissUIAndCleanupState" : dismissUIAndCleanupState, + "resetState" : resetState, "enableHoverListeners" : enableHoverListeners, "registerHandlers" : registerHandlers, "handleDownloadEvent" : handleDownloadEvent diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js index 69a962fd24..8d8598addf 100644 --- a/src/LiveDevelopment/LiveDevMultiBrowser.js +++ b/src/LiveDevelopment/LiveDevMultiBrowser.js @@ -435,6 +435,7 @@ define(function (require, exports, module) { const urlString = `${url.origin}${url.pathname}`; if (_liveDocument && urlString === _resolveUrl(_liveDocument.doc.file.fullPath)) { _setStatus(STATUS_ACTIVE); + resetLPEditState(); } } Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "connect", @@ -737,6 +738,17 @@ define(function (require, exports, module) { } } + /** + * this function is to completely reset the live preview edit + * its done so that when live preview is opened/popped out, we can re-update the config so that + * there are no stale markers and edit works perfectly + */ + function resetLPEditState() { + if (_protocol) { + _protocol.evaluate("_LD.resetState()"); + } + } + /** * Originally unload and reload agents. It doesn't apply for this new implementation. * @return {jQuery.Promise} Already resolved promise.