Closed Bug 594745 Opened 14 years ago Closed 14 years ago

Inspector parent match should be property sensitive

Categories

(DevTools :: General, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: dangoor, Assigned: jwalker)

References

Details

Only certain CSS properties are inherited from parent elements on the page, so parent match displays should be limited to those properties only.
Blocks: 592320
Assignee: nobody → jwalker
Blocks: devtools924
Mihai - this is what I'm thinking, does it makes sense to you?

diff --git a/browser/base/content/csslogic.js b/browser/base/content/csslogic.js
--- a/browser/base/content/csslogic.js
+++ b/browser/base/content/csslogic.js
@@ -557,16 +558,54 @@ CssLogic.prototype = {
           }
         }, this);
       }, this);
     }, this);
   },
 };
 
 /**
+ * Not all CSS properties cascade their values to child elements, there seem to
+ * be more properties that don't than that do
+ * @see http://www.w3.org/TR/CSS21/propidx.html
+ * @see http://www.w3.org/TR/css3-text
+ * @see http://www.w3.org/TR/css3-multicol
+ * @see http://www.w3.org/TR/css3-background
+ * @see http://www.w3.org/TR/css3-ui
+ * @see http://www.w3.org/TR/css3-color
+ * @see http://www.w3.org/TR/css3-2d-transforms
+ * @see http://www.w3.org/TR/css3-transitions
+ * @see http://www.w3.org/TR/2000/WD-css3-userint-20000216
+ * @see http://www.w3.org/TR/WD-font
+ * @see http://www.w3.org/TR/SVG/painting.html
+ * @see http://www.w3.org/TR/SVG11/interact.html
+ */
+CssLogic._CASCADING_PROPERTIES = [
+  "color", "direction", "font-family", "font-size", "font-size-adjust",
+  "font-stretch", "font-style", "font-variant", "font-weight",
+  "letter-spacing", "line-height", "quotes", "text-align", "text-indent",
+  "text-rendering", "text-shadow", "text-transform", "white-space",
+  "word-spacing", "word-wrap", "list-style-image", "list-style-position",
+  "list-style-type", "visibility", "caption-side", "cursor", "empty-cells",
+  "image-rendering", "pointer-events", "-moz-user-focus", "-moz-user-input",
+  "-moz-user-modify"
+];
+
+/**
+ * Check through CssLogic._CASCADING_PROPERTIES to see if the given property
+ * cascades.
+ * @param aProperty {string} Does this property cascade values?
+ * @returns {boolean} true if the property cascades
+ */
+CssLogic.isCascading = function CssLogic_isCascading(aProperty)
+{
+  return CssLogic._CASCADING_PROPERTIES.indexOf(aProperty) > 0;
+};
+
+/**
  * If the element has an id, return '#id'. Otherwise return 'tagname[n]' where
  * n is the index of this element in its siblings.
  * <p>A technically more 'correct' output from the no-id case might be:
  * 'tagname:nth-of-type(n)' however this is unlikely to be more understood
  * and it is longer.
  *
  * @param {nsIDOMElement} aElement the element for which you want the short name.
  * @return {string} the string to be displayed for aElement.
@@ -1376,24 +1415,32 @@ CssPropertyInfo.prototype = {
    *
    * @private
    * @param {CssSelector} aSelector the matched CssSelector object.
    * @param {CssLogic.STATUS} aStatus the CssSelector match status.
    */
   _processMatchedSelector: function CPI_processMatchedSelector(aSelector, aStatus)
   {
     let cssRule = aSelector._cssRule;
+
+    let cascading = CssLogic.isCascading(this.property);
+    if (!cascading && aStatus === CssLogic.STATUS.PARENT_MATCH) {
+      return;
+    }
+
     let value = cssRule.getPropertyValue(this.property);
-    if (value) {
-      let selectorInfo = new CssSelectorInfo(aSelector, this.property, value,
-          aStatus);
-      this._matchedSelectors.push(selectorInfo);
-      if (this._cssLogic._passId !== cssRule._passId && cssRule.sheetAllowed) {
-        this._matchedRuleCount++;
-      }
+    if (!value) {
+      return;
+    }
+
+    let selectorInfo = new CssSelectorInfo(aSelector, this.property, value,
+        aStatus);
+    this._matchedSelectors.push(selectorInfo);
+    if (this._cssLogic._passId !== cssRule._passId && cssRule.sheetAllowed) {
+      this._matchedRuleCount++;
     }
   },
 
   /**
    * Find the selectors that do not match the highlighted element and its
    * parents.
    * @private
    */
Hello Joe!

That looks good. You're just not showing parent matches for properties that do not inherit. Am I reading that correctly?

Also:

+  return CssLogic._CASCADING_PROPERTIES.indexOf(aProperty) > 0;

I think you mean indexOf() > -1. Index 0 is color, you want that.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.