feat: add setting to sync the preview and the editor

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -539,6 +539,13 @@
                     // as a live select.
                     return;
                 }
+                if (window._LD && !window._LD.isSyncEnabled()) {
+                    // When sync is disabled, highlight the element directly in the browser
+                    // without doing a round-trip through the editor (which would move the cursor)
+                    var tagId = element.getAttribute('data-brackets-id');
+                    window._LD.highlightRule("[data-brackets-id='" + tagId + "']");
+                    return;
+                }
                 MessageBroker.send({
                     "tagId": element.getAttribute('data-brackets-id'),
                     "nodeID": element.id,

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -618,7 +618,8 @@ function RemoteFunctions(config = {}) {
         }
 
         // send cursor movement message to editor so cursor jumps to clicked element
-        if (element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
+        if (element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) &&
+            config.syncSourceAndPreview !== false) {
             MessageBroker.send({
                 "tagId": element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR),
                 "nodeID": element.id,
@@ -1314,6 +1315,7 @@ function RemoteFunctions(config = {}) {
         "dismissUIAndCleanupState": dismissUIAndCleanupState,
         "escapeKeyPressInEditor": _handleEscapeKeyPress,
         "getMode": function() { return config.mode; },
+        "isSyncEnabled": function() { return config.syncSourceAndPreview !== false; },
         "suppressDOMEditDismissal": suppressDOMEditDismissal,
         "setHotCornerHidden": function(hidden) {
             if (SHARED_STATE._hotCorner && SHARED_STATE._hotCorner.hotCorner) {

src/LiveDevelopment/LivePreviewConstants.js

@@ -42,4 +42,6 @@ define(function main(require, exports, module) {
 
     exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowMeasurements";
     exports.PREFERENCE_SHOW_SPACING_HANDLES = "livePreviewShowSpacingHandles";
+
+    exports.PREFERENCE_LIVE_PREVIEW_SYNC = "livePreviewSyncSourceAndPreview";
 });

src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js

@@ -192,7 +192,8 @@ define(function (require, exports, module) {
         if (!this.editor) {
             return;
         }
-        if(!_disableHighlightOnCursor){
+        if(!_disableHighlightOnCursor &&
+            PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC) !== false){
             this.updateHighlight();
         }
     };

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -240,6 +240,9 @@ define(function (require, exports, module) {
             // hilights are enabled only in edit and highlight mode
             return;
         }
+        if(PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC) === false){
+            return;
+        }
         const liveDoc = LiveDevMultiBrowser.getCurrentLiveDoc(),
             activeEditor = EditorManager.getActiveEditor(), // this can be an inline editor
             activeFullEditor = EditorManager.getCurrentFullEditor();

src/LiveDevelopment/main.js

@@ -71,6 +71,7 @@ define(function main(require, exports, module) {
         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
         hasLiveEditCapability: false // handled inside _liveEditCapabilityChanged function
@@ -332,6 +333,13 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
+    function updateSyncConfig() {
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC);
+        const config = MultiBrowserLiveDev.getConfig();
+        config.syncSourceAndPreview = prefValue !== false;
+        MultiBrowserLiveDev.updateConfig(config);
+    }
+
     EventDispatcher.makeEventDispatcher(exports);
 
     // private api
@@ -356,6 +364,7 @@ define(function main(require, exports, module) {
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
     exports.updateSpacingHandlesConfig = updateSpacingHandlesConfig;
+    exports.updateSyncConfig = updateSyncConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

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

@@ -116,6 +116,12 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE
     });
 
+    // live preview sync source and preview preference
+    const PREFERENCE_LIVE_PREVIEW_SYNC = CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC;
+    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_SYNC, "boolean", true, {
+        description: Strings.LIVE_DEV_SETTINGS_SYNC_SOURCE_AND_PREVIEW_PREFERENCE
+    });
+
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const LIVE_PREVIEW_IFRAME_HTML = `
@@ -333,22 +339,30 @@ define(function (require, exports, module) {
 
     function _showModeSelectionDropdown(event) {
         const isEditFeaturesActive = isProEditUser;
+        const currentMode = LiveDevelopment.getCurrentMode();
+        const isNotPreviewMode = currentMode !== LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE;
         const items = [
             Strings.LIVE_PREVIEW_MODE_PREVIEW,
             Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
             Strings.LIVE_PREVIEW_MODE_EDIT
         ];
 
+        // Add sync toggle for highlight and edit modes
+        if (isNotPreviewMode) {
+            items.push("---");
+            items.push(Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW);
+        }
+
         // Only add edit highlight option if edit features are active
         if (isEditFeaturesActive) {
-            items.push("---");
+            if (!isNotPreviewMode) {
+                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();
-
         $dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
             if (item === Strings.LIVE_PREVIEW_MODE_PREVIEW) {
                 // using empty spaces to keep content aligned
@@ -366,6 +380,12 @@ define(function (require, exports, module) {
                     html: `${checkmark}${item}${crownIcon}`,
                     enabled: true
                 };
+            } else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
+                const isEnabled = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC) !== false;
+                if(isEnabled) {
+                    return `✓ ${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
+                }
+                return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
             } else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
                 const isHoverMode =
                     PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) === CONSTANTS.HIGHLIGHT_HOVER;
@@ -422,6 +442,11 @@ define(function (require, exports, module) {
                         Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail");
                     }
                 }
+            } else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
+                // Toggle sync source and preview on/off
+                const currentValue = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC);
+                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_SYNC, currentValue === false);
+                return; // Don't dismiss for this option
             } else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
                 // Don't allow edit highlight toggle if edit features are not active
                 if (!isEditFeaturesActive) {
@@ -1252,11 +1277,15 @@ define(function (require, exports, module) {
         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, and spacing handles config on startup
+        // Initialize element highlight, ruler lines, spacing handles, and sync config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
         LiveDevelopment.updateSpacingHandlesConfig();
+        LiveDevelopment.updateSyncConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);

src/nls/root/strings.js

@@ -240,7 +240,7 @@ 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_TAB_ADVANCED": "Advanced Styles",
+    "LIVE_DEV_STYLES_TAB_ADVANCED": "Styles",
     "LIVE_DEV_STYLES_TAB_COMPUTED": "Computed",
     "LIVE_DEV_STYLES_FILTER_ALL": "All",
     "LIVE_DEV_STYLES_FILTER_LAYOUT": "Layout",
@@ -280,6 +280,8 @@ define({
     "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_SYNC_SOURCE_AND_PREVIEW": "Sync Code & Preview",
+    "LIVE_DEV_SETTINGS_SYNC_SOURCE_AND_PREVIEW_PREFERENCE": "Sync source code 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",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",