mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 17:55:50 +00:00
Bug 1287042 - Always before/after CSS rules in rule-view; r=bgrins
::before and ::after pseudo-elements are visible in the markup-view today but if, for some reason, they aren't generated, we still want to know that the CSS rule exists. This may happen if you use display:none on the pseudo-element CSS rule itself. When that happens, the pseudo-element won't be generated and therefore there will be no possibility to see the rule in the rule-view (you'd have to go to the style-editor for that). This change keeps the pseudo-elements in the markup-view, but also adds the corresponding CSS rules in the rule-view. MozReview-Commit-ID: tx5IpmtE7b --HG-- extra : rebase_source : 19979672561e55fc5713900b83dd6d40ac33d2a3
This commit is contained in:
parent
0b2aabd777
commit
f4f658ae9a
@ -10,7 +10,7 @@ const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
|
||||
const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
|
||||
|
||||
add_task(function* () {
|
||||
Services.prefs.setBoolPref(PSEUDO_PREF, true);
|
||||
yield pushPref(PSEUDO_PREF, true);
|
||||
|
||||
yield addTab(TEST_URI);
|
||||
let {inspector, view} = yield openRuleView();
|
||||
@ -21,8 +21,6 @@ add_task(function* () {
|
||||
yield testBottomLeft(inspector, view);
|
||||
yield testParagraph(inspector, view);
|
||||
yield testBody(inspector, view);
|
||||
|
||||
Services.prefs.clearUserPref(PSEUDO_PREF);
|
||||
});
|
||||
|
||||
function* testTopLeft(inspector, view) {
|
||||
@ -32,7 +30,9 @@ function* testTopLeft(inspector, view) {
|
||||
elementRulesNb: 4,
|
||||
firstLineRulesNb: 2,
|
||||
firstLetterRulesNb: 1,
|
||||
selectionRulesNb: 0
|
||||
selectionRulesNb: 0,
|
||||
afterRulesNb: 1,
|
||||
beforeRulesNb: 2
|
||||
}
|
||||
);
|
||||
|
||||
@ -122,7 +122,9 @@ function* testTopRight(inspector, view) {
|
||||
elementRulesNb: 4,
|
||||
firstLineRulesNb: 1,
|
||||
firstLetterRulesNb: 1,
|
||||
selectionRulesNb: 0
|
||||
selectionRulesNb: 0,
|
||||
beforeRulesNb: 2,
|
||||
afterRulesNb: 1
|
||||
});
|
||||
|
||||
let gutters = assertGutters(view);
|
||||
@ -142,7 +144,9 @@ function* testBottomRight(inspector, view) {
|
||||
elementRulesNb: 4,
|
||||
firstLineRulesNb: 1,
|
||||
firstLetterRulesNb: 1,
|
||||
selectionRulesNb: 0
|
||||
selectionRulesNb: 0,
|
||||
beforeRulesNb: 3,
|
||||
afterRulesNb: 1
|
||||
});
|
||||
}
|
||||
|
||||
@ -151,7 +155,9 @@ function* testBottomLeft(inspector, view) {
|
||||
elementRulesNb: 4,
|
||||
firstLineRulesNb: 1,
|
||||
firstLetterRulesNb: 1,
|
||||
selectionRulesNb: 0
|
||||
selectionRulesNb: 0,
|
||||
beforeRulesNb: 2,
|
||||
afterRulesNb: 1
|
||||
});
|
||||
}
|
||||
|
||||
@ -161,7 +167,9 @@ function* testParagraph(inspector, view) {
|
||||
elementRulesNb: 3,
|
||||
firstLineRulesNb: 1,
|
||||
firstLetterRulesNb: 1,
|
||||
selectionRulesNb: 1
|
||||
selectionRulesNb: 1,
|
||||
beforeRulesNb: 0,
|
||||
afterRulesNb: 0
|
||||
});
|
||||
|
||||
assertGutters(view);
|
||||
@ -209,7 +217,11 @@ function* assertPseudoElementRulesNumbers(selector, inspector, view, ruleNbs) {
|
||||
firstLetterRules: elementStyle.rules.filter(rule =>
|
||||
rule.pseudoElement === ":first-letter"),
|
||||
selectionRules: elementStyle.rules.filter(rule =>
|
||||
rule.pseudoElement === ":-moz-selection")
|
||||
rule.pseudoElement === ":-moz-selection"),
|
||||
beforeRules: elementStyle.rules.filter(rule =>
|
||||
rule.pseudoElement === ":before"),
|
||||
afterRules: elementStyle.rules.filter(rule =>
|
||||
rule.pseudoElement === ":after"),
|
||||
};
|
||||
|
||||
is(rules.elementRules.length, ruleNbs.elementRulesNb,
|
||||
@ -220,6 +232,10 @@ function* assertPseudoElementRulesNumbers(selector, inspector, view, ruleNbs) {
|
||||
selector + " has the correct number of :first-letter rules");
|
||||
is(rules.selectionRules.length, ruleNbs.selectionRulesNb,
|
||||
selector + " has the correct number of :selection rules");
|
||||
is(rules.beforeRules.length, ruleNbs.beforeRulesNb,
|
||||
selector + " has the correct number of :before rules");
|
||||
is(rules.afterRules.length, ruleNbs.afterRulesNb,
|
||||
selector + " has the correct number of :after rules");
|
||||
|
||||
return rules;
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that pseudoelements are displayed correctly in the rule view
|
||||
// Test that pseudoelements are displayed correctly in the markup view.
|
||||
|
||||
const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
|
||||
|
||||
|
@ -23,12 +23,8 @@ loader.lazyGetter(this, "CssLogic", () => require("devtools/server/css-logic").C
|
||||
loader.lazyGetter(this, "SharedCssLogic", () => require("devtools/shared/inspector/css-logic"));
|
||||
loader.lazyGetter(this, "DOMUtils", () => Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils));
|
||||
|
||||
// When gathering rules to read for pseudo elements, we will skip
|
||||
// :before and :after, which are handled as a special case.
|
||||
loader.lazyGetter(this, "PSEUDO_ELEMENTS_TO_READ", () => {
|
||||
return DOMUtils.getCSSPseudoElementNames().filter(pseudo => {
|
||||
return pseudo !== ":before" && pseudo !== ":after";
|
||||
});
|
||||
loader.lazyGetter(this, "PSEUDO_ELEMENTS", () => {
|
||||
return DOMUtils.getCSSPseudoElementNames();
|
||||
});
|
||||
|
||||
const XHTML_NS = "http://www.w3.org/1999/xhtml";
|
||||
@ -541,10 +537,9 @@ var PageStyleActor = protocol.ActorClassWithSpec(pageStyleSpec, {
|
||||
rules.push(oneRule);
|
||||
});
|
||||
|
||||
// Now any pseudos (except for ::before / ::after, which was handled as
|
||||
// a 'normal rule' above.
|
||||
// Now any pseudos.
|
||||
if (showElementStyles) {
|
||||
for (let readPseudo of PSEUDO_ELEMENTS_TO_READ) {
|
||||
for (let readPseudo of PSEUDO_ELEMENTS) {
|
||||
this._getElementRules(bindingElement, readPseudo, inherited, options)
|
||||
.forEach(oneRule => {
|
||||
rules.push(oneRule);
|
||||
|
Loading…
Reference in New Issue
Block a user