Bug 1348306 - use the display density pixel ratio to render lines using logical pixels; r=pbro

The display density is basically the line size, but we have to calculate the
`offest` for translation accordingly.

MozReview-Commit-ID: LVAWL8ZtkrU

--HG--
extra : rebase_source : 175a7aef06036856e2dfd52ac76e02c049608b6f

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

@@ -843,16 +843,19 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    *         The grid line type - "edge", "explicit", or "implicit".
    */
   renderLine(linePos, startPos, endPos, dimensionType, lineType) {
-    let ratio = this.win.devicePixelRatio;
+    let { devicePixelRatio } = this.win;
+    let lineWidth = getDisplayPixelRatio(this.win);
+    let offset = (lineWidth / 2) % 1;
 
-    linePos = Math.round(linePos * ratio);
-    startPos = Math.round(startPos * ratio);
-    endPos = Math.round(endPos * ratio);
+    linePos = Math.round(linePos * devicePixelRatio);
+    startPos = Math.round(startPos * devicePixelRatio);
+    endPos = Math.round(endPos * devicePixelRatio);
 
     this.ctx.save();
     this.ctx.setLineDash(GRID_LINES_PROPERTIES[lineType].lineDash);
     this.ctx.beginPath();
-    this.ctx.translate(.5, .5);
+    this.ctx.translate(offset, offset);
+    this.ctx.lineWidth = lineWidth;
 
     if (dimensionType === COLUMNS) {
       this.ctx.moveTo(linePos, startPos);
@@ -883,7 +886,7 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    */
   renderGridLineNumber(lineNumber, linePos, startPos, dimensionType) {
-    let devicePixelRatio = this.win.devicePixelRatio;
+    let { devicePixelRatio } = this.win;
     let displayPixelRatio = getDisplayPixelRatio(this.win);
 
     linePos = Math.round(linePos * devicePixelRatio);
@@ -923,15 +926,15 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    */
   renderGridGap(linePos, startPos, endPos, breadth, dimensionType) {
-    let ratio = this.win.devicePixelRatio;
+    let { devicePixelRatio } = this.win;
 
-    linePos = Math.round(linePos * ratio);
-    startPos = Math.round(startPos * ratio);
-    endPos = Math.round(endPos * ratio);
-    breadth = Math.round(breadth * ratio);
+    linePos = Math.round(linePos * devicePixelRatio);
+    startPos = Math.round(startPos * devicePixelRatio);
+    endPos = Math.round(endPos * devicePixelRatio);
+    breadth = Math.round(breadth * devicePixelRatio);
 
     this.ctx.save();
-    this.ctx.fillStyle = this.getGridGapPattern(ratio, dimensionType);
+    this.ctx.fillStyle = this.getGridGapPattern(devicePixelRatio, dimensionType);
 
     if (dimensionType === COLUMNS) {
       this.ctx.fillRect(linePos, startPos, breadth, endPos - startPos);