fix: live preview edit working unexpectedly on popped out live previews

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3894,6 +3894,9 @@ function RemoteFunctions(config = {}) {
 
     function enableHoverListeners() {
         if (config.isProUser && (config.highlight || shouldShowHighlightOnHover())) {
+            window.document.removeEventListener("mouseover", onElementHover);
+            window.document.removeEventListener("mouseout", onElementHoverOut);
+
             window.document.addEventListener("mouseover", onElementHover);
             window.document.addEventListener("mouseout", onElementHoverOut);
         }
@@ -4693,6 +4696,37 @@ function RemoteFunctions(config = {}) {
         cleanupPreviousElementState();
     }
 
+    /**
+     * this is a hard reset function, it resets every live preview edit thing, whether it be UI boxes
+     * highlighting, any timers or anything
+     */
+    function resetState() {
+        _stopAutoScroll();
+
+        if (_hoverHighlight) {
+            _hoverHighlight.clear();
+            _hoverHighlight = null;
+        }
+        if (_clickHighlight) {
+            _clickHighlight.clear();
+            _clickHighlight = null;
+        }
+
+        dismissUIAndCleanupState();
+
+        const allElements = window.document.querySelectorAll("[data-brackets-id]");
+        for (let i = 0; i < allElements.length; i++) {
+            if (allElements[i]._originalBackgroundColor !== undefined) {
+                clearElementBackground(allElements[i]);
+            }
+        }
+
+        if (config.isProUser) {
+            _hoverHighlight = new Highlight("#c8f9c5", true);
+            _clickHighlight = new Highlight("#cfc", true);
+        }
+    }
+
 
     /**
      * This function is responsible to move the cursor to the end of the text content when we start editing
@@ -4816,6 +4850,16 @@ function RemoteFunctions(config = {}) {
     _editHandler = new DOMEditHandler(window.document);
 
     function registerHandlers() {
+        // clear previous highlighting
+        if (_hoverHighlight) {
+            _hoverHighlight.clear();
+            _hoverHighlight = null;
+        }
+        if (_clickHighlight) {
+            _clickHighlight.clear();
+            _clickHighlight = null;
+        }
+
         // Always remove existing listeners first to avoid duplicates
         window.document.removeEventListener("mouseover", onElementHover);
         window.document.removeEventListener("mouseout", onElementHoverOut);
@@ -4862,6 +4906,7 @@ function RemoteFunctions(config = {}) {
         "finishEditing"         : finishEditing,
         "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
+        "resetState"            : resetState,
         "enableHoverListeners" : enableHoverListeners,
         "registerHandlers" : registerHandlers,
         "handleDownloadEvent" : handleDownloadEvent

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -435,6 +435,7 @@ define(function (require, exports, module) {
                             const urlString = `${url.origin}${url.pathname}`;
                             if (_liveDocument &&  urlString === _resolveUrl(_liveDocument.doc.file.fullPath)) {
                                 _setStatus(STATUS_ACTIVE);
+                                resetLPEditState();
                             }
                         }
                         Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "connect",
@@ -737,6 +738,17 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * this function is to completely reset the live preview edit
+     * its done so that when live preview is opened/popped out, we can re-update the config so that
+     * there are no stale markers and edit works perfectly
+     */
+    function resetLPEditState() {
+        if (_protocol) {
+            _protocol.evaluate("_LD.resetState()");
+        }
+    }
+
     /**
      * Originally unload and reload agents. It doesn't apply for this new implementation.
      * @return {jQuery.Promise} Already resolved promise.