Bug 1255351 - box model highlighter: all the guidelines now are overlap the node; r=gl draft
authorMatteo Ferretti <mferretti@mozilla.com>
Fri, 10 Mar 2017 02:32:09 +0100
changeset 496317 fcd338c7538b58d172c9bb82ae8436b54c2c1b0e
parent 496308 dbe10b788f4f56309536b854b1877928804bb2b8
child 548585 1e72bce09e233d7758c447f780c4921ab6cfc9a0
push id48567
push userbmo:zer0@mozilla.com
push dateFri, 10 Mar 2017 01:32:59 +0000
reviewersgl
bugs1255351, 1345917, 1151421, 1187970
milestone55.0a1
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
devtools/client/inspector/test/browser_inspector_highlighter-inline.js
devtools/client/inspector/test/browser_inspector_highlighter-options.js
devtools/client/shared/test/test-actor.js
devtools/server/actors/highlighters/box-model.js
--- 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");
     }
   },