Improved support for layers panel with adding styles selector support

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -258,6 +258,8 @@
         screenOffset: screenOffset,
         selectElement: selectElement,
         isSelectedFromEditor: function () { return _selectedFromEditor; },
+        isNamedSelection: _isNamedSelection,
+        toMatchableSelector: toMatchableSelector,
         sendSelectionToEditor: sendSelectionToEditor,
         brieflyDisableHoverListeners: brieflyDisableHoverListeners,
         handleElementClick: handleElementClick,
@@ -1126,6 +1128,23 @@
         _clickHighlight.addAll(wanted);
     }
 
+    const RE_STATE_PSEUDO = /::?(?:hover|active|focus-within|focus-visible|focus|visited|target|checked|disabled|enabled|placeholder-shown|before|after|first-line|first-letter|marker|placeholder|selection)\b/gi;
+
+    // A :hover or ::before rule styles the element in a state it is not in right
+    // now, so it is matched as the plain selector to reach the elements it styles.
+    function toMatchableSelector(rule) {
+        const stripped = rule.replace(RE_STATE_PSEUDO, "");
+        if (stripped === rule) {
+            return rule;
+        }
+        try {
+            window.document.querySelector(stripped);
+            return stripped;
+        } catch (e) {
+            return rule;
+        }
+    }
+
     /**
      * Find the best element to select from a list of matched nodes
      * Prefers: previously selected element > parent of selected > first valid element
@@ -1184,7 +1203,7 @@
         // is not useful, similar to how we skip the html tag in isElementInspectable.
         // The rule can be a comma-separated list of selectors (from multi-cursor),
         // so we filter out any standalone * segments and keep valid ones.
-        rule = rule.split(",").map(s => s.trim()).filter(s => s !== "*").join(",");
+        rule = toMatchableSelector(rule).split(",").map(s => s.trim()).filter(s => s !== "*").join(",");
         if (!rule) {
             dismissUIAndCleanupState();
             return;

src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js

@@ -160,7 +160,9 @@ define(function (require, exports, module) {
             this.setInstrumentationEnabled(true, true);
             this.editor.off("cursorActivity", this._onCursorActivity);
             this.editor.on("cursorActivity", this._onCursorActivity);
-            this.updateHighlight();
+            if (!_isCursorHighlightGated(this)) {
+                this.updateHighlight();
+            }
         }
     };
 
@@ -171,13 +173,29 @@ define(function (require, exports, module) {
     LiveDocument.prototype._detachFromEditor = function () {
         if (this.editor) {
             this._cancelPendingHighlight();
-            this.hideHighlight();
+            if (!_isCursorHighlightGated(this)) {
+                this.hideHighlight();
+            }
             this.editor.off("cursorActivity", this._onCursorActivity);
         }
     };
 
     let _disableHighlightOnCursor = false;
     let _cursorHighlightGeneration = 0;
+    let _cursorHighlightGate = null;
+
+    /**
+     * Lets something outside the live documents decide whether the caret may move
+     * the preview highlight, such as a panel holding a selection of its own.
+     * @param {?function(LiveDocument): boolean} gate Returns false to leave the preview alone; null removes it.
+     */
+    LiveDocument.setCursorHighlightGate = function (gate) {
+        _cursorHighlightGate = gate || null;
+    };
+
+    function _isCursorHighlightGated(liveDoc) {
+        return !!_cursorHighlightGate && _cursorHighlightGate(liveDoc) === false;
+    }
 
     /**
      * If tur, it will disable highlights in live preview on cursor movement in editor
@@ -210,14 +228,15 @@ define(function (require, exports, module) {
      */
     LiveDocument.prototype._onCursorActivity = function (event, editor) {
         this._cancelPendingHighlight();
-        if (!this.editor || _disableHighlightOnCursor) {
+        if (!this.editor || _disableHighlightOnCursor || _isCursorHighlightGated(this)) {
             return;
         }
         const self = this;
         const generation = _cursorHighlightGeneration;
         this._highlightTimer = window.setTimeout(function () {
             self._highlightTimer = null;
-            if (self.editor && !_disableHighlightOnCursor && generation === _cursorHighlightGeneration) {
+            if (self.editor && !_disableHighlightOnCursor && generation === _cursorHighlightGeneration &&
+                    !_isCursorHighlightGated(self)) {
                 self.updateHighlight();
             }
         }, CURSOR_HIGHLIGHT_DEBOUNCE_MS);

src/extensions/default/InlineColorEditor/ColorEditor.js

@@ -32,7 +32,7 @@ define(function (require, exports, module) {
         tinycolor          = brackets.getModule("thirdparty/tinycolor");
 
     /** Mustache template that forms the bare DOM structure of the UI */
-    var ColorEditorTemplate = require("text!ColorEditorTemplate.html");
+    var ColorEditorTemplate = require("text!./ColorEditorTemplate.html");
 
     /**
      * @const @type {number}
@@ -131,9 +131,10 @@ define(function (require, exports, module) {
 
         this._redoColor = null;
         this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        PreferencesManager.on("change", "uppercaseColors", function () {
+        this._handleUppercaseColorsChange = function () {
             this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        }.bind(this));
+        }.bind(this);
+        PreferencesManager.on("change", "uppercaseColors", this._handleUppercaseColorsChange);
 
         this.$colorValue = this.$element.find(".color-value");
         this.$buttonList = this.$element.find("ul.button-bar");
@@ -270,7 +271,7 @@ define(function (require, exports, module) {
      * Remove any preference listeners before destroying the editor.
      */
     ColorEditor.prototype.destroy = function () {
-        PreferencesManager.off("change", "uppercaseColors");
+        PreferencesManager.off("change", "uppercaseColors", this._handleUppercaseColorsChange);
     };
 
     /**

src/nls/root/strings.js

@@ -828,6 +828,17 @@ define({
     "LIVE_PREVIEW_LAYERS_SCRIPT_GENERATED": "Generated by script, not in the source file",
     "LIVE_PREVIEW_LAYERS_TAG_TOOLTIP": "Show Tag Name Tooltip",
     "LIVE_PREVIEW_LAYERS_INSERT_ELEMENT": "Insert Element",
+    "LIVE_PREVIEW_LAYERS_CHANGE_COLOR": "Change color",
+    "LIVE_PREVIEW_LAYERS_COPY_DECLARATION": "Copy property",
+    "LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy rule",
+    "LIVE_PREVIEW_LAYERS_PASTE_PROPERTIES": "Paste properties",
+    "LIVE_PREVIEW_LAYERS_PASTE": "Paste",
+    "LIVE_PREVIEW_LAYERS_STYLES_MENU_HINT": "Right-click to copy or paste styles",
+    "LIVE_PREVIEW_LAYERS_PASTE_INVALID": "Paste CSS properties or one complete selector at a time.",
+    "LIVE_PREVIEW_LAYERS_PASTE_FAILED": "Couldn’t paste these properties. Try again.",
+    "LIVE_PREVIEW_LAYERS_PASTED": "Properties pasted into {0}",
+    "LIVE_PREVIEW_LAYERS_COPY_FAILED": "Couldn’t copy these styles. Try again.",
+    "LIVE_PREVIEW_LAYERS_INSERT_POSITION": "Placement",
     "LIVE_PREVIEW_LAYERS_INSERT_INTO_PAGE": "Add to the page",
     "LIVE_PREVIEW_LAYERS_INSERT_LOADING": "Loading elements…",
     "LIVE_PREVIEW_LAYERS_INSERT_UNAVAILABLE": "The live preview did not answer. Try again in a moment.",
@@ -836,7 +847,7 @@ define({
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_PROPERTIES": "The page is empty. Add an element to see its properties.",
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_STYLES": "The page is empty. Add an element to see its styles.",
     "LIVE_PREVIEW_LAYERS_SHOW_SELECTED": "Show the selected element",
-    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust, double-click to edit",
+    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust. Scroll or use arrow keys while editing. Shift: larger steps, Alt: smaller steps",
     "LIVE_PREVIEW_LAYERS_PROPERTY_PLACEHOLDER": "property",
     "LIVE_PREVIEW_LAYERS_VALUE_PLACEHOLDER": "value",