fix: element highlighting disappears when setting is modified

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -455,12 +455,12 @@ function RemoteFunctions(config = {}) {
                 _hoverHighlight.add(element);
             }
 
-            // create the info box for the hovered element
-            const infoBoxHandler = LivePreviewView.getToolHandler("InfoBox");
-            if (infoBoxHandler) {
-                infoBoxHandler.dismiss();
-                infoBoxHandler.createInfoBox(element);
-            }
+            // commented out for unified box redesign
+            // const infoBoxHandler = LivePreviewView.getToolHandler("InfoBox");
+            // if (infoBoxHandler) {
+            //     infoBoxHandler.dismiss();
+            //     infoBoxHandler.createInfoBox(element);
+            // }
         }
     }
 
@@ -772,23 +772,24 @@ function RemoteFunctions(config = {}) {
 
     // recreate UI boxes so that they are placed properly
     function redrawUIBoxes() {
-        if (SHARED_STATE._toolBox) {
-            const element = SHARED_STATE._toolBox.element;
-            const toolBoxHandler = LivePreviewView.getToolHandler("ToolBox");
-            if (toolBoxHandler) {
-                toolBoxHandler.dismiss();
-                toolBoxHandler.createToolBox(element);
-            }
-        }
-
-        if (SHARED_STATE._infoBox) {
-            const element = SHARED_STATE._infoBox.element;
-            const infoBoxHandler = LivePreviewView.getToolHandler("InfoBox");
-            if (infoBoxHandler) {
-                infoBoxHandler.dismiss();
-                infoBoxHandler.createInfoBox(element);
-            }
-        }
+        // commented out for unified box redesign
+        // if (SHARED_STATE._toolBox) {
+        //     const element = SHARED_STATE._toolBox.element;
+        //     const toolBoxHandler = LivePreviewView.getToolHandler("ToolBox");
+        //     if (toolBoxHandler) {
+        //         toolBoxHandler.dismiss();
+        //         toolBoxHandler.createToolBox(element);
+        //     }
+        // }
+
+        // if (SHARED_STATE._infoBox) {
+        //     const element = SHARED_STATE._infoBox.element;
+        //     const infoBoxHandler = LivePreviewView.getToolHandler("InfoBox");
+        //     if (infoBoxHandler) {
+        //         infoBoxHandler.dismiss();
+        //         infoBoxHandler.createInfoBox(element);
+        //     }
+        // }
     }
 
     // redraw active highlights
@@ -1140,7 +1141,25 @@ function RemoteFunctions(config = {}) {
             _handleConfigurationChange();
         }
 
+        // Preserve the currently selected element across re-registration
+        // so that toggling options (e.g. show measurements, show spacing handles)
+        // doesn't clear the element highlighting.
+        const selectedBeforeReregister = previouslySelectedElement;
         registerHandlers();
+        if (!isModeChanged && !highlightModeChanged && selectedBeforeReregister
+            && config.mode === 'edit') {
+            // Restore the click highlight for the previously selected element
+            if (!_clickHighlight) {
+                _clickHighlight = new Highlight(true);
+            }
+            _clickHighlight.add(selectedBeforeReregister);
+            previouslySelectedElement = selectedBeforeReregister;
+            window.__current_ph_lp_selected = selectedBeforeReregister;
+            // Restore the outline
+            const isEditable = selectedBeforeReregister.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
+            const outlineColor = isEditable ? COLORS.outlineEditable : COLORS.outlineNonEditable;
+            selectedBeforeReregister.style.outline = `1px solid ${outlineColor}`;
+        }
         return JSON.stringify(config);
     }
 

src/nls/root/strings.js

@@ -291,6 +291,22 @@ define({
     "LIVE_DEV_STYLES_QS_BOX_SHADOW": "Box Shadow",
     "LIVE_DEV_STYLES_QS_SELECTOR": "Selector",
     "LIVE_DEV_STYLES_QS_ELEMENT_STYLE": "element.style",
+    "LIVE_DEV_STYLES_QS_FLEX_WRAP": "Wrap",
+    "LIVE_DEV_STYLES_QS_FLEX_GROW": "Grow",
+    "LIVE_DEV_STYLES_QS_FLEX_SHRINK": "Shrink",
+    "LIVE_DEV_STYLES_QS_ORDER": "Order",
+    "LIVE_DEV_STYLES_QS_ALIGN_SELF": "Align Self",
+    "LIVE_DEV_STYLES_QS_JUSTIFY_SELF": "Justify Self",
+    "LIVE_DEV_STYLES_QS_GRID_TEMPLATE_COLS": "Columns",
+    "LIVE_DEV_STYLES_QS_GRID_TEMPLATE_ROWS": "Rows",
+    "LIVE_DEV_STYLES_QS_GRID_COLUMN": "Column",
+    "LIVE_DEV_STYLES_QS_GRID_ROW": "Row",
+    "LIVE_DEV_STYLES_QS_OBJECT_FIT": "Object Fit",
+    "LIVE_DEV_STYLES_QS_FLEX_BASIS": "Basis",
+    "LIVE_DEV_STYLES_QS_TOP": "Top",
+    "LIVE_DEV_STYLES_QS_RIGHT": "Right",
+    "LIVE_DEV_STYLES_QS_BOTTOM": "Bottom",
+    "LIVE_DEV_STYLES_QS_LEFT": "Left",
     "LIVE_DEV_STYLES_QS_SHOW_MORE": "Show More",
     "LIVE_DEV_STYLES_QS_SHOW_LESS": "Show Less",
     "LIVE_DEV_STYLES_TAB_QUICK": "Quick Styles",