feat: add option in edit mode dropdown and preferences to toggle image gallery

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3020,6 +3020,11 @@ function RemoteFunctions(config = {}) {
         return getHighlightMode() !== "click";
     }
 
+    // helper function to check if image ribbon gallery should be shown
+    function shouldShowImageRibbon() {
+        return config.imageRibbon !== false;
+    }
+
     // helper function to clear element background highlighting
     function clearElementBackground(element) {
         if (element._originalBackgroundColor !== undefined) {
@@ -3140,8 +3145,8 @@ function RemoteFunctions(config = {}) {
             _selectElement(element);
         }
 
-        // if the image is an element we show the image ribbon gallery
-        if(element && element.tagName.toLowerCase() === 'img') {
+        // if the image is an element we show the image ribbon gallery (if enabled in preferences)
+        if(element && element.tagName.toLowerCase() === 'img' && shouldShowImageRibbon()) {
             event.preventDefault();
             event.stopPropagation();
             event.stopImmediatePropagation();

src/LiveDevelopment/main.js

@@ -70,6 +70,7 @@ define(function main(require, exports, module) {
         },
         isProUser: isProUser,
         elemHighlights: "hover", // default value, this will get updated when the extension loads
+        imageRibbon: true, // default value, this will get updated when the extension loads
         // 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
@@ -365,6 +366,17 @@ define(function main(require, exports, module) {
         }
     }
 
+    // this function is responsible to update image ribbon config
+    // called from live preview extension when preference changes
+    function updateImageRibbonConfig() {
+        const prefValue = PreferencesManager.get("livePreviewImageRibbon");
+        config.imageRibbon = prefValue !== false; // default to true if undefined
+        if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+            MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+            MultiBrowserLiveDev.registerHandlers();
+        }
+    }
+
     // init commands
     CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
     CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
@@ -393,6 +405,7 @@ define(function main(require, exports, module) {
     exports.togglePreviewHighlight = togglePreviewHighlight;
     exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
+    exports.updateImageRibbonConfig = updateImageRibbonConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -113,6 +113,12 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
     });
 
+    // live preview image ribbon gallery preference (whether to show image gallery when clicking images)
+    const PREFERENCE_PROJECT_IMAGE_RIBBON = "livePreviewImageRibbon";
+    PreferencesManager.definePreference(PREFERENCE_PROJECT_IMAGE_RIBBON, "boolean", true, {
+        description: "Show image gallery when clicked"
+    });
+
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const LIVE_PREVIEW_IFRAME_HTML = `
@@ -419,6 +425,7 @@ define(function (require, exports, module) {
         if (isEditFeaturesActive) {
             items.push("---");
             items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
+            items.push("Show image gallery when clicked");
         }
 
         const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
@@ -444,6 +451,12 @@ define(function (require, exports, module) {
                     return `✓ ${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
                 }
                 return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
+            } else if (item === "Show image gallery when clicked") {
+                const isImageRibbonEnabled = PreferencesManager.get(PREFERENCE_PROJECT_IMAGE_RIBBON) !== false;
+                if(isImageRibbonEnabled) {
+                    return `✓ ${item}`;
+                }
+                return `${'\u00A0'.repeat(4)}${item}`;
             }
             return item;
         });
@@ -492,6 +505,15 @@ define(function (require, exports, module) {
                 const newMode = currentMode !== "click" ? "click" : "hover";
                 PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
                 return; // Don't dismiss highlights for this option
+            } else if (item === "Show image gallery when clicked") {
+                // Don't allow image ribbon toggle if edit features are not active
+                if (!isEditFeaturesActive) {
+                    return;
+                }
+                // Toggle image ribbon preference
+                const currentEnabled = PreferencesManager.get(PREFERENCE_PROJECT_IMAGE_RIBBON);
+                PreferencesManager.set(PREFERENCE_PROJECT_IMAGE_RIBBON, !currentEnabled);
+                return; // Don't dismiss highlights for this option
             }
 
             // need to dismiss the previous highlighting and stuff
@@ -1296,8 +1318,15 @@ define(function (require, exports, module) {
             LiveDevelopment.updateElementHighlightConfig();
         });
 
+        // Handle image ribbon preference changes from this extension
+        PreferencesManager.on("change", PREFERENCE_PROJECT_IMAGE_RIBBON, function() {
+            LiveDevelopment.updateImageRibbonConfig();
+        });
+
         // Initialize element highlight config on startup
         LiveDevelopment.updateElementHighlightConfig();
+        // Initialize image ribbon config on startup
+        LiveDevelopment.updateImageRibbonConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);