Bug 1455573 - Part 4: Add test for reordering with an extensions. r=jdescottes,rpl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 27 Apr 2018 06:29:05 +0900
changeset 472046 c7604ce41bc5861a5848fb3e04c645fb1d8556c7
parent 472045 a266c1d71a1642e80e3883990373b9c1c8178780
child 472047 e0e2924527569253b22bccfb4a4e328a34366cb5
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, rpl
bugs1455573
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1455573 - Part 4: Add test for reordering with an extensions. r=jdescottes,rpl MozReview-Commit-ID: GUX2otL3hSd
devtools/client/framework/test/browser.ini
devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
devtools/client/framework/test/head.js
--- a/devtools/client/framework/test/browser.ini
+++ b/devtools/client/framework/test/browser.ini
@@ -113,16 +113,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;
+}