feat: add setting for spacing handles in live preview

Author: devvaannsh

src/LiveDevelopment/LivePreviewConstants.js

@@ -41,4 +41,5 @@ define(function main(require, exports, module) {
     exports.HIGHLIGHT_CLICK = "click";
 
     exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowMeasurements";
+    exports.PREFERENCE_SHOW_SPACING_HANDLES = "livePreviewShowSpacingHandles";
 });

src/LiveDevelopment/main.js

@@ -70,6 +70,7 @@ define(function main(require, exports, module) {
         mode: LIVE_HIGHLIGHT_MODE, // will be updated when we fetch entitlements
         elemHighlights: CONSTANTS.HIGHLIGHT_HOVER, // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
+        showSpacingHandles: true, // default value, this will get updated when the extension loads
         isPaidUser: false, // will be updated when we fetch entitlements
         isLoggedIn: false, // will be updated when we fetch entitlements
         hasLiveEditCapability: false // handled inside _liveEditCapabilityChanged function
@@ -324,6 +325,13 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
+    function updateSpacingHandlesConfig() {
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_SHOW_SPACING_HANDLES);
+        const config = MultiBrowserLiveDev.getConfig();
+        config.showSpacingHandles = prefValue !== false;
+        MultiBrowserLiveDev.updateConfig(config);
+    }
+
     EventDispatcher.makeEventDispatcher(exports);
 
     // private api
@@ -347,6 +355,7 @@ define(function main(require, exports, module) {
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
+    exports.updateSpacingHandlesConfig = updateSpacingHandlesConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

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

@@ -110,6 +110,12 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE
     });
 
+    // live preview spacing handles preference (show/hide spacing handles on element selection)
+    const PREFERENCE_SHOW_SPACING_HANDLES = CONSTANTS.PREFERENCE_SHOW_SPACING_HANDLES;
+    PreferencesManager.definePreference(PREFERENCE_SHOW_SPACING_HANDLES, "boolean", true, {
+        description: Strings.LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE
+    });
+
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const LIVE_PREVIEW_IFRAME_HTML = `
@@ -338,6 +344,7 @@ define(function (require, exports, module) {
             items.push("---");
             items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
             items.push(Strings.LIVE_PREVIEW_SHOW_RULER_LINES);
+            items.push(Strings.LIVE_PREVIEW_SHOW_SPACING_HANDLES);
         }
 
         const currentMode = LiveDevelopment.getCurrentMode();
@@ -372,6 +379,12 @@ define(function (require, exports, module) {
                     return `✓ ${Strings.LIVE_PREVIEW_SHOW_RULER_LINES}`;
                 }
                 return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SHOW_RULER_LINES}`;
+            } else if (item === Strings.LIVE_PREVIEW_SHOW_SPACING_HANDLES) {
+                const isEnabled = PreferencesManager.get(PREFERENCE_SHOW_SPACING_HANDLES);
+                if(isEnabled) {
+                    return `✓ ${Strings.LIVE_PREVIEW_SHOW_SPACING_HANDLES}`;
+                }
+                return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SHOW_SPACING_HANDLES}`;
             }
             return item;
         });
@@ -429,6 +442,15 @@ define(function (require, exports, module) {
                 const currentValue = PreferencesManager.get(PREFERENCE_SHOW_RULER_LINES);
                 PreferencesManager.set(PREFERENCE_SHOW_RULER_LINES, !currentValue);
                 return; // Don't dismiss highlights for this option
+            } else if (item === Strings.LIVE_PREVIEW_SHOW_SPACING_HANDLES) {
+                // Don't allow spacing handles toggle if edit features are not active
+                if (!isEditFeaturesActive) {
+                    return;
+                }
+                // Toggle spacing handles on/off
+                const currentValue = PreferencesManager.get(PREFERENCE_SHOW_SPACING_HANDLES);
+                PreferencesManager.set(PREFERENCE_SHOW_SPACING_HANDLES, !currentValue);
+                return; // Don't dismiss highlights for this option
             }
         });
 
@@ -1227,10 +1249,14 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_SHOW_RULER_LINES, function() {
             LiveDevelopment.updateRulerLinesConfig();
         });
+        PreferencesManager.on("change", PREFERENCE_SHOW_SPACING_HANDLES, function() {
+            LiveDevelopment.updateSpacingHandlesConfig();
+        });
 
-        // Initialize element highlight and ruler lines config on startup
+        // Initialize element highlight, ruler lines, and spacing handles config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
+        LiveDevelopment.updateSpacingHandlesConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);

src/nls/root/strings.js

@@ -240,10 +240,13 @@ define({
     "LIVE_DEV_STYLES_PANEL_NO_STYLES": "No styles found",
     "LIVE_DEV_STYLES_PANEL_PROPERTY_PLACEHOLDER": "property",
     "LIVE_DEV_STYLES_PANEL_VALUE_PLACEHOLDER": "value",
+    "LIVE_DEV_STYLES_QS_COLORS": "Colors",
+    "LIVE_DEV_STYLES_QS_TEXT_COLOR_LABEL": "Text",
+    "LIVE_DEV_STYLES_QS_BG_COLOR_LABEL": "Background",
     "LIVE_DEV_STYLES_QS_TYPOGRAPHY": "Typography",
-    "LIVE_DEV_STYLES_QS_BACKGROUND": "Background",
     "LIVE_DEV_STYLES_QS_SIZE": "Size",
     "LIVE_DEV_STYLES_QS_SPACING": "Spacing",
+    "LIVE_DEV_STYLES_QS_SIZE_AND_SPACING": "Size & Spacing",
     "LIVE_DEV_STYLES_QS_BORDER": "Border",
     "LIVE_DEV_STYLES_QS_LAYOUT": "Layout",
     "LIVE_DEV_STYLES_QS_EFFECTS": "Effects",
@@ -277,13 +280,19 @@ define({
     "LIVE_DEV_STYLES_QS_FLEX_DIR": "Direction",
     "LIVE_DEV_STYLES_QS_ALIGN_ITEMS": "Align",
     "LIVE_DEV_STYLES_QS_JUSTIFY": "Justify",
+    "LIVE_DEV_STYLES_QS_DISTRIBUTE": "Distribute",
+    "LIVE_DEV_STYLES_QS_DISTRIBUTE_PACKED": "Packed",
+    "LIVE_DEV_STYLES_QS_DISTRIBUTE_BETWEEN": "Between",
+    "LIVE_DEV_STYLES_QS_DISTRIBUTE_AROUND": "Around",
+    "LIVE_DEV_STYLES_QS_DISTRIBUTE_EVENLY": "Evenly",
     "LIVE_DEV_STYLES_QS_GAP": "Gap",
     "LIVE_DEV_STYLES_QS_Z_INDEX": "Z-Index",
     "LIVE_DEV_STYLES_QS_OPACITY": "Opacity",
     "LIVE_DEV_STYLES_QS_BOX_SHADOW": "Box Shadow",
     "LIVE_DEV_STYLES_QS_SELECTOR": "Selector",
     "LIVE_DEV_STYLES_QS_ELEMENT_STYLE": "element.style",
-    "LIVE_DEV_STYLES_QS_SHOW_MORE": "More properties",
+    "LIVE_DEV_STYLES_QS_SHOW_MORE": "Show More",
+    "LIVE_DEV_STYLES_QS_SHOW_LESS": "Show Less",
     "LIVE_DEV_STYLES_TAB_QUICK": "Quick Styles",
     "LIVE_DEV_STYLES_TAB_ADVANCED": "Advanced Styles",
     "LIVE_DEV_STYLES_TAB_COMPUTED": "Computed",
@@ -323,6 +332,8 @@ define({
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
     "LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Inspect Element on Hover",
     "LIVE_PREVIEW_SHOW_RULER_LINES": "Show Measurements",
+    "LIVE_PREVIEW_SHOW_SPACING_HANDLES": "Show Spacing Handles",
+    "LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE": "Show spacing handles when elements are selected in live preview edit mode. Defaults to 'true'",
     "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",