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

Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one #13297

Merged
merged 2 commits into from
Apr 24, 2017
Merged

Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one #13297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe9237e
Fix highlighting elements with border and transform-origin property.
Apr 10, 2017
ad915c7
Merge branch 'master' into worie/13274-lp-highlight-transform
Worie Apr 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 39 additions & 28 deletions src/LiveDevelopment/Agents/RemoteFunctions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ function RemoteFunctions(config, remoteWSPort) {
elementStyling = window.getComputedStyle(element),
transitionDuration = parseFloat(elementStyling.getPropertyValue('transition-duration')),
animationDuration = parseFloat(elementStyling.getPropertyValue('animation-duration'));
if (transitionDuration) {
animateHighlight(transitionDuration);
}
Expand All @@ -296,8 +296,21 @@ function RemoteFunctions(config, remoteWSPort) {
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 borderBox = elementStyling.boxSizing === 'border-box';

var innerWidth = parseInt(elementStyling.width),
innerHeight = parseInt(elementStyling.height),
outerHeight = innerHeight,
outerWidth = innerWidth;

if (!borderBox) {
innerWidth += parseInt(elementStyling.paddingLeft) + parseInt(elementStyling.paddingRight);
innerHeight += parseInt(elementStyling.paddingTop) + parseInt(elementStyling.paddingBottom);
outerWidth = innerWidth + parseInt(realElBorder.right) +
parseInt(realElBorder.left),
outerHeight = innerHeight + parseInt(realElBorder.bottom) + parseInt(realElBorder.top);
}


var visualisations = {
horizontal: "left, right",
Expand All @@ -306,19 +319,27 @@ function RemoteFunctions(config, remoteWSPort) {

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;
elStyling['height'] = innerHeight + "px";
elStyling['top'] = 0;

if (borderBox) {
elStyling['height'] = innerHeight - parseInt(realElBorder.top) - parseInt(realElBorder.bottom) + "px";
}

} else {
elStyling['height'] = elementStyling.getPropertyValue('padding-' + side);
elStyling['width'] = innerWidth + "px";
elStyling['left'] = realElBorder.left;
elStyling['left'] = 0;

if (borderBox) {
elStyling['width'] = innerWidth - parseInt(realElBorder.left) - parseInt(realElBorder.right) + "px";
}
}

elStyling[side] = realElBorder[side];
elStyling[side] = 0;
elStyling['position'] = 'absolute';

return elStyling;
Expand All @@ -333,19 +354,18 @@ function RemoteFunctions(config, remoteWSPort) {
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";

elStyling['width'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['height'] = outerHeight + margin['top'] + margin['bottom'] + "px";
elStyling['top'] = "-" + (margin['top'] + parseInt(realElBorder.top)) + "px";
} else {
elStyling['height'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['width'] = elementBounds.width + "px";
elStyling['left'] = 0;
elStyling['height'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['width'] = outerWidth + "px";
elStyling['left'] = "-" + realElBorder.left;
}

elStyling[side] = "-" + margin[side] + "px";
elStyling[side] = "-" + (margin[side] + parseInt(realElBorder[side])) + "px";
elStyling['position'] = 'absolute';

return elStyling;
Expand All @@ -364,7 +384,6 @@ function RemoteFunctions(config, remoteWSPort) {
};

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

var paddingVisualisations = [
drawPaddingRect('top'),
Expand All @@ -386,7 +405,6 @@ function RemoteFunctions(config, remoteWSPort) {
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(
Expand Down Expand Up @@ -424,13 +442,6 @@ function RemoteFunctions(config, remoteWSPort) {
"padding": 0,
"position": "absolute",
"pointer-events": "none",
"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"
};
Expand Down Expand Up @@ -1019,10 +1030,10 @@ function RemoteFunctions(config, remoteWSPort) {
_ws.onopen = function () {
window.document.addEventListener("click", onDocumentClick);
};
_ws.onmessage = function (evt) {
};
_ws.onclose = function () {
// websocket is closed
window.document.removeEventListener("click", onDocumentClick);
Expand Down
4 changes: 1 addition & 3 deletions src/LiveDevelopment/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,7 @@ define(function main(require, exports, module) {
"marginStyling": {
"background-color": "rgba(21, 165, 255, 0.58)"
},
"stylesToSet": {
"border-width": "1px"
},
"borderColor": "rgba(21, 165, 255, 0.85)",
"showPaddingMargin": true
}, {
description: "LivePreview highlight settings"
Expand Down