fix: consecutive info box editing doesn’t work as data brackets id gets stale

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1114,8 +1114,67 @@ function RemoteFunctions(config = {}) {
                 redrawEverything();
             }
         } else {
-            // Suppression is active - re-apply outline since attrChange may have wiped it
-            if (previouslySelectedElement && previouslySelectedElement.isConnected) {
+            // Suppression is active (e.g., control box initiated a source edit)
+            if (previouslySelectedElement && !previouslySelectedElement.isConnected) {
+                let freshElement = null;
+
+                // Strategy 1: Tree path (most reliable — works even with duplicate
+                // text content and tag changes). Stored when suppression was activated.
+                if (SHARED_STATE._suppressedElementPath) {
+                    freshElement = _getElementByTreePath(SHARED_STATE._suppressedElementPath);
+                }
+
+                // Strategy 2: brackets-id (works when IDs are preserved)
+                if (!freshElement) {
+                    const bracketsId = previouslySelectedElement.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
+                    if (bracketsId) {
+                        freshElement = document.querySelector(
+                            '[' + GLOBALS.DATA_BRACKETS_ID_ATTR + '="' + bracketsId + '"]'
+                        );
+                    }
+                }
+
+                // Strategy 3: Text + tag match (fallback — search reverse for deepest match)
+                if (!freshElement) {
+                    const oldText = previouslySelectedElement.textContent;
+                    const oldTag = previouslySelectedElement.tagName;
+                    let candidates = document.querySelectorAll(
+                        oldTag.toLowerCase() + '[' + GLOBALS.DATA_BRACKETS_ID_ATTR + ']'
+                    );
+                    for (let i = candidates.length - 1; i >= 0; i--) {
+                        if (candidates[i].textContent === oldText) {
+                            freshElement = candidates[i];
+                            break;
+                        }
+                    }
+                    // Broaden if tag changed (e.g. h2→footer)
+                    if (!freshElement) {
+                        candidates = document.querySelectorAll('[' + GLOBALS.DATA_BRACKETS_ID_ATTR + ']');
+                        for (let i = candidates.length - 1; i >= 0; i--) {
+                            if (candidates[i].textContent === oldText) {
+                                freshElement = candidates[i];
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                if (freshElement) {
+                    freshElement._originalOutline = freshElement.style.outline;
+                    const isEditable = freshElement.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
+                    const outlineColor = isEditable
+                        ? COLORS.outlineEditable : COLORS.outlineNonEditable;
+                    freshElement.style.outline = `1px solid ${outlineColor}`;
+                    if (_clickHighlight) {
+                        _clickHighlight.clear();
+                        _clickHighlight.add(freshElement);
+                    }
+                    previouslySelectedElement = freshElement;
+                    window.__current_ph_lp_selected = freshElement;
+                    redrawEverything();
+                }
+            } else if (previouslySelectedElement && previouslySelectedElement.isConnected) {
+                // Re-apply outline since attrChange may have wiped it
                 const isEditable = previouslySelectedElement.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
                 const outlineColor = isEditable ? COLORS.outlineEditable : COLORS.outlineNonEditable;
                 previouslySelectedElement.style.outline = `1px solid ${outlineColor}`;
@@ -1216,6 +1275,43 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    /**
+     * Compute the tree path of an element as an array of child indices
+     * from <html> down. Used to re-locate the element after re-instrumentation
+     * when data-brackets-id changes and text matching is ambiguous.
+     * E.g. [1, 0, 0, 1] means html > 2nd child > 1st child > 1st child > 2nd child.
+     */
+    function _getTreePath(element) {
+        const path = [];
+        let el = element;
+        while (el && el.parentElement) {
+            const parent = el.parentElement;
+            const children = parent.children;
+            for (let i = 0; i < children.length; i++) {
+                if (children[i] === el) {
+                    path.unshift(i);
+                    break;
+                }
+            }
+            el = parent;
+        }
+        return path;
+    }
+
+    /**
+     * Find an element by its tree path (array of child indices from <html>).
+     */
+    function _getElementByTreePath(path) {
+        let el = document.documentElement;
+        for (let i = 0; i < path.length; i++) {
+            if (!el || !el.children || !el.children[path[i]]) {
+                return null;
+            }
+            el = el.children[path[i]];
+        }
+        return el;
+    }
+
     /**
      * Temporarily suppress the DOM edit dismissal check in apply()
      * Used when source is modified from UI panels to prevent
@@ -1228,9 +1324,14 @@ function RemoteFunctions(config = {}) {
             clearTimeout(SHARED_STATE._suppressDOMEditDismissalTimeout);
         }
         SHARED_STATE._suppressDOMEditDismissal = true;
+        // Store the tree path while the element is still connected
+        if (previouslySelectedElement && previouslySelectedElement.isConnected) {
+            SHARED_STATE._suppressedElementPath = _getTreePath(previouslySelectedElement);
+        }
         SHARED_STATE._suppressDOMEditDismissalTimeout = setTimeout(function() {
             SHARED_STATE._suppressDOMEditDismissal = false;
             SHARED_STATE._suppressDOMEditDismissalTimeout = null;
+            SHARED_STATE._suppressedElementPath = null;
         }, durationMs);
     }
 

src/nls/root/strings.js

@@ -347,6 +347,33 @@ define({
     "LIVE_DEV_CB_LIST_UPPER_ROMAN": "Upper Roman",
     "LIVE_DEV_CB_LIST_OUTSIDE": "Outside",
     "LIVE_DEV_CB_LIST_INSIDE": "Inside",
+    "LIVE_DEV_CB_TITLE_SPACING_BOX": "Spacing",
+    "LIVE_DEV_CB_TIP_SPACING": "Margin & Padding",
+    "LIVE_DEV_CB_LABEL_MARGIN": "Margin",
+    "LIVE_DEV_CB_LABEL_PADDING": "Padding",
+    "LIVE_DEV_CB_LABEL_BORDER_TOP": "Top",
+    "LIVE_DEV_CB_LABEL_BORDER_RIGHT": "Right",
+    "LIVE_DEV_CB_LABEL_BORDER_BOTTOM": "Bottom",
+    "LIVE_DEV_CB_LABEL_BORDER_LEFT": "Left",
+    "LIVE_DEV_CB_LABEL_BORDER_TL": "TL",
+    "LIVE_DEV_CB_LABEL_BORDER_TR": "TR",
+    "LIVE_DEV_CB_LABEL_BORDER_BR": "BR",
+    "LIVE_DEV_CB_LABEL_BORDER_BL": "BL",
+    "LIVE_DEV_CB_PER_SIDE": "Per side",
+    "LIVE_DEV_CB_PER_CORNER": "Per corner",
+    "LIVE_DEV_CB_SHADOW_ADD": "Add Shadow",
+    "LIVE_DEV_CB_SHADOW_INSET": "Inset",
+    "LIVE_DEV_CB_LABEL_COLUMNS": "Columns",
+    "LIVE_DEV_CB_LABEL_ROWS": "Rows",
+    "LIVE_DEV_CB_LABEL_JUSTIFY_ITEMS": "Justify",
+    "LIVE_DEV_CB_LABEL_ALIGN_ITEMS": "Align",
+    "LIVE_DEV_CB_LABEL_ROW_GAP": "Row Gap",
+    "LIVE_DEV_CB_LABEL_COL_GAP": "Col Gap",
+    "LIVE_DEV_CB_WEIGHT_EXTRA_LIGHT": "Extra Light",
+    "LIVE_DEV_CB_WEIGHT_LIGHT": "Light",
+    "LIVE_DEV_CB_WEIGHT_MEDIUM": "Medium",
+    "LIVE_DEV_CB_WEIGHT_SEMI_BOLD": "Semi Bold",
+    "LIVE_DEV_CB_WEIGHT_EXTRA_BOLD": "Extra Bold",
     "LIVE_DEV_TOAST_NOT_EDITABLE": "Element not editable - generated by script",
     "LIVE_DEV_COPY_TOAST_MESSAGE": "Element copied. Use 'Paste' to add it after the selected element",
     "LIVE_DEV_TOAST_FIXED_ELEMENT_DISMISSED": "Element doesn't scroll with page - edit boxes hidden",