Bug 1337607 - Provide grid highlighter button also for display:inline-grid elements. r=gl

devtools/client/inspector/rules/views/text-property-editor.js

@@ -868,12 +868,14 @@ TextPropertyEditor.prototype = {
   },
 
   /**
-   * Returns true if the property is a `display: grid` declaration.
+   * Returns true if the property is a `display: [inline-]grid` declaration.
    *
-   * @return {Boolean} true if the property is a `display: grid` declaration.
+   * @return {Boolean} true if the property is a `display: [inline-]grid` declaration.
    */
   isDisplayGrid: function () {
-    return this.prop.name === "display" && this.prop.value === "grid";
+    return this.prop.name === "display" &&
+      (this.prop.value === "grid" ||
+       this.prop.value === "inline-grid");
   }
 };
 

devtools/client/shared/output-parser.js

@@ -209,8 +209,7 @@ OutputParser.prototype = {
               BEZIER_KEYWORDS.indexOf(token.text) >= 0) {
             this._appendCubicBezier(token.text, options);
           } else if (Services.prefs.getBoolPref(CSS_GRID_ENABLED_PREF) &&
-                     options.expectDisplay && token.text === "grid" &&
-                     text === token.text) {
+                     this._isDisplayGrid(text, token, options)) {
             this._appendGrid(token.text, options);
           } else if (colorOK() &&
                      colorUtils.isValidCSSColor(token.text, this.cssColor4)) {
@@ -285,6 +284,24 @@ OutputParser.prototype = {
     return result;
   },
 
+  /**
+   * Return true if it's a display:[inline-]grid token.
+   *
+   * @param  {String} text
+   *         the parsed text.
+   *
+   * @param  {Object} token
+   *         the parsed token.
+   *
+   * @param  {Object} options
+   *         the options given to _parse.
+   */
+  _isDisplayGrid: function (text, token, options) {
+    return options.expectDisplay &&
+      (token.text === "grid" || token.text === "inline-grid") &&
+      text === token.text;
+  },
+
   /**
    * Append a cubic-bezier timing function value to the output
    *

devtools/server/actors/highlighters/css-grid.js

@@ -54,7 +54,7 @@ const COLUMN_KEY = {};
 
 /**
  * The CssGridHighlighter is the class that overlays a visual grid on top of
- * display:grid elements.
+ * display:[inline-]grid elements.
  *
  * Usage example:
  * let h = new CssGridHighlighter(env);