1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* globals getTestActorWithoutToolbox */
"use strict";
// Test that locking the pseudoclass displays correctly in the ruleview
const PSEUDO = ":hover";
const TEST_URL = "data:text/html;charset=UTF-8," +
"<head>" +
" <style>div {color:red;} div:hover {color:blue;}</style>" +
"</head>" +
"<body>" +
' <div id="parent-div">' +
' <div id="div-1">test div</div>' +
' <div id="div-2">test div2</div>' +
" </div>" +
"</body>";
add_task(function* () {
info("Creating the test tab and opening the rule-view");
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
info("Selecting the ruleview sidebar");
inspector.sidebar.select("ruleview");
let view = inspector.ruleview.view;
info("Selecting the test node");
yield selectNode("#div-1", inspector);
yield togglePseudoClass(inspector);
yield assertPseudoAddedToNode(inspector, testActor, view, "#div-1");
yield togglePseudoClass(inspector);
yield assertPseudoRemovedFromNode(testActor, "#div-1");
yield assertPseudoRemovedFromView(inspector, testActor, view, "#div-1");
yield togglePseudoClass(inspector);
yield testNavigate(inspector, testActor, view);
info("Toggle pseudo on the parent and ensure everything is toggled off");
yield selectNode("#parent-div", inspector);
yield togglePseudoClass(inspector);
yield assertPseudoRemovedFromNode(testActor, "#div-1");
yield assertPseudoRemovedFromView(inspector, testActor, view, "#div-1");
yield togglePseudoClass(inspector);
info("Assert pseudo is dismissed when toggling it on a sibling node");
yield selectNode("#div-2", inspector);
yield togglePseudoClass(inspector);
yield assertPseudoAddedToNode(inspector, testActor, view, "#div-2");
let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
ok(!hasLock, "pseudo-class lock has been removed for the previous locked node");
info("Destroying the toolbox");
let tab = toolbox.target.tab;
yield toolbox.destroy();
// As the toolbox get detroyed, we need to fetch a new test-actor
testActor = yield getTestActorWithoutToolbox(tab);
yield assertPseudoRemovedFromNode(testActor, "#div-1");
yield assertPseudoRemovedFromNode(testActor, "#div-2");
});
function* togglePseudoClass(inspector) {
info("Toggle the pseudoclass, wait for it to be applied");
// Give the inspector panels a chance to update when the pseudoclass changes
let onPseudo = inspector.selection.once("pseudoclass");
let onRefresh = inspector.once("rule-view-refreshed");
// Walker uses SDK-events so calling walker.once does not return a promise.
let onMutations = once(inspector.walker, "mutations");
yield inspector.togglePseudoClass(PSEUDO);
yield onPseudo;
yield onRefresh;
yield onMutations;
}
function* testNavigate(inspector, testActor, ruleview) {
yield selectNode("#parent-div", inspector);
info("Make sure the pseudoclass is still on after navigating to a parent");
ok((yield testActor.hasPseudoClassLock("#div-1", PSEUDO)),
"pseudo-class lock is still applied after inspecting ancestor");
yield selectNode("#div-2", inspector);
info("Make sure the pseudoclass is still set after navigating to a " +
"non-hierarchy node");
ok(yield testActor.hasPseudoClassLock("#div-1", PSEUDO),
"pseudo-class lock is still on after inspecting sibling node");
yield selectNode("#div-1", inspector);
}
function* showPickerOn(selector, inspector) {
let nodeFront = yield getNodeFront(selector, inspector);
yield inspector.highlighter.showBoxModel(nodeFront);
}
function* assertPseudoAddedToNode(inspector, testActor, ruleview, selector) {
info("Make sure the pseudoclass lock is applied to " + selector + " and its ancestors");
let hasLock = yield testActor.hasPseudoClassLock(selector, PSEUDO);
ok(hasLock, "pseudo-class lock has been applied");
hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
ok(hasLock, "pseudo-class lock has been applied");
hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
ok(hasLock, "pseudo-class lock has been applied");
info("Check that the ruleview contains the pseudo-class rule");
let rules = ruleview.element.querySelectorAll(
".ruleview-rule.theme-separator");
is(rules.length, 3,
"rule view is showing 3 rules for pseudo-class locked div");
is(rules[1]._ruleEditor.rule.selectorText, "div:hover",
"rule view is showing " + PSEUDO + " rule");
info("Show the highlighter on " + selector);
yield showPickerOn(selector, inspector);
info("Check that the infobar selector contains the pseudo-class");
let value = yield testActor.getHighlighterNodeTextContent(
"box-model-infobar-pseudo-classes");
is(value, PSEUDO, "pseudo-class in infobar selector");
yield inspector.highlighter.hideBoxModel();
}
function* assertPseudoRemovedFromNode(testActor, selector) {
info("Make sure the pseudoclass lock is removed from #div-1 and its " +
"ancestors");
let hasLock = yield testActor.hasPseudoClassLock(selector, PSEUDO);
ok(!hasLock, "pseudo-class lock has been removed");
hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
ok(!hasLock, "pseudo-class lock has been removed");
hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
ok(!hasLock, "pseudo-class lock has been removed");
}
function* assertPseudoRemovedFromView(inspector, testActor, ruleview, selector) {
info("Check that the ruleview no longer contains the pseudo-class rule");
let rules = ruleview.element.querySelectorAll(
".ruleview-rule.theme-separator");
is(rules.length, 2, "rule view is showing 2 rules after removing lock");
yield showPickerOn(selector, inspector);
let value = yield testActor.getHighlighterNodeTextContent(
"box-model-infobar-pseudo-classes");
is(value, "", "pseudo-class removed from infobar selector");
yield inspector.highlighter.hideBoxModel();
}
|
