Bug 1380544 - Overlapping grid line numbers should display as a stack. r=zer0
authorMicah Tigley <tigleym@gmail.com>
Mon, 24 Jul 2017 21:36:26 -0600
changeset 420004 14755efcbf65e408fd122d027af8a81ddd2b7b08
parent 420003 0c66a9949ff91d545f1a8a0ab7e0b1dc470a3f21
child 420005 15da8084e9617944e79330343134391ca6a0d8f9
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszer0
bugs1380544
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1380544 - Overlapping grid line numbers should display as a stack. r=zer0 MozReview-Commit-ID: 4XRA0AiLzty
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1326,32 +1326,50 @@ class CssGridHighlighter extends AutoRef
    * column or row lines.
    *
    * see @param for renderLines.
    */
   renderLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
               startPos) {
     let lineStartPos = startPos;
 
+    // Keep track of the number of collapsed lines per line position
+    let stackedLines = [];
+
     for (let i = 0; i < gridDimension.lines.length; i++) {
       let line = gridDimension.lines[i];
       let linePos = line.start;
 
       // If you place something using negative numbers, you can trigger some implicit grid
       // creation above and to the left of the explicit grid (assuming a horizontal-tb
       // writing mode).
       // The first explicit grid line gets the number of 1; any implicit grid lines
       // before 1 get negative numbers, but do not get any positivity numbers.
       // Since here we're rendering only the positive line numbers, we have to skip any
       // implicit grid lines before the first tha is explicit.
       // For such lines the API returns always 0 as line's number.
       if (line.number === 0) {
         continue;
       }
 
+      // Check for overlapping lines. We render a second box beneath the last overlapping
+      // line number to indicate there are lines beneath it.
+      const gridLine = gridDimension.tracks[line.number - 1];
+      if (gridLine) {
+        const { breadth }  = gridLine;
+        if (breadth === 0) {
+          stackedLines.push(gridDimension.lines[i].number);
+          if (stackedLines.length > 0) {
+            this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
+              dimensionType, 1);
+          }
+          continue;
+        }
+      }
+
       this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
         dimensionType);
     }
   }
 
   /**
    * Render the grid line on the css grid highlighter canvas.
    *
@@ -1420,18 +1438,21 @@ class CssGridHighlighter extends AutoRef
    *         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  {Number} breadth
    *         The grid line breadth value.
    * @param  {String} dimensionType
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {Number||undefined} stackedLineIndex
+   *         The line index position of the stacked line.
    */
-  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType) {
+  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType,
+    stackedLineIndex) {
     let displayPixelRatio = getDisplayPixelRatio(this.win);
     let { devicePixelRatio } = this.win;
     let offset = (displayPixelRatio / 2) % 1;
 
     linePos = Math.round(linePos);
     startPos = Math.round(startPos);
     breadth = Math.round(breadth);
 
@@ -1471,32 +1492,42 @@ class CssGridHighlighter extends AutoRef
       y = linePos + breadth / 2;
     }
 
     [x, y] = apply(this.currentMatrix, [x, y]);
 
     x -= boxWidth / 2;
     y -= boxHeight / 2;
 
+    if (stackedLineIndex) {
+      // Offset the stacked line number by half of the box's width/height
+      const xOffset = boxWidth / 4;
+      const yOffset = boxHeight / 4;
+
+      x += xOffset;
+      y += yOffset;
+    }
+
     if (!this.hasNodeTransformations) {
       x = Math.max(x, padding);
       y = Math.max(y, padding);
     }
 
     // Draw a rounded rectangle with a border width of 2 pixels, a border color matching
     // the grid color and a white background (the line number will be written in black).
     this.ctx.lineWidth = 2 * displayPixelRatio;
     this.ctx.strokeStyle = this.color;
     this.ctx.fillStyle = "white";
     let radius = 2 * displayPixelRatio;
     drawRoundedRect(this.ctx, x, y, boxWidth, boxHeight, radius);
 
     // Write the line number inside of the rectangle.
     this.ctx.fillStyle = "black";
-    this.ctx.fillText(lineNumber, x + padding, y + textHeight + padding);
+    const numberText = stackedLineIndex ? "" : lineNumber;
+    this.ctx.fillText(numberText, x + padding, y + textHeight + padding);
 
     this.ctx.restore();
   }
 
   /**
    * Render the grid gap area on the css grid highlighter canvas.
    *
    * @param  {Number} linePos