feat: show image gallery by default, saved its state in state manager

Author: devvaannsh

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
@@ -288,6 +288,17 @@ function RemoteFunctions(config = {}) {
             _imageRibbonGallery = new ImageRibbonGallery(element);
             scrollImageToViewportIfRequired(element, _imageRibbonGallery);
         }
+
+        _handleImageGalleryStateChange();
+    }
+
+    function _handleImageGalleryStateChange() {
+        // send image gallery state change message to editor to save preference in state manager
+        window._Brackets_MessageBroker.send({
+            livePreviewEditEnabled: true,
+            type: "imageGalleryStateChange",
+            selected: imageGallerySelected
+        });
     }
 
     /**
@@ -2984,6 +2995,7 @@ function RemoteFunctions(config = {}) {
                     e.stopPropagation();
                     this.remove();
                     imageGallerySelected = false;
+                    _handleImageGalleryStateChange();
                     dismissUIAndCleanupState();
                 });
             }
@@ -4303,6 +4315,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();

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");
@@ -1234,6 +1235,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);

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
@@ -404,6 +433,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;