fix: css reverse highlight shouldnt happen when forward highlight is going on

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -29,7 +29,9 @@ function RemoteFunctions(config = {}) {
 
     let _hoverHighlight;
     let _clickHighlight;
+    let _cssSelectorHighlight; // temporary highlight for CSS selector matches in edit mode
     let _hoverLockTimer = null;
+    let _cssSelectorHighlightTimer = null; // timer for clearing temporary CSS selector highlights
 
     // this will store the element that was clicked previously (before the new click)
     // we need this so that we can remove click styling from the previous element when a new element is clicked
@@ -775,6 +777,36 @@ function RemoteFunctions(config = {}) {
         selectElement(element);
     }
 
+    // clear temporary CSS selector highlights
+    function clearCssSelectorHighlight() {
+        if (_cssSelectorHighlightTimer) {
+            clearTimeout(_cssSelectorHighlightTimer);
+            _cssSelectorHighlightTimer = null;
+        }
+        if (_cssSelectorHighlight) {
+            _cssSelectorHighlight.clear();
+            _cssSelectorHighlight = null;
+        }
+    }
+
+    // create temporary CSS selector highlights for edit mode
+    function createCssSelectorHighlight(nodes, rule) {
+        // Clear any existing temporary highlights
+        clearCssSelectorHighlight();
+
+        // Create new temporary highlight for all matching elements
+        _cssSelectorHighlight = new Highlight("#cfc");
+        for (var i = 0; i < nodes.length; i++) {
+            if (LivePreviewView.isElementInspectable(nodes[i], true) && nodes[i].nodeType === Node.ELEMENT_NODE) {
+                _cssSelectorHighlight.add(nodes[i], true);
+            }
+        }
+        _cssSelectorHighlight.selector = rule;
+
+        // Clear temporary highlights after 2 seconds
+        _cssSelectorHighlightTimer = setTimeout(clearCssSelectorHighlight, 2000);
+    }
+
     // remove active highlights
     function hideHighlight() {
         if (_clickHighlight) {
@@ -785,6 +817,7 @@ function RemoteFunctions(config = {}) {
             _hoverHighlight.clear();
             _hoverHighlight = null;
         }
+        clearCssSelectorHighlight();
     }
 
     // highlight an element
@@ -832,6 +865,11 @@ function RemoteFunctions(config = {}) {
         if (!foundValidElement) {
             dismissUIAndCleanupState();
         }
+
+        // In edit mode, create temporary highlights AFTER selection to avoid clearing
+        if (config.mode === 'edit') {
+            createCssSelectorHighlight(nodes, rule);
+        }
     }
 
     // recreate UI boxes so that they are placed properly

src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js

@@ -171,6 +171,17 @@ define(function (require, exports, module) {
         }
     };
 
+    let _disableHighlightOnCursor = false;
+
+    /**
+     * If tur, it will disable highlights in live preview on cursor movement in editor
+     * @param {boolean} shouldDisable
+     */
+    LiveDocument.prototype.disableHighlightOnCursorActivity = function (shouldDisable) {
+        // intentionally global. see usage for details
+        _disableHighlightOnCursor = shouldDisable;
+    };
+
     /**
      * @private
      * Handles a cursor change in our attached editor. Updates the highlight in the browser.
@@ -181,7 +192,9 @@ define(function (require, exports, module) {
         if (!this.editor) {
             return;
         }
-        this.updateHighlight();
+        if(!_disableHighlightOnCursor){
+            this.updateHighlight();
+        }
     };
 
     /**

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -342,8 +342,21 @@ define(function (require, exports, module) {
                 }
             }
         } else if (msg.clicked && msg.tagId) {
-            _tagSelectedInLivePreview(msg.tagId, msg.nodeName, msg.contentEditable, msg.allSelectors);
-            exports.trigger(EVENT_LIVE_PREVIEW_CLICKED, msg);
+            // While previewing an html file, and if css related file is active in the editor, then clicking on the
+            // live preview, here we set the cursor position in the css file. but this will also trigger a css
+            // highlight as the cursor changes which jumps the live preview selection.
+            // We should not do reverse highlight when lp highlight is going on here.
+            const livePreviewMode = PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_MODE);
+            const editMode = (livePreviewMode === CONSTANTS.LIVE_EDIT_MODE);
+            const liveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
+            editMode && liveDoc && liveDoc.disableHighlightOnCursorActivity(true);
+            try {
+                _tagSelectedInLivePreview(msg.tagId, msg.nodeName, msg.contentEditable, msg.allSelectors);
+                exports.trigger(EVENT_LIVE_PREVIEW_CLICKED, msg);
+            } catch (e) {
+                console.error("error in tag selection", e);
+            }
+            editMode && liveDoc && liveDoc.disableHighlightOnCursorActivity(false);
         } else {
             // enrich received message with clientId
             msg.clientId = clientId;