diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index a8a67c49afc..cc521643aef 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -133,9 +133,8 @@ XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
.createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
CssHtmlTree.prototype = {
- // Cache the list of properties that have matched and unmatched properties.
+ // Cache the list of properties that have matched properties.
_matchedProperties: null,
- _unmatchedProperties: null,
htmlComplete: false,
@@ -171,7 +170,6 @@ CssHtmlTree.prototype = {
}
this.viewedElement = aElement;
- this._unmatchedProperties = null;
this._matchedProperties = null;
CssHtmlTree.processTemplate(this.templatePath, this.path, this);
@@ -198,7 +196,7 @@ CssHtmlTree.prototype = {
let propView = new PropertyView(this, name);
CssHtmlTree.processTemplate(this.templateProperty,
this.propertyContainer, propView, true);
- propView.refreshAllSelectors();
+ propView.refreshMatchedSelectors();
this.propertyViews.push(propView);
}
if (i < max) {
@@ -359,41 +357,6 @@ CssHtmlTree.prototype = {
return this._matchedProperties;
},
- /**
- * Check if a property has unmatched selectors. Result is cached.
- *
- * @param {string} aProperty the name of the property you want to check.
- * @return {boolean} true if the property has unmatched selectors, false
- * otherwise.
- */
- hasUnmatchedSelectors: function CssHtmlTree_hasUnmatchedSelectors(aProperty)
- {
- // Initially check all of the properties that return false for
- // hasMatchedSelectors(). This speeds-up the UI.
- if (!this._unmatchedProperties) {
- let properties = [];
- CssHtmlTree.propertyNames.forEach(function(aName) {
- if (!this.matchedProperties[aName]) {
- properties.push(aName);
- }
- }, this);
-
- if (properties.indexOf(aProperty) == -1) {
- properties.push(aProperty);
- }
-
- this._unmatchedProperties = this.cssLogic.hasUnmatchedSelectors(properties);
- }
-
- // Lazy-get the result for properties we do not have cached.
- if (!(aProperty in this._unmatchedProperties)) {
- let result = this.cssLogic.hasUnmatchedSelectors([aProperty]);
- this._unmatchedProperties[aProperty] = result[aProperty];
- }
-
- return this._unmatchedProperties[aProperty];
- },
-
/**
* Destructor for CssHtmlTree.
*/
@@ -444,7 +407,6 @@ function PropertyView(aTree, aName)
this.link = "https://developer.mozilla.org/en/CSS/" + aName;
this.templateMatchedSelectors = aTree.styleDocument.getElementById("templateMatchedSelectors");
- this.templateUnmatchedSelectors = aTree.styleDocument.getElementById("templateUnmatchedSelectors");
}
PropertyView.prototype = {
@@ -460,33 +422,15 @@ PropertyView.prototype = {
// Are matched rules expanded?
matchedExpanded: false,
- // Are unmatched rules expanded?
- unmatchedExpanded: false,
-
- // Unmatched selector table
- unmatchedSelectorTable: null,
-
// Matched selector container
matchedSelectorsContainer: null,
// Matched selector expando
matchedExpander: null,
- // Unmatched selector expando
- unmatchedExpander: null,
-
- // Unmatched selector container
- unmatchedSelectorsContainer: null,
-
- // Unmatched title block
- unmatchedTitleBlock: null,
-
// Cache for matched selector views
_matchedSelectorViews: null,
- // Cache for unmatched selector views
- _unmatchedSelectorViews: null,
-
// The previously selected element used for the selector view caches
prevViewedElement: null,
@@ -517,14 +461,6 @@ PropertyView.prototype = {
return this.tree.matchedProperties[this.name];
},
- /**
- * Does the property have any unmatched selectors?
- */
- get hasUnmatchedSelectors()
- {
- return this.tree.hasUnmatchedSelectors(this.name);
- },
-
/**
* Should this property be visible?
*/
@@ -568,23 +504,19 @@ PropertyView.prototype = {
if (this.prevViewedElement != this.tree.viewedElement) {
this._matchedSelectorViews = null;
- this._unmatchedSelectorViews = null;
this.prevViewedElement = this.tree.viewedElement;
}
if (!this.tree.viewedElement || !this.visible) {
this.valueNode.innerHTML = "";
this.matchedSelectorsContainer.hidden = true;
- this.unmatchedSelectorsContainer.hidden = true;
- this.unmatchedSelectorTable.innerHTML = "";
this.matchedSelectorsContainer.innerHTML = "";
this.matchedExpander.removeAttribute("open");
- this.unmatchedExpander.removeAttribute("open");
return;
}
this.valueNode.innerHTML = this.propertyInfo.value;
- this.refreshAllSelectors();
+ this.refreshMatchedSelectors();
},
/**
@@ -595,7 +527,7 @@ PropertyView.prototype = {
let hasMatchedSelectors = this.hasMatchedSelectors;
this.matchedSelectorsContainer.hidden = !hasMatchedSelectors;
- if (hasMatchedSelectors || this.hasUnmatchedSelectors) {
+ if (hasMatchedSelectors) {
this.propertyHeader.classList.add("expandable");
} else {
this.propertyHeader.classList.remove("expandable");
@@ -611,52 +543,6 @@ PropertyView.prototype = {
}
},
- /**
- * Refresh the panel unmatched rules.
- */
- refreshUnmatchedSelectors: function PropertyView_refreshUnmatchedSelectors()
- {
- let hasMatchedSelectors = this.hasMatchedSelectors;
-
- this.unmatchedSelectorTable.hidden = !this.unmatchedExpanded;
-
- if (hasMatchedSelectors) {
- this.unmatchedSelectorsContainer.hidden = !this.matchedExpanded ||
- !this.hasUnmatchedSelectors;
- this.unmatchedTitleBlock.hidden = false;
- } else {
- this.unmatchedSelectorsContainer.hidden = !this.unmatchedExpanded;
- this.unmatchedTitleBlock.hidden = true;
- }
-
- if (this.unmatchedExpanded && this.hasUnmatchedSelectors) {
- CssHtmlTree.processTemplate(this.templateUnmatchedSelectors,
- this.unmatchedSelectorTable, this);
- if (!hasMatchedSelectors) {
- this.matchedExpander.setAttribute("open", "");
- this.unmatchedSelectorTable.classList.add("only-unmatched");
- } else {
- this.unmatchedExpander.setAttribute("open", "");
- this.unmatchedSelectorTable.classList.remove("only-unmatched");
- }
- } else {
- if (!hasMatchedSelectors) {
- this.matchedExpander.removeAttribute("open");
- }
- this.unmatchedExpander.removeAttribute("open");
- this.unmatchedSelectorTable.innerHTML = "";
- }
- },
-
- /**
- * Refresh the panel matched and unmatched rules
- */
- refreshAllSelectors: function PropertyView_refreshAllSelectors()
- {
- this.refreshMatchedSelectors();
- this.refreshUnmatchedSelectors();
- },
-
/**
* Provide access to the matched SelectorViews that we are currently
* displaying.
@@ -670,27 +556,9 @@ PropertyView.prototype = {
this._matchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
}, this);
}
-
return this._matchedSelectorViews;
},
- /**
- * Provide access to the unmatched SelectorViews that we are currently
- * displaying.
- */
- get unmatchedSelectorViews()
- {
- if (!this._unmatchedSelectorViews) {
- this._unmatchedSelectorViews = [];
- this.propertyInfo.unmatchedSelectors.forEach(
- function unmatchedSelectorViews_convert(aSelectorInfo) {
- this._unmatchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
- }, this);
- }
-
- return this._unmatchedSelectorViews;
- },
-
/**
* The action when a user expands matched selectors.
*
@@ -702,24 +570,11 @@ PropertyView.prototype = {
{
if (aEvent.target.className != "helplink") {
this.matchedExpanded = !this.matchedExpanded;
- if (!this.hasMatchedSelectors && this.hasUnmatchedSelectors) {
- this.unmatchedExpanded = !this.unmatchedExpanded;
- }
- this.refreshAllSelectors();
+ this.refreshMatchedSelectors();
aEvent.preventDefault();
}
},
- /**
- * The action when a user expands unmatched selectors.
- */
- unmatchedSelectorsClick: function PropertyView_unmatchedSelectorsClick(aEvent)
- {
- this.unmatchedExpanded = !this.unmatchedExpanded;
- this.refreshUnmatchedSelectors();
- aEvent.preventDefault();
- },
-
/**
* The action when a user clicks on the MDN help link for a property.
*/
@@ -748,11 +603,11 @@ function SelectorView(aTree, aSelectorInfo)
* @see CssLogic.STATUS
*/
SelectorView.STATUS_NAMES = [
- // "Unmatched", "Parent Match", "Matched", "Best Match"
+ // "Parent Match", "Matched", "Best Match"
];
SelectorView.CLASS_NAMES = [
- "unmatched", "parentmatch", "matched", "bestmatch"
+ "parentmatch", "matched", "bestmatch"
];
SelectorView.prototype = {
@@ -773,7 +628,7 @@ SelectorView.prototype = {
for (let status in CssLogic.STATUS) {
let i = CssLogic.STATUS[status];
- if (i > -1) {
+ if (i > CssLogic.STATUS.UNKNOWN) {
let value = CssHtmlTree.l10n("rule.status." + status);
// Replace normal spaces with non-breaking spaces
SelectorView.STATUS_NAMES[i] = value.replace(/ /g, '\u00A0');
diff --git a/browser/devtools/styleinspector/CssLogic.jsm b/browser/devtools/styleinspector/CssLogic.jsm
index 278b915b5f5..9d33fd7c6ae 100644
--- a/browser/devtools/styleinspector/CssLogic.jsm
+++ b/browser/devtools/styleinspector/CssLogic.jsm
@@ -58,8 +58,7 @@
* standard DOM API, but more inline with the definition in the spec.
*
* - CssPropertyInfo contains style information for a single property for the
- * highlighted element. It divides the CSS rules on the page into matched and
- * unmatched rules.
+ * highlighted element. It contains the matched CSS rules on the page.
* - CssSelectorInfo is a wrapper around CssSelector, which adds sorting with
* reference to the selected element.
*/
@@ -116,10 +115,9 @@ CssLogic.MEDIA = {
* @see csshtmltree.js RuleView._cacheStatusNames()
*/
CssLogic.STATUS = {
- BEST: 3,
- MATCHED: 2,
- PARENT_MATCH: 1,
- UNMATCHED: 0,
+ BEST: 2,
+ MATCHED: 1,
+ PARENT_MATCH: 0,
UNKNOWN: -1,
};
@@ -147,13 +145,11 @@ CssLogic.prototype = {
// processMatchedSelectors().
_passId: 0,
- // Used for tracking matched CssSelector objects, such that we can skip them
- // in processUnmatchedSelectors().
+ // Used for tracking matched CssSelector objects.
_matchId: 0,
_matchedRules: null,
_matchedSelectors: null,
- _unmatchedSelectors: null,
domUtils: Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils),
@@ -169,7 +165,6 @@ CssLogic.prototype = {
this._sheetsCached = false;
this._matchedRules = null;
this._matchedSelectors = null;
- this._unmatchedSelectors = null;
},
/**
@@ -204,7 +199,6 @@ CssLogic.prototype = {
this._matchedRules = null;
this._matchedSelectors = null;
- this._unmatchedSelectors = null;
let win = this.viewedDocument.defaultView;
this._computedStyle = win.getComputedStyle(this.viewedElement, "");
},
@@ -219,8 +213,7 @@ CssLogic.prototype = {
/**
* Source filter. Only display properties coming from the given source (web
- * address). Note that in order to avoid information overload we DO NOT show
- * unmatched system rules.
+ * address).
* @see CssLogic.FILTER.*
*/
set sourceFilter(aValue) {
@@ -247,7 +240,6 @@ CssLogic.prototype = {
if (needFullUpdate) {
this._matchedRules = null;
this._matchedSelectors = null;
- this._unmatchedSelectors = null;
this._propertyInfos = {};
} else {
// Update the CssPropertyInfo objects.
@@ -495,7 +487,6 @@ CssLogic.prototype = {
}
this._matchedSelectors = [];
- this._unmatchedSelectors = null;
this._passId++;
for (let i = 0; i < this._matchedRules.length; i++) {
@@ -540,52 +531,6 @@ CssLogic.prototype = {
return false;
},
- /**
- * Process the CssSelector object that do not match the highlighted elements,
- * nor its parents. Your callback function is invoked for every such
- * CssSelector object. You receive one argument: the CssSelector object.
- *
- * The list of unmatched selectors is cached.
- *
- * @param {function} aCallback the function you want to execute for each of
- * the unmatched selectors.
- * @param {object} aScope the scope you want for the callback function. aScope
- * will be the this object when aCallback executes.
- */
- processUnmatchedSelectors: function CL_processUnmatchedSelectors(aCallback, aScope)
- {
- if (this._unmatchedSelectors) {
- if (aCallback) {
- this._unmatchedSelectors.forEach(aCallback, aScope);
- }
- return;
- }
-
- if (!this._matchedSelectors) {
- this.processMatchedSelectors();
- }
-
- this._unmatchedSelectors = [];
-
- this.forEachSheet(function (aSheet) {
- // We do not show unmatched selectors from system stylesheets
- if (aSheet.systemSheet || aSheet.disabled || !aSheet.mediaMatches) {
- return;
- }
-
- aSheet.forEachRule(function (aRule) {
- aRule.selectors.forEach(function (aSelector) {
- if (aSelector._matchId !== this._matchId) {
- this._unmatchedSelectors.push(aSelector);
- if (aCallback) {
- aCallback.call(aScope, aSelector);
- }
- }
- }, this);
- }, this);
- }, this);
- },
-
/**
* Check if the highlighted element or it's parents have matched selectors.
*
@@ -686,95 +631,6 @@ CssLogic.prototype = {
element.nodeType === Ci.nsIDOMNode.ELEMENT_NODE);
},
- /**
- * Check if the highlighted element or it's parents have unmatched selectors.
- *
- * Please note that this method is far slower than hasMatchedSelectors()
- * because it needs to do a lot more checks in the DOM.
- *
- * @param {array} aProperties The list of properties you want to check if they
- * have unmatched selectors or not.
- * @return {object} An object that tells for each property if it has unmatched
- * selectors or not. Object keys are property names and values are booleans.
- */
- hasUnmatchedSelectors: function CL_hasUnmatchedSelectors(aProperties)
- {
- if (!this._matchedRules) {
- this._buildMatchedRules();
- }
-
- let result = {};
-
- this.forSomeSheets(function (aSheet) {
- if (aSheet.systemSheet || aSheet.disabled || !aSheet.mediaMatches) {
- return false;
- }
-
- return aSheet.forSomeRules(function (aRule) {
- let unmatched = aRule._matchId !== this._matchId ||
- this._ruleHasUnmatchedSelector(aRule);
- if (!unmatched) {
- return false;
- }
-
- aProperties = aProperties.filter(function(aProperty) {
- if (!aRule.getPropertyValue(aProperty)) {
- // Keep this property for the next rule. We need to find a rule
- // which has the property.
- return true;
- }
-
- result[aProperty] = true;
-
- // We found a rule that has the current property while it does not
- // match the current element. We can remove this property from the
- // array.
- return false;
- });
-
- return aProperties.length == 0;
- }, this);
- }, this);
-
- aProperties.forEach(function(aProperty) { result[aProperty] = false; });
-
- return result;
- },
-
- /**
- * Check if a CssRule has an unmatched selector for the highlighted element or
- * its parents.
- *
- * @private
- * @param {CssRule} aRule The rule you want to check if it has an unmatched
- * selector.
- * @return {boolean} True if the rule has an unmatched selector, false
- * otherwise.
- */
- _ruleHasUnmatchedSelector: function CL__ruleHasUnmatchedSelector(aRule)
- {
- if (!aRule._cssSheet && aRule.sourceElement) {
- // CssRule wraps element.style, which never has unmatched selectors.
- return false;
- }
-
- let element = this.viewedElement;
- let selectors = aRule.selectors;
-
- do {
- selectors = selectors.filter(function(aSelector) {
- return !element.mozMatchesSelector(aSelector);
- });
-
- if (selectors.length == 0) {
- break;
- }
- } while ((element = element.parentNode) &&
- element.nodeType === Ci.nsIDOMNode.ELEMENT_NODE);
-
- return selectors.length > 0;
- },
-
/**
* Tells if the given DOM CSS object matches the current view media.
*
@@ -1494,10 +1350,9 @@ CssSelector.prototype = {
* A cache of information about the matched rules, selectors and values attached
* to a CSS property, for the highlighted element.
*
- * The heart of the CssPropertyInfo object is the _findMatchedSelectors() and
- * _findUnmatchedSelectors() methods. These are invoked when the PropertyView
- * tries to access the .matchedSelectors and .unmatchedSelectors arrays.
- * Results are cached, for later reuse.
+ * The heart of the CssPropertyInfo object is the _findMatchedSelectors()
+ * method. This is invoked when the PropertyView tries to access the
+ * .matchedSelectors array. Results are cached, for later reuse.
*
* @param {CssLogic} aCssLogic Reference to the parent CssLogic instance
* @param {string} aProperty The CSS property we are gathering information for
@@ -1518,7 +1373,6 @@ function CssPropertyInfo(aCssLogic, aProperty)
// counted. This includes rules that come from filtered stylesheets (those
// that have sheetAllowed = false).
this._matchedSelectors = null;
- this._unmatchedSelectors = null;
}
CssPropertyInfo.prototype = {
@@ -1561,23 +1415,6 @@ CssPropertyInfo.prototype = {
return this._matchedRuleCount;
},
- /**
- * Retrieve the number of unmatched rules.
- *
- * @return {number} the number of rules that do not match the highlighted
- * element or its parents.
- */
- get unmatchedRuleCount()
- {
- if (!this._unmatchedSelectors) {
- this._findUnmatchedSelectors();
- } else if (this.needRefilter) {
- this._refilterSelectors();
- }
-
- return this._unmatchedRuleCount;
- },
-
/**
* Retrieve the array holding CssSelectorInfo objects for each of the matched
* selectors, from each of the matched rules. Only selectors coming from
@@ -1597,25 +1434,6 @@ CssPropertyInfo.prototype = {
return this._matchedSelectors;
},
- /**
- * Retrieve the array holding CssSelectorInfo objects for each of the
- * unmatched selectors, from each of the unmatched rules. Only selectors
- * coming from allowed stylesheets are included in the array.
- *
- * @return {array} the list of CssSelectorInfo objects of selectors that do
- * not match the highlighted element or its parents.
- */
- get unmatchedSelectors()
- {
- if (!this._unmatchedSelectors) {
- this._findUnmatchedSelectors();
- } else if (this.needRefilter) {
- this._refilterSelectors();
- }
-
- return this._unmatchedSelectors;
- },
-
/**
* Find the selectors that match the highlighted element and its parents.
* Uses CssLogic.processMatchedSelectors() to find the matched selectors,
@@ -1644,7 +1462,7 @@ CssPropertyInfo.prototype = {
// Now we know which of the matches is best, we can mark it BEST_MATCH.
if (this._matchedSelectors.length > 0 &&
- this._matchedSelectors[0].status > CssLogic.STATUS.UNMATCHED) {
+ this._matchedSelectors[0].status > CssLogic.STATUS.UNKNOWN) {
this._matchedSelectors[0].status = CssLogic.STATUS.BEST;
}
},
@@ -1671,53 +1489,8 @@ CssPropertyInfo.prototype = {
},
/**
- * Find the selectors that do not match the highlighted element and its
- * parents.
- * @private
- */
- _findUnmatchedSelectors: function CssPropertyInfo_findUnmatchedSelectors()
- {
- this._unmatchedSelectors = [];
- this._unmatchedRuleCount = 0;
- this.needRefilter = false;
- this._cssLogic._passId++;
-
- this._cssLogic.processUnmatchedSelectors(this._processUnmatchedSelector,
- this);
-
- // Sort the selectors by specificity.
- this._unmatchedSelectors.sort(function(aSelectorInfo1, aSelectorInfo2) {
- return aSelectorInfo1.compareTo(aSelectorInfo2);
- });
- },
-
- /**
- * Process an unmatched CssSelector object. Note that in order to avoid
- * information overload we DO NOT show unmatched system rules.
- *
- * @private
- * @param {CssSelector} aSelector the unmatched CssSelector object.
- */
- _processUnmatchedSelector: function CPI_processUnmatchedSelector(aSelector)
- {
- let cssRule = aSelector._cssRule;
- let value = cssRule.getPropertyValue(this.property);
- if (value) {
- let selectorInfo = new CssSelectorInfo(aSelector, this.property, value,
- CssLogic.STATUS.UNMATCHED);
- this._unmatchedSelectors.push(selectorInfo);
- if (this._cssLogic._passId != cssRule._passId) {
- if (cssRule.sheetAllowed) {
- this._unmatchedRuleCount++;
- }
- cssRule._passId = this._cssLogic._passId;
- }
- }
- },
-
- /**
- * Refilter the matched and unmatched selectors arrays when the
- * CssLogic.sourceFilter changes. This allows for quick filter changes.
+ * Refilter the matched selectors array when the CssLogic.sourceFilter
+ * changes. This allows for quick filter changes.
* @private
*/
_refilterSelectors: function CssPropertyInfo_refilterSelectors()
@@ -1740,12 +1513,6 @@ CssPropertyInfo.prototype = {
this._matchedRuleCount = ruleCount;
}
- if (this._unmatchedSelectors) {
- ruleCount = 0;
- this._unmatchedSelectors.forEach(iterator);
- this._unmatchedRuleCount = ruleCount;
- }
-
this.needRefilter = false;
},
@@ -1758,10 +1525,10 @@ CssPropertyInfo.prototype = {
/**
* A class that holds information about a given CssSelector object.
*
- * Instances of this class are given to CssHtmlTree in the arrays of matched and
- * unmatched selectors. Each such object represents a displayable row in the
- * PropertyView objects. The information given by this object blends data coming
- * from the CssSheet, CssRule and from the CssSelector that own this object.
+ * Instances of this class are given to CssHtmlTree in the array of matched
+ * selectors. Each such object represents a displayable row in the PropertyView
+ * objects. The information given by this object blends data coming from the
+ * CssSheet, CssRule and from the CssSelector that own this object.
*
* @param {CssSelector} aSelector The CssSelector object for which to present information.
* @param {string} aProperty The property for which information should be retrieved.
diff --git a/browser/devtools/styleinspector/csshtmltree.xhtml b/browser/devtools/styleinspector/csshtmltree.xhtml
index 50baa58e06c..bc84e8a4535 100644
--- a/browser/devtools/styleinspector/csshtmltree.xhtml
+++ b/browser/devtools/styleinspector/csshtmltree.xhtml
@@ -77,7 +77,6 @@
&bestMatch;&matched;&parentMatch;
- &unmatched;
@@ -142,15 +141,6 @@ To visually debug the templates without running firefox, alter the display:none
-
-
-
-
&unmatchedSelectors;
-
-
-
@@ -178,32 +168,6 @@ To visually debug the templates without running firefox, alter the display:none
-
-
-