Bug 1369585 - Explicitly show the row / column in the grid cell infobar. r?gl draft
authorMicah Tigley <tigleym@gmail.com>
Fri, 02 Jun 2017 22:28:26 -0600
changeset 588572 505f1c5e29580633383f4887a200f7f350460666
parent 588100 d35c5311aa72123eb5044bc2901fcd50fcb8357f
child 631620 f105ebb98e9a17869c20fbc9dc665eb8f8efcd15
push id62088
push userbmo:tigleym@gmail.com
push dateSat, 03 Jun 2017 04:29:13 +0000
reviewersgl
bugs1369585
milestone55.0a1
Bug 1369585 - Explicitly show the row / column in the grid cell infobar. r?gl MozReview-Commit-ID: 6Kf5ZHGnbY3
devtools/client/locales/en-US/layout.properties
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -37,8 +37,13 @@ layout.noGrids=No grids
 
 # LOCALIZATION NOTE (layout.overlayMultipleGrids): The header for the list of grid
 # container elements that can be highlighted in the CSS Grid pane.
 layout.overlayMultipleGrids=Overlay Multiple Grids
 
 # LOCALIZATION NOTE (layout.overlayGrid): Alternate header for the list of grid container
 # elements if only one item can be selected.
 layout.overlayGrid=Overlay Grid
+
+# LOCALIZATION NOTE (layout.row, layout.column):
+# The row and column position of a grid cell.
+layout.row=Row
+layout.column=Column
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -25,16 +25,18 @@ const {
   apply,
   translate,
   multiply,
   scale,
   getNodeTransformationMatrix,
   getNodeTransformOrigin
 } = require("devtools/shared/layout/dom-matrix-2d");
 const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/layout.properties");
 
 const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
 
 const DEFAULT_GRID_COLOR = "#4B0082";
 
 const COLUMNS = "cols";
 const ROWS = "rows";
 
@@ -824,17 +826,19 @@ CssGridHighlighter.prototype = extend(Au
   },
 
   _updateGridCellInfobar(rowNumber, columnNumber, x1, x2, y1, y2) {
     let width = x2 - x1;
     let height = y2 - y1;
     let dim = parseFloat(width.toPrecision(6)) +
               " \u00D7 " +
               parseFloat(height.toPrecision(6));
-    let position = `${rowNumber}\/${columnNumber}`;
+    let rowString = L10N.getStr("layout.row");
+    let columnString = L10N.getStr("layout.column");
+    let position = `${rowString}: ${rowNumber} \/ ${columnString}: ${columnNumber}`;
 
     this.getElement("cell-infobar-position").setTextContent(position);
     this.getElement("cell-infobar-dimensions").setTextContent(dim);
 
     let container = this.getElement("cell-infobar-container");
     this._moveInfobar(container, x1, x2, y1, y2, {
       position: "top",
       hideIfOffscreen: true