diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index f4bb2aa50..6d2aa2e40 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -60,8 +60,8 @@ function RemoteFunctions(config = {}) { const AUTO_SCROLL_SPEED = 12; // pixels per scroll const AUTO_SCROLL_EDGE_SIZE = 0.05; // 5% of viewport height (either top/bottom) - // to track the state as we want to have a selected state for image gallery - let imageGallerySelected = false; + // initialized from config, defaults to true if not set + let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true; /** * this function is responsible to auto scroll the live preview when @@ -117,20 +117,16 @@ function RemoteFunctions(config = {}) { } /** - * This is a checker function for editable elements, it makes sure that the element satisfies all the required checks - * - When onlyHighlight is false → config.isProUser must be true - * - When onlyHighlight is true → config.isProUser can be true or false (doesn't matter) - * @param {DOMElement} element - * @param {boolean} [onlyHighlight=false] - If true, bypasses the isProUser check - * @returns {boolean} - True if the element is editable else false + * check if an element is inspectable. + * inspectable elements are those which doesn't have data-brackets-id, + * this normally happens when content is DOM content is inserted by some scripting language */ - function isElementEditable(element, onlyHighlight = false) { + function isElementInspectable(element, onlyHighlight = false) { if(!config.isProUser && !onlyHighlight) { return false; } if(element && // element should exist - element.hasAttribute("data-brackets-id") && // should have the data-brackets-id attribute element.tagName.toLowerCase() !== "body" && // shouldn't be the body tag element.tagName.toLowerCase() !== "html" && // shouldn't be the HTML tag !_isInsideHeadTag(element)) { // shouldn't be inside the head tag like meta tags and all @@ -139,6 +135,20 @@ function RemoteFunctions(config = {}) { return false; } + /** + * This is a checker function for editable elements, it makes sure that the element satisfies all the required check + * - When onlyHighlight is false → config.isProUser must be true + * - When onlyHighlight is true → config.isProUser can be true or false (doesn't matter) + * @param {DOMElement} element + * @param {boolean} [onlyHighlight=false] - If true, bypasses the isProUser check + * @returns {boolean} - True if the element is editable else false + */ + function isElementEditable(element, onlyHighlight = false) { + // for an element to be editable it should satisfy all inspectable checks and should also have data-brackets-id + return isElementInspectable(element, onlyHighlight) && + element.hasAttribute("data-brackets-id"); + } + // helper function to check if an element is inside the HEAD tag // we need this because we don't wanna trigger the element highlights on head tag and its children, // except for -
-
-
-
-
- - -
-
- - -
+ + +
+
+
+
+ ${ICONS.imageGallery}
-
- - +
+ ${config.strings.imageGallery}
-
‹
-
-
- ${config.strings.imageGalleryLoadingInitial} -
+ +
+
+ + +
+
+ +
+ + +
+ +
+ + +
-
›
+ +
‹
+
+
+ ${config.strings.imageGalleryLoadingInitial} +
+
+
›
`; }, @@ -2736,7 +2794,7 @@ function RemoteFunctions(config = {}) { } this.totalPages = data.total_pages || 1; this.currentPage = page; - this._updateNavButtons(); + this._handleNavButtonsDisplay('visible'); this._updateSearchInput(searchQuery); this._updateCache(searchQuery, data, append); } else if (!append) { @@ -2766,11 +2824,11 @@ function RemoteFunctions(config = {}) { _imageGalleryCache.currentPage = this.currentPage; if (append) { - const currentImages = _imageGalleryCache.allImages; + const currentImages = _imageGalleryCache.allImages || []; const newImages = currentImages.concat(data.results); if (newImages.length > CACHE_MAX_IMAGES) { - _imageGalleryCache.allImages = newImages.slice(-CACHE_MAX_IMAGES); + _imageGalleryCache.allImages = newImages.slice(0, CACHE_MAX_IMAGES); } else { _imageGalleryCache.allImages = newImages; } @@ -2790,7 +2848,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; @@ -2798,13 +2856,14 @@ function RemoteFunctions(config = {}) { }, _loadFromCache: function(searchQuery) { - if (searchQuery === _imageGalleryCache.currentQuery && _imageGalleryCache.allImages.length > 0) { - this.allImages = _imageGalleryCache.allImages; + const cachedImages = _imageGalleryCache.allImages; + if (searchQuery === _imageGalleryCache.currentQuery && cachedImages && cachedImages.length > 0) { + this.allImages = cachedImages; this.totalPages = _imageGalleryCache.totalPages; this.currentPage = _imageGalleryCache.currentPage; this._renderImages(this.allImages, false); - this._updateNavButtons(); + this._handleNavButtonsDisplay('visible'); this._updateSearchInput(searchQuery); return true; } @@ -2812,16 +2871,17 @@ function RemoteFunctions(config = {}) { }, _loadPageFromCache: function(searchQuery, page) { - if (searchQuery === _imageGalleryCache.currentQuery && page <= Math.ceil(_imageGalleryCache.allImages.length / 10)) { + const cachedImages = _imageGalleryCache.allImages; + if (searchQuery === _imageGalleryCache.currentQuery && cachedImages && page <= Math.ceil(cachedImages.length / 10)) { const startIdx = (page - 1) * 10; const endIdx = startIdx + 10; - const pageImages = _imageGalleryCache.allImages.slice(startIdx, endIdx); + const pageImages = cachedImages.slice(startIdx, endIdx); if (pageImages.length > 0) { this.allImages = this.allImages.concat(pageImages); this._renderImages(pageImages, true); this.currentPage = page; - this._updateNavButtons(); + this._handleNavButtonsDisplay('visible'); this._isLoadingMore = false; this._hideLoadingMore(); return true; @@ -2831,24 +2891,38 @@ 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; - const scrollAmount = containerWidth; + const imageWidth = 117; // image width + gap + + // calculate how many images are visible + const visibleImages = Math.floor(containerWidth / imageWidth); + + // scroll by (visible images - 2), minimum 1 image, maximum 5 images + const imagesToScroll = Math.max(1, Math.min(5, visibleImages - 2)); + const scrollAmount = imagesToScroll * imageWidth; this.scrollPosition = Math.max(0, this.scrollPosition - scrollAmount); container.scrollTo({ left: this.scrollPosition, behavior: 'smooth' }); - this._updateNavButtons(); + this._handleNavButtonsDisplay('visible'); }, _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; const totalWidth = container.scrollWidth; - const scrollAmount = containerWidth; + const imageWidth = 117; // image width + gap + + // calculate how many images are visible + const visibleImages = Math.floor(containerWidth / imageWidth); + + // scroll by (visible images - 2), minimum 1 image, maximum 5 images + const imagesToScroll = Math.max(1, Math.min(5, visibleImages - 2)); + const scrollAmount = imagesToScroll * imageWidth; // if we're near the end, we need to load more images const nearEnd = (this.scrollPosition + containerWidth + scrollAmount) >= totalWidth - 100; @@ -2860,49 +2934,58 @@ function RemoteFunctions(config = {}) { this.scrollPosition = Math.min(totalWidth - containerWidth, this.scrollPosition + scrollAmount); container.scrollTo({ left: this.scrollPosition, behavior: 'smooth' }); - this._updateNavButtons(); + this._handleNavButtonsDisplay('visible'); }, - _updateNavButtons: function() { - // 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'); + _handleNavButtonsDisplay: function(state) { // state can be 'visible' or 'hidden' + 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; } + if (!navLeft || !navRight) { return; } - // show/hide left button - if (this.scrollPosition <= 0) { - navLeft.style.display = 'none'; - } else { - navLeft.style.display = 'block'; + if (state === 'hidden') { + navLeft.style.setProperty('display', 'none', 'important'); + navRight.style.setProperty('display', 'none', 'important'); + return; } - // show/hide right button - const containerWidth = container.clientWidth; - const totalWidth = container.scrollWidth; - const atEnd = (this.scrollPosition + containerWidth) >= totalWidth - 10; - const hasMorePages = this.currentPage < this.totalPages; + if (state === 'visible') { + if (!container) { return; } - if (atEnd && !hasMorePages) { - navRight.style.display = 'none'; - } else { - navRight.style.display = 'block'; + // show/hide the nav-left button + if (this.scrollPosition <= 0) { + navLeft.style.setProperty('display', 'none', 'important'); + } else { + navLeft.style.setProperty('display', 'flex', 'important'); + } + + // show/hide the nav-right button + const containerWidth = container.clientWidth; + const totalWidth = container.scrollWidth; + const atEnd = (this.scrollPosition + containerWidth) >= totalWidth - 10; + const hasMorePages = this.currentPage < this.totalPages; + + if (atEnd && !hasMorePages) { + navRight.style.setProperty('display', 'none', 'important'); + } else { + navRight.style.setProperty('display', 'flex', 'important'); + } } }, _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'; + + this._handleNavButtonsDisplay('hidden'); }, _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 @@ -2920,14 +3003,15 @@ function RemoteFunctions(config = {}) { }, _attachEventHandlers: function() { - const ribbonContainer = this._shadow.querySelector('.phoenix-image-ribbon'); - 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) { @@ -2943,7 +3027,13 @@ function RemoteFunctions(config = {}) { } }; - searchButton.addEventListener('click', performSearch); + // disable/enable search button as per input container text + const updateSearchButtonState = () => { + searchButton.disabled = searchInput.value.trim().length === 0; + }; + + searchInput.addEventListener('input', updateSearchButtonState); + searchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { performSearch(e); @@ -2953,6 +3043,8 @@ function RemoteFunctions(config = {}) { searchInput.addEventListener('click', (e) => { e.stopPropagation(); }); + + searchButton.addEventListener('click', performSearch); } if (selectImageBtn && fileInput) { @@ -2976,6 +3068,7 @@ function RemoteFunctions(config = {}) { e.stopPropagation(); this.remove(); imageGallerySelected = false; + _handleImageGalleryStateChange(); dismissUIAndCleanupState(); }); } @@ -3008,6 +3101,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) => { @@ -3019,16 +3119,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'); @@ -3044,7 +3144,7 @@ function RemoteFunctions(config = {}) { const img = window.document.createElement('img'); img.src = image.thumb_url || image.url; - img.alt = image.alt_text || 'Unsplash image'; + img.alt = image.alt_text || ''; img.loading = 'lazy'; // show hovered image along with dimensions @@ -3056,11 +3156,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'; @@ -3109,18 +3204,9 @@ function RemoteFunctions(config = {}) { const extnName = ".jpg"; const downloadUrl = image.url || image.thumb_url; + const downloadLocation = image.download_location; - // we need to make a req to the download endpoint - // its required by the Unsplash API guidelines to track downloads for photographers - // this is just a tracking call, we don't need to wait for the response - if (image.download_location) { - fetch(image.download_location) - .catch(error => { - // - }); - } - - this._useImage(downloadUrl, filename, extnName, false, thumbDiv); + this._useImage(downloadUrl, filename, extnName, false, thumbDiv, downloadLocation); }); thumbDiv.appendChild(img); @@ -3134,14 +3220,18 @@ function RemoteFunctions(config = {}) { container.scrollLeft = savedScrollPosition; }, 0); } + + this._handleNavButtonsDisplay('visible'); }, _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'; + + this._handleNavButtonsDisplay('hidden'); }, // file name with which we need to save the image @@ -3156,9 +3246,9 @@ function RemoteFunctions(config = {}) { return `${cleanSearchTerm}-by-${cleanPhotographerName}`; }, - _useImage: function(imageUrl, filename, extnName, isLocalFile, thumbDiv) { - // send the message to the editor instance to save the image and update the source code + _useImage: function(imageUrl, filename, extnName, isLocalFile, thumbDiv, downloadLocation) { const tagId = this.element.getAttribute("data-brackets-id"); + const downloadId = Date.now() + Math.random(); const messageData = { livePreviewEditEnabled: true, @@ -3167,7 +3257,9 @@ function RemoteFunctions(config = {}) { filename: filename, extnName: extnName, element: this.element, - tagId: Number(tagId) + tagId: Number(tagId), + downloadLocation: downloadLocation, + downloadId: downloadId }; // if this is a local file we need some more data before sending it to the editor @@ -3182,15 +3274,12 @@ function RemoteFunctions(config = {}) { messageData.imageData = byteNumbers; } - window._Brackets_MessageBroker.send(messageData); + _activeDownloads.set(downloadId, { + thumbDiv: thumbDiv, + timestamp: Date.now() + }); - // if thumbDiv is provided, hide the download indicator after a reasonable timeout - // this is to make sure that the indicator is always removed even if there's no explicit success callback - if (thumbDiv) { - setTimeout(() => { - this._hideDownloadIndicator(thumbDiv); - }, 3000); - } + window._Brackets_MessageBroker.send(messageData); }, _handleLocalImageSelection: function(file) { @@ -3243,7 +3332,6 @@ function RemoteFunctions(config = {}) { const queryToUse = _imageGalleryCache.currentQuery || this._getDefaultQuery(); this._fetchImages(queryToUse); - setTimeout(() => this._updateNavButtons(), 0); }, remove: function () { @@ -3475,7 +3563,7 @@ function RemoteFunctions(config = {}) { "top": offset.top + "px", "width": elementBounds.width + "px", "height": elementBounds.height + "px", - "z-index": 2147483647, + "z-index": 2147483646, "margin": 0, "padding": 0, "position": "absolute", @@ -3584,10 +3672,45 @@ function RemoteFunctions(config = {}) { var _setup = false; var _hoverLockTimer = null; + const DOWNLOAD_EVENTS = { + STARTED: 'downloadStarted', + COMPLETED: 'downloadCompleted', + CANCELLED: 'downloadCancelled', + ERROR: 'downloadError' + }; + + let _activeDownloads = new Map(); + + function handleDownloadEvent(eventType, data) { + const downloadId = data && data.downloadId; + if (!downloadId) { + return; + } + + const download = _activeDownloads.get(downloadId); + if (!download) { + return; + } + + switch (eventType) { + case DOWNLOAD_EVENTS.STARTED: + break; + + case DOWNLOAD_EVENTS.COMPLETED: + case DOWNLOAD_EVENTS.CANCELLED: + case DOWNLOAD_EVENTS.ERROR: + if (_imageRibbonGallery && download.thumbDiv) { + _imageRibbonGallery._hideDownloadIndicator(download.thumbDiv); + } + _activeDownloads.delete(downloadId); + break; + } + } + function onMouseOver(event) { if (_validEvent(event)) { const element = event.target; - if(isElementEditable(element) && element.nodeType === Node.ELEMENT_NODE ) { + if(isElementInspectable(element) && element.nodeType === Node.ELEMENT_NODE ) { _localHighlight.add(element, true); } } @@ -3637,7 +3760,7 @@ function RemoteFunctions(config = {}) { } const element = event.target; - if(!isElementEditable(element) || element.nodeType !== Node.ELEMENT_NODE) { + if(!isElementInspectable(element) || element.nodeType !== Node.ELEMENT_NODE) { return false; } @@ -3699,29 +3822,46 @@ function RemoteFunctions(config = {}) { * @param {Element} element - The DOM element to select */ function _selectElement(element) { - // dismiss all UI boxes and cleanup previous element state when selecting a different element - dismissUIAndCleanupState(); - dismissImageRibbonGallery(); + dismissNodeMoreOptionsBox(); + dismissAIPromptBox(); + dismissNodeInfoBox(); + cleanupPreviousElementState(); - // this should always happen before isElementEditable check because this is not a live preview edit feature // this should also be there when users are in highlight mode scrollElementToViewPort(element); - if(!isElementEditable(element)) { + if(!isElementInspectable(element)) { return false; } - // if imageGallerySelected is true, show the image gallery directly - if(element && element.tagName.toLowerCase() === 'img' && imageGallerySelected) { - if (!_imageRibbonGallery) { + // if imageGallerySelected is true, show the image gallery directly (only for editable images) + if(isElementEditable(element) && element && element.tagName.toLowerCase() === 'img' && imageGallerySelected) { + if (!_imageRibbonGallery || _imageRibbonGallery.element !== element) { + dismissImageRibbonGallery(); // Dismiss only when creating new _imageRibbonGallery = new ImageRibbonGallery(element); scrollImageToViewportIfRequired(element, _imageRibbonGallery); } + } else { + // Not an image or gallery not selected, dismiss if exists + dismissImageRibbonGallery(); + } + + // if element is not editable and user clicks on it, then we show a toast notification saying + // that this element is not editable (unless user dismissed it permanently) + if (!element.hasAttribute("data-brackets-id")) { + const hideToast = localStorage.getItem('phoenix-hide-dynamic-toast'); + if (!hideToast) { + showToast(config.strings.toastNotEditable); + } } // make sure that the element is actually visible to the user if (isElementVisible(element)) { - _nodeMoreOptionsBox = new NodeMoreOptionsBox(element); + // Only show more options box for editable elements (have data-brackets-id) + if (isElementEditable(element)) { + _nodeMoreOptionsBox = new NodeMoreOptionsBox(element); + } + // Always show info box for inspectable elements _nodeInfoBox = new NodeInfoBox(element); } else { // Element is hidden, so don't show UI boxes but still apply visual styling @@ -3731,10 +3871,13 @@ function RemoteFunctions(config = {}) { element._originalOutline = element.style.outline; element.style.outline = "1px solid #4285F4"; - if (element._originalBackgroundColor === undefined) { - element._originalBackgroundColor = element.style.backgroundColor; + // Only apply background tint for editable elements (not for dynamic/read-only) + if (element.hasAttribute("data-brackets-id")) { + if (element._originalBackgroundColor === undefined) { + element._originalBackgroundColor = element.style.backgroundColor; + } + element.style.backgroundColor = "rgba(0, 162, 255, 0.2)"; } - element.style.backgroundColor = "rgba(0, 162, 255, 0.2)"; if (_hoverHighlight) { _hoverHighlight.clear(); @@ -3751,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); } @@ -3769,7 +3915,7 @@ function RemoteFunctions(config = {}) { _hoverLockTimer = setTimeout(() => { enableHoverListeners(); _hoverLockTimer = null; - }, 1500); // 1.5s + }, 800); } /** @@ -3780,10 +3926,17 @@ function RemoteFunctions(config = {}) { function onClick(event) { const element = event.target; - if(isElementEditable(element)) { + if(isElementInspectable(element)) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); + + // when in click mode, only select dynamic elements (without data-brackets-id) directly + // as for static elements, the editor will handle selection via highlight message + if (!shouldShowHighlightOnHover() && !element.hasAttribute("data-brackets-id")) { + _selectElement(element); + } + activateHoverLock(); } } @@ -3847,7 +4000,7 @@ function RemoteFunctions(config = {}) { if (clear) { _clickHighlight.clear(); } - if (isElementEditable(element, true) && element.nodeType === Node.ELEMENT_NODE) { + if (isElementInspectable(element, true) && element.nodeType === Node.ELEMENT_NODE) { _clickHighlight.add(element, true); } } @@ -3867,7 +4020,7 @@ function RemoteFunctions(config = {}) { // select the first valid highlighted element var foundValidElement = false; for (i = 0; i < nodes.length; i++) { - if(isElementEditable(nodes[i], true) && nodes[i].tagName !== "BR") { + if(isElementInspectable(nodes[i], true) && nodes[i].tagName !== "BR") { _selectElement(nodes[i]); foundValidElement = true; break; @@ -3881,17 +4034,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) { @@ -4289,6 +4443,11 @@ function RemoteFunctions(config = {}) { const oldConfig = config; config = JSON.parse(newConfig); + // update image gallery selected state as per the new config + if (config.imageGalleryState !== undefined) { + imageGallerySelected = config.imageGalleryState; + } + // Determine if configuration has changed significantly const oldHighlightMode = oldConfig.elemHighlights ? oldConfig.elemHighlights.toLowerCase() : "hover"; const newHighlightMode = getHighlightMode(); @@ -4394,6 +4553,119 @@ function RemoteFunctions(config = {}) { dismissImageRibbonGallery(); } + let _toastTimeout = null; + + /** + * this function is to show a toast notification at the bottom center of the screen + * this toast message is used when user tries to edit a non-editable element + * @param {String} message - the message to display in the toast + */ + function showToast(message) { + // clear any existing toast & timer, if there are any + const existingToast = window.document.getElementById('phoenix-toast-notification'); + if (existingToast) { + existingToast.remove(); + } + if (_toastTimeout) { + clearTimeout(_toastTimeout); + } + + // create a new fresh toast container + const toast = window.document.createElement('div'); + toast.id = 'phoenix-toast-notification'; + const shadow = toast.attachShadow({ mode: 'open' }); + + const styles = ` + :host { + all: initial !important; + } + + .toast-container { + position: fixed !important; + bottom: 30px !important; + left: 50% !important; + transform: translateX(-50%) translateY(0) !important; + background-color: rgba(51, 51, 51, 0.95) !important; + color: white !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; + 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; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + `; + + const content = ` +
+
${message}
+ +
+ `; + + shadow.innerHTML = `${content}`; + window.document.body.appendChild(toast); + + // 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; + }, 6000); + } + /** * Helper function to cleanup previously clicked element highlighting and state */ @@ -4424,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 @@ -4547,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); @@ -4593,7 +4906,9 @@ function RemoteFunctions(config = {}) { "finishEditing" : finishEditing, "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes, "dismissUIAndCleanupState" : dismissUIAndCleanupState, + "resetState" : resetState, "enableHoverListeners" : enableHoverListeners, - "registerHandlers" : registerHandlers + "registerHandlers" : registerHandlers, + "handleDownloadEvent" : handleDownloadEvent }; } diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js index e424e5271..8d8598add 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", @@ -733,7 +734,18 @@ define(function (require, exports, module) { */ function updateConfig(configJSON) { if (_protocol) { - _protocol.evaluate("_LD.updateConfig('" + configJSON + "')"); + _protocol.evaluate("_LD.updateConfig(" + JSON.stringify(configJSON) + ")"); + } + } + + /** + * 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()"); } } diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js index 860abf049..e6575bdcf 100644 --- a/src/LiveDevelopment/LivePreviewEdit.js +++ b/src/LiveDevelopment/LivePreviewEdit.js @@ -27,6 +27,7 @@ define(function (require, exports, module) { const HTMLInstrumentation = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation"); const LiveDevMultiBrowser = require("LiveDevelopment/LiveDevMultiBrowser"); + const LiveDevelopment = require("LiveDevelopment/main"); const CodeMirror = require("thirdparty/CodeMirror/lib/codemirror"); const ProjectManager = require("project/ProjectManager"); const FileSystem = require("filesystem/FileSystem"); @@ -41,6 +42,14 @@ define(function (require, exports, module) { // state manager key, to save the download location of the image const IMAGE_DOWNLOAD_FOLDER_KEY = "imageGallery.downloadFolder"; + const IMAGE_DOWNLOAD_PERSIST_FOLDER_KEY = "imageGallery.persistFolder"; + + const DOWNLOAD_EVENTS = { + STARTED: 'downloadStarted', + COMPLETED: 'downloadCompleted', + CANCELLED: 'downloadCancelled', + ERROR: 'downloadError' + }; const KernalModeTrust = window.KernalModeTrust; if(!KernalModeTrust){ @@ -685,6 +694,32 @@ define(function (require, exports, module) { } } + function _sendDownloadStatusToBrowser(eventType, data) { + const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc(); + if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) { + const dataJson = JSON.stringify(data || {}); + const evalString = `_LD.handleDownloadEvent('${eventType}', ${dataJson})`; + currLiveDoc.protocol.evaluate(evalString); + } + } + + function _handleDownloadError(error, downloadId) { + console.error('something went wrong while download the image. error:', error); + if (downloadId) { + _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.ERROR, { downloadId: downloadId }); + } + } + + function _trackDownload(downloadLocation) { + if (!downloadLocation) { + return; + } + fetch(`https://images.phcode.dev/api/images/download?download_location=${encodeURIComponent(downloadLocation)}`) + .catch(error => { + console.error('download tracking failed:', error); + }); + } + /** * Helper function to update image src attribute and dismiss ribbon gallery * @@ -716,7 +751,7 @@ define(function (require, exports, module) { * @param {Directory} projectRoot - the project root in which the image is to be saved */ function _handleUseThisImageLocalFiles(message, filename, projectRoot) { - const { tagId, imageData } = message; + const { tagId, imageData, downloadLocation, downloadId } = message; const uint8Array = new Uint8Array(imageData); const targetPath = projectRoot.fullPath + filename; @@ -724,8 +759,10 @@ define(function (require, exports, module) { window.fs.writeFile(targetPath, window.Filer.Buffer.from(uint8Array), { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => { if (err) { - console.error('Failed to save image:', err); + _handleDownloadError(err, downloadId); } else { + _trackDownload(downloadLocation); + _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.COMPLETED, { downloadId }); _updateImageAndDismissRibbon(tagId, targetPath, filename); } }); @@ -738,7 +775,7 @@ define(function (require, exports, module) { * @param {Directory} projectRoot - the project root in which the image is to be saved */ function _handleUseThisImageRemote(message, filename, projectRoot) { - const { imageUrl, tagId } = message; + const { imageUrl, tagId, downloadLocation, downloadId } = message; fetch(imageUrl) .then(response => { @@ -754,14 +791,16 @@ define(function (require, exports, module) { window.fs.writeFile(targetPath, window.Filer.Buffer.from(uint8Array), { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => { if (err) { - console.error('Failed to save image:', err); + _handleDownloadError(err, downloadId); } else { + _trackDownload(downloadLocation); + _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.COMPLETED, { downloadId }); _updateImageAndDismissRibbon(tagId, targetPath, filename); } }); }) .catch(error => { - console.error('Failed to fetch image:', error); + _handleDownloadError(error, downloadId); }); } @@ -778,6 +817,10 @@ define(function (require, exports, module) { return; } + if (message.downloadId) { + _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.STARTED, { downloadId: message.downloadId }); + } + const filename = message.filename; const extnName = message.extnName || "jpg"; @@ -792,11 +835,17 @@ define(function (require, exports, module) { // the directory name that user wrote, first check if it exists or not // if it doesn't exist we create it and then download the image inside it targetDir.exists((err, exists) => { - if (err) { return; } + if (err) { + _handleDownloadError(err, message.downloadId); + return; + } if (!exists) { targetDir.create((err) => { - if (err) { return; } + if (err) { + _handleDownloadError(err, message.downloadId); + return; + } _downloadImageToDirectory(message, filename, extnName, targetDir); }); } else { @@ -1109,6 +1158,10 @@ define(function (require, exports, module) { let rootFolders = []; let stringMatcher = null; + const persistFolder = StateManager.get(IMAGE_DOWNLOAD_PERSIST_FOLDER_KEY, StateManager.PROJECT_CONTEXT); + const shouldBeChecked = persistFolder !== false; + $rememberCheckbox.prop('checked', shouldBeChecked); + _scanRootDirectoriesOnly(projectRoot, rootFolders).then(() => { stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true }); _renderFolderSuggestions(rootFolders.slice(0, 15), $suggestions, $input); @@ -1134,14 +1187,22 @@ define(function (require, exports, module) { const folderPath = $input.val().trim(); // if the checkbox is checked, we save the folder preference for this project - if ($rememberCheckbox.is(':checked')) { + const isChecked = $rememberCheckbox.is(':checked'); + StateManager.set(IMAGE_DOWNLOAD_PERSIST_FOLDER_KEY, isChecked, StateManager.PROJECT_CONTEXT); + if (isChecked) { StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, folderPath, StateManager.PROJECT_CONTEXT); + } else { + StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, undefined, StateManager.PROJECT_CONTEXT); } // if message is provided, download the image if (message) { _downloadToFolder(message, folderPath); } + } else { + if (message && message.downloadId) { + _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.CANCELLED, { downloadId: message.downloadId }); + } } dialog.close(); }); @@ -1187,7 +1248,7 @@ define(function (require, exports, module) { _handleUseThisImageRemote(message, uniqueFilename, targetDir); } }).catch(error => { - console.error('Something went wrong when trying to use this image', error); + _handleDownloadError(error, message.downloadId); }); } @@ -1234,6 +1295,12 @@ define(function (require, exports, module) { return; } + // handle image gallery state change message + if (message.type === "imageGalleryStateChange") { + LiveDevelopment.setImageGalleryState(message.selected); + return; + } + // handle move(drag & drop) if (message.move && message.sourceId && message.targetId) { _moveElementInSource(message.sourceId, message.targetId, message.insertAfter, message.insertInside); diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index c5ac3a6a8..3819c467d 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -38,6 +38,7 @@ define(function main(require, exports, module) { LivePreviewTransport = require("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport"), CommandManager = require("command/CommandManager"), PreferencesManager = require("preferences/PreferencesManager"), + StateManager = require("preferences/StateManager"), UrlParams = require("utils/UrlParams").UrlParams, Strings = require("strings"), ExtensionUtils = require("utils/ExtensionUtils"), @@ -56,6 +57,33 @@ define(function main(require, exports, module) { const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange"; + // state manager key to track image gallery selected state, by default we keep this as selected + // if this is true we show the image gallery when an image element is clicked + const IMAGE_GALLERY_STATE = "livePreview.imageGallery.state"; + + /** + * get the image gallery state from StateManager + * @returns {boolean} true (default) + */ + function _getImageGalleryState() { + const savedState = StateManager.get(IMAGE_GALLERY_STATE); + return savedState !== undefined && savedState !== null ? savedState : true; + } + + /** + * sets the image gallery state + * @param {Boolean} the state that we need to set + */ + function setImageGalleryState(state) { + StateManager.set(IMAGE_GALLERY_STATE, state); + + // update the config with the new state + config.imageGalleryState = state; + if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) { + MultiBrowserLiveDev.updateConfig(JSON.stringify(config)); + } + } + var params = new UrlParams(); var config = { experimental: false, // enable experimental features @@ -70,6 +98,7 @@ define(function main(require, exports, module) { }, isProUser: isProUser, elemHighlights: "hover", // default value, this will get updated when the extension loads + imageGalleryState: _getImageGalleryState(), // image gallery selected state // this strings are used in RemoteFunctions.js // we need to pass this through config as remoteFunctions runs in browser context and cannot // directly reference Strings file @@ -89,7 +118,11 @@ 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, + 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. @@ -402,6 +435,7 @@ define(function main(require, exports, module) { exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge; exports.togglePreviewHighlight = togglePreviewHighlight; exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive; + exports.setImageGalleryState = setImageGalleryState; exports.updateElementHighlightConfig = updateElementHighlightConfig; exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds; exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails; diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html index 40504da9e..278fb574e 100644 --- a/src/htmlContent/image-folder-dialog.html +++ b/src/htmlContent/image-folder-dialog.html @@ -20,7 +20,7 @@

{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE}}

diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index e6c14a3ad..986e42901 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -191,14 +191,18 @@ define({ "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI", "LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY": "Image Gallery", "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_FROM_COMPUTER": "Upload 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", + "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/)", diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index b6359abea..ee4f57cb1 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -2560,30 +2560,37 @@ code { } &:hover { - background-color: @bc-panel-bg-hover-alt; + background-color: rgba(0, 0, 0, 0.03); .dark & { - background-color: @dark-bc-panel-bg-hover-alt; + background-color: rgba(255, 255, 255, 0.05); } } &.selected { - background-color: @bc-bg-highlight; - border-left-color: @bc-primary-btn-bg; + background-color: rgba(40, 142, 223, 0.08); + border-left-color: #288edf; .dark & { - background-color: @dark-bc-bg-highlight; - border-left-color: @dark-bc-primary-btn-bg; + background-color: rgba(40, 142, 223, 0.15); + border-left-color: #3da3ff; + } + + &:hover { + background-color: rgba(40, 142, 223, 0.12); + + .dark & { + background-color: rgba(40, 142, 223, 0.2); + } } } } .folder-match-highlight { - font-weight: @font-weight-semibold; - color: @bc-primary-btn-bg; + color: #288edf; .dark & { - color: @dark-bc-primary-btn-bg; + color: #3da3ff; } } }