From b5b7087d3003624b2abbdcf692e86ee5e0d078b9 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 24 Aug 2016 09:08:17 -0400
Subject: [PATCH] Bug 1249557 - Part 1: Display the line numbers in the css
 grid highlighter r=pbro

---
 .../server/actors/highlighters/css-grid.js    | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js
index c6b5b6e64250..c7bd44b679b8 100644
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -42,7 +42,9 @@ const GRID_LINES_PROPERTIES = {
  * h.destroy();
  *
  * Available Options:
- * - infiniteLines {Boolean}
+ * - showGridLineNumbers {Boolean}
+ *   Displays the grid line numbers
+ * - showInfiniteLines {Boolean}
  *   Displays an infinite line to represent the grid lines
  */
 function CssGridHighlighter(highlighterEnv) {
@@ -243,7 +245,7 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     let lineStartPos = (bounds[crossSide] / getCurrentZoom(this.win)) + startPos;
     let lineEndPos = (bounds[crossSide] / getCurrentZoom(this.win)) + endPos;
 
-    if (this.options.infiniteLines) {
+    if (this.options.showInfiniteLines) {
       lineStartPos = 0;
       lineEndPos = parseInt(this.canvas.getAttribute(mainSize), 10);
     }
@@ -254,6 +256,10 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
       let line = gridDimension.lines[i];
       let linePos = (bounds[mainSide] / getCurrentZoom(this.win)) + line.start;
 
+      if (this.options.showGridLineNumbers) {
+        this.renderGridLineNumber(line.number, linePos, lineStartPos, dimensionType);
+      }
+
       if (i == 0 || i == lastEdgeLineIndex) {
         this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType, "edge");
       } else {
@@ -291,7 +297,7 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     this.ctx.beginPath();
     this.ctx.translate(.5, .5);
 
-    if (dimensionType == COLUMNS) {
+    if (dimensionType === COLUMNS) {
       this.ctx.moveTo(linePos, startPos);
       this.ctx.lineTo(linePos, endPos);
     } else {
@@ -304,6 +310,28 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     this.ctx.restore();
   },
 
+  /**
+   * Render the grid line number on the css grid highlighter canvas.
+   *
+   * @param  {Number} lineNumber
+   *         The grid line number.
+   * @param  {Number} linePos
+   *         The line position along the x-axis for a column grid line and
+   *         y-axis for a row grid line.
+   * @param  {Number} startPos
+   *         The start position of the cross side of the grid line.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   */
+  renderGridLineNumber(lineNumber, linePos, startPos, dimensionType) {
+    if (dimensionType === COLUMNS) {
+      this.ctx.fillText(lineNumber, linePos, startPos);
+    } else {
+      let textWidth = this.ctx.measureText(lineNumber).width;
+      this.ctx.fillText(lineNumber, startPos - textWidth, linePos);
+    }
+  },
+
   _hide() {
     setIgnoreLayoutChanges(true);
     this._hideGrid();