fix: remove markers and highlights when edit mode is disabled

Author: devvaannsh

src/LiveDevelopment/main.js

@@ -391,4 +391,6 @@ define(function main(require, exports, module) {
     exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
+    exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;
+    exports.dismissLivePreviewBoxes = MultiBrowserLiveDev.dismissLivePreviewBoxes;
 });

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

@@ -96,8 +96,8 @@ define(function (require, exports, module) {
     </iframe>
     `;
 
-    let isEditModeEnabled = true;
-    let isHighlightModeEnabled = true;
+    let isEditModeEnabled = LiveDevelopment.isLPEditFeaturesActive;
+    let isHighlightModeEnabled = null; // Will be initialized later
 
     if(Phoenix.isTestWindow) {
         // for integ tests
@@ -147,6 +147,12 @@ define(function (require, exports, module) {
     function _toggleLivePreviewEditMode() {
         isEditModeEnabled = !isEditModeEnabled;
         LiveDevelopment.setLivePreviewEditFeaturesActive(isEditModeEnabled);
+
+        // clear any existing markers and highlights when edit mode is disabled
+        if (!isEditModeEnabled) {
+            LiveDevelopment.hideHighlight();
+            LiveDevelopment.dismissLivePreviewBoxes();
+        }
     }
 
     function _toggleHighlightMode() {
@@ -462,6 +468,11 @@ define(function (require, exports, module) {
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
         $modeBtn = $panel.find("#livePreviewModeBtn");
 
+        // initialize the value
+        if (isHighlightModeEnabled === null) {
+            isHighlightModeEnabled = _isLiveHighlightEnabled();
+        }
+
         $modeBtn.on("click", _showModeSelectionDropdown);
 
         $panel.find(".live-preview-settings-banner-btn").on("click", ()=>{