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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing adding new properties via the inplace-editors in the rule
// view.
// FIXME: some of the inplace-editor focus/blur/commit/revert stuff
// should be factored out in head.js
const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
const TEST_URI = `
<style type="text/css">
#testid {
color: red;
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
var BACKGROUND_IMAGE_URL = 'url("' + URL_ROOT + 'doc_test_image.png")';
var TEST_DATA = [
{ name: "border-color", value: "red", isValid: true },
{ name: "background-image", value: BACKGROUND_IMAGE_URL, isValid: true },
{ name: "border", value: "solid 1px foo", isValid: false },
];
const DATA = [
{
timestamp: null,
category: "devtools.main",
method: "edit_rule",
object: "ruleview",
},
{
timestamp: null,
category: "devtools.main",
method: "edit_rule",
object: "ruleview",
},
{
timestamp: null,
category: "devtools.main",
method: "edit_rule",
object: "ruleview",
},
{
timestamp: null,
category: "devtools.main",
method: "edit_rule",
object: "ruleview",
},
{
timestamp: null,
category: "devtools.main",
method: "edit_rule",
object: "ruleview",
},
];
add_task(async function () {
// Let's reset the counts.
Services.telemetry.clearEvents();
// Ensure no events have been logged
const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
ok(!snapshot.parent, "No events have been logged for the main process");
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
const rule = getRuleViewRuleEditor(view, 1).rule;
for (const { name, value, isValid } of TEST_DATA) {
await testEditProperty(view, rule, name, value, isValid);
}
checkResults();
});
async function testEditProperty(view, rule, name, value, isValid) {
info("Test editing existing property name/value fields");
const doc = rule.editor.doc;
const prop = rule.textProps[0];
info("Focusing an existing property name in the rule-view");
let editor = await focusEditableField(view, prop.editor.nameSpan, 32, 1);
is(
inplaceEditor(prop.editor.nameSpan),
editor,
"The property name editor got focused"
);
let input = editor.input;
info(
"Entering a new property name, including : to commit and " +
"focus the value"
);
const onValueFocus = once(rule.editor.element, "focus", true);
const onNameDone = view.once("ruleview-changed");
EventUtils.sendString(name + ":", doc.defaultView);
await onValueFocus;
await onNameDone;
// Getting the value editor after focus
editor = inplaceEditor(doc.activeElement);
input = editor.input;
is(inplaceEditor(prop.editor.valueSpan), editor, "Focus moved to the value.");
info("Entering a new value, including ; to commit and blur the value");
const onValueDone = view.once("ruleview-changed");
const onBlur = once(input, "blur");
EventUtils.sendString(value + ";", doc.defaultView);
await onBlur;
await onValueDone;
is(
prop.editor.isValid(),
isValid,
value + " is " + isValid ? "valid" : "invalid"
);
info("Checking that the style property was changed on the content page");
const propValue = await getRulePropertyValue(0, 0, name);
if (isValid) {
is(propValue, value, name + " should have been set.");
} else {
isnot(propValue, value, name + " shouldn't have been set.");
}
}
function checkResults() {
const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
const events = snapshot.parent.filter(
event =>
event[1] === "devtools.main" &&
event[2] === "edit_rule" &&
event[3] === "ruleview"
);
for (const i in DATA) {
const [timestamp, category, method, object] = events[i];
const expected = DATA[i];
// ignore timestamp
ok(timestamp > 0, "timestamp is greater than 0");
is(category, expected.category, "category is correct");
is(method, expected.method, "method is correct");
is(object, expected.object, "object is correct");
}
}
|
