Skip to content

Element handles - Spacing and Resizer support #2809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abose merged 5 commits into from
Apr 12, 2026
Merged

Element handles - Spacing and Resizer support #2809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c35cd4e
feat: remove show spacing handles preference setting
devvaannsh Apr 10, 2026
4e194e5
fix: control box update content add in allowed list
devvaannsh Apr 10, 2026
3fad1e5
feat: add selector box strings
devvaannsh Apr 10, 2026
5384188
fix: disable hover listeners when selector box is present
devvaannsh Apr 11, 2026
b6e84bd
chore: add strings for selection box
devvaannsh Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"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.
Expand Down Expand Up @@ -574,6 +575,10 @@
if (SHARED_STATE.isAutoScrolling || SHARED_STATE._isDraggingSVG) {
return;
}
if (customReturns.selectorBox && customReturns.selectorBox.isOpen &&
customReturns.selectorBox.isOpen()) {

Check warning on line 579 in src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=phcode-dev_phoenix&issues=AZ18qmAQ1Rn55vnUZ5H8&open=AZ18qmAQ1Rn55vnUZ5H8&pullRequest=2809
return;
}

const element = event.target;
if(!LivePreviewView.isElementInspectable(element) || element.nodeType !== Node.ELEMENT_NODE) {
Expand Down Expand Up @@ -1353,7 +1358,7 @@
}

// 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();
Expand Down
1 change: 0 additions & 1 deletion src/LiveDevelopment/LivePreviewConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
});
9 changes: 0 additions & 9 deletions src/LiveDevelopment/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down
11 changes: 1 addition & 10 deletions src/extensionsIntegrated/Phoenix-live-preview/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -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();
Expand Down
9 changes: 7 additions & 2 deletions src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,13 @@ 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",
"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)",
"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",
Expand Down Expand Up @@ -537,8 +544,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",
Expand Down
Loading