feat: hide/show image ribbon as soon as the setting is updated

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3628,11 +3628,19 @@ function RemoteFunctions(config = {}) {
         const highlightModeChanged = oldHighlightMode !== newHighlightMode;
         const isProStatusChanged = oldConfig.isProUser !== config.isProUser;
         const highlightSettingChanged = oldConfig.highlight !== config.highlight;
+        const imageRibbonJustEnabled = !oldConfig.imageRibbon && config.imageRibbon;
 
         // Handle significant configuration changes
         if (highlightModeChanged || isProStatusChanged || highlightSettingChanged) {
             _handleConfigurationChange();
         }
+
+        // if user enabled the image ribbon setting and an image is selected, then we show the image ribbon
+        if (imageRibbonJustEnabled && previouslyClickedElement &&
+            previouslyClickedElement.tagName.toLowerCase() === 'img') {
+            _imageRibbonGallery = new ImageRibbonGallery(previouslyClickedElement);
+        }
+
         _updateEventListeners();
 
         return JSON.stringify(config);

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -718,6 +718,15 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Dismiss image ribbon gallery if it's open
+     */
+    function dismissImageRibbonGallery() {
+        if (_protocol) {
+            _protocol.evaluate("_LD.dismissImageRibbonGallery()");
+        }
+    }
+
     /**
      * Register event handlers in the remote browser for live preview functionality
      */
@@ -804,6 +813,7 @@ define(function (require, exports, module) {
     exports.redrawHighlight     = redrawHighlight;
     exports.hasVisibleLivePreviewBoxes = hasVisibleLivePreviewBoxes;
     exports.dismissLivePreviewBoxes = dismissLivePreviewBoxes;
+    exports.dismissImageRibbonGallery = dismissImageRibbonGallery;
     exports.registerHandlers    = registerHandlers;
     exports.updateConfig        = updateConfig;
     exports.init                = init;

src/LiveDevelopment/main.js

@@ -371,7 +371,10 @@ define(function main(require, exports, module) {
     function updateImageRibbonConfig() {
         const prefValue = PreferencesManager.get("livePreviewImageRibbon");
         config.imageRibbon = prefValue !== false; // default to true if undefined
+
         if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+            if (!prefValue) { MultiBrowserLiveDev.dismissImageRibbonGallery(); } // to remove any existing image ribbons
+
             MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
             MultiBrowserLiveDev.registerHandlers();
         }