Redraw via requestAnimationFrame if element has transition / animatio…

…n on it.
adobe · Dec 19, 2016 · 289cc5b · petetnt · Dec 19, 2016 · 289cc5b
1 parent 1714336
commit 289cc5b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/.brackets.json b/.brackets.json
@@ -10,15 +10,12 @@
         "es5": true,
         "predef": [
             "brackets",
-
             "require",
             "define",
             "$",
-
             "window",
             "setTimeout",
             "clearTimeout",
-
             "ArrayBuffer",
             "XMLHttpRequest",
             "Uint32Array",
@@ -28,7 +25,10 @@
     "defaultExtension": "js",
     "language": {
         "javascript": {
-            "linting.prefer": ["ESLint", "JSLint"],
+            "linting.prefer": [
+                "ESLint",
+                "JSLint"
+            ],
             "linting.usePreferredOnly": true
         }
     },
@@ -43,5 +43,5 @@
         }
     },
     "spaceUnits": 4,
-    "useTabChar": false
-}
+    "useTabChar": true
+}
diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js
@@ -35,6 +35,19 @@ function RemoteFunctions(config) {
 
     var experimental = config.experimental;
     var lastKeepAliveTime = Date.now();
+	var req, timeout;
+	var animateHighlight = function (time) {
+		if(req) {
+			cancelAnimationFrame(req);	
+			clearTimeout(timeout);
+		}
+		req = requestAnimationFrame(redrawHighlights);
+
+		timeout = setTimeout(function () {
+			cancelAnimationFrame(req);	
+			req = null;
+		}, time * 1000);
+	};
 
     /**
      * @type {DOMEditHandler}
@@ -234,11 +247,18 @@ function RemoteFunctions(config) {
             }
             return false;
         },
-
         _makeHighlightDiv: function (element, doAnimation) {
             var elementBounds = element.getBoundingClientRect(),
                 highlight = window.document.createElement("div"),
                 styles = window.getComputedStyle(element);
+		var transitionDuration = parseFloat(styles.getPropertyValue('transition-duration'));
+
+		var animationDuration = parseFloat(styles.getPropertyValue('animation-duration'));
+
+		if (transitionDuration)
+			animateHighlight(transitionDuration);
+		if (animationDuration) 
+			animateHighlight(animationDuration);
 
             // Don't highlight elements with 0 width & height
             if (elementBounds.width === 0 && elementBounds.height === 0) {
@@ -433,7 +453,8 @@ function RemoteFunctions(config) {
                 "border-width": "1px",
                 "border-color": "#00a2ff",
                 "box-shadow": "0 0 1px #fff",
-                "box-sizing": "border-box"
+                "box-sizing": "border-box",
+				"transform": styles.getPropertyValue('transform')
             };
 
             var mergedStyles = Object.assign({}, stylesToSet,  config.remoteHighlight.stylesToSet);