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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test selector value is correctly displayed when committing the inplace editor
// with ENTER, ESC, SHIFT+TAB and TAB
const TEST_URI = `
<style type='text/css'>
#testid1 {
text-align: center;
}
#testid2 {
text-align: center;
}
#testid3 {
}
</style>
<div id='testid1'>Styled Node</div>
<div id='testid2'>Styled Node</div>
<div id='testid3'>Styled Node</div>
`;
const TEST_DATA = [
{
node: "#testid1",
value: ".testclass",
commitKey: "VK_ESCAPE",
modifiers: {},
expected: "#testid1",
},
{
node: "#testid1",
value: ".testclass1",
commitKey: "VK_RETURN",
modifiers: {},
expected: ".testclass1",
},
{
node: "#testid2",
value: ".testclass2",
commitKey: "VK_TAB",
modifiers: {},
expected: ".testclass2",
},
{
node: "#testid3",
value: ".testclass3",
commitKey: "VK_TAB",
modifiers: { shiftKey: true },
expected: ".testclass3",
},
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
for (const data of TEST_DATA) {
await runTestData(inspector, view, data);
}
});
async function runTestData(inspector, view, data) {
const { node, value, commitKey, modifiers, expected } = data;
info(
"Updating " +
node +
" to " +
value +
" and committing with " +
commitKey +
". Expecting: " +
expected
);
info("Selecting the test element");
await selectNode(node, inspector);
let idRuleEditor = getRuleViewRuleEditor(view, 1);
info("Focusing an existing selector name in the rule-view");
const editor = await focusEditableField(view, idRuleEditor.selectorText);
is(
inplaceEditor(idRuleEditor.selectorText),
editor,
"The selector editor got focused"
);
info("Enter the new selector value: " + value);
editor.input.value = value;
info("Entering the commit key " + commitKey + " " + modifiers);
EventUtils.synthesizeKey(commitKey, modifiers);
const activeElement = view.styleDocument.activeElement;
if (commitKey === "VK_ESCAPE") {
is(
idRuleEditor.rule.selectorText,
expected,
"Value is as expected: " + expected
);
is(idRuleEditor.isEditing, false, "Selector is not being edited.");
is(idRuleEditor.selectorText, activeElement, "Focus is on selector span.");
return;
}
await once(view, "ruleview-changed");
ok(
getRuleViewRule(view, expected),
"Rule with " + expected + " selector exists."
);
if (modifiers.shiftKey) {
idRuleEditor = getRuleViewRuleEditor(view, 0);
}
if (
commitKey === "VK_RETURN" &&
!Services.prefs.getBoolPref("devtools.inspector.rule-view.focusNextOnEnter")
) {
is(idRuleEditor.isEditing, false, "Selector is not being edited.");
is(idRuleEditor.selectorText, activeElement, "Focus is on selector span.");
return;
}
const rule = idRuleEditor.rule;
if (rule.textProps.length) {
is(
inplaceEditor(rule.textProps[0].editor.nameSpan).input,
activeElement,
"Focus is on the first property name span."
);
} else {
is(
inplaceEditor(idRuleEditor.newPropSpan).input,
activeElement,
"Focus is on the new property span."
);
}
}
|
