corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1539265 - Handle ::marker pseudo-elements in css-logic.js, so their rules show in the rule view. r=jdescottes

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D25071
This commit is contained in:
Ian Moody
2019-04-01 21:45:28 +00:00
parent 705df390cc
commit eb0723bb74
4 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
View File

@@ -8,9 +8,11 @@
const TEST_URI = URL_ROOT + "doc_pseudoelement.html"; const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements"; const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
add_task(async function() { add_task(async function() {
await pushPref(PSEUDO_PREF, true); await pushPref(PSEUDO_PREF, true);
await pushPref(SHOWANON_PREF, true);
await addTab(TEST_URI); await addTab(TEST_URI);
const {inspector, view} = await openRuleView(); const {inspector, view} = await openRuleView();
@@ -21,6 +23,7 @@ add_task(async function() {
await testBottomLeft(inspector, view); await testBottomLeft(inspector, view);
await testParagraph(inspector, view); await testParagraph(inspector, view);
await testBody(inspector, view); await testBody(inspector, view);
await testList(inspector, view);
}); });
async function testTopLeft(inspector, view) { async function testTopLeft(inspector, view) {
@@ -31,6 +34,7 @@ async function testTopLeft(inspector, view) {
firstLineRulesNb: 2, firstLineRulesNb: 2,
firstLetterRulesNb: 1, firstLetterRulesNb: 1,
selectionRulesNb: 1, selectionRulesNb: 1,
markerRulesNb: 0,
afterRulesNb: 1, afterRulesNb: 1,
beforeRulesNb: 2, beforeRulesNb: 2,
} }
@@ -123,6 +127,7 @@ async function testTopRight(inspector, view) {
firstLineRulesNb: 1, firstLineRulesNb: 1,
firstLetterRulesNb: 1, firstLetterRulesNb: 1,
selectionRulesNb: 0, selectionRulesNb: 0,
markerRulesNb: 0,
beforeRulesNb: 2, beforeRulesNb: 2,
afterRulesNb: 1, afterRulesNb: 1,
}); });
@@ -145,6 +150,7 @@ async function testBottomRight(inspector, view) {
firstLineRulesNb: 1, firstLineRulesNb: 1,
firstLetterRulesNb: 1, firstLetterRulesNb: 1,
selectionRulesNb: 0, selectionRulesNb: 0,
markerRulesNb: 0,
beforeRulesNb: 3, beforeRulesNb: 3,
afterRulesNb: 1, afterRulesNb: 1,
}); });
@@ -156,6 +162,7 @@ async function testBottomLeft(inspector, view) {
firstLineRulesNb: 1, firstLineRulesNb: 1,
firstLetterRulesNb: 1, firstLetterRulesNb: 1,
selectionRulesNb: 0, selectionRulesNb: 0,
markerRulesNb: 0,
beforeRulesNb: 2, beforeRulesNb: 2,
afterRulesNb: 1, afterRulesNb: 1,
}); });
@@ -168,6 +175,7 @@ async function testParagraph(inspector, view) {
firstLineRulesNb: 1, firstLineRulesNb: 1,
firstLetterRulesNb: 1, firstLetterRulesNb: 1,
selectionRulesNb: 2, selectionRulesNb: 2,
markerRulesNb: 0,
beforeRulesNb: 0, beforeRulesNb: 0,
afterRulesNb: 0, afterRulesNb: 0,
}); });
@@ -197,6 +205,20 @@ async function testBody(inspector, view) {
is(gutters.length, 0, "There are no gutter headings"); is(gutters.length, 0, "There are no gutter headings");
} }
async function testList(inspector, view) {
await assertPseudoElementRulesNumbers("#list", inspector, view, {
elementRulesNb: 4,
firstLineRulesNb: 1,
firstLetterRulesNb: 1,
selectionRulesNb: 0,
markerRulesNb: 1,
beforeRulesNb: 1,
afterRulesNb: 1,
});
assertGutters(view);
}
function convertTextPropsToString(textProps) { function convertTextPropsToString(textProps) {
return textProps.map(t => t.name + ": " + t.value).join("; "); return textProps.map(t => t.name + ": " + t.value).join("; ");
} }
@@ -218,6 +240,8 @@ async function assertPseudoElementRulesNumbers(selector, inspector, view, ruleNb
rule.pseudoElement === ":first-letter"), rule.pseudoElement === ":first-letter"),
selectionRules: elementStyle.rules.filter(rule => selectionRules: elementStyle.rules.filter(rule =>
rule.pseudoElement === ":selection"), rule.pseudoElement === ":selection"),
markerRules: elementStyle.rules.filter(rule =>
rule.pseudoElement === ":marker"),
beforeRules: elementStyle.rules.filter(rule => beforeRules: elementStyle.rules.filter(rule =>
rule.pseudoElement === ":before"), rule.pseudoElement === ":before"),
afterRules: elementStyle.rules.filter(rule => afterRules: elementStyle.rules.filter(rule =>
@@ -232,6 +256,8 @@ async function assertPseudoElementRulesNumbers(selector, inspector, view, ruleNb
selector + " has the correct number of :first-letter rules"); selector + " has the correct number of :first-letter rules");
is(rules.selectionRules.length, ruleNbs.selectionRulesNb, is(rules.selectionRules.length, ruleNbs.selectionRulesNb,
selector + " has the correct number of :selection rules"); selector + " has the correct number of :selection rules");
is(rules.markerRules.length, ruleNbs.markerRulesNb,
selector + " has the correct number of :marker rules");
is(rules.beforeRules.length, ruleNbs.beforeRulesNb, is(rules.beforeRules.length, ruleNbs.beforeRulesNb,
selector + " has the correct number of :before rules"); selector + " has the correct number of :before rules");
is(rules.afterRules.length, ruleNbs.afterRulesNb, is(rules.afterRules.length, ruleNbs.afterRulesNb,

4
devtools/client/inspector/rules/test/doc_pseudoelement.html
View File

@@ -106,6 +106,10 @@ p:first-letter {
left:0; left:0;
} }
#list::marker {
color: purple;
}
</style> </style>
</head> </head>
<body> <body>

2
devtools/server/actors/inspector/css-logic.js
View File

@@ -665,7 +665,7 @@ CssLogic.getSelectors = function(domRule) {
* *
* @returns {Object} * @returns {Object}
* - {DOMNode} node The non-anonymous node * - {DOMNode} node The non-anonymous node
* - {string} pseudo One of ':before', ':after', or null. * - {string} pseudo One of ':marker', ':before', ':after', or null.
*/ */
CssLogic.getBindingElementAndPseudo = getBindingElementAndPseudo; CssLogic.getBindingElementAndPseudo = getBindingElementAndPseudo;

9
devtools/shared/inspector/css-logic.js
View File

@@ -456,19 +456,22 @@ exports.getCssPath = getCssPath;
exports.getXPath = getXPath; exports.getXPath = getXPath;
/** /**
* Given a node, check to see if it is a ::before or ::after element. * Given a node, check to see if it is a ::marker, ::before, or ::after element.
* If so, return the node that is accessible from within the document * If so, return the node that is accessible from within the document
* (the parent of the anonymous node), along with which pseudo element * (the parent of the anonymous node), along with which pseudo element
* it was. Otherwise, return the node itself. * it was. Otherwise, return the node itself.
* *
* @returns {Object} * @returns {Object}
* - {DOMNode} node The non-anonymous node * - {DOMNode} node The non-anonymous node
* - {string} pseudo One of ':before', ':after', or null. * - {string} pseudo One of ':marker', ':before', ':after', or null.
*/ */
function getBindingElementAndPseudo(node) { function getBindingElementAndPseudo(node) {
let bindingElement = node; let bindingElement = node;
let pseudo = null; let pseudo = null;
if (node.nodeName == "_moz_generated_content_before") { if (node.nodeName == "_moz_generated_content_marker") {
bindingElement = node.parentNode;
pseudo = ":marker";
} else if (node.nodeName == "_moz_generated_content_before") {
bindingElement = node.parentNode; bindingElement = node.parentNode;
pseudo = ":before"; pseudo = ":before";
} else if (node.nodeName == "_moz_generated_content_after") { } else if (node.nodeName == "_moz_generated_content_after") {