Bug 1369586 - Use new colours for the grid cell and area fills. r?gl draft
authorMicah Tigley <tigleym@gmail.com>
Fri, 02 Jun 2017 22:05:55 -0600
changeset 588571 6a53c6991d44fe167361603b1d6211a96d6280f7
parent 588100 d35c5311aa72123eb5044bc2901fcd50fcb8357f
child 631619 26df609caf5f553547b86981bc16a060bafbb589
push id62087
push userbmo:tigleym@gmail.com
push dateSat, 03 Jun 2017 04:23:12 +0000
reviewersgl
bugs1369586
milestone55.0a1
Bug 1369586 - Use new colours for the grid cell and area fills. r?gl MozReview-Commit-ID: 3aUiVU3gKpq
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1151,38 +1151,57 @@ CssGridHighlighter.prototype = extend(Au
     this.ctx.save();
 
     let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
     let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
     this.ctx.translate(offset - canvasX, offset - canvasY);
 
     this.ctx.font = (fontSize * currentZoom) + "px " + GRID_FONT_FAMILY;
     this.ctx.strokeStyle = this.color;
-    this.ctx.fillStyle = this.color;
     this.ctx.textAlign = "center";
     this.ctx.textBaseline = "middle";
 
     // Draw the text for the grid area name.
     for (let rowNumber = rowStart; rowNumber < rowEnd; rowNumber++) {
       for (let columnNumber = columnStart; columnNumber < columnEnd; columnNumber++) {
         let row = fragment.rows.tracks[rowNumber - 1];
         let column = fragment.cols.tracks[columnNumber - 1];
 
         // Check if the font size is exceeds the bounds of the containing grid cell.
         if (fontSize > column.breadth || fontSize > row.breadth) {
           fontSize = (column.breadth + row.breadth) / 2;
           this.ctx.font = (fontSize * currentZoom) + "px " + GRID_FONT_FAMILY;
         }
 
+        let textWidth = this.ctx.measureText(area.name).width;
+        let textHeight = (fontSize * currentZoom) * displayPixelRatio;
+
+        let padding = 3 * displayPixelRatio;
+
+        let boxWidth = textWidth + 2 * padding;
+        let boxHeight = textHeight + 2 * padding;
+
         let x = column.start + column.breadth / 2;
         let y = row.start + row.breadth / 2;
 
         [x, y] = apply(this.currentMatrix, [x, y]);
 
-        this.ctx.fillText(area.name, x, y);
+        let rectXPos = x - boxWidth / 2;
+        let rectYPos = y - boxHeight / 2;
+
+        // Draw a rounded rectangle with a border width of 1 pixel,
+        // a border color matching the grid color, and a white background
+        this.ctx.lineWidth = 1 * displayPixelRatio;
+        this.ctx.strokeStyle = this.color;
+        this.ctx.fillStyle = "rgb(255,255,255,0.5)";
+        let radius = 2 * displayPixelRatio;
+        drawRoundedRect(this.ctx, rectXPos, rectYPos, boxWidth, boxHeight, radius);
+
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillText(area.name, x, y + padding);
       }
     }
 
     this.ctx.restore();
   },
 
   /**
    * Render the grid lines given the grid dimension information of the