Bug 1455462 - Part 5. Add toolbox's menu position test. r=jdescottes
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Fri, 11 May 2018 09:31:58 +0900
changeset 794442 24cc4156d7c432942ec6be0ecccb4d364242a58d
parent 794441 d130f6c97791e260b5e64b904e950b4e2b3c2c01
child 794443 17454360b8c5106a16f183f69b35024eca5c1cee
push id109697
push userbmo:sledru@mozilla.com
push dateSat, 12 May 2018 10:04:34 +0000
reviewersjdescottes
bugs1455462
milestone62.0a1
Bug 1455462 - Part 5. Add toolbox's menu position test. r=jdescottes This test will check that popup menu of toolbox will be displayed under the menu button. This test tolerates an error since some platform (like macOS) will add the offset value. (i.e. eIntID_ContextMenuOffsetHorizontal and eIntID_ContextMenuOffsetVertical) MozReview-Commit-ID: 5TaM5JiNhdk
devtools/client/framework/test/browser.ini
devtools/client/framework/test/browser_toolbox_zoom.js
devtools/client/framework/test/browser_toolbox_zoom_popup.js
--- a/devtools/client/framework/test/browser.ini
+++ b/devtools/client/framework/test/browser.ini
@@ -130,14 +130,15 @@ skip-if = e10s # Bug 1069044 - destroyIn
 [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
 [browser_toolbox_window_title_changes.js]
 [browser_toolbox_window_title_frame_select.js]
 [browser_toolbox_zoom.js]
+[browser_toolbox_zoom_popup.js]
 [browser_two_tabs.js]
 # We want these tests to run for mochitest-dt as well, so we include them here:
 [../../../../browser/base/content/test/static/browser_parsable_css.js]
 skip-if = debug || asan || (os == 'linux' && bits == 32) # no point in running on both opt and debug, and will likely intermittently timeout on debug
 [../../../../browser/base/content/test/static/browser_all_files_referenced.js]
 skip-if = debug || asan || bits == 32 # no point in running on both opt and debug, and will likely intermittently timeout on debug
--- a/devtools/client/framework/test/browser_toolbox_zoom.js
+++ b/devtools/client/framework/test/browser_toolbox_zoom.js
@@ -3,16 +3,22 @@
 
 "use strict";
 
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const {Toolbox} = require("devtools/client/framework/toolbox");
 const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
 
 add_task(async function() {
+  registerCleanupFunction(function() {
+    Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  });
+
+  // This test assume that zoom value will be default value. i.e. x1.0.
+  Services.prefs.setCharPref("devtools.toolbox.zoomValue", "1.0");
   await addTab("about:blank");
   let target = TargetFactory.forTab(gBrowser.selectedTab);
   let toolbox = await gDevTools.showToolbox(target,
                                             "styleeditor",
                                             Toolbox.HostType.BOTTOM);
 
   info("testing zoom keys");
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_zoom_popup.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the popup menu position when zooming in the devtools panel.
+
+const {Toolbox} = require("devtools/client/framework/toolbox");
+
+// Use simple URL in order to prevent displacing the left positon of frames menu.
+const TEST_URL = "data:text/html;charset=utf-8,<iframe/>";
+
+add_task(async function() {
+  registerCleanupFunction(async function() {
+    Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  });
+  const zoom = 1.5;
+  Services.prefs.setCharPref("devtools.toolbox.zoomValue", zoom.toString(10));
+
+  info("Load iframe page for checking the frame menu with x1.5 zoom.");
+  await addTab(TEST_URL);
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = await gDevTools.showToolbox(target,
+                                            "inspector",
+                                            Toolbox.HostType.WINDOW);
+  let hostWindow = toolbox.win.parent;
+  let originWidth = hostWindow.outerWidth;
+  let originHeight = hostWindow.outerHeight;
+  let windowUtils = toolbox.win.QueryInterface(Ci.nsIInterfaceRequestor)
+      .getInterface(Ci.nsIDOMWindowUtils);
+
+  info("Waiting for the toolbox window will to be rendered with zoom x1.5");
+  await waitUntil(() => {
+    return parseFloat(windowUtils.fullZoom.toFixed(1)) === parseFloat(zoom);
+  });
+
+  info("Resizing and moving the toolbox window in order to display the chevron menu.");
+  // If window is displayed bottom of screen, menu might be displayed above of button.
+  hostWindow.moveTo(0, 0);
+
+  // This size will display inspector's tabs menu button and chevron menu button of toolbox.
+  hostWindow.resizeTo(400, hostWindow.outerHeight);
+  await waitUntil(() => {
+    return hostWindow.screen.top === 0 &&
+      hostWindow.screen.left === 0 &&
+      hostWindow.outerWidth === 400 &&
+      toolbox.doc.getElementById("tools-chevron-menu-button");
+  });
+
+  let menuList = ["toolbox-meatball-menu-button",
+                  "command-button-frames",
+                  "tools-chevron-menu-button"];
+
+  for (const menu of menuList) {
+    let [btnRect, menuRect] = await getButtonAndMenuRects(toolbox, menu);
+
+    // Allow rounded error and platform offset value.
+    // horizontal : eIntID_ContextMenuOffsetHorizontal of GTK and Windows uses 2.
+    // vertical: eIntID_ContextMenuOffsetVertical of macOS uses -6.
+    let xDelta = Math.abs(menuRect.left - btnRect.left);
+    let yDelta = Math.abs(menuRect.top - btnRect.bottom);
+    ok(xDelta < 2, "xDelta is lower than 2: " + xDelta + ". #" + menu);
+    ok(yDelta < 6, "yDelta is lower than 6: " + yDelta + ". #" + menu);
+  }
+
+  let onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originWidth, originHeight);
+  await onResize;
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+/**
+ * Getting the rectangle of the menu button and popup menu.
+ *  - The menu button rectangle will be calculated from specified button id.
+ *  - The popup menu rectangle will be calculated from displayed popup menu
+ *    which clicking the button of specified button id.
+ */
+async function getButtonAndMenuRects(toolbox, btnId) {
+  let doc = toolbox.doc;
+  let menuButton = doc.getElementById(btnId);
+  menuButton.click();
+
+  let popupset = doc.querySelector("popupset");
+  let menuPopup;
+  await waitUntil(() => {
+    menuPopup = popupset.querySelector("menupopup[menu-api=\"true\"]");
+    return !!menuPopup && menuPopup.state === "open";
+  });
+  ok(menuPopup, "Menu popup is displayed.");
+
+  let btnRect = menuButton.getBoxQuads({relativeTo: toolbox.doc})[0].bounds;
+  let menuRect = menuPopup.getBoxQuads({relativeTo: toolbox.doc})[0].bounds;
+
+  let onPopupHidden = once(menuPopup, "popuphidden");
+  menuPopup.hidePopup();
+  await onPopupHidden;
+
+  return [btnRect, menuRect];
+}