fix: live preview not handling escape keypress when highlight pref is on

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1847,19 +1847,32 @@ function RemoteFunctions(config) {
         return JSON.stringify(config);
     }
 
+    /**
+     * This function checks if there are any live preview boxes currently visible
+     * @return {boolean} true if any boxes are visible, false otherwise
+     */
+    function hasVisibleLivePreviewBoxes() {
+        return _nodeMoreOptionsBox !== null || _nodeInfoBox !== null || previouslyClickedElement !== null;
+    }
+
     /**
      * This function is responsible to remove the more options box
      * we do this either when user presses the Esc key or clicks on the HTML or Body tags
+     * @return {boolean} true if any boxes were dismissed, false otherwise
      */
     function dismissMoreOptionsBox() {
+        let dismissed = false;
+
         if (_nodeMoreOptionsBox) {
             _nodeMoreOptionsBox.remove();
             _nodeMoreOptionsBox = null;
+            dismissed = true;
         }
 
         if (_nodeInfoBox) {
             _nodeInfoBox.remove();
             _nodeInfoBox = null;
+            dismissed = true;
         }
 
         if (previouslyClickedElement) {
@@ -1870,7 +1883,10 @@ function RemoteFunctions(config) {
             }
             delete previouslyClickedElement._originalOutline;
             previouslyClickedElement = null;
+            dismissed = true;
         }
+
+        return dismissed;
     }
 
     // Function to handle direct editing of elements in the live preview
@@ -2037,6 +2053,8 @@ function RemoteFunctions(config) {
         "getSimpleDOM"          : getSimpleDOM,
         "updateConfig"          : updateConfig,
         "startEditing"          : startEditing,
-        "finishEditing"         : finishEditing
+        "finishEditing"         : finishEditing,
+        "dismissMoreOptionsBox" : dismissMoreOptionsBox,
+        "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes
     };
 }

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -699,6 +699,25 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Check if live preview boxes are currently visible
+     */
+    function hasVisibleLivePreviewBoxes() {
+        if (_protocol) {
+            return _protocol.evaluate("_LD.hasVisibleLivePreviewBoxes()");
+        }
+        return false;
+    }
+
+    /**
+     * Dismiss live preview more options box and info box
+     */
+    function dismissLivePreviewBoxes() {
+        if (_protocol) {
+            _protocol.evaluate("_LD.dismissMoreOptionsBox()");
+        }
+    }
+
     /**
      * Originally unload and reload agents. It doesn't apply for this new implementation.
      * @return {jQuery.Promise} Already resolved promise.
@@ -765,6 +784,8 @@ define(function (require, exports, module) {
     exports.showHighlight       = showHighlight;
     exports.hideHighlight       = hideHighlight;
     exports.redrawHighlight     = redrawHighlight;
+    exports.hasVisibleLivePreviewBoxes = hasVisibleLivePreviewBoxes;
+    exports.dismissLivePreviewBoxes = dismissLivePreviewBoxes;
     exports.init                = init;
     exports.isActive            = isActive;
     exports.setLivePreviewPinned= setLivePreviewPinned;

src/LiveDevelopment/main.js

@@ -42,7 +42,8 @@ define(function main(require, exports, module) {
         Strings             = require("strings"),
         ExtensionUtils      = require("utils/ExtensionUtils"),
         StringUtils         = require("utils/StringUtils"),
-        EventDispatcher      = require("utils/EventDispatcher");
+        EventDispatcher      = require("utils/EventDispatcher"),
+        WorkspaceManager    = require("view/WorkspaceManager");
 
     const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
 
@@ -237,6 +238,19 @@ define(function main(require, exports, module) {
         }
     }
 
+    /**
+     * this function handles escape key for live preview to hide boxes if they are visible
+     * @param {Event} event
+     */
+    function _handleLivePreviewEscapeKey(event) {
+        // we only handle the escape keypress for live preview when its active
+        if (MultiBrowserLiveDev.status === MultiBrowserLiveDev.STATUS_ACTIVE) {
+            MultiBrowserLiveDev.dismissLivePreviewBoxes();
+        }
+        // returning false to let the editor also handle the escape key
+        return false;
+    }
+
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
@@ -291,6 +305,9 @@ define(function main(require, exports, module) {
             exports.trigger(exports.EVENT_LIVE_PREVIEW_RELOAD, clientDetails);
         });
 
+        // allow live preview to handle escape key event
+        // Escape is mainly to hide boxes if they are visible
+        WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);
     });
 
     // init prefs