From b1ef3bed1b02a5e6ec9d80bef8367890ae3afce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Sun, 27 Nov 2016 19:05:12 +0100 Subject: [PATCH 01/14] Live Preview visual customization (colors of highlight can be customized via user preferences) --- src/LiveDevelopment/Agents/RemoteAgent.js | 2 +- src/LiveDevelopment/Agents/RemoteFunctions.js | 20 ++++++++++-------- src/LiveDevelopment/main.js | 21 +++++++++++++++++++ 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteAgent.js b/src/LiveDevelopment/Agents/RemoteAgent.js index 6bb71e7c839..7c084ed9bab 100644 --- a/src/LiveDevelopment/Agents/RemoteAgent.js +++ b/src/LiveDevelopment/Agents/RemoteAgent.js @@ -131,7 +131,7 @@ define(function RemoteAgent(require, exports, module) { _stopKeepAliveInterval(); // inject RemoteFunctions - var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + "," + PreferencesManager.get("livedev.wsPort") + ");"; + var command = "window._LD=" + RemoteFunctions + "(" + JSON.stringify(LiveDevelopment.config) + "," + PreferencesManager.get("livedev.wsPort") + ");"; Inspector.Runtime.evaluate(command, function onEvaluate(response) { if (response.error || response.wasThrown) { diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 7060ce5a3fd..db5aae5b831 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -30,9 +30,10 @@ * modules should define a single function that returns an object of all * exported functions. */ -function RemoteFunctions(experimental, remoteWSPort) { +function RemoteFunctions(config, remoteWSPort) { "use strict"; + var experimental = config.experimental; var lastKeepAliveTime = Date.now(); /** @@ -285,16 +286,17 @@ function RemoteFunctions(experimental, remoteWSPort) { "box-shadow": "0 0 1px #fff", "box-sizing": "border-box" }; + + var preferences = config.remoteHighlight.stylesToSet; + var prop; + + for (prop in preferences) { + stylesToSet[prop] = preferences[prop]; + } - var animateStartValues = { - "background-color": "rgba(0, 162, 255, 0.5)", - "opacity": 0 - }; + var animateStartValues = config.remoteHighlight.animateStartValue; - var animateEndValues = { - "background-color": "rgba(0, 162, 255, 0)", - "opacity": 1 - }; + var animateEndValues = config.remoteHighlight.animateEndValue; var transitionValues = { "-webkit-transition-property": "opacity, background-color", diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index e7aabc6cdf1..a141eb37396 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -79,6 +79,21 @@ define(function main(require, exports, module) { description: Strings.DESCRIPTION_LIVE_DEV_MULTIBROWSER }); + // "livedev.remoteHighlight" preference + var PREF_REMOTEHIGHLIGHT = "remoteHighlight"; + var remoteHighlightPref = prefs.definePreference(PREF_REMOTEHIGHLIGHT, "object", { + "animateStartValue": { + "background-color": "rgba(0, 162, 255, 0.5)", + "opacity": 0 + }, + "animateEndValue": { + "background-color": "rgba(0, 162, 255, 0)", + "opacity": 1 + } + }, { + description: "LivePreview highlight settings" + }); + /** Toggles or sets the preference **/ function _togglePref(key, value) { var val, @@ -302,6 +317,7 @@ define(function main(require, exports, module) { /** Initialize LiveDevelopment */ AppInit.appReady(function () { params.parse(); + config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT); Inspector.init(config); LiveDevelopment.init(config); @@ -353,6 +369,11 @@ define(function main(require, exports, module) { _setImplementation(prefs.get(PREF_MULTIBROWSER)); } }); + + remoteHighlightPref + .on("change", function () { + LiveDevImpl.close(false, "Changed display preferences"); + }); }); From cb9fb57e20ca75a8b3dac0f62a70aa307992dfd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 28 Nov 2016 10:40:14 +0100 Subject: [PATCH 02/14] PR improvements Remove trailing spaces, use Object.assign instead of manually iterating over remoteHighlight properties and remove quotes from object properties in default configuration of remoteHighlight --- src/LiveDevelopment/Agents/RemoteFunctions.js | 9 ++------- src/LiveDevelopment/main.js | 4 ++-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index db5aae5b831..df021d4ff40 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -287,12 +287,7 @@ function RemoteFunctions(config, remoteWSPort) { "box-sizing": "border-box" }; - var preferences = config.remoteHighlight.stylesToSet; - var prop; - - for (prop in preferences) { - stylesToSet[prop] = preferences[prop]; - } + var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet); var animateStartValues = config.remoteHighlight.animateStartValue; @@ -313,7 +308,7 @@ function RemoteFunctions(config, remoteWSPort) { } } - _setStyleValues(stylesToSet, highlight.style); + _setStyleValues(mergedStyles, highlight.style); _setStyleValues( doAnimation ? animateStartValues : animateEndValues, highlight.style diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index a141eb37396..a3492fa6f2d 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -82,11 +82,11 @@ define(function main(require, exports, module) { // "livedev.remoteHighlight" preference var PREF_REMOTEHIGHLIGHT = "remoteHighlight"; var remoteHighlightPref = prefs.definePreference(PREF_REMOTEHIGHLIGHT, "object", { - "animateStartValue": { + animateStartValue: { "background-color": "rgba(0, 162, 255, 0.5)", "opacity": 0 }, - "animateEndValue": { + animateEndValue: { "background-color": "rgba(0, 162, 255, 0)", "opacity": 1 } From 6dfd2de3b27f67f7e7570471234c7126a65a1e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 28 Nov 2016 12:34:31 +0100 Subject: [PATCH 03/14] Allow to animate transform property via transition --- src/LiveDevelopment/Agents/RemoteFunctions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index df021d4ff40..f6967503e70 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -294,9 +294,9 @@ function RemoteFunctions(config, remoteWSPort) { var animateEndValues = config.remoteHighlight.animateEndValue; var transitionValues = { - "-webkit-transition-property": "opacity, background-color", + "-webkit-transition-property": "opacity, background-color, transform", "-webkit-transition-duration": "300ms, 2.3s", - "transition-property": "opacity, background-color", + "transition-property": "opacity, background-color, transform", "transition-duration": "300ms, 2.3s" }; From 5250924f8e57366e5518b2a27f1b6e75a8394b53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 28 Nov 2016 23:34:24 +0100 Subject: [PATCH 04/14] Remove old vendor prefixes from transitionValues in RemoteFunctions.js --- src/LiveDevelopment/Agents/RemoteFunctions.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index f6967503e70..949673ac9a9 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -294,8 +294,6 @@ function RemoteFunctions(config, remoteWSPort) { var animateEndValues = config.remoteHighlight.animateEndValue; var transitionValues = { - "-webkit-transition-property": "opacity, background-color, transform", - "-webkit-transition-duration": "300ms, 2.3s", "transition-property": "opacity, background-color, transform", "transition-duration": "300ms, 2.3s" }; From 0e014c50de3b7e2a728b1a4765074925c376a285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Tue, 29 Nov 2016 13:35:50 +0100 Subject: [PATCH 05/14] updateConfig RemoteFunctions.js method Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 8 +++++++- src/LiveDevelopment/main.js | 5 ++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 949673ac9a9..137abd384e0 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -837,6 +837,11 @@ function RemoteFunctions(config, remoteWSPort) { function getSimpleDOM() { return JSON.stringify(_domElementToJSON(window.document.documentElement)); } + + function updateConfig(newConfig) { + config = JSON.parse(newConfig); + return JSON.stringify(config); + } // init _editHandler = new DOMEditHandler(window.document); @@ -889,6 +894,7 @@ function RemoteFunctions(config, remoteWSPort) { "highlightRule" : highlightRule, "redrawHighlights" : redrawHighlights, "applyDOMEdits" : applyDOMEdits, - "getSimpleDOM" : getSimpleDOM + "getSimpleDOM" : getSimpleDOM, + "updateConfig" : updateConfig }; } diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index a3492fa6f2d..ab964f2b30b 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -372,7 +372,10 @@ define(function main(require, exports, module) { remoteHighlightPref .on("change", function () { - LiveDevImpl.close(false, "Changed display preferences"); + config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT); + + if (LiveDevImpl && LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) + LiveDevImpl.agents.remote.call("updateConfig",JSON.stringify(config)); }); }); From 6d13f11c54b91e4f10cdad05c302dcb68f37e2a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Wed, 30 Nov 2016 11:25:23 +0100 Subject: [PATCH 06/14] Show margin and paddings in live preview. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 174 ++++++++++++++++++ src/LiveDevelopment/main.js | 16 +- 2 files changed, 188 insertions(+), 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 137abd384e0..582d14e8e01 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -262,6 +262,180 @@ function RemoteFunctions(config, remoteWSPort) { return; } + var showMarginPadding; + if (config.remoteHighlight.showPaddingMargin) { + showMarginPadding = 'block'; + } else { + showMarginPadding = 'none'; + } + + var elementStyling = window.getComputedStyle(element, null); + + var calculateSize = function () { + var sum = 0; + var i; + for (i = 0; i < arguments.length; i++) { + sum += parseInt(arguments[i], 10); + } + return sum; + }; + + var mainBoxStyles = config.remoteHighlight.stylesToSet; + + var paddingVisualisations = [ + // padding-top + { + "height": elementStyling.getPropertyValue('padding-top'), + "width": elementBounds.width + "px", + "position": "absolute", + "top": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "left": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + }, + // padding-right + { + "width": elementStyling.getPropertyValue('padding-right'), + "height": elementBounds.height + "px", + "position": "absolute", + "top": 0, + "right": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + }, + // padding-bottom + { + "height": elementStyling.getPropertyValue('padding-bottom'), + "width": elementBounds.width + "px", + "position": "absolute", + "bottom": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "left": 0, + "box-sizing": "border-box", + "display": showMarginPadding + }, + // padding-left + { + "height": elementBounds.height + "px", + "width": elementStyling.getPropertyValue('padding-left'), + "position": "absolute", + "top": 0, + "left": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + } + ]; + + var marginVisualisations = [ + // margin-top + { + "height": elementStyling.getPropertyValue('margin-top'), + "width": elementBounds.width + "px", + "position": "absolute", + "top": -calculateSize( + elementStyling.getPropertyValue('margin-top'), + mainBoxStyles['border-width'] + ) + "px", + "left": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + }, + // margin-right + { + "width": elementStyling.getPropertyValue('margin-right'), + "height": + calculateSize( + elementBounds.height, + elementStyling.getPropertyValue('margin-top'), + elementStyling.getPropertyValue('margin-bottom') + ) + "px", + "position": "absolute", + "top": -calculateSize( + elementStyling.getPropertyValue('margin-top'), + mainBoxStyles['border-width'] + ) + "px", + "right": -calculateSize( + elementStyling.getPropertyValue('margin-right'), + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + }, + // margin-bottom + { + "height": elementStyling.getPropertyValue('margin-bottom'), + "width": elementBounds.width + "px", + "position": "absolute", + "bottom": -calculateSize( + mainBoxStyles['border-width'], + elementStyling.getPropertyValue('margin-bottom') + ) + "px", + "left": -calculateSize( + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + }, + { + "height": calculateSize( + elementBounds.height, + elementStyling.getPropertyValue('margin-top'), + elementStyling.getPropertyValue('margin-bottom') + ) + "px", + "width": elementStyling.getPropertyValue('margin-left'), + "position": "absolute", + "top": -calculateSize( + elementStyling.getPropertyValue('margin-top'), + mainBoxStyles['border-width'] + ) + "px", + "left": -calculateSize( + elementStyling.getPropertyValue('margin-left'), + mainBoxStyles['border-width'] + ) + "px", + "box-sizing": "border-box", + "display": showMarginPadding + } + ]; + + var setupVisualisations = function (arr, config) { + var i; + for (i = 0; i < arr.length; i++) { + var el = window.document.createElement("div"); + var styles = Object.assign( + {}, + config, + arr[i] + ); + + _setStyleValues( + styles, + el.style + ); + + highlight.appendChild(el); + } + }; + + setupVisualisations( + marginVisualisations, + config.remoteHighlight.marginStyling + ); + setupVisualisations( + paddingVisualisations, + config.remoteHighlight.paddingStyling + ); + highlight.className = HIGHLIGHT_CLASSNAME; var offset = _screenOffset(element); diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index ab964f2b30b..f65471bb15a 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -88,8 +88,20 @@ define(function main(require, exports, module) { }, animateEndValue: { "background-color": "rgba(0, 162, 255, 0)", - "opacity": 1 - } + "opacity": 0.6 + }, + "paddingStyling": { + "border-width": "1px", + "border-style": "dashed", + "border-color": "rgba(0, 162, 255, 0.5)" + }, + "marginStyling": { + "background-color": "rgba(21, 165, 255, 0.58)" + }, + "stylesToSet": { + "border-width": "1px" + }, + "showPaddingMargin": true }, { description: "LivePreview highlight settings" }); From 3f2d984c2dc728d81e7252abc224c510c2b85405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Fri, 2 Dec 2016 14:07:05 +0100 Subject: [PATCH 07/14] Do not show element if it has width or height equal to 0. A little bit of clean up --- src/LiveDevelopment/Agents/RemoteFunctions.js | 57 ++++++++----------- 1 file changed, 25 insertions(+), 32 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 582d14e8e01..63c4c5d63bc 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -262,12 +262,17 @@ function RemoteFunctions(config, remoteWSPort) { return; } - var showMarginPadding; - if (config.remoteHighlight.showPaddingMargin) { - showMarginPadding = 'block'; - } else { - showMarginPadding = 'none'; - } + var setVisibility = function (el){ + if ( + !config.remoteHighlight.showPaddingMargin || + parseInt(el.height, 10) <= 0 || + parseInt(el.width, 10) <= 0 + ) { + el.display = 'none'; + } else { + el.display = 'block'; + } + }; var elementStyling = window.getComputedStyle(element, null); @@ -293,9 +298,7 @@ function RemoteFunctions(config, remoteWSPort) { ) + "px", "left": -calculateSize( mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" }, // padding-right { @@ -305,9 +308,7 @@ function RemoteFunctions(config, remoteWSPort) { "top": 0, "right": -calculateSize( mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" }, // padding-bottom { @@ -317,9 +318,7 @@ function RemoteFunctions(config, remoteWSPort) { "bottom": -calculateSize( mainBoxStyles['border-width'] ) + "px", - "left": 0, - "box-sizing": "border-box", - "display": showMarginPadding + "left": 0 }, // padding-left { @@ -329,9 +328,7 @@ function RemoteFunctions(config, remoteWSPort) { "top": 0, "left": -calculateSize( mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" } ]; @@ -347,9 +344,7 @@ function RemoteFunctions(config, remoteWSPort) { ) + "px", "left": -calculateSize( mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" }, // margin-right { @@ -368,9 +363,7 @@ function RemoteFunctions(config, remoteWSPort) { "right": -calculateSize( elementStyling.getPropertyValue('margin-right'), mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" }, // margin-bottom { @@ -383,9 +376,7 @@ function RemoteFunctions(config, remoteWSPort) { ) + "px", "left": -calculateSize( mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" }, { "height": calculateSize( @@ -402,17 +393,19 @@ function RemoteFunctions(config, remoteWSPort) { "left": -calculateSize( elementStyling.getPropertyValue('margin-left'), mainBoxStyles['border-width'] - ) + "px", - "box-sizing": "border-box", - "display": showMarginPadding + ) + "px" } ]; var setupVisualisations = function (arr, config) { var i; for (i = 0; i < arr.length; i++) { - var el = window.document.createElement("div"); - var styles = Object.assign( + setVisibility(arr[i]); + + // Applies to every visualisationElement (padding or margin div) + arr[i]["box-sizing"] = "border-box"; + var el = window.document.createElement("div"), + styles = Object.assign( {}, config, arr[i] From 0889f8fdd44a51da749e79f26c7375c5683637ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Fri, 9 Dec 2016 22:52:24 +0100 Subject: [PATCH 08/14] =?UTF-8?q?PR=20improvements=20calculateSize=20is=20?= =?UTF-8?q?renamed=20to=20sum.=20(better=20naming=20conventions=20are=20we?= =?UTF-8?q?lcome).=20sum=20now=20takes=20an=20array=20as=20argument.=20It?= =?UTF-8?q?=20returns=20sum=20of=20parsed=20array=20elements,=20suffixed?= =?UTF-8?q?=20with=20=E2=80=9Epx=E2=80=9D.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/LiveDevelopment/Agents/RemoteFunctions.js | 75 +++++++++---------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 63c4c5d63bc..b04746f84ee 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -262,7 +262,7 @@ function RemoteFunctions(config, remoteWSPort) { return; } - var setVisibility = function (el){ + var setVisibility = function (el) { if ( !config.remoteHighlight.showPaddingMargin || parseInt(el.height, 10) <= 0 || @@ -276,13 +276,12 @@ function RemoteFunctions(config, remoteWSPort) { var elementStyling = window.getComputedStyle(element, null); - var calculateSize = function () { - var sum = 0; - var i; - for (i = 0; i < arguments.length; i++) { - sum += parseInt(arguments[i], 10); - } - return sum; + var sum = function (offsets) { + var value = offsets.reduce(function (previous, current) { + return parseInt(previous, 10) + parseInt(current, 10); + }); + + return value + "px"; }; var mainBoxStyles = config.remoteHighlight.stylesToSet; @@ -293,12 +292,12 @@ function RemoteFunctions(config, remoteWSPort) { "height": elementStyling.getPropertyValue('padding-top'), "width": elementBounds.width + "px", "position": "absolute", - "top": -calculateSize( + "top": "-" + sum([ mainBoxStyles['border-width'] - ) + "px", - "left": -calculateSize( + ]), + "left": sum([ mainBoxStyles['border-width'] - ) + "px" + ]) }, // padding-right { @@ -306,18 +305,18 @@ function RemoteFunctions(config, remoteWSPort) { "height": elementBounds.height + "px", "position": "absolute", "top": 0, - "right": -calculateSize( + "right": "-" + sum([ mainBoxStyles['border-width'] - ) + "px" + ]) }, // padding-bottom { "height": elementStyling.getPropertyValue('padding-bottom'), "width": elementBounds.width + "px", "position": "absolute", - "bottom": -calculateSize( + "bottom": "-" + sum([ mainBoxStyles['border-width'] - ) + "px", + ]), "left": 0 }, // padding-left @@ -326,9 +325,9 @@ function RemoteFunctions(config, remoteWSPort) { "width": elementStyling.getPropertyValue('padding-left'), "position": "absolute", "top": 0, - "left": -calculateSize( + "left": "-" + sum([ mainBoxStyles['border-width'] - ) + "px" + ]) } ]; @@ -338,62 +337,62 @@ function RemoteFunctions(config, remoteWSPort) { "height": elementStyling.getPropertyValue('margin-top'), "width": elementBounds.width + "px", "position": "absolute", - "top": -calculateSize( + "top": "-" + sum([ elementStyling.getPropertyValue('margin-top'), mainBoxStyles['border-width'] - ) + "px", - "left": -calculateSize( + ]), + "left": "-" + sum([ mainBoxStyles['border-width'] - ) + "px" + ]) }, // margin-right { "width": elementStyling.getPropertyValue('margin-right'), "height": - calculateSize( + sum([ elementBounds.height, elementStyling.getPropertyValue('margin-top'), elementStyling.getPropertyValue('margin-bottom') - ) + "px", + ]), "position": "absolute", - "top": -calculateSize( + "top": "-" + sum([ elementStyling.getPropertyValue('margin-top'), mainBoxStyles['border-width'] - ) + "px", - "right": -calculateSize( + ]), + "right": "-" + sum([ elementStyling.getPropertyValue('margin-right'), mainBoxStyles['border-width'] - ) + "px" + ]) }, // margin-bottom { "height": elementStyling.getPropertyValue('margin-bottom'), "width": elementBounds.width + "px", "position": "absolute", - "bottom": -calculateSize( + "bottom": "-" + sum([ mainBoxStyles['border-width'], elementStyling.getPropertyValue('margin-bottom') - ) + "px", - "left": -calculateSize( + ]), + "left": "-" + sum([ mainBoxStyles['border-width'] - ) + "px" + ]) }, { - "height": calculateSize( + "height": sum([ elementBounds.height, elementStyling.getPropertyValue('margin-top'), elementStyling.getPropertyValue('margin-bottom') - ) + "px", + ]), "width": elementStyling.getPropertyValue('margin-left'), "position": "absolute", - "top": -calculateSize( + "top": "-" + sum([ elementStyling.getPropertyValue('margin-top'), mainBoxStyles['border-width'] - ) + "px", - "left": -calculateSize( + ]), + "left": "-" + sum([ elementStyling.getPropertyValue('margin-left'), mainBoxStyles['border-width'] - ) + "px" + ]) } ]; From 108faeb037624d3c2dfd7e27079b0bc7d7a16c99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 19 Dec 2016 16:40:16 +0100 Subject: [PATCH 09/14] Redraw via requestAnimationFrame if element has transition / animation on it. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index b04746f84ee..0e4010573a7 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -35,6 +35,19 @@ function RemoteFunctions(config, remoteWSPort) { 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} @@ -251,11 +264,18 @@ function RemoteFunctions(config, remoteWSPort) { } 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) { @@ -450,7 +470,8 @@ function RemoteFunctions(config, remoteWSPort) { "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); From 004afc6c76d02d7ef6ea011bf42222a187488a39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 19 Dec 2016 23:16:07 +0100 Subject: [PATCH 10/14] PR improvements. Set experimental to false by default, if no config specified (caused the test to crash). Minor code quality improvements, removed duplicated variables. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 0e4010573a7..ba440baecde 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -33,7 +33,12 @@ function RemoteFunctions(config, remoteWSPort) { "use strict"; - var experimental = config.experimental; + var experimental; + if (!config) { + experimental = false; + } else { + experimental = config.experimental; + } var lastKeepAliveTime = Date.now(); var req, timeout; var animateHighlight = function (time) { @@ -267,15 +272,17 @@ function RemoteFunctions(config, remoteWSPort) { _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')); + elementStyling = window.getComputedStyle(element), + transitionDuration = parseFloat(elementStyling.getPropertyValue('transition-duration')), + animationDuration = parseFloat(elementStyling.getPropertyValue('animation-duration')); - if (transitionDuration) - animateHighlight(transitionDuration); - if (animationDuration) - animateHighlight(animationDuration); + if (transitionDuration) { + animateHighlight(transitionDuration); + } + + if (animationDuration) { + animateHighlight(animationDuration); + } // Don't highlight elements with 0 width & height if (elementBounds.width === 0 && elementBounds.height === 0) { @@ -294,8 +301,6 @@ function RemoteFunctions(config, remoteWSPort) { } }; - var elementStyling = window.getComputedStyle(element, null); - var sum = function (offsets) { var value = offsets.reduce(function (previous, current) { return parseInt(previous, 10) + parseInt(current, 10); @@ -462,16 +467,16 @@ function RemoteFunctions(config, remoteWSPort) { "padding": 0, "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, + "border-top-left-radius": elementStyling.borderTopLeftRadius, + "border-top-right-radius": elementStyling.borderTopRightRadius, + "border-bottom-left-radius": elementStyling.borderBottomLeftRadius, + "border-bottom-right-radius": elementStyling.borderBottomRightRadius, "border-style": "solid", "border-width": "1px", "border-color": "#00a2ff", "box-shadow": "0 0 1px #fff", "box-sizing": "border-box", - "transform": styles.getPropertyValue('transform') + "transform": elementStyling.getPropertyValue('transform') }; var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet); From ae19b237f389a50e7af91ba771f2a303bd2bb69f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Mon, 19 Dec 2016 23:24:03 +0100 Subject: [PATCH 11/14] Fix ESLINT errors. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 8 ++++---- src/LiveDevelopment/main.js | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index ba440baecde..916101bec05 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -43,13 +43,13 @@ function RemoteFunctions(config, remoteWSPort) { var req, timeout; var animateHighlight = function (time) { if(req) { - cancelAnimationFrame(req); - clearTimeout(timeout); + window.cancelAnimationFrame(req); + window.clearTimeout(timeout); } - req = requestAnimationFrame(redrawHighlights); + req = window.requestAnimationFrame(redrawHighlights); timeout = setTimeout(function () { - cancelAnimationFrame(req); + window.cancelAnimationFrame(req); req = null; }, time * 1000); }; diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index f65471bb15a..0d7b2df5da8 100644 --- a/src/LiveDevelopment/main.js +++ b/src/LiveDevelopment/main.js @@ -386,8 +386,9 @@ define(function main(require, exports, module) { .on("change", function () { config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT); - if (LiveDevImpl && LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) + if (LiveDevImpl && LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) { LiveDevImpl.agents.remote.call("updateConfig",JSON.stringify(config)); + } }); }); From 36c356e824ebf092341c6c24341fdb8f9b00d14b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Sat, 28 Jan 2017 22:12:05 +0100 Subject: [PATCH 12/14] drawMarginRect and drawPaddingRect functions now calculate the require size of highlight elements instead of manaul calculations on each element. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 182 +++++++----------- 1 file changed, 70 insertions(+), 112 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 916101bec05..2191924cf51 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -288,6 +288,67 @@ function RemoteFunctions(config, remoteWSPort) { if (elementBounds.width === 0 && elementBounds.height === 0) { return; } + + var realElBorder = { + "right": elementStyling.getPropertyValue('border-right-width'), + "left": elementStyling.getPropertyValue('border-left-width'), + "top": elementStyling.getPropertyValue('border-top-width'), + "bottom": elementStyling.getPropertyValue('border-bottom-width'), + }; + + var innerWidth = elementBounds.width - parseInt(realElBorder.left) - parseInt(realElBorder.right); + var innerHeight = elementBounds.height - parseInt(realElBorder.top) - parseInt(realElBorder.bottom); + + var visualisations = []; + visualisations['horizontal'] = "left, right"; + visualisations['vertical'] = "top, bottom"; + + var drawPaddingRect = function(side) { + var elStyling = {}; + + if(visualisations['horizontal'].indexOf(side) >= 0) { + elStyling['width'] = elementStyling.getPropertyValue('padding-' + side); + elStyling['height'] = innerHeight + "px"; + elStyling['top'] = realElBorder.top; + + } else { + elStyling['height'] = elementStyling.getPropertyValue('padding-' + side); + elStyling['width'] = innerWidth + "px"; + elStyling['left'] = realElBorder.left; + } + + elStyling[side] = realElBorder[side]; + elStyling['position'] = 'absolute'; + + return elStyling; + }; + + var drawMarginRect = function(side) { + var elStyling = {}; + + var margin = []; + margin['right'] = parseInt(elementStyling.getPropertyValue('margin-right')); + margin['top'] = parseInt(elementStyling.getPropertyValue('margin-top')); + margin['bottom'] = parseInt(elementStyling.getPropertyValue('margin-bottom')); + margin['left'] = parseInt(elementStyling.getPropertyValue('margin-left')); + + + if(visualisations['horizontal'].indexOf(side) >= 0) { + elStyling['width'] = elementStyling.getPropertyValue('margin-' + side); + elStyling['height'] = elementBounds.height + margin['top'] + margin['bottom'] + "px"; + elStyling['top'] = "-" + margin['top'] + "px"; + + } else { + elStyling['height'] = elementStyling.getPropertyValue('margin-' + side); + elStyling['width'] = elementBounds.width + "px"; + elStyling['left'] = 0; + } + + elStyling[side] = "-" + margin[side] + "px"; + elStyling['position'] = 'absolute'; + + return elStyling; + }; var setVisibility = function (el) { if ( @@ -301,124 +362,21 @@ function RemoteFunctions(config, remoteWSPort) { } }; - var sum = function (offsets) { - var value = offsets.reduce(function (previous, current) { - return parseInt(previous, 10) + parseInt(current, 10); - }); - - return value + "px"; - }; - var mainBoxStyles = config.remoteHighlight.stylesToSet; + mainBoxStyles['border'] = 'none'; var paddingVisualisations = [ - // padding-top - { - "height": elementStyling.getPropertyValue('padding-top'), - "width": elementBounds.width + "px", - "position": "absolute", - "top": "-" + sum([ - mainBoxStyles['border-width'] - ]), - "left": sum([ - mainBoxStyles['border-width'] - ]) - }, - // padding-right - { - "width": elementStyling.getPropertyValue('padding-right'), - "height": elementBounds.height + "px", - "position": "absolute", - "top": 0, - "right": "-" + sum([ - mainBoxStyles['border-width'] - ]) - }, - // padding-bottom - { - "height": elementStyling.getPropertyValue('padding-bottom'), - "width": elementBounds.width + "px", - "position": "absolute", - "bottom": "-" + sum([ - mainBoxStyles['border-width'] - ]), - "left": 0 - }, - // padding-left - { - "height": elementBounds.height + "px", - "width": elementStyling.getPropertyValue('padding-left'), - "position": "absolute", - "top": 0, - "left": "-" + sum([ - mainBoxStyles['border-width'] - ]) - } + drawPaddingRect('top'), + drawPaddingRect('right'), + drawPaddingRect('bottom'), + drawPaddingRect('left') ]; var marginVisualisations = [ - // margin-top - { - "height": elementStyling.getPropertyValue('margin-top'), - "width": elementBounds.width + "px", - "position": "absolute", - "top": "-" + sum([ - elementStyling.getPropertyValue('margin-top'), - mainBoxStyles['border-width'] - ]), - "left": "-" + sum([ - mainBoxStyles['border-width'] - ]) - }, - // margin-right - { - "width": elementStyling.getPropertyValue('margin-right'), - "height": - sum([ - elementBounds.height, - elementStyling.getPropertyValue('margin-top'), - elementStyling.getPropertyValue('margin-bottom') - ]), - "position": "absolute", - "top": "-" + sum([ - elementStyling.getPropertyValue('margin-top'), - mainBoxStyles['border-width'] - ]), - "right": "-" + sum([ - elementStyling.getPropertyValue('margin-right'), - mainBoxStyles['border-width'] - ]) - }, - // margin-bottom - { - "height": elementStyling.getPropertyValue('margin-bottom'), - "width": elementBounds.width + "px", - "position": "absolute", - "bottom": "-" + sum([ - mainBoxStyles['border-width'], - elementStyling.getPropertyValue('margin-bottom') - ]), - "left": "-" + sum([ - mainBoxStyles['border-width'] - ]) - }, - { - "height": sum([ - elementBounds.height, - elementStyling.getPropertyValue('margin-top'), - elementStyling.getPropertyValue('margin-bottom') - ]), - "width": elementStyling.getPropertyValue('margin-left'), - "position": "absolute", - "top": "-" + sum([ - elementStyling.getPropertyValue('margin-top'), - mainBoxStyles['border-width'] - ]), - "left": "-" + sum([ - elementStyling.getPropertyValue('margin-left'), - mainBoxStyles['border-width'] - ]) - } + drawMarginRect('top'), + drawMarginRect('right'), + drawMarginRect('bottom'), + drawMarginRect('left') ]; var setupVisualisations = function (arr, config) { From 24b2e6b0f1a0acf73f6d9c6fc080b88520faaf9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Wed, 15 Feb 2017 15:07:30 +0100 Subject: [PATCH 13/14] Temporary workaround for transform issue. --- src/LiveDevelopment/Agents/RemoteFunctions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 2191924cf51..62c9a59abd3 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -386,6 +386,7 @@ function RemoteFunctions(config, remoteWSPort) { // Applies to every visualisationElement (padding or margin div) arr[i]["box-sizing"] = "border-box"; + arr[i]["transform"] = "none"; var el = window.document.createElement("div"), styles = Object.assign( {}, @@ -433,8 +434,7 @@ function RemoteFunctions(config, remoteWSPort) { "border-width": "1px", "border-color": "#00a2ff", "box-shadow": "0 0 1px #fff", - "box-sizing": "border-box", - "transform": elementStyling.getPropertyValue('transform') + "box-sizing": "border-box" }; var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet); From 12b882d3f8f59f335e3b8d0e84e324aebaed3595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Po=C5=82owniak?= Date: Fri, 24 Mar 2017 11:45:29 +0100 Subject: [PATCH 14/14] Formatting improvements --- src/LiveDevelopment/Agents/RemoteFunctions.js | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js index 62c9a59abd3..8f8d3d0553a 100644 --- a/src/LiveDevelopment/Agents/RemoteFunctions.js +++ b/src/LiveDevelopment/Agents/RemoteFunctions.js @@ -40,19 +40,19 @@ function RemoteFunctions(config, remoteWSPort) { experimental = config.experimental; } var lastKeepAliveTime = Date.now(); - var req, timeout; - var animateHighlight = function (time) { - if(req) { - window.cancelAnimationFrame(req); - window.clearTimeout(timeout); - } - req = window.requestAnimationFrame(redrawHighlights); - - timeout = setTimeout(function () { - window.cancelAnimationFrame(req); - req = null; - }, time * 1000); - }; + var req, timeout; + var animateHighlight = function (time) { + if(req) { + window.cancelAnimationFrame(req); + window.clearTimeout(timeout); + } + req = window.requestAnimationFrame(redrawHighlights); + + timeout = setTimeout(function () { + window.cancelAnimationFrame(req); + req = null; + }, time * 1000); + }; /** * @type {DOMEditHandler} @@ -290,23 +290,24 @@ function RemoteFunctions(config, remoteWSPort) { } var realElBorder = { - "right": elementStyling.getPropertyValue('border-right-width'), - "left": elementStyling.getPropertyValue('border-left-width'), - "top": elementStyling.getPropertyValue('border-top-width'), - "bottom": elementStyling.getPropertyValue('border-bottom-width'), + right: elementStyling.getPropertyValue('border-right-width'), + left: elementStyling.getPropertyValue('border-left-width'), + top: elementStyling.getPropertyValue('border-top-width'), + bottom: elementStyling.getPropertyValue('border-bottom-width') }; var innerWidth = elementBounds.width - parseInt(realElBorder.left) - parseInt(realElBorder.right); var innerHeight = elementBounds.height - parseInt(realElBorder.top) - parseInt(realElBorder.bottom); - var visualisations = []; - visualisations['horizontal'] = "left, right"; - visualisations['vertical'] = "top, bottom"; + var visualisations = { + horizontal: "left, right", + vertical: "top, bottom" + }; var drawPaddingRect = function(side) { var elStyling = {}; - if(visualisations['horizontal'].indexOf(side) >= 0) { + if (visualisations.horizontal.indexOf(side) >= 0) { elStyling['width'] = elementStyling.getPropertyValue('padding-' + side); elStyling['height'] = innerHeight + "px"; elStyling['top'] = realElBorder.top; @@ -326,7 +327,7 @@ function RemoteFunctions(config, remoteWSPort) { var drawMarginRect = function(side) { var elStyling = {}; - var margin = []; + var margin = []; margin['right'] = parseInt(elementStyling.getPropertyValue('margin-right')); margin['top'] = parseInt(elementStyling.getPropertyValue('margin-top')); margin['bottom'] = parseInt(elementStyling.getPropertyValue('margin-bottom')); @@ -363,7 +364,7 @@ function RemoteFunctions(config, remoteWSPort) { }; var mainBoxStyles = config.remoteHighlight.stylesToSet; - mainBoxStyles['border'] = 'none'; + mainBoxStyles['border'] = 'none'; var paddingVisualisations = [ drawPaddingRect('top'), @@ -394,10 +395,7 @@ function RemoteFunctions(config, remoteWSPort) { arr[i] ); - _setStyleValues( - styles, - el.style - ); + _setStyleValues(styles, el.style); highlight.appendChild(el); }