Bug 1321467 - display grid line numbers with extended grid lines;r=zer0
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 21 Feb 2017 17:51:01 +0100
changeset 373281 c1d68f17f3c76513f1913dfdbefa28691eda7f2a
parent 373280 0b55ea90ed2aba6c3bc79bd297a3389d8ed3cfdf
child 373282 43230f4d5ea214340873cc3a9fff8d0f930a0296
push id10863
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 23:02:23 +0000
treeherdermozilla-aurora@0931190cd725 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszer0
bugs1321467
milestone54.0a1
Bug 1321467 - display grid line numbers with extended grid lines;r=zer0 Clamp the x and y positions for the grid line numbers to make sure they are always visible, even if extended grid lines is turned on. MozReview-Commit-ID: 3sxdWtKyXKN
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -647,21 +647,26 @@ CssGridHighlighter.prototype = extend(Au
    * @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) {
     this.ctx.save();
 
+    let textWidth = this.ctx.measureText(lineNumber).width;
+    // Guess the font height based on the measured width
+    let textHeight = textWidth * 2;
+
     if (dimensionType === COLUMNS) {
-      this.ctx.fillText(lineNumber, linePos, startPos);
+      let yPos = Math.max(startPos, textHeight);
+      this.ctx.fillText(lineNumber, linePos, yPos);
     } else {
-      let textWidth = this.ctx.measureText(lineNumber).width;
-      this.ctx.fillText(lineNumber, startPos - textWidth, linePos);
+      let xPos = Math.max(startPos, textWidth);
+      this.ctx.fillText(lineNumber, xPos - textWidth, linePos);
     }
 
     this.ctx.restore();
   },
 
   /**
    * Render the grid gap area on the css grid highlighter canvas.
    *