Bug 1368535 - translate the matrix also by element's borders; r=gl draft
authorMatteo Ferretti <mferretti@mozilla.com>
Tue, 06 Jun 2017 19:10:44 +0200
changeset 589708 174d64604b10a9e431dd03c78ee34b834d6e8b83
parent 589707 049ae745f107704daaf4871a122a2e7558522841
child 631978 1fbb8fa80484bd5f8a9e80f40c9b4fa3f065ca2e
push id62475
push userbmo:zer0@mozilla.com
push dateTue, 06 Jun 2017 17:15:04 +0000
reviewersgl
bugs1368535
milestone55.0a1
Bug 1368535 - translate the matrix also by element's borders; r=gl MozReview-Commit-ID: 6otecA8D18y
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1049,31 +1049,34 @@ CssGridHighlighter.prototype = extend(Au
   updateCurrentMatrix() {
     let origin = getNodeTransformOrigin(this.currentNode);
     let bounds = getNodeBounds(this.win, this.currentNode);
     let nodeMatrix = getNodeTransformationMatrix(this.currentNode);
     let computedStyle = this.currentNode.ownerGlobal.getComputedStyle(this.currentNode);
 
     let paddingTop = parseFloat(computedStyle.paddingTop);
     let paddingLeft = parseFloat(computedStyle.paddingLeft);
+    let borderTop = parseFloat(computedStyle.borderTopWidth);
+    let borderLeft = parseFloat(computedStyle.borderLeftWidth);
 
-    // Subtract padding values to compensate for top/left being moved by padding.
-    let ox = origin[0] - paddingLeft;
-    let oy = origin[1] - paddingTop;
+    // Subtract padding and border values to compensate for top/left being moved by
+    // padding and / or borders.
+    let ox = origin[0] - paddingLeft - borderLeft;
+    let oy = origin[1] - paddingTop - borderTop;
 
     let m = identity();
 
     // First, we scale based on the display's current pixel ratio.
     m = multiply(m, scale(getDisplayPixelRatio(this.win)));
     // Then we translate the origin to the node's top left corner.
     m = multiply(m, translate(bounds.p1.x, bounds.p1.y));
     // And scale based on the current zoom factor.
     m = multiply(m, scale(getCurrentZoom(this.win)));
-    // Then translate the origin based on the node's padding values.
-    m = multiply(m, translate(paddingLeft, paddingTop));
+    // Then translate the origin based on the node's padding and border values.
+    m = multiply(m, translate(paddingLeft + borderLeft, paddingTop + borderTop));
     // Finally, we can apply the current node's transformation matrix, taking in account
     // the `transform-origin` property and the node's top and left padding.
     if (nodeMatrix) {
       m = multiply(m, translate(ox, oy));
       m = multiply(m, nodeMatrix);
       m = multiply(m, translate(-ox, -oy));
       this.hasNodeTransformations = true;
     } else {