The Tor Browser: browser/devtools/inspector/test/browser_inspector_pseudoclass

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

     1 /* Any copyright is dedicated to the Public Domain.

     2    http://creativecommons.org/publicdomain/zero/1.0/ */

     4 // Test that locking the pseudoclass displays correctly in the ruleview

     6 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);

     7 const PSEUDO = ":hover";

     8 const TEST_URL = 'data:text/html,' +

     9                  '<head>' +

    10                  '  <style>div {color:red;} div:hover {color:blue;}</style>' +

    11                  '</head>' +

    12                  '<body>' +

    13                  '  <div id="parent-div">' +

    14                  '    <div id="div-1">test div</div>' +

    15                  '    <div id="div-2">test div2</div>' +

    16                  '  </div>' +

    17                  '</body>';

    19 waitForExplicitFinish();

    21 function test() {

    22   ignoreAllUncaughtExceptions();

    23   gBrowser.selectedTab = gBrowser.addTab();

    24   gBrowser.selectedBrowser.addEventListener("load", function() {

    25     gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);

    26     waitForFocus(startTests, content);

    27   }, true);

    29   content.location = TEST_URL;

    30 }

    32 let startTests = Task.async(function*() {

    33   let {toolbox, inspector, view} = yield openRuleView();

    34   yield selectNode("#div-1", inspector);

    36   yield performTests(inspector, view);

    38   yield finishUp(toolbox);

    39   finish();

    40 });

    42 function* performTests(inspector, ruleview) {

    43   yield togglePseudoClass(inspector);

    44   yield testAdded(inspector, ruleview);

    46   yield togglePseudoClass(inspector);

    47   yield testRemoved();

    48   yield testRemovedFromUI(inspector, ruleview);

    50   yield togglePseudoClass(inspector);

    51   yield testNavigate(inspector, ruleview);

    52 }

    54 function* togglePseudoClass(inspector) {

    55   info("Toggle the pseudoclass, wait for the pseudoclass event and wait for the refresh of the rule view");

    57   let onPseudo = inspector.selection.once("pseudoclass");

    58   let onRefresh = inspector.once("rule-view-refreshed");

    59   inspector.togglePseudoClass(PSEUDO);

    61   yield onPseudo;

    62   yield onRefresh;

    63 }

    65 function* testNavigate(inspector, ruleview) {

    66   yield selectNode("#parent-div", inspector);

    68   info("Make sure the pseudoclass is still on after navigating to a parent");

    69   is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), true,

    70     "pseudo-class lock is still applied after inspecting ancestor");

    72   let onPseudo = inspector.selection.once("pseudoclass");

    73   yield selectNode("#div-2", inspector);

    74   yield onPseudo;

    76   info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node");

    77   is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), false,

    78     "pseudo-class lock is removed after inspecting sibling node");

    80   yield selectNode("#div-1", inspector);

    81   yield togglePseudoClass(inspector);

    82   yield inspector.once("computed-view-refreshed");

    83 }

    85 function showPickerOn(node, inspector) {

    86   let highlighter = inspector.toolbox.highlighter;

    87   return highlighter.showBoxModel(getNodeFront(node));

    88 }

    90 function* testAdded(inspector, ruleview) {

    91   info("Make sure the pseudoclass lock is applied to #div-1 and its ancestors");

    92   let node = getNode("#div-1");

    93   do {

    94     is(DOMUtils.hasPseudoClassLock(node, PSEUDO), true,

    95       "pseudo-class lock has been applied");

    96     node = node.parentNode;

    97   } while (node.parentNode)

    99   info("Check that the ruleview contains the pseudo-class rule");

   100   let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");

   101   is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div");

   102   is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + PSEUDO + " rule");

   104   info("Show the highlighter on #div-1");

   105   yield showPickerOn(getNode("#div-1"), inspector);

   107   info("Check that the infobar selector contains the pseudo-class");

   108   let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");

   109   is(pseudoClassesBox.textContent, PSEUDO, "pseudo-class in infobar selector");

   110   yield inspector.toolbox.highlighter.hideBoxModel();

   111 }

   113 function* testRemoved() {

   114   info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors");

   115   let node = getNode("#div-1");

   116   do {

   117     is(DOMUtils.hasPseudoClassLock(node, PSEUDO), false,

   118        "pseudo-class lock has been removed");

   119     node = node.parentNode;

   120   } while (node.parentNode)

   121 }

   123 function* testRemovedFromUI(inspector, ruleview) {

   124   info("Check that the ruleview no longer contains the pseudo-class rule");

   125   let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");

   126   is(rules.length, 2, "rule view is showing 2 rules after removing lock");

   128   yield showPickerOn(getNode("#div-1"), inspector);

   130   let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");

   131   is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");

   132   yield inspector.toolbox.highlighter.hideBoxModel();

   133 }

   135 function* finishUp(toolbox) {

   136   let onDestroy = gDevTools.once("toolbox-destroyed");

   137   toolbox.destroy();

   138   yield onDestroy;

   140   yield testRemoved(getNode("#div-1"));

   141   gBrowser.removeCurrentTab();

   142 }

The Tor Browser / file revision