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

devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js

@@ -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;
 }

devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js

@@ -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";
 

devtools/server/actors/styles.js

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