wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 698762 - Remove unmatched rules from style inspector; r=msucan

Browse Source
This commit is contained in:
Michael Ratcliffe 2011-11-05 12:38:17 +01:00
parent afe256aed4
commit 94483e58bf
12 changed files with 34 additions and 541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
browser/devtools/styleinspector/CssHtmlTree.jsm
View File

@ -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');

265
browser/devtools/styleinspector/CssLogic.jsm
View File

@ -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.

36
browser/devtools/styleinspector/csshtmltree.xhtml
View File

@ -77,7 +77,6 @@
<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>
@ -142,15 +141,6 @@ 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>
@ -178,32 +168,6 @@ 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>

4
browser/devtools/styleinspector/test/browser/browser_bug683672.html
View File

@ -7,10 +7,6 @@
color: #000;
}
.unmatched1, .unmatched2, .unmatched3, .unmatched4, .unmatched5, .unmatched6, .unmatched7 {
color: #f00;
}
div {
position: absolute;
top: 40px;

25
browser/devtools/styleinspector/test/browser/browser_bug683672.js
View File

@ -38,7 +38,6 @@ function runTests()
ok(stylePanel.isOpen(), "style inspector is open");
testMatchedSelectors();
testUnmatchedSelectors();
info("finishing up");
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
@ -69,30 +68,6 @@ 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);

1
browser/devtools/styleinspector/test/browser/browser_styleinspector.js
View File

@ -64,7 +64,6 @@ 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()

1
browser/devtools/styleinspector/test/browser/browser_styleinspector_webconsole.htm
View File

@ -179,7 +179,6 @@
<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>

12
browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
View File

@ -18,17 +18,11 @@
- 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 (bestMatch, matched & parentMatch): 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
- match, a match, a parent match, or a rule did not match the element the
- user has highlighted. -->
<!ENTITY bestMatch "Best Match">
<!ENTITY matched "Matched">
<!ENTITY parentMatch "Parent Match">
<!ENTITY unmatched "Unmatched">

1
browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
View File

@ -10,7 +10,6 @@ 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.

19
browser/themes/gnomestripe/browser/devtools/csshtmltree.css
View File

@ -92,14 +92,6 @@ 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,
@ -133,10 +125,6 @@ body {
visibility: visible;
}
.unmatchedSelectorTable {
-moz-margin-start: 15px;
}
.rulelink {
color: -moz-dialogtext;
-moz-margin-start: 12px;
@ -174,10 +162,6 @@ body {
visibility: visible;
}
.only-unmatched {
-moz-margin-start: 0;
}
.property-name {
display: inline-block;
font-size: 12px;
@ -214,9 +198,6 @@ body {
.parentmatch {
color: #666;
}
.unmatched {
color: brown;
}
#propertyContainer {
display: -moz-box;

31
browser/themes/pinstripe/browser/devtools/csshtmltree.css
View File

@ -92,14 +92,6 @@ 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,
@ -133,30 +125,28 @@ body {
visibility: visible;
}
.unmatchedSelectorTable {
-moz-margin-start: 15px;
}
.rulelink {
color: -moz-dialogtext;
-moz-margin-start: 12px;
}
.expander {
-moz-appearance: treetwisty;
width: 12px;
height: 12px;
width: 8px;
height: 8px;
float: left;
-moz-margin-start: 5px;
-moz-margin-start: 15px;
-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] {
-moz-appearance: treetwistyopen;
background-position: 32px 0;
}
.expandable {
@ -172,10 +162,6 @@ body {
visibility: visible;
}
.only-unmatched {
-moz-margin-start: 0;
}
.property-name {
display: inline-block;
font-size: 12px;
@ -212,9 +198,6 @@ body {
.parentmatch {
color: #666;
}
.unmatched {
color: brown;
}
#propertyContainer {
display: -moz-box;

19
browser/themes/winstripe/browser/devtools/csshtmltree.css
View File

@ -92,14 +92,6 @@ 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,
@ -133,10 +125,6 @@ body {
visibility: visible;
}
.unmatchedSelectorTable {
-moz-margin-start: 15px;
}
.rulelink {
color: -moz-dialogtext;
-moz-margin-start: 12px;
@ -173,10 +161,6 @@ body {
visibility: visible;
}
.only-unmatched {
-moz-margin-start: 0;
}
.property-name {
display: inline-block;
font-size: 12px;
@ -213,9 +197,6 @@ body {
.parentmatch {
color: #666;
}
.unmatched {
color: brown;
}
#propertyContainer {
display: -moz-box;