Stephen Thompson
634b7d6c2b
Connects the new tab groups list panelview (currently only used in the application menu) to also be used in a new customizableUI toolbar button. This is a simple view button that's intended to go in the nav bar or overflow area in future patches. Since panelmultiviews like the application menu manage their own panel headers and the UX spec for this toolbar menu has a different header style, this toolbar view is defined separately from the tab groups list application menu panelview. panelmultiview mutates the panel header DOM when a panelview moves into it. Unfortunately, the overflow area is also a panelmultiview, so that also mutates the toolbar panelview. That is a known issue that will need to be addressed later. Differential Revision: https://phabricator.services.mozilla.com/D292220
72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
https://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
"use strict";
|
|
|
|
const TAB_GROUPS_BUTTON_ID = "tab-groups-button";
|
|
|
|
add_setup(() => {
|
|
CustomizableUI.reset();
|
|
});
|
|
|
|
registerCleanupFunction(() => {
|
|
CustomizableUI.reset();
|
|
});
|
|
|
|
add_task(async function test_is_removable() {
|
|
Assert.ok(
|
|
CustomizableUI.isWidgetRemovable(TAB_GROUPS_BUTTON_ID),
|
|
"The tab groups button should be removable"
|
|
);
|
|
});
|
|
|
|
add_task(async function test_can_be_added_to_area() {
|
|
CustomizableUI.addWidgetToArea(
|
|
TAB_GROUPS_BUTTON_ID,
|
|
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
|
|
);
|
|
Assert.equal(
|
|
CustomizableUI.getPlacementOfWidget(TAB_GROUPS_BUTTON_ID).area,
|
|
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL,
|
|
"Tab groups button should be in the overflow area"
|
|
);
|
|
CustomizableUI.reset();
|
|
});
|
|
|
|
add_task(async function test_panel_contents() {
|
|
CustomizableUI.addWidgetToArea(
|
|
TAB_GROUPS_BUTTON_ID,
|
|
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
|
|
);
|
|
await waitForOverflowButtonShown();
|
|
await document.getElementById("nav-bar").overflowable.show();
|
|
|
|
const button = document.getElementById(TAB_GROUPS_BUTTON_ID);
|
|
Assert.ok(button, "Tab group button appears in Panel Menu");
|
|
button.click();
|
|
|
|
let view = document.getElementById("toolbar-tabGroupsListView");
|
|
await BrowserTestUtils.waitForEvent(view, "ViewShown");
|
|
|
|
let header = view.querySelector(".panel-header");
|
|
Assert.ok(header, "toolbar menu has a header");
|
|
Assert.equal(
|
|
header.querySelector("span").textContent,
|
|
"Tab groups",
|
|
"toolbar menu should be titled 'Tab groups'"
|
|
);
|
|
Assert.ok(
|
|
view.querySelector("tab-groups-list"),
|
|
"toolbar menu has a tab groups list component"
|
|
);
|
|
|
|
let viewPanel = view.closest("panel");
|
|
let panelHidden = BrowserTestUtils.waitForPopupEvent(viewPanel, "hidden");
|
|
viewPanel.hidePopup();
|
|
await panelHidden;
|
|
|
|
if (isOverflowOpen()) {
|
|
await hideOverflow();
|
|
}
|
|
});
|