fix: ruler lines appearing even for invisible elements

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3464,14 +3464,7 @@ function RemoteFunctions(config = {}) {
      */
     function RulerLines(element) {
         this.element = element;
-
-        const editable = element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
-        this.color = editable
-            ? "rgba(66, 133, 244, 0.4)"
-            : "rgba(60, 63, 65, 0.8)";
-        this.labelColor = editable
-            ? "rgba(66, 133, 244, 1)"
-            : "rgba(60, 63, 65, 1)";
+        this.editable = element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
 
         this.sides = ["left", "right", "top", "bottom"];
         this.lineElements = {};
@@ -3483,45 +3476,43 @@ function RemoteFunctions(config = {}) {
 
     RulerLines.prototype = {
         create: function() {
-            const body = document.body;
-
-            const makeDiv = () => {
-                const el = document.createElement("div");
-                el.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
-                return el;
-            };
+            this.container = window.document.createElement("div");
+            this.container.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
 
-            const styleLine = (el) => {
-                el.style.position = "absolute";
-                el.style.backgroundColor = this.color;
-                el.style.pointerEvents = "none";
-                el.style.zIndex = "2147483645";
-            };
+            const shadow = this.container.attachShadow({ mode: "open" });
+            this._shadow = shadow;
 
-            const styleLabel = (el) => {
-                el.style.position = "absolute";
-                el.style.color = this.labelColor;
-                el.style.fontSize = "9px";
-                el.style.fontFamily = "Arial, sans-serif";
-                el.style.pointerEvents = "none";
-                el.style.zIndex = "2147483646";
-                el.style.whiteSpace = "nowrap";
-                el.style.backgroundColor = "transparent";
-            };
+            const lineClass = this.editable ? "phoenix-ruler-line-editable" : "phoenix-ruler-line-non-editable";
+            const labelClass = this.editable ? "phoenix-ruler-label-editable" : "phoenix-ruler-label-non-editable";
 
+            let html = "";
             for (const side of this.sides) {
-                const line = makeDiv();
-                const label = makeDiv();
-
-                styleLine(line);
-                styleLabel(label);
+                html += `<div class="phoenix-ruler-line ${lineClass}" data-side="${side}"></div>`;
+                html += `<div class="phoenix-ruler-label ${labelClass}" data-side="${side}"></div>`;
+            }
 
-                this.lineElements[side] = line;
-                this.labelElements[side] = label;
+            shadow.innerHTML = `
+                            <style>
+                                ${config.styles.ruler}
+                            </style>
+                            ${html}
+                        `;
+
+            window.document.body.appendChild(this.container);
+
+            this.lineElements = {
+                left: shadow.querySelector('.phoenix-ruler-line[data-side="left"]'),
+                right: shadow.querySelector('.phoenix-ruler-line[data-side="right"]'),
+                top: shadow.querySelector('.phoenix-ruler-line[data-side="top"]'),
+                bottom: shadow.querySelector('.phoenix-ruler-line[data-side="bottom"]')
+            };
 
-                body.appendChild(line);
-                body.appendChild(label);
-            }
+            this.labelElements = {
+                left: shadow.querySelector('.phoenix-ruler-label[data-side="left"]'),
+                right: shadow.querySelector('.phoenix-ruler-label[data-side="right"]'),
+                top: shadow.querySelector('.phoenix-ruler-label[data-side="top"]'),
+                bottom: shadow.querySelector('.phoenix-ruler-label[data-side="bottom"]')
+            };
         },
 
         update: function() {
@@ -3610,16 +3601,12 @@ function RemoteFunctions(config = {}) {
         },
 
         remove: function() {
-            const body = document.body;
-
-            for (const side of this.sides) {
-                const line = this.lineElements[side];
-                const label = this.labelElements[side];
-
-                if (line && line.parentNode) { body.removeChild(line); }
-                if (label && label.parentNode) { body.removeChild(label); }
+            if (this.container && this.container.parentNode) {
+                window.document.body.removeChild(this.container);
             }
 
+            this.container = null;
+            this._shadow = null;
             this.lineElements = {};
             this.labelElements = {};
         }
@@ -3875,6 +3862,11 @@ function RemoteFunctions(config = {}) {
             }
             // Always show info box for inspectable elements
             _nodeInfoBox = new NodeInfoBox(element);
+
+            // show ruler lines (only when enabled)
+            if (config.showRulerLines) {
+                _currentRulerLines = new RulerLines(element);
+            }
         } else {
             // Element is hidden, so don't show UI boxes but still apply visual styling
             _nodeMoreOptionsBox = null;
@@ -3897,11 +3889,6 @@ function RemoteFunctions(config = {}) {
             _hoverHighlight.add(element, true);
         }
 
-        // to show ruler lines (only when its enabled)
-        if (config.showRulerLines) {
-            _currentRulerLines = new RulerLines(element);
-        }
-
         previouslyClickedElement = element;
     }
 

src/LiveDevelopment/RemoteHelper.js

@@ -404,6 +404,44 @@ define(function (require, exports, module) {
                 }
             `;
 
+    const rulerStyles = `
+                :host {
+                    all: initial !important;
+                }
+
+                .phoenix-ruler-line {
+                    position: absolute !important;
+                    pointer-events: none !important;
+                    z-index: 2147483645 !important;
+                }
+
+                .phoenix-ruler-line-editable {
+                    background-color: rgba(66, 133, 244, 0.4) !important;
+                }
+
+                .phoenix-ruler-line-non-editable {
+                    background-color: rgba(60, 63, 65, 0.8) !important;
+                }
+
+                .phoenix-ruler-label {
+                    position: absolute !important;
+                    font-size: 9px !important;
+                    font-family: Arial, sans-serif !important;
+                    pointer-events: none !important;
+                    z-index: 2147483646 !important;
+                    white-space: nowrap !important;
+                    background-color: transparent !important;
+                }
+
+                .phoenix-ruler-label-editable {
+                    color: rgba(66, 133, 244, 1) !important;
+                }
+
+                .phoenix-ruler-label-non-editable {
+                    color: rgba(60, 63, 65, 1) !important;
+                }
+            `;
+
     const toastMessageStyles = `
                 :host {
                     all: initial !important;
@@ -1027,7 +1065,8 @@ define(function (require, exports, module) {
         dialogOverlay: dialogOverlayStyles,
         aiPromptBox: aiPromptBoxStyles,
         imageGallery: imageGalleryStyles,
-        hyperlinkEditor: hyperlinkEditorStyles
+        hyperlinkEditor: hyperlinkEditorStyles,
+        ruler: rulerStyles
     };
 
     exports.remoteStrings = remoteStrings;