Layers panel performance improvements + dead code removal

docs/API-Reference/language/CSSUtils.md

@@ -33,6 +33,43 @@ value of the specified property
 url for import
 
 **Kind**: global constant  
+<a name="_RE_PAREN_SEMI"></a>
+
+## \_RE\_PAREN\_SEMI ⇒ [<code>Array.&lt;SelectorInfo&gt;</code>](#SelectorInfo)
+Extracts all CSS selectors from the given text
+Returns an array of SelectorInfo. Each SelectorInfo is an object with the following properties:
+         selector:                 the text of the selector (note: comma separated selector groups like
+                                   "h1, h2" are broken into separate selectors)
+         ruleStartLine:            line in the text where the rule (including preceding comment) appears
+         ruleStartChar:            column in the line where the rule (including preceding comment) starts
+         selectorStartLine:        line in the text where the selector appears
+         selectorStartChar:        column in the line where the selector starts
+         selectorEndLine:          line where the selector ends
+         selectorEndChar:          column where the selector ends
+         selectorGroupStartLine:   line where the comma-separated selector group (e.g. .foo, .bar, .baz)
+                                   starts that this selector (e.g. .baz) is part of. Particularly relevant for
+                                   groups that are on multiple lines.
+         selectorGroupStartChar:   column in line where the selector group starts.
+         selectorGroup:            the entire selector group containing this selector, or undefined if there
+                                   is only one selector in the rule.
+         declListStartLine:        line where the declaration list for the rule starts
+         declListStartChar:        column in line where the declaration list for the rule starts
+         declListEndLine:          line where the declaration list for the rule ends
+         declListEndChar:          column in the line where the declaration list for the rule ends
+         level:                    the level of the current selector including any containing @media block in the
+                                   nesting level count. Use this property with caution since it is primarily for internal
+                                   parsing use. For example, two sibling selectors may have different levels if one
+                                   of them is nested inside an @media block and it should not be used for sibling info.
+         parentSelectors:          all ancestor selectors separated with '/' if the current selector is a nested one
+
+**Kind**: global constant  
+**Returns**: [<code>Array.&lt;SelectorInfo&gt;</code>](#SelectorInfo) - Array with objects specifying selectors.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| text | <code>string</code> | CSS text to extract from |
+| documentMode | <code>string</code> | language mode of the document that text belongs to, default to css if undefined. |
+
 <a name="isCSSPreprocessorFile"></a>
 
 ## isCSSPreprocessorFile(filePath) ⇒ <code>boolean</code>
@@ -80,43 +117,6 @@ in info.
 | info | [<code>SelectorInfo</code>](#SelectorInfo) |  |
 | [useGroup] | <code>boolean</code> | true to append selectorGroup instead of selector |
 
-<a name="extractAllSelectors"></a>
-
-## extractAllSelectors(text, documentMode) ⇒ [<code>Array.&lt;SelectorInfo&gt;</code>](#SelectorInfo)
-Extracts all CSS selectors from the given text
-Returns an array of SelectorInfo. Each SelectorInfo is an object with the following properties:
-         selector:                 the text of the selector (note: comma separated selector groups like
-                                   "h1, h2" are broken into separate selectors)
-         ruleStartLine:            line in the text where the rule (including preceding comment) appears
-         ruleStartChar:            column in the line where the rule (including preceding comment) starts
-         selectorStartLine:        line in the text where the selector appears
-         selectorStartChar:        column in the line where the selector starts
-         selectorEndLine:          line where the selector ends
-         selectorEndChar:          column where the selector ends
-         selectorGroupStartLine:   line where the comma-separated selector group (e.g. .foo, .bar, .baz)
-                                   starts that this selector (e.g. .baz) is part of. Particularly relevant for
-                                   groups that are on multiple lines.
-         selectorGroupStartChar:   column in line where the selector group starts.
-         selectorGroup:            the entire selector group containing this selector, or undefined if there
-                                   is only one selector in the rule.
-         declListStartLine:        line where the declaration list for the rule starts
-         declListStartChar:        column in line where the declaration list for the rule starts
-         declListEndLine:          line where the declaration list for the rule ends
-         declListEndChar:          column in the line where the declaration list for the rule ends
-         level:                    the level of the current selector including any containing @media block in the
-                                   nesting level count. Use this property with caution since it is primarily for internal
-                                   parsing use. For example, two sibling selectors may have different levels if one
-                                   of them is nested inside an @media block and it should not be used for sibling info.
-         parentSelectors:          all ancestor selectors separated with '/' if the current selector is a nested one
-
-**Kind**: global function  
-**Returns**: [<code>Array.&lt;SelectorInfo&gt;</code>](#SelectorInfo) - Array with objects specifying selectors.  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| text | <code>string</code> | CSS text to extract from |
-| documentMode | <code>string</code> | language mode of the document that text belongs to, default to css if undefined. |
-
 <a name="findMatchingRules"></a>
 
 ## findMatchingRules(selector, htmlDocument) ⇒ <code>$.Promise</code>

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -138,10 +138,18 @@
          * Evaluate an expresion and return its result.
          */
         evaluate: function (msg) {
-            var result = eval(msg.params.expression);
-            MessageBroker.respond(msg, {
-                result: JSON.stringify(result) // TODO: in original protocol this is an object handle
-            });
+            // an unanswered request leaves the editor side waiting forever
+            try {
+                var result = eval(msg.params.expression);
+                MessageBroker.respond(msg, {
+                    result: JSON.stringify(result) // TODO: in original protocol this is an object handle
+                });
+            } catch (e) {
+                console.error("[Brackets LiveDev] Runtime.evaluate failed", e);
+                MessageBroker.respond(msg, {
+                    error: String(e && e.message || e)
+                });
+            }
         }
     };
 

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -450,34 +450,78 @@
         _overlayPool.push(overlay);
     }
 
-    // Update an existing overlay's position, dimensions, and colors to match the target element.
-    // No DOM elements are created or destroyed — only style properties are updated.
-    function _updateOverlay(overlay, element) {
+    // Everything an overlay needs read off the page. Split from the painting
+    // below so a batch of overlays can read first and write after: interleaving
+    // the two forces a layout per element.
+    // What screenOffset() needs off the body, read once for a whole batch
+    // instead of once per element.
+    function _bodyOffsetContext() {
+        const body = window.document.body;
+        if (window.getComputedStyle(body).position === "static") {
+            return { isStatic: true, x: window.pageXOffset, y: window.pageYOffset };
+        }
+        const bodyBounds = body.getBoundingClientRect();
+        return { isStatic: false, x: bodyBounds.left, y: bodyBounds.top };
+    }
+
+    function _offsetFromBounds(bounds, bodyOffset) {
+        if (bodyOffset.isStatic) {
+            return { left: bounds.left + bodyOffset.x, top: bounds.top + bodyOffset.y };
+        }
+        return { left: bounds.left - bodyOffset.x, top: bounds.top - bodyOffset.y };
+    }
+
+    function _measureOverlay(element, bodyOffset) {
         const bounds = element.getBoundingClientRect();
         if (bounds.width === 0 && bounds.height === 0) {
+            return null;
+        }
+        const cs = window.getComputedStyle(element);
+        return {
+            bounds: bounds,
+            scroll: _offsetFromBounds(bounds, bodyOffset || _bodyOffsetContext()),
+            bt: parseFloat(cs.borderTopWidth) || 0,
+            br: parseFloat(cs.borderRightWidth) || 0,
+            bb: parseFloat(cs.borderBottomWidth) || 0,
+            bl: parseFloat(cs.borderLeftWidth) || 0,
+            pt: parseFloat(cs.paddingTop) || 0,
+            pr: parseFloat(cs.paddingRight) || 0,
+            pb: parseFloat(cs.paddingBottom) || 0,
+            pl: parseFloat(cs.paddingLeft) || 0,
+            mt: parseFloat(cs.marginTop) || 0,
+            mr: parseFloat(cs.marginRight) || 0,
+            mb: parseFloat(cs.marginBottom) || 0,
+            ml: parseFloat(cs.marginLeft) || 0
+        };
+    }
+
+    function _measureAll(elements) {
+        const bodyOffset = _bodyOffsetContext();
+        const measured = [];
+        for (let i = 0; i < elements.length; i++) {
+            measured.push(_measureOverlay(elements[i], bodyOffset));
+        }
+        return measured;
+    }
+
+    // Update an existing overlay's position, dimensions, and colors to match the target element.
+    // No DOM elements are created or destroyed — only style properties are updated.
+    function _paintOverlay(overlay, element, measured) {
+        if (!measured) {
             overlay.classList.add('hidden');
             return;
         }
 
-        const cs = window.getComputedStyle(element);
+        const bounds = measured.bounds;
 
         // Parse box model values (getComputedStyle always resolves to px)
-        const bt = parseFloat(cs.borderTopWidth) || 0,
-            br = parseFloat(cs.borderRightWidth) || 0,
-            bb = parseFloat(cs.borderBottomWidth) || 0,
-            bl = parseFloat(cs.borderLeftWidth) || 0;
-        const pt = parseFloat(cs.paddingTop) || 0,
-            pr = parseFloat(cs.paddingRight) || 0,
-            pb = parseFloat(cs.paddingBottom) || 0,
-            pl = parseFloat(cs.paddingLeft) || 0;
-        const mt = parseFloat(cs.marginTop) || 0,
-            mr = parseFloat(cs.marginRight) || 0,
-            mb = parseFloat(cs.marginBottom) || 0,
-            ml = parseFloat(cs.marginLeft) || 0;
+        const bt = measured.bt, br = measured.br, bb = measured.bb, bl = measured.bl;
+        const pt = measured.pt, pr = measured.pr, pb = measured.pb, pl = measured.pl;
+        const mt = measured.mt, mr = measured.mr, mb = measured.mb, ml = measured.ml;
 
         // Compute the 4 absolute boxes exactly like dev tools:
         // getBoundingClientRect() always returns the border box regardless of box-sizing.
-        const scroll = LivePreviewView.screenOffset(element);
+        const scroll = measured.scroll;
         const borderBox = {
             left: scroll.left,
             top: scroll.top,
@@ -551,6 +595,10 @@
         outlineStyle.border = `1px solid ${outlineColor}`;
     }
 
+    function _updateOverlay(overlay, element) {
+        _paintOverlay(overlay, element, _measureOverlay(element));
+    }
+
     function Highlight(trigger) {
         this.trigger = !!trigger;
         this.elements = [];
@@ -573,6 +621,28 @@
             _updateOverlay(overlay, element);
         },
 
+        addAll: function (elements) {
+            const seen = new Set(this.elements);
+            const fresh = [];
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+                if (element !== window.document && !seen.has(element)) {
+                    seen.add(element);
+                    fresh.push(element);
+                }
+            }
+            const measured = _measureAll(fresh);
+            for (let i = 0; i < fresh.length; i++) {
+                if (this.trigger) {
+                    _trigger(fresh[i], "highlight", 1);
+                }
+                this.elements.push(fresh[i]);
+                const overlay = _getOverlay();
+                this._overlays.push(overlay);
+                _paintOverlay(overlay, fresh[i], measured[i]);
+            }
+        },
+
         clear: function () {
             this._overlays.forEach(function (overlay) {
                 _releaseOverlay(overlay);
@@ -611,8 +681,9 @@
             this.elements = elements;
 
             // Update all overlays in place — no DOM creation or destruction
+            const measured = _measureAll(elements);
             for (let i = 0; i < elements.length; i++) {
-                _updateOverlay(this._overlays[i], elements[i]);
+                _paintOverlay(this._overlays[i], elements[i], measured[i]);
             }
         }
     };
@@ -672,11 +743,6 @@
         if (SHARED_STATE.isAutoScrolling || SHARED_STATE._isDraggingSVG) {
             return;
         }
-        if (customReturns.selectorBox && customReturns.selectorBox.isOpen &&
-                customReturns.selectorBox.isOpen()) {
-            return;
-        }
-
         const element = event.target;
 
         if (element === _lastHoverTarget) {
@@ -742,7 +808,7 @@
      * @param {Element} element - The DOM element to select
      * @param {boolean} [fromEditor] - If true, this is an editor-cursor-driven selection;
      *   only lightweight highlights (outline, margin/padding overlay) are shown, not interactive
-     *   UI like control box, spacing handles, or measurements.
+     *   UI like the control box or the styles bar.
      * @param {boolean} [byName] - Selected by name (a layers panel row), so the edit
      *   opt-out and the body block don't apply while it stays selected.
      */
@@ -1008,13 +1074,15 @@
         // Highlight all matching elements except the selected one
         // (it already has a click highlight)
         _cssSelectorHighlight = new Highlight();
+        const wanted = [];
         for (let i = 0; i < nodes.length; i++) {
             if (nodes[i] !== previouslySelectedElement &&
                 LivePreviewView.isElementInspectable(nodes[i], true) &&
                 nodes[i].nodeType === Node.ELEMENT_NODE) {
-                _cssSelectorHighlight.add(nodes[i]);
+                wanted.push(nodes[i]);
             }
         }
+        _cssSelectorHighlight.addAll(wanted);
         _cssSelectorHighlight.selector = rule;
     }
 
@@ -1044,6 +1112,20 @@
         }
     }
 
+    function highlightAll(elements) {
+        if (!_clickHighlight) {
+            _clickHighlight = new Highlight();
+        }
+        const wanted = [];
+        for (let i = 0; i < elements.length; i++) {
+            if (LivePreviewView.isElementInspectable(elements[i], true) &&
+                    elements[i].nodeType === Node.ELEMENT_NODE) {
+                wanted.push(elements[i]);
+            }
+        }
+        _clickHighlight.addAll(wanted);
+    }
+
     /**
      * Find the best element to select from a list of matched nodes
      * Prefers: previously selected element > parent of selected > first valid element
@@ -1110,26 +1192,22 @@
 
         const nodes = window.document.querySelectorAll(rule);
 
-        // Highlight all matching nodes. selectElement() will narrow _clickHighlight
-        // down to the chosen element below; createCssSelectorHighlight() then
-        // re-highlights the siblings in a separate overlay.
-        for (let i = 0; i < nodes.length; i++) {
-            highlight(nodes[i]);
-        }
-
-        if (_clickHighlight) {
-            _clickHighlight.selector = rule;
-        }
-
         // Both edit and highlight modes go through the same selection path:
         // selectElement() handles scroll-to-view and the prominent click-highlight,
         // createCssSelectorHighlight() shows siblings dimly. fromEditor=true
         // suppresses tool-handler invocation, so highlight mode gets the
         // highlighting/scroll behavior without any UI boxes.
         const { element, skipSelection } = findBestElementToSelect(nodes, rule);
 
-        if (!skipSelection) {
+        if (skipSelection) {
+            // A recent preview click owns the selection and its open tools.
+            // Keep the existing selector highlight without re-selecting it.
+            highlightAll(nodes);
+            _clickHighlight.selector = rule;
+        } else {
             if (element) {
+                // Select first: drawing every match here would immediately be
+                // cleared by selectElement() and drawn again as siblings below.
                 selectElement(element, true);
             } else {
                 // No valid element found, dismiss UI