Bug 1255351 - box model highlighter: all the guidelines now are overlap the node; r=gl
authorMatteo Ferretti <mferretti@mozilla.com>
Fri, 10 Mar 2017 02:32:09 +0100
changeset 395491 f152ca619a019f1b848d6f15493e84d9aca42137
parent 395490 7e5582c0d934215e7bdeca844a994e47de0c31ce
child 395492 b1b91f7861ec0e8b03135192c0e0024d76ae5930
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1255351, 1345917, 1151421, 1187970
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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");
     }
   },