Bug 1723921 - Make devtools use two colons for pseudo-elements consistently. r=jdescottes

With the patch above, some devtools tests failed because we were trying
to call getComputedStyle(node, ":marker") (read: one colon rather than
two).

Using two colons for pseudo-elements is the right thing to do and fixes
it / removes some weird special-cases.

Differential Revision: https://phabricator.services.mozilla.com/D121858

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

@@ -304,22 +304,22 @@ async function assertPseudoElementRulesNumbers(
   const rules = {
     elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement),
     firstLineRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":first-line"
+      rule => rule.pseudoElement === "::first-line"
     ),
     firstLetterRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":first-letter"
+      rule => rule.pseudoElement === "::first-letter"
     ),
     selectionRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":selection"
+      rule => rule.pseudoElement === "::selection"
     ),
     markerRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":marker"
+      rule => rule.pseudoElement === "::marker"
     ),
     beforeRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":before"
+      rule => rule.pseudoElement === "::before"
     ),
     afterRules: elementStyle.rules.filter(
-      rule => rule.pseudoElement === ":after"
+      rule => rule.pseudoElement === "::after"
     ),
   };
 
@@ -331,32 +331,32 @@ async function assertPseudoElementRulesNumbers(
   is(
     rules.firstLineRules.length,
     ruleNbs.firstLineRulesNb,
-    selector + " has the correct number of :first-line rules"
+    selector + " has the correct number of ::first-line rules"
   );
   is(
     rules.firstLetterRules.length,
     ruleNbs.firstLetterRulesNb,
-    selector + " has the correct number of :first-letter rules"
+    selector + " has the correct number of ::first-letter rules"
   );
   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"
+    selector + " has the correct number of ::marker rules"
   );
   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,
-    selector + " has the correct number of :after rules"
+    selector + " has the correct number of ::after rules"
   );
 
   return rules;

devtools/server/actors/highlighters/box-model.js

@@ -790,8 +790,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
 
     let pseudos = this._getPseudoClasses(node).join("");
     if (pseudo) {
-      // Display :after as ::after
-      pseudos += ":" + pseudo;
+      pseudos += pseudo;
     }
 
     // We want to display the original `width` and `height`, instead of the ones affected

devtools/server/actors/page-style.js

@@ -725,34 +725,34 @@ var PageStyleActor = protocol.ActorClassWithSpec(pageStyleSpec, {
   // eslint-disable-next-line complexity
   _pseudoIsRelevant(node, pseudo) {
     switch (pseudo) {
-      case ":after":
-      case ":before":
-      case ":first-letter":
-      case ":first-line":
-      case ":selection":
+      case "::after":
+      case "::before":
+      case "::first-letter":
+      case "::first-line":
+      case "::selection":
         return true;
-      case ":marker":
+      case "::marker":
         return this._nodeIsListItem(node);
-      case ":backdrop":
+      case "::backdrop":
         return node.matches(":fullscreen");
-      case ":cue":
+      case "::cue":
         return node.nodeName == "VIDEO";
-      case ":file-selector-button":
+      case "::file-selector-button":
         return node.nodeName == "INPUT" && node.type == "file";
-      case ":placeholder":
-      case ":-moz-placeholder":
+      case "::placeholder":
+      case "::-moz-placeholder":
         return this._nodeIsTextfieldLike(node);
-      case ":-moz-focus-inner":
+      case "::-moz-focus-inner":
         return this._nodeIsButtonLike(node);
-      case ":-moz-meter-bar":
+      case "::-moz-meter-bar":
         return node.nodeName == "METER";
-      case ":-moz-progress-bar":
+      case "::-moz-progress-bar":
         return node.nodeName == "PROGRESS";
-      case ":-moz-color-swatch":
+      case "::-moz-color-swatch":
         return node.nodeName == "INPUT" && node.type == "color";
-      case ":-moz-range-progress":
-      case ":-moz-range-thumb":
-      case ":-moz-range-track":
+      case "::-moz-range-progress":
+      case "::-moz-range-thumb":
+      case "::-moz-range-track":
         return node.nodeName == "INPUT" && node.type == "range";
       default:
         throw Error("Unhandled pseudo-element " + pseudo);

devtools/server/tests/chrome/test_css-logic.html

@@ -49,13 +49,13 @@ addTest(function getBindingElementAndPseudo() {
   ({ bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(firstChild));
   is(bindingElement, node,
      "Binding element is the parent for a pseudo node");
-  is(pseudo, ":before", "Pseudo is correct for a ::before node");
+  is(pseudo, "::before", "Pseudo is correct for a ::before node");
 
   const lastChild = new _documentWalker(node, window).lastChild();
   ({ bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(lastChild));
   is(bindingElement, node,
      "Binding element is the parent for a pseudo node");
-  is(pseudo, ":after", "Pseudo is correct for a ::after node");
+  is(pseudo, "::after", "Pseudo is correct for a ::after node");
 
   runNextTest();
 });

devtools/shared/css/generated/properties-db.js

@@ -10913,23 +10913,23 @@ exports.CSS_PROPERTIES = {
  * A list of the pseudo elements.
  */
 exports.PSEUDO_ELEMENTS = [
-  ":after",
-  ":before",
-  ":marker",
-  ":backdrop",
-  ":cue",
-  ":first-letter",
-  ":first-line",
-  ":selection",
-  ":-moz-focus-inner",
-  ":-moz-progress-bar",
-  ":-moz-range-track",
-  ":-moz-range-progress",
-  ":-moz-range-thumb",
-  ":-moz-meter-bar",
-  ":placeholder",
-  ":-moz-color-swatch",
-  ":file-selector-button"
+  "::after",
+  "::before",
+  "::marker",
+  "::backdrop",
+  "::cue",
+  "::first-letter",
+  "::first-line",
+  "::selection",
+  "::-moz-focus-inner",
+  "::-moz-progress-bar",
+  "::-moz-range-track",
+  "::-moz-range-progress",
+  "::-moz-range-thumb",
+  "::-moz-meter-bar",
+  "::placeholder",
+  "::-moz-color-swatch",
+  "::file-selector-button"
 ];
 
 /**

devtools/shared/inspector/css-logic.js

@@ -485,20 +485,20 @@ exports.prettifyCSS = prettifyCSS;
  *
  * @returns {Object}
  *            - {DOMNode} node The non-anonymous node
- *            - {string} pseudo One of ':marker', ':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_marker") {
     bindingElement = node.parentNode;
-    pseudo = ":marker";
+    pseudo = "::marker";
   } else if (node.nodeName == "_moz_generated_content_before") {
     bindingElement = node.parentNode;
-    pseudo = ":before";
+    pseudo = "::before";
   } else if (node.nodeName == "_moz_generated_content_after") {
     bindingElement = node.parentNode;
-    pseudo = ":after";
+    pseudo = "::after";
   }
   return {
     bindingElement: bindingElement,

layout/inspector/InspectorUtils.cpp

@@ -623,10 +623,14 @@ void InspectorUtils::GetCSSPseudoElementNames(GlobalObject& aGlobalObject,
       static_cast<size_t>(PseudoStyleType::CSSPseudoElementsEnd);
   for (size_t i = 0; i < kPseudoCount; ++i) {
     PseudoStyleType type = static_cast<PseudoStyleType>(i);
-    if (nsCSSPseudoElements::IsEnabled(type, CSSEnabledState::ForAllContent)) {
-      nsAtom* atom = nsCSSPseudoElements::GetPseudoAtom(type);
-      aResult.AppendElement(nsDependentAtomString(atom));
+    if (!nsCSSPseudoElements::IsEnabled(type, CSSEnabledState::ForAllContent)) {
+      continue;
     }
+    auto& string = *aResult.AppendElement();
+    // Use two semi-colons (though internally we use one).
+    string.Append(u':');
+    nsAtom* atom = nsCSSPseudoElements::GetPseudoAtom(type);
+    string.Append(nsDependentAtomString(atom));
   }
 }
 

layout/inspector/tests/test_getCSSPseudoElementNames.html

@@ -10,24 +10,24 @@
 
   // NOTE(emilio): When this changes, make sure to update _pseudoIsRelevant in devtools/server/actors/styles.js
   let expected = new Set([
-    ":after",
-    ":before",
-    ":marker",
-    ":backdrop",
-    ":cue",
-    ":file-selector-button",
-    ":first-letter",
-    ":first-line",
-    ":placeholder",
-    ":selection",
-    ":-moz-color-swatch",
-    ":-moz-focus-inner",
-    ":-moz-meter-bar",
-    ":-moz-placeholder",
-    ":-moz-progress-bar",
-    ":-moz-range-progress",
-    ":-moz-range-thumb",
-    ":-moz-range-track",
+    "::after",
+    "::before",
+    "::marker",
+    "::backdrop",
+    "::cue",
+    "::file-selector-button",
+    "::first-letter",
+    "::first-line",
+    "::placeholder",
+    "::selection",
+    "::-moz-color-swatch",
+    "::-moz-focus-inner",
+    "::-moz-meter-bar",
+    "::-moz-placeholder",
+    "::-moz-progress-bar",
+    "::-moz-range-progress",
+    "::-moz-range-thumb",
+    "::-moz-range-track",
   ]);
 
   let names = InspectorUtils.getCSSPseudoElementNames();