feat: show drop marker label with tag class id names

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -48,6 +48,7 @@ function RemoteFunctions(config = {}) {
         DROP_MARKER_VERTICAL_CLASSNAME: "__brackets-drop-marker-vertical",
         DROP_MARKER_INSIDE_CLASSNAME: "__brackets-drop-marker-inside",
         DROP_MARKER_ARROW_CLASSNAME: "__brackets-drop-marker-arrow",
+        DROP_MARKER_LABEL_CLASSNAME: "__brackets-drop-marker-label",
 
         // image ribbon gallery cache, to store the last query and its results
         CACHE_EXPIRY_TIME: 168 * 60 * 60 * 1000, // 7 days
@@ -927,6 +928,90 @@ function RemoteFunctions(config = {}) {
         return clientY < rect.top + rect.height / 2 ? "before" : "after";
     }
 
+    /**
+     * this function creates the HTML content for the drop target label
+     *
+     * @param {DOMElement} element - The target element
+     * @returns {String} - HTML string with tag, ID, and classes
+     */
+    function _createLabelContent(element) {
+        const tagName = element.tagName.toLowerCase();
+        const id = element.id.trim();
+        const classList = Array.from(element.classList || []);
+
+        let content = `<strong>${tagName}</strong>`;
+
+        if (id) {
+            // for ids we have a max char limit of 15
+            if (id.length >= 15) {
+                content += `#${id.substring(0, 15)}...`;
+            } else {
+                content += `#${id}`;
+            }
+        }
+
+        if (classList.length > 0) {
+            // max 3 classes
+            let classStr = classList.slice(0, 3).join('.');
+
+            // max char limit (30 chars for all 3 classes)
+            if (classStr.length > 30) {
+                classStr = classStr.substring(0, 27) + '...';
+            }
+
+            content += `.<em>${classStr}</em>`;
+        }
+
+        return content;
+    }
+
+    /**
+     * create the drop target label box
+     * this box will be shown at the side of the arrow marker
+     * it will show the tagname, class name and id name of the dropped target
+     *
+     * @param {DOMElement} element - The target element
+     * @param {DOMElement} arrow - The arrow marker element
+     * @returns {DOMElement} - The label element
+     */
+    function _createDropLabel(element, arrow) {
+        const label = window.document.createElement('div');
+        label.className = GLOBALS.DROP_MARKER_LABEL_CLASSNAME;
+        label.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, 'true');
+        label.innerHTML = _createLabelContent(element);
+
+        label.style.position = 'fixed';
+        label.style.zIndex = '2147483647';
+        label.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+        label.style.color = 'white';
+        label.style.padding = '4px 8px';
+        label.style.borderRadius = '3px';
+        label.style.fontSize = '11px';
+        label.style.fontFamily = 'monospace';
+        label.style.whiteSpace = 'nowrap';
+        label.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.3)';
+        label.style.pointerEvents = 'none';
+
+        // append temporarily for dimensions calculations
+        window.document.body.appendChild(label);
+        const labelRect = label.getBoundingClientRect();
+        const arrowRect = arrow.getBoundingClientRect();
+
+        // default position: 10px to the right of arrow, vertically centered
+        let labelLeft = arrowRect.right + 10;
+        const labelTop = arrowRect.top + (arrowRect.height / 2) - (labelRect.height / 2);
+
+        // if right side overflows, we switch to the left side
+        if (labelLeft + labelRect.width > window.innerWidth) {
+            labelLeft = arrowRect.left - labelRect.width - 10;
+        }
+
+        label.style.left = labelLeft + 'px';
+        label.style.top = labelTop + 'px';
+
+        return label;
+    }
+
     /**
      * this is to create a marker to indicate a valid drop position
      *
@@ -1036,6 +1121,10 @@ function RemoteFunctions(config = {}) {
         element._dropArrow = arrow; // store arrow reference too
         window.document.body.appendChild(marker);
         window.document.body.appendChild(arrow);
+
+        // create and append the drop target label
+        const label = _createDropLabel(element, arrow);
+        element._dropLabel = label;
     }
 
     /**
@@ -1051,6 +1140,10 @@ function RemoteFunctions(config = {}) {
             element._dropArrow.parentNode.removeChild(element._dropArrow);
             delete element._dropArrow;
         }
+        if (element._dropLabel && element._dropLabel.parentNode) {
+            element._dropLabel.parentNode.removeChild(element._dropLabel);
+            delete element._dropLabel;
+        }
     }
 
     /**
@@ -1062,6 +1155,7 @@ function RemoteFunctions(config = {}) {
         let verticalMarkers = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_VERTICAL_CLASSNAME);
         let insideMarkers = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_INSIDE_CLASSNAME);
         let arrows = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_ARROW_CLASSNAME);
+        let labels = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_LABEL_CLASSNAME);
 
         for (let i = 0; i < horizontalMarkers.length; i++) {
             if (horizontalMarkers[i].parentNode) {
@@ -1087,11 +1181,18 @@ function RemoteFunctions(config = {}) {
             }
         }
 
+        for (let i = 0; i < labels.length; i++) {
+            if (labels[i].parentNode) {
+                labels[i].parentNode.removeChild(labels[i]);
+            }
+        }
+
         // Also clear any element references
         let elements = window.document.querySelectorAll(`[${GLOBALS.DATA_BRACKETS_ID_ATTR}]`);
         for (let j = 0; j < elements.length; j++) {
             delete elements[j]._dropMarker;
             delete elements[j]._dropArrow;
+            delete elements[j]._dropLabel;
             // only restore the styles that were modified by drag operations
             if (elements[j]._originalDragBackgroundColor !== undefined) {
                 elements[j].style.backgroundColor = elements[j]._originalDragBackgroundColor;