Commit 1840840b authored by Emilio Cobos Álvarez's avatar Emilio Cobos Álvarez
Browse files

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
parent 2d0a0721

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

+12 −12
Original line number Diff line number Diff line
@@ -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

+1 −2
Original line number Diff line number Diff line
@@ -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

+18 −18
Original line number Diff line number Diff line
@@ -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

+2 −2
Original line number Diff line number Diff line
@@ -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

+17 −17
Original line number Diff line number Diff line
@@ -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"

];



/**