"Bug 1551578 - displayed a warning when text-overflow is used incorrectly. " r=pbro

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

--HG--
extra : moz-landing-system : lando

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

@@ -37,6 +37,8 @@ inactive-css-property-is-impossible-to-override-in-visited = It’s impossible t
 
 inactive-css-position-property-on-unpositioned-box = <strong>{ $property }</strong> has no effect on this element since it’s not a positioned element.
 
+inactive-text-overflow-when-no-overflow = <strong>{ $property }</strong> has no effect on this element since <strong>overflow:hidden</strong> is not set.
+
 ## In the Rule View when a CSS property cannot be successfully applied we display
 ## an icon. When this icon is hovered this message is displayed to explain how
 ## the problem can be solved.
@@ -64,3 +66,5 @@ inactive-css-non-replaced-inline-or-table-column-or-column-group-fix = Try addin
 inactive-css-not-display-block-on-floated-fix = Try removing <strong>float</strong> or adding <strong>display:block</strong>. { learn-more }
 
 inactive-css-position-property-on-unpositioned-box-fix = Try setting its <strong>position</strong> property to something other than <strong>static</strong>. { learn-more }
+
+inactive-text-overflow-when-no-overflow-fix = Try adding <strong>overflow:hidden</strong>. { learn-more }

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

@@ -77,7 +77,7 @@ class InactivePropertyHelper {
    * }
    *
    * If you add a new rule, also add a test for it in:
-   * server/tests/mochitest/test_inspector-inactive-property-helper.html
+   * server/tests/chrome/test_inspector-inactive-property-helper.html
    *
    * The main export is `isPropertyUsed()`, which can be used to check if a
    * property is used or not, and why.
@@ -281,6 +281,22 @@ class InactivePropertyHelper {
         msgId: "inactive-css-position-property-on-unpositioned-box",
         numFixProps: 1,
       },
+      // text-overflow property used on elements for which overflow is not set to hidden.
+      // Note that this validator only checks if overflow:hidden is set on the element.
+      // In theory, we should also be checking if the element is a block as this doesn't
+      // normally work on inline element. However there are many edge cases that made it
+      // impossible for the JS code to determine whether the type of box would support
+      // text-overflow. So, rather than risking to show invalid warnings, we decided to
+      // only warn when overflow:hidden wasn't set. There is more information about this
+      // in this discussion https://phabricator.services.mozilla.com/D62407 and on the bug
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1551578
+      {
+        invalidProperties: ["text-overflow"],
+        when: () => !this.checkComputedStyle("overflow", ["hidden"]),
+        fixId: "inactive-text-overflow-when-no-overflow-fix",
+        msgId: "inactive-text-overflow-when-no-overflow",
+        numFixProps: 1,
+      },
     ];
   }
 

devtools/server/tests/chrome/inactive-property-helper/text-overflow.js

@@ -0,0 +1,44 @@
+/* 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 `text-overflow` test cases.
+export default [
+  {
+    info: "text-overflow is inactive when overflow is not set",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; }"],
+    isActive: false,
+  },
+  {
+    info: "text-overflow is active when overflow is set to hidden",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is inactive when overflow is set to visible",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: visible; }"],
+    isActive: false,
+  },
+  {
+    info:
+      "as soon as overflow:hidden is set, text-overflow is active whatever the box type",
+    property: "text-overflow",
+    tagName: "span",
+    rules: ["span { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+  {
+    info:
+      "as soon as overflow:hidden is set, text-overflow is active whatever the box type",
+    property: "text-overflow",
+    tagName: "legend",
+    rules: ["legend { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+];

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

@@ -51,6 +51,7 @@ SimpleTest.waitForExplicitFinish();
     "place-items-content.js",
     "positioned.js",
     "vertical-align.js",
+    "text-overflow.js"
   ].map(file => `${FOLDER}/${file}`);
 
   // Import all the test cases