1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
"use strict";
var overflowPanel = document.getElementById("widget-overflow");
var originalWindowWidth;
registerCleanupFunction(function () {
overflowPanel.removeAttribute("animate");
window.resizeTo(originalWindowWidth, window.outerHeight);
let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
return TestUtils.waitForCondition(() => !navbar.hasAttribute("overflowing"));
});
// Right-click on an item within the overflow panel should
// show a context menu with options to move it.
add_task(async function () {
overflowPanel.setAttribute("animate", "false");
let fxaButton = document.getElementById("fxa-toolbar-menu-button");
if (BrowserTestUtils.is_hidden(fxaButton)) {
// FxA button is likely hidden since the user is logged out.
let initialFxaStatus = document.documentElement.getAttribute("fxastatus");
document.documentElement.setAttribute("fxastatus", "signed_in");
registerCleanupFunction(() =>
document.documentElement.setAttribute("fxastatus", initialFxaStatus)
);
ok(BrowserTestUtils.is_visible(fxaButton), "FxA button is now visible");
}
originalWindowWidth = window.outerWidth;
let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
ok(
!navbar.hasAttribute("overflowing"),
"Should start with a non-overflowing toolbar."
);
window.resizeTo(kForceOverflowWidthPx, window.outerHeight);
await TestUtils.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(
"customizationPanelItemContextMenu"
);
let shownContextPromise = popupShown(contextMenu);
ok(fxaButton, "fxa-toolbar-menu-button was found");
is(
fxaButton.getAttribute("overflowedItem"),
"true",
"FxA button is overflowing"
);
EventUtils.synthesizeMouse(fxaButton, 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-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) {
contextMenu.activateItem(moveToPanel);
} else {
contextMenu.hidePopup();
}
await hiddenContextPromise;
await hiddenPromise;
let fxaButtonPlacement = CustomizableUI.getPlacementOfWidget(
"fxa-toolbar-menu-button"
);
ok(fxaButtonPlacement, "FxA button should still have a placement");
is(
fxaButtonPlacement && fxaButtonPlacement.area,
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL,
"FxA 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 TestUtils.waitForCondition(() =>
fxaButton.hasAttribute("overflowedItem")
);
ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
fxaButtonPlacement = CustomizableUI.getPlacementOfWidget(
"fxa-toolbar-menu-button"
);
ok(fxaButtonPlacement, "FxA button should still have a placement");
is(
fxaButtonPlacement && fxaButtonPlacement.area,
"nav-bar",
"FxA button should be back in the navbar now"
);
is(
fxaButton.getAttribute("overflowedItem"),
"true",
"FxA button should still be overflowed"
);
});
|
