Bug 1354117 - Update various other customizableui tests for photon, r=adw
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 01 Aug 2017 15:46:58 +0100
changeset 422378 06eeb43124facd718fb95cf2a92b658902f32c4b
parent 422377 a8891e2183d071d2fb7bb7d7170a0b35420cfd6e
child 422379 ecf4c3d8440440aa853aca499524ccd8e70ec83d
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw
bugs1354117
milestone57.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 1354117 - Update various other customizableui tests for photon, r=adw There are no more help/quit buttons in the panel that shows up in customize mode, and there are no more hyphenation quirks in items in the panel, so those tests have been removed. The remaining tests are updated to test the correct panels. MozReview-Commit-ID: LiUWejjZC7c
browser/components/customizableui/test/browser.ini
browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
browser/components/customizableui/test/browser_1008559_anchor_undo_restore.js
browser/components/customizableui/test/browser_694291_searchbar_preference.js
browser/components/customizableui/test/browser_880164_customization_context_menus.js
browser/components/customizableui/test/browser_884402_customize_from_overflow.js
browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
browser/components/customizableui/test/browser_914863_disabled_help_quit_buttons.js
browser/components/customizableui/test/browser_938995_indefaultstate_nonremovable.js
browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
browser/components/customizableui/test/browser_962884_opt_in_disable_hyphens.js
browser/components/customizableui/test/browser_969661_character_encoding_navbar_disabled.js
browser/components/customizableui/test/browser_970511_undo_restore_default.js
browser/components/customizableui/test/browser_972267_customizationchange_events.js
browser/components/customizableui/test/browser_981305_separator_insertion.js
browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
browser/components/customizableui/test/browser_984455_bookmarks_items_reparenting.js
browser/components/customizableui/test/browser_987640_charEncoding.js
browser/components/customizableui/test/browser_989751_subviewbutton_class.js
browser/components/customizableui/test/browser_customization_context_menus.js
browser/components/customizableui/test/browser_photon_customization_context_menus.js
browser/components/customizableui/test/browser_remote_tabs_button.js
--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -8,17 +8,16 @@ support-files =
 [browser_694291_searchbar_preference.js]
 [browser_873501_handle_specials.js]
 [browser_876926_customize_mode_wrapping.js]
 [browser_876944_customize_mode_create_destroy.js]
 [browser_877006_missing_view.js]
 [browser_877178_unregisterArea.js]
 [browser_877447_skip_missing_ids.js]
 [browser_878452_drag_to_panel.js]
-[browser_880164_customization_context_menus.js]
 [browser_884402_customize_from_overflow.js]
 skip-if = os == "linux"
 [browser_885052_customize_mode_observers_disabed.js]
 tags = fullscreen
 # Bug 951403 - Disabled on OSX for frequent failures
 skip-if = os == "mac"
 
 [browser_885530_showInPrivateBrowsing.js]
@@ -33,17 +32,16 @@ skip-if = os == "linux"
 
 [browser_901207_searchbar_in_panel.js]
 [browser_913972_currentset_overflow.js]
 skip-if = os == "linux"
 
 [browser_914138_widget_API_overflowable_toolbar.js]
 skip-if = os == "linux"
 
-[browser_914863_disabled_help_quit_buttons.js]
 [browser_918049_skipintoolbarset_dnd.js]
 [browser_923857_customize_mode_event_wrapping_during_reset.js]
 [browser_927717_customize_drag_empty_toolbar.js]
 
 # Bug 1163231 - Causes failures on Developer Edition on Windows 7.
 # [browser_932928_show_notice_when_palette_empty.js]
 
 [browser_934113_menubar_removable.js]
@@ -88,17 +86,16 @@ skip-if = os == "linux" # Intermittent f
 skip-if = os == "linux" # Intermittent failures
 [browser_947914_button_zoomReset.js]
 skip-if = os == "linux" # Intermittent failures
 [browser_947987_removable_default.js]
 [browser_948985_non_removable_defaultArea.js]
 [browser_952963_areaType_getter_no_area.js]
 [browser_956602_remove_special_widget.js]
 [browser_962069_drag_to_overflow_chevron.js]
-[browser_962884_opt_in_disable_hyphens.js]
 [browser_963639_customizing_attribute_non_customizable_toolbar.js]
 [browser_967000_button_charEncoding.js]
 [browser_967000_button_feeds.js]
 [browser_968565_insert_before_hidden_items.js]
 [browser_969427_recreate_destroyed_widget_after_reset.js]
 [browser_969661_character_encoding_navbar_disabled.js]
 [browser_970511_undo_restore_default.js]
 [browser_972267_customizationchange_events.js]
@@ -153,11 +150,11 @@ skip-if = os == "mac"
 [browser_panelUINotifications_fullscreen_noAutoHideToolbar.js]
 tags = fullscreen
 [browser_panelUINotifications_multiWindow.js]
 [browser_switch_to_customize_mode.js]
 [browser_synced_tabs_menu.js]
 [browser_check_tooltips_in_navbar.js]
 [browser_editcontrols_update.js]
 subsuite = clipboard
-[browser_photon_customization_context_menus.js]
+[browser_customization_context_menus.js]
 [browser_sidebar_toggle.js]
 [browser_remote_tabs_button.js]
--- a/browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
+++ b/browser/components/customizableui/test/browser_1003588_no_specials_in_panel.js
@@ -15,17 +15,17 @@ function simulateItemDragAndEnd(aToDrag,
     EventUtils.sendDragEvent({ type: "dragend", dataTransfer },
                              aToDrag.parentNode);
   } finally {
     ds.endDragSession(true);
   }
 }
 
 add_task(async function checkNoAddingToPanel() {
-  let area = gPhotonStructure ? CustomizableUI.AREA_FIXED_OVERFLOW_PANEL : CustomizableUI.AREA_PANEL;
+  let area = CustomizableUI.AREA_FIXED_OVERFLOW_PANEL;
   let previousPlacements = getAreaWidgetIds(area);
   CustomizableUI.addWidgetToArea("separator", area);
   CustomizableUI.addWidgetToArea("spring", area);
   CustomizableUI.addWidgetToArea("spacer", area);
   assertAreaPlacements(area, previousPlacements);
 
   let oldNumberOfItems = previousPlacements.length;
   if (getAreaWidgetIds(area).length != oldNumberOfItems) {
@@ -57,17 +57,17 @@ add_task(async function checkAddingToToo
   if (getAreaWidgetIds(area).length != oldNumberOfItems) {
     CustomizableUI.reset();
   }
 });
 
 
 add_task(async function checkDragging() {
   let startArea = CustomizableUI.AREA_NAVBAR;
-  let targetArea = gPhotonStructure ? CustomizableUI.AREA_FIXED_OVERFLOW_PANEL : CustomizableUI.AREA_PANEL;
+  let targetArea = CustomizableUI.AREA_FIXED_OVERFLOW_PANEL;
   let startingToolbarPlacements = getAreaWidgetIds(startArea);
   let startingTargetPlacements = getAreaWidgetIds(targetArea);
 
   CustomizableUI.addWidgetToArea("separator", startArea);
   CustomizableUI.addWidgetToArea("spring", startArea);
   CustomizableUI.addWidgetToArea("spacer", startArea);
 
   let placementsWithSpecials = getAreaWidgetIds(startArea);
@@ -76,22 +76,20 @@ add_task(async function checkDragging() 
     if (CustomizableUI.isSpecialWidget(id)) {
       elementsToMove.push(id);
     }
   }
   is(elementsToMove.length, 3, "Should have 3 elements to try and drag.");
 
   await startCustomizing();
   let existingSpecial = null;
-  if (gPhotonStructure) {
-    existingSpecial = gCustomizeMode.visiblePalette.querySelector("toolbarspring");
-    ok(existingSpecial, "Should have a flexible space in the palette by default in photon");
-  }
+  existingSpecial = gCustomizeMode.visiblePalette.querySelector("toolbarspring");
+  ok(existingSpecial, "Should have a flexible space in the palette by default in photon");
   for (let id of elementsToMove) {
-    simulateItemDragAndEnd(document.getElementById(id), PanelUI.contents);
+    simulateItemDragAndEnd(document.getElementById(id), document.getElementById(targetArea));
   }
 
   assertAreaPlacements(startArea, placementsWithSpecials);
   assertAreaPlacements(targetArea, startingTargetPlacements);
 
   for (let id of elementsToMove) {
     simulateItemDrag(document.getElementById(id), gCustomizeMode.visiblePalette);
   }
--- a/browser/components/customizableui/test/browser_1008559_anchor_undo_restore.js
+++ b/browser/components/customizableui/test/browser_1008559_anchor_undo_restore.js
@@ -2,68 +2,66 @@
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 const kAnchorAttribute = "cui-anchorid";
 
 /**
  * Check that anchor gets set correctly when moving an item from the panel to the toolbar
- * using 'undo'
+ * and into the palette.
  */
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
+  CustomizableUI.addWidgetToArea("history-panelmenu", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   await startCustomizing();
   let button = document.getElementById("history-panelmenu");
-  is(button.getAttribute(kAnchorAttribute), "PanelUI-menu-button",
+  is(button.getAttribute(kAnchorAttribute), "nav-bar-overflow-button",
      "Button (" + button.id + ") starts out with correct anchor");
 
   let navbar = document.getElementById("nav-bar").customizationTarget;
   simulateItemDrag(button, navbar);
   is(CustomizableUI.getPlacementOfWidget(button.id).area, "nav-bar",
      "Button (" + button.id + ") ends up in nav-bar");
 
   ok(!button.hasAttribute(kAnchorAttribute),
      "Button (" + button.id + ") has no anchor in toolbar");
 
+  CustomizableUI.addWidgetToArea("history-panelmenu", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+  is(button.getAttribute(kAnchorAttribute), "nav-bar-overflow-button",
+     "Button (" + button.id + ") has anchor again");
+
   let resetButton = document.getElementById("customization-reset-button");
   ok(!resetButton.hasAttribute("disabled"), "Should be able to reset now.");
   await gCustomizeMode.reset();
 
-  is(button.getAttribute(kAnchorAttribute), "PanelUI-menu-button",
-     "Button (" + button.id + ") has anchor again");
-
-  let undoButton = document.getElementById("customization-undo-reset-button");
-  ok(!undoButton.hasAttribute("disabled"), "Should be able to undo now.");
-  await gCustomizeMode.undoReset();
-
   ok(!button.hasAttribute(kAnchorAttribute),
-     "Button (" + button.id + ") once again has no anchor in toolbar");
-
-  await gCustomizeMode.reset();
+     "Button (" + button.id + ") once again has no anchor in customize panel");
 
   await endCustomizing();
 });
 
 
 /**
  * Check that anchor gets set correctly when moving an item from the panel to the toolbar
  * using 'reset'
  */
 add_task(async function() {
   await startCustomizing();
-  let button = document.getElementById("bookmarks-menu-button");
+  let button = document.getElementById("home-button");
   ok(!button.hasAttribute(kAnchorAttribute),
      "Button (" + button.id + ") has no anchor in toolbar");
 
-  let panel = document.getElementById("PanelUI-contents");
+  let panel = document.getElementById(CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  let onMouseUp = BrowserTestUtils.waitForEvent(panel, "mouseup");
   simulateItemDrag(button, panel);
-  is(CustomizableUI.getPlacementOfWidget(button.id).area, "PanelUI-contents",
+  await onMouseUp;
+  is(CustomizableUI.getPlacementOfWidget(button.id).area, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL,
      "Button (" + button.id + ") ends up in panel");
-  is(button.getAttribute(kAnchorAttribute), "PanelUI-menu-button",
+  is(button.getAttribute(kAnchorAttribute), "nav-bar-overflow-button",
      "Button (" + button.id + ") has correct anchor in the panel");
 
   let resetButton = document.getElementById("customization-reset-button");
   ok(!resetButton.hasAttribute("disabled"), "Should be able to reset now.");
   await gCustomizeMode.reset();
 
   ok(!button.hasAttribute(kAnchorAttribute),
      "Button (" + button.id + ") once again has no anchor in toolbar");
--- a/browser/components/customizableui/test/browser_694291_searchbar_preference.js
+++ b/browser/components/customizableui/test/browser_694291_searchbar_preference.js
@@ -14,26 +14,24 @@ function checkDefaults() {
   ok(Services.prefs.getBoolPref(PREF_NAME));
   let placement = CustomizableUI.getPlacementOfWidget(WIDGET_ID);
   is(placement.area, CustomizableUI.AREA_NAVBAR);
   is(placement.position,
      CustomizableUI.getPlacementOfWidget("urlbar-container").position + 1);
 }
 
 add_task(async function test_defaults() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-
   // Verify the default state before the first test.
   checkDefaults();
 });
 
 add_task(async function test_syncPreferenceWithWidget() {
   // Moving the widget to any position outside of the navigation toolbar should
   // turn the preference to false.
-  CustomizableUI.addWidgetToArea(WIDGET_ID, CustomizableUI.AREA_PANEL);
+  CustomizableUI.addWidgetToArea(WIDGET_ID, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   ok(!Services.prefs.getBoolPref(PREF_NAME));
 
   // Moving the widget back to any position in the navigation toolbar should
   // turn the preference to true again.
   CustomizableUI.addWidgetToArea(WIDGET_ID, CustomizableUI.AREA_NAVBAR);
   ok(Services.prefs.getBoolPref(PREF_NAME));
 });
 
deleted file mode 100644
--- a/browser/components/customizableui/test/browser_880164_customization_context_menus.js
+++ /dev/null
@@ -1,415 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-requestLongerTimeout(2);
-
-const isOSX = (Services.appinfo.OS === "Darwin");
-
-// Right-click on the home button should
-// show a context menu with options to move it.
-add_task(async function home_button_context() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  let contextMenu = document.getElementById("toolbar-context-menu");
-  let shownPromise = popupShown(contextMenu);
-  let homeButton = document.getElementById("home-button");
-  EventUtils.synthesizeMouse(homeButton, 2, 2, {type: "contextmenu", button: 2 });
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToPanel", true],
-    [".customize-context-removeFromToolbar", true],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-});
-
-// Right-click on an empty bit of tabstrip should
-// show a context menu without options to move it,
-// but with tab-specific options instead.
-add_task(async function tabstrip_context() {
-  // ensure there are tabs to reload/bookmark:
-  let extraTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "http://example.com/");
-  let contextMenu = document.getElementById("toolbar-context-menu");
-  let shownPromise = popupShown(contextMenu);
-  let tabstrip = document.getElementById("tabbrowser-tabs");
-  let rect = tabstrip.getBoundingClientRect();
-  EventUtils.synthesizeMouse(tabstrip, rect.width - 2, 2, {type: "contextmenu", button: 2 });
-  await shownPromise;
-
-  let closedTabsAvailable = SessionStore.getClosedTabCount(window) == 0;
-  info("Closed tabs: " + closedTabsAvailable);
-  let expectedEntries = [
-    ["#toolbar-context-reloadAllTabs", true],
-    ["#toolbar-context-bookmarkAllTabs", true],
-    ["#toolbar-context-undoCloseTab", !closedTabsAvailable],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-  await BrowserTestUtils.removeTab(extraTab);
-});
-
-// Right-click on an empty bit of extra toolbar should
-// show a context menu with moving options disabled,
-// and a toggle option for the extra toolbar
-add_task(async function empty_toolbar_context() {
-  let contextMenu = document.getElementById("toolbar-context-menu");
-  let shownPromise = popupShown(contextMenu);
-  let toolbar = createToolbarWithPlacements("880164_empty_toolbar", []);
-  toolbar.setAttribute("context", "toolbar-context-menu");
-  toolbar.setAttribute("toolbarname", "Fancy Toolbar for Context Menu");
-  EventUtils.synthesizeMouseAtCenter(toolbar, {type: "contextmenu", button: 2 });
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToPanel", false],
-    [".customize-context-removeFromToolbar", false],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["#toggle_880164_empty_toolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-  removeCustomToolbars();
-});
-
-
-// Right-click on the urlbar-container should
-// show a context menu with disabled options to move it.
-add_task(async function urlbar_context() {
-  let contextMenu = document.getElementById("toolbar-context-menu");
-  let shownPromise = popupShown(contextMenu);
-  let urlBarContainer = document.getElementById("urlbar-container");
-  // Need to make sure not to click within an edit field.
-  EventUtils.synthesizeMouse(urlBarContainer, 100, 1, {type: "contextmenu", button: 2 });
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToPanel", false],
-    [".customize-context-removeFromToolbar", false],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-});
-
-// Right-click on the searchbar and moving it to the menu
-// and back should move the search-container instead.
-add_task(async function searchbar_context_move_to_panel_and_back() {
-  let searchbar = document.getElementById("searchbar");
-  gCustomizeMode.addToPanel(searchbar);
-  let placement = CustomizableUI.getPlacementOfWidget("search-container");
-  is(placement.area, CustomizableUI.AREA_PANEL, "Should be in panel");
-
-  let shownPanelPromise = promisePanelShown(window);
-  PanelUI.toggle({type: "command"});
-  await shownPanelPromise;
-  let hiddenPanelPromise = promisePanelHidden(window);
-  PanelUI.toggle({type: "command"});
-  await hiddenPanelPromise;
-
-  gCustomizeMode.addToToolbar(searchbar);
-  placement = CustomizableUI.getPlacementOfWidget("search-container");
-  is(placement.area, CustomizableUI.AREA_NAVBAR, "Should be in navbar");
-  gCustomizeMode.removeFromArea(searchbar);
-  placement = CustomizableUI.getPlacementOfWidget("search-container");
-  is(placement, null, "Should be in palette");
-  CustomizableUI.reset();
-  placement = CustomizableUI.getPlacementOfWidget("search-container");
-  is(placement.area, CustomizableUI.AREA_NAVBAR, "Should be in navbar");
-});
-
-// Right-click on an item within the menu panel should
-// show a context menu with options to move it.
-add_task(async function context_within_panel() {
-  let shownPanelPromise = promisePanelShown(window);
-  PanelUI.toggle({type: "command"});
-  await shownPanelPromise;
-
-  let contextMenu = document.getElementById("customizationPanelItemContextMenu");
-  let shownContextPromise = popupShown(contextMenu);
-  let newWindowButton = document.getElementById("new-window-button");
-  ok(newWindowButton, "new-window-button was found");
-  EventUtils.synthesizeMouse(newWindowButton, 2, 2, {type: "contextmenu", button: 2});
-  await shownContextPromise;
-
-  is(PanelUI.panel.state, "open", "The PanelUI should still be open.");
-
-  let expectedEntries = [
-    [".customize-context-moveToToolbar", true],
-    [".customize-context-removeFromPanel", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  ];
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-
-  let hiddenPromise = promisePanelHidden(window);
-  PanelUI.toggle({type: "command"});
-  await hiddenPromise;
-});
-
-// Right-click on the home button while in customization mode
-// should show a context menu with options to move it.
-add_task(async function context_home_button_in_customize_mode() {
-  await startCustomizing();
-  let contextMenu = document.getElementById("toolbar-context-menu");
-  let shownPromise = popupShown(contextMenu);
-  let homeButton = document.getElementById("wrapper-home-button");
-  EventUtils.synthesizeMouse(homeButton, 2, 2, {type: "contextmenu", button: 2});
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToPanel", true],
-    [".customize-context-removeFromToolbar", true],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", false]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-});
-
-// Right-click on an item in the palette should
-// show a context menu with options to move it.
-add_task(async function context_click_in_palette() {
-  let contextMenu = document.getElementById("customizationPaletteItemContextMenu");
-  let shownPromise = popupShown(contextMenu);
-  let openFileButton = document.getElementById("wrapper-open-file-button");
-  EventUtils.synthesizeMouse(openFileButton, 2, 2, {type: "contextmenu", button: 2});
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-addToToolbar", true],
-    [".customize-context-addToPanel", true]
-  ];
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-});
-
-// Right-click on an item in the panel while in customization mode
-// should show a context menu with options to move it.
-add_task(async function context_click_in_customize_mode() {
-  let contextMenu = document.getElementById("customizationPanelItemContextMenu");
-  let shownPromise = popupShown(contextMenu);
-  let newWindowButton = document.getElementById("wrapper-new-window-button");
-  EventUtils.synthesizeMouse(newWindowButton, 2, 2, {type: "contextmenu", button: 2});
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToToolbar", true],
-    [".customize-context-removeFromPanel", true],
-    ["---"],
-    [".viewCustomizeToolbar", false]
-  ];
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-  await endCustomizing();
-});
-
-// Test the toolbarbutton panel context menu in customization mode
-// without opening the panel before customization mode
-add_task(async function context_click_customize_mode_panel_not_opened() {
-  this.otherWin = await openAndLoadWindow(null, true);
-
-  await new Promise(resolve => waitForFocus(resolve, this.otherWin));
-
-  await startCustomizing(this.otherWin);
-
-  let contextMenu = this.otherWin.document.getElementById("customizationPanelItemContextMenu");
-  let shownPromise = popupShown(contextMenu);
-  let newWindowButton = this.otherWin.document.getElementById("wrapper-new-window-button");
-  EventUtils.synthesizeMouse(newWindowButton, 2, 2, {type: "contextmenu", button: 2}, this.otherWin);
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToToolbar", true],
-    [".customize-context-removeFromPanel", true],
-    ["---"],
-    [".viewCustomizeToolbar", false]
-  ];
-  checkContextMenu(contextMenu, expectedEntries, this.otherWin);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-  await endCustomizing(this.otherWin);
-  await promiseWindowClosed(this.otherWin);
-  this.otherWin = null;
-
-  await new Promise(resolve => waitForFocus(resolve, window));
-});
-
-// Bug 945191 - Combined buttons show wrong context menu options
-// when they are in the toolbar.
-add_task(async function context_combined_buttons_toolbar() {
-  await startCustomizing();
-  let contextMenu = document.getElementById("customizationPanelItemContextMenu");
-  let shownPromise = popupShown(contextMenu);
-  let zoomControls = document.getElementById("wrapper-zoom-controls");
-  EventUtils.synthesizeMouse(zoomControls, 2, 2, {type: "contextmenu", button: 2});
-  await shownPromise;
-  // Execute the command to move the item from the panel to the toolbar.
-  let moveToToolbar = contextMenu.querySelector(".customize-context-moveToToolbar");
-  moveToToolbar.doCommand();
-  let hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-  await endCustomizing();
-
-  zoomControls = document.getElementById("zoom-controls");
-  is(zoomControls.parentNode.id, "nav-bar-customization-target", "Zoom-controls should be on the nav-bar");
-
-  contextMenu = document.getElementById("toolbar-context-menu");
-  shownPromise = popupShown(contextMenu);
-  EventUtils.synthesizeMouse(zoomControls, 2, 2, {type: "contextmenu", button: 2});
-  await shownPromise;
-
-  let expectedEntries = [
-    [".customize-context-moveToPanel", true],
-    [".customize-context-removeFromToolbar", true],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  );
-  checkContextMenu(contextMenu, expectedEntries);
-
-  hiddenPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenPromise;
-  await resetCustomization();
-});
-
-// Bug 947586 - After customization, panel items show wrong context menu options
-add_task(async function context_after_customization_panel() {
-  await startCustomizing();
-  await endCustomizing();
-
-  await PanelUI.show();
-
-  let contextMenu = document.getElementById("customizationPanelItemContextMenu");
-  let shownContextPromise = popupShown(contextMenu);
-  let newWindowButton = document.getElementById("new-window-button");
-  ok(newWindowButton, "new-window-button was found");
-  EventUtils.synthesizeMouse(newWindowButton, 2, 2, {type: "contextmenu", button: 2});
-  await shownContextPromise;
-
-  is(PanelUI.panel.state, "open", "The PanelUI should still be open.");
-
-  let expectedEntries = [
-    [".customize-context-moveToToolbar", true],
-    [".customize-context-removeFromPanel", true],
-    ["---"],
-    [".viewCustomizeToolbar", true]
-  ];
-  checkContextMenu(contextMenu, expectedEntries);
-
-  let hiddenContextPromise = popupHidden(contextMenu);
-  contextMenu.hidePopup();
-  await hiddenContextPromise;
-
-  let hiddenPromise = promisePanelHidden(window);
-  PanelUI.hide();
-  await hiddenPromise;
-});
-
-
-// Bug 982027 - moving icon around removes custom context menu.
-add_task(async function custom_context_menus() {
-  let widgetId = "custom-context-menu-toolbarbutton";
-  let expectedContext = "myfancycontext";
-  let widget = createDummyXULButton(widgetId, "Test ctxt menu");
-  widget.setAttribute("context", expectedContext);
-  CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_NAVBAR);
-  is(widget.getAttribute("context"), expectedContext, "Should have context menu when added to the toolbar.");
-
-  await startCustomizing();
-  is(widget.getAttribute("context"), "", "Should not have own context menu in the toolbar now that we're customizing.");
-  is(widget.getAttribute("wrapped-context"), expectedContext, "Should keep own context menu wrapped when in toolbar.");
-
-  let panel = PanelUI.contents;
-  simulateItemDrag(widget, panel);
-  is(widget.getAttribute("context"), "", "Should not have own context menu when in the panel.");
-  is(widget.getAttribute("wrapped-context"), expectedContext, "Should keep own context menu wrapped now that we're in the panel.");
-
-  simulateItemDrag(widget, document.getElementById("nav-bar").customizationTarget);
-  is(widget.getAttribute("context"), "", "Should not have own context menu when back in toolbar because we're still customizing.");
-  is(widget.getAttribute("wrapped-context"), expectedContext, "Should keep own context menu wrapped now that we're back in the toolbar.");
-
-  await endCustomizing();
-  is(widget.getAttribute("context"), expectedContext, "Should have context menu again now that we're out of customize mode.");
-  CustomizableUI.removeWidgetFromArea(widgetId);
-  widget.remove();
-  ok(CustomizableUI.inDefaultState, "Should be in default state after removing button.");
-});
--- a/browser/components/customizableui/test/browser_884402_customize_from_overflow.js
+++ b/browser/components/customizableui/test/browser_884402_customize_from_overflow.js
@@ -1,78 +1,68 @@
 "use strict";
 
 var overflowPanel = document.getElementById("widget-overflow");
 
-const isOSX = (Services.appinfo.OS === "Darwin");
-
 var originalWindowWidth;
 registerCleanupFunction(function() {
   overflowPanel.removeAttribute("animate");
   window.resizeTo(originalWindowWidth, window.outerHeight);
 });
 
 // Right-click on an item within the overflow panel should
 // show a context menu with options to move it.
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-
   overflowPanel.setAttribute("animate", "false");
 
   originalWindowWidth = window.outerWidth;
   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"));
   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
 
   let chevron = document.getElementById("nav-bar-overflow-button");
   let shownPanelPromise = promisePanelElementShown(window, overflowPanel);
   chevron.click();
   await shownPanelPromise;
 
-  let contextMenu = document.getElementById("toolbar-context-menu");
+  let contextMenu = document.getElementById("customizationPanelItemContextMenu");
   let shownContextPromise = popupShown(contextMenu);
   let sidebarButton = document.getElementById("sidebar-button");
   ok(sidebarButton, "sidebar-button was found");
   is(sidebarButton.getAttribute("overflowedItem"), "true", "Sidebar button is overflowing");
   EventUtils.synthesizeMouse(sidebarButton, 2, 2, {type: "contextmenu", button: 2});
   await shownContextPromise;
 
   is(overflowPanel.state, "open", "The widget overflow panel should still be open.");
 
   let expectedEntries = [
     [".customize-context-moveToPanel", true],
-    [".customize-context-removeFromToolbar", true],
-    ["---"]
-  ];
-  if (!isOSX) {
-    expectedEntries.push(["#toggle_toolbar-menubar", true]);
-  }
-  expectedEntries.push(
-    ["#toggle_PersonalToolbar", true],
+    [".customize-context-removeFromPanel", true],
     ["---"],
     [".viewCustomizeToolbar", true]
-  );
+  ];
   checkContextMenu(contextMenu, expectedEntries);
 
   let hiddenContextPromise = popupHidden(contextMenu);
   let hiddenPromise = promisePanelElementHidden(window, overflowPanel);
   let moveToPanel = contextMenu.querySelector(".customize-context-moveToPanel");
   if (moveToPanel) {
     moveToPanel.click();
   }
   contextMenu.hidePopup();
   await hiddenContextPromise;
   await hiddenPromise;
 
   let sidebarButtonPlacement = CustomizableUI.getPlacementOfWidget("sidebar-button");
   ok(sidebarButtonPlacement, "Sidebar button should still have a placement");
-  is(sidebarButtonPlacement && sidebarButtonPlacement.area, "PanelUI-contents", "Sidebar button should be in the panel now");
+  is(sidebarButtonPlacement && sidebarButtonPlacement.area,
+     CustomizableUI.AREA_FIXED_OVERFLOW_PANEL, "Sidebar button should be pinned now");
   CustomizableUI.reset();
 
   // In some cases, it can take a tick for the navbar to overflow again. Wait for it:
   await waitForCondition(() => navbar.hasAttribute("overflowing"));
   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
 
   sidebarButtonPlacement = CustomizableUI.getPlacementOfWidget("sidebar-button");
   ok(sidebarButtonPlacement, "Sidebar button should still have a placement");
--- a/browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
+++ b/browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
@@ -6,25 +6,22 @@
 
 function isFullscreenSizeMode() {
   let sizemode = document.documentElement.getAttribute("sizemode");
   return sizemode == "fullscreen";
 }
 
 // Observers should be disabled when in customization mode.
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  // Open and close the panel to make sure that the
-  // area is generated before getting a child of the area.
-  let shownPanelPromise = promisePanelShown(window);
-  PanelUI.toggle({type: "command"});
-  await shownPanelPromise;
-  let hiddenPanelPromise = promisePanelHidden(window);
-  PanelUI.toggle({type: "command"});
-  await hiddenPanelPromise;
+  CustomizableUI.addWidgetToArea("fullscreen-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  // Show the panel so it isn't hidden and has bindings applied etc.:
+  await document.getElementById("nav-bar").overflowable.show();
+
+  // Hide it again.
+  document.getElementById("widget-overflow").hidePopup();
 
   let fullscreenButton = document.getElementById("fullscreen-button");
   ok(!fullscreenButton.checked, "Fullscreen button should not be checked when not in fullscreen.")
   ok(!isFullscreenSizeMode(), "Should not be in fullscreen sizemode before we enter fullscreen.");
 
   BrowserFullScreen();
   await waitForCondition(() => isFullscreenSizeMode());
   ok(fullscreenButton.checked, "Fullscreen button should be checked when in fullscreen.")
@@ -38,9 +35,10 @@ add_task(async function() {
   ok(!fullscreenButton.checked, "Fullscreen button should no longer be checked during customization mode");
 
   await endCustomizing();
 
   BrowserFullScreen();
   fullscreenButton = document.getElementById("fullscreen-button");
   await waitForCondition(() => !isFullscreenSizeMode());
   ok(!fullscreenButton.checked, "Fullscreen button should not be checked when not in fullscreen.")
+  CustomizableUI.reset();
 });
deleted file mode 100644
--- a/browser/components/customizableui/test/browser_914863_disabled_help_quit_buttons.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-// Entering then exiting customization mode should reenable the Help and Exit buttons.
-add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  await startCustomizing();
-  let helpButton = document.getElementById("PanelUI-help");
-  let quitButton = document.getElementById("PanelUI-quit");
-  ok(helpButton.getAttribute("disabled") == "true", "Help button should be disabled while in customization mode.");
-  ok(quitButton.getAttribute("disabled") == "true", "Quit button should be disabled while in customization mode.");
-  await endCustomizing();
-
-  ok(!helpButton.hasAttribute("disabled"), "Help button should not be disabled.");
-  ok(!quitButton.hasAttribute("disabled"), "Quit button should not be disabled.");
-});
--- a/browser/components/customizableui/test/browser_938995_indefaultstate_nonremovable.js
+++ b/browser/components/customizableui/test/browser_938995_indefaultstate_nonremovable.js
@@ -3,25 +3,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const kWidgetId = "test-non-removable-widget";
 
 // Adding non-removable items to a toolbar or the panel shouldn't change inDefaultState
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  await PanelUI.ensureReady();
   ok(CustomizableUI.inDefaultState, "Should start in default state");
 
   let button = createDummyXULButton(kWidgetId, "Test non-removable inDefaultState handling");
   CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_NAVBAR);
   button.setAttribute("removable", "false");
   ok(CustomizableUI.inDefaultState, "Should still be in default state after navbar addition");
   button.remove();
 
   button = createDummyXULButton(kWidgetId, "Test non-removable inDefaultState handling");
-  CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_PANEL);
+  CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   button.setAttribute("removable", "false");
   ok(CustomizableUI.inDefaultState, "Should still be in default state after panel addition");
   button.remove();
   ok(CustomizableUI.inDefaultState, "Should be in default state after destroying both widgets");
+  // reset now that button is gone.
+  CustomizableUI.reset();
 });
--- a/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
+++ b/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
@@ -1,137 +1,142 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 var button, menuButton;
 /* Clicking a button should close the panel */
-add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
+add_task(async function plain_button() {
   button = document.createElement("toolbarbutton");
   button.id = "browser_940307_button";
   button.setAttribute("label", "Button");
-  PanelUI.contents.appendChild(button);
-  await PanelUI.show();
-  let hiddenAgain = promisePanelHidden(window);
+  gNavToolbox.palette.appendChild(button);
+  CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  await document.getElementById("nav-bar").overflowable.show();
+  let hiddenAgain = promiseOverflowHidden(window);
   EventUtils.synthesizeMouseAtCenter(button, {});
   await hiddenAgain;
+  CustomizableUI.removeWidgetFromArea(button.id);
   button.remove();
 });
 
 /* Clicking a menu button should close the panel, opening the popup shouldn't.  */
-add_task(async function() {
+add_task(async function menu_button_popup() {
   menuButton = document.createElement("toolbarbutton");
   menuButton.setAttribute("type", "menu-button");
   menuButton.id = "browser_940307_menubutton";
   menuButton.setAttribute("label", "Menu button");
 
   let menuPopup = document.createElement("menupopup");
   menuPopup.id = "browser_940307_menupopup";
 
   let menuItem = document.createElement("menuitem");
   menuItem.setAttribute("label", "Menu item");
   menuItem.id = "browser_940307_menuitem";
 
   menuPopup.appendChild(menuItem);
   menuButton.appendChild(menuPopup);
-  PanelUI.contents.appendChild(menuButton);
+  gNavToolbox.palette.appendChild(menuButton);
+  CustomizableUI.addWidgetToArea(menuButton.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
-  await PanelUI.show();
-  let hiddenAgain = promisePanelHidden(window);
+  await document.getElementById("nav-bar").overflowable.show();
+  let hiddenAgain = promiseOverflowHidden(window);
   let innerButton = document.getAnonymousElementByAttribute(menuButton, "anonid", "button");
   EventUtils.synthesizeMouseAtCenter(innerButton, {});
   await hiddenAgain;
 
   // Now click the dropmarker to show the menu
-  await PanelUI.show();
-  hiddenAgain = promisePanelHidden(window);
+  await document.getElementById("nav-bar").overflowable.show();
+  hiddenAgain = promiseOverflowHidden(window);
   let menuShown = promisePanelElementShown(window, menuPopup);
   let dropmarker = document.getAnonymousElementByAttribute(menuButton, "type", "menu-button");
   EventUtils.synthesizeMouseAtCenter(dropmarker, {});
   await menuShown;
   // Panel should stay open:
-  ok(isPanelUIOpen(), "Panel should still be open");
+  ok(isOverflowOpen(), "Panel should still be open");
   let menuHidden = promisePanelElementHidden(window, menuPopup);
   // Then click the menu item to close all the things
   EventUtils.synthesizeMouseAtCenter(menuItem, {});
   await menuHidden;
   await hiddenAgain;
+  CustomizableUI.removeWidgetFromArea(menuButton.id);
   menuButton.remove();
 });
 
-add_task(async function() {
+add_task(async function searchbar_in_panel() {
   let searchbar = document.getElementById("searchbar");
   gCustomizeMode.addToPanel(searchbar);
   let placement = CustomizableUI.getPlacementOfWidget("search-container");
-  is(placement.area, CustomizableUI.AREA_PANEL, "Should be in panel");
-  await PanelUI.show();
+  is(placement.area, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL, "Should be in panel");
+  await document.getElementById("nav-bar").overflowable.show();
   await waitForCondition(() => "value" in searchbar && searchbar.value === "");
 
   // Focusing a non-empty searchbox will cause us to open the
   // autocomplete panel and search for suggestions, which would
   // trigger network requests. Temporarily disable suggestions.
   await SpecialPowers.pushPrefEnv({set: [["browser.search.suggest.enabled", false]]});
 
   searchbar.value = "foo";
   searchbar.focus();
   // Reaching into this context menu is pretty evil, but hey... it's a test.
   let textbox = document.getAnonymousElementByAttribute(searchbar.textbox, "anonid", "textbox-input-box");
   let contextmenu = document.getAnonymousElementByAttribute(textbox, "anonid", "input-box-contextmenu");
   let contextMenuShown = promisePanelElementShown(window, contextmenu);
   EventUtils.synthesizeMouseAtCenter(searchbar, {type: "contextmenu", button: 2});
   await contextMenuShown;
 
-  ok(isPanelUIOpen(), "Panel should still be open");
+  ok(isOverflowOpen(), "Panel should still be open");
 
   let selectAll = contextmenu.querySelector("[cmd='cmd_selectAll']");
   let contextMenuHidden = promisePanelElementHidden(window, contextmenu);
   EventUtils.synthesizeMouseAtCenter(selectAll, {});
   await contextMenuHidden;
 
   // Hide the suggestion panel.
   searchbar.textbox.popup.hidePopup();
 
-  ok(isPanelUIOpen(), "Panel should still be open");
+  ok(isOverflowOpen(), "Panel should still be open");
 
-  let hiddenPanelPromise = promisePanelHidden(window);
+  let hiddenPanelPromise = promiseOverflowHidden(window);
   EventUtils.synthesizeKey("VK_ESCAPE", {});
   await hiddenPanelPromise;
-  ok(!isPanelUIOpen(), "Panel should no longer be open");
+  ok(!isOverflowOpen(), "Panel should no longer be open");
 
   // We focused the search bar earlier - ensure we don't keep doing that.
   gURLBar.select();
 
   CustomizableUI.reset();
 });
 
-add_task(async function() {
+add_task(async function disabled_button_in_panel() {
   button = document.createElement("toolbarbutton");
   button.id = "browser_946166_button_disabled";
   button.setAttribute("disabled", "true");
   button.setAttribute("label", "Button");
-  PanelUI.contents.appendChild(button);
-  await PanelUI.show();
+  gNavToolbox.palette.appendChild(button);
+  CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  await document.getElementById("nav-bar").overflowable.show();
   EventUtils.synthesizeMouseAtCenter(button, {});
-  is(PanelUI.panel.state, "open", "Popup stays open");
+  is(PanelUI.overflowPanel.state, "open", "Popup stays open");
   button.removeAttribute("disabled");
-  let hiddenAgain = promisePanelHidden(window);
+  let hiddenAgain = promiseOverflowHidden(window);
   EventUtils.synthesizeMouseAtCenter(button, {});
   await hiddenAgain;
   button.remove();
 });
 
 registerCleanupFunction(function() {
   if (button && button.parentNode) {
     button.remove();
   }
   if (menuButton && menuButton.parentNode) {
     menuButton.remove();
   }
   // Sadly this isn't task.jsm-enabled, so we can't wait for this to happen. But we should
   // definitely close it here and hope it won't interfere with other tests.
   // Of course, all the tests are meant to do this themselves, but if they fail...
-  if (isPanelUIOpen()) {
-    PanelUI.hide();
+  if (isOverflowOpen()) {
+    PanelUI.overflowPanel.hidePopup();
   }
+  CustomizableUI.reset();
 });
deleted file mode 100644
--- a/browser/components/customizableui/test/browser_962884_opt_in_disable_hyphens.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  const kNormalLabel = "Character Encoding";
-  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_NAVBAR);
-  let characterEncoding = document.getElementById("characterencoding-button");
-  const kOriginalLabel = characterEncoding.getAttribute("label");
-  characterEncoding.setAttribute("label", "\u00ad" + kNormalLabel);
-  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_PANEL);
-
-  await PanelUI.show();
-
-  is(characterEncoding.getAttribute("auto-hyphens"), "off",
-     "Hyphens should be disabled if the &shy; character is present in the label");
-  let multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
-  let multilineTextCS = getComputedStyle(multilineText);
-  is(multilineTextCS.MozHyphens, "manual", "-moz-hyphens should be set to manual when the &shy; character is present.")
-
-  let hiddenPanelPromise = promisePanelHidden(window);
-  PanelUI.toggle();
-  await hiddenPanelPromise;
-
-  characterEncoding.setAttribute("label", kNormalLabel);
-
-  await PanelUI.show();
-
-  isnot(characterEncoding.getAttribute("auto-hyphens"), "off",
-        "Hyphens should not be disabled if the &shy; character is not present in the label");
-  multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
-  multilineTextCS = getComputedStyle(multilineText);
-  is(multilineTextCS.MozHyphens, "auto", "-moz-hyphens should be set to auto by default.")
-
-  hiddenPanelPromise = promisePanelHidden(window);
-  PanelUI.toggle();
-  await hiddenPanelPromise;
-
-  characterEncoding.setAttribute("label", "\u00ad" + kNormalLabel);
-  CustomizableUI.removeWidgetFromArea("characterencoding-button");
-  await startCustomizing();
-
-  isnot(characterEncoding.getAttribute("auto-hyphens"), "off",
-        "Hyphens should not be disabled when the widget is in the palette");
-
-  gCustomizeMode.addToPanel(characterEncoding);
-  is(characterEncoding.getAttribute("auto-hyphens"), "off",
-     "Hyphens should be disabled if the &shy; character is present in the label in customization mode");
-  multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
-  multilineTextCS = getComputedStyle(multilineText);
-  is(multilineTextCS.MozHyphens, "manual", "-moz-hyphens should be set to manual when the &shy; character is present in customization mode.")
-
-  await endCustomizing();
-
-  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_NAVBAR);
-  ok(!characterEncoding.hasAttribute("auto-hyphens"),
-     "Removing the widget from the panel should remove the auto-hyphens attribute");
-
-  characterEncoding.setAttribute("label", kOriginalLabel);
-});
-
-add_task(async function asyncCleanup() {
-  await endCustomizing();
-  await resetCustomization();
-});
--- a/browser/components/customizableui/test/browser_969661_character_encoding_navbar_disabled.js
+++ b/browser/components/customizableui/test/browser_969661_character_encoding_navbar_disabled.js
@@ -3,23 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 
 // Adding the character encoding menu to the panel, exiting customize mode,
 // and moving it to the nav-bar should have it enabled, not disabled.
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   await startCustomizing();
-  CustomizableUI.addWidgetToArea("characterencoding-button", "PanelUI-contents");
+  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   await endCustomizing();
-  await PanelUI.show();
-  let panelHiddenPromise = promisePanelHidden(window);
-  PanelUI.hide();
+  await document.getElementById("nav-bar").overflowable.show();
+  let panelHiddenPromise = promiseOverflowHidden(window);
+  PanelUI.overflowPanel.hidePopup();
   await panelHiddenPromise;
   CustomizableUI.addWidgetToArea("characterencoding-button", "nav-bar");
   let button = document.getElementById("characterencoding-button");
   ok(!button.hasAttribute("disabled"), "Button shouldn't be disabled");
 });
 
 add_task(function asyncCleanup() {
   resetCustomization();
--- a/browser/components/customizableui/test/browser_970511_undo_restore_default.js
+++ b/browser/components/customizableui/test/browser_970511_undo_restore_default.js
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Restoring default should reset theme and show an "undo" option which undoes the restoring operation.
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   let homeButtonId = "home-button";
   CustomizableUI.removeWidgetFromArea(homeButtonId);
   await startCustomizing();
   ok(!CustomizableUI.inDefaultState, "Not in default state to begin with");
   is(CustomizableUI.getPlacementOfWidget(homeButtonId), null, "Home button is in palette");
   let undoResetButton = document.getElementById("customization-undo-reset-button");
   is(undoResetButton.hidden, true, "The undo button is hidden before reset");
 
@@ -45,31 +44,31 @@ add_task(async function() {
   is(LightweightThemeManager.currentTheme.id, firstLWThemeId, "Theme has been reset from default to original choice");
   ok(!CustomizableUI.inDefaultState, "Not in default state after undo-reset");
   is(undoResetButton.hidden, true, "The undo button is hidden after clicking on the undo button");
   is(CustomizableUI.getPlacementOfWidget(homeButtonId), null, "Home button is in palette");
 
   await gCustomizeMode.reset();
 });
 
-// Performing an action after a reset will hide the reset button.
-add_task(async function() {
+// Performing an action after a reset will hide the undo button.
+add_task(async function action_after_reset_hides_undo() {
   let homeButtonId = "home-button";
   CustomizableUI.removeWidgetFromArea(homeButtonId);
   ok(!CustomizableUI.inDefaultState, "Not in default state to begin with");
   is(CustomizableUI.getPlacementOfWidget(homeButtonId), null, "Home button is in palette");
   let undoResetButton = document.getElementById("customization-undo-reset-button");
   is(undoResetButton.hidden, true, "The undo button is hidden before reset");
 
   await gCustomizeMode.reset();
 
   ok(CustomizableUI.inDefaultState, "In default state after reset");
   is(undoResetButton.hidden, false, "The undo button is visible after reset");
 
-  CustomizableUI.addWidgetToArea(homeButtonId, CustomizableUI.AREA_PANEL);
+  CustomizableUI.addWidgetToArea(homeButtonId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   is(undoResetButton.hidden, true, "The undo button is hidden after another change");
 });
 
 // "Restore defaults", exiting customize, and re-entering shouldn't show the Undo button
 add_task(async function() {
   let undoResetButton = document.getElementById("customization-undo-reset-button");
   is(undoResetButton.hidden, true, "The undo button is hidden before a reset");
   ok(!CustomizableUI.inDefaultState, "The browser should not be in default state");
--- a/browser/components/customizableui/test/browser_972267_customizationchange_events.js
+++ b/browser/components/customizableui/test/browser_972267_customizationchange_events.js
@@ -2,17 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // Create a new window, then move the home button to the menu and check both windows have
 // customizationchange events fire on the toolbox:
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   let newWindow = await openAndLoadWindow();
   let otherToolbox = newWindow.gNavToolbox;
 
   let handlerCalledCount = 0;
   let handler = (ev) => {
     handlerCalledCount++;
   };
 
@@ -20,23 +19,16 @@ add_task(async function() {
 
   gNavToolbox.addEventListener("customizationchange", handler);
   otherToolbox.addEventListener("customizationchange", handler);
 
   gCustomizeMode.addToPanel(homeButton);
 
   is(handlerCalledCount, 2, "Should be called for both windows.");
 
-  // If the test is run in isolation and the panel has never been open,
-  // the button will be in the palette. Deal with this case:
-  if (homeButton.parentNode.id == "BrowserToolbarPalette") {
-    await PanelUI.ensureReady();
-    isnot(homeButton.parentNode.id, "BrowserToolbarPalette", "Home button should now be in panel");
-  }
-
   handlerCalledCount = 0;
   gCustomizeMode.addToToolbar(homeButton);
   is(handlerCalledCount, 2, "Should be called for both windows.");
 
   gNavToolbox.removeEventListener("customizationchange", handler);
   otherToolbox.removeEventListener("customizationchange", handler);
 
   await promiseWindowClosed(newWindow);
--- a/browser/components/customizableui/test/browser_981305_separator_insertion.js
+++ b/browser/components/customizableui/test/browser_981305_separator_insertion.js
@@ -24,53 +24,42 @@ function insertTempItemsIntoMenu(parentM
 }
 
 function checkSeparatorInsertion(menuId, buttonId, subviewId) {
   return async function() {
     info("Checking for duplicate separators in " + buttonId + " widget");
     let menu = document.getElementById(menuId);
     insertTempItemsIntoMenu(menu);
 
-    let placement = CustomizableUI.getPlacementOfWidget(buttonId);
-    let changedPlacement = false;
-    if (!placement || placement.area != CustomizableUI.AREA_PANEL) {
-      CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_PANEL);
-      changedPlacement = true;
-    }
-    await PanelUI.show();
+    CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+    await document.getElementById("nav-bar").overflowable.show();
 
     let button = document.getElementById(buttonId);
     button.click();
 
-    await waitForCondition(() => !PanelUI.multiView.hasAttribute("transitioning"));
+    await BrowserTestUtils.waitForEvent(PanelUI.overflowPanel, "ViewShown");
     let subview = document.getElementById(subviewId);
     ok(subview.firstChild, "Subview should have a kid");
     is(subview.firstChild.localName, "toolbarbutton", "There should be no separators to start with");
 
     for (let kid of subview.children) {
       if (kid.localName == "menuseparator") {
         ok(kid.previousSibling && kid.previousSibling.localName != "menuseparator",
            "Separators should never have another separator next to them, and should never be the first node.");
       }
     }
 
-    let panelHiddenPromise = promisePanelHidden(window);
-    PanelUI.hide();
+    let panelHiddenPromise = promiseOverflowHidden(window);
+    PanelUI.overflowPanel.hidePopup();
     await panelHiddenPromise;
 
-    if (changedPlacement) {
-      CustomizableUI.reset();
-    }
+    CustomizableUI.reset();
   };
 }
 
-add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-});
-
 add_task(checkSeparatorInsertion("menuWebDeveloperPopup", "developer-button", "PanelUI-developerItems"));
 
 registerCleanupFunction(function() {
   for (let el of tempElements) {
     el.remove();
   }
   tempElements = null;
 });
--- a/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
+++ b/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
@@ -2,17 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 const kWidgetId = "test-981418-widget-onbeforecreated";
 
 // Should be able to add broken view widget
 add_task(async function testAddOnBeforeCreatedWidget() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   let viewShownDeferred = Promise.defer();
   let onBeforeCreatedCalled = false;
   let widgetSpec = {
     id: kWidgetId,
     type: "view",
     viewId: kWidgetId + "idontexistyet",
     onBeforeCreated(doc) {
       let view = doc.createElement("panelview");
@@ -54,29 +53,29 @@ add_task(async function testAddOnBeforeC
       await panelShownPromise;
       clearTimeout(shownTimeout);
       ok(true, "Found view shown");
 
       let panelHiddenPromise = promisePanelElementHidden(window, tempPanel);
       tempPanel.hidePopup();
       await panelHiddenPromise;
 
-      CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_PANEL);
-      await PanelUI.show();
+      CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+      await document.getElementById("nav-bar").overflowable.show();
 
       viewShownDeferred = Promise.defer();
       widgetNode.click();
 
       shownTimeout = setTimeout(() => viewShownDeferred.reject("Panel not shown within 20s"), 20000);
       await viewShownDeferred.promise;
       clearTimeout(shownTimeout);
       ok(true, "Found view shown");
 
-      let panelHidden = promisePanelHidden(window);
-      PanelUI.hide();
+      let panelHidden = promiseOverflowHidden(window);
+      PanelUI.overflowPanel.hidePopup();
       await panelHidden;
     } catch (ex) {
       ok(false, "Unexpected exception (like a timeout for one of the yields) " +
                 "when testing view widget.");
     }
   }
 
   noError = true;
--- a/browser/components/customizableui/test/browser_984455_bookmarks_items_reparenting.js
+++ b/browser/components/customizableui/test/browser_984455_bookmarks_items_reparenting.js
@@ -187,17 +187,16 @@ function checkNotOverflowing(aID) {
      "Item with ID " + aID + " should not have overflowedItem attribute");
 }
 
 /**
  * Test that overflowing the bookmarks menu button doesn't break the
  * context menus for the Unsorted and Bookmarks Toolbar menu items.
  */
 add_task(async function testOverflowingBookmarksButtonContextMenu() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   ok(!gNavBar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");
   ok(CustomizableUI.inDefaultState, "Should start in default state.");
 
   // Open the Unsorted and Bookmarks Toolbar context menus and ensure
   // that they have views attached.
   await checkSpecialContextMenus();
 
   await overflowEverything();
--- a/browser/components/customizableui/test/browser_987640_charEncoding.js
+++ b/browser/components/customizableui/test/browser_987640_charEncoding.js
@@ -2,26 +2,25 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const TEST_PAGE = "http://mochi.test:8888/browser/browser/components/customizableui/test/support/test_967000_charEncoding_page.html";
 
 add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
   info("Check Character Encoding panel functionality");
 
   // add the Character Encoding button to the panel
   CustomizableUI.addWidgetToArea("characterencoding-button",
-                                  CustomizableUI.AREA_PANEL);
+                                  CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
   let newTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PAGE, true, true);
 
-  await PanelUI.show();
+  await document.getElementById("nav-bar").overflowable.show();
   let charEncodingButton = document.getElementById("characterencoding-button");
   let characterEncodingView = document.getElementById("PanelUI-characterEncodingView");
   let subviewShownPromise = subviewShown(characterEncodingView);
   charEncodingButton.click();
   await subviewShownPromise;
 
   let checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
   let initialEncoding = checkedButtons[0];
@@ -30,29 +29,29 @@ add_task(async function() {
   // change the encoding
   let encodings = characterEncodingView.querySelectorAll("toolbarbutton");
   let newEncoding = encodings[0].hasAttribute("checked") ? encodings[1] : encodings[0];
   let tabLoadPromise = promiseTabLoadEvent(gBrowser.selectedTab, TEST_PAGE);
   newEncoding.click();
   await tabLoadPromise;
 
   // check that the new encodng is applied
-  await PanelUI.show();
+  await document.getElementById("nav-bar").overflowable.show();
   charEncodingButton.click();
   checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
   let selectedEncodingName = checkedButtons[0].getAttribute("label");
   ok(selectedEncodingName != "Unicode", "The encoding was changed to " + selectedEncodingName);
 
   // reset the initial encoding
-  await PanelUI.show();
+  await document.getElementById("nav-bar").overflowable.show();
   charEncodingButton.click();
   tabLoadPromise = promiseTabLoadEvent(gBrowser.selectedTab, TEST_PAGE);
   initialEncoding.click();
   await tabLoadPromise;
-  await PanelUI.show();
+  await document.getElementById("nav-bar").overflowable.show();
   charEncodingButton.click();
   checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
   is(checkedButtons[0].getAttribute("label"), "Unicode", "The encoding was reset to Unicode");
   await BrowserTestUtils.removeTab(newTab);
 });
 
 add_task(async function asyncCleanup() {
   // reset the panel to the default state
--- a/browser/components/customizableui/test/browser_989751_subviewbutton_class.js
+++ b/browser/components/customizableui/test/browser_989751_subviewbutton_class.js
@@ -19,51 +19,41 @@ function checkSubviewButtonClass(menuId,
     // menuWebDeveloperPopup.
     Cu.import("resource://devtools/shared/Loader.jsm", {})
         .require("devtools/client/framework/devtools-browser");
 
     info("Checking for items without the subviewbutton class in " + buttonId + " widget");
     let menu = document.getElementById(menuId);
     insertClassNameToMenuChildren(menu);
 
-    let placement = CustomizableUI.getPlacementOfWidget(buttonId);
-    let changedPlacement = false;
-    if (!placement || placement.area != CustomizableUI.AREA_PANEL) {
-      CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_PANEL);
-      changedPlacement = true;
-    }
-    await PanelUI.show();
+    CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+    await document.getElementById("nav-bar").overflowable.show();
 
     let button = document.getElementById(buttonId);
     button.click();
 
-    await waitForCondition(() => !PanelUI.multiView.hasAttribute("transitioning"));
+    await BrowserTestUtils.waitForEvent(PanelUI.overflowPanel, "ViewShown");
     let subview = document.getElementById(subviewId);
     ok(subview.firstChild, "Subview should have a kid");
     let subviewchildren = subview.querySelectorAll("toolbarbutton");
     for (let i = 0; i < subviewchildren.length; i++) {
       let item = subviewchildren[i];
       let itemReadable = "Item '" + item.label + "' (classes: " + item.className + ")";
       ok(item.classList.contains("subviewbutton"), itemReadable + " should have the subviewbutton class.");
       if (i == 0) {
         ok(item.classList.contains(kCustomClass), itemReadable + " should still have its own class, too.");
       }
     }
 
-    let panelHiddenPromise = promisePanelHidden(window);
-    PanelUI.hide();
+    let panelHiddenPromise = promiseOverflowHidden(window);
+    PanelUI.overflowPanel.hidePopup();
     await panelHiddenPromise;
 
-    if (changedPlacement) {
-      CustomizableUI.reset();
-    }
+    CustomizableUI.reset();
   };
 }
-add_task(async function() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-});
 
 add_task(checkSubviewButtonClass("menuWebDeveloperPopup", "developer-button", "PanelUI-developerItems"));
 
 registerCleanupFunction(function() {
   tempElement.classList.remove(kCustomClass)
   tempElement = null;
 });
rename from browser/components/customizableui/test/browser_photon_customization_context_menus.js
rename to browser/components/customizableui/test/browser_customization_context_menus.js
--- a/browser/components/customizableui/test/browser_remote_tabs_button.js
+++ b/browser/components/customizableui/test/browser_remote_tabs_button.js
@@ -10,54 +10,55 @@ const service = syncService.Service;
 Components.utils.import("resource://services-sync/UIState.jsm");
 
 let getState;
 let originalSync;
 let syncWasCalled = false;
 
 // TODO: This test should probably be re-written, we don't really test much here.
 add_task(async function testSyncRemoteTabsButtonFunctionality() {
-  await SpecialPowers.pushPrefEnv({set: [["browser.photon.structure.enabled", false]]});
-  info("Test the Sync Remote Tabs button in the PanelUI");
+  info("Test the Sync Remote Tabs button in the panel");
   storeInitialValues();
   mockFunctions();
 
   // Force UI update.
   Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
   // add the sync remote tabs button to the panel
-  CustomizableUI.addWidgetToArea("sync-button", CustomizableUI.AREA_PANEL);
+  CustomizableUI.addWidgetToArea("sync-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
   // check the button's functionality
-  await PanelUI.show();
+  await document.getElementById("nav-bar").overflowable.show();
   info("The panel menu was opened");
 
   let syncRemoteTabsBtn = document.getElementById("sync-button");
+  let remoteTabsPanel = document.getElementById("PanelUI-remotetabs");
+  let viewShown = BrowserTestUtils.waitForEvent(remoteTabsPanel, "ViewShown");
   ok(syncRemoteTabsBtn, "The sync remote tabs button was added to the Panel Menu");
   // click the button - the panel should open.
   syncRemoteTabsBtn.click();
-  let remoteTabsPanel = document.getElementById("PanelUI-remotetabs");
+  await viewShown;
   ok(remoteTabsPanel.getAttribute("current"), "Sync Panel is in view");
 
   // Find and click the "setup" button.
   let syncNowButton = document.getElementById("PanelUI-remotetabs-syncnow");
   syncNowButton.click();
   info("The sync now button was clicked");
 
   await waitForCondition(() => syncWasCalled);
 });
 
 add_task(async function asyncCleanup() {
   // reset the panel UI to the default state
   await resetCustomization();
   ok(CustomizableUI.inDefaultState, "The panel UI is in default state again.");
 
-  if (isPanelUIOpen()) {
-    let panelHidePromise = promisePanelHidden(window);
-    PanelUI.hide();
+  if (isOverflowOpen()) {
+    let panelHidePromise = promiseOverflowHidden(window);
+    PanelUI.overflowPanel.hidePopup();
     await panelHidePromise;
   }
 
   restoreValues();
 });
 
 function mockFunctions() {
   // mock UIState.get()