Bug 1369586 - Add a border around the grid area name overlay. r=gl
authorMicah Tigley <tigleym@gmail.com>
Fri, 02 Jun 2017 22:05:55 -0600
changeset 410516 60bbd8e76c33101fb0d4d6b69f5ec7920904f546
parent 410515 f904e3d130ab951280c19ab2f32384fe30374bce
child 410517 e2316370b3146ba599c3cc55c61cdf9339e449ba
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1369586
milestone55.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 1369586 - Add a border around the grid area name overlay. r=gl MozReview-Commit-ID: 3aUiVU3gKpq
devtools/client/inspector/grids/components/GridOutline.js
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -163,40 +163,39 @@ module.exports = createClass({
 
     if (fragmentIndex && rowNumber && columnNumber) {
       onShowGridCellHighlight(grids[id].nodeFront, color, fragmentIndex,
         rowNumber, columnNumber);
     }
   },
 
   /**
-    * Displays a message text "Cannot show outline for this grid".
-    *
-    */
+   * Displays a message text "Cannot show outline for this grid".
+   */
   renderCannotShowOutlineText() {
     return dom.div(
       {
         className: "grid-outline-text"
       },
       dom.span(
         {
           className: "grid-outline-text-icon",
           title: getStr("layout.cannotShowGridOutline.title")
         }
       ),
       getStr("layout.cannotShowGridOutline")
     );
   },
 
   /**
-    * Renders the grid outline for the given grid container object.
-    *
-    * @param  {Object} grid
-    *         A single grid container in the document.
-    */
+   * Renders the grid outline for the given grid container object.
+   *
+   * @param  {Object} grid
+   *         A single grid container in the document.
+   */
   renderGrid(grid) {
     // TODO: We are drawing the first fragment since only one is currently being stored.
     // In the future we will need to iterate over all fragments of a grid.
     let gridFragmentIndex = 0;
     const { id, color, gridFragments } = grid;
     const { rows, cols, areas } = gridFragments[gridFragmentIndex];
 
     const numberOfColumns = cols.lines.length - 1;
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1161,40 +1161,62 @@ CssGridHighlighter.prototype = extend(Au
     let fontSize = (GRID_AREA_NAME_FONT_SIZE * displayPixelRatio);
 
     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.font = fontSize + "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;
+          this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
         }
 
+        let textWidth = this.ctx.measureText(area.name).width;
+
+        // The width of the character 'm' approximates the height of the text.
+        let textHeight = this.ctx.measureText("m").width;
+
+        // Padding in pixels for the line number text inside of the line number container.
+        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 = "white";
+        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