Bug 1583906 - [devtools] Handle 'empty-cells' property in inactive CSS. r=devtools-reviewers,fluent-reviewers,flod,jdescottes.

Differential Revision: https://phabricator.services.mozilla.com/D186082

devtools/client/locales/en-US/tooltips.ftl

@@ -45,6 +45,8 @@ inactive-css-not-for-internal-table-elements-except-table-cells = <strong>{ $pro
 
 inactive-css-not-table = <strong>{ $property }</strong> has no effect on this element since it’s not a table.
 
+inactive-css-not-table-cell = <strong>{ $property }</strong> has no effect on this element since it’s not a table cell.
+
 inactive-scroll-padding-when-not-scroll-container = <strong>{ $property }</strong> has no effect on this element since it doesn’t scroll.
 
 inactive-css-border-image = <strong>{ $property }</strong> has no effect on this element since it cannot be applied to internal table elements where <strong>border-collapse</strong> is set to <strong>collapse</strong> on the parent table element.
@@ -89,6 +91,8 @@ inactive-css-not-for-internal-table-elements-except-table-cells-fix = Try settin
 
 inactive-css-not-table-fix = Try adding <strong>display:table</strong> or <strong>display:inline-table</strong>. { learn-more }
 
+inactive-css-not-table-cell-fix = Try adding <strong>display:table-cell</strong>. { learn-more }
+
 inactive-scroll-padding-when-not-scroll-container-fix = Try adding <strong>overflow:auto</strong>, <strong>overflow:scroll</strong>, or <strong>overflow:hidden</strong>. { learn-more }
 
 inactive-css-border-image-fix = On the parent table element, remove the property or change the value of <strong>border-collapse</strong> to a value other than <strong>collapse</strong>. { learn-more }

devtools/server/actors/utils/inactive-property-helper.js

@@ -380,6 +380,13 @@ class InactivePropertyHelper {
         fixId: "inactive-css-not-table-fix",
         msgId: "inactive-css-not-table",
       },
+      // empty-cells property used on non-table-cell elements.
+      {
+        invalidProperties: ["empty-cells"],
+        when: () => !this.checkComputedStyle("display", ["table-cell"]),
+        fixId: "inactive-css-not-table-cell-fix",
+        msgId: "inactive-css-not-table-cell",
+      },
       // scroll-padding-* properties used on non-scrollable elements.
       {
         invalidProperties: [

devtools/server/tests/chrome/inactive-property-helper/table-cell.mjs

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `empty-cells` test cases.
+export default [
+  {
+    info: "empty-cells is inactive on block element",
+    property: "empty-cells",
+    tagName: "div",
+    rules: ["div { empty-cells: hide; }"],
+    isActive: false,
+  },
+  {
+    info: "empty-cells is active on table cell element",
+    property: "empty-cells",
+    tagName: "div",
+    rules: ["div { display: table-cell; empty-cells: hide; }"],
+    isActive: true,
+  },
+];

devtools/server/tests/chrome/test_inspector-inactive-property-helper.html

@@ -59,6 +59,7 @@ SimpleTest.waitForExplicitFinish();
     "scroll-padding.mjs",
     "vertical-align.mjs",
     "table.mjs",
+    "table-cell.mjs",
     "text-overflow.mjs",
     "width-height-ruby.mjs",
   ].map(file => `${FOLDER}/${file}`);