From 87ac77296b83a3761b15431cb17555a41a086158 Mon Sep 17 00:00:00 2001 From: Matteo Ferretti Date: Fri, 17 Mar 2017 15:09:23 +0100 Subject: [PATCH] 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 --- .../server/actors/highlighters/css-grid.js | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js index 2e1e9e831ac2..e3fd5bd85d0e 100644 --- a/devtools/server/actors/highlighters/css-grid.js +++ b/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);