From ddc362186a6f41f1e174c06c60125902ab4912b8 Mon Sep 17 00:00:00 2001
From: Matteo Ferretti <mferretti@mozilla.com>
Date: Fri, 17 Mar 2017 12:07:11 +0100
Subject: [PATCH] Bug 1348267 - used display density pixel ratio to scale the
 font size; r=pbro

Added also a `getDisplayPixelRatio` method, since we're probably going to use it
more often, instead of doing this math all the time in the code, it will be more
clear.

MozReview-Commit-ID: HLtbwDBvbF6

--HG--
extra : rebase_source : aca60ea8c57e175c2cca5ff7ed478796c5b6c53f
---
 .../server/actors/highlighters/css-grid.js     | 18 ++++++++++++------
 devtools/shared/layout/utils.js                | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js
index c6e56a3c21c3..2e1e9e831ac2 100644
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -15,6 +15,7 @@ const {
 } = require("./utils/markup");
 const {
   getCurrentZoom,
+  getDisplayPixelRatio,
   setIgnoreLayoutChanges,
   getWindowDimensions,
   getMaxSurfaceSize,
@@ -28,6 +29,9 @@ const DEFAULT_GRID_COLOR = "#4B0082";
 const COLUMNS = "cols";
 const ROWS = "rows";
 
+const GRID_FONT_SIZE = 10;
+const GRID_FONT_FAMILY = "sans-serif";
+
 const GRID_LINES_PROPERTIES = {
   "edge": {
     lineDash: [0, 0],
@@ -879,19 +883,21 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    */
   renderGridLineNumber(lineNumber, linePos, startPos, dimensionType) {
-    let ratio = this.win.devicePixelRatio;
+    let devicePixelRatio = this.win.devicePixelRatio;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
 
-    linePos = Math.round(linePos * ratio);
-    startPos = Math.round(startPos * ratio);
+    linePos = Math.round(linePos * devicePixelRatio);
+    startPos = Math.round(startPos * devicePixelRatio);
 
     this.ctx.save();
 
+    let fontSize = (GRID_FONT_SIZE * displayPixelRatio);
+    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
+
     let textWidth = this.ctx.measureText(lineNumber).width;
-    // Guess the font height based on the measured width
-    let textHeight = textWidth * 2;
 
     if (dimensionType === COLUMNS) {
-      let yPos = Math.max(startPos, textHeight);
+      let yPos = Math.max(startPos, fontSize);
       this.ctx.fillText(lineNumber, linePos, yPos);
     } else {
       let xPos = Math.max(startPos, textWidth);
diff --git a/devtools/shared/layout/utils.js b/devtools/shared/layout/utils.js
index 5b70c46ae821..e595c6219e65 100644
--- a/devtools/shared/layout/utils.js
+++ b/devtools/shared/layout/utils.js
@@ -632,6 +632,23 @@ function getCurrentZoom(node) {
 }
 exports.getCurrentZoom = getCurrentZoom;
 
+/**
+ * Get the display pixel ratio for a given window.
+ * The `devicePixelRatio` property is affected by the zoom (see bug 809788), so we have to
+ * divide by the zoom value in order to get just the display density, expressed as pixel
+ * ratio (the physical display pixel compares to a pixel on a “normal” density screen).
+ *
+ * @param {DOMNode|DOMWindow}
+ *        The node for which the zoom factor should be calculated, or its
+ *        owner window.
+ * @return {Number}
+ */
+function getDisplayPixelRatio(node) {
+  let win = getWindowFor(node);
+  return win.devicePixelRatio / utilsFor(win).fullZoom;
+}
+exports.getDisplayPixelRatio = getDisplayPixelRatio;
+
 /**
  * Returns the window's dimensions for the `window` given.
  *