From c35cd4e176cd8ae67c328979dc51e8fcf2e07d80 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 10 Apr 2026 10:25:49 +0530 Subject: [PATCH 1/5] feat: remove show spacing handles preference setting --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 2 +- src/LiveDevelopment/LivePreviewConstants.js | 1 - src/LiveDevelopment/main.js | 9 --------- src/extensionsIntegrated/Phoenix-live-preview/main.js | 11 +---------- src/nls/root/strings.js | 2 -- 5 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 99a5571f9c..70be627a40 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -1353,7 +1353,7 @@ function RemoteFunctions(config = {}) { } // Preserve the currently selected element across re-registration - // so that toggling options (e.g. show measurements, show spacing handles) + // so that toggling options (e.g. show measurements) // doesn't clear the element highlighting. const selectedBeforeReregister = previouslySelectedElement; registerHandlers(); diff --git a/src/LiveDevelopment/LivePreviewConstants.js b/src/LiveDevelopment/LivePreviewConstants.js index 756d8bb1e1..6eb27d17f4 100644 --- a/src/LiveDevelopment/LivePreviewConstants.js +++ b/src/LiveDevelopment/LivePreviewConstants.js @@ -41,7 +41,6 @@ define(function main(require, exports, module) { exports.HIGHLIGHT_CLICK = "click"; exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowMeasurements"; - exports.PREFERENCE_SHOW_SPACING_HANDLES = "livePreviewShowSpacingHandles"; exports.PREFERENCE_LIVE_PREVIEW_SYNC = "livePreviewSyncSourceAndPreview"; }); diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index f4d2cc3527..a432affa07 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -70,7 +70,6 @@ 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 syncSourceAndPreview: 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 @@ -326,13 +325,6 @@ 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); - } - function updateSyncConfig() { const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC); const config = MultiBrowserLiveDev.getConfig(); @@ -363,7 +355,6 @@ define(function main(require, exports, module) { exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge; exports.updateElementHighlightConfig = updateElementHighlightConfig; exports.updateRulerLinesConfig = updateRulerLinesConfig; - exports.updateSpacingHandlesConfig = updateSpacingHandlesConfig; exports.updateSyncConfig = updateSyncConfig; exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds; exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index c25375a221..11a885cafb 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -115,11 +115,6 @@ define(function (require, exports, module) { description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE }); - 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 - }); - // live preview link editor and preview preference const PREFERENCE_LIVE_PREVIEW_SYNC = CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC; PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_SYNC, "boolean", true, { @@ -1457,17 +1452,13 @@ 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(); - }); PreferencesManager.on("change", PREFERENCE_LIVE_PREVIEW_SYNC, function() { LiveDevelopment.updateSyncConfig(); }); - // Initialize element highlight, ruler lines, spacing handles, and sync config on startup + // Initialize element highlight, ruler lines, and sync config on startup LiveDevelopment.updateElementHighlightConfig(); LiveDevelopment.updateRulerLinesConfig(); - LiveDevelopment.updateSpacingHandlesConfig(); LiveDevelopment.updateSyncConfig(); LiveDevelopment.openLivePreview(); diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index a0d119bacf..b0d926ca12 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -537,8 +537,6 @@ 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_LINK_EDITOR_AND_PREVIEW": "Link Editor and Preview", "LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE": "Link editor cursor with live preview element highlighting. When enabled, moving the cursor in the editor highlights the corresponding element in the live preview, and clicking an element in the live preview jumps the cursor to its source code. 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", From 4e194e524f8fe19cb8a1d512c5e217fbdbd5ba7c Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 10 Apr 2026 21:52:48 +0530 Subject: [PATCH 2/5] fix: control box update content add in allowed list --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 70be627a40..0e5decb0fb 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -70,6 +70,7 @@ function RemoteFunctions(config = {}) { "renderDropdownItems", // called when an item is selected from the more options dropdown "handleDropdownClick", + "updateContent", // in-place content refresh for control box etc. after drag "reRegisterEventHandlers", "handleClick", // handle click on an icon in the tool box. // when escape key is presses in the editor, we may need to dismiss the live edit boxes. From 3fad1e5dfcbff0b3f9d4423c10ba954ee3ab0c89 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 11 Apr 2026 00:19:11 +0530 Subject: [PATCH 3/5] feat: add selector box strings --- src/nls/root/strings.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index b0d926ca12..a8bb558fae 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -233,6 +233,12 @@ define({ "LIVE_DEV_IMAGE_GALLERY_ATTRIBUTION_ON": "on {0}", "LIVE_DEV_IMAGE_GALLERY_GET_PRO": "Get Pro", "LIVE_DEV_IMAGE_GALLERY_USAGE_THRESHOLD": "You've used {0}% of your free image searches ({1}/{2})", + "LIVE_DEV_LP_SELBOX_TITLE": "Save changes to", + "LIVE_DEV_LP_SELBOX_INLINE": "Inline (element.style)", + "LIVE_DEV_LP_SELBOX_LOADING": "Finding matching rules\u2026", + "LIVE_DEV_LP_SELBOX_FILE_EMBEDDED": "embedded", + "LIVE_DEV_LP_SELBOX_SAVE_TOOLTIP": "Save changes to the selected target (Enter)", + "LIVE_DEV_LP_SELBOX_CANCEL_TOOLTIP": "Revert changes (Esc)", "LIVE_DEV_STYLES_PANEL_HEADER": "Style Editor", "LIVE_DEV_STYLES_EDIT_TOOLTIP": "Edit Styles", "LIVE_DEV_STYLES_PANEL_ADD": "+ Add", From 53841884feb92d9c0de2cce994137db4396574a8 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 11 Apr 2026 15:21:17 +0530 Subject: [PATCH 4/5] fix: disable hover listeners when selector box is present --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 0e5decb0fb..0cf6315132 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -575,6 +575,10 @@ function RemoteFunctions(config = {}) { if (SHARED_STATE.isAutoScrolling || SHARED_STATE._isDraggingSVG) { return; } + if (customReturns.selectorBox && customReturns.selectorBox.isOpen && + customReturns.selectorBox.isOpen()) { + return; + } const element = event.target; if(!LivePreviewView.isElementInspectable(element) || element.nodeType !== Node.ELEMENT_NODE) { From b6e84bdf2cba16eb9a7331e32d489d5641f2a8e7 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 11 Apr 2026 17:02:32 +0530 Subject: [PATCH 5/5] chore: add strings for selection box --- src/nls/root/strings.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index a8bb558fae..47e5812b9d 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -233,8 +233,9 @@ define({ "LIVE_DEV_IMAGE_GALLERY_ATTRIBUTION_ON": "on {0}", "LIVE_DEV_IMAGE_GALLERY_GET_PRO": "Get Pro", "LIVE_DEV_IMAGE_GALLERY_USAGE_THRESHOLD": "You've used {0}% of your free image searches ({1}/{2})", - "LIVE_DEV_LP_SELBOX_TITLE": "Save changes to", - "LIVE_DEV_LP_SELBOX_INLINE": "Inline (element.style)", + "LIVE_DEV_LP_SELBOX_TITLE": "Save Changes", + "LIVE_DEV_LP_SELBOX_INLINE": "Inline", + "LIVE_DEV_LP_SELBOX_INLINE_SECONDARY": "element.style", "LIVE_DEV_LP_SELBOX_LOADING": "Finding matching rules\u2026", "LIVE_DEV_LP_SELBOX_FILE_EMBEDDED": "embedded", "LIVE_DEV_LP_SELBOX_SAVE_TOOLTIP": "Save changes to the selected target (Enter)",