Bug 1882741 - [devtools] Do not show inactive CSS warning for align-c…

…ontent on (inline-)block elements. r=#devtools-reviewers. a=RyanVM l10n=bolsson

Original Revision: https://phabricator.services.mozilla.com/D203408

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

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

@@ -82,6 +82,8 @@ inactive-css-text-wrap-balance-fragmented = <strong>{ $property }</strong> has n
 
 inactive-css-not-grid-or-flex-container-fix = Try adding <strong>display:grid</strong> or <strong>display:flex</strong>. { learn-more }
 
+inactive-css-not-grid-or-flex-or-block-container-fix = Try adding <strong>display:grid</strong>, <strong>display:flex</strong> or <strong>display:block</strong>. { learn-more }
+
 inactive-css-not-grid-or-flex-container-or-multicol-container-fix = Try adding either <strong>display:grid</strong>, <strong>display:flex</strong>, or <strong>columns:2</strong>. { learn-more }
 
 inactive-css-not-multicol-container-fix = Try adding either <strong>column-count</strong> or <strong>column-width</strong>. { learn-more }

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

@@ -21,6 +21,11 @@ const TEXT_WRAP_BALANCE_LIMIT = Services.prefs.getIntPref(
   10
 );
 
+const ALIGN_CONTENT_BLOCKS = Services.prefs.getBoolPref(
+  "layout.css.align-content.blocks.enabled",
+  false
+);
+
 const VISITED_MDN_LINK = "https://developer.mozilla.org/docs/Web/CSS/:visited";
 const VISITED_INVALID_PROPERTIES = allCssPropertiesExcept([
   "all",
@@ -227,12 +232,29 @@ class InactivePropertyHelper {
       // See https://bugzilla.mozilla.org/show_bug.cgi?id=1598730
       {
         invalidProperties: ["align-content"],
-        when: () =>
-          !this.style["align-content"].includes("baseline") &&
-          !this.gridContainer &&
-          !this.flexContainer,
-        fixId: "inactive-css-not-grid-or-flex-container-fix",
-        msgId: "inactive-css-not-grid-or-flex-container",
+        when: () => {
+          if (this.style["align-content"].includes("baseline")) {
+            return false;
+          }
+          const supportedDisplay = [
+            "flex",
+            "inline-flex",
+            "grid",
+            "inline-grid",
+            // Uncomment table-cell when Bug 1883357 is fixed.
+            // "table-cell"
+          ];
+          if (ALIGN_CONTENT_BLOCKS) {
+            supportedDisplay.push("block", "inline-block");
+          }
+          return !this.checkComputedStyle("display", supportedDisplay);
+        },
+        fixId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-not-grid-or-flex-or-block-container-fix"
+          : "inactive-css-not-grid-or-flex-container-fix",
+        msgId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-property-because-of-display"
+          : "inactive-css-not-grid-or-flex-container",
       },
       // column-gap and shorthands used on non-grid or non-flex or non-multi-col container.
       {

devtools/server/tests/chrome/inactive-property-helper/align-content.mjs

@@ -6,10 +6,17 @@
 
 export default [
   {
-    info: "align-content is inactive on block elements (until bug 1105571 is fixed)",
+    info: "align-content is active on block elements when layout.css.align-content.blocks.enabled is true",
     property: "align-content",
     tagName: "div",
     rules: ["div { align-content: center; }"],
+    isActive: true,
+  },
+  {
+    info: "align-content is inactive on inline elements",
+    property: "align-content",
+    tagName: "span",
+    rules: ["div { align-content: center; }"],
     isActive: false,
   },
   {
@@ -27,7 +34,7 @@ export default [
     isActive: true,
   },
   {
-    info: "align-content is inactive on flex items",
+    info: "align-content is active on flex items (as they have a computed display of block)",
     property: "align-content",
     createTestElement: rootNode => {
       const container = document.createElement("div");
@@ -38,10 +45,10 @@ export default [
     },
     rules: ["div { display: flex; }", "span { align-content: center; }"],
     ruleIndex: 1,
-    isActive: false,
+    isActive: true,
   },
   {
-    info: "align-content is inactive on grid items",
+    info: "align-content is active on grid items (as they have a computed display of block)",
     property: "align-content",
     createTestElement: rootNode => {
       const container = document.createElement("div");
@@ -52,7 +59,7 @@ export default [
     },
     rules: ["div { display: grid; }", "span { align-content: center; }"],
     ruleIndex: 1,
-    isActive: false,
+    isActive: true,
   },
   {
     info: "align-content:baseline is active on flex items",
@@ -89,4 +96,11 @@ export default [
     rules: ["div { display: table-cell; align-content: baseline; }"],
     isActive: true,
   },
+  {
+    info: "align-content:end is inactive on table cells until Bug 1883357 is fixed",
+    property: "align-content",
+    tagName: "div",
+    rules: ["div { display: table-cell; align-content: end; }"],
+    isActive: false,
+  },
 ];

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

@@ -16,15 +16,18 @@
   const INACTIVE_CSS_PREF = "devtools.inspector.inactive.css.enabled";
   const CUSTOM_HIGHLIGHT_API = "dom.customHighlightAPI.enabled";
   const TEXT_WRAP_BALANCE = "layout.css.text-wrap-balance.enabled";
+  const ALIGN_CONTENT_BLOCKS = "layout.css.align-content.blocks.enabled";
 
   Services.prefs.setBoolPref(INACTIVE_CSS_PREF, true);
   Services.prefs.setBoolPref(CUSTOM_HIGHLIGHT_API, true);
   Services.prefs.setBoolPref(TEXT_WRAP_BALANCE, true);
+  Services.prefs.setBoolPref(ALIGN_CONTENT_BLOCKS, true);
 
   SimpleTest.registerCleanupFunction(() => {
     Services.prefs.clearUserPref(INACTIVE_CSS_PREF);
     Services.prefs.clearUserPref(CUSTOM_HIGHLIGHT_API);
     Services.prefs.clearUserPref(TEXT_WRAP_BALANCE);
+    Services.prefs.clearUserPref(ALIGN_CONTENT_BLOCKS);
   });
 
   const FOLDER = "./inactive-property-helper";