Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'linux' && os_version == '18.04' && processor == 'x86_64' && release_or_beta
- Manifest: browser/components/customizableui/test/browser.toml
/* 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
"use strict";
const kXULWidgetId = "a-test-button"; // we'll create a button with this ID.
const kAPIWidgetId = "save-page-button";
const kPanel = CustomizableUI.AREA_FIXED_OVERFLOW_PANEL;
const kToolbar = CustomizableUI.AREA_NAVBAR;
const kVisiblePalette = "customization-palette";
function checkWrapper(id) {
is(
document.querySelectorAll("#wrapper-" + id).length,
1,
"There should be exactly 1 wrapper for " +
id +
" in the customizing window."
);
}
async function ensureVisible(node) {
let isInPalette = node.parentNode.parentNode == gNavToolbox.palette;
if (isInPalette) {
node.scrollIntoView();
}
let dwu = window.windowUtils;
await BrowserTestUtils.waitForCondition(() => {
let nodeBounds = dwu.getBoundsWithoutFlushing(node);
if (isInPalette) {
let paletteBounds = dwu.getBoundsWithoutFlushing(gNavToolbox.palette);
if (
!(
nodeBounds.top >= paletteBounds.top &&
nodeBounds.bottom <= paletteBounds.bottom
)
) {
return false;
}
}
return nodeBounds.height && nodeBounds.width;
});
}
var move = {
async drag(id, target) {
let targetNode = document.getElementById(target);
if (CustomizableUI.getCustomizationTarget(targetNode)) {
targetNode = CustomizableUI.getCustomizationTarget(targetNode);
}
let nodeToMove = document.getElementById(id);
await ensureVisible(nodeToMove);
simulateItemDrag(nodeToMove, targetNode, "end");
},
async dragToItem(id, target) {
let targetNode = document.getElementById(target);
if (CustomizableUI.getCustomizationTarget(targetNode)) {
targetNode = CustomizableUI.getCustomizationTarget(targetNode);
}
let items = targetNode.querySelectorAll("toolbarpaletteitem");
if (target == kPanel) {
targetNode = items[items.length - 1];
} else {
targetNode = items[0];
}
let nodeToMove = document.getElementById(id);
await ensureVisible(nodeToMove);
simulateItemDrag(nodeToMove, targetNode, "start");
},
API(id, target) {
if (target == kVisiblePalette) {
return CustomizableUI.removeWidgetFromArea(id);
}
return CustomizableUI.addWidgetToArea(id, target, null);
},
};
function isLast(containerId, defaultPlacements, id) {
assertAreaPlacements(containerId, defaultPlacements.concat([id]));
let thisTarget = CustomizableUI.getCustomizationTarget(
document.getElementById(containerId)
);
is(
thisTarget.lastElementChild.firstElementChild.id,
id,
"Widget " + id + " should be in " + containerId + " in customizing window."
);
let otherTarget = CustomizableUI.getCustomizationTarget(
otherWin.document.getElementById(containerId)
);
is(
otherTarget.lastElementChild.id,
id,
"Widget " + id + " should be in " + containerId + " in other window."
);
}
function getLastVisibleNodeInToolbar(containerId, win = window) {
let container = CustomizableUI.getCustomizationTarget(
win.document.getElementById(containerId)
);
let rv = container.lastElementChild;
while (rv?.hidden || rv?.firstElementChild?.hidden) {
rv = rv.previousElementSibling;
}
return rv;
}
function isLastVisibleInToolbar(containerId, defaultPlacements, id) {
let newPlacements;
for (let i = defaultPlacements.length - 1; i >= 0; i--) {
let el = document.getElementById(defaultPlacements[i]);
if (el && !el.hidden) {
newPlacements = [...defaultPlacements];
newPlacements.splice(i + 1, 0, id);
break;
}
}
if (!newPlacements) {
assertAreaPlacements(containerId, defaultPlacements.concat([id]));
} else {
assertAreaPlacements(containerId, newPlacements);
}
is(
getLastVisibleNodeInToolbar(containerId).firstElementChild.id,
id,
"Widget " + id + " should be in " + containerId + " in customizing window."
);
is(
getLastVisibleNodeInToolbar(containerId, otherWin).id,
id,
"Widget " + id + " should be in " + containerId + " in other window."
);
}
function isFirst(containerId, defaultPlacements, id) {
assertAreaPlacements(containerId, [id].concat(defaultPlacements));
let thisTarget = CustomizableUI.getCustomizationTarget(
document.getElementById(containerId)
);
is(
thisTarget.firstElementChild.firstElementChild.id,
id,
"Widget " + id + " should be in " + containerId + " in customizing window."
);
let otherTarget = CustomizableUI.getCustomizationTarget(
otherWin.document.getElementById(containerId)
);
is(
otherTarget.firstElementChild.id,
id,
"Widget " + id + " should be in " + containerId + " in other window."
);
}
async function checkToolbar(id, method) {
// Place at start of the toolbar:
let toolbarPlacements = getAreaWidgetIds(kToolbar);
await move[method](id, kToolbar);
if (method == "dragToItem") {
isFirst(kToolbar, toolbarPlacements, id);
} else if (method == "drag") {
isLastVisibleInToolbar(kToolbar, toolbarPlacements, id);
} else {
isLast(kToolbar, toolbarPlacements, id);
}
checkWrapper(id);
}
async function checkPanel(id, method) {
let panelPlacements = getAreaWidgetIds(kPanel);
await move[method](id, kPanel);
let children = document
.getElementById(kPanel)
.querySelectorAll("toolbarpaletteitem");
let otherChildren = otherWin.document.getElementById(kPanel).children;
let newPlacements = panelPlacements.concat([id]);
// Relative position of the new item from the end:
let position = -1;
// For the drag to item case, we drag to the last item, making the dragged item the
// penultimate item. We can't well use the first item because the panel has complicated
// rules about rearranging wide items (which, by default, the first two items are).
if (method == "dragToItem") {
newPlacements.pop();
newPlacements.splice(panelPlacements.length - 1, 0, id);
position = -2;
}
assertAreaPlacements(kPanel, newPlacements);
is(
children[children.length + position].firstElementChild.id,
id,
"Widget " + id + " should be in " + kPanel + " in customizing window."
);
is(
otherChildren[otherChildren.length + position].id,
id,
"Widget " + id + " should be in " + kPanel + " in other window."
);
checkWrapper(id);
}
async function checkPalette(id, method) {
// Move back to palette:
await move[method](id, kVisiblePalette);
ok(CustomizableUI.inDefaultState, "Should end in default state");
let visibleChildren = gCustomizeMode.visiblePalette.children;
let expectedChild =
method == "dragToItem"
? visibleChildren[0]
: visibleChildren[visibleChildren.length - 1];
// Items dragged to the end of the palette should be the final item. That they're the penultimate
if (method == "drag") {
expectedChild = expectedChild.previousElementSibling;
}
is(
expectedChild.firstElementChild.id,
id,
"Widget " +
id +
" was moved using " +
method +
" and should now be wrapped in palette in customizing window."
);
if (id == kXULWidgetId) {
ok(
otherWin.gNavToolbox.palette.querySelector("#" + id),
"Widget " + id + " should be in invisible palette in other window."
);
}
checkWrapper(id);
}
// This test needs a XUL button that's in the palette by default. No such
// button currently exists, so we create a simple one.
function createXULButtonForWindow(win) {
createDummyXULButton(kXULWidgetId, "test-button", win);
}
function removeXULButtonForWindow(win) {
win.gNavToolbox.palette.querySelector(`#${kXULWidgetId}`).remove();
}
var otherWin;
// Moving widgets in two windows, one with customize mode and one without, should work.
add_task(async function MoveWidgetsInTwoWindows() {
CustomizableUI.createWidget({
id: "cui-mode-wrapping-some-panel-item",
label: "Test panel wrapping",
});
await startCustomizing();
otherWin = await openAndLoadWindow(null, true);
await otherWin.PanelUI.ensureReady();
// Create the XUL button to use in the test in both windows.
createXULButtonForWindow(window);
createXULButtonForWindow(otherWin);
ok(CustomizableUI.inDefaultState, "Should start in default state");
for (let widgetId of [kXULWidgetId, kAPIWidgetId]) {
for (let method of ["API", "drag", "dragToItem"]) {
info("Moving widget " + widgetId + " using " + method);
await checkToolbar(widgetId, method);
// We add an item to the panel because otherwise we can't test dragging
// to items that are already there. We remove it because
// 'checkPalette' checks that we leave the browser in the default state.
CustomizableUI.addWidgetToArea(
"cui-mode-wrapping-some-panel-item",
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
);
await checkPanel(widgetId, method);
CustomizableUI.removeWidgetFromArea("cui-mode-wrapping-some-panel-item");
await checkPalette(widgetId, method);
CustomizableUI.addWidgetToArea(
"cui-mode-wrapping-some-panel-item",
CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
);
await checkPanel(widgetId, method);
await checkToolbar(widgetId, method);
CustomizableUI.removeWidgetFromArea("cui-mode-wrapping-some-panel-item");
await checkPalette(widgetId, method);
}
}
await promiseWindowClosed(otherWin);
otherWin = null;
await endCustomizing();
removeXULButtonForWindow(window);
});
add_task(async function asyncCleanup() {
CustomizableUI.destroyWidget("cui-mode-wrapping-some-panel-item");
await resetCustomization();
});