Bug 1354071 - test that using subviews in the overflow panel works, and that non-subview panels also work, r=mikedeboer

MozReview-Commit-ID: 4mzMQ2BBYLs

--HG--
extra : rebase_source : c4c236e74e8fd24745371937c9ca0c4ef5471bd0

browser/components/customizableui/test/browser.ini

@@ -149,6 +149,7 @@ skip-if = os == "mac"
 [browser_bootstrapped_custom_toolbar.js]
 [browser_customizemode_contextmenu_menubuttonstate.js]
 [browser_exit_background_customize_mode.js]
+[browser_overflow_use_subviews.js]
 [browser_panel_toggle.js]
 [browser_panelUINotifications.js]
 [browser_switch_to_customize_mode.js]

browser/components/customizableui/test/browser_overflow_use_subviews.js

@@ -0,0 +1,69 @@
+"use strict";
+
+const kOverflowPanel = document.getElementById("widget-overflow");
+
+var gOriginalWidth;
+registerCleanupFunction(function*() {
+  kOverflowPanel.removeAttribute("animate");
+  window.resizeTo(gOriginalWidth, window.outerHeight);
+  CustomizableUI.reset();
+});
+
+/**
+ * This checks that subview-compatible items show up as subviews rather than
+ * re-anchored panels. If we ever remove the character encoding widget, please
+ * replace this test with another subview - don't remove it.
+ */
+add_task(async function check_character_encoding_subview_in_overflow() {
+  kOverflowPanel.setAttribute("animate", "false");
+  gOriginalWidth = window.outerWidth;
+
+  CustomizableUI.addWidgetToArea("developer-button", CustomizableUI.AREA_NAVBAR);
+
+  let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
+  ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");
+  window.resizeTo(400, window.outerHeight);
+
+  await waitForCondition(() => navbar.hasAttribute("overflowing"));
+
+  let chevron = document.getElementById("nav-bar-overflow-button");
+  let shownPanelPromise = promisePanelElementShown(window, kOverflowPanel);
+  chevron.click();
+  await shownPanelPromise;
+
+  let developerView = document.getElementById("PanelUI-developer");
+  let button = document.getElementById("developer-button");
+  let subviewShownPromise = subviewShown(developerView);
+  button.click();
+  await subviewShownPromise;
+  is(developerView.closest("panel"), kOverflowPanel, "Should be inside the panel");
+  kOverflowPanel.hidePopup();
+  await Promise.resolve(); // wait for popup to hide fully.
+
+  CustomizableUI.reset();
+});
+
+/**
+ * This checks that non-subview-compatible items still work correctly.
+ * Ideally we should make the downloads panel and bookmarks/library item
+ * proper subview items, then this test can go away, and potentially we can
+ * simplify some of the subview anchoring code.
+ */
+add_task(async function check_downloads_panel_in_overflow() {
+  let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
+  ok(navbar.hasAttribute("overflowing"), "Should still be overflowing");
+  let chevron = document.getElementById("nav-bar-overflow-button");
+  let shownPanelPromise = promisePanelElementShown(window, kOverflowPanel);
+  chevron.click();
+  await shownPanelPromise;
+
+  let button = document.getElementById("downloads-button");
+  button.click();
+  await waitForCondition(() => {
+    let panel = document.getElementById("downloadsPanel");
+    return panel && panel.state != "closed";
+  });
+  let downloadsPanel = document.getElementById("downloadsPanel");
+  isnot(downloadsPanel.state, "closed", "Should be attempting to show the downloads panel.");
+  downloadsPanel.hidePopup();
+});