From 6218068e2bf5d2d797ba6f23597b53f6451e2ff2 Mon Sep 17 00:00:00 2001 From: Pranav Pandey Date: Fri, 21 Feb 2020 10:22:30 +0000 Subject: [PATCH] "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 | 4 ++ .../actors/utils/inactive-property-helper.js | 18 +++++++- .../inactive-property-helper/text-overflow.js | 44 +++++++++++++++++++ ...st_inspector-inactive-property-helper.html | 1 + 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 devtools/server/tests/chrome/inactive-property-helper/text-overflow.js diff --git a/devtools/client/locales/en-US/tooltips.ftl b/devtools/client/locales/en-US/tooltips.ftl index 404d5f879782..a4f73efac1d0 100644 --- a/devtools/client/locales/en-US/tooltips.ftl +++ b/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 = { $property } has no effect on this element since it’s not a positioned element. +inactive-text-overflow-when-no-overflow = { $property } has no effect on this element since overflow:hidden 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 float or adding display:block. { learn-more } inactive-css-position-property-on-unpositioned-box-fix = Try setting its position property to something other than static. { learn-more } + +inactive-text-overflow-when-no-overflow-fix = Try adding overflow:hidden. { learn-more } diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js index 531f6ea5365f..9e0a5f023294 100644 --- a/devtools/server/actors/utils/inactive-property-helper.js +++ b/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, + }, ]; } diff --git a/devtools/server/tests/chrome/inactive-property-helper/text-overflow.js b/devtools/server/tests/chrome/inactive-property-helper/text-overflow.js new file mode 100644 index 000000000000..21bc18045803 --- /dev/null +++ b/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, + }, +]; diff --git a/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html b/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html index 44677e56cf35..65ef7a9e1e4e 100644 --- a/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html +++ b/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