Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Commit

Permalink
#7276 Live Preview highlight customization (#12949)
Browse files Browse the repository at this point in the history 
* Live Preview visual customization (colors of highlight can be customized via user preferences)

* 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

* Allow to animate transform property via transition

* Remove old vendor prefixes from transitionValues in RemoteFunctions.js

* updateConfig RemoteFunctions.js method
Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session.

* Show margin and paddings in live preview.

* Do not show element if it has width or height equal to 0. A little bit of clean up

* PR improvements
calculateSize is renamed to sum. (better naming conventions are welcome). sum now takes an array as argument. It returns sum of parsed array elements, suffixed with „px”.

* Redraw via requestAnimationFrame if element has transition / animation on it.

* PR improvements.
Set experimental to false by default, if no config specified (caused the test to crash).
Minor code quality improvements, removed duplicated variables.

* Fix ESLINT errors.

* drawMarginRect and drawPaddingRect functions now calculate the require size of highlight elements instead of manaul calculations on each element.

The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary.

* Temporary workaround for transform issue.

* Formatting improvements
  • Loading branch information
@Worie @petetnt
Worie authored and petetnt committed Apr 6, 2017
1 parent 24e79f7 commit 0442881
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/LiveDevelopment/Agents/RemoteAgent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
189 changes: 169 additions & 20 deletions src/LiveDevelopment/Agents/RemoteFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,29 @@
* 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;
if (!config) {
experimental = false;
} else {
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);
};

/**
* @type {DOMEditHandler}
Expand Down Expand Up @@ -250,17 +269,147 @@ function RemoteFunctions(experimental, remoteWSPort) {
}
return false;
},

_makeHighlightDiv: function (element, doAnimation) {
var elementBounds = element.getBoundingClientRect(),
highlight = window.document.createElement("div"),
styles = window.getComputedStyle(element);
elementStyling = window.getComputedStyle(element),
transitionDuration = parseFloat(elementStyling.getPropertyValue('transition-duration')),
animationDuration = parseFloat(elementStyling.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) {
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 = {
horizontal: "left, right",
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 (
!config.remoteHighlight.showPaddingMargin ||
parseInt(el.height, 10) <= 0 ||
parseInt(el.width, 10) <= 0
) {
el.display = 'none';
} else {
el.display = 'block';
}
};

var mainBoxStyles = config.remoteHighlight.stylesToSet;
mainBoxStyles['border'] = 'none';

var paddingVisualisations = [
drawPaddingRect('top'),
drawPaddingRect('right'),
drawPaddingRect('bottom'),
drawPaddingRect('left')
];

var marginVisualisations = [
drawMarginRect('top'),
drawMarginRect('right'),
drawMarginRect('bottom'),
drawMarginRect('left')
];

var setupVisualisations = function (arr, config) {
var i;
for (i = 0; i < arr.length; i++) {
setVisibility(arr[i]);

// 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(
{},
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);
Expand All @@ -275,31 +424,25 @@ function RemoteFunctions(experimental, 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"
};

var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet);

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",
"-webkit-transition-duration": "300ms, 2.3s",
"transition-property": "opacity, background-color",
"transition-property": "opacity, background-color, transform",
"transition-duration": "300ms, 2.3s"
};

Expand All @@ -311,7 +454,7 @@ function RemoteFunctions(experimental, remoteWSPort) {
}
}

_setStyleValues(stylesToSet, highlight.style);
_setStyleValues(mergedStyles, highlight.style);
_setStyleValues(
doAnimation ? animateStartValues : animateEndValues,
highlight.style
Expand Down Expand Up @@ -842,6 +985,11 @@ function RemoteFunctions(experimental, 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);
Expand Down Expand Up @@ -894,6 +1042,7 @@ function RemoteFunctions(experimental, remoteWSPort) {
"highlightRule" : highlightRule,
"redrawHighlights" : redrawHighlights,
"applyDOMEdits" : applyDOMEdits,
"getSimpleDOM" : getSimpleDOM
"getSimpleDOM" : getSimpleDOM,
"updateConfig" : updateConfig
};
}
37 changes: 37 additions & 0 deletions src/LiveDevelopment/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,33 @@ 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": 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"
});

/** Toggles or sets the preference **/
function _togglePref(key, value) {
var val,
Expand Down Expand Up @@ -302,6 +329,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);
Expand Down Expand Up @@ -353,6 +381,15 @@ define(function main(require, exports, module) {
_setImplementation(prefs.get(PREF_MULTIBROWSER));
}
});

remoteHighlightPref
.on("change", function () {
config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT);

if (LiveDevImpl && LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) {
LiveDevImpl.agents.remote.call("updateConfig",JSON.stringify(config));
}
});

});

Expand Down

0 comments on commit 0442881

Please sign in to comment.