Last Comment Bug 594745 - Inspector parent match should be property sensitive
: Inspector parent match should be property sensitive
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Developer Tools (show other bugs)
: unspecified
: x86 Mac OS X
: -- normal (vote)
: ---
Assigned To: Joe Walker [:jwalker] (needinfo me or ping on irc)
:
Mentors:
Depends on:
Blocks: 592320 devtools924
  Show dependency treegraph
 
Reported: 2010-09-09 06:12 PDT by Kevin Dangoor
Modified: 2010-10-04 05:38 PDT (History)
1 user (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Kevin Dangoor 2010-09-09 06:12:00 PDT
Only certain CSS properties are inherited from parent elements on the page, so parent match displays should be limited to those properties only.
Comment 1 Joe Walker [:jwalker] (needinfo me or ping on irc) 2010-09-21 05:43:44 PDT
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
    */
Comment 2 Mihai Sucan [:msucan] 2010-09-21 05:52:01 PDT
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.

Note You need to log in before you can comment on or make changes to this bug.