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
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Check that the detached devtools window title is not updated when switching
* the selected frame. Also check that frames command button has 'open'
* attribute set when the list of frames is opened.
*/
var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
const URL =
URL_ROOT_SSL + "browser_toolbox_window_title_frame_select_page.html";
const IFRAME_URL =
URL_ROOT_SSL + "browser_toolbox_window_title_changes_page.html";
const L10N = new LocalizationHelper(
"devtools/client/locales/toolbox.properties"
);
/**
* Wait for a given toolbox to get its title updated.
*/
function waitForTitleChange(toolbox) {
return new Promise(resolve => {
toolbox.topWindow.addEventListener("message", function onmessage(event) {
if (event.data.name == "set-host-title") {
toolbox.topWindow.removeEventListener("message", onmessage);
resolve();
}
});
});
}
add_task(async function () {
Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
await addTab(URL);
const tab = gBrowser.selectedTab;
let toolbox = await gDevTools.showToolboxForTab(tab, {
hostType: Toolbox.HostType.BOTTOM,
});
await toolbox.switchHost(Toolbox.HostType.WINDOW);
// Wait for title change event *after* switch host, in order to listen
// for the event on the WINDOW host window, which only exists after switchHost
await waitForTitleChange(toolbox);
is(
getTitle(),
`Developer Tools — Page title — ${URL}`,
"Devtools title correct after switching to detached window host"
);
// Wait for tick to avoid unexpected 'popuphidden' event, which
// blocks the frame popup menu opened below. See also bug 1276873
await waitForTick();
const btn = toolbox.doc.getElementById("command-button-frames");
await testShortcutToOpenFrames(btn, toolbox);
// Open frame menu and wait till it's available on the screen.
// Also check 'aria-expanded' attribute on the command button.
is(
btn.getAttribute("aria-expanded"),
"false",
"The aria-expanded attribute must be set to false"
);
btn.click();
const panel = toolbox.doc.getElementById("command-button-frames-panel");
ok(panel, "popup panel has created.");
await waitUntil(() => panel.classList.contains("tooltip-visible"));
is(
btn.getAttribute("aria-expanded"),
"true",
"The aria-expanded attribute must be set to true"
);
// Verify that the frame list menu is populated
const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
const frames = Array.from(menuList.querySelectorAll(".command"));
is(frames.length, 2, "We have both frames in the list");
const topFrameBtn = frames.filter(
b => b.querySelector(".label").textContent == URL
)[0];
const iframeBtn = frames.filter(
b => b.querySelector(".label").textContent == IFRAME_URL
)[0];
ok(topFrameBtn, "Got top level document in the list");
ok(iframeBtn, "Got iframe document in the list");
// Listen to will-navigate to check if the view is empty
const { resourceCommand } = toolbox.commands;
const { onResource: willNavigate } =
await resourceCommand.waitForNextResource(
resourceCommand.TYPES.DOCUMENT_EVENT,
{
ignoreExistingResources: true,
predicate(resource) {
return resource.name == "will-navigate";
},
}
);
// Only select the iframe after we are able to select an element from the top
// level document.
const onInspectorReloaded = toolbox.getPanel("inspector").once("reloaded");
info("Select the iframe");
iframeBtn.click();
// will-navigate isn't emitted in the targetCommand-based iframe picker.
if (!isEveryFrameTargetEnabled()) {
await willNavigate;
}
await onInspectorReloaded;
// wait a bit more in case an eventual title update would happen later
await wait(1000);
info("Navigation to the iframe is done, the inspector should be back up");
is(
getTitle(),
`Developer Tools — Page title — ${URL}`,
"Devtools title was not updated after changing inspected frame"
);
info("Cleanup toolbox and test preferences.");
await toolbox.destroy();
toolbox = null;
gBrowser.removeCurrentTab();
Services.prefs.clearUserPref("devtools.toolbox.host");
Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
finish();
});
function getTitle() {
return Services.wm.getMostRecentWindow("devtools:toolbox").document.title;
}
async function testShortcutToOpenFrames(btn, toolbox) {
info("Tests if shortcut Alt+Down opens the frames");
// focus the button so that keyPress can be performed
btn.focus();
// perform keyPress - Alt+Down
const shortcut = L10N.getStr("toolbox.showFrames.key");
synthesizeKeyShortcut(shortcut, toolbox.win);
const panel = toolbox.doc.getElementById("command-button-frames-panel");
ok(panel, "popup panel has created.");
await waitUntil(() => panel.classList.contains("tooltip-visible"));
is(
btn.getAttribute("aria-expanded"),
"true",
"The aria-expanded attribute must be set to true"
);
// pressing Esc should hide the menu again
EventUtils.sendKey("ESCAPE", toolbox.win);
await waitUntil(() => !panel.classList.contains("tooltip-visible"));
is(
btn.getAttribute("aria-expanded"),
"false",
"The aria-expanded attribute must be set to false"
);
}
|
