--- a/devtools/client/framework/test/browser.ini
+++ b/devtools/client/framework/test/browser.ini
@@ -110,16 +110,17 @@ skip-if = e10s # Bug 1069044 - destroyIn
[browser_toolbox_theme.js]
[browser_toolbox_theme_registration.js]
[browser_toolbox_toggle.js]
[browser_toolbox_tool_ready.js]
[browser_toolbox_tool_remote_reopen.js]
[browser_toolbox_toolbar_overflow.js]
[browser_toolbox_toolbar_reorder_by_dnd.js]
[browser_toolbox_toolbar_reorder_by_width.js]
+[browser_toolbox_toolbar_reorder_with_extension.js]
[browser_toolbox_tools_per_toolbox_registration.js]
[browser_toolbox_view_source_01.js]
[browser_toolbox_view_source_02.js]
[browser_toolbox_view_source_03.js]
[browser_toolbox_view_source_04.js]
[browser_toolbox_window_reload_target.js]
[browser_toolbox_window_shortcuts.js]
skip-if = os == "mac" && os_version == "10.8" || os == "win" && os_version == "5.1" # Bug 851129 - Re-enable browser_toolbox_window_shortcuts.js test after leaks are fixed
--- a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
@@ -25,158 +25,82 @@
const { Toolbox } = require("devtools/client/framework/toolbox");
const TEST_STARTING_ORDER = ["inspector", "webconsole", "jsdebugger", "styleeditor",
"performance", "memory", "netmonitor", "storage"];
const TEST_DATA = [
{
description: "DragAndDrop the target component to back",
- dragTarget: "toolbox-tab-webconsole",
- dropTarget: "toolbox-tab-jsdebugger",
+ dragTarget: "webconsole",
+ dropTarget: "jsdebugger",
expectedOrder: ["inspector", "jsdebugger", "webconsole", "styleeditor",
"performance", "memory", "netmonitor", "storage"],
},
{
description: "DragAndDrop the target component to front",
- dragTarget: "toolbox-tab-webconsole",
- dropTarget: "toolbox-tab-inspector",
+ dragTarget: "webconsole",
+ dropTarget: "inspector",
expectedOrder: ["webconsole", "inspector", "jsdebugger", "styleeditor",
"performance", "memory", "netmonitor", "storage"],
},
{
description: "DragAndDrop the target component over the starting of the tab",
- dragTarget: "toolbox-tab-netmonitor",
- passedTargets: ["toolbox-tab-memory", "toolbox-tab-performance",
- "toolbox-tab-styleeditor", "toolbox-tab-jsdebugger",
- "toolbox-tab-webconsole", "toolbox-tab-inspector"],
- dropTarget: "toolbox-buttons-start",
+ dragTarget: "netmonitor",
+ passedTargets: ["memory", "performance", "styleeditor",
+ "jsdebugger", "webconsole", "inspector"],
+ dropTarget: "#toolbox-buttons-start",
expectedOrder: ["netmonitor", "inspector", "webconsole", "jsdebugger",
"styleeditor", "performance", "memory", "storage"],
},
{
description: "DragAndDrop the target component over the ending of the tab",
- dragTarget: "toolbox-tab-webconsole",
- passedTargets: ["toolbox-tab-jsdebugger", "toolbox-tab-styleeditor",
- "toolbox-tab-performance", "toolbox-tab-memory",
- "toolbox-tab-netmonitor", "toolbox-tab-storage"],
- dropTarget: "toolbox-buttons-end",
+ dragTarget: "webconsole",
+ passedTargets: ["jsdebugger", "styleeditor", "performance",
+ "memory", "netmonitor", "storage"],
+ dropTarget: "#toolbox-buttons-end",
expectedOrder: ["inspector", "jsdebugger", "styleeditor", "performance",
"memory", "netmonitor", "storage", "webconsole", ],
},
{
description: "Mouse was out from the document while dragging",
- dragTarget: "toolbox-tab-webconsole",
- passedTargets: ["toolbox-tab-inspector"],
+ dragTarget: "webconsole",
+ passedTargets: ["inspector"],
dropTarget: null,
expectedOrder: ["webconsole", "inspector", "jsdebugger", "styleeditor",
"performance", "memory", "netmonitor", "storage"],
},
];
add_task(async function() {
- const originalPreference = Services.prefs.getCharPref("devtools.toolbox.tabsOrder");
const tab = await addTab("about:blank");
const toolbox = await openToolboxForTab(tab, "inspector", Toolbox.HostType.BOTTOM);
+ const originalPreference = Services.prefs.getCharPref("devtools.toolbox.tabsOrder");
+ const win = getWindow(toolbox);
+ const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } = win;
+ registerCleanupFunction(() => {
+ Services.prefs.setCharPref("devtools.toolbox.tabsOrder", originalPreference);
+ win.resizeTo(originalWindowWidth, originalWindowHeight);
+ });
+
for (const testData of TEST_DATA) {
info(`Test for '${ testData.description }'`);
- prepareTest(toolbox);
- await dnd(toolbox, testData.dragTarget, testData.dropTarget, testData.passedTargets);
- assertTabsOrder(toolbox, testData.expectedOrder);
- assertSelectedTab(toolbox, testData.dragTarget);
- assertPreferenceOrder(testData.expectedOrder);
+ prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+ await dndToolTab(toolbox, testData.dragTarget,
+ testData.dropTarget, testData.passedTargets);
+ assertToolTabOrder(toolbox, testData.expectedOrder);
+ assertToolTabSelected(toolbox, testData.dragTarget);
+ assertToolTabPreferenceOrder(testData.expectedOrder);
}
info("Test with overflowing tabs");
- prepareTest(toolbox);
- const { originalWidth, originalHeight } = await resizeWindow(toolbox, 800);
+ prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+ await resizeWindow(toolbox, 800);
await toolbox.selectTool("storage");
- const dragTarget = "toolbox-tab-storage";
- const dropTarget = "toolbox-tab-inspector";
+ const dragTarget = "storage";
+ const dropTarget = "inspector";
const expectedOrder = ["storage", "inspector", "webconsole", "jsdebugger",
"styleeditor", "performance", "memory", "netmonitor"];
- await dnd(toolbox, dragTarget, dropTarget);
- assertSelectedTab(toolbox, dragTarget);
- assertPreferenceOrder(expectedOrder);
-
- await resizeWindow(toolbox, originalWidth, originalHeight);
- Services.prefs.setCharPref("devtools.toolbox.tabsOrder", originalPreference);
+ await dndToolTab(toolbox, dragTarget, dropTarget);
+ assertToolTabSelected(toolbox, dragTarget);
+ assertToolTabPreferenceOrder(expectedOrder);
});
-
-function prepareTest(toolbox) {
- Services.prefs.setCharPref("devtools.toolbox.tabsOrder", TEST_STARTING_ORDER.join(","));
- ok(!toolbox.doc.getElementById("tools-chevron-menu-button"),
- "The size of the screen being too small");
-
- const ids = [...toolbox.doc.querySelectorAll(".devtools-tab")]
- .map(tabElement => tabElement.dataset.id);
- is(ids.join(","), TEST_STARTING_ORDER.join(","),
- "The order on the toolbar should be correct");
-}
-
-function assertTabsOrder(toolbox, expectedOrder) {
- info("Check the order of the tabs on the toolbar");
- const currentIds = [...toolbox.doc.querySelectorAll(".devtools-tab")]
- .map(tabElement => tabElement.dataset.id);
- is(currentIds.join(","), expectedOrder.join(","),
- "The order on the toolbar should be correct");
-}
-
-function assertSelectedTab(toolbox, dragTarget) {
- info("Check whether the drag target was selected");
- const dragTargetEl = toolbox.doc.getElementById(dragTarget);
- ok(dragTargetEl.classList.contains("selected"), "The dragged tool should be selected");
-}
-
-function assertPreferenceOrder(expectedOrder) {
- info("Check the order in DevTools preference for tabs order");
- is(Services.prefs.getCharPref("devtools.toolbox.tabsOrder"), expectedOrder.join(","),
- "The preference should be correct");
-}
-
-async function dnd(toolbox, dragTarget, dropTarget, passedTargets = []) {
- info(`Drag ${ dragTarget } to ${ dropTarget }`);
- const dragTargetEl = toolbox.doc.getElementById(dragTarget);
-
- const onReady = dragTargetEl.classList.contains("selected")
- ? Promise.resolve() : toolbox.once("select");
- EventUtils.synthesizeMouseAtCenter(dragTargetEl,
- { type: "mousedown" },
- dragTargetEl.ownerGlobal);
- await onReady;
-
- for (const passedTarget of passedTargets) {
- info(`Via ${ passedTarget }`);
- const passedTargetEl = toolbox.doc.getElementById(passedTarget);
- EventUtils.synthesizeMouseAtCenter(passedTargetEl,
- { type: "mousemove" },
- passedTargetEl.ownerGlobal);
- }
-
- if (dropTarget) {
- const dropTargetEl = toolbox.doc.getElementById(dropTarget);
- EventUtils.synthesizeMouseAtCenter(dropTargetEl,
- { type: "mousemove" },
- dropTargetEl.ownerGlobal);
- EventUtils.synthesizeMouseAtCenter(dropTargetEl,
- { type: "mouseup" },
- dropTargetEl.ownerGlobal);
- } else {
- const containerEl = toolbox.doc.getElementById("toolbox-container");
- EventUtils.synthesizeMouse(containerEl, 0, 0,
- { type: "mouseout" }, containerEl.ownerGlobal);
- }
-}
-
-async function resizeWindow(toolbox, width, height) {
- const hostWindow = toolbox.win.parent;
- const originalWidth = hostWindow.outerWidth;
- const originalHeight = hostWindow.outerHeight;
- const toWidth = width || originalWidth;
- const toHeight = height || originalHeight;
-
- const onResize = once(hostWindow, "resize");
- hostWindow.resizeTo(toWidth, toHeight);
- await onResize;
-
- return { originalWidth, originalHeight };
-}
--- a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
@@ -17,40 +17,47 @@
let { Toolbox } = require("devtools/client/framework/toolbox");
add_task(async function() {
let tab = await addTab("about:blank");
info("Open devtools on the Storage in a sidebar.");
let toolbox = await openToolboxForTab(tab, "storage", Toolbox.HostType.BOTTOM);
+ const win = getWindow(toolbox);
+ const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } = win;
+ registerCleanupFunction(() => {
+ win.resizeTo(originalWindowWidth, originalWindowHeight);
+ });
+
info("Waiting for the window to be resized");
- let {originalWidth, originalHeight} = await resizeWindow(toolbox, 800);
+ await resizeWindow(toolbox, 800);
info("Wait until the tools menu button is available");
await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));
let toolsMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
ok(toolsMenuButton, "The tools menu button is displayed");
info("Confirm that selected tab is not hidden.");
let storageButton = toolbox.doc.querySelector("#toolbox-tab-storage");
ok(storageButton, "The storage tab is on toolbox.");
- await resizeWindow(toolbox, originalWidth, originalHeight);
+ // Reset window size for 2nd test.
+ await resizeWindow(toolbox, originalWindowWidth);
});
add_task(async function() {
let tab = await addTab("about:blank");
info("Open devtools on the Storage in a sidebar.");
let toolbox = await openToolboxForTab(tab, "storage", Toolbox.HostType.BOTTOM);
info("Resize devtools window to a width that should trigger an overflow");
- let {originalWidth, originalHeight} = await resizeWindow(toolbox, 800);
+ await resizeWindow(toolbox, 800);
info("Regist a new tab");
let onRegistered = toolbox.once("tool-registered");
gDevTools.registerTool({
id: "test-tools",
label: "Test Tools",
isMenu: true,
isTargetSupported: () => true,
@@ -81,26 +88,9 @@ add_task(async function() {
info("An unregistered new tool tab should not be in the tools menu.");
testToolsButton = toolbox.doc.querySelector("#tools-chevron-menupopup-test-tools");
ok(!testToolsButton, "The tools menu doesn't have a unregistered new tool button.");
info("Closing the tools-chevron-menupopup popup");
onPopupHidden = once(popup, "popuphidden");
popup.hidePopup();
await onPopupHidden;
-
- await resizeWindow(toolbox, originalWidth, originalHeight);
});
-
-async function resizeWindow(toolbox, width, height) {
- let hostWindow = toolbox.win.parent;
- let originalWidth = hostWindow.outerWidth;
- let originalHeight = hostWindow.outerHeight;
- let toWidth = width || originalWidth;
- let toHeight = height || originalHeight;
-
- info("Resize devtools window to a width that should trigger an overflow");
- let onResize = once(hostWindow, "resize");
- hostWindow.resizeTo(toWidth, toHeight);
- await onResize;
-
- return {hostWindow, originalWidth, originalHeight};
-}
new file mode 100644
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
@@ -0,0 +1,88 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for reordering with an extension installed.
+
+const { Toolbox } = require("devtools/client/framework/toolbox");
+
+const EXTENSION = "@reorder.test";
+
+const TEST_STARTING_ORDER = ["inspector", "webconsole", "jsdebugger", "styleeditor",
+ "performance", "memory", "netmonitor", "storage", EXTENSION];
+
+add_task(async function() {
+ const extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ devtools_page: "extension.html",
+ applications: {
+ gecko: { id: EXTENSION },
+ },
+ },
+ files: {
+ "extension.html": `<!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <script src="extension.js"></script>
+ </body>
+ </html>`,
+ "extension.js": async () => {
+ // eslint-disable-next-line
+ await browser.devtools.panels.create("extension", "fake-icon.png", "empty.html");
+ // eslint-disable-next-line
+ browser.test.sendMessage("devtools-page-ready");
+ },
+ "empty.html": "",
+ },
+ });
+
+ await extension.startup();
+
+ const tab = await addTab("about:blank");
+ const toolbox = await openToolboxForTab(tab, "webconsole", Toolbox.HostType.BOTTOM);
+ await extension.awaitMessage("devtools-page-ready");
+
+ const originalPreference = Services.prefs.getCharPref("devtools.toolbox.tabsOrder");
+ const win = getWindow(toolbox);
+ const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } = win;
+ registerCleanupFunction(() => {
+ Services.prefs.setCharPref("devtools.toolbox.tabsOrder", originalPreference);
+ win.resizeTo(originalWindowWidth, originalWindowHeight);
+ });
+
+ info("Test for DragAndDrop the extension tab");
+ let dragTarget = EXTENSION;
+ let dropTarget = "webconsole";
+ let expectedOrder = ["inspector", EXTENSION, "webconsole", "jsdebugger", "styleeditor",
+ "performance", "memory", "netmonitor", "storage"];
+ prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+ await dndToolTab(toolbox, dragTarget, dropTarget);
+ assertToolTabOrder(toolbox, expectedOrder);
+ assertToolTabSelected(toolbox, dragTarget);
+ assertToolTabPreferenceOrder(expectedOrder);
+
+ info("Test the case of that the extension tab is overflowed");
+ prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+ await resizeWindow(toolbox, 800);
+ await toolbox.selectTool("storage");
+ dragTarget = "storage";
+ dropTarget = "inspector";
+ expectedOrder = ["storage", "inspector", "webconsole", "jsdebugger",
+ "styleeditor", "performance", "memory", "netmonitor", EXTENSION];
+ await dndToolTab(toolbox, dragTarget, dropTarget);
+ assertToolTabPreferenceOrder(expectedOrder);
+
+ info("Test for saving the preference updated after destroying");
+ await extension.unload();
+ const target = gDevTools.getTargetForTab(tab);
+ await gDevTools.closeToolbox(target);
+ await target.destroy();
+ assertToolTabPreferenceOrder(["storage", "inspector", "webconsole", "jsdebugger",
+ "styleeditor", "performance", "memory", "netmonitor"]);
+});
--- a/devtools/client/framework/test/head.js
+++ b/devtools/client/framework/test/head.js
@@ -255,8 +255,105 @@ async function openChevronMenu(toolbox)
let menuPopup = toolbox.doc.querySelector("#tools-chevron-menupopup");
ok(menuPopup, "tools-chevron-menupopup is available");
info("Waiting for the menu popup to be displayed");
await waitUntil(() => menuPopup && menuPopup.state === "open");
return menuPopup;
}
+
+function prepareToolTabReorderTest(toolbox, startingOrder) {
+ Services.prefs.setCharPref("devtools.toolbox.tabsOrder", startingOrder.join(","));
+ ok(!toolbox.doc.getElementById("tools-chevron-menu-button"),
+ "The size of the screen being too small");
+
+ for (const id of startingOrder) {
+ ok(getElementByToolIdOrExtensionIdOrSelector(toolbox, id),
+ `Tab element should exist for ${ id }`);
+ }
+}
+
+async function dndToolTab(toolbox, dragTarget, dropTarget, passedTargets = []) {
+ info(`Drag ${ dragTarget } to ${ dropTarget }`);
+ const dragTargetEl = getElementByToolIdOrExtensionIdOrSelector(toolbox, dragTarget);
+
+ const onReady = dragTargetEl.classList.contains("selected")
+ ? Promise.resolve() : toolbox.once("select");
+ EventUtils.synthesizeMouseAtCenter(dragTargetEl,
+ { type: "mousedown" },
+ dragTargetEl.ownerGlobal);
+ await onReady;
+
+ for (const passedTarget of passedTargets) {
+ info(`Via ${ passedTarget }`);
+ const passedTargetEl =
+ getElementByToolIdOrExtensionIdOrSelector(toolbox, passedTarget);
+ EventUtils.synthesizeMouseAtCenter(passedTargetEl,
+ { type: "mousemove" },
+ passedTargetEl.ownerGlobal);
+ }
+
+ if (dropTarget) {
+ const dropTargetEl = getElementByToolIdOrExtensionIdOrSelector(toolbox, dropTarget);
+ EventUtils.synthesizeMouseAtCenter(dropTargetEl,
+ { type: "mousemove" },
+ dropTargetEl.ownerGlobal);
+ EventUtils.synthesizeMouseAtCenter(dropTargetEl,
+ { type: "mouseup" },
+ dropTargetEl.ownerGlobal);
+ } else {
+ const containerEl = toolbox.doc.getElementById("toolbox-container");
+ EventUtils.synthesizeMouse(containerEl, 0, 0,
+ { type: "mouseout" }, containerEl.ownerGlobal);
+ }
+}
+
+function assertToolTabOrder(toolbox, expectedOrder) {
+ info("Check the order of the tabs on the toolbar");
+
+ const tabEls = toolbox.doc.querySelectorAll(".devtools-tab");
+
+ for (let i = 0; i < expectedOrder.length; i++) {
+ const isOrdered = tabEls[i].dataset.id === expectedOrder[i] ||
+ tabEls[i].dataset.extensionId === expectedOrder[i];
+ ok(isOrdered, `The tab[${ expectedOrder[i] }] should exist at [${ i }]`);
+ }
+}
+
+function assertToolTabSelected(toolbox, dragTarget) {
+ info("Check whether the drag target was selected");
+ const dragTargetEl = getElementByToolIdOrExtensionIdOrSelector(toolbox, dragTarget);
+ ok(dragTargetEl.classList.contains("selected"), "The dragged tool should be selected");
+}
+
+function assertToolTabPreferenceOrder(expectedOrder) {
+ info("Check the order in DevTools preference for tabs order");
+ is(Services.prefs.getCharPref("devtools.toolbox.tabsOrder"), expectedOrder.join(","),
+ "The preference should be correct");
+}
+
+function getElementByToolIdOrExtensionIdOrSelector(toolbox, idOrSelector) {
+ for (const tabEl of toolbox.doc.querySelectorAll(".devtools-tab")) {
+ if (tabEl.dataset.id === idOrSelector ||
+ tabEl.dataset.extensionId === idOrSelector) {
+ return tabEl;
+ }
+ }
+
+ return toolbox.doc.querySelector(idOrSelector);
+}
+
+function getWindow(toolbox) {
+ return toolbox.win.parent;
+}
+
+async function resizeWindow(toolbox, width, height) {
+ const hostWindow = toolbox.win.parent;
+ const originalWidth = hostWindow.outerWidth;
+ const originalHeight = hostWindow.outerHeight;
+ const toWidth = width || originalWidth;
+ const toHeight = height || originalHeight;
+
+ const onResize = once(hostWindow, "resize");
+ hostWindow.resizeTo(toWidth, toHeight);
+ await onResize;
+}