feat: remove show image gallery option from dropdown

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -259,7 +259,7 @@ function RemoteFunctions(config = {}) {
      * @param {DOMElement} element - the HTML DOM element that was clicked (should be an image)
      */
     function _handleImageGalleryOptionClick(event, element) {
-        if (!_imageRibbonGallery && shouldShowImageRibbon()) {
+        if (!_imageRibbonGallery) {
             _imageRibbonGallery = new ImageRibbonGallery(element);
         }
     }
@@ -3380,12 +3380,6 @@ function RemoteFunctions(config = {}) {
         return getHighlightMode() !== "click";
     }
 
-    // helper function to check if image ribbon gallery should be shown
-    function shouldShowImageRibbon() {
-        if (_imageRibbonGallery) { return false; }
-        return config.imageRibbon !== false;
-    }
-
     // helper function to clear element background highlighting
     function clearElementBackground(element) {
         if (element._originalBackgroundColor !== undefined) {
@@ -4022,23 +4016,12 @@ 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
+        // Handle 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') {
-            if (!_imageRibbonGallery) {
-                _imageRibbonGallery = new ImageRibbonGallery(previouslyClickedElement);
-            }
-        }
-
         _updateEventListeners();
-
         return JSON.stringify(config);
     }
 

src/LiveDevelopment/main.js

@@ -70,7 +70,6 @@ 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
@@ -376,20 +375,6 @@ define(function main(require, exports, module) {
         }
     }
 
-    // this function is responsible to update image picker config
-    // called from live preview extension when preference changes
-    function updateImageRibbonConfig() {
-        const prefValue = PreferencesManager.get("livePreviewImagePicker");
-        config.imageRibbon = prefValue !== false; // default to true if undefined
-
-        if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-            if (!prefValue) { MultiBrowserLiveDev.dismissLivePreviewBoxes(); } // to remove any existing image ribbons and UI boxes
-
-            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);
@@ -418,7 +403,6 @@ 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,12 +113,6 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
     });
 
-    // live preview image picker preference (whether to show image gallery when clicking images)
-    const PREFERENCE_PROJECT_IMAGE_RIBBON = "livePreviewImagePicker";
-    PreferencesManager.definePreference(PREFERENCE_PROJECT_IMAGE_RIBBON, "boolean", true, {
-        description: Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON
-    });
-
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const LIVE_PREVIEW_IFRAME_HTML = `
@@ -425,7 +419,6 @@ define(function (require, exports, module) {
         if (isEditFeaturesActive) {
             items.push("---");
             items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
-            items.push(Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON);
         }
 
         const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
@@ -451,12 +444,6 @@ 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 === Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON) {
-                const isImageRibbonEnabled = PreferencesManager.get(PREFERENCE_PROJECT_IMAGE_RIBBON) !== false;
-                if(isImageRibbonEnabled) {
-                    return `✓ ${item}`;
-                }
-                return `${'\u00A0'.repeat(4)}${item}`;
             }
             return item;
         });
@@ -505,15 +492,6 @@ 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 === Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON) {
-                // 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
@@ -1318,15 +1296,8 @@ 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);

src/nls/root/strings.js

@@ -205,7 +205,6 @@ define({
     "LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
     "LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Edit Highlights on Hover",
-    "LIVE_PREVIEW_EDIT_IMAGE_RIBBON": "Show Image Picker on Image click",
     "LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
     "LIVE_PREVIEW_PRO_FEATURE_TITLE": "Pro Feature",