firefox-main/toolkit/components/passwordmgr/test/browser/browser_autocomplete_secondary_actions.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

const TEST_ORIGIN = "https://example.org";
const TEST_URL_PATH = `${TEST_ORIGIN}${DIRECTORY_PATH}form_basic_login.html`;
const PREF = "browser.autocomplete.removeRecords.enabled";
const AC_L10N = new Localization(
["toolkit/main-window/autocomplete.ftl"],
true
);
const LOGINS_DATA = [
{ origin: TEST_ORIGIN, username: "user1", password: "pass1" },
{ origin: TEST_ORIGIN, username: "user2", password: "pass2" },
];
add_setup(async () => {
await Services.logins.addLogins(
LOGINS_DATA.map(login => LoginTestUtils.testData.formLogin(login))
);
});
// Every flyout delete dispatches a real reauthentication request. Stub it for
// the whole file so no task can raise a genuine OS auth prompt and wedge the
// browser.
let gReauthAuthorized = false;
let gReauthCalls = [];
add_setup(async () => {
const { LoginHelper } = ChromeUtils.importESModule(
"resource://gre/modules/LoginHelper.sys.mjs"
);
const original = LoginHelper.requestReauth;
LoginHelper.requestReauth = async (...args) => {
gReauthCalls.push(args);
// A real prompt takes focus, which tears the dropdown down before it
// resolves. Do the same so callers see the ordering they see in the wild.
const popup = document.getElementById("PopupAutoComplete");
if (popup.state != "closed") {
popup.hidePopup();
await TestUtils.waitForCondition(
() => popup.state == "closed",
"Wait for the dropdown to close before reauthentication resolves"
);
}
return { isAuthorized: gReauthAuthorized, telemetryEvent: null };
};
registerCleanupFunction(() => {
LoginHelper.requestReauth = original;
});
});
function getSecondaryAction(popup, index) {
const item = popup.firstChild.getItemAtIndex(index);
const rowItem = item.querySelector("autocomplete-row-item");
const button = rowItem.shadowRoot.querySelector(
"moz-button.secondary-action"
);
return { item, rowItem, button };
}
async function selectRow(item, index) {
for (let i = 0; i <= index; i++) {
await EventUtils.synthesizeKey("KEY_ArrowDown");
}
await TestUtils.waitForCondition(
() => item.hasAttribute("selected"),
"Wait for the login row to become active"
);
}
function waitForFlyout(itemLabel) {
return TestUtils.waitForCondition(
() =>
[...document.querySelectorAll("menupopup")].find(
m =>
m.state == "open" &&
[...m.querySelectorAll("menuitem")].some(
mi => mi.getAttribute("label") === itemLabel
)
),
"Wait for the flyout menu to open"
);
}
async function openFlyoutByKeyboard(item, rowItem) {
await selectRow(item, 0);
await EventUtils.synthesizeKey("KEY_Tab");
await TestUtils.waitForCondition(
() => rowItem.hasAttribute("subfocused"),
"Wait for the secondary action to become sub-focused"
);
await EventUtils.synthesizeKey("KEY_Enter");
return waitForFlyout(rowItem.actions.secondary.actions[0].label);
}
async function openFlyout(popup, button, label) {
await TestUtils.waitForCondition(
() => button.checkVisibility({ checkVisibilityCSS: true }),
"Wait for the secondary action button to be visible"
);
// The click opens the flyout on mousedown, but a stray event can dismiss it
// before it settles; re-click while the panel is still up (a missed click
// would hit the row and close it) until the flyout sticks.
const menupopup = await TestUtils.waitForCondition(() => {
const found = [...popup.querySelectorAll("menupopup")].find(m =>
[...m.querySelectorAll("menuitem")].some(
mi => mi.getAttribute("label") === label
)
);
if (found) {
return found;
}
if (popup.state == "open") {
EventUtils.synthesizeMouseAtCenter(button, {});
}
return false;
}, "Wait for the flyout menu to open");
if (menupopup.state != "open") {
await BrowserTestUtils.waitForEvent(menupopup, "popupshown");
}
return menupopup;
}
add_task(async function test_edit_icon_when_pref_disabled() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, false]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { rowItem, button } = getSecondaryAction(popup, 0);
Assert.equal(
rowItem.actions.secondary.type,
"edit",
"Login row keeps the edit secondary action when the pref is off"
);
Assert.ok(
button.iconSrc.endsWith("edit.svg"),
"The secondary action shows the edit icon"
);
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_flyout_when_pref_enabled() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
Assert.equal(
rowItem.actions.secondary.type,
"menupopup",
"Login row shows the flyout secondary action when the pref is on"
);
Assert.ok(
button.iconSrc.endsWith("more.svg"),
"The secondary action shows the more icon"
);
await selectRow(item, 0);
await TestUtils.waitForCondition(
() => button.checkVisibility({ checkVisibilityCSS: true }),
"Secondary action is visible when the row is active"
);
const [editAction, deleteAction] = rowItem.actions.secondary.actions;
const menupopup = await openFlyout(popup, button, editAction.label);
const labels = [...menupopup.querySelectorAll("menuitem")].map(mi =>
mi.getAttribute("label")
);
Assert.deepEqual(
labels,
[editAction.label, deleteAction.label],
"Flyout contains the Edit and Delete items"
);
Assert.ok(
popup.contains(menupopup),
"The flyout is hosted inside the autocomplete panel"
);
Assert.equal(popup.state, "open", "The autocomplete popup stays open");
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.hidePopup();
await menuHidden;
await TestUtils.waitForCondition(
() => !popup.contains(menupopup),
"The flyout menupopup is removed after closing"
);
Assert.equal(
popup.state,
"open",
"The autocomplete popup remains open after the flyout closes"
);
// The flyout lives inside the panel, so its popup events bubble up to
// the panel's own listeners and to AutoCompleteParent's. Neither may
// mistake them for the panel itself opening or closing, otherwise the
// actor tears itself down and every later secondary action no-ops.
Assert.ok(
popup.mPopupOpen,
"The panel still considers itself open after the flyout closes"
);
const { AutoCompleteParent } = ChromeUtils.importESModule(
"moz-src:///toolkit/actors/AutoCompleteParent.sys.mjs"
);
Assert.ok(
AutoCompleteParent.getCurrentActor(),
"The autocomplete actor is still current after the flyout closes"
);
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_flyout_opens_via_keyboard() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
await EventUtils.synthesizeKey("KEY_Tab");
await TestUtils.waitForCondition(
() => rowItem.hasAttribute("subfocused"),
"Wait for the secondary action to become sub-focused"
);
const editLabel = rowItem.actions.secondary.actions[0].label;
await EventUtils.synthesizeKey("KEY_Enter");
const menupopup = await TestUtils.waitForCondition(
() =>
[...document.querySelectorAll("menupopup")].find(m =>
[...m.querySelectorAll("menuitem")].some(
mi => mi.getAttribute("label") === editLabel
)
),
"Wait for the flyout to open from the keyboard"
);
Assert.equal(popup.state, "open", "The autocomplete popup stays open");
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.hidePopup();
await menuHidden;
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
// The action button must stay pinned to the row for as long as the flyout is
// open, not only while the row is hovered or selected.
add_task(async function test_action_button_persists_while_flyout_open() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
const editLabel = rowItem.actions.secondary.actions[0].label;
const menupopup = await openFlyout(popup, button, editLabel);
Assert.ok(
rowItem.hasAttribute("menuopen"),
"The row is marked open while the flyout is showing"
);
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.hidePopup();
await menuHidden;
await TestUtils.waitForCondition(
() => !rowItem.hasAttribute("menuopen"),
"The open marker is cleared after the flyout closes"
);
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
// Popup should route each item to its own action index through
// the parent's dispatch path.
add_task(async function test_flyout_actions_dispatch_by_index() {
const { AutoCompleteParent } = ChromeUtils.importESModule(
"moz-src:///toolkit/actors/AutoCompleteParent.sys.mjs"
);
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
const calls = [];
const original = AutoCompleteParent.prototype.selectAutoCompleteEntry;
AutoCompleteParent.prototype.selectAutoCompleteEntry = function (
...args
) {
calls.push(args);
return original.apply(this, args);
};
try {
const { actions } = rowItem.actions.secondary;
Assert.equal(actions.length, 2, "Flyout has two actions");
actions[0].action();
Assert.deepEqual(
calls.at(-1),
[true, 0],
"First flyout item dispatches secondary action index 0"
);
actions[1].action();
Assert.deepEqual(
calls.at(-1),
[true, 1],
"Second flyout item dispatches secondary action index 1"
);
} finally {
AutoCompleteParent.prototype.selectAutoCompleteEntry = original;
}
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
// Closing the autocomplete panel should tear down any flyout a row left open.
add_task(async function test_flyout_closes_with_panel() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
const editLabel = rowItem.actions.secondary.actions[0].label;
const menupopup = await openFlyout(popup, button, editLabel);
await closePopup(popup);
await TestUtils.waitForCondition(
() => !popup.contains(menupopup),
"The flyout is removed when the autocomplete panel closes"
);
Assert.ok(
!rowItem.hasAttribute("menuopen"),
"The row's open marker is cleared when the panel closes"
);
}
);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_activating_flyout_item_keeps_panel_open() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem } = getSecondaryAction(popup, 0);
const menupopup = await openFlyoutByKeyboard(item, rowItem);
const menuitems = [...menupopup.querySelectorAll("menuitem")];
for (const menuitem of menuitems) {
Assert.equal(
menuitem.getAttribute("closemenu"),
"single",
"Flyout items close only their own menu, not the popup chain"
);
}
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.activateItem(menuitems[0]);
await menuHidden;
Assert.equal(
popup.state,
"open",
"The autocomplete panel stays open after a flyout item is activated"
);
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_subfocus_tracks_the_flyout() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem } = getSecondaryAction(popup, 0);
const menupopup = await openFlyoutByKeyboard(item, rowItem);
Assert.ok(
rowItem.hasAttribute("subfocused"),
"The button keeps its focus indicator while the flyout is showing"
);
Assert.ok(
rowItem.hasAttribute("menuopen"),
"The row is marked open while the flyout is showing"
);
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.hidePopup();
await menuHidden;
await TestUtils.waitForCondition(
() => !rowItem.hasAttribute("subfocused"),
"Wait for the sub-selection to drop when the flyout closes"
);
Assert.ok(
!popup._secondaryActionFocused,
"The panel and the row agree that the sub-selection is gone"
);
Assert.equal(popup.state, "open", "The autocomplete panel stays open");
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_secondary_action_menu_semantics() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
const { label } = rowItem.actions.secondary;
Assert.ok(
label.includes("user1"),
`The button is named after the row it belongs to, got "${label}"`
);
const innerButton = button.shadowRoot.querySelector("#main-button");
Assert.equal(
innerButton.getAttribute("title"),
label,
"The button's accessible name comes from its title"
);
Assert.ok(
!innerButton.hasAttribute("aria-label"),
"The name is not duplicated across title and aria-label"
);
Assert.equal(
innerButton.getAttribute("aria-haspopup"),
"menu",
"The button advertises that it opens a menu"
);
Assert.equal(
innerButton.getAttribute("aria-expanded"),
"false",
"The button reports its menu as collapsed"
);
const menupopup = await openFlyoutByKeyboard(item, rowItem);
Assert.equal(
menupopup.getAttribute("aria-label"),
label,
"The flyout has an accessible name"
);
await TestUtils.waitForCondition(
() => innerButton.getAttribute("aria-expanded") === "true",
"Wait for the button to report its menu as expanded"
);
const menuHidden = BrowserTestUtils.waitForEvent(
menupopup,
"popuphiding"
);
menupopup.hidePopup();
await menuHidden;
await TestUtils.waitForCondition(
() => innerButton.getAttribute("aria-expanded") === "false",
"Wait for the button to report its menu as collapsed again"
);
await closePopup(popup);
}
);
await SpecialPowers.popPrefEnv();
});
// Moving the pointer into the flyout takes it off the row, which clears the
// dropdown's selection. The flyout must restore it, otherwise AutoCompleteParent
// has no entry to dispatch the delete action for.
add_task(async function test_delete_works_after_pointer_leaves_row() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
gReauthAuthorized = true;
gReauthCalls = [];
let sawDialog = false;
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
const richlistbox = popup.richlistbox;
await TestUtils.waitForCondition(() => {
EventUtils.synthesizeMouseAtCenter(item, { type: "mousemove" });
return richlistbox.hasAttribute("pointerselected");
}, "Wait for the row to be selected by the pointer");
Assert.equal(popup.selectedIndex, 0, "The hovered row is selected");
const deleteLabel = rowItem.actions.secondary.actions[1].label;
const menupopup = await openFlyout(popup, button, deleteLabel);
const menuitem = [...menupopup.querySelectorAll("menuitem")].find(
mi => mi.getAttribute("label") === deleteLabel
);
richlistbox.dispatchEvent(
new MouseEvent("mouseout", { bubbles: true, relatedTarget: null })
);
Assert.equal(
popup.selectedIndex,
-1,
"The dropdown drops its selection once the pointer leaves the row"
);
const dialogClosed = BrowserTestUtils.promiseAlertDialog(
null,
undefined,
{
callback: win => {
sawDialog = true;
win.document.querySelector("dialog").getButton("cancel").click();
},
}
);
menupopup.activateItem(menuitem);
await dialogClosed;
Assert.equal(gReauthCalls.length, 1, "Reauthentication was requested");
Assert.ok(
sawDialog,
"The delete action still resolves to the row the flyout belongs to"
);
await TestUtils.waitForCondition(
() => popup.state == "open",
"Wait for the dropdown to come back after the confirmation"
);
await closePopup(popup);
}
);
gReauthAuthorized = false;
await SpecialPowers.popPrefEnv();
});
add_task(async function test_delete_reauthenticates_then_confirms() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
gReauthAuthorized = true;
gReauthCalls = [];
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
const deleteLabel = rowItem.actions.secondary.actions[1].label;
const menupopup = await openFlyout(popup, button, deleteLabel);
const menuitem = [...menupopup.querySelectorAll("menuitem")].find(
mi => mi.getAttribute("label") === deleteLabel
);
let dialogWin;
const dialogClosed = BrowserTestUtils.promiseAlertDialog(
null,
undefined,
{
callback: async win => {
dialogWin = win;
const [title, message, confirmButton] = AC_L10N.formatValuesSync([
{ id: "autocomplete-remove-password-title" },
{ id: "autocomplete-remove-record-message" },
{ id: "autocomplete-remove-record-button" },
]);
Assert.equal(
win.document.getElementById("infoTitle").textContent,
title,
"The confirmation asks whether to remove the password"
);
Assert.equal(
win.document.getElementById("infoBody").textContent,
message,
"The confirmation warns the action cannot be undone"
);
const dialog = win.document.querySelector("dialog");
Assert.equal(
dialog.getButton("accept").label,
confirmButton,
"The accept button is labelled Remove"
);
dialog.getButton("cancel").click();
},
}
);
menupopup.activateItem(menuitem);
await dialogClosed;
Assert.equal(gReauthCalls.length, 1, "Reauthentication was requested");
Assert.equal(
gReauthCalls[0][4],
"delete_autocomplete",
"Reauthentication is recorded against the autocomplete delete"
);
Assert.ok(dialogWin, "The confirmation dialog was shown");
await TestUtils.waitForCondition(
() => popup.state == "open",
"Wait for the dropdown to come back after the confirmation"
);
Assert.equal(
popup.state,
"open",
"The dropdown is restored once the confirmation is dismissed"
);
const logins = await Services.logins.getAllLogins();
Assert.equal(
logins.length,
LOGINS_DATA.length,
"Cancelling the confirmation leaves the login in place"
);
await closePopup(popup);
}
);
gReauthAuthorized = false;
await SpecialPowers.popPrefEnv();
});
add_task(async function test_delete_skips_confirm_when_reauth_fails() {
await SpecialPowers.pushPrefEnv({ set: [[PREF, true]] });
gReauthAuthorized = false;
gReauthCalls = [];
let sawDialog = false;
const observer = () => {
sawDialog = true;
};
Services.obs.addObserver(observer, "common-dialog-loaded");
await BrowserTestUtils.withNewTab(
{ gBrowser, url: TEST_URL_PATH },
async function (browser) {
const popup = document.getElementById("PopupAutoComplete");
await openACPopup(popup, browser, "#form-basic-username");
const { item, rowItem, button } = getSecondaryAction(popup, 0);
await selectRow(item, 0);
const deleteLabel = rowItem.actions.secondary.actions[1].label;
const menupopup = await openFlyout(popup, button, deleteLabel);
const menuitem = [...menupopup.querySelectorAll("menuitem")].find(
mi => mi.getAttribute("label") === deleteLabel
);
menupopup.activateItem(menuitem);
await TestUtils.waitForCondition(
() => gReauthCalls.length,
"Wait for reauthentication to be requested"
);
await TestUtils.waitForTick();
Assert.ok(!sawDialog, "No confirmation is shown when reauth is declined");
await TestUtils.waitForCondition(
() => popup.state == "open",
"The dropdown comes back even when reauthentication is declined"
);
Assert.equal(
popup.state,
"open",
"The dropdown is restored when reauthentication is declined"
);
await closePopup(popup);
}
);
Services.obs.removeObserver(observer, "common-dialog-loaded");
await SpecialPowers.popPrefEnv();
});