Merge pull request #2136 from adobe/glenn/css-highlight

Add Preview Highlight functionality

Author: Narciso Jaramillo

.gitignore

@@ -7,5 +7,7 @@ src/brackets.min.css
 src/extensions/dev/*
 !src/extensions/dev/README
 
+src/extensions/disabled
+
 #OSX .DS_Store files
 .DS_Store

src/LiveDevelopment/Agents/HighlightAgent.js

@@ -34,9 +34,10 @@
 define(function HighlightAgent(require, exports, module) {
     "use strict";
 
-    var Inspector = require("LiveDevelopment/Inspector/Inspector");
-    var RemoteAgent = require("LiveDevelopment/Agents/RemoteAgent");
-    var DOMAgent = require("LiveDevelopment/Agents/DOMAgent");
+    var DOMAgent        = require("LiveDevelopment/Agents/DOMAgent"),
+        Inspector       = require("LiveDevelopment/Inspector/Inspector"),
+        LiveDevelopment = require("LiveDevelopment/LiveDevelopment"),
+        RemoteAgent     = require("LiveDevelopment/Agents/RemoteAgent");
 
     var _highlight; // active highlight
 
@@ -66,6 +67,10 @@ define(function HighlightAgent(require, exports, module) {
      * @param {DOMNode} node
      */
     function node(n) {
+        if (!LiveDevelopment.config.experimental) {
+            return;
+        }
+        
         if (!Inspector.config.highlight) {
             return;
         }
@@ -94,29 +99,41 @@ define(function HighlightAgent(require, exports, module) {
      * @param {string} rule selector
      */
     function rule(name) {
-        if (_highlight.rule === name) {
+        if (_highlight.ref === name) {
             return;
         }
         hide();
         _highlight = {type: "css", ref: name};
         RemoteAgent.call("highlightRule", name);
     }
+    
+    /**
+     * Redraw active highlights
+     */
+    function redraw() {
+        RemoteAgent.call("redrawHighlights");
+    }
 
     /** Initialize the agent */
     function load() {
         _highlight = {};
-        $(RemoteAgent).on("highlight.HighlightAgent", _onRemoteHighlight);
+        if (LiveDevelopment.config.experimental) {
+            $(RemoteAgent).on("highlight.HighlightAgent", _onRemoteHighlight);
+        }
     }
 
     /** Clean up */
     function unload() {
-        $(RemoteAgent).off(".HighlightAgent");
+        if (LiveDevelopment.config.experimental) {
+            $(RemoteAgent).off(".HighlightAgent");
+        }
     }
 
     // Export public functions
     exports.hide = hide;
     exports.node = node;
     exports.rule = rule;
+    exports.redraw = redraw;
     exports.load = load;
     exports.unload = unload;
 });

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -33,6 +33,8 @@
 function RemoteFunctions(experimental) {
     "use strict";
 
+    var HIGHLIGHT_CLASSNAME = "__brackets-ld-highlight";
+    
     // determine the color for a type
     function _typeColor(type, highlight) {
         switch (type) {
@@ -49,6 +51,10 @@ function RemoteFunctions(experimental) {
 
     // compute the screen offset of an element
     function _screenOffset(element, key) {
+        if (element === document.body) {
+            var bounds = element.getBoundingClientRect();
+            return (key === "offsetLeft" ? bounds.left : bounds.top);
+        }
         var value = 0;
         while (element) {
             value += element[key];
@@ -204,27 +210,102 @@ function RemoteFunctions(experimental) {
             return false;
         },
 
-        add: function (element) {
+        _makeHighlightDiv: function (element, doAnimation) {
+            var elementBounds = element.getBoundingClientRect(),
+                highlight = window.document.createElement("div"),
+                styles = window.getComputedStyle(element);
+                
+            highlight.className = HIGHLIGHT_CLASSNAME;
+            
+            var stylesToSet = {
+                "left": _screenOffset(element, "offsetLeft") + "px",
+                "top": _screenOffset(element, "offsetTop") + "px",
+                "width": elementBounds.width + "px",
+                "height": elementBounds.height + "px",
+                "z-index": 2000000,
+                "position": "absolute",
+                "pointer-events": "none",
+                "border-top-left-radius": styles.borderTopLeftRadius,
+                "border-top-right-radius": styles.borderTopRightRadius,
+                "border-bottom-left-radius": styles.borderBottomLeftRadius,
+                "border-bottom-right-radius": styles.borderBottomRightRadius
+            };
+            
+            var animateStartValues = {
+                "opacity": 0,
+                "background": "rgba(94,167,255, 0.5)",
+                "box-shadow": "0 0 2px 1px rgba(94,167,255, 1), inset 0 0 4px 1px rgba(255,255,255,1)"
+            };
+            
+            var animateEndValues = {
+                "opacity": 1,
+                "background": "rgba(94,167,255, 0.1)",
+                "box-shadow": "0 0 1px 1px rgba(94,167,255, 0.6), inset 0 0 4px 1px rgba(255,255,255,0.8)"
+            };
+            
+            var transitionValues = {
+                "-webkit-transition-property": "opacity, box-shadow, background",
+                "-webkit-transition-duration": "0.3s, 0.4s, 0.4s",
+                "transition-property": "opacity, box-shadow, background",
+                "transition-duration": "0.3s, 0.4s, 0.4s"
+            };
+            
+            function _setStyleValues(styleValues, obj) {
+                var prop;
+                
+                for (prop in styleValues) {
+                    obj.setProperty(prop, styleValues[prop]);
+                }
+            }
+
+            _setStyleValues(stylesToSet, highlight.style);
+            _setStyleValues(
+                doAnimation ? animateStartValues : animateEndValues,
+                highlight.style
+            );
+            
+            
+            if (doAnimation) {
+                _setStyleValues(transitionValues, highlight.style);
+                
+                window.setTimeout(function () {
+                    _setStyleValues(animateEndValues, highlight.style);
+                }, 0);
+            }
+        
+            window.document.body.appendChild(highlight);
+        },
+        
+        add: function (element, doAnimation) {
             if (this._elementExists(element) || element === document) {
                 return;
             }
             if (this.trigger) {
                 _trigger(element, "highlight", 1);
             }
             this.elements.push(element);
-            this.orgColors.push(element.style.getPropertyValue("background-color"));
-            element.style.setProperty("background-color", this.color);
+            
+            this._makeHighlightDiv(element, doAnimation);
         },
 
         clear: function () {
-            var i;
-            for (i in this.elements) {
-                var e = this.elements[i];
-                e.style.setProperty("background-color", this.orgColors[i]);
-                _trigger(e, "highlight", 0, true);
+            var i, highlights = window.document.querySelectorAll("." + HIGHLIGHT_CLASSNAME),
+                body = window.document.body;
+        
+            for (i = 0; i < highlights.length; i++) {
+                body.removeChild(highlights[i]);
             }
+            
             this.elements = [];
-            this.orgColors = [];
+        },
+        
+        redraw: function () {
+            var i, highlighted = this.elements.slice(0);
+            
+            this.clear();
+            for (i in highlighted) {
+                this.add(highlighted[i], false);
+            }
         }
     };
 
@@ -252,7 +333,7 @@ function RemoteFunctions(experimental) {
         if (!event.metaKey) {
             return;
         }
-        _localHighlight.add(event.target);
+        _localHighlight.add(event.target, true);
     }
 
     function onMouseOut(event) {
@@ -305,7 +386,6 @@ function RemoteFunctions(experimental) {
         }
     }
 
-
     /** Public Commands **********************************************************/
 
     // show goto
@@ -336,7 +416,7 @@ function RemoteFunctions(experimental) {
         if (clear) {
             _remoteHighlight.clear();
         }
-        _remoteHighlight.add(node);
+        _remoteHighlight.add(node, true);
     }
 
     // highlight a rule
@@ -347,16 +427,32 @@ function RemoteFunctions(experimental) {
             highlight(nodes[i]);
         }
     }
+    
+    // redraw active highlights
+    function redrawHighlights() {
+        if (_remoteHighlight) {
+            _remoteHighlight.redraw();
+        }
+    }
 
     // init
     if (experimental) {
         window.document.addEventListener("keydown", onKeyDown);
     }
+    
+    window.addEventListener("resize", redrawHighlights);
+    
+    // Scrolling a div can interfere with highlighting. 
+    var i, divs = window.document.getElementsByTagName("div");
+    for (i = 0; i < divs.length; i++) {
+        divs[i].addEventListener("scroll", redrawHighlights);
+    }
 
     return {
         "showGoto": showGoto,
         "hideHighlight": hideHighlight,
         "highlight": highlight,
-        "highlightRule": highlightRule
+        "highlightRule": highlightRule,
+        "redrawHighlights": redrawHighlights
     };
 }

src/LiveDevelopment/Documents/CSSDocument.js

@@ -80,16 +80,11 @@ define(function CSSDocumentModule(require, exports, module) {
         // get the style sheet
         this.styleSheet = CSSAgent.styleForURL(this.doc.url);
 
-        // WebInspector Command: CSS.getStyleSheet
-        Inspector.CSS.getStyleSheet(this.styleSheet.styleSheetId, function callback(res) {
-            // res = {styleSheet}
-            this.rules = res.styleSheet.rules;
-        }.bind(this));
-
         // If the CSS document is dirty, push the changes into the browser now
         if (doc.isDirty) {
             CSSAgent.reloadCSSForDocument(this.doc);
         }
+        this.reloadRules();
     };
 
     /** Get the browser version of the StyleSheet object */
@@ -135,6 +130,18 @@ define(function CSSDocumentModule(require, exports, module) {
         }
     };
 
+    // Reload rules
+    CSSDocument.prototype.reloadRules = function () {
+        this.loadRulePromise = this.getStyleSheetFromBrowser().done(function (styleSheet) {
+            this.rules = styleSheet.rules;
+            this.loadRulePromise = null;
+            if (this.pendingCursorActivity) {
+                this.pendingCursorActivity = false;
+                this.onCursorActivity();
+            }
+        }.bind(this));
+    };
+    
     // find a rule in the given rules
     CSSDocument.prototype.ruleAtLocation = function ruleAtLocation(location) {
         var i, rule;
@@ -153,6 +160,13 @@ define(function CSSDocumentModule(require, exports, module) {
     /** Triggered on cursor activity of the editor */
     CSSDocument.prototype.onCursorActivity = function onCursorActivity(event, editor) {
         if (Inspector.config.highlight) {
+            // If there is an active loadRulePromise, we can't accurately get the rule
+            // at the location. Set a flag here so we can get called again once the
+            // rules have arrived.
+            if (this.loadRulePromise) {
+                this.pendingCursorActivity = true;
+                return;
+            }
             var codeMirror = this.editor._codeMirror;
             var location = codeMirror.indexFromPos(codeMirror.getCursor());
             var rule = this.ruleAtLocation(location);
@@ -168,6 +182,10 @@ define(function CSSDocumentModule(require, exports, module) {
     CSSDocument.prototype.onChange = function onChange(event, editor, change) {
         // brute force: update the CSS
         CSSAgent.reloadCSSForDocument(this.doc);
+        this.reloadRules();
+        if (Inspector.config.highlight) {
+            HighlightAgent.redraw();
+        }
     };
     /** Triggered if the Document's file is deleted */
     CSSDocument.prototype.onDeleted = function onDeleted(event, editor, change) {

src/LiveDevelopment/LiveDevelopment.js

@@ -104,7 +104,8 @@ define(function LiveDevelopment(require, exports, module) {
         "remote"    : true,
         "network"   : true,
         "dom"       : true,
-        "css"       : true
+        "css"       : true,
+        "highlight" : true
     };
 
     // store the names (matching property names in the 'agent' object) of agents that we've loaded
@@ -559,6 +560,21 @@ define(function LiveDevelopment(require, exports, module) {
         Inspector.disconnect();
         _setStatus(STATUS_INACTIVE);
     }
+    
+    /** Enable highlighting */
+    function showHighlight() {
+        // Force cursor activity to kick highlighting
+        if (_liveDocument instanceof CSSDocument) {
+            _liveDocument.onCursorActivity();
+        }
+    }
+
+    /** Hide any active highlighting */
+    function hideHighlight() {
+        if (Inspector.connected() && agents.highlight) {
+            agents.highlight.hide();
+        }
+    }
 
     /** Triggered by a document change from the DocumentManager */
     function _onDocumentChange() {
@@ -569,6 +585,7 @@ define(function LiveDevelopment(require, exports, module) {
         }
 
         if (Inspector.connected()) {
+            hideHighlight();
             if (agents.network && agents.network.wasURLRequested(doc.url)) {
                 _closeDocument();
                 var editor = EditorManager.getCurrentFullEditor();
@@ -628,13 +645,6 @@ define(function LiveDevelopment(require, exports, module) {
         return foundDoc;
     }
 
-    /** Hide any active highlighting */
-    function hideHighlight() {
-        if (Inspector.connected() && agents.highlight) {
-            agents.highlight.hide();
-        }
-    }
-
     /** Initialize the LiveDevelopment Session */
     function init(theConfig) {
         exports.config = theConfig;
@@ -657,6 +667,7 @@ define(function LiveDevelopment(require, exports, module) {
     exports.enableAgent         = enableAgent;
     exports.disableAgent        = disableAgent;
     exports.getLiveDocForPath   = getLiveDocForPath;
+    exports.showHighlight       = showHighlight;
     exports.hideHighlight       = hideHighlight;
     exports.init                = init;
 });