From 8e985aa3143772e0fe90609550668ac5d2e7d8f3 Mon Sep 17 00:00:00 2001 From: Ian Moody Date: Mon, 1 Apr 2019 21:45:28 +0000 Subject: [PATCH] Bug 1539265 - Handle ::marker pseudo-elements in css-logic.js, so their rules show in the rule view. r=jdescottes Differential Revision: https://phabricator.services.mozilla.com/D25071 --HG-- extra : moz-landing-system : lando --- .../test/browser_rules_pseudo-element_01.js | 26 +++++++++++++++++++ .../rules/test/doc_pseudoelement.html | 4 +++ devtools/server/actors/inspector/css-logic.js | 2 +- devtools/shared/inspector/css-logic.js | 9 ++++--- 4 files changed, 37 insertions(+), 4 deletions(-) diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js index 8631e72325e8..705696adaa69 100644 --- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js @@ -8,9 +8,11 @@ const TEST_URI = URL_ROOT + "doc_pseudoelement.html"; const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements"; +const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent"; add_task(async function() { await pushPref(PSEUDO_PREF, true); + await pushPref(SHOWANON_PREF, true); await addTab(TEST_URI); const {inspector, view} = await openRuleView(); @@ -21,6 +23,7 @@ add_task(async function() { await testBottomLeft(inspector, view); await testParagraph(inspector, view); await testBody(inspector, view); + await testList(inspector, view); }); async function testTopLeft(inspector, view) { @@ -31,6 +34,7 @@ async function testTopLeft(inspector, view) { firstLineRulesNb: 2, firstLetterRulesNb: 1, selectionRulesNb: 1, + markerRulesNb: 0, afterRulesNb: 1, beforeRulesNb: 2, } @@ -123,6 +127,7 @@ async function testTopRight(inspector, view) { firstLineRulesNb: 1, firstLetterRulesNb: 1, selectionRulesNb: 0, + markerRulesNb: 0, beforeRulesNb: 2, afterRulesNb: 1, }); @@ -145,6 +150,7 @@ async function testBottomRight(inspector, view) { firstLineRulesNb: 1, firstLetterRulesNb: 1, selectionRulesNb: 0, + markerRulesNb: 0, beforeRulesNb: 3, afterRulesNb: 1, }); @@ -156,6 +162,7 @@ async function testBottomLeft(inspector, view) { firstLineRulesNb: 1, firstLetterRulesNb: 1, selectionRulesNb: 0, + markerRulesNb: 0, beforeRulesNb: 2, afterRulesNb: 1, }); @@ -168,6 +175,7 @@ async function testParagraph(inspector, view) { firstLineRulesNb: 1, firstLetterRulesNb: 1, selectionRulesNb: 2, + markerRulesNb: 0, beforeRulesNb: 0, afterRulesNb: 0, }); @@ -197,6 +205,20 @@ async function testBody(inspector, view) { 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) { return textProps.map(t => t.name + ": " + t.value).join("; "); } @@ -218,6 +240,8 @@ async function assertPseudoElementRulesNumbers(selector, inspector, view, ruleNb rule.pseudoElement === ":first-letter"), selectionRules: elementStyle.rules.filter(rule => rule.pseudoElement === ":selection"), + markerRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":marker"), beforeRules: elementStyle.rules.filter(rule => rule.pseudoElement === ":before"), 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"); is(rules.selectionRules.length, ruleNbs.selectionRulesNb, 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, selector + " has the correct number of :before rules"); is(rules.afterRules.length, ruleNbs.afterRulesNb, diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html index ad61b5d94129..6c85c5560308 100644 --- a/devtools/client/inspector/rules/test/doc_pseudoelement.html +++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html @@ -106,6 +106,10 @@ p:first-letter { left:0; } +#list::marker { + color: purple; +} + diff --git a/devtools/server/actors/inspector/css-logic.js b/devtools/server/actors/inspector/css-logic.js index e16580198e1d..b9afb49fe3fb 100644 --- a/devtools/server/actors/inspector/css-logic.js +++ b/devtools/server/actors/inspector/css-logic.js @@ -665,7 +665,7 @@ CssLogic.getSelectors = function(domRule) { * * @returns {Object} * - {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; diff --git a/devtools/shared/inspector/css-logic.js b/devtools/shared/inspector/css-logic.js index 7521ebafaedd..1facbb6ae6e0 100644 --- a/devtools/shared/inspector/css-logic.js +++ b/devtools/shared/inspector/css-logic.js @@ -456,19 +456,22 @@ exports.getCssPath = getCssPath; 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 * (the parent of the anonymous node), along with which pseudo element * it was. Otherwise, return the node itself. * * @returns {Object} * - {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) { let bindingElement = node; 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; pseudo = ":before"; } else if (node.nodeName == "_moz_generated_content_after") {