diff --git a/.brackets.json b/.brackets.json index 02e9bc8fa6b..56718b85014 100644 --- 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 +} \ No newline at end of file diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 5034f6d0219..9fd77b0c355 100644 --- 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);