зеркало из https://github.com/mozilla/gecko-dev.git
Bug 698762 - Remove unmatched rules from style inspector; backout; a=dcamp
This commit is contained in:
Rob Campbell
Родитель
2d393da946
Коммит
edb524a3cb
|
|
@ -136,8 +136,9 @@ XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
|
|||
.createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
|
||||
|
||||
CssHtmlTree.prototype = {
|
||||
// Cache the list of properties that have matched properties.
|
||||
// Cache the list of properties that have matched and unmatched properties.
|
||||
_matchedProperties: null,
|
||||
_unmatchedProperties: null,
|
||||
|
||||
htmlComplete: false,
|
||||
|
||||
|
|
@ -176,6 +177,7 @@ CssHtmlTree.prototype = {
|
|||
}
|
||||
|
||||
this.viewedElement = aElement;
|
||||
this._unmatchedProperties = null;
|
||||
this._matchedProperties = null;
|
||||
|
||||
CssHtmlTree.processTemplate(this.templatePath, this.path, this);
|
||||
|
|
@ -373,6 +375,41 @@ 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.
|
||||
*/
|
||||
|
|
@ -423,6 +460,7 @@ 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 = {
|
||||
|
|
@ -438,15 +476,33 @@ 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,
|
||||
|
||||
|
|
@ -477,6 +533,14 @@ 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?
|
||||
*/
|
||||
|
|
@ -520,20 +584,24 @@ 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.tree.numVisibleProperties++;
|
||||
this.valueNode.innerHTML = this.propertyInfo.value;
|
||||
this.refreshMatchedSelectors();
|
||||
this.refreshAllSelectors();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -544,7 +612,7 @@ PropertyView.prototype = {
|
|||
let hasMatchedSelectors = this.hasMatchedSelectors;
|
||||
this.matchedSelectorsContainer.hidden = !hasMatchedSelectors;
|
||||
|
||||
if (hasMatchedSelectors) {
|
||||
if (hasMatchedSelectors || this.hasUnmatchedSelectors) {
|
||||
this.propertyHeader.classList.add("expandable");
|
||||
} else {
|
||||
this.propertyHeader.classList.remove("expandable");
|
||||
|
|
@ -560,6 +628,52 @@ 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.
|
||||
|
|
@ -573,9 +687,27 @@ 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.
|
||||
*
|
||||
|
|
@ -587,11 +719,24 @@ PropertyView.prototype = {
|
|||
{
|
||||
if (aEvent.target.className != "helplink") {
|
||||
this.matchedExpanded = !this.matchedExpanded;
|
||||
this.refreshMatchedSelectors();
|
||||
if (!this.hasMatchedSelectors && this.hasUnmatchedSelectors) {
|
||||
this.unmatchedExpanded = !this.unmatchedExpanded;
|
||||
}
|
||||
this.refreshAllSelectors();
|
||||
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.
|
||||
*/
|
||||
|
|
@ -620,11 +765,11 @@ function SelectorView(aTree, aSelectorInfo)
|
|||
* @see CssLogic.STATUS
|
||||
*/
|
||||
SelectorView.STATUS_NAMES = [
|
||||
// "Parent Match", "Matched", "Best Match"
|
||||
// "Unmatched", "Parent Match", "Matched", "Best Match"
|
||||
];
|
||||
|
||||
SelectorView.CLASS_NAMES = [
|
||||
"parentmatch", "matched", "bestmatch"
|
||||
"unmatched", "parentmatch", "matched", "bestmatch"
|
||||
];
|
||||
|
||||
SelectorView.prototype = {
|
||||
|
|
@ -645,7 +790,7 @@ SelectorView.prototype = {
|
|||
|
||||
for (let status in CssLogic.STATUS) {
|
||||
let i = CssLogic.STATUS[status];
|
||||
if (i > CssLogic.STATUS.UNKNOWN) {
|
||||
if (i > -1) {
|
||||
let value = CssHtmlTree.l10n("rule.status." + status);
|
||||
// Replace normal spaces with non-breaking spaces
|
||||
SelectorView.STATUS_NAMES[i] = value.replace(/ /g, '\u00A0');
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@
|
|||
* 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 contains the matched CSS rules on the page.
|
||||
* highlighted element. It divides the CSS rules on the page into matched and
|
||||
* unmatched rules.
|
||||
* - CssSelectorInfo is a wrapper around CssSelector, which adds sorting with
|
||||
* reference to the selected element.
|
||||
*/
|
||||
|
|
@ -115,9 +116,10 @@ CssLogic.MEDIA = {
|
|||
* @see csshtmltree.js RuleView._cacheStatusNames()
|
||||
*/
|
||||
CssLogic.STATUS = {
|
||||
BEST: 2,
|
||||
MATCHED: 1,
|
||||
PARENT_MATCH: 0,
|
||||
BEST: 3,
|
||||
MATCHED: 2,
|
||||
PARENT_MATCH: 1,
|
||||
UNMATCHED: 0,
|
||||
UNKNOWN: -1,
|
||||
};
|
||||
|
||||
|
|
@ -145,11 +147,13 @@ CssLogic.prototype = {
|
|||
// processMatchedSelectors().
|
||||
_passId: 0,
|
||||
|
||||
// Used for tracking matched CssSelector objects.
|
||||
// Used for tracking matched CssSelector objects, such that we can skip them
|
||||
// in processUnmatchedSelectors().
|
||||
_matchId: 0,
|
||||
|
||||
_matchedRules: null,
|
||||
_matchedSelectors: null,
|
||||
_unmatchedSelectors: null,
|
||||
|
||||
domUtils: Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils),
|
||||
|
||||
|
|
@ -165,6 +169,7 @@ CssLogic.prototype = {
|
|||
this._sheetsCached = false;
|
||||
this._matchedRules = null;
|
||||
this._matchedSelectors = null;
|
||||
this._unmatchedSelectors = null;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -199,6 +204,7 @@ CssLogic.prototype = {
|
|||
|
||||
this._matchedRules = null;
|
||||
this._matchedSelectors = null;
|
||||
this._unmatchedSelectors = null;
|
||||
let win = this.viewedDocument.defaultView;
|
||||
this._computedStyle = win.getComputedStyle(this.viewedElement, "");
|
||||
},
|
||||
|
|
@ -213,7 +219,8 @@ CssLogic.prototype = {
|
|||
|
||||
/**
|
||||
* Source filter. Only display properties coming from the given source (web
|
||||
* address).
|
||||
* address). Note that in order to avoid information overload we DO NOT show
|
||||
* unmatched system rules.
|
||||
* @see CssLogic.FILTER.*
|
||||
*/
|
||||
set sourceFilter(aValue) {
|
||||
|
|
@ -240,6 +247,7 @@ CssLogic.prototype = {
|
|||
if (needFullUpdate) {
|
||||
this._matchedRules = null;
|
||||
this._matchedSelectors = null;
|
||||
this._unmatchedSelectors = null;
|
||||
this._propertyInfos = {};
|
||||
} else {
|
||||
// Update the CssPropertyInfo objects.
|
||||
|
|
@ -487,6 +495,7 @@ CssLogic.prototype = {
|
|||
}
|
||||
|
||||
this._matchedSelectors = [];
|
||||
this._unmatchedSelectors = null;
|
||||
this._passId++;
|
||||
|
||||
for (let i = 0; i < this._matchedRules.length; i++) {
|
||||
|
|
@ -531,6 +540,52 @@ 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.
|
||||
*
|
||||
|
|
@ -631,6 +686,95 @@ 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.
|
||||
*
|
||||
|
|
@ -1350,9 +1494,10 @@ 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()
|
||||
* method. This is invoked when the PropertyView tries to access the
|
||||
* .matchedSelectors array. Results are cached, for later reuse.
|
||||
* 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.
|
||||
*
|
||||
* @param {CssLogic} aCssLogic Reference to the parent CssLogic instance
|
||||
* @param {string} aProperty The CSS property we are gathering information for
|
||||
|
|
@ -1373,6 +1518,7 @@ 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 = {
|
||||
|
|
@ -1415,6 +1561,23 @@ 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
|
||||
|
|
@ -1434,6 +1597,25 @@ 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,
|
||||
|
|
@ -1462,7 +1644,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.UNKNOWN) {
|
||||
this._matchedSelectors[0].status > CssLogic.STATUS.UNMATCHED) {
|
||||
this._matchedSelectors[0].status = CssLogic.STATUS.BEST;
|
||||
}
|
||||
},
|
||||
|
|
@ -1489,8 +1671,53 @@ CssPropertyInfo.prototype = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Refilter the matched selectors array when the CssLogic.sourceFilter
|
||||
* changes. This allows for quick filter changes.
|
||||
* 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.
|
||||
* @private
|
||||
*/
|
||||
_refilterSelectors: function CssPropertyInfo_refilterSelectors()
|
||||
|
|
@ -1513,6 +1740,12 @@ CssPropertyInfo.prototype = {
|
|||
this._matchedRuleCount = ruleCount;
|
||||
}
|
||||
|
||||
if (this._unmatchedSelectors) {
|
||||
ruleCount = 0;
|
||||
this._unmatchedSelectors.forEach(iterator);
|
||||
this._unmatchedRuleCount = ruleCount;
|
||||
}
|
||||
|
||||
this.needRefilter = false;
|
||||
},
|
||||
|
||||
|
|
@ -1525,10 +1758,10 @@ CssPropertyInfo.prototype = {
|
|||
/**
|
||||
* A class that holds information about a given CssSelector 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.
|
||||
* 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.
|
||||
*
|
||||
* @param {CssSelector} aSelector The CssSelector object for which to present information.
|
||||
* @param {string} aProperty The property for which information should be retrieved.
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@
|
|||
<xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
|
||||
<xul:label class="legendKey matched">&matched;</xul:label>
|
||||
<xul:label class="legendKey parentmatch">&parentMatch;</xul:label>
|
||||
<xul:label class="legendKey unmatched">&unmatched;</xul:label>
|
||||
<xul:spacer flex="1"/>
|
||||
<xul:resizer dir="bottomright"/>
|
||||
</xul:hbox>
|
||||
|
|
@ -146,6 +147,15 @@ To visually debug the templates without running firefox, alter the display:none
|
|||
|
||||
<div save="${matchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
|
||||
</div>
|
||||
<div save="${unmatchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
|
||||
<div save="${unmatchedTitleBlock}" onclick="${unmatchedSelectorsClick}"
|
||||
class="rule-unmatched">
|
||||
<div save="${unmatchedExpander}" class="expander" dir="${getRTLAttr}"></div>
|
||||
<div save="${unmatchedSelectorsTitleNode}">&unmatchedSelectors;</div>
|
||||
</div>
|
||||
<div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"
|
||||
dir="${getRTLAttr}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -173,6 +183,32 @@ To visually debug the templates without running firefox, alter the display:none
|
|||
</loop>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
A templateUnmatchedSelectors sits inside each templateProperties showing the
|
||||
list of selectors that do not affect that property. Each needs data like this:
|
||||
{
|
||||
unmatchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].unmatchedSelectorViews
|
||||
}
|
||||
This is a template so the parent does not need to be a table, except that
|
||||
using a div as the parent causes the DOM to muck with the tr elements
|
||||
-->
|
||||
<div id="templateUnmatchedSelectors">
|
||||
<table>
|
||||
<loop foreach="selector in ${unmatchedSelectorViews}">
|
||||
<tr>
|
||||
<td dir="ltr" class="rule-text ${selector.statusClass}">
|
||||
${selector.humanReadableText(__element)}
|
||||
</td>
|
||||
<td class="rule-link">
|
||||
<a target="_blank" href="view-source:${selector.selectorInfo.href}" class="link"
|
||||
title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</loop>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
color: #000;
|
||||
}
|
||||
|
||||
.unmatched1, .unmatched2, .unmatched3, .unmatched4, .unmatched5, .unmatched6, .unmatched7 {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ function runTests()
|
|||
ok(stylePanel.isOpen(), "style inspector is open");
|
||||
|
||||
testMatchedSelectors();
|
||||
testUnmatchedSelectors();
|
||||
|
||||
info("finishing up");
|
||||
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
|
||||
|
|
@ -68,6 +69,30 @@ function testMatchedSelectors()
|
|||
"hasMatchedSelectors returns true");
|
||||
}
|
||||
|
||||
function testUnmatchedSelectors()
|
||||
{
|
||||
info("checking selector counts, unmatched rules and titles");
|
||||
let body = content.document.body;
|
||||
ok(body, "captain, we have a body");
|
||||
|
||||
info("selecting content.document.body");
|
||||
stylePanel.selectNode(body);
|
||||
|
||||
let htmlTree = stylePanel.cssHtmlTree;
|
||||
|
||||
is(body, htmlTree.viewedElement,
|
||||
"style inspector node matches the selected node");
|
||||
|
||||
let propertyView = new PropertyView(htmlTree, "color");
|
||||
let numUnmatchedSelectors = propertyView.propertyInfo.unmatchedSelectors.length;
|
||||
|
||||
is(numUnmatchedSelectors, 13,
|
||||
"CssLogic returns the correct number of unmatched selectors for body");
|
||||
|
||||
is(propertyView.hasUnmatchedSelectors, true,
|
||||
"hasUnmatchedSelectors returns true");
|
||||
}
|
||||
|
||||
function finishUp()
|
||||
{
|
||||
Services.obs.removeObserver(finishUp, "StyleInspector-closed", false);
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ function SI_CheckProperty()
|
|||
let cssLogic = stylePanel.cssLogic;
|
||||
let propertyInfo = cssLogic.getPropertyInfo("color");
|
||||
ok(propertyInfo.matchedRuleCount > 0, "color property has matching rules");
|
||||
ok(propertyInfo.unmatchedRuleCount > 0, "color property has unmatched rules");
|
||||
}
|
||||
|
||||
function finishUp()
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@
|
|||
<span id="text" lang="en" class="text">Use inspectstyle($('text')) to inspect me</span><br />
|
||||
<span id="text2" class="text2">Use inspectstyle($('text2'))</span><br />
|
||||
<a class="link" href="#">Some Link</a>
|
||||
<h2>font-family has a single unmatched rule</h2>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@
|
|||
- This is the link title shown in the hover tooltip. -->
|
||||
<!ENTITY helpLinkTitle "Read the documentation for this property">
|
||||
|
||||
<!-- LOCALIZATION NOTE (unmatchedSelectors): For each style property
|
||||
- the panel shows whether there are any selectors that do not match the
|
||||
- currently selected element. -->
|
||||
<!ENTITY unmatchedSelectors "Unmatched selectors">
|
||||
|
||||
<!-- LOCALIZATION NOTE (bestMatch, matched, parentMatch & unmatched): For each
|
||||
- style property the panel shows the rules which hold that specific property.
|
||||
- For every rule, the rule status is also displayed: a rule can be the best
|
||||
<!-- LOCALIZATION NOTE (noPropertiesFound): In the case where there are no CSS
|
||||
- properties to display e.g. due to search criteria this message is
|
||||
- displayed. -->
|
||||
|
|
@ -31,3 +39,4 @@
|
|||
<!ENTITY bestMatch "Best Match">
|
||||
<!ENTITY matched "Matched">
|
||||
<!ENTITY parentMatch "Parent Match">
|
||||
<!ENTITY unmatched "Unmatched">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ panelTitle=Style Inspector
|
|||
rule.status.BEST=Best Match
|
||||
rule.status.MATCHED=Matched
|
||||
rule.status.PARENT_MATCH=Parent Match
|
||||
rule.status.UNMATCHED=Unmatched
|
||||
|
||||
# LOCALIZATION NOTE (rule.sourceElement, rule.sourceInline): For each
|
||||
# style property the panel shows the rules which hold that specific property.
|
||||
|
|
|
|||
|
|
@ -92,6 +92,14 @@ body {
|
|||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
|
||||
.link,
|
||||
|
|
@ -125,6 +133,10 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
|
|
@ -162,6 +174,10 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
|
@ -198,6 +214,9 @@ body {
|
|||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
|
|
|
|||
|
|
@ -92,6 +92,14 @@ body {
|
|||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
|
||||
.link,
|
||||
|
|
@ -125,28 +133,30 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
}
|
||||
|
||||
.expander {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
-moz-appearance: treetwisty;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
float: left;
|
||||
-moz-margin-start: 15px;
|
||||
-moz-margin-start: 5px;
|
||||
-moz-margin-end: 5px;
|
||||
margin-top: 3px;
|
||||
background: url("chrome://browser/skin/devtools/arrows.png") 48px 0;
|
||||
}
|
||||
|
||||
.expander[dir="rtl"] {
|
||||
float: right;
|
||||
background-position: 40px 0;
|
||||
}
|
||||
|
||||
.expander[open] {
|
||||
background-position: 32px 0;
|
||||
-moz-appearance: treetwistyopen;
|
||||
}
|
||||
|
||||
.expandable {
|
||||
|
|
@ -162,6 +172,10 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
|
@ -198,6 +212,9 @@ body {
|
|||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
|
|
|
|||
|
|
@ -92,6 +92,14 @@ body {
|
|||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
|
||||
.link,
|
||||
|
|
@ -125,6 +133,10 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
|
|
@ -161,6 +173,10 @@ body {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
|
@ -197,6 +213,9 @@ body {
|
|||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче