fix: boxes positioning broke as they were not cleared when an element is clicked

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -46,8 +46,8 @@ function RemoteFunctions(config = {}) {
     // events happen
     const allowedHandlerFns = [
         "dismiss", // when handler gets this event, it should dismiss all ui it renders in the live preview
-        "createInfoBox",
         "createToolBox",
+        "createInfoBox",
         "createMoreOptionsDropdown",
         // render an icon or html when the selected element toolbox appears in edit mode.
         "renderToolBoxItem",
@@ -688,7 +688,7 @@ function RemoteFunctions(config = {}) {
      * @param {Element} element - The DOM element to select
      */
     function selectElement(element) {
-        cleanupPreviousElementState();
+        dismissUIAndCleanupState();
         // this should also be there when users are in highlight mode
         scrollElementToViewPort(element);
 

src/extensionsIntegrated/phoenix-pro/browser-context/info-box.js

@@ -113,6 +113,7 @@ InfoBox.prototype = {
         if (this.body && this.body.parentNode && this.body.parentNode === window.document.body) {
             window.document.body.removeChild(this.body);
             this.body = null;
+            SHARED_STATE._infoBox = null;
         }
     }
 };

src/extensionsIntegrated/phoenix-pro/main.js

@@ -17,8 +17,8 @@ define(function (require, exports, module) {
     }
 
     const HelperCode = require("text!./browser-context/helper.js");
-    const InfoBoxCode = require("text!./browser-context/info-box.js");
     const ToolBoxCode = require("text!./browser-context/tool-box.js");
+    const InfoBoxCode = require("text!./browser-context/info-box.js");
     const MoreOptionsDropdownCode = require("text!./browser-context/more-options-dropdown.js");
     const TextEditCode = require("text!./browser-context/text-edit.js");
     const HyperlinkEditorCode = require("text!./browser-context/hyperlink-editor.js");
@@ -27,8 +27,8 @@ define(function (require, exports, module) {
     const RulerLinesCode = require("text!./browser-context/ruler-lines.js");
     const DragAndDropCode = require("text!./browser-context/dragAndDrop.js");
     const HotCornersCode = require("text!./browser-context/hot-corners.js");
-    const GenericToolsCode = require("text!./browser-context/generic-tools.js");
     const ToastMessageCode = require("text!./browser-context/toast-message.js");
+    const GenericToolsCode = require("text!./browser-context/generic-tools.js");
 
     function _addRemoteScripts() {
         // the ordering here is important
@@ -44,8 +44,8 @@ define(function (require, exports, module) {
 
         // functions start here
         RemoteScriptProvider.addRemoteFunctionScript("HelperCode", HelperCode);
-        RemoteScriptProvider.addRemoteFunctionScript("InfoBoxCode", InfoBoxCode);
         RemoteScriptProvider.addRemoteFunctionScript("ToolBoxCode", ToolBoxCode);
+        RemoteScriptProvider.addRemoteFunctionScript("InfoBoxCode", InfoBoxCode);
         RemoteScriptProvider.addRemoteFunctionScript("MoreOptionsDropdownCode", MoreOptionsDropdownCode);
         RemoteScriptProvider.addRemoteFunctionScript("TextEditCode", TextEditCode);
         RemoteScriptProvider.addRemoteFunctionScript("HyperlinkEditorCode", HyperlinkEditorCode);