feat: add download folder button reset mechanism

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1219,6 +1219,12 @@ function RemoteFunctions(config = {}) {
         <svg viewBox="0 0 640 640" fill="currentColor">
           <path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/>
         </svg>
+      `,
+
+        folderSettings: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+        </svg>
       `
     };
 
@@ -2301,10 +2307,35 @@ function RemoteFunctions(config = {}) {
                     .phoenix-select-image-btn:hover {
                         background: rgba(21,25,36,0.85) !important;
                         border-color: rgba(255,255,255,0.25) !important;
-                        transform: scale(1.05) !important;
                         box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
+                    .phoenix-ribbon-folder-settings {
+                        background: rgba(21,25,36,0.65) !important;
+                        border: 1px solid rgba(255,255,255,0.14) !important;
+                        color: #eaeaf0 !important;
+                        cursor: pointer !important;
+                        padding: 2px 6px 1px 6px !important;
+                        border-radius: 6px !important;
+                        margin-right: 8px !important;
+                        transition: all 0.2s ease !important;
+                        font-size: 12px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                    }
+
+                    .phoenix-ribbon-folder-settings:hover {
+                        background: rgba(21,25,36,0.85) !important;
+                        border-color: rgba(255,255,255,0.25) !important;
+                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+                    }
+
+                    .phoenix-ribbon-folder-settings svg {
+                        width: 16px !important;
+                        height: 16px !important;
+                    }
+
                     .phoenix-ribbon-close {
                         background: rgba(21,25,36,0.65) !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
@@ -2320,7 +2351,6 @@ function RemoteFunctions(config = {}) {
                     .phoenix-ribbon-close:hover {
                         background: rgba(21,25,36,0.85) !important;
                         border-color: rgba(255,255,255,0.25) !important;
-                        transform: scale(1.05) !important;
                         box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
@@ -2461,6 +2491,9 @@ function RemoteFunctions(config = {}) {
                                 </div>
                             </div>
                             <div class="phoenix-ribbon-header-right">
+                                <button class="phoenix-ribbon-folder-settings" title="Select image download folder">
+                                    ${ICONS.folderSettings}
+                                </button>
                                 <button class="phoenix-ribbon-close">×</button>
                             </div>
                         </div>
@@ -2725,6 +2758,7 @@ function RemoteFunctions(config = {}) {
             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');
@@ -2778,6 +2812,20 @@ function RemoteFunctions(config = {}) {
                 });
             }
 
+            if (folderSettingsButton) {
+                folderSettingsButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    // send message to LivePreviewEdit to show folder selection dialog
+                    const tagId = this.element.getAttribute("data-brackets-id");
+                    window._Brackets_MessageBroker.send({
+                        livePreviewEditEnabled: true,
+                        resetImageFolderSelection: true,
+                        element: this.element,
+                        tagId: Number(tagId)
+                    });
+                });
+            }
+
             if (navLeft) {
                 navLeft.addEventListener('click', (e) => {
                     e.stopPropagation();

src/LiveDevelopment/LivePreviewEdit.js

@@ -1012,25 +1012,14 @@ define(function (require, exports, module) {
     }
 
     /**
-     * This function is called when 'use this image' button is clicked in the image ribbon gallery
-     * or user loads an image file from the computer
-     * this is responsible to download the image in the appropriate place
-     * and also change the src attribute of the element (by calling appropriate helper functions)
-     *
-     * @param {Object} message - the message object which stores all the required data for this operation
+     * this shows the folder selection dialog for choosing where to download images
+     * @param {Object} message - the message object (optional, only needed when downloading image)
+     * @private
      */
-    function _handleUseThisImage(message) {
+    function _showFolderSelectionDialog(message) {
         const projectRoot = ProjectManager.getProjectRoot();
         if (!projectRoot) { return; }
 
-        // check if user has already saved a folder preference for this project
-        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
-        // we specifically check for nullish type vals because empty string is possible as it means project root
-        if (savedFolder !== null && savedFolder !== undefined) {
-            _downloadToFolder(message, savedFolder);
-            return;
-        }
-
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
         const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
@@ -1069,12 +1058,38 @@ define(function (require, exports, module) {
                     StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, folderPath, StateManager.PROJECT_CONTEXT);
                 }
 
-                _downloadToFolder(message, folderPath);
+                // if message is provided, download the image
+                if (message) {
+                    _downloadToFolder(message, folderPath);
+                }
             }
             dialog.close();
         });
     }
 
+    /**
+     * This function is called when 'use this image' button is clicked in the image ribbon gallery
+     * or user loads an image file from the computer
+     * this is responsible to download the image in the appropriate place
+     * and also change the src attribute of the element (by calling appropriate helper functions)
+     *
+     * @param {Object} message - the message object which stores all the required data for this operation
+     */
+    function _handleUseThisImage(message) {
+        const projectRoot = ProjectManager.getProjectRoot();
+        if (!projectRoot) { return; }
+
+        // check if user has already saved a folder preference for this project
+        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
+        // we specifically check for nullish type vals because empty string is possible as it means project root
+        if (savedFolder !== null && savedFolder !== undefined) {
+            _downloadToFolder(message, savedFolder);
+        } else {
+            // show the folder selection dialog
+            _showFolderSelectionDialog(message);
+        }
+    }
+
     /**
      * Helper function to download image to the specified directory
      *
@@ -1096,6 +1111,19 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * Handles reset of image folder selection - clears the saved preference and shows the dialog
+     * @private
+     */
+    function _handleResetImageFolderSelection() {
+        // clear the saved folder preference for this project
+        StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, null, StateManager.PROJECT_CONTEXT);
+
+        // show the folder selection dialog for the user to choose a new folder
+        // we pass null because we're not downloading an image, just setting the preference
+        _showFolderSelectionDialog(null);
+    }
+
     /**
      * This is the main function that is exported.
      * it will be called by LiveDevProtocol when it receives a message from RemoteFunctions.js
@@ -1120,6 +1148,12 @@ define(function (require, exports, module) {
     * these are the main properties that are passed through the message
      */
     function handleLivePreviewEditOperation(message) {
+        // handle reset image folder selection
+        if (message.resetImageFolderSelection) {
+            _handleResetImageFolderSelection();
+            return;
+        }
+
         // handle move(drag & drop)
         if (message.move && message.sourceId && message.targetId) {
             _moveElementInSource(message.sourceId, message.targetId, message.insertAfter, message.insertInside);