Bug 1255351 - box model highlighter: all the guidelines now are overlap the node; r=gl
This patch is fixing the issue mostly for 1dppx / 1dpi display.
For higher dpi a follow-up bug will be made once
bug 1345917 and
bug 1151421
are fixed; and it will be part of
bug 1187970.
MozReview-Commit-ID: 7XuED9ydGvB
--- a/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
@@ -58,19 +58,19 @@ add_task(function* () {
expectedContentRect.p3.y = Math.max(expectedContentRect.p3.y, p3.y);
expectedContentRect.p4.x = Math.min(expectedContentRect.p4.x, p4.x);
expectedContentRect.p4.y = Math.max(expectedContentRect.p4.y, p4.y);
}
let contentRect = yield testActor.getGuidesRectangle();
for (let point of ["p1", "p2", "p3", "p4"]) {
- is((contentRect[point].x),
- (expectedContentRect[point].x),
+ is(Math.round(contentRect[point].x),
+ (Math.round(expectedContentRect[point].x)),
"x coordinate of point " + point +
" of the content rectangle defined by the outer guides is correct");
- is((contentRect[point].y),
- (expectedContentRect[point].y),
+ is(Math.round(contentRect[point].y),
+ (Math.round(expectedContentRect[point].y)),
"y coordinate of point " + point +
" of the content rectangle defined by the outer guides is correct");
}
}
});
--- a/devtools/client/inspector/test/browser_inspector_highlighter-options.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-options.js
@@ -113,20 +113,20 @@ const TEST_DATA = [
let bottomY1 = yield testActor.getHighlighterNodeAttribute(
"box-model-guide-bottom", "y1");
let leftX1 = yield testActor.getHighlighterNodeAttribute(
"box-model-guide-left", "x1");
let {points} = yield testActor.getHighlighterRegionPath("padding");
points = points[0];
- is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
- is(Math.floor(rightX1), points[1][0], "Right guide's x1 is correct");
- is(Math.floor(bottomY1), points[2][1], "Bottom guide's y1 is correct");
- is(Math.ceil(leftX1), points[3][0], "Left guide's x1 is correct");
+ is(topY1, points[0][1], "Top guide's y1 is correct");
+ is(rightX1, points[1][0] - 1, "Right guide's x1 is correct");
+ is(bottomY1, points[2][1] - 1, "Bottom guide's y1 is correct");
+ is(leftX1, points[3][0], "Left guide's x1 is correct");
}
},
{
desc: "Guides can be drawn around a given region (2)",
options: {region: "margin"},
checkHighlighter: function* (testActor) {
let topY1 = yield testActor.getHighlighterNodeAttribute(
"box-model-guide-top", "y1");
@@ -135,20 +135,20 @@ const TEST_DATA = [
let bottomY1 = yield testActor.getHighlighterNodeAttribute(
"box-model-guide-bottom", "y1");
let leftX1 = yield testActor.getHighlighterNodeAttribute(
"box-model-guide-left", "x1");
let {points} = yield testActor.getHighlighterRegionPath("margin");
points = points[0];
- is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
- is(Math.floor(rightX1), points[1][0], "Right guide's x1 is correct");
- is(Math.floor(bottomY1), points[2][1], "Bottom guide's y1 is correct");
- is(Math.ceil(leftX1), points[3][0], "Left guide's x1 is correct");
+ is(topY1, points[0][1], "Top guide's y1 is correct");
+ is(rightX1, points[1][0] - 1, "Right guide's x1 is correct");
+ is(bottomY1, points[2][1] - 1, "Bottom guide's y1 is correct");
+ is(leftX1, points[3][0], "Left guide's x1 is correct");
}
},
{
desc: "When showOnly is used, other regions can be faded",
options: {showOnly: "margin", onlyRegionArea: true},
checkHighlighter: function* (testActor) {
for (let region of ["margin", "border", "padding", "content"]) {
let {d} = yield testActor.getHighlighterRegionPath(region);
--- a/devtools/client/shared/test/test-actor.js
+++ b/devtools/client/shared/test/test-actor.js
@@ -1055,19 +1055,19 @@ var TestActorFront = exports.TestActorFr
let lGuide = yield this._getGuideStatus("left");
if (!tGuide.visible || !rGuide.visible || !bGuide.visible || !lGuide.visible) {
return null;
}
return {
p1: {x: lGuide.x1, y: tGuide.y1},
- p2: {x: rGuide.x1, y: tGuide. y1},
- p3: {x: rGuide.x1, y: bGuide.y1},
- p4: {x: lGuide.x1, y: bGuide.y1}
+ p2: {x: +rGuide.x1 + 1, y: tGuide.y1},
+ p3: {x: +rGuide.x1 + 1, y: +bGuide.y1 + 1},
+ p4: {x: lGuide.x1, y: +bGuide.y1 + 1}
};
}),
waitForHighlighterEvent: protocol.custom(function (event) {
return this._waitForHighlighterEvent(event, this.toolbox.highlighter.actorID);
}, {
impl: "_waitForHighlighterEvent"
}),
--- a/devtools/server/actors/highlighters/box-model.js
+++ b/devtools/server/actors/highlighters/box-model.js
@@ -596,20 +596,20 @@ BoxModelHighlighter.prototype = extend(A
toShowY.push(val);
}
arr.splice(arr.lastIndexOf(val), 1);
}
}
}
// Move guide into place or hide it if no valid co-ordinate was found.
- this._updateGuide("top", toShowY[0]);
- this._updateGuide("right", toShowX[1]);
- this._updateGuide("bottom", toShowY[1]);
- this._updateGuide("left", toShowX[0]);
+ this._updateGuide("top", Math.round(toShowY[0]));
+ this._updateGuide("right", Math.round(toShowX[1]) - 1);
+ this._updateGuide("bottom", Math.round(toShowY[1] - 1));
+ this._updateGuide("left", Math.round(toShowX[0]));
},
_hideGuides: function () {
for (let side of BOX_MODEL_SIDES) {
this.getElement("guide-" + side).setAttribute("hidden", "true");
}
},