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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Test showing/hiding columns.
*/
add_task(async function () {
const { monitor } = await initNetMonitor(HTTPS_SIMPLE_URL, {
requestCount: 1,
});
info("Starting test... ");
const { document, store, connector, windowRequire } = monitor.panelWin;
const { requestData } = connector;
const { getSortedRequests } = windowRequire(
"devtools/client/netmonitor/src/selectors/index"
);
const wait = waitForNetworkEvents(monitor, 1);
await navigateTo(HTTPS_SIMPLE_URL);
await wait;
const item = getSortedRequests(store.getState())[0];
ok(
item.responseHeadersAvailable,
"headers are available for lazily fetching"
);
if (item.responseHeadersAvailable && !item.responseHeaders) {
await requestData(item.id, "responseHeaders");
}
const requestsContainer = document.querySelector(".requests-list-row-group");
ok(requestsContainer, "Container element exists as expected.");
const headers = document.querySelector(".requests-list-headers");
let columns = store.getState().ui.columns;
for (const column in columns) {
if (columns[column]) {
await testVisibleColumnContextMenuItem(column, document, monitor);
testColumnsAlignment(headers, requestsContainer);
await testHiddenColumnContextMenuItem(column, document, monitor);
} else {
await testHiddenColumnContextMenuItem(column, document, monitor);
testColumnsAlignment(headers, requestsContainer);
await testVisibleColumnContextMenuItem(column, document, monitor);
}
}
columns = store.getState().ui.columns;
for (const column in columns) {
if (columns[column]) {
await testVisibleColumnContextMenuItem(column, document, monitor);
// Right click on the white-space for the context menu to appear
// and toggle column visibility
await testWhiteSpaceContextMenuItem(column, document, monitor);
}
}
});
async function testWhiteSpaceContextMenuItem(column, document, monitor) {
ok(
!document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be hidden`
);
info(`Right clicking on white-space in the header to get the context menu`);
EventUtils.sendMouseEvent(
{ type: "contextmenu" },
document.querySelector(".requests-list-headers")
);
// Wait for next tick to do stuff async and force repaint.
await waitForTick();
await toggleAndCheckColumnVisibility(column, document, monitor);
}
async function testVisibleColumnContextMenuItem(column, document, monitor) {
ok(
document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be visible`
);
info(`Clicking context-menu item for ${column}`);
EventUtils.sendMouseEvent(
{ type: "contextmenu" },
document.querySelector("#requests-list-status-button") ||
document.querySelector("#requests-list-waterfall-button")
);
await waitForTick();
const id = `request-list-header-${column}-toggle`;
const menuItem = getContextMenuItem(monitor, id);
is(
menuItem.getAttribute("type"),
"checkbox",
`${column} menu item should have type="checkbox" attribute`
);
is(
menuItem.getAttribute("checked"),
"true",
`checked state of ${column} menu item should be correct`
);
ok(
!menuItem.disabled,
`disabled state of ${column} menu item should be correct`
);
const onHeaderRemoved = waitForDOM(
document,
`#requests-list-${column}-button`,
0
);
await selectContextMenuItem(monitor, id);
await onHeaderRemoved;
await waitForTick();
ok(
!document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be hidden`
);
}
async function testHiddenColumnContextMenuItem(column, document, monitor) {
ok(
!document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be hidden`
);
info(`Clicking context-menu item for ${column}`);
EventUtils.sendMouseEvent(
{ type: "contextmenu" },
document.querySelector("#requests-list-status-button") ||
document.querySelector("#requests-list-waterfall-button")
);
await waitForTick();
await toggleAndCheckColumnVisibility(column, document, monitor);
}
async function toggleAndCheckColumnVisibility(column, document, monitor) {
const id = `request-list-header-${column}-toggle`;
const menuItem = getContextMenuItem(monitor, id);
is(
menuItem.getAttribute("type"),
"checkbox",
`${column} menu item should have type="checkbox" attribute`
);
ok(
!menuItem.getAttribute("checked"),
`checked state of ${column} menu item should be correct`
);
ok(
!menuItem.disabled,
`disabled state of ${column} menu item should be correct`
);
const onHeaderAdded = waitForDOM(
document,
`#requests-list-${column}-button`,
1
);
await selectContextMenuItem(monitor, id);
await onHeaderAdded;
await waitForTick();
ok(
document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be visible`
);
}
|
