refactor: change naming convention from node info box to info box

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -44,7 +44,7 @@ function RemoteFunctions(config = {}) {
     let _localHighlight;
     let _hoverHighlight;
     let _clickHighlight;
-    let _nodeInfoBox;
+    let _infoBox;
     let _nodeMoreOptionsBox;
     let _moreOptionsDropdown;
     let _setup = false;
@@ -479,9 +479,9 @@ function RemoteFunctions(config = {}) {
                     return false;
                 }
             }
-        } else if (boxType === 'options-box' && _nodeInfoBox) {
-            const infoBoxElement = _nodeInfoBox._shadow &&
-                _nodeInfoBox._shadow.querySelector('.phoenix-node-info-box');
+        } else if (boxType === 'options-box' && _infoBox) {
+            const infoBoxElement = _infoBox._shadow &&
+                _infoBox._shadow.querySelector('.phoenix-info-box');
             if (infoBoxElement) {
                 const infoBoxBounds = infoBoxElement.getBoundingClientRect();
                 const infoBoxRect = _coordsToRect(
@@ -515,7 +515,7 @@ function RemoteFunctions(config = {}) {
         const fallbackPos = { leftPos: -1000, topPos: -1000 };
 
         // Get the box element to determine dimensions
-        const boxSelector = boxType === 'info-box' ? '.phoenix-node-info-box' : '.phoenix-more-options-box';
+        const boxSelector = boxType === 'info-box' ? '.phoenix-info-box' : '.phoenix-more-options-box';
         const boxElement = boxInstance._shadow &&
             boxInstance._shadow.querySelector(boxSelector);
 
@@ -884,14 +884,14 @@ function RemoteFunctions(config = {}) {
         }
     };
 
-    // Node info box to display DOM node ID and classes on hover
-    function NodeInfoBox(element) {
+    // Info box to display DOM element ID and classes on hover
+    function InfoBox(element) {
         this.element = element;
         this.remove = this.remove.bind(this);
         this.create();
     }
 
-    NodeInfoBox.prototype = {
+    InfoBox.prototype = {
         _style: function() {
             this.body = window.document.createElement("div");
             this.body.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
@@ -961,7 +961,7 @@ function RemoteFunctions(config = {}) {
                         --info-box-bg-color: ${bgColor};
                     }
                 </style>
-                <div class="phoenix-node-info-box">${content}</div>
+                <div class="phoenix-info-box">${content}</div>
             `;
             this._shadow = shadow;
         },
@@ -981,7 +981,7 @@ function RemoteFunctions(config = {}) {
 
             // initially when we append the box the body, we position it by -1000px on top as well as left
             // and then once its added to the body then we reposition it to the actual place
-            const boxElement = this._shadow.querySelector('.phoenix-node-info-box');
+            const boxElement = this._shadow.querySelector('.phoenix-info-box');
             if (boxElement) {
                 const boxPos = _calcBoxPosition(this.element, 'info-box', this);
                 boxElement.style.left = boxPos.leftPos + 'px';
@@ -1378,8 +1378,8 @@ function RemoteFunctions(config = {}) {
             _hoverHighlight.add(element, false);
 
             // Create info box for the hovered element
-            dismissNodeInfoBox();
-            _nodeInfoBox = new NodeInfoBox(element);
+            dismissInfoBox();
+            _infoBox = new InfoBox(element);
         }
     }
 
@@ -1393,7 +1393,7 @@ function RemoteFunctions(config = {}) {
             if (_hoverHighlight && shouldShowHighlightOnHover()) {
                 _hoverHighlight.clear();
                 clearElementBackground(element);
-                dismissNodeInfoBox();
+                dismissInfoBox();
             }
         }
     }
@@ -1420,7 +1420,7 @@ function RemoteFunctions(config = {}) {
     function selectElement(element) {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
-        dismissNodeInfoBox();
+        dismissInfoBox();
         cleanupPreviousElementState();
 
         // this should also be there when users are in highlight mode
@@ -1446,7 +1446,7 @@ function RemoteFunctions(config = {}) {
                 _nodeMoreOptionsBox = new NodeMoreOptionsBox(element);
             }
             // Always show info box for inspectable elements
-            _nodeInfoBox = new NodeInfoBox(element);
+            _infoBox = new InfoBox(element);
 
             // Notify handlers about element selection
             getAllNodeMoreOptionsHandlers().forEach(handler => {
@@ -1631,10 +1631,10 @@ function RemoteFunctions(config = {}) {
             _nodeMoreOptionsBox = new NodeMoreOptionsBox(element);
         }
 
-        if (_nodeInfoBox) {
-            const element = _nodeInfoBox.element;
-            _nodeInfoBox.remove();
-            _nodeInfoBox = new NodeInfoBox(element);
+        if (_infoBox) {
+            const element = _infoBox.element;
+            _infoBox.remove();
+            _infoBox = new InfoBox(element);
         }
     }
 
@@ -1684,33 +1684,33 @@ function RemoteFunctions(config = {}) {
 
                     // 4 is just for pixelated differences
                     if (Math.abs(calcNewDifference - prevDifference) > 4) {
-                        dismissNodeInfoBox();
+                        dismissInfoBox();
                         dismissNodeMoreOptionsBox();
                         cleanupPreviousElementState();
                     }
                 }
             }
-        } else if (_nodeInfoBox && _nodeInfoBox.element && _nodeInfoBox._shadow) {
+        } else if (_infoBox && _infoBox.element && _infoBox._shadow) {
             // if more options box didn't exist, we check with info box (logic is same)
-            const infoBoxElement = _nodeInfoBox._shadow.querySelector('.phoenix-node-info-box');
+            const infoBoxElement = _infoBox._shadow.querySelector('.phoenix-info-box');
             if (infoBoxElement) {
                 // here just we make sure that the element is same
-                if(!_nodeInfoBox._prevElement) {
-                    _nodeInfoBox._prevElement = _nodeInfoBox.element;
-                } else if(_nodeInfoBox._prevElement !== _nodeInfoBox.element) {
+                if(!_infoBox._prevElement) {
+                    _infoBox._prevElement = _infoBox.element;
+                } else if(_infoBox._prevElement !== _infoBox.element) {
                     return;
                 } else {
                     const infoBoxBounds = infoBoxElement.getBoundingClientRect();
-                    const elementBounds = _nodeInfoBox.element.getBoundingClientRect();
+                    const elementBounds = _infoBox.element.getBoundingClientRect();
 
-                    if(!_nodeInfoBox._possDifference) {
-                        _nodeInfoBox._possDifference = infoBoxBounds.top - elementBounds.top;
+                    if(!_infoBox._possDifference) {
+                        _infoBox._possDifference = infoBoxBounds.top - elementBounds.top;
                     } else {
                         const calcNewDifference = infoBoxBounds.top - elementBounds.top;
-                        const prevDifference = _nodeInfoBox._possDifference;
+                        const prevDifference = _infoBox._possDifference;
 
                         if (Math.abs(calcNewDifference - prevDifference) > 4) {
-                            dismissNodeInfoBox();
+                            dismissInfoBox();
                             dismissNodeMoreOptionsBox();
                             cleanupPreviousElementState();
                         }
@@ -2109,12 +2109,12 @@ function RemoteFunctions(config = {}) {
     }
 
     /**
-     * Helper function to dismiss NodeInfoBox if it exists
+     * Helper function to dismiss InfoBox if it exists
      */
-    function dismissNodeInfoBox() {
-        if (_nodeInfoBox) {
-            _nodeInfoBox.remove();
-            _nodeInfoBox = null;
+    function dismissInfoBox() {
+        if (_infoBox) {
+            _infoBox.remove();
+            _infoBox = null;
         }
     }
 
@@ -2124,7 +2124,7 @@ function RemoteFunctions(config = {}) {
     function dismissAllUIBoxes() {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
-        dismissNodeInfoBox();
+        dismissInfoBox();
         getAllNodeMoreOptionsHandlers().forEach(handler => (handler.dismiss && handler.dismiss()));
     }
 

src/extensionsIntegrated/phoenix-pro/browser-css/info-box.css

@@ -2,7 +2,7 @@
     all: initial !important;
 }
 
-.phoenix-node-info-box {
+.phoenix-info-box {
     background-color: var(--info-box-bg-color) !important;
     color: white !important;
     border-radius: 3px !important;

src/extensionsIntegrated/phoenix-pro/remote-styles.js

@@ -8,7 +8,7 @@ define(function (require, exports, module) {
     const optionsBoxStyles = require("text!./browser-css/options-box.css");
     // this is the more options dropdown that comes up when clicking the ... icon in the option box.
     const optionsBoxDropdownStyles = require("text!./browser-css/more-options-dropdown.css");
-    // this is the info box about the div that shows the element tyle(like div/image etc), css class, dimensions, etc..
+    // this is the info box that shows the element type (like div/image etc), css class, dimensions, etc.
     const infoBoxStyles = require("text!./browser-css/info-box.css");
     // this is the rulers and guidelines feature
     const rulerStyles = require("text!./browser-css/rulers.css");

src/extensionsIntegrated/phoenix-pro/unit-tests/LivePreviewEdit-test.js

@@ -268,7 +268,7 @@ define(function (require, exports, module) {
                     const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
                     let hasInfoBox = false;
                     shadowHosts.forEach(host => {
-                        if (host.shadowRoot && host.shadowRoot.innerHTML.includes('phoenix-node-info-box')) {
+                        if (host.shadowRoot && host.shadowRoot.innerHTML.includes('phoenix-info-box')) {
                             hasInfoBox = true;
                         }
                     });
@@ -311,7 +311,7 @@ define(function (require, exports, module) {
                         const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
                         for (const host of shadowHosts) {
                             const shadow = host.shadowRoot;
-                            const el = shadow.querySelector('.phoenix-node-info-box');
+                            const el = shadow.querySelector('.phoenix-info-box');
                             const el2 = shadow.querySelector('.phoenix-more-options-box');
                             if (!el && !el2) {
                                 return true;