fix: element highlights setting not getting applied immediately directly

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1944,22 +1944,25 @@ function RemoteFunctions(config) {
     // init
     _editHandler = new DOMEditHandler(window.document);
 
-    if (config.isLPEditFeaturesActive) {
-        // Initialize hover highlight with Chrome-like colors
-        _hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
-
-        // Initialize click highlight with animation
-        _clickHighlight = new Highlight("#cfc", true); // Light green for click highlight
-
-        window.document.addEventListener("mouseover", onElementHover);
-        window.document.addEventListener("mouseout", onElementHoverOut);
-        window.document.addEventListener("click", onClick);
-        window.document.addEventListener("dblclick", onDoubleClick);
-        window.document.addEventListener("dragover", onDragOver);
-        window.document.addEventListener("drop", onDrop);
-        window.document.addEventListener("keydown", onKeyDown);
+    function registerHandlers() {
+        if (config.isLPEditFeaturesActive) {
+            // Initialize hover highlight with Chrome-like colors
+            _hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
+
+            // Initialize click highlight with animation
+            _clickHighlight = new Highlight("#cfc", true); // Light green for click highlight
+
+            window.document.addEventListener("mouseover", onElementHover);
+            window.document.addEventListener("mouseout", onElementHoverOut);
+            window.document.addEventListener("click", onClick);
+            window.document.addEventListener("dblclick", onDoubleClick);
+            window.document.addEventListener("dragover", onDragOver);
+            window.document.addEventListener("drop", onDrop);
+            window.document.addEventListener("keydown", onKeyDown);
+        }
     }
 
+    registerHandlers();
 
     return {
         "DOMEditHandler"        : DOMEditHandler,
@@ -1973,6 +1976,7 @@ function RemoteFunctions(config) {
         "startEditing"          : startEditing,
         "finishEditing"         : finishEditing,
         "dismissMoreOptionsBox" : dismissMoreOptionsBox,
-        "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes
+        "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
+        "registerHandlers" : registerHandlers
     };
 }

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -718,6 +718,24 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Register event handlers in the remote browser for live preview functionality
+     */
+    function registerHandlers() {
+        if (_protocol) {
+            _protocol.evaluate("_LD.registerHandlers()");
+        }
+    }
+
+    /**
+     * Update configuration in the remote browser
+     */
+    function updateConfig(configJSON) {
+        if (_protocol) {
+            _protocol.evaluate("_LD.updateConfig('" + configJSON + "')");
+        }
+    }
+
     /**
      * Originally unload and reload agents. It doesn't apply for this new implementation.
      * @return {jQuery.Promise} Already resolved promise.
@@ -786,6 +804,8 @@ define(function (require, exports, module) {
     exports.redrawHighlight     = redrawHighlight;
     exports.hasVisibleLivePreviewBoxes = hasVisibleLivePreviewBoxes;
     exports.dismissLivePreviewBoxes = dismissLivePreviewBoxes;
+    exports.registerHandlers    = registerHandlers;
+    exports.updateConfig        = updateConfig;
     exports.init                = init;
     exports.isActive            = isActive;
     exports.setLivePreviewPinned= setLivePreviewPinned;

src/LiveDevelopment/main.js

@@ -296,14 +296,18 @@ define(function main(require, exports, module) {
             .on("change", function () {
                 config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT);
                 if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-                    MultiBrowserLiveDev.agents.remote.call("updateConfig",JSON.stringify(config));
+                    MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
                 }
             });
 
         // this function is responsible to update element highlight config
         function updateElementHighlightConfig() {
             const prefValue = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
             config.elemHighlights = prefValue || "hover";
+            if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+                MultiBrowserLiveDev.registerHandlers();
+            }
         }
 
         PreferencesManager.on("change", PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, function() {
@@ -335,7 +339,7 @@ define(function main(require, exports, module) {
             config.highlight = PreferencesManager.getViewState("livedevHighlight");
             _updateHighlightCheckmark();
             if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-                MultiBrowserLiveDev.agents.remote.call("updateConfig",JSON.stringify(config));
+                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
             }
         });