Bug 1551812 - New InactiveCSS rule for vertical-align; r=flod
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 22 May 2019 14:56:48 +0000
changeset 474977 ce28e766055d3719434f980394e5bd1ca5529dcd
parent 474976 edb5fc31b4f50d9fa842c2c09ad45341a17e99fd
child 474978 edba72c0c8c6ca88aa62634931c16b247a7e4a11
push id36052
push userbtara@mozilla.com
push dateThu, 23 May 2019 04:37:46 +0000
treeherdermozilla-central@d12917561f27 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod
bugs1551812
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1551812 - New InactiveCSS rule for vertical-align; r=flod Differential Revision: https://phabricator.services.mozilla.com/D31235
devtools/client/locales/en-US/tooltips.ftl
devtools/server/actors/utils/inactive-property-helper.js
--- a/devtools/client/locales/en-US/tooltips.ftl
+++ b/devtools/client/locales/en-US/tooltips.ftl
@@ -19,23 +19,27 @@ inactive-css-not-grid-or-flex-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid or flex item.
 inactive-css-not-grid-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid item.
 
 inactive-css-not-grid-container = <strong>{ $property }</strong> has no effect on this element since it’s not a grid container.
 
 inactive-css-not-flex-item = <strong>{ $property }</strong> has no effect on this element since it’s not a flex item.
 
 inactive-css-not-flex-container = <strong>{ $property }</strong> has no effect on this element since it’s not a flex container.
 
+inactive-css-not-inline-or-tablecell = <strong>{ $property }</strong> has no effect on this element since it’s not an inline or table-cell element.
+
 ## 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.
 
 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-item-fix = Try adding <strong>display:grid</strong>, <strong>display:flex</strong>, <strong>display:inline-grid</strong> or <strong>display:inline-flex</strong>. { learn-more }
 
 inactive-css-not-grid-item-fix =Try adding <strong>display:grid</strong> or <strong>display:inline-grid</strong> to the item’s parent. { learn-more }
 
 inactive-css-not-grid-container-fix = Try adding <strong>display:grid</strong> or <strong>display:inline-grid</strong>. { learn-more }
 
 inactive-css-not-flex-item-fix = Try adding <strong>display:flex</strong> or <strong>display:inline-flex</strong> to the item’s parent. { learn-more }
 
 inactive-css-not-flex-container-fix = Try adding <strong>display:flex</strong> or <strong>display:inline-flex</strong>. { learn-more }
+
+inactive-css-not-inline-or-tablecell-fix = Try adding <strong>display:inline</strong> or <strong>display:table-cell</strong>. { learn-more }
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/devtools/server/actors/utils/inactive-property-helper.js
@@ -127,16 +127,30 @@ class InactivePropertyHelper {
           "align-items",
           "justify-content",
         ],
         when: () => !this.gridContainer && !this.flexContainer,
         fixId: "inactive-css-not-grid-or-flex-container-fix",
         msgId: "inactive-css-not-grid-or-flex-container",
         numFixProps: 2,
       },
+      // Inline properties used on non-inline-level elements.
+      {
+        invalidProperties: [
+          "vertical-align",
+        ],
+        when: () => {
+          return !this.checkStyle("display", ["inline", "table-cell"]) &&
+                 !this.cssRule.selectorText.includes("::first-letter") &&
+                 !this.cssRule.selectorText.includes("::first-line");
+        },
+        fixId: "inactive-css-not-inline-or-tablecell-fix",
+        msgId: "inactive-css-not-inline-or-tablecell",
+        numFixProps: 2,
+      },
     ];
   }
 
   get unusedCssEnabled() {
     if (!this._unusedCssEnabled) {
       this._unusedCssEnabled = Services.prefs.getBoolPref(PREF_UNUSED_CSS_ENABLED, false);
     }
     return this._unusedCssEnabled;
@@ -241,16 +255,23 @@ class InactivePropertyHelper {
   /**
    * Cache and provide node's computed style.
    */
   get style() {
     return this._style;
   }
 
   /**
+   *  Provide a public reference to the css rule.
+   */
+  get cssRule() {
+    return this._cssRule;
+  }
+
+  /**
    * Check if the current node's propName is set to one of the values passed in
    * the values array.
    *
    * @param {String} propName
    *        Property name to check.
    * @param {Array} values
    *        Values to compare against.
    */