Bug 1386047 - Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations. r=pbro

MozReview-Commit-ID: 1tDTGHEixCS

--HG--
extra : rebase_source : 43036a69a3919cbc24658b06fb8888d855d005e5

devtools/server/actors/highlighters/css-grid.js

@@ -1067,6 +1067,13 @@ class CssGridHighlighter extends AutoRefreshHighlighter {
         this.currentMatrix);
     }
 
+    // Find current angle of grid by measuring the angle of two arbitrary points,
+    // then rotate canvas, so the hash pattern stays 45deg to the gridlines.
+    let p1 = apply(this.currentMatrix, [0, 0]);
+    let p2 = apply(this.currentMatrix, [1, 0]);
+    let angleRad = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+    this.ctx.rotate(angleRad);
+
     this.ctx.fill();
     this.ctx.restore();
   }

devtools/server/actors/highlighters/flexbox.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const { AutoRefreshHighlighter } = require("./auto-refresh");
+const { apply } = require("devtools/shared/layout/dom-matrix-2d");
 const {
   CANVAS_SIZE,
   DEFAULT_COLOR,
@@ -364,6 +365,13 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
     let { bounds } = this.currentQuads.content[0];
     drawRect(this.ctx, 0, 0, bounds.width, bounds.height, this.currentMatrix);
 
+    // Find current angle of outer flex element by measuring the angle of two arbitrary
+    // points, then rotate canvas, so the hash pattern stays 45deg to the boundary.
+    let p1 = apply(this.currentMatrix, [0, 0]);
+    let p2 = apply(this.currentMatrix, [1, 0]);
+    let angleRad = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+    this.ctx.rotate(angleRad);
+
     this.ctx.fill();
     this.ctx.stroke();
     this.ctx.restore();