From 9e3c08db40b8916968b9f30096c7be3f00ce9647 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 21 Apr 2024 13:44:51 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../aboutlogins/AboutLoginsChild.sys.mjs | 315 +++++++ .../aboutlogins/AboutLoginsParent.sys.mjs | 866 +++++++++++++++++++ .../components/aboutlogins/LoginBreaches.sys.mjs | 176 ++++ .../components/aboutlogins/content/aboutLogins.css | 99 +++ .../aboutlogins/content/aboutLogins.html | 392 +++++++++ .../components/aboutlogins/content/aboutLogins.mjs | 288 +++++++ .../content/aboutLoginsImportReport.css | 125 +++ .../content/aboutLoginsImportReport.html | 103 +++ .../content/aboutLoginsImportReport.mjs | 83 ++ .../aboutlogins/content/aboutLoginsUtils.mjs | 72 ++ browser/components/aboutlogins/content/common.css | 9 + .../content/components/confirmation-dialog.css | 71 ++ .../content/components/confirmation-dialog.mjs | 105 +++ .../content/components/fxaccounts-button.css | 80 ++ .../content/components/fxaccounts-button.mjs | 83 ++ .../content/components/generic-dialog.css | 65 ++ .../content/components/generic-dialog.mjs | 63 ++ .../content/components/import-details-row.mjs | 60 ++ .../content/components/import-error-dialog.css | 28 + .../content/components/import-error-dialog.mjs | 59 ++ .../content/components/import-summary-dialog.css | 42 + .../content/components/import-summary-dialog.mjs | 72 ++ .../content/components/login-filter.css | 29 + .../content/components/login-filter.mjs | 99 +++ .../aboutlogins/content/components/login-intro.css | 27 + .../aboutlogins/content/components/login-intro.mjs | 67 ++ .../aboutlogins/content/components/login-item.css | 444 ++++++++++ .../aboutlogins/content/components/login-item.mjs | 952 +++++++++++++++++++++ .../content/components/login-list-item.mjs | 81 ++ .../content/components/login-list-section.mjs | 34 + .../aboutlogins/content/components/login-list.css | 202 +++++ .../aboutlogins/content/components/login-list.mjs | 912 ++++++++++++++++++++ .../content/components/login-timeline.mjs | 137 +++ .../aboutlogins/content/components/menu-button.css | 93 ++ .../aboutlogins/content/components/menu-button.mjs | 183 ++++ .../content/components/remove-logins-dialog.css | 102 +++ .../content/components/remove-logins-dialog.mjs | 117 +++ .../aboutlogins/content/icons/breached-website.svg | 6 + .../content/icons/intro-illustration.svg | 62 ++ .../content/icons/vulnerable-password.svg | 6 + browser/components/aboutlogins/jar.mn | 42 + browser/components/aboutlogins/moz.build | 23 + .../tests/browser/AboutLoginsTestUtils.sys.mjs | 107 +++ .../aboutlogins/tests/browser/browser.ini | 58 ++ .../browser_aaa_eventTelemetry_run_first.js | 271 ++++++ .../browser_alertDismissedAfterChangingPassword.js | 227 +++++ .../browser_breachAlertShowingForAddedLogin.js | 123 +++ .../tests/browser/browser_confirmDeleteDialog.js | 128 +++ .../tests/browser/browser_contextmenuFillLogins.js | 185 ++++ .../tests/browser/browser_copyToClipboardButton.js | 118 +++ .../tests/browser/browser_createLogin.js | 535 ++++++++++++ .../tests/browser/browser_deleteLogin.js | 182 ++++ .../tests/browser/browser_fxAccounts.js | 96 +++ .../tests/browser/browser_loginFilter.js | 60 ++ .../tests/browser/browser_loginItemErrors.js | 153 ++++ .../tests/browser/browser_loginListChanges.js | 144 ++++ .../browser/browser_loginSortOrderRestored.js | 172 ++++ .../tests/browser/browser_noLoginsView.js | 199 +++++ .../tests/browser/browser_openExport.js | 149 ++++ .../tests/browser/browser_openFiltered.js | 295 +++++++ .../tests/browser/browser_openImport.js | 60 ++ .../tests/browser/browser_openImportCSV.js | 411 +++++++++ .../tests/browser/browser_openPreferences.js | 82 ++ .../browser/browser_openPreferencesExternal.js | 65 ++ .../aboutlogins/tests/browser/browser_openSite.js | 94 ++ .../tests/browser/browser_osAuthDialog.js | 165 ++++ .../tests/browser/browser_primaryPassword.js | 282 ++++++ .../tests/browser/browser_removeAllDialog.js | 555 ++++++++++++ .../tests/browser/browser_sessionRestore.js | 62 ++ .../aboutlogins/tests/browser/browser_tabKeyNav.js | 276 ++++++ .../tests/browser/browser_updateLogin.js | 421 +++++++++ ...rowser_vulnerableLoginAddedInSecondaryWindow.js | 223 +++++ .../components/aboutlogins/tests/browser/head.js | 225 +++++ .../aboutlogins/tests/chrome/.eslintrc.js | 16 + .../aboutlogins/tests/chrome/aboutlogins_common.js | 97 +++ .../components/aboutlogins/tests/chrome/chrome.ini | 13 + .../tests/chrome/test_confirm_delete_dialog.html | 127 +++ .../tests/chrome/test_fxaccounts_button.html | 96 +++ .../tests/chrome/test_login_filter.html | 178 ++++ .../aboutlogins/tests/chrome/test_login_item.html | 481 +++++++++++ .../aboutlogins/tests/chrome/test_login_list.html | 697 +++++++++++++++ .../aboutlogins/tests/chrome/test_menu_button.html | 260 ++++++ browser/components/aboutlogins/tests/unit/head.js | 22 + .../unit/test_getPotentialBreachesByLoginGUID.js | 327 +++++++ .../components/aboutlogins/tests/unit/xpcshell.ini | 7 + 85 files changed, 15318 insertions(+) create mode 100644 browser/components/aboutlogins/AboutLoginsChild.sys.mjs create mode 100644 browser/components/aboutlogins/AboutLoginsParent.sys.mjs create mode 100644 browser/components/aboutlogins/LoginBreaches.sys.mjs create mode 100644 browser/components/aboutlogins/content/aboutLogins.css create mode 100644 browser/components/aboutlogins/content/aboutLogins.html create mode 100644 browser/components/aboutlogins/content/aboutLogins.mjs create mode 100644 browser/components/aboutlogins/content/aboutLoginsImportReport.css create mode 100644 browser/components/aboutlogins/content/aboutLoginsImportReport.html create mode 100644 browser/components/aboutlogins/content/aboutLoginsImportReport.mjs create mode 100644 browser/components/aboutlogins/content/aboutLoginsUtils.mjs create mode 100644 browser/components/aboutlogins/content/common.css create mode 100644 browser/components/aboutlogins/content/components/confirmation-dialog.css create mode 100644 browser/components/aboutlogins/content/components/confirmation-dialog.mjs create mode 100644 browser/components/aboutlogins/content/components/fxaccounts-button.css create mode 100644 browser/components/aboutlogins/content/components/fxaccounts-button.mjs create mode 100644 browser/components/aboutlogins/content/components/generic-dialog.css create mode 100644 browser/components/aboutlogins/content/components/generic-dialog.mjs create mode 100644 browser/components/aboutlogins/content/components/import-details-row.mjs create mode 100644 browser/components/aboutlogins/content/components/import-error-dialog.css create mode 100644 browser/components/aboutlogins/content/components/import-error-dialog.mjs create mode 100644 browser/components/aboutlogins/content/components/import-summary-dialog.css create mode 100644 browser/components/aboutlogins/content/components/import-summary-dialog.mjs create mode 100644 browser/components/aboutlogins/content/components/login-filter.css create mode 100644 browser/components/aboutlogins/content/components/login-filter.mjs create mode 100644 browser/components/aboutlogins/content/components/login-intro.css create mode 100644 browser/components/aboutlogins/content/components/login-intro.mjs create mode 100644 browser/components/aboutlogins/content/components/login-item.css create mode 100644 browser/components/aboutlogins/content/components/login-item.mjs create mode 100644 browser/components/aboutlogins/content/components/login-list-item.mjs create mode 100644 browser/components/aboutlogins/content/components/login-list-section.mjs create mode 100644 browser/components/aboutlogins/content/components/login-list.css create mode 100644 browser/components/aboutlogins/content/components/login-list.mjs create mode 100644 browser/components/aboutlogins/content/components/login-timeline.mjs create mode 100644 browser/components/aboutlogins/content/components/menu-button.css create mode 100644 browser/components/aboutlogins/content/components/menu-button.mjs create mode 100644 browser/components/aboutlogins/content/components/remove-logins-dialog.css create mode 100644 browser/components/aboutlogins/content/components/remove-logins-dialog.mjs create mode 100644 browser/components/aboutlogins/content/icons/breached-website.svg create mode 100644 browser/components/aboutlogins/content/icons/intro-illustration.svg create mode 100644 browser/components/aboutlogins/content/icons/vulnerable-password.svg create mode 100644 browser/components/aboutlogins/jar.mn create mode 100644 browser/components/aboutlogins/moz.build create mode 100644 browser/components/aboutlogins/tests/browser/AboutLoginsTestUtils.sys.mjs create mode 100644 browser/components/aboutlogins/tests/browser/browser.ini create mode 100644 browser/components/aboutlogins/tests/browser/browser_aaa_eventTelemetry_run_first.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_alertDismissedAfterChangingPassword.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_breachAlertShowingForAddedLogin.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_confirmDeleteDialog.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_contextmenuFillLogins.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_createLogin.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_deleteLogin.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_fxAccounts.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_loginFilter.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_loginItemErrors.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_loginListChanges.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_loginSortOrderRestored.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_noLoginsView.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openExport.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openFiltered.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openImport.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openImportCSV.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openPreferences.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openPreferencesExternal.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_openSite.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_osAuthDialog.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_primaryPassword.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_removeAllDialog.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_sessionRestore.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_tabKeyNav.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_updateLogin.js create mode 100644 browser/components/aboutlogins/tests/browser/browser_vulnerableLoginAddedInSecondaryWindow.js create mode 100644 browser/components/aboutlogins/tests/browser/head.js create mode 100644 browser/components/aboutlogins/tests/chrome/.eslintrc.js create mode 100644 browser/components/aboutlogins/tests/chrome/aboutlogins_common.js create mode 100644 browser/components/aboutlogins/tests/chrome/chrome.ini create mode 100644 browser/components/aboutlogins/tests/chrome/test_confirm_delete_dialog.html create mode 100644 browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html create mode 100644 browser/components/aboutlogins/tests/chrome/test_login_filter.html create mode 100644 browser/components/aboutlogins/tests/chrome/test_login_item.html create mode 100644 browser/components/aboutlogins/tests/chrome/test_login_list.html create mode 100644 browser/components/aboutlogins/tests/chrome/test_menu_button.html create mode 100644 browser/components/aboutlogins/tests/unit/head.js create mode 100644 browser/components/aboutlogins/tests/unit/test_getPotentialBreachesByLoginGUID.js create mode 100644 browser/components/aboutlogins/tests/unit/xpcshell.ini (limited to 'browser/components/aboutlogins') diff --git a/browser/components/aboutlogins/AboutLoginsChild.sys.mjs b/browser/components/aboutlogins/AboutLoginsChild.sys.mjs new file mode 100644 index 0000000000..40d553936a --- /dev/null +++ b/browser/components/aboutlogins/AboutLoginsChild.sys.mjs @@ -0,0 +1,315 @@ +/* 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/. */ + +import { LoginHelper } from "resource://gre/modules/LoginHelper.sys.mjs"; + +import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const lazy = {}; + +XPCOMUtils.defineLazyServiceGetter( + lazy, + "ClipboardHelper", + "@mozilla.org/widget/clipboardhelper;1", + "nsIClipboardHelper" +); + +const TELEMETRY_EVENT_CATEGORY = "pwmgr"; +const TELEMETRY_MIN_MS_BETWEEN_OPEN_MANAGEMENT = 5000; + +let gLastOpenManagementBrowserId = null; +let gLastOpenManagementEventTime = Number.NEGATIVE_INFINITY; +let gPrimaryPasswordPromise; + +function recordTelemetryEvent(event) { + try { + let { method, object, extra = {}, value = null } = event; + Services.telemetry.recordEvent( + TELEMETRY_EVENT_CATEGORY, + method, + object, + value, + extra + ); + } catch (ex) { + console.error( + "AboutLoginsChild: error recording telemetry event: " + ex.message + ); + } +} + +export class AboutLoginsChild extends JSWindowActorChild { + handleEvent(event) { + switch (event.type) { + case "AboutLoginsInit": { + this.#aboutLoginsInit(); + break; + } + case "AboutLoginsImportReportInit": { + this.#aboutLoginsImportReportInit(); + break; + } + case "AboutLoginsCopyLoginDetail": { + this.#aboutLoginsCopyLoginDetail(event.detail); + break; + } + case "AboutLoginsCreateLogin": { + this.#aboutLoginsCreateLogin(event.detail); + break; + } + case "AboutLoginsDeleteLogin": { + this.#aboutLoginsDeleteLogin(event.detail); + break; + } + case "AboutLoginsExportPasswords": { + this.#aboutLoginsExportPasswords(); + break; + } + case "AboutLoginsGetHelp": { + this.#aboutLoginsGetHelp(); + break; + } + case "AboutLoginsImportFromBrowser": { + this.#aboutLoginsImportFromBrowser(); + break; + } + case "AboutLoginsImportFromFile": { + this.#aboutLoginsImportFromFile(); + break; + } + case "AboutLoginsOpenPreferences": { + this.#aboutLoginsOpenPreferences(); + break; + } + case "AboutLoginsRecordTelemetryEvent": { + this.#aboutLoginsRecordTelemetryEvent(event); + break; + } + case "AboutLoginsRemoveAllLogins": { + this.#aboutLoginsRemoveAllLogins(); + break; + } + case "AboutLoginsSortChanged": { + this.#aboutLoginsSortChanged(event.detail); + break; + } + case "AboutLoginsSyncEnable": { + this.#aboutLoginsSyncEnable(); + break; + } + case "AboutLoginsSyncOptions": { + this.#aboutLoginsSyncOptions(); + break; + } + case "AboutLoginsUpdateLogin": { + this.#aboutLoginsUpdateLogin(event.detail); + break; + } + } + } + + #aboutLoginsInit() { + this.sendAsyncMessage("AboutLogins:Subscribe"); + + let win = this.browsingContext.window; + let waivedContent = Cu.waiveXrays(win); + let that = this; + let AboutLoginsUtils = { + doLoginsMatch(loginA, loginB) { + return LoginHelper.doLoginsMatch(loginA, loginB, {}); + }, + getLoginOrigin(uriString) { + return LoginHelper.getLoginOrigin(uriString); + }, + setFocus(element) { + Services.focus.setFocus(element, Services.focus.FLAG_BYKEY); + }, + /** + * Shows the Primary Password prompt if enabled, or the + * OS auth dialog otherwise. + * @param resolve Callback that is called with result of authentication. + * @param messageId The string ID that corresponds to a string stored in aboutLogins.ftl. + * This string will be displayed only when the OS auth dialog is used. + */ + async promptForPrimaryPassword(resolve, messageId) { + gPrimaryPasswordPromise = { + resolve, + }; + + that.sendAsyncMessage("AboutLogins:PrimaryPasswordRequest", messageId); + + return gPrimaryPasswordPromise; + }, + fileImportEnabled: Services.prefs.getBoolPref( + "signon.management.page.fileImport.enabled" + ), + // Default to enabled just in case a search is attempted before we get a response. + primaryPasswordEnabled: true, + passwordRevealVisible: true, + }; + waivedContent.AboutLoginsUtils = Cu.cloneInto( + AboutLoginsUtils, + waivedContent, + { + cloneFunctions: true, + } + ); + } + + #aboutLoginsImportReportInit() { + this.sendAsyncMessage("AboutLogins:ImportReportInit"); + } + + #aboutLoginsCopyLoginDetail(detail) { + lazy.ClipboardHelper.copyString(detail, lazy.ClipboardHelper.Sensitive); + } + + #aboutLoginsCreateLogin(login) { + this.sendAsyncMessage("AboutLogins:CreateLogin", { + login, + }); + } + + #aboutLoginsDeleteLogin(login) { + this.sendAsyncMessage("AboutLogins:DeleteLogin", { + login, + }); + } + + #aboutLoginsExportPasswords() { + this.sendAsyncMessage("AboutLogins:ExportPasswords"); + } + + #aboutLoginsGetHelp() { + this.sendAsyncMessage("AboutLogins:GetHelp"); + } + + #aboutLoginsImportFromBrowser() { + this.sendAsyncMessage("AboutLogins:ImportFromBrowser"); + recordTelemetryEvent({ + object: "import_from_browser", + method: "mgmt_menu_item_used", + }); + } + + #aboutLoginsImportFromFile() { + this.sendAsyncMessage("AboutLogins:ImportFromFile"); + recordTelemetryEvent({ + object: "import_from_csv", + method: "mgmt_menu_item_used", + }); + } + + #aboutLoginsOpenPreferences() { + this.sendAsyncMessage("AboutLogins:OpenPreferences"); + recordTelemetryEvent({ + object: "preferences", + method: "mgmt_menu_item_used", + }); + } + + #aboutLoginsRecordTelemetryEvent(event) { + let { method } = event.detail; + + if (method == "open_management") { + let { docShell } = this.browsingContext; + // Compare to the last time open_management was recorded for the same + // outerWindowID to not double-count them due to a redirect to remove + // the entryPoint query param (since replaceState isn't allowed for + // about:). Don't use performance.now for the tab since you can't + // compare that number between different tabs and this JSM is shared. + let now = docShell.now(); + if ( + this.browsingContext.browserId == gLastOpenManagementBrowserId && + now - gLastOpenManagementEventTime < + TELEMETRY_MIN_MS_BETWEEN_OPEN_MANAGEMENT + ) { + return; + } + gLastOpenManagementEventTime = now; + gLastOpenManagementBrowserId = this.browsingContext.browserId; + } + recordTelemetryEvent(event.detail); + } + + #aboutLoginsRemoveAllLogins() { + this.sendAsyncMessage("AboutLogins:RemoveAllLogins"); + } + + #aboutLoginsSortChanged(detail) { + this.sendAsyncMessage("AboutLogins:SortChanged", detail); + } + + #aboutLoginsSyncEnable() { + this.sendAsyncMessage("AboutLogins:SyncEnable"); + } + + #aboutLoginsSyncOptions() { + this.sendAsyncMessage("AboutLogins:SyncOptions"); + } + + #aboutLoginsUpdateLogin(login) { + this.sendAsyncMessage("AboutLogins:UpdateLogin", { + login, + }); + } + + receiveMessage(message) { + switch (message.name) { + case "AboutLogins:ImportReportData": + this.#importReportData(message.data); + break; + case "AboutLogins:PrimaryPasswordResponse": + this.#primaryPasswordResponse(message.data); + break; + case "AboutLogins:RemaskPassword": + this.#remaskPassword(message.data); + break; + case "AboutLogins:Setup": + this.#setup(message.data); + break; + default: + this.#passMessageDataToContent(message); + } + } + + #importReportData(data) { + this.sendToContent("ImportReportData", data); + } + + #primaryPasswordResponse(data) { + if (gPrimaryPasswordPromise) { + gPrimaryPasswordPromise.resolve(data.result); + recordTelemetryEvent(data.telemetryEvent); + } + } + + #remaskPassword(data) { + this.sendToContent("RemaskPassword", data); + } + + #setup(data) { + let utils = Cu.waiveXrays(this.browsingContext.window).AboutLoginsUtils; + utils.primaryPasswordEnabled = data.primaryPasswordEnabled; + utils.passwordRevealVisible = data.passwordRevealVisible; + utils.importVisible = data.importVisible; + utils.supportBaseURL = Services.urlFormatter.formatURLPref( + "app.support.baseURL" + ); + this.sendToContent("Setup", data); + } + + #passMessageDataToContent(message) { + this.sendToContent(message.name.replace("AboutLogins:", ""), message.data); + } + + sendToContent(messageType, detail) { + let win = this.document.defaultView; + let message = Object.assign({ messageType }, { value: detail }); + let event = new win.CustomEvent("AboutLoginsChromeToContent", { + detail: Cu.cloneInto(message, win), + }); + win.dispatchEvent(event); + } +} diff --git a/browser/components/aboutlogins/AboutLoginsParent.sys.mjs b/browser/components/aboutlogins/AboutLoginsParent.sys.mjs new file mode 100644 index 0000000000..a342586c72 --- /dev/null +++ b/browser/components/aboutlogins/AboutLoginsParent.sys.mjs @@ -0,0 +1,866 @@ +/* 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/. */ + +// _AboutLogins is only exported for testing +import { setTimeout, clearTimeout } from "resource://gre/modules/Timer.sys.mjs"; + +import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; +import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs"; +import { E10SUtils } from "resource://gre/modules/E10SUtils.sys.mjs"; + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + LoginBreaches: "resource:///modules/LoginBreaches.sys.mjs", + LoginCSVImport: "resource://gre/modules/LoginCSVImport.sys.mjs", + LoginExport: "resource://gre/modules/LoginExport.sys.mjs", + LoginHelper: "resource://gre/modules/LoginHelper.sys.mjs", + MigrationUtils: "resource:///modules/MigrationUtils.sys.mjs", + OSKeyStore: "resource://gre/modules/OSKeyStore.sys.mjs", + UIState: "resource://services-sync/UIState.sys.mjs", +}); + +XPCOMUtils.defineLazyGetter(lazy, "log", () => { + return lazy.LoginHelper.createLogger("AboutLoginsParent"); +}); +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "BREACH_ALERTS_ENABLED", + "signon.management.page.breach-alerts.enabled", + false +); +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "FXA_ENABLED", + "identity.fxaccounts.enabled", + false +); +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "OS_AUTH_ENABLED", + "signon.management.page.os-auth.enabled", + true +); +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "VULNERABLE_PASSWORDS_ENABLED", + "signon.management.page.vulnerable-passwords.enabled", + false +); +XPCOMUtils.defineLazyGetter(lazy, "AboutLoginsL10n", () => { + return new Localization(["branding/brand.ftl", "browser/aboutLogins.ftl"]); +}); + +const ABOUT_LOGINS_ORIGIN = "about:logins"; +const AUTH_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes +const PRIMARY_PASSWORD_NOTIFICATION_ID = "primary-password-login-required"; + +// about:logins will always use the privileged content process, +// even if it is disabled for other consumers such as about:newtab. +const EXPECTED_ABOUTLOGINS_REMOTE_TYPE = E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE; +let _gPasswordRemaskTimeout = null; +const convertSubjectToLogin = subject => { + subject.QueryInterface(Ci.nsILoginMetaInfo).QueryInterface(Ci.nsILoginInfo); + const login = lazy.LoginHelper.loginToVanillaObject(subject); + if (!lazy.LoginHelper.isUserFacingLogin(login)) { + return null; + } + return augmentVanillaLoginObject(login); +}; + +const SUBDOMAIN_REGEX = new RegExp(/^www\d*\./); +const augmentVanillaLoginObject = login => { + // Note that `displayOrigin` can also include a httpRealm. + let title = login.displayOrigin.replace(SUBDOMAIN_REGEX, ""); + return Object.assign({}, login, { + title, + }); +}; + +export class AboutLoginsParent extends JSWindowActorParent { + async receiveMessage(message) { + if (!this.browsingContext.embedderElement) { + return; + } + + // Only respond to messages sent from a privlegedabout process. Ideally + // we would also check the contentPrincipal.originNoSuffix but this + // check has been removed due to bug 1576722. + if ( + this.browsingContext.embedderElement.remoteType != + EXPECTED_ABOUTLOGINS_REMOTE_TYPE + ) { + throw new Error( + `AboutLoginsParent: Received ${message.name} message the remote type didn't match expectations: ${this.browsingContext.embedderElement.remoteType} == ${EXPECTED_ABOUTLOGINS_REMOTE_TYPE}` + ); + } + + AboutLogins.subscribers.add(this.browsingContext); + + switch (message.name) { + case "AboutLogins:CreateLogin": { + await this.#createLogin(message.data.login); + break; + } + case "AboutLogins:DeleteLogin": { + this.#deleteLogin(message.data.login); + break; + } + case "AboutLogins:SortChanged": { + this.#sortChanged(message.data); + break; + } + case "AboutLogins:SyncEnable": { + this.#syncEnable(); + break; + } + case "AboutLogins:SyncOptions": { + this.#syncOptions(); + break; + } + case "AboutLogins:ImportFromBrowser": { + this.#importFromBrowser(); + break; + } + case "AboutLogins:ImportReportInit": { + this.#importReportInit(); + break; + } + case "AboutLogins:GetHelp": { + this.#getHelp(); + break; + } + case "AboutLogins:OpenPreferences": { + this.#openPreferences(); + break; + } + case "AboutLogins:PrimaryPasswordRequest": { + await this.#primaryPasswordRequest(message.data); + break; + } + case "AboutLogins:Subscribe": { + await this.#subscribe(); + break; + } + case "AboutLogins:UpdateLogin": { + this.#updateLogin(message.data.login); + break; + } + case "AboutLogins:ExportPasswords": { + await this.#exportPasswords(); + break; + } + case "AboutLogins:ImportFromFile": { + await this.#importFromFile(); + break; + } + case "AboutLogins:RemoveAllLogins": { + this.#removeAllLogins(); + break; + } + } + } + + get #ownerGlobal() { + return this.browsingContext.embedderElement.ownerGlobal; + } + + async #createLogin(newLogin) { + if (!Services.policies.isAllowed("removeMasterPassword")) { + if (!lazy.LoginHelper.isPrimaryPasswordSet()) { + this.#ownerGlobal.openDialog( + "chrome://mozapps/content/preferences/changemp.xhtml", + "", + "centerscreen,chrome,modal,titlebar" + ); + if (!lazy.LoginHelper.isPrimaryPasswordSet()) { + return; + } + } + } + // Remove the path from the origin, if it was provided. + let origin = lazy.LoginHelper.getLoginOrigin(newLogin.origin); + if (!origin) { + console.error( + "AboutLogins:CreateLogin: Unable to get an origin from the login details." + ); + return; + } + newLogin.origin = origin; + Object.assign(newLogin, { + formActionOrigin: "", + usernameField: "", + passwordField: "", + }); + newLogin = lazy.LoginHelper.vanillaObjectToLogin(newLogin); + try { + await Services.logins.addLoginAsync(newLogin); + } catch (error) { + this.#handleLoginStorageErrors(newLogin, error); + } + } + + #deleteLogin(loginObject) { + let login = lazy.LoginHelper.vanillaObjectToLogin(loginObject); + Services.logins.removeLogin(login); + } + + #sortChanged(sort) { + Services.prefs.setCharPref("signon.management.page.sort", sort); + } + + #syncEnable() { + this.#ownerGlobal.gSync.openFxAEmailFirstPage("password-manager"); + } + + #syncOptions() { + this.#ownerGlobal.gSync.openFxAManagePage("password-manager"); + } + + #importFromBrowser() { + try { + lazy.MigrationUtils.showMigrationWizard(this.#ownerGlobal, { + entrypoint: lazy.MigrationUtils.MIGRATION_ENTRYPOINTS.PASSWORDS, + }); + } catch (ex) { + console.error(ex); + } + } + + #importReportInit() { + let reportData = lazy.LoginCSVImport.lastImportReport; + this.sendAsyncMessage("AboutLogins:ImportReportData", reportData); + } + + #getHelp() { + const SUPPORT_URL = + Services.urlFormatter.formatURLPref("app.support.baseURL") + + "password-manager-remember-delete-edit-logins"; + this.#ownerGlobal.openWebLinkIn(SUPPORT_URL, "tab", { + relatedToCurrent: true, + }); + } + + #openPreferences() { + this.#ownerGlobal.openPreferences("privacy-logins"); + } + + async #primaryPasswordRequest(messageId) { + if (!messageId) { + throw new Error("AboutLogins:PrimaryPasswordRequest: no messageId."); + } + let messageText = { value: "NOT SUPPORTED" }; + let captionText = { value: "" }; + + // This feature is only supported on Windows and macOS + // but we still call in to OSKeyStore on Linux to get + // the proper auth_details for Telemetry. + // See bug 1614874 for Linux support. + if (lazy.OS_AUTH_ENABLED && lazy.OSKeyStore.canReauth()) { + messageId += "-" + AppConstants.platform; + [messageText, captionText] = await lazy.AboutLoginsL10n.formatMessages([ + { + id: messageId, + }, + { + id: "about-logins-os-auth-dialog-caption", + }, + ]); + } + + let { isAuthorized, telemetryEvent } = await lazy.LoginHelper.requestReauth( + this.browsingContext.embedderElement, + lazy.OS_AUTH_ENABLED, + AboutLogins._authExpirationTime, + messageText.value, + captionText.value + ); + this.sendAsyncMessage("AboutLogins:PrimaryPasswordResponse", { + result: isAuthorized, + telemetryEvent, + }); + if (isAuthorized) { + AboutLogins._authExpirationTime = Date.now() + AUTH_TIMEOUT_MS; + const remaskPasswords = () => { + this.sendAsyncMessage("AboutLogins:RemaskPassword"); + }; + clearTimeout(_gPasswordRemaskTimeout); + _gPasswordRemaskTimeout = setTimeout(remaskPasswords, AUTH_TIMEOUT_MS); + } + } + + async #subscribe() { + AboutLogins._authExpirationTime = Number.NEGATIVE_INFINITY; + AboutLogins.addObservers(); + + const logins = await AboutLogins.getAllLogins(); + try { + let syncState = AboutLogins.getSyncState(); + + let selectedSort = Services.prefs.getCharPref( + "signon.management.page.sort", + "name" + ); + if (selectedSort == "breached") { + // The "breached" value was used since Firefox 70 and + // replaced with "alerts" in Firefox 76. + selectedSort = "alerts"; + } + this.sendAsyncMessage("AboutLogins:Setup", { + logins, + selectedSort, + syncState, + primaryPasswordEnabled: lazy.LoginHelper.isPrimaryPasswordSet(), + passwordRevealVisible: Services.policies.isAllowed("passwordReveal"), + importVisible: + Services.policies.isAllowed("profileImport") && + AppConstants.platform != "linux", + }); + + await AboutLogins.sendAllLoginRelatedObjects( + logins, + this.browsingContext + ); + } catch (ex) { + if (ex.result != Cr.NS_ERROR_NOT_INITIALIZED) { + throw ex; + } + + // The message manager may be destroyed before the replies can be sent. + lazy.log.debug( + "AboutLogins:Subscribe: exception when replying with logins", + ex + ); + } + } + + #updateLogin(loginUpdates) { + let logins = lazy.LoginHelper.searchLoginsWithObject({ + guid: loginUpdates.guid, + }); + if (logins.length != 1) { + lazy.log.warn( + `AboutLogins:UpdateLogin: expected to find a login for guid: ${loginUpdates.guid} but found ${logins.length}` + ); + return; + } + + let modifiedLogin = logins[0].clone(); + if (loginUpdates.hasOwnProperty("username")) { + modifiedLogin.username = loginUpdates.username; + } + if (loginUpdates.hasOwnProperty("password")) { + modifiedLogin.password = loginUpdates.password; + } + try { + Services.logins.modifyLogin(logins[0], modifiedLogin); + } catch (error) { + this.#handleLoginStorageErrors(modifiedLogin, error); + } + } + + async #exportPasswords() { + let messageText = { value: "NOT SUPPORTED" }; + let captionText = { value: "" }; + + // This feature is only supported on Windows and macOS + // but we still call in to OSKeyStore on Linux to get + // the proper auth_details for Telemetry. + // See bug 1614874 for Linux support. + if (lazy.OSKeyStore.canReauth()) { + let messageId = + "about-logins-export-password-os-auth-dialog-message-" + + AppConstants.platform; + [messageText, captionText] = await lazy.AboutLoginsL10n.formatMessages([ + { + id: messageId, + }, + { + id: "about-logins-os-auth-dialog-caption", + }, + ]); + } + + let { isAuthorized, telemetryEvent } = await lazy.LoginHelper.requestReauth( + this.browsingContext.embedderElement, + true, + null, // Prompt regardless of a recent prompt + messageText.value, + captionText.value + ); + + let { method, object, extra = {}, value = null } = telemetryEvent; + Services.telemetry.recordEvent("pwmgr", method, object, value, extra); + + if (!isAuthorized) { + return; + } + + let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker); + function fpCallback(aResult) { + if (aResult != Ci.nsIFilePicker.returnCancel) { + lazy.LoginExport.exportAsCSV(fp.file.path); + Services.telemetry.recordEvent( + "pwmgr", + "mgmt_menu_item_used", + "export_complete" + ); + } + } + let [title, defaultFilename, okButtonLabel, csvFilterTitle] = + await lazy.AboutLoginsL10n.formatValues([ + { + id: "about-logins-export-file-picker-title", + }, + { + id: "about-logins-export-file-picker-default-filename", + }, + { + id: "about-logins-export-file-picker-export-button", + }, + { + id: "about-logins-export-file-picker-csv-filter-title", + }, + ]); + + fp.init(this.#ownerGlobal, title, Ci.nsIFilePicker.modeSave); + fp.appendFilter(csvFilterTitle, "*.csv"); + fp.appendFilters(Ci.nsIFilePicker.filterAll); + fp.defaultString = defaultFilename; + fp.defaultExtension = "csv"; + fp.okButtonLabel = okButtonLabel; + fp.open(fpCallback); + } + + async #importFromFile() { + let [title, okButtonLabel, csvFilterTitle, tsvFilterTitle] = + await lazy.AboutLoginsL10n.formatValues([ + { + id: "about-logins-import-file-picker-title", + }, + { + id: "about-logins-import-file-picker-import-button", + }, + { + id: "about-logins-import-file-picker-csv-filter-title", + }, + { + id: "about-logins-import-file-picker-tsv-filter-title", + }, + ]); + let { result, path } = await this.openFilePickerDialog( + title, + okButtonLabel, + [ + { + title: csvFilterTitle, + extensionPattern: "*.csv", + }, + { + title: tsvFilterTitle, + extensionPattern: "*.tsv", + }, + ], + this.#ownerGlobal + ); + + if (result != Ci.nsIFilePicker.returnCancel) { + let summary; + try { + summary = await lazy.LoginCSVImport.importFromCSV(path); + } catch (e) { + console.error(e); + this.sendAsyncMessage( + "AboutLogins:ImportPasswordsErrorDialog", + e.errorType + ); + } + if (summary) { + this.sendAsyncMessage("AboutLogins:ImportPasswordsDialog", summary); + Services.telemetry.recordEvent( + "pwmgr", + "mgmt_menu_item_used", + "import_csv_complete" + ); + } + } + } + + #removeAllLogins() { + Services.logins.removeAllUserFacingLogins(); + } + + #handleLoginStorageErrors(login, error) { + let messageObject = { + login: augmentVanillaLoginObject( + lazy.LoginHelper.loginToVanillaObject(login) + ), + errorMessage: error.message, + }; + + if (error.message.includes("This login already exists")) { + // See comment in LoginHelper.createLoginAlreadyExistsError as to + // why we need to call .toString() on the nsISupportsString. + messageObject.existingLoginGuid = error.data.toString(); + } + + this.sendAsyncMessage("AboutLogins:ShowLoginItemError", messageObject); + } + + async openFilePickerDialog(title, okButtonLabel, appendFilters, ownerGlobal) { + return new Promise(resolve => { + let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker); + fp.init(ownerGlobal, title, Ci.nsIFilePicker.modeOpen); + for (const appendFilter of appendFilters) { + fp.appendFilter(appendFilter.title, appendFilter.extensionPattern); + } + fp.appendFilters(Ci.nsIFilePicker.filterAll); + fp.okButtonLabel = okButtonLabel; + fp.open(async result => { + resolve({ result, path: fp.file.path }); + }); + }); + } +} + +class AboutLoginsInternal { + subscribers = new WeakSet(); + #observersAdded = false; + authExpirationTime = Number.NEGATIVE_INFINITY; + + async observe(subject, topic, type) { + if (!ChromeUtils.nondeterministicGetWeakSetKeys(this.subscribers).length) { + this.#removeObservers(); + return; + } + + switch (topic) { + case "passwordmgr-reload-all": { + await this.#reloadAllLogins(); + break; + } + case "passwordmgr-crypto-login": { + this.#removeNotifications(PRIMARY_PASSWORD_NOTIFICATION_ID); + await this.#reloadAllLogins(); + break; + } + case "passwordmgr-crypto-loginCanceled": { + this.#showPrimaryPasswordLoginNotifications(); + break; + } + case lazy.UIState.ON_UPDATE: { + this.#messageSubscribers("AboutLogins:SyncState", this.getSyncState()); + break; + } + case "passwordmgr-storage-changed": { + switch (type) { + case "addLogin": { + await this.#addLogin(subject); + break; + } + case "modifyLogin": { + this.#modifyLogin(subject); + break; + } + case "removeLogin": { + this.#removeLogin(subject); + break; + } + case "removeAllLogins": { + this.#removeAllLogins(); + break; + } + } + } + } + } + + async #addLogin(subject) { + const login = convertSubjectToLogin(subject); + if (!login) { + return; + } + + if (lazy.BREACH_ALERTS_ENABLED) { + this.#messageSubscribers( + "AboutLogins:UpdateBreaches", + await lazy.LoginBreaches.getPotentialBreachesByLoginGUID([login]) + ); + if (lazy.VULNERABLE_PASSWORDS_ENABLED) { + this.#messageSubscribers( + "AboutLogins:UpdateVulnerableLogins", + await lazy.LoginBreaches.getPotentiallyVulnerablePasswordsByLoginGUID( + [login] + ) + ); + } + } + + this.#messageSubscribers("AboutLogins:LoginAdded", login); + } + + async #modifyLogin(subject) { + subject.QueryInterface(Ci.nsIArrayExtensions); + const login = convertSubjectToLogin(subject.GetElementAt(1)); + if (!login) { + return; + } + + if (lazy.BREACH_ALERTS_ENABLED) { + let breachesForThisLogin = + await lazy.LoginBreaches.getPotentialBreachesByLoginGUID([login]); + let breachData = breachesForThisLogin.size + ? breachesForThisLogin.get(login.guid) + : false; + this.#messageSubscribers( + "AboutLogins:UpdateBreaches", + new Map([[login.guid, breachData]]) + ); + if (lazy.VULNERABLE_PASSWORDS_ENABLED) { + let vulnerablePasswordsForThisLogin = + await lazy.LoginBreaches.getPotentiallyVulnerablePasswordsByLoginGUID( + [login] + ); + let isLoginVulnerable = !!vulnerablePasswordsForThisLogin.size; + this.#messageSubscribers( + "AboutLogins:UpdateVulnerableLogins", + new Map([[login.guid, isLoginVulnerable]]) + ); + } + } + + this.#messageSubscribers("AboutLogins:LoginModified", login); + } + + #removeLogin(subject) { + const login = convertSubjectToLogin(subject); + if (!login) { + return; + } + this.#messageSubscribers("AboutLogins:LoginRemoved", login); + } + + #removeAllLogins() { + this.#messageSubscribers("AboutLogins:RemoveAllLogins", []); + } + + async #reloadAllLogins() { + let logins = await this.getAllLogins(); + this.#messageSubscribers("AboutLogins:AllLogins", logins); + await this.sendAllLoginRelatedObjects(logins); + } + + #showPrimaryPasswordLoginNotifications() { + this.#showNotifications({ + id: PRIMARY_PASSWORD_NOTIFICATION_ID, + priority: "PRIORITY_WARNING_MEDIUM", + iconURL: "chrome://browser/skin/login.svg", + messageId: "about-logins-primary-password-notification-message", + buttonIds: ["master-password-reload-button"], + onClicks: [ + function onReloadClick(browser) { + browser.reload(); + }, + ], + }); + this.#messageSubscribers("AboutLogins:PrimaryPasswordAuthRequired"); + } + + #showNotifications({ + id, + priority, + iconURL, + messageId, + buttonIds, + onClicks, + extraFtl = [], + } = {}) { + for (let subscriber of this.#subscriberIterator()) { + let browser = subscriber.embedderElement; + let MozXULElement = browser.ownerGlobal.MozXULElement; + MozXULElement.insertFTLIfNeeded("browser/aboutLogins.ftl"); + for (let ftl of extraFtl) { + MozXULElement.insertFTLIfNeeded(ftl); + } + + // If there's already an existing notification bar, don't do anything. + let { gBrowser } = browser.ownerGlobal; + let notificationBox = gBrowser.getNotificationBox(browser); + let notification = notificationBox.getNotificationWithValue(id); + if (notification) { + continue; + } + + let buttons = []; + for (let i = 0; i < buttonIds.length; i++) { + buttons[i] = { + "l10n-id": buttonIds[i], + popup: null, + callback: () => { + onClicks[i](browser); + }, + }; + } + + notification = notificationBox.appendNotification( + id, + { + label: { "l10n-id": messageId }, + image: iconURL, + priority: notificationBox[priority], + }, + buttons + ); + } + } + + #removeNotifications(notificationId) { + for (let subscriber of this.#subscriberIterator()) { + let browser = subscriber.embedderElement; + let { gBrowser } = browser.ownerGlobal; + let notificationBox = gBrowser.getNotificationBox(browser); + let notification = + notificationBox.getNotificationWithValue(notificationId); + if (!notification) { + continue; + } + notificationBox.removeNotification(notification); + } + } + + *#subscriberIterator() { + let subscribers = ChromeUtils.nondeterministicGetWeakSetKeys( + this.subscribers + ); + for (let subscriber of subscribers) { + let browser = subscriber.embedderElement; + if ( + browser?.remoteType != EXPECTED_ABOUTLOGINS_REMOTE_TYPE || + browser?.contentPrincipal?.originNoSuffix != ABOUT_LOGINS_ORIGIN + ) { + this.subscribers.delete(subscriber); + continue; + } + yield subscriber; + } + } + + #messageSubscribers(name, details) { + for (let subscriber of this.#subscriberIterator()) { + try { + if (subscriber.currentWindowGlobal) { + let actor = subscriber.currentWindowGlobal.getActor("AboutLogins"); + actor.sendAsyncMessage(name, details); + } + } catch (ex) { + if (ex.result == Cr.NS_ERROR_NOT_INITIALIZED) { + // The actor may be destroyed before the message is sent. + lazy.log.debug( + "messageSubscribers: exception when calling sendAsyncMessage", + ex + ); + } else { + throw ex; + } + } + } + } + + async getAllLogins() { + try { + let logins = await lazy.LoginHelper.getAllUserFacingLogins(); + return logins + .map(lazy.LoginHelper.loginToVanillaObject) + .map(augmentVanillaLoginObject); + } catch (e) { + if (e.result == Cr.NS_ERROR_ABORT) { + // If the user cancels the MP prompt then return no logins. + return []; + } + throw e; + } + } + + async sendAllLoginRelatedObjects(logins, browsingContext) { + let sendMessageFn = (name, details) => { + if (browsingContext?.currentWindowGlobal) { + let actor = browsingContext.currentWindowGlobal.getActor("AboutLogins"); + actor.sendAsyncMessage(name, details); + } else { + this.#messageSubscribers(name, details); + } + }; + + if (lazy.BREACH_ALERTS_ENABLED) { + sendMessageFn( + "AboutLogins:SetBreaches", + await lazy.LoginBreaches.getPotentialBreachesByLoginGUID(logins) + ); + if (lazy.VULNERABLE_PASSWORDS_ENABLED) { + sendMessageFn( + "AboutLogins:SetVulnerableLogins", + await lazy.LoginBreaches.getPotentiallyVulnerablePasswordsByLoginGUID( + logins + ) + ); + } + } + } + + getSyncState() { + const state = lazy.UIState.get(); + // As long as Sync is configured, about:logins will treat it as + // authenticated. More diagnostics and error states can be handled + // by other more Sync-specific pages. + const loggedIn = state.status != lazy.UIState.STATUS_NOT_CONFIGURED; + const passwordSyncEnabled = state.syncEnabled && lazy.PASSWORD_SYNC_ENABLED; + + return { + loggedIn, + email: state.email, + avatarURL: state.avatarURL, + fxAccountsEnabled: lazy.FXA_ENABLED, + passwordSyncEnabled, + }; + } + + onPasswordSyncEnabledPreferenceChange(data, previous, latest) { + this.#messageSubscribers("AboutLogins:SyncState", this.getSyncState()); + } + + #observedTopics = [ + "passwordmgr-crypto-login", + "passwordmgr-crypto-loginCanceled", + "passwordmgr-storage-changed", + "passwordmgr-reload-all", + lazy.UIState.ON_UPDATE, + ]; + + addObservers() { + if (!this.#observersAdded) { + for (const topic of this.#observedTopics) { + Services.obs.addObserver(this, topic); + } + this.#observersAdded = true; + } + } + + #removeObservers() { + for (const topic of this.#observedTopics) { + Services.obs.removeObserver(this, topic); + } + this.#observersAdded = false; + } +} + +let AboutLogins = new AboutLoginsInternal(); +export var _AboutLogins = AboutLogins; + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "PASSWORD_SYNC_ENABLED", + "services.sync.engine.passwords", + false, + AboutLogins.onPasswordSyncEnabledPreferenceChange +); diff --git a/browser/components/aboutlogins/LoginBreaches.sys.mjs b/browser/components/aboutlogins/LoginBreaches.sys.mjs new file mode 100644 index 0000000000..bd7a8cdf66 --- /dev/null +++ b/browser/components/aboutlogins/LoginBreaches.sys.mjs @@ -0,0 +1,176 @@ +/* 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/. */ + +/** + * Manages breach alerts for saved logins using data from Firefox Monitor via + * RemoteSettings. + */ + +import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + LoginHelper: "resource://gre/modules/LoginHelper.sys.mjs", + RemoteSettings: "resource://services-settings/remote-settings.sys.mjs", + RemoteSettingsClient: + "resource://services-settings/RemoteSettingsClient.sys.mjs", +}); + +export const LoginBreaches = { + REMOTE_SETTINGS_COLLECTION: "fxmonitor-breaches", + + async update(breaches = null) { + const logins = await lazy.LoginHelper.getAllUserFacingLogins(); + await this.getPotentialBreachesByLoginGUID(logins, breaches); + }, + + /** + * Return a Map of login GUIDs to a potential breach affecting that login + * by considering only breaches affecting passwords. + * + * This only uses the breach `Domain` and `timePasswordChanged` to determine + * if a login may be breached which means it may contain false-positives if + * login timestamps are incorrect, the user didn't save their password change + * in Firefox, or the breach didn't contain all accounts, etc. As a result, + * consumers should avoid making stronger claims than the data supports. + * + * @param {nsILoginInfo[]} logins Saved logins to check for potential breaches. + * @param {object[]} [breaches = null] Only ones involving passwords will be used. + * @returns {Map} with a key for each login GUID potentially in a breach. + */ + async getPotentialBreachesByLoginGUID(logins, breaches = null) { + const breachesByLoginGUID = new Map(); + if (!breaches) { + try { + breaches = await lazy + .RemoteSettings(this.REMOTE_SETTINGS_COLLECTION) + .get(); + } catch (ex) { + if (ex instanceof lazy.RemoteSettingsClient.UnknownCollectionError) { + lazy.log.warn( + "Could not get Remote Settings collection.", + this.REMOTE_SETTINGS_COLLECTION, + ex + ); + return breachesByLoginGUID; + } + throw ex; + } + } + const BREACH_ALERT_URL = Services.prefs.getStringPref( + "signon.management.page.breachAlertUrl" + ); + const baseBreachAlertURL = new URL(BREACH_ALERT_URL); + + await Services.logins.initializationPromise; + const storageJSON = + Services.logins.wrappedJSObject._storage.wrappedJSObject; + const dismissedBreachAlertsByLoginGUID = + storageJSON.getBreachAlertDismissalsByLoginGUID(); + + // Determine potentially breached logins by checking their origin and the last time + // they were changed. It's important to note here that we are NOT considering the + // username and password of that login. + for (const login of logins) { + let loginHost; + try { + // nsIURI.host can throw if the URI scheme doesn't have a host. + loginHost = Services.io.newURI(login.origin).host; + } catch { + continue; + } + for (const breach of breaches) { + if ( + !breach.Domain || + !Services.eTLD.hasRootDomain(loginHost, breach.Domain) || + !this._breachInvolvedPasswords(breach) || + !this._breachWasAfterPasswordLastChanged(breach, login) + ) { + continue; + } + + if (!storageJSON.isPotentiallyVulnerablePassword(login)) { + storageJSON.addPotentiallyVulnerablePassword(login); + } + + if ( + this._breachAlertIsDismissed( + login, + breach, + dismissedBreachAlertsByLoginGUID + ) + ) { + continue; + } + + let breachAlertURL = new URL(breach.Name, baseBreachAlertURL); + breachAlertURL.searchParams.set("utm_source", "firefox-desktop"); + breachAlertURL.searchParams.set("utm_medium", "referral"); + breachAlertURL.searchParams.set("utm_campaign", "about-logins"); + breachAlertURL.searchParams.set("utm_content", "about-logins"); + breach.breachAlertURL = breachAlertURL.href; + breachesByLoginGUID.set(login.guid, breach); + } + } + Services.telemetry.scalarSet( + "pwmgr.potentially_breached_passwords", + breachesByLoginGUID.size + ); + return breachesByLoginGUID; + }, + + /** + * Return information about logins using passwords that were potentially in a + * breach. + * @see the caveats in the documentation for `getPotentialBreachesByLoginGUID`. + * + * @param {nsILoginInfo[]} logins to check the passwords of. + * @returns {Map} from login GUID to `true` for logins that have a password + * that may be vulnerable. + */ + getPotentiallyVulnerablePasswordsByLoginGUID(logins) { + const vulnerablePasswordsByLoginGUID = new Map(); + const storageJSON = + Services.logins.wrappedJSObject._storage.wrappedJSObject; + for (const login of logins) { + if (storageJSON.isPotentiallyVulnerablePassword(login)) { + vulnerablePasswordsByLoginGUID.set(login.guid, true); + } + } + return vulnerablePasswordsByLoginGUID; + }, + + async clearAllPotentiallyVulnerablePasswords() { + await Services.logins.initializationPromise; + const storageJSON = + Services.logins.wrappedJSObject._storage.wrappedJSObject; + storageJSON.clearAllPotentiallyVulnerablePasswords(); + }, + + _breachAlertIsDismissed(login, breach, dismissedBreachAlerts) { + const breachAddedDate = new Date(breach.AddedDate).getTime(); + const breachAlertIsDismissed = + dismissedBreachAlerts[login.guid] && + dismissedBreachAlerts[login.guid].timeBreachAlertDismissed > + breachAddedDate; + return breachAlertIsDismissed; + }, + + _breachInvolvedPasswords(breach) { + return ( + breach.hasOwnProperty("DataClasses") && + breach.DataClasses.includes("Passwords") + ); + }, + + _breachWasAfterPasswordLastChanged(breach, login) { + const breachDate = new Date(breach.BreachDate).getTime(); + return login.timePasswordChanged < breachDate; + }, +}; + +XPCOMUtils.defineLazyGetter(lazy, "log", () => { + return lazy.LoginHelper.createLogger("LoginBreaches"); +}); diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css new file mode 100644 index 0000000000..6b4a16451c --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLogins.css @@ -0,0 +1,99 @@ +/* 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/. */ + +html { + position: fixed; +} +html, +body { + height: 100%; + width: 100%; +} + +body { + --sidebar-width: 320px; + display: grid; + grid-template-columns: var(--sidebar-width) 1fr; + grid-template-rows: auto 1fr; +} + +@media (max-width: 830px) { + body { + --sidebar-width: 270px; + } +} + +header { + display: flex; + align-items: center; + justify-content: flex-end; + background-color: var(--in-content-page-background); + padding-block: 9px; + padding-inline-start: 16px; + padding-inline-end: 23px; +} + +login-filter { + min-width: 200px; + max-width: 400px; + margin-inline: 40px auto; + flex-grow: 0.5; + align-self: center; +} + +fxaccounts-button, +menu-button { + margin-inline-start: 18px; +} + +login-list { + grid-row: 1/4; +} + +:root:not(.initialized) login-intro, +:root:not(.initialized) login-item, +:root.empty-search login-intro, +:root:not(.no-logins, .empty-search, .login-selected) login-intro, +login-item[data-editing="true"] + login-intro, +.login-selected login-intro, +:root:not(.login-selected) login-item:not([data-editing="true"]), +.no-logins login-item:not([data-editing="true"]) { + display: none; +} + +.heading-wrapper { + display: flex; + justify-content: center; + width: var(--sidebar-width); + font-weight: 600; +} + +:root:not(.primary-password-auth-required) #primary-password-required-overlay { + display: none; +} + +.primary-password-auth-required > body > header, +.primary-password-auth-required > body > login-list, +.primary-password-auth-required > body > section { + filter: blur(2px) +} + +#primary-password-required-overlay { + z-index: 1; + position: fixed; + width: 100vw; + height: 100vh; + background-color: rgba(0,0,0,0.2); +} + +body > section { + display: grid; + grid-template-rows: auto 1fr; + overflow-y: hidden; + overflow-x: auto; +} + +login-intro { + overflow-y: scroll; +} diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html new file mode 100644 index 0000000000..c7138a909a --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLogins.html @@ -0,0 +1,392 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/components/aboutlogins/content/aboutLogins.mjs b/browser/components/aboutlogins/content/aboutLogins.mjs new file mode 100644 index 0000000000..f0402fedc1 --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLogins.mjs @@ -0,0 +1,288 @@ +/* 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/. */ + +import { + recordTelemetryEvent, + setKeyboardAccessForNonDialogElements, +} from "./aboutLoginsUtils.mjs"; + +// The init code isn't wrapped in a DOMContentLoaded/load event listener so the +// page works properly when restored from session restore. +const gElements = { + fxAccountsButton: document.querySelector("fxaccounts-button"), + loginList: document.querySelector("login-list"), + loginIntro: document.querySelector("login-intro"), + loginItem: document.querySelector("login-item"), + loginFilter: document + .querySelector("login-list") + .shadowRoot.querySelector("login-filter"), + menuButton: document.querySelector("menu-button"), + // removeAllLogins button is nested inside of menuButton + get removeAllButton() { + return this.menuButton.shadowRoot.querySelector( + ".menuitem-remove-all-logins" + ); + }, +}; + +let numberOfLogins = 0; + +function updateNoLogins() { + document.documentElement.classList.toggle("no-logins", numberOfLogins == 0); + gElements.loginList.classList.toggle("no-logins", numberOfLogins == 0); + gElements.loginItem.classList.toggle("no-logins", numberOfLogins == 0); + gElements.removeAllButton.disabled = numberOfLogins == 0; +} + +function handleAllLogins(logins) { + gElements.loginList.setLogins(logins); + numberOfLogins = logins.length; + updateNoLogins(); +} + +let fxaLoggedIn = null; +let passwordSyncEnabled = null; + +function handleSyncState(syncState) { + gElements.fxAccountsButton.updateState(syncState); + gElements.loginIntro.updateState(syncState); + fxaLoggedIn = syncState.loggedIn; + passwordSyncEnabled = syncState.passwordSyncEnabled; +} + +window.addEventListener("AboutLoginsChromeToContent", event => { + switch (event.detail.messageType) { + case "AllLogins": { + document.documentElement.classList.remove( + "primary-password-auth-required" + ); + setKeyboardAccessForNonDialogElements(true); + handleAllLogins(event.detail.value); + break; + } + case "ImportPasswordsDialog": { + let dialog = document.querySelector("import-summary-dialog"); + let options = { + logins: event.detail.value, + }; + dialog.show(options); + break; + } + case "ImportPasswordsErrorDialog": { + let dialog = document.querySelector("import-error-dialog"); + dialog.show(event.detail.value); + break; + } + case "LoginAdded": { + gElements.loginList.loginAdded(event.detail.value); + gElements.loginItem.loginAdded(event.detail.value); + numberOfLogins++; + updateNoLogins(); + break; + } + case "LoginModified": { + gElements.loginList.loginModified(event.detail.value); + gElements.loginItem.loginModified(event.detail.value); + break; + } + case "LoginRemoved": { + // The loginRemoved function of loginItem needs to be called before + // the one in loginList since it will remove the editing. So that the + // discard dialog won't show up if we delete a login after edit it. + gElements.loginItem.loginRemoved(event.detail.value); + gElements.loginList.loginRemoved(event.detail.value); + numberOfLogins--; + updateNoLogins(); + break; + } + case "PrimaryPasswordAuthRequired": { + document.documentElement.classList.add("primary-password-auth-required"); + setKeyboardAccessForNonDialogElements(false); + break; + } + case "RemaskPassword": { + window.dispatchEvent(new CustomEvent("AboutLoginsRemaskPassword")); + break; + } + case "RemoveAllLogins": { + handleAllLogins(event.detail.value); + document.documentElement.classList.remove("login-selected"); + break; + } + case "SetBreaches": { + gElements.loginList.setBreaches(event.detail.value); + gElements.loginItem.setBreaches(event.detail.value); + break; + } + case "SetVulnerableLogins": { + gElements.loginList.setVulnerableLogins(event.detail.value); + gElements.loginItem.setVulnerableLogins(event.detail.value); + break; + } + case "Setup": { + handleAllLogins(event.detail.value.logins); + handleSyncState(event.detail.value.syncState); + gElements.loginList.setSortDirection(event.detail.value.selectedSort); + document.documentElement.classList.add("initialized"); + gElements.loginList.classList.add("initialized"); + break; + } + case "ShowLoginItemError": { + gElements.loginItem.showLoginItemError(event.detail.value); + break; + } + case "SyncState": { + handleSyncState(event.detail.value); + break; + } + case "UpdateBreaches": { + gElements.loginList.updateBreaches(event.detail.value); + gElements.loginItem.updateBreaches(event.detail.value); + break; + } + case "UpdateVulnerableLogins": { + gElements.loginList.updateVulnerableLogins(event.detail.value); + gElements.loginItem.updateVulnerableLogins(event.detail.value); + break; + } + } +}); + +window.addEventListener("AboutLoginsRemoveAllLoginsDialog", () => { + let loginItem = document.querySelector("login-item"); + let options = {}; + if (fxaLoggedIn && passwordSyncEnabled) { + options.title = "about-logins-confirm-remove-all-sync-dialog-title"; + options.message = "about-logins-confirm-remove-all-sync-dialog-message"; + } else { + options.title = "about-logins-confirm-remove-all-dialog-title"; + options.message = "about-logins-confirm-remove-all-dialog-message"; + } + options.confirmCheckboxLabel = + "about-logins-confirm-remove-all-dialog-checkbox-label"; + options.confirmButtonLabel = + "about-logins-confirm-remove-all-dialog-confirm-button-label"; + options.count = numberOfLogins; + + let dialog = document.querySelector("remove-logins-dialog"); + let dialogPromise = dialog.show(options); + try { + dialogPromise.then( + () => { + if (loginItem.dataset.isNewLogin) { + // Bug 1681042 - Resetting the form prevents a double confirmation dialog since there + // may be pending changes in the new login. + loginItem.resetForm(); + window.dispatchEvent(new CustomEvent("AboutLoginsClearSelection")); + } else if (loginItem.dataset.editing) { + loginItem._toggleEditing(); + } + window.document.documentElement.classList.remove("login-selected"); + let removeAllEvt = new CustomEvent("AboutLoginsRemoveAllLogins", { + bubbles: true, + }); + window.dispatchEvent(removeAllEvt); + }, + () => {} + ); + } catch (e) { + if (e != undefined) { + throw e; + } + } +}); + +window.addEventListener("AboutLoginsExportPasswordsDialog", async () => { + recordTelemetryEvent({ + object: "export", + method: "mgmt_menu_item_used", + }); + let dialog = document.querySelector("confirmation-dialog"); + let options = { + title: "about-logins-confirm-export-dialog-title", + message: "about-logins-confirm-export-dialog-message", + confirmButtonLabel: "about-logins-confirm-export-dialog-confirm-button", + }; + try { + await dialog.show(options); + document.dispatchEvent( + new CustomEvent("AboutLoginsExportPasswords", { bubbles: true }) + ); + } catch (ex) { + // The user cancelled the dialog. + } +}); + +async function interceptFocusKey() { + // Intercept Ctrl+F on the page to focus login filter box + const [findKey] = await document.l10n.formatMessages([ + { id: "about-logins-login-filter" }, + ]); + const focusKey = findKey.attributes + .find(a => a.name == "key") + .value.toLowerCase(); + document.addEventListener("keydown", event => { + if (event.key == focusKey && event.getModifierState("Accel")) { + event.preventDefault(); + document + .querySelector("login-list") + .shadowRoot.querySelector("login-filter") + .shadowRoot.querySelector("input") + .focus(); + } + }); +} + +await interceptFocusKey(); + +// Begin code that executes on page load. + +let searchParamsChanged = false; +let { protocol, pathname, searchParams } = new URL(document.location); + +recordTelemetryEvent({ + method: "open_management", + object: searchParams.get("entryPoint") || "direct", +}); + +if (searchParams.has("entryPoint")) { + // Remove this parameter from the URL (after recording above) to make it + // cleaner for bookmarking and switch-to-tab and so that bookmarked values + // don't skew telemetry. + searchParams.delete("entryPoint"); + searchParamsChanged = true; +} + +if (searchParams.has("filter")) { + let filter = searchParams.get("filter"); + if (!filter) { + // Remove empty `filter` params to give a cleaner URL for bookmarking and + // switch-to-tab + searchParams.delete("filter"); + searchParamsChanged = true; + } +} + +if (searchParamsChanged) { + const paramsPart = searchParams.toString() ? `?${searchParams}` : ""; + const newURL = protocol + pathname + paramsPart + document.location.hash; + // This redirect doesn't stop this script from running so ensure you guard + // later code if it shouldn't run before and after the redirect. + window.location.replace(newURL); +} else if (searchParams.has("filter")) { + // This must be after the `location.replace` so it doesn't cause telemetry to + // record a filter event before the navigation to clean the URL. + gElements.loginFilter.value = searchParams.get("filter"); +} + +if (!searchParamsChanged) { + if (document.location.hash) { + const loginDomainOrGuid = decodeURIComponent( + document.location.hash.slice(1) + ); + gElements.loginList.selectLoginByDomainOrGuid(loginDomainOrGuid); + } + gElements.loginFilter.focus(); + document.dispatchEvent(new CustomEvent("AboutLoginsInit", { bubbles: true })); +} diff --git a/browser/components/aboutlogins/content/aboutLoginsImportReport.css b/browser/components/aboutlogins/content/aboutLoginsImportReport.css new file mode 100644 index 0000000000..8e126ecb62 --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLoginsImportReport.css @@ -0,0 +1,125 @@ +/* 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/. */ + +.importreport { + display: block; +} + +#report-body { + display: grid; + grid-template-columns: repeat(6, auto); + grid-template-rows: 110px 145px auto; + grid-column: logins/login; + height: 100%; +} + +.import-report-heading { + font-weight: 600; + margin-block: auto; + margin-inline-start: 48px; +} + +.summary { + grid-column: 2 / 5; + grid-row-start: 1; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.summary h2 { + font-size: 24px; + margin-block: 32px 8px; +} + + +.summary > a { + margin-top: 12px; +} + +.new-logins, +.exiting-logins, +.duplicate-logins, +.errors-logins { + display: flex; + flex-direction: column; + width: 120px; + height: 100px; + align-items: center; + margin: auto; +} + +.count-details { + margin-top: 8px; + text-align: center; +} + +.result-count { + font-size: 40px; + font-weight: bold; +} + +.new-logins { + grid-column: 2; + grid-row-start: 2; +} + +.exiting-logins { + grid-column: 3; + grid-row-start: 2; +} + +.duplicate-logins { + grid-column: 4; + grid-row-start: 2; +} + +.errors-logins { + grid-column: 5; + grid-row-start: 2; +} + +.logins-list { + grid-column: 2 / 6; + grid-row-start: 3; + display: grid; + grid-template-columns: auto 1fr; + border-top: 1px solid var(--in-content-border-color); + grid-auto-rows: 28px; + overflow-y: auto; +} + +.not-imported { + font-style: italic; + font-weight: bold; +} + +.error { + color: var(--dialog-warning-text-color); +} + +.not-imported-hidden { + visibility: hidden; +} + +import-details-row:nth-child(odd) { + background-color: var(--in-content-box-background-odd); +} + +import-details-row { + height: 20px; + margin-block: 1px; + display: grid; + grid-column: 1 / 3; + grid-template-columns: subgrid; + grid-gap: 16px; +} + +import-details-row .row-count { + padding-inline: 8px 12px; +} + +import-details-row .row-details { + padding-inline-start: 5px; +} diff --git a/browser/components/aboutlogins/content/aboutLoginsImportReport.html b/browser/components/aboutlogins/content/aboutLoginsImportReport.html new file mode 100644 index 0000000000..5f52fdf29e --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLoginsImportReport.html @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/browser/components/aboutlogins/content/aboutLoginsImportReport.mjs b/browser/components/aboutlogins/content/aboutLoginsImportReport.mjs new file mode 100644 index 0000000000..3800256382 --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLoginsImportReport.mjs @@ -0,0 +1,83 @@ +/* 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/. */ + +import ImportDetailsRow from "./components/import-details-row.mjs"; + +const detailsLoginsList = document.querySelector(".logins-list"); +const detailedNewCount = document.querySelector(".new-logins"); +const detailedExitingCount = document.querySelector(".exiting-logins"); +const detailedDuplicateCount = document.querySelector(".duplicate-logins"); +const detailedErrorsCount = document.querySelector(".errors-logins"); + +document.dispatchEvent( + new CustomEvent("AboutLoginsImportReportInit", { bubbles: true }) +); + +function importReportDataHandler(event) { + switch (event.detail.messageType) { + case "ImportReportData": + const logins = event.detail.value; + const report = { + added: 0, + modified: 0, + no_change: 0, + error: 0, + }; + for (let loginRow of logins) { + if (loginRow.result.includes("error")) { + report.error++; + } else { + report[loginRow.result]++; + } + } + document.l10n.setAttributes( + detailedNewCount, + "about-logins-import-report-added", + { count: report.added } + ); + document.l10n.setAttributes( + detailedExitingCount, + "about-logins-import-report-modified", + { count: report.modified } + ); + document.l10n.setAttributes( + detailedDuplicateCount, + "about-logins-import-report-no-change", + { count: report.no_change } + ); + document.l10n.setAttributes( + detailedErrorsCount, + "about-logins-import-report-error", + { count: report.error } + ); + if (report.no_change > 0) { + detailedDuplicateCount + .querySelector(".not-imported") + .classList.toggle("not-imported-hidden"); + } + if (report.error > 0) { + detailedErrorsCount + .querySelector(".not-imported") + .classList.toggle("not-imported-hidden"); + } + + detailsLoginsList.innerHTML = ""; + let fragment = document.createDocumentFragment(); + for (let index = 0; index < logins.length; index++) { + const row = new ImportDetailsRow(index + 1, logins[index]); + fragment.appendChild(row); + } + detailsLoginsList.appendChild(fragment); + window.removeEventListener( + "AboutLoginsChromeToContent", + importReportDataHandler + ); + document.dispatchEvent( + new CustomEvent("AboutLoginsImportReportReady", { bubbles: true }) + ); + break; + } +} + +window.addEventListener("AboutLoginsChromeToContent", importReportDataHandler); diff --git a/browser/components/aboutlogins/content/aboutLoginsUtils.mjs b/browser/components/aboutlogins/content/aboutLoginsUtils.mjs new file mode 100644 index 0000000000..4e55487cec --- /dev/null +++ b/browser/components/aboutlogins/content/aboutLoginsUtils.mjs @@ -0,0 +1,72 @@ +/* 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/. */ + +export const CONCEALED_PASSWORD_TEXT = " ".repeat(8); + +/** + * Dispatches a custom event to the AboutLoginsChild.sys.mjs script which + * will record the event. + * @param {object} event.method The telemety event method + * @param {object} event.object The telemety event object + * @param {object} event.value [optional] The telemety event value + */ +export function recordTelemetryEvent(event) { + document.dispatchEvent( + new CustomEvent("AboutLoginsRecordTelemetryEvent", { + bubbles: true, + detail: event, + }) + ); +} + +export function setKeyboardAccessForNonDialogElements(enableKeyboardAccess) { + const pageElements = document.querySelectorAll( + "login-item, login-list, menu-button, login-filter, fxaccounts-button, [tabindex]" + ); + + let { activeElement: docActiveElement } = document; + if ( + !enableKeyboardAccess && + docActiveElement && + !docActiveElement.closest("confirmation-dialog") + ) { + let elementToBlur = + docActiveElement?.shadowRoot?.activeElement ?? docActiveElement; + elementToBlur.blur(); + } + + pageElements.forEach(el => { + if (!enableKeyboardAccess) { + if (el.tabIndex > -1) { + el.dataset.oldTabIndex = el.tabIndex; + } + el.tabIndex = "-1"; + } else if (el.dataset.oldTabIndex) { + el.tabIndex = el.dataset.oldTabIndex; + delete el.dataset.oldTabIndex; + } else { + el.removeAttribute("tabindex"); + } + }); +} + +export function promptForPrimaryPassword(messageId) { + return new Promise(resolve => { + window.AboutLoginsUtils.promptForPrimaryPassword(resolve, messageId); + }); +} + +/** + * Initializes a dialog based on a template using shadow dom. + * @param {HTMLElement} element The element to attach the shadow dom to. + * @param {string} templateSelector The selector of the template to be used. + * @returns {object} The shadow dom that is attached. + */ +export function initDialog(element, templateSelector) { + let template = document.querySelector(templateSelector); + let shadowRoot = element.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(template.content.cloneNode(true)); + return shadowRoot; +} diff --git a/browser/components/aboutlogins/content/common.css b/browser/components/aboutlogins/content/common.css new file mode 100644 index 0000000000..2771a6b03e --- /dev/null +++ b/browser/components/aboutlogins/content/common.css @@ -0,0 +1,9 @@ +/* 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/. */ + +/* [hidden] isn't applying to elements in Shadow DOM. */ +:host([hidden]), +[hidden] { + display: none !important; +} diff --git a/browser/components/aboutlogins/content/components/confirmation-dialog.css b/browser/components/aboutlogins/content/components/confirmation-dialog.css new file mode 100644 index 0000000000..bdd1e23c58 --- /dev/null +++ b/browser/components/aboutlogins/content/components/confirmation-dialog.css @@ -0,0 +1,71 @@ +/* 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/. */ + + .overlay { + position: fixed; + z-index: 1; + inset: 0; + /* TODO: this color is used in the about:preferences overlay, but + why isn't it declared as a variable? */ + background-color: rgba(0,0,0,0.5); + display: flex; +} + +.container { + z-index: 2; + position: relative; + display: flex; + flex-direction: column; + min-width: 250px; + max-width: 500px; + min-height: 200px; + margin: auto; + background: var(--in-content-page-background); + color: var(--in-content-page-color); + box-shadow: var(--shadow-30); + /* show a border in high contrast mode */ + outline: 1px solid transparent; +} + +.title { + font-size: 1.5em; + font-weight: normal; + user-select: none; + margin: 0; +} + +.message { + color: var(--text-color-deemphasized); + margin-bottom: 0; +} + +.dismiss-button { + position: absolute; + top: 0; + inset-inline-end: 0; + min-width: 20px; + min-height: 20px; + margin: 16px; + padding: 0; + line-height: 0; +} + +.dismiss-icon { + -moz-context-properties: fill; + fill: currentColor; +} + +.warning-icon { + -moz-context-properties: fill; + fill: currentColor; + width: 40px; + height: 40px; + margin: 16px; +} + +.content, +.buttons { + text-align: center; + padding: 16px 32px; +} diff --git a/browser/components/aboutlogins/content/components/confirmation-dialog.mjs b/browser/components/aboutlogins/content/components/confirmation-dialog.mjs new file mode 100644 index 0000000000..91a9c3a9d7 --- /dev/null +++ b/browser/components/aboutlogins/content/components/confirmation-dialog.mjs @@ -0,0 +1,105 @@ +/* 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/. */ + +import { setKeyboardAccessForNonDialogElements } from "../aboutLoginsUtils.mjs"; + +export default class ConfirmationDialog extends HTMLElement { + constructor() { + super(); + this._promise = null; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + let template = document.querySelector("#confirmation-dialog-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(template.content.cloneNode(true)); + + this._buttons = this.shadowRoot.querySelector(".buttons"); + this._cancelButton = this.shadowRoot.querySelector(".cancel-button"); + this._confirmButton = this.shadowRoot.querySelector(".confirm-button"); + this._dismissButton = this.shadowRoot.querySelector(".dismiss-button"); + this._message = this.shadowRoot.querySelector(".message"); + this._overlay = this.shadowRoot.querySelector(".overlay"); + this._title = this.shadowRoot.querySelector(".title"); + } + + handleEvent(event) { + switch (event.type) { + case "keydown": + if (event.repeat) { + // Prevent repeat keypresses from accidentally confirming the + // dialog since the confirmation button is focused by default. + event.preventDefault(); + return; + } + if (event.key === "Escape" && !event.defaultPrevented) { + this.onCancel(); + } + break; + case "click": + if ( + event.target.classList.contains("cancel-button") || + event.currentTarget.classList.contains("dismiss-button") || + event.target.classList.contains("overlay") + ) { + this.onCancel(); + } else if (event.target.classList.contains("confirm-button")) { + this.onConfirm(); + } + } + } + + hide() { + setKeyboardAccessForNonDialogElements(true); + this._cancelButton.removeEventListener("click", this); + this._confirmButton.removeEventListener("click", this); + this._dismissButton.removeEventListener("click", this); + this._overlay.removeEventListener("click", this); + window.removeEventListener("keydown", this); + + this.hidden = true; + } + + show({ title, message, confirmButtonLabel }) { + setKeyboardAccessForNonDialogElements(false); + this.hidden = false; + + document.l10n.setAttributes(this._title, title); + document.l10n.setAttributes(this._message, message); + document.l10n.setAttributes(this._confirmButton, confirmButtonLabel); + + this._cancelButton.addEventListener("click", this); + this._confirmButton.addEventListener("click", this); + this._dismissButton.addEventListener("click", this); + this._overlay.addEventListener("click", this); + window.addEventListener("keydown", this); + + // For speed-of-use, focus the confirm button when the + // dialog loads. Showing the dialog itself provides enough + // of a buffer for accidental deletions. + this._confirmButton.focus(); + + this._promise = new Promise((resolve, reject) => { + this._resolve = resolve; + this._reject = reject; + }); + + return this._promise; + } + + onCancel() { + this._reject(); + this.hide(); + } + + onConfirm() { + this._resolve(); + this.hide(); + } +} +customElements.define("confirmation-dialog", ConfirmationDialog); diff --git a/browser/components/aboutlogins/content/components/fxaccounts-button.css b/browser/components/aboutlogins/content/components/fxaccounts-button.css new file mode 100644 index 0000000000..2e2ef7f080 --- /dev/null +++ b/browser/components/aboutlogins/content/components/fxaccounts-button.css @@ -0,0 +1,80 @@ +/* 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/. */ + +.logged-out-view, +.logged-in-view { + display: flex; + align-items: center; +} + +.fxaccounts-extra-text { + /* Only show at most 3 lines of text to limit the + text from overflowing the header. */ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + + color: var(--text-color-deemphasized); + text-align: end; +} + +.fxaccounts-extra-text, +.fxaccount-email, +.fxaccounts-enable-button { + font-size: 13px; +} + +@media (max-width: 830px) { + .fxaccounts-extra-text, + .fxaccount-email { + display: none; + } +} + +.fxaccount-avatar, +.fxaccounts-enable-button { + margin-inline-start: 9px; +} + +.fxaccounts-enable-button { + min-width: 120px; + padding-inline: 16px; + /* See bug 1626764: The width of button could go lesser than 120px in small window size which could wrap the texts into two lines in systems with different default fonts */ + flex-shrink: 0; +} + +.fxaccounts-avatar-button { + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.fxaccount-email { + vertical-align: middle; +} + +.fxaccount-avatar { + display: inline-block; + vertical-align: middle; + background-image: var(--avatar-url, + url(chrome://browser/skin/fxa/avatar-color.svg)); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 1000px; + width: 32px; + height: 32px; +} + +@media not (prefers-contrast) { + .fxaccounts-avatar-button:hover { + background-color: transparent !important; + } + + .fxaccounts-avatar-button:hover > .fxaccount-email { + text-decoration: underline; + } +} diff --git a/browser/components/aboutlogins/content/components/fxaccounts-button.mjs b/browser/components/aboutlogins/content/components/fxaccounts-button.mjs new file mode 100644 index 0000000000..d39969d726 --- /dev/null +++ b/browser/components/aboutlogins/content/components/fxaccounts-button.mjs @@ -0,0 +1,83 @@ +/* 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/. */ + +export default class FxAccountsButton extends HTMLElement { + connectedCallback() { + if (this.shadowRoot) { + return; + } + let template = document.querySelector("#fxaccounts-button-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(template.content.cloneNode(true)); + + this._avatarButton = shadowRoot.querySelector(".fxaccounts-avatar-button"); + this._extraText = shadowRoot.querySelector(".fxaccounts-extra-text"); + this._enableButton = shadowRoot.querySelector(".fxaccounts-enable-button"); + this._loggedOutView = shadowRoot.querySelector(".logged-out-view"); + this._loggedInView = shadowRoot.querySelector(".logged-in-view"); + this._emailText = shadowRoot.querySelector(".fxaccount-email"); + + this._avatarButton.addEventListener("click", this); + this._enableButton.addEventListener("click", this); + + this.render(); + } + + handleEvent(event) { + if (event.currentTarget == this._avatarButton) { + document.dispatchEvent( + new CustomEvent("AboutLoginsSyncOptions", { + bubbles: true, + }) + ); + return; + } + if (event.target == this._enableButton) { + document.dispatchEvent( + new CustomEvent("AboutLoginsSyncEnable", { + bubbles: true, + }) + ); + } + } + + render() { + this._loggedOutView.hidden = !!this._loggedIn; + this._loggedInView.hidden = !this._loggedIn; + this._emailText.textContent = this._email; + if (this._avatarURL) { + this._avatarButton.style.setProperty( + "--avatar-url", + `url(${this._avatarURL})` + ); + } else { + let defaultAvatar = "chrome://browser/skin/fxa/avatar-color.svg"; + this._avatarButton.style.setProperty( + "--avatar-url", + `url(${defaultAvatar})` + ); + } + } + + /** + * + * @param {object} state + * loggedIn: {Boolean} FxAccount authentication + * status. + * email: {String} Email address used with FxAccount. Must + * be empty if `loggedIn` is false. + * avatarURL: {String} URL of account avatar. Must + * be empty if `loggedIn` is false. + */ + updateState(state) { + this.hidden = !state.fxAccountsEnabled; + this._loggedIn = state.loggedIn; + this._email = state.email; + this._avatarURL = state.avatarURL; + + this.render(); + } +} +customElements.define("fxaccounts-button", FxAccountsButton); diff --git a/browser/components/aboutlogins/content/components/generic-dialog.css b/browser/components/aboutlogins/content/components/generic-dialog.css new file mode 100644 index 0000000000..d8fbbfe93c --- /dev/null +++ b/browser/components/aboutlogins/content/components/generic-dialog.css @@ -0,0 +1,65 @@ +/* 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/. */ + +.overlay { + position: fixed; + z-index: 1; + inset: 0; + /* TODO: this color is used in the about:preferences overlay, but + why isn't it declared as a variable? */ + background-color: rgba(0,0,0,0.5); + display: flex; +} + +.container { + z-index: 2; + position: relative; + display: grid; + grid-template-columns: 37px auto; + grid-template-rows: 32px auto 50px; + grid-gap: 5px; + align-items: center; + width: 580px; + height: 290px; + padding: 50px 50px 20px; + margin: auto; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + box-shadow: var(--shadow-30); + /* show a border in high contrast mode */ + outline: 1px solid transparent; +} + +::slotted([slot="dialog-icon"]) { + width: 32px; + height: 32px; + -moz-context-properties: fill; + fill: currentColor; +} + +::slotted([slot="dialog-title"]) { + font-size: 2.2em; + font-weight: 300; + user-select: none; + margin: 0; +} + +::slotted([slot="content"]) { + grid-column-start: 2; + align-self: baseline; + margin-top: 16px; + line-height: 1.4em; +} + +::slotted([slot="buttons"]) { + grid-column: 1 / 4; + grid-row-start: 3; + border-top: 1px solid var(--in-content-border-color); + padding-top: 12px; +} + +.dialog-body { + padding-block: 40px 16px; + padding-inline: 45px 32px; +} diff --git a/browser/components/aboutlogins/content/components/generic-dialog.mjs b/browser/components/aboutlogins/content/components/generic-dialog.mjs new file mode 100644 index 0000000000..8d9ddc9d36 --- /dev/null +++ b/browser/components/aboutlogins/content/components/generic-dialog.mjs @@ -0,0 +1,63 @@ +/* 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/. */ + +import { + setKeyboardAccessForNonDialogElements, + initDialog, +} from "../aboutLoginsUtils.mjs"; + +export default class GenericDialog extends HTMLElement { + constructor() { + super(); + this._promise = null; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + const shadowRoot = initDialog(this, "#generic-dialog-template"); + this._dismissButton = this.querySelector(".dismiss-button"); + this._overlay = shadowRoot.querySelector(".overlay"); + } + + handleEvent(event) { + switch (event.type) { + case "keydown": + if (event.key === "Escape" && !event.defaultPrevented) { + this.hide(); + } + break; + case "click": + if ( + event.currentTarget.classList.contains("dismiss-button") || + event.target.classList.contains("overlay") + ) { + this.hide(); + } + } + } + + show() { + setKeyboardAccessForNonDialogElements(false); + this.hidden = false; + this.parentNode.host.hidden = false; + + this._dismissButton.addEventListener("click", this); + this._overlay.addEventListener("click", this); + window.addEventListener("keydown", this); + } + + hide() { + setKeyboardAccessForNonDialogElements(true); + this._dismissButton.removeEventListener("click", this); + this._overlay.removeEventListener("click", this); + window.removeEventListener("keydown", this); + + this.hidden = true; + this.parentNode.host.hidden = true; + } +} + +customElements.define("generic-dialog", GenericDialog); diff --git a/browser/components/aboutlogins/content/components/import-details-row.mjs b/browser/components/aboutlogins/content/components/import-details-row.mjs new file mode 100644 index 0000000000..13fe40da59 --- /dev/null +++ b/browser/components/aboutlogins/content/components/import-details-row.mjs @@ -0,0 +1,60 @@ +/* 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/. */ + +const resultToUiData = { + no_change: { + message: "about-logins-import-report-row-description-no-change", + }, + modified: { + message: "about-logins-import-report-row-description-modified", + }, + added: { + message: "about-logins-import-report-row-description-added", + }, + error: { + message: "about-logins-import-report-row-description-error", + isError: true, + }, + error_multiple_values: { + message: "about-logins-import-report-row-description-error-multiple-values", + isError: true, + }, + error_missing_field: { + message: "about-logins-import-report-row-description-error-missing-field", + isError: true, + }, +}; + +export default class ImportDetailsRow extends HTMLElement { + constructor(number, reportRow) { + super(); + this._login = reportRow; + + let rowElement = document + .querySelector("#import-details-row-template") + .content.cloneNode(true); + + const uiData = resultToUiData[reportRow.result]; + if (uiData.isError) { + this.classList.add("error"); + } + const rowCount = rowElement.querySelector(".row-count"); + const rowDetails = rowElement.querySelector(".row-details"); + while (rowElement.childNodes.length) { + this.appendChild(rowElement.childNodes[0]); + } + document.l10n.connectRoot(this); + document.l10n.setAttributes( + rowCount, + "about-logins-import-report-row-index", + { + number, + } + ); + document.l10n.setAttributes(rowDetails, uiData.message, { + field: reportRow.field_name, + }); + } +} +customElements.define("import-details-row", ImportDetailsRow); diff --git a/browser/components/aboutlogins/content/components/import-error-dialog.css b/browser/components/aboutlogins/content/components/import-error-dialog.css new file mode 100644 index 0000000000..6fc2e945e4 --- /dev/null +++ b/browser/components/aboutlogins/content/components/import-error-dialog.css @@ -0,0 +1,28 @@ +/* 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/. */ + +.content { + display: flex; + flex-direction: column; + grid-area: 2 / 2 / 3 / 4; + align-items: flex-start; +} + +.error-title { + font-weight: 600; + margin-top: 20px; +} + +.no-logins { + margin-top: 25px; +} + +.error-learn-more-link { + font-weight: 600; +} + +.warning-icon { + -moz-context-properties: fill; + fill: #FFBF00; +} diff --git a/browser/components/aboutlogins/content/components/import-error-dialog.mjs b/browser/components/aboutlogins/content/components/import-error-dialog.mjs new file mode 100644 index 0000000000..31ad29512f --- /dev/null +++ b/browser/components/aboutlogins/content/components/import-error-dialog.mjs @@ -0,0 +1,59 @@ +/* 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/. */ + +import { initDialog } from "../aboutLoginsUtils.mjs"; + +export default class ImportErrorDialog extends HTMLElement { + constructor() { + super(); + this._promise = null; + this._errorMessages = {}; + this._errorMessages.CONFLICTING_VALUES_ERROR = { + title: "about-logins-import-dialog-error-conflicting-values-title", + description: + "about-logins-import-dialog-error-conflicting-values-description", + }; + this._errorMessages.FILE_FORMAT_ERROR = { + title: "about-logins-import-dialog-error-file-format-title", + description: "about-logins-import-dialog-error-file-format-description", + }; + this._errorMessages.FILE_PERMISSIONS_ERROR = { + title: "about-logins-import-dialog-error-file-permission-title", + description: + "about-logins-import-dialog-error-file-permission-description", + }; + this._errorMessages.UNABLE_TO_READ_ERROR = { + title: "about-logins-import-dialog-error-unable-to-read-title", + description: + "about-logins-import-dialog-error-unable-to-read-description", + }; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + const shadowRoot = initDialog(this, "#import-error-dialog-template"); + this._titleElement = shadowRoot.querySelector(".error-title"); + this._descriptionElement = shadowRoot.querySelector(".error-description"); + this._genericDialog = this.shadowRoot.querySelector("generic-dialog"); + this._focusedElement = this.shadowRoot.querySelector("a"); + const tryImportAgain = this.shadowRoot.querySelector(".try-import-again"); + tryImportAgain.addEventListener("click", () => { + this._genericDialog.hide(); + document.dispatchEvent( + new CustomEvent("AboutLoginsImportFromFile", { bubbles: true }) + ); + }); + } + + show(errorType) { + const { title, description } = this._errorMessages[errorType]; + document.l10n.setAttributes(this._titleElement, title); + document.l10n.setAttributes(this._descriptionElement, description); + this._genericDialog.show(); + window.AboutLoginsUtils.setFocus(this._focusedElement); + } +} +customElements.define("import-error-dialog", ImportErrorDialog); diff --git a/browser/components/aboutlogins/content/components/import-summary-dialog.css b/browser/components/aboutlogins/content/components/import-summary-dialog.css new file mode 100644 index 0000000000..20dd987958 --- /dev/null +++ b/browser/components/aboutlogins/content/components/import-summary-dialog.css @@ -0,0 +1,42 @@ +/* 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/. */ + +.content { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.import-summary { + display: grid; + grid-template-columns: max-content max-content max-content; +} + +.import-summary > * > span { + margin-block: 0 2px; + margin-inline: 0 10px; +} + +.import-items-row { + grid-column: 1 / 4; + display: grid; + grid-template-columns: subgrid; +} + +.result-count { + text-align: end; + font-weight: bold; +} + +.result-meta { + font-style: italic; +} +.import-items-errors .result-meta { + color: var(--dialog-warning-text-color); +} + +.open-detailed-report { + margin-block-start: 30px; + font-weight: 600; +} diff --git a/browser/components/aboutlogins/content/components/import-summary-dialog.mjs b/browser/components/aboutlogins/content/components/import-summary-dialog.mjs new file mode 100644 index 0000000000..76d19b0190 --- /dev/null +++ b/browser/components/aboutlogins/content/components/import-summary-dialog.mjs @@ -0,0 +1,72 @@ +/* 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/. */ + +import { initDialog } from "../aboutLoginsUtils.mjs"; + +export default class ImportSummaryDialog extends HTMLElement { + constructor() { + super(); + this._promise = null; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + initDialog(this, "#import-summary-dialog-template"); + this._added = this.shadowRoot.querySelector(".import-items-added"); + this._modified = this.shadowRoot.querySelector(".import-items-modified"); + this._noChange = this.shadowRoot.querySelector(".import-items-no-change"); + this._error = this.shadowRoot.querySelector(".import-items-errors"); + this._genericDialog = this.shadowRoot.querySelector("generic-dialog"); + } + + show({ logins }) { + const report = { + added: 0, + modified: 0, + no_change: 0, + error: 0, + }; + for (let loginRow of logins) { + if (loginRow.result.includes("error")) { + report.error++; + } else { + report[loginRow.result]++; + } + } + this._updateCount( + report.added, + this._added, + "about-logins-import-dialog-items-added" + ); + this._updateCount( + report.modified, + this._modified, + "about-logins-import-dialog-items-modified" + ); + this._updateCount( + report.no_change, + this._noChange, + "about-logins-import-dialog-items-no-change" + ); + this._updateCount( + report.error, + this._error, + "about-logins-import-dialog-items-error" + ); + this._noChange.querySelector(".result-meta").hidden = + report.no_change === 0; + this._error.querySelector(".result-meta").hidden = report.error === 0; + this._genericDialog.show(); + window.AboutLoginsUtils.setFocus(this._genericDialog._dismissButton); + } + + _updateCount(count, component, message) { + if (count != document.l10n.getAttributes(component).args.count) { + document.l10n.setAttributes(component, message, { count }); + } + } +} +customElements.define("import-summary-dialog", ImportSummaryDialog); diff --git a/browser/components/aboutlogins/content/components/login-filter.css b/browser/components/aboutlogins/content/components/login-filter.css new file mode 100644 index 0000000000..f7db0e6770 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-filter.css @@ -0,0 +1,29 @@ +/* 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/. */ + +.filter[type="text"] { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.4; + background-image: url("chrome://global/skin/icons/search-glass.svg"); + background-position: 8px center; + background-repeat: no-repeat; + background-size: 16px; + text-align: match-parent; + width: 100%; + margin: 0; + box-sizing: border-box; + padding-block: 6px; +} + +:host(:dir(ltr)) .filter { + /* We use separate RTL rules over logical properties since we want the visual direction + to be independent from the user input direction */ + padding-left: 32px; +} + +:host(:dir(rtl)) .filter { + background-position-x: right 8px; + padding-right: 32px; +} diff --git a/browser/components/aboutlogins/content/components/login-filter.mjs b/browser/components/aboutlogins/content/components/login-filter.mjs new file mode 100644 index 0000000000..e5b89327d6 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-filter.mjs @@ -0,0 +1,99 @@ +/* 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/. */ + +import { recordTelemetryEvent } from "../aboutLoginsUtils.mjs"; + +export default class LoginFilter extends HTMLElement { + get #loginList() { + return document.querySelector("login-list"); + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + + let loginFilterTemplate = document.querySelector("#login-filter-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(loginFilterTemplate.content.cloneNode(true)); + + this._input = this.shadowRoot.querySelector("input"); + + this.addEventListener("input", this); + this._input.addEventListener("keydown", this); + window.addEventListener("AboutLoginsFilterLogins", this); + } + + focus() { + this._input.focus(); + } + + handleEvent(event) { + switch (event.type) { + case "AboutLoginsFilterLogins": + this.#filterLogins(event.detail); + break; + case "input": + this.#input(event.originalTarget.value); + break; + case "keydown": + this.#keyDown(event); + break; + } + } + + #filterLogins(filterText) { + if (this.value != filterText) { + this.value = filterText; + } + } + + #input(value) { + this._dispatchFilterEvent(value); + } + + #keyDown(e) { + switch (e.code) { + case "ArrowUp": + e.preventDefault(); + this.#loginList.selectPrevious(); + break; + case "ArrowDown": + e.preventDefault(); + this.#loginList.selectNext(); + break; + case "Escape": + e.preventDefault(); + this.value = ""; + break; + case "Enter": + e.preventDefault(); + this.#loginList.clickSelected(); + break; + } + } + + get value() { + return this._input.value; + } + + set value(val) { + this._input.value = val; + this._dispatchFilterEvent(val); + } + + _dispatchFilterEvent(value) { + this.dispatchEvent( + new CustomEvent("AboutLoginsFilterLogins", { + bubbles: true, + composed: true, + detail: value, + }) + ); + + recordTelemetryEvent({ object: "list", method: "filter" }); + } +} +customElements.define("login-filter", LoginFilter); diff --git a/browser/components/aboutlogins/content/components/login-intro.css b/browser/components/aboutlogins/content/components/login-intro.css new file mode 100644 index 0000000000..3c5ecdc577 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-intro.css @@ -0,0 +1,27 @@ +/* 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/. */ + +:host { + padding: 60px; + display: flex; + flex-direction: column; + align-items: center; +} + +.heading { + font-size: 1.5em; +} + +section { + line-height: 2; +} + +.description { + font-weight: 600; + margin-bottom: 0; +} + +.illustration.logged-in { + opacity: .5; +} diff --git a/browser/components/aboutlogins/content/components/login-intro.mjs b/browser/components/aboutlogins/content/components/login-intro.mjs new file mode 100644 index 0000000000..682ddb32d8 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-intro.mjs @@ -0,0 +1,67 @@ +/* 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/. */ + +export default class LoginIntro extends HTMLElement { + connectedCallback() { + if (this.shadowRoot) { + return; + } + + let loginIntroTemplate = document.querySelector("#login-intro-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(loginIntroTemplate.content.cloneNode(true)); + } + + focus() { + let helpLink = this.shadowRoot.querySelector(".intro-help-link"); + helpLink.focus(); + } + + handleEvent(event) { + if ( + event.currentTarget.classList.contains("intro-import-text") && + event.target.localName == "a" + ) { + let eventName = + event.target.dataset.l10nName == "import-file-link" + ? "AboutLoginsImportFromFile" + : "AboutLoginsImportFromBrowser"; + document.dispatchEvent( + new CustomEvent(eventName, { + bubbles: true, + }) + ); + } + event.preventDefault(); + } + + updateState(syncState) { + let l10nId = syncState.loggedIn + ? "about-logins-login-intro-heading-logged-in" + : "about-logins-login-intro-heading-logged-out2"; + document.l10n.setAttributes( + this.shadowRoot.querySelector(".heading"), + l10nId + ); + + this.shadowRoot + .querySelector(".illustration") + .classList.toggle("logged-in", syncState.loggedIn); + let supportURL = + window.AboutLoginsUtils.supportBaseURL + + "password-manager-remember-delete-edit-logins"; + this.shadowRoot + .querySelector(".intro-help-link") + .setAttribute("href", supportURL); + + let importClass = window.AboutLoginsUtils.fileImportEnabled + ? ".intro-import-text.file-import" + : ".intro-import-text.no-file-import"; + let importText = this.shadowRoot.querySelector(importClass); + importText.addEventListener("click", this); + importText.hidden = !window.AboutLoginsUtils.importVisible; + } +} +customElements.define("login-intro", LoginIntro); diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css new file mode 100644 index 0000000000..e11cb01700 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-item.css @@ -0,0 +1,444 @@ +/* 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/. */ + + :host { + overflow: hidden; + + --reveal-checkbox-opacity: .8; + --reveal-checkbox-opacity-hover: .6; + --reveal-checkbox-opacity-active: 1; + --success-color: #2AC3A2; + --edit-delete-button-color: #4a4a4f; +} + +/* Only overwrite the deemphasized text color in non-dark mode. */ +@media not (prefers-color-scheme: dark) { + :host { + --text-color-deemphasized: #737373; + } +} + +@media (prefers-color-scheme: dark) { + :host { + --reveal-checkbox-opacity: .8; + --reveal-checkbox-opacity-hover: 1; + --reveal-checkbox-opacity-active: .6; + --success-color: #54FFBD; + --edit-delete-button-color: #cfcfd1; + } +} + +.container { + overflow: auto; + padding: 0 40px; + box-sizing: border-box; + height: 100%; +} + +@media (max-width: 830px) { + .container { + padding-inline: 20px; + } +} + +.column { + min-height: 100%; + max-width: 700px; + display: flex; + flex-direction: column; +} + +button { + min-width: 100px; +} + +form { + flex-grow: 1; +} + +:host([data-editing]) .edit-button, +:host([data-editing]) .copy-button, +:host([data-is-new-login]) .delete-button, +:host([data-is-new-login]) .origin-saved-value, +:host([data-is-new-login]) login-timeline, +:host([data-is-new-login]) .login-item-title, +:host(:not([data-is-new-login])) .new-login-title, +:host(:not([data-editing])) .form-actions-row { + display: none; +} + +input[type="password"], +input[type="text"], +input[type="url"] { + text-align: match-parent !important; /* override `all: unset` in the rule below */ +} + +:host(:not([data-editing])) input[type="password"]:read-only, +input[type="text"]:read-only, +input[type="url"]:read-only { + all: unset; + font-size: 1.1em; + display: inline-block; + background-color: transparent !important; /* override common.inc.css */ + text-overflow: ellipsis; + overflow: hidden; + width: 100%; +} + +/* We can't use `margin-inline-start` here because we force + * the input to have dir="ltr", so we set the margin manually + * using the parent element's directionality. */ +.detail-cell:dir(ltr) input:not([type="checkbox"]) { + margin-left: 0; +} + +.detail-cell:dir(rtl) input:not([type="checkbox"]) { + margin-right: 0; +} + +.save-changes-button { + margin-inline-start: 0; /* Align the button on the start side */ +} + +.header { + display: flex; + align-items: center; + margin-bottom: 40px; +} + +.title { + margin-block: 0; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.delete-button, +.edit-button { + color: var(--edit-delete-button-color); + background-repeat: no-repeat; + background-position: 8px; + -moz-context-properties: fill; + fill: currentColor; + min-width: auto; + /* See bug 1627164: In CJK locales, line break could happen in any letter of the button. The fix here is to explicitly specify flex property so that the button couldn't grow or shrink. */ + flex: 0 0 auto; +} + +.delete-button:dir(rtl), +.edit-button:dir(rtl) { + background-position-x: right 8px; +} + +.delete-button { + background-image: url("chrome://global/skin/icons/delete.svg"); + padding-inline-start: 30px; /* 8px on each side, and 14px for icon width */ +} + +.edit-button { + background-image: url("chrome://global/skin/icons/edit.svg"); + padding-inline-start: 32px; /* 8px on each side, and 16px for icon width */ +} + +input[type="url"]:read-only { + color: var(--in-content-link-color) !important; + cursor: pointer; +} + +input[type="url"]:read-only:hover { + color: var(--in-content-link-color-hover) !important; + text-decoration: underline; +} + +input[type="url"]:read-only:hover:active { + color: var(--in-content-link-color-active) !important; +} + +input[type = "url"]:focus:not(:-moz-ui-invalid):invalid ~ .tooltip-container { + display: block; +} + +input[type = "url"]:focus:-moz-ui-invalid:not(:placeholder-shown) ~ .tooltip-container { + display: block; +} + +.tooltip-container { + display: none; + position: absolute; + inset-inline-start: 315px; + width: 232px; + box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.18); + top: 0; +} + +.tooltip-message { + margin: 0; + font-size: 14px; +} + +.arrow-box { + position: relative; + padding: 12px; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-border-color); + border-radius: 4px; +} + +.arrow-box::before, +.arrow-box::after { + inset-inline-end: 100%; + top: 40px; /* This allows the arrow to stay in the correct position, even if the text length is changed */ + border: solid transparent; + content: ""; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.arrow-box::after { + border-inline-end-color: var(--in-content-box-background); + border-width: 10px; + margin-top: -10px; +} +.arrow-box::before { + border-inline-end-color: var(--in-content-border-color); + border-width: 11px; + margin-top: -11px; +} + +.reveal-password-wrapper { + display: flex; + align-items: center; + justify-content: space-between; +} + +.detail-grid { + display: grid; + grid-template-columns: minmax(240px, max-content) auto; + grid-template-rows: auto; + column-gap: 20px; + row-gap: 40px; + justify-content: start; +} + +:host([data-editing]) .detail-grid { + grid-template-columns: auto; +} + +.detail-grid > .detail-row:not([hidden]) { + display: contents; +} + +.detail-grid > .detail-row > .detail-cell { + grid-column: 1; +} + +.detail-grid > .detail-row > .copy-button { + grid-column: 2; + margin-inline-start: 0; /* Reset button's margin so it doesn't affect the overall grid's width */ + justify-self: start; + align-self: end; +} + +.detail-row { + display: flex; + position: relative; /* Allows for the hint message to be positioned correctly */ +} + +.detail-grid, +.detail-row, +.form-actions-row { + margin-bottom: 40px; +} + +.detail-cell { + flex-grow: 1; + min-width: 0; /* Allow long passwords to collapse down to flex item width */ +} + +.field-label { + display: block; + font-size: smaller; + color: var(--text-color-deemphasized); + margin-bottom: 8px; +} + +moz-button-group, +:host([data-editing]) .detail-cell input:read-write:not([type="checkbox"]), +:host([data-editing]) input[type="password"]:read-only { + width: 298px; + box-sizing: border-box; +} + +.copy-button { + margin-bottom: 0; /* Align button at the bottom of the row */ +} + +.copy-button:not([data-copied]) .copied-button-text, +.copy-button[data-copied] .copy-button-text { + display: none; +} + +.copy-button[data-copied] { + color: var(--success-color) !important; /* override common.css */ + background-color: transparent; + opacity: 1; /* override common.css fading out disabled buttons */ +} + +.copy-button[data-copied]:-moz-focusring { + outline-width: 0; + box-shadow: none; +} + +.copied-button-text { + background-image: url(chrome://global/skin/icons/check.svg); + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + padding-inline-start: 22px; +} + +.copied-button-text:dir(rtl) { + background-position-x: right; +} + +input.password-display, +input[name="password"] { + font-family: monospace !important; /* override `all: unset` in the rule above */ +} + +.reveal-password-checkbox { + /* !important is needed to override common.css styling for checkboxes */ + background-color: transparent !important; + border-width: 0 !important; + background-image: url("resource://gre-resources/password.svg") !important; + margin-inline: 10px 0 !important; + cursor: pointer; + -moz-context-properties: fill; + fill: currentColor !important; + color: inherit !important; + opacity: var(--reveal-checkbox-opacity); + flex-shrink: 0; +} + +.reveal-password-checkbox:hover { + opacity: var(--reveal-checkbox-opacity-hover); +} + +.reveal-password-checkbox:hover:active { + opacity: var(--reveal-checkbox-opacity-active); +} + +.reveal-password-checkbox:checked { + background-image: url("resource://gre-resources/password-hide.svg") !important; +} + +.login-item-favicon { + margin-inline-end: 12px; + height: 24px; + width: 24px; + flex-shrink: 0; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.75; +} + +.vulnerable-alert, +.breach-alert { + border-radius: 4px; + border: 1px solid var(--in-content-border-color); + box-shadow: 0 2px 8px 0 var(--grey-90-a10); + font-size: .9em; + line-height: 1.4; + padding-block: 12px; + padding-inline: 64px 32px; + margin-block-end: 40px; + position: relative; +} + +.breach-alert { + background-color: var(--red-70); + color: #fff; +} + +.vulnerable-alert { + background-color: var(--in-content-box-background); + color: var(--in-content-text-color); +} + +.alert-title { + font-size: 22px; + font-weight: normal; + line-height: 1em; + margin-block: 0 12px; +} + +.alert-date { + display: block; + font-weight: 600; +} + +.alert-link:visited, +.alert-link { + font-weight: 600; + overflow-wrap: anywhere; +} + +.breach-alert > .alert-link:visited, +.breach-alert > .alert-link { + color: inherit; + text-decoration: underline; +} + +.alert-icon { + position: absolute; + inset-block-start: 16px; + inset-inline-start: 32px; + -moz-context-properties: fill; + fill: currentColor; + width: 24px; +} + +.alert-learn-more-link:hover, +.alert-learn-more-link:visited, +.alert-learn-more-link { + position: absolute; + inset-block-start: 16px; + inset-inline-end: 32px; + color: inherit; + font-size: 13px; +} + +.vulnerable-alert > .alert-learn-more-link { + color: var(--text-color-deemphasized); +} + +.error-message { + color: #fff; + background-color: var(--red-60); + border: 1px solid transparent; + padding-block: 6px; + display: inline-block; + padding-inline: 32px 16px; + background-image: url("chrome://global/skin/icons/warning.svg"); + background-repeat: no-repeat; + background-position: left 10px center; + -moz-context-properties: fill; + fill: currentColor; + margin-bottom: 38px; +} + +.error-message:dir(rtl) { + background-position-x: right 10px; +} + +.error-message-link > a, +.error-message-link > a:hover, +.error-message-link > a:hover:active { + color: currentColor; + text-decoration: underline; + font-weight: 600; +} diff --git a/browser/components/aboutlogins/content/components/login-item.mjs b/browser/components/aboutlogins/content/components/login-item.mjs new file mode 100644 index 0000000000..35bca46163 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-item.mjs @@ -0,0 +1,952 @@ +/* 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/. */ + +import { + CONCEALED_PASSWORD_TEXT, + recordTelemetryEvent, + promptForPrimaryPassword, +} from "../aboutLoginsUtils.mjs"; + +export default class LoginItem extends HTMLElement { + /** + * The number of milliseconds to display the "Copied" success message + * before reverting to the normal "Copy" button. + */ + static get COPY_BUTTON_RESET_TIMEOUT() { + return 5000; + } + + constructor() { + super(); + this._login = {}; + this._error = null; + this._copyUsernameTimeoutId = 0; + this._copyPasswordTimeoutId = 0; + } + + connectedCallback() { + if (this.shadowRoot) { + this.render(); + return; + } + + let loginItemTemplate = document.querySelector("#login-item-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(loginItemTemplate.content.cloneNode(true)); + + this._cancelButton = this.shadowRoot.querySelector(".cancel-button"); + this._confirmDeleteDialog = document.querySelector("confirm-delete-dialog"); + this._copyPasswordButton = this.shadowRoot.querySelector( + ".copy-password-button" + ); + this._copyUsernameButton = this.shadowRoot.querySelector( + ".copy-username-button" + ); + this._deleteButton = this.shadowRoot.querySelector(".delete-button"); + this._editButton = this.shadowRoot.querySelector(".edit-button"); + this._errorMessage = this.shadowRoot.querySelector(".error-message"); + this._errorMessageLink = this._errorMessage.querySelector( + ".error-message-link" + ); + this._errorMessageText = this._errorMessage.querySelector( + ".error-message-text" + ); + this._form = this.shadowRoot.querySelector("form"); + this._originInput = this.shadowRoot.querySelector("input[name='origin']"); + this._originDisplayInput = + this.shadowRoot.querySelector("a[name='origin']"); + this._usernameInput = this.shadowRoot.querySelector( + "input[name='username']" + ); + // type=password field for display which only ever contains spaces the correct + // length of the password. + this._passwordDisplayInput = this.shadowRoot.querySelector( + "input.password-display" + ); + // type=text field for editing the password with the actual password value. + this._passwordInput = this.shadowRoot.querySelector( + "input[name='password']" + ); + this._revealCheckbox = this.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + this._saveChangesButton = this.shadowRoot.querySelector( + ".save-changes-button" + ); + this._favicon = this.shadowRoot.querySelector(".login-item-favicon"); + this._title = this.shadowRoot.querySelector(".login-item-title"); + this._breachAlert = this.shadowRoot.querySelector(".breach-alert"); + this._breachAlertLink = this._breachAlert.querySelector(".alert-link"); + this._breachAlertDate = this._breachAlert.querySelector(".alert-date"); + this._vulnerableAlert = this.shadowRoot.querySelector(".vulnerable-alert"); + this._vulnerableAlertLink = + this._vulnerableAlert.querySelector(".alert-link"); + this._vulnerableAlertLearnMoreLink = this._vulnerableAlert.querySelector( + ".alert-learn-more-link" + ); + + this.render(); + + this._cancelButton.addEventListener("click", this); + this._copyPasswordButton.addEventListener("click", this); + this._copyUsernameButton.addEventListener("click", this); + this._deleteButton.addEventListener("click", this); + this._editButton.addEventListener("click", this); + this._errorMessageLink.addEventListener("click", this); + this._form.addEventListener("submit", this); + this._originInput.addEventListener("blur", this); + this._originInput.addEventListener("click", this); + this._originInput.addEventListener("mousedown", this, true); + this._originInput.addEventListener("auxclick", this); + this._originDisplayInput.addEventListener("click", this); + this._revealCheckbox.addEventListener("click", this); + this._vulnerableAlertLearnMoreLink.addEventListener("click", this); + + this._passwordInput.addEventListener("focus", this); + this._passwordInput.addEventListener("blur", this); + this._passwordDisplayInput.addEventListener("focus", this); + this._passwordDisplayInput.addEventListener("blur", this); + + window.addEventListener("AboutLoginsInitialLoginSelected", this); + window.addEventListener("AboutLoginsLoginSelected", this); + window.addEventListener("AboutLoginsShowBlankLogin", this); + window.addEventListener("AboutLoginsRemaskPassword", this); + } + + focus() { + if (!this._editButton.disabled) { + this._editButton.focus(); + } else if (!this._deleteButton.disabled) { + this._deleteButton.focus(); + } else { + this._originInput.focus(); + } + } + + async render( + { onlyUpdateErrorsAndAlerts } = { onlyUpdateErrorsAndAlerts: false } + ) { + if (this._error) { + if (this._error.errorMessage.includes("This login already exists")) { + document.l10n.setAttributes( + this._errorMessageLink, + "about-logins-error-message-duplicate-login-with-link", + { + loginTitle: this._error.login.title, + } + ); + this._errorMessageLink.dataset.errorGuid = + this._error.existingLoginGuid; + this._errorMessageText.hidden = true; + this._errorMessageLink.hidden = false; + } else { + this._errorMessageText.hidden = false; + this._errorMessageLink.hidden = true; + } + } + this._errorMessage.hidden = !this._error; + + this._breachAlert.hidden = + !this._breachesMap || !this._breachesMap.has(this._login.guid); + if (!this._breachAlert.hidden) { + const breachDetails = this._breachesMap.get(this._login.guid); + this._breachAlertLink.href = this._login.origin; + document.l10n.setAttributes( + this._breachAlertLink, + "about-logins-breach-alert-link", + { hostname: this._login.displayOrigin } + ); + if (breachDetails.BreachDate) { + let breachDate = new Date(breachDetails.BreachDate); + this._breachAlertDate.hidden = isNaN(breachDate); + if (!isNaN(breachDate)) { + document.l10n.setAttributes( + this._breachAlertDate, + "about-logins-breach-alert-date", + { + date: breachDate.getTime(), + } + ); + } + } + } + this._vulnerableAlert.hidden = + !this._vulnerableLoginsMap || + !this._vulnerableLoginsMap.has(this._login.guid) || + !this._breachAlert.hidden; + if (!this._vulnerableAlert.hidden) { + this._vulnerableAlertLink.href = this._login.origin; + document.l10n.setAttributes( + this._vulnerableAlertLink, + "about-logins-vulnerable-alert-link", + { + hostname: this._login.displayOrigin, + } + ); + this._vulnerableAlertLearnMoreLink.setAttribute( + "href", + window.AboutLoginsUtils.supportBaseURL + "lockwise-alerts" + ); + } + if (onlyUpdateErrorsAndAlerts) { + return; + } + + this._favicon.src = `page-icon:${this._login.origin}`; + this._title.textContent = this._login.title; + this._title.title = this._login.title; + this._originInput.defaultValue = this._login.origin || ""; + if (this._login.origin) { + // Creates anchor element with origin URL + this._originDisplayInput.href = this._login.origin || ""; + this._originDisplayInput.innerText = this._login.origin || ""; + } + this._usernameInput.defaultValue = this._login.username || ""; + if (this._login.password) { + // We use .value instead of .defaultValue since the latter updates the + // content attribute making the password easily viewable with Inspect + // Element even when Primary Password is enabled. This is only run when + // the password is non-empty since setting the field to an empty value + // would mark the field as 'dirty' for form validation and thus trigger + // the error styling since the password field is 'required'. + // This element is only in the document while unmasked or editing. + this._passwordInput.value = this._login.password; + + // In masked non-edit mode we use a different "display" element to render + // the masked password so that one cannot simply remove/change + // @type=password to reveal the real password. + this._passwordDisplayInput.value = CONCEALED_PASSWORD_TEXT; + } + + if (this.dataset.editing) { + this._usernameInput.removeAttribute("data-l10n-id"); + this._usernameInput.placeholder = ""; + } else { + document.l10n.setAttributes( + this._usernameInput, + "about-logins-login-item-username" + ); + } + this._copyUsernameButton.disabled = !this._login.username; + document.l10n.setAttributes( + this._saveChangesButton, + this.dataset.isNewLogin + ? "login-item-save-new-button" + : "login-item-save-changes-button" + ); + this._updatePasswordRevealState(); + this._updateOriginDisplayState(); + this.#updateTimeline(); + } + + #updateTimeline() { + let timeline = this.shadowRoot.querySelector("login-timeline"); + timeline.hidden = !this._login.guid; + timeline.history = [ + { + actionId: "login-item-timeline-action-created", + time: this._login.timeCreated, + }, + { + actionId: "login-item-timeline-action-updated", + time: this._login.timePasswordChanged, + }, + { + actionId: "login-item-timeline-action-used", + time: this._login.timeLastUsed, + }, + ]; + } + + setBreaches(breachesByLoginGUID) { + this._internalSetMonitorData("_breachesMap", breachesByLoginGUID); + } + + updateBreaches(breachesByLoginGUID) { + this._internalUpdateMonitorData("_breachesMap", breachesByLoginGUID); + } + + setVulnerableLogins(vulnerableLoginsByLoginGUID) { + this._internalSetMonitorData( + "_vulnerableLoginsMap", + vulnerableLoginsByLoginGUID + ); + } + + updateVulnerableLogins(vulnerableLoginsByLoginGUID) { + this._internalUpdateMonitorData( + "_vulnerableLoginsMap", + vulnerableLoginsByLoginGUID + ); + } + + _internalSetMonitorData(internalMemberName, mapByLoginGUID) { + this[internalMemberName] = mapByLoginGUID; + this.render({ onlyUpdateErrorsAndAlerts: true }); + } + + _internalUpdateMonitorData(internalMemberName, mapByLoginGUID) { + if (!this[internalMemberName]) { + this[internalMemberName] = new Map(); + } + for (const [guid, data] of [...mapByLoginGUID]) { + if (data) { + this[internalMemberName].set(guid, data); + } else { + this[internalMemberName].delete(guid); + } + } + this._internalSetMonitorData(internalMemberName, this[internalMemberName]); + } + + showLoginItemError(error) { + this._error = error; + this.render(); + } + + async handleEvent(event) { + switch (event.type) { + case "AboutLoginsInitialLoginSelected": { + this.setLogin(event.detail, { skipFocusChange: true }); + break; + } + case "AboutLoginsLoginSelected": { + this.confirmPendingChangesOnEvent(event, event.detail); + break; + } + case "AboutLoginsShowBlankLogin": { + this.confirmPendingChangesOnEvent(event, {}); + break; + } + case "auxclick": { + if (event.button == 1) { + this._handleOriginClick(); + } + break; + } + case "blur": { + // TODO(Bug 1838494): Remove this if block + // This is a temporary fix until Bug 1750072 lands + const focusCheckboxNext = event.relatedTarget === this._revealCheckbox; + if (focusCheckboxNext) { + return; + } + + if (this.dataset.editing && event.target === this._passwordInput) { + this._revealCheckbox.checked = false; + this._updatePasswordRevealState(); + } + + if (event.target === this._passwordDisplayInput) { + this._revealCheckbox.checked = !!this.dataset.editing; + this._updatePasswordRevealState(); + } + + // Add https:// prefix if one was not provided. + let originValue = this._originInput.value.trim(); + if (!originValue) { + return; + } + + if (!originValue.match(/:\/\//)) { + this._originInput.value = "https://" + originValue; + } + + break; + } + case "focus": { + // TODO(Bug 1838494): Remove this if block + // This is a temporary fix until Bug 1750072 lands + const focusFromCheckbox = event.relatedTarget === this._revealCheckbox; + const isEditingMode = this.dataset.editing || this.dataset.isNewLogin; + if (focusFromCheckbox && isEditingMode) { + this._passwordInput.type = this._revealCheckbox.checked + ? "text" + : "password"; + return; + } + + if (event.target === this._passwordDisplayInput) { + this._revealCheckbox.checked = !!this.dataset.editing; + this._updatePasswordRevealState(); + } + + break; + } + case "click": { + let classList = event.currentTarget.classList; + if (classList.contains("reveal-password-checkbox")) { + // TODO(Bug 1838494): Remove this if block + // This is a temporary fix until Bug 1750072 lands + if (this.dataset.editing || this.dataset.isNewLogin) { + this._passwordDisplayInput.replaceWith(this._passwordInput); + this._passwordInput.type = "text"; + this._passwordInput.focus(); + return; + } + // We prompt for the primary password when entering edit mode already. + if (this._revealCheckbox.checked && !this.dataset.editing) { + let primaryPasswordAuth = await promptForPrimaryPassword( + "about-logins-reveal-password-os-auth-dialog-message" + ); + if (!primaryPasswordAuth) { + this._revealCheckbox.checked = false; + return; + } + } + this._updatePasswordRevealState(); + + let method = this._revealCheckbox.checked ? "show" : "hide"; + this._recordTelemetryEvent({ object: "password", method }); + return; + } + + if (classList.contains("cancel-button")) { + let wasExistingLogin = !!this._login.guid; + if (wasExistingLogin) { + if (this.hasPendingChanges()) { + this.showConfirmationDialog("discard-changes", () => { + this.setLogin(this._login); + }); + } else { + this.setLogin(this._login); + } + } else if (!this.hasPendingChanges()) { + window.dispatchEvent(new CustomEvent("AboutLoginsClearSelection")); + this._recordTelemetryEvent({ + object: "new_login", + method: "cancel", + }); + + this.setLogin(this._login, { skipFocusChange: true }); + this._toggleEditing(false); + this.render(); + } else { + this.showConfirmationDialog("discard-changes", () => { + window.dispatchEvent( + new CustomEvent("AboutLoginsClearSelection") + ); + + this.setLogin({}, { skipFocusChange: true }); + this._toggleEditing(false); + this.render(); + }); + } + + return; + } + if ( + classList.contains("copy-password-button") || + classList.contains("copy-username-button") + ) { + let copyButton = event.currentTarget; + let otherCopyButton = + copyButton == this._copyPasswordButton + ? this._copyUsernameButton + : this._copyPasswordButton; + if (copyButton.dataset.copyLoginProperty == "password") { + let primaryPasswordAuth = await promptForPrimaryPassword( + "about-logins-copy-password-os-auth-dialog-message" + ); + if (!primaryPasswordAuth) { + return; + } + } + + copyButton.disabled = true; + copyButton.dataset.copied = true; + let propertyToCopy = + this._login[copyButton.dataset.copyLoginProperty]; + document.dispatchEvent( + new CustomEvent("AboutLoginsCopyLoginDetail", { + bubbles: true, + detail: propertyToCopy, + }) + ); + // If there is no username, this must be triggered by the password button, + // don't enable otherCopyButton (username copy button) in this case. + if (this._login.username) { + otherCopyButton.disabled = false; + delete otherCopyButton.dataset.copied; + } + clearTimeout(this._copyUsernameTimeoutId); + clearTimeout(this._copyPasswordTimeoutId); + let timeoutId = setTimeout(() => { + copyButton.disabled = false; + delete copyButton.dataset.copied; + }, LoginItem.COPY_BUTTON_RESET_TIMEOUT); + if (copyButton.dataset.copyLoginProperty == "password") { + this._copyPasswordTimeoutId = timeoutId; + } else { + this._copyUsernameTimeoutId = timeoutId; + } + + this._recordTelemetryEvent({ + object: copyButton.dataset.telemetryObject, + method: "copy", + }); + return; + } + if (classList.contains("delete-button")) { + this.showConfirmationDialog("delete", () => { + document.dispatchEvent( + new CustomEvent("AboutLoginsDeleteLogin", { + bubbles: true, + detail: this._login, + }) + ); + }); + return; + } + if (classList.contains("edit-button")) { + let primaryPasswordAuth = await promptForPrimaryPassword( + "about-logins-edit-login-os-auth-dialog-message" + ); + if (!primaryPasswordAuth) { + return; + } + + this._toggleEditing(); + this.render(); + + this._recordTelemetryEvent({ + object: "existing_login", + method: "edit", + }); + return; + } + if ( + event.target.dataset.l10nName == "duplicate-link" && + event.currentTarget.dataset.errorGuid + ) { + let existingDuplicateLogin = { + guid: event.currentTarget.dataset.errorGuid, + }; + window.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + detail: existingDuplicateLogin, + cancelable: true, + }) + ); + return; + } + if (classList.contains("origin-input")) { + this._handleOriginClick(); + } + if (classList.contains("alert-learn-more-link")) { + if (event.currentTarget.closest(".vulnerable-alert")) { + this._recordTelemetryEvent({ + object: "existing_login", + method: "learn_more_vuln", + }); + } + } + break; + } + case "submit": { + // Prevent page navigation form submit behavior. + event.preventDefault(); + if (!this._isFormValid({ reportErrors: true })) { + return; + } + if (!this.hasPendingChanges()) { + this._toggleEditing(false); + this.render(); + return; + } + let loginUpdates = this._loginFromForm(); + if (this._login.guid) { + loginUpdates.guid = this._login.guid; + document.dispatchEvent( + new CustomEvent("AboutLoginsUpdateLogin", { + bubbles: true, + detail: loginUpdates, + }) + ); + + this._recordTelemetryEvent({ + object: "existing_login", + method: "save", + }); + } else { + document.dispatchEvent( + new CustomEvent("AboutLoginsCreateLogin", { + bubbles: true, + detail: loginUpdates, + }) + ); + + this._recordTelemetryEvent({ object: "new_login", method: "save" }); + } + break; + } + case "mousedown": { + // No AutoScroll when middle clicking on origin input. + if (event.currentTarget == this._originInput && event.button == 1) { + event.preventDefault(); + } + break; + } + case "AboutLoginsRemaskPassword": { + if (this._revealCheckbox.checked && !this.dataset.editing) { + this._revealCheckbox.checked = false; + } + this._updatePasswordRevealState(); + let method = this._revealCheckbox.checked ? "show" : "hide"; + this._recordTelemetryEvent({ object: "password", method }); + break; + } + } + } + + /** + * Helper to show the "Discard changes" confirmation dialog and delay the + * received event after confirmation. + * @param {object} event The event to be delayed. + * @param {object} login The login to be shown on confirmation. + */ + confirmPendingChangesOnEvent(event, login) { + if (this.hasPendingChanges()) { + event.preventDefault(); + this.showConfirmationDialog("discard-changes", () => { + // Clear any pending changes + this.setLogin(login); + + window.dispatchEvent( + new CustomEvent(event.type, { + detail: login, + cancelable: false, + }) + ); + }); + } else { + this.setLogin(login, { skipFocusChange: true }); + } + } + + /** + * Shows a confirmation dialog. + * @param {string} type The type of confirmation dialog to display. + * @param {boolean} onConfirm Optional, the function to execute when the confirm button is clicked. + */ + showConfirmationDialog(type, onConfirm = () => {}) { + const dialog = document.querySelector("confirmation-dialog"); + let options; + switch (type) { + case "delete": { + options = { + title: "about-logins-confirm-remove-dialog-title", + message: "confirm-delete-dialog-message", + confirmButtonLabel: + "about-logins-confirm-remove-dialog-confirm-button", + }; + break; + } + case "discard-changes": { + options = { + title: "confirm-discard-changes-dialog-title", + message: "confirm-discard-changes-dialog-message", + confirmButtonLabel: "confirm-discard-changes-dialog-confirm-button", + }; + break; + } + } + let wasExistingLogin = !!this._login.guid; + let method = type == "delete" ? "delete" : "cancel"; + let dialogPromise = dialog.show(options); + dialogPromise.then( + () => { + try { + onConfirm(); + } catch (ex) {} + this._recordTelemetryEvent({ + object: wasExistingLogin ? "existing_login" : "new_login", + method, + }); + }, + () => {} + ); + return dialogPromise; + } + + hasPendingChanges() { + let valuesChanged = !window.AboutLoginsUtils.doLoginsMatch( + Object.assign({ username: "", password: "", origin: "" }, this._login), + this._loginFromForm() + ); + + return this.dataset.editing && valuesChanged; + } + + resetForm() { + // If the password input (which uses HTML form validation) wasn't connected, + // append it to the form so it gets included in the reset, specifically for + // .value and the dirty state for validation. + let wasConnected = this._passwordInput.isConnected; + if (!wasConnected) { + this._revealCheckbox.insertAdjacentElement( + "beforebegin", + this._passwordInput + ); + } + + this._form.reset(); + if (!wasConnected) { + this._passwordInput.remove(); + } + } + + /** + * @param {login} login The login that should be displayed. The login object is + * a plain JS object representation of nsILoginInfo/nsILoginMetaInfo. + * @param {boolean} skipFocusChange Optional, if present and set to true, the Edit button of the + * login will not get focus automatically. This is used to prevent + * stealing focus from the search filter upon page load. + */ + setLogin(login, { skipFocusChange } = {}) { + this._login = login; + this._error = null; + + this.resetForm(); + + if (login.guid) { + delete this.dataset.isNewLogin; + } else { + this.dataset.isNewLogin = true; + } + document.documentElement.classList.toggle("login-selected", login.guid); + this._toggleEditing(!login.guid); + + this._revealCheckbox.checked = false; + + clearTimeout(this._copyUsernameTimeoutId); + clearTimeout(this._copyPasswordTimeoutId); + for (let copyButton of [ + this._copyUsernameButton, + this._copyPasswordButton, + ]) { + copyButton.disabled = false; + delete copyButton.dataset.copied; + } + + if (!skipFocusChange) { + this._editButton.focus(); + } + this.render(); + } + + /** + * Updates the view if the login argument matches the login currently + * displayed. + * + * @param {login} login The login that was added to storage. The login object is + * a plain JS object representation of nsILoginInfo/nsILoginMetaInfo. + */ + loginAdded(login) { + if ( + this._login.guid || + !window.AboutLoginsUtils.doLoginsMatch(login, this._loginFromForm()) + ) { + return; + } + + this.setLogin(login); + this.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + bubbles: true, + composed: true, + detail: login, + }) + ); + } + + /** + * Updates the view if the login argument matches the login currently + * displayed. + * + * @param {login} login The login that was modified in storage. The login object is + * a plain JS object representation of nsILoginInfo/nsILoginMetaInfo. + */ + loginModified(login) { + if (this._login.guid != login.guid) { + return; + } + + let valuesChanged = + this.dataset.editing && + !window.AboutLoginsUtils.doLoginsMatch(login, this._loginFromForm()); + if (valuesChanged) { + this.showConfirmationDialog("discard-changes", () => { + this.setLogin(login); + }); + } else { + this.setLogin(login); + } + } + + /** + * Clears the displayed login if the argument matches the currently + * displayed login. + * + * @param {login} login The login that was removed from storage. The login object is + * a plain JS object representation of nsILoginInfo/nsILoginMetaInfo. + */ + loginRemoved(login) { + if (login.guid != this._login.guid) { + return; + } + + this.setLogin({}, { skipFocusChange: true }); + this._toggleEditing(false); + } + + _handleOriginClick() { + this._recordTelemetryEvent({ + object: "existing_login", + method: "open_site", + }); + } + + /** + * Checks that the edit/new-login form has valid values present for their + * respective required fields. + * + * @param {boolean} reportErrors If true, validation errors will be reported + * to the user. + */ + _isFormValid({ reportErrors } = {}) { + let fields = [this._passwordInput]; + if (this.dataset.isNewLogin) { + fields.push(this._originInput); + } + let valid = true; + // Check validity on all required fields so each field will get :invalid styling + // if applicable. + for (let field of fields) { + if (reportErrors) { + valid &= field.reportValidity(); + } else { + valid &= field.checkValidity(); + } + } + return valid; + } + + _loginFromForm() { + return Object.assign({}, this._login, { + username: this._usernameInput.value.trim(), + password: this._passwordInput.value, + origin: + window.AboutLoginsUtils.getLoginOrigin(this._originInput.value) || "", + }); + } + + _recordTelemetryEvent(eventObject) { + // Breach alerts have higher priority than vulnerable logins, the + // following conditionals must reflect this priority. + const extra = eventObject.hasOwnProperty("extra") ? eventObject.extra : {}; + if (this._breachesMap && this._breachesMap.has(this._login.guid)) { + Object.assign(extra, { breached: "true" }); + eventObject.extra = extra; + } else if ( + this._vulnerableLoginsMap && + this._vulnerableLoginsMap.has(this._login.guid) + ) { + Object.assign(extra, { vulnerable: "true" }); + eventObject.extra = extra; + } + recordTelemetryEvent(eventObject); + } + + /** + * Toggles the login-item view from editing to non-editing mode. + * + * @param {boolean} force When true puts the form in 'edit' mode, otherwise + * puts the form in read-only mode. + */ + _toggleEditing(force) { + let shouldEdit = force !== undefined ? force : !this.dataset.editing; + + if (!shouldEdit) { + delete this.dataset.isNewLogin; + } + + // Reset cursor to the start of the input for long text names. + this._usernameInput.scrollLeft = 0; + + if (shouldEdit) { + this._passwordInput.style.removeProperty("width"); + } else { + // Need to set a shorter width than -moz-available so the reveal checkbox + // will still appear next to the password. + this._passwordInput.style.width = + (this._login.password || "").length + "ch"; + } + + this._deleteButton.disabled = this.dataset.isNewLogin; + this._editButton.disabled = shouldEdit; + let inputTabIndex = shouldEdit ? 0 : -1; + this._originInput.readOnly = !this.dataset.isNewLogin; + this._originInput.tabIndex = inputTabIndex; + this._usernameInput.readOnly = !shouldEdit; + this._usernameInput.tabIndex = inputTabIndex; + this._passwordInput.readOnly = !shouldEdit; + this._passwordInput.tabIndex = inputTabIndex; + if (shouldEdit) { + this.dataset.editing = true; + this._usernameInput.focus(); + this._usernameInput.select(); + } else { + delete this.dataset.editing; + // Only reset the reveal checkbox when exiting 'edit' mode + this._revealCheckbox.checked = false; + } + } + + _updatePasswordRevealState() { + if ( + window.AboutLoginsUtils && + window.AboutLoginsUtils.passwordRevealVisible === false + ) { + this._revealCheckbox.hidden = true; + } + + let { checked } = this._revealCheckbox; + let inputType = checked ? "text" : "password"; + this._passwordInput.type = inputType; + + if (this.dataset.editing) { + this._passwordDisplayInput.removeAttribute("tabindex"); + } else { + this._passwordDisplayInput.setAttribute("tabindex", -1); + } + + // Swap which is in the document depending on whether we need the + // real .value (which means that the primary password was already entered, + // if applicable) + if (checked || this.dataset.isNewLogin) { + this._passwordDisplayInput.replaceWith(this._passwordInput); + + // Focus the input if it hasn't been already. + if (this.dataset.editing && inputType === "text") { + this._passwordInput.focus(); + } + } else { + this._passwordInput.replaceWith(this._passwordDisplayInput); + } + } + + _updateOriginDisplayState() { + // Switches between the origin input and anchor tag depending + // if a new login is being created. + if (this.dataset.isNewLogin) { + this._originDisplayInput.replaceWith(this._originInput); + this._originInput.focus(); + } else { + this._originInput.replaceWith(this._originDisplayInput); + } + } +} +customElements.define("login-item", LoginItem); diff --git a/browser/components/aboutlogins/content/components/login-list-item.mjs b/browser/components/aboutlogins/content/components/login-list-item.mjs new file mode 100644 index 0000000000..2fe37c6b12 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-list-item.mjs @@ -0,0 +1,81 @@ +/* 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/. */ + +/** + * LoginListItemFactory is used instead of the "login-list-item" custom element + * since there may be 100s of login-list-items on about:logins and each + * custom element carries with it significant overhead when used in large + * numbers. + */ +export default class LoginListItemFactory { + static create(login) { + let template = document.querySelector("#login-list-item-template"); + let fragment = template.content.cloneNode(true); + let listItem = fragment.firstElementChild; + + LoginListItemFactory.update(listItem, login); + + return listItem; + } + + static update(listItem, login) { + let title = listItem.querySelector(".title"); + let username = listItem.querySelector(".username"); + let alertIcon = listItem.querySelector(".alert-icon"); + + const favicon = listItem.querySelector(".favicon"); + favicon.src = `page-icon:${login.origin}`; + + if (!login.guid) { + listItem.id = "new-login-list-item"; + document.l10n.setAttributes(title, "login-list-item-title-new-login"); + document.l10n.setAttributes( + username, + "login-list-item-subtitle-new-login" + ); + return; + } + + // Prepend the ID with a string since IDs must not begin with a number. + if (!listItem.id) { + listItem.id = "lli-" + login.guid; + listItem.dataset.guid = login.guid; + } + if (title.textContent != login.title) { + title.textContent = login.title; + } + + let trimmedUsernameValue = login.username.trim(); + if (trimmedUsernameValue) { + if (username.textContent != trimmedUsernameValue) { + username.removeAttribute("data-l10n-id"); + username.textContent = trimmedUsernameValue; + } + } else { + document.l10n.setAttributes( + username, + "login-list-item-subtitle-missing-username" + ); + } + + if (listItem.classList.contains("breached")) { + alertIcon.src = + "chrome://browser/content/aboutlogins/icons/breached-website.svg"; + document.l10n.setAttributes( + alertIcon, + "about-logins-list-item-breach-icon" + ); + } else if (listItem.classList.contains("vulnerable")) { + alertIcon.src = + "chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"; + + document.l10n.setAttributes( + alertIcon, + "about-logins-list-item-vulnerable-password-icon" + ); + } else { + alertIcon.src = ""; + } + } +} diff --git a/browser/components/aboutlogins/content/components/login-list-section.mjs b/browser/components/aboutlogins/content/components/login-list-section.mjs new file mode 100644 index 0000000000..5495f55e28 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-list-section.mjs @@ -0,0 +1,34 @@ +/* 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/. */ + +export default class LoginListHeaderFactory { + static ID_PREFIX = "id-"; + + static create(header) { + let template = document.querySelector("#login-list-section-template"); + let fragment = template.content.cloneNode(true); + let sectionItem = fragment.firstElementChild; + + this.update(sectionItem, header); + + return sectionItem; + } + + static update(headerItem, header) { + let headerElement = headerItem.querySelector(".login-list-header"); + if (header) { + if (header.startsWith(this.ID_PREFIX)) { + document.l10n.setAttributes( + headerElement, + header.substring(this.ID_PREFIX.length) + ); + } else { + headerElement.textContent = header; + } + headerElement.hidden = false; + } else { + headerElement.hidden = true; + } + } +} diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css new file mode 100644 index 0000000000..b58af780a1 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-list.css @@ -0,0 +1,202 @@ +/* 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/. */ + +:host { + border-inline-end: 1px solid var(--in-content-border-color); + background-color: var(--in-content-box-background); + display: flex; + flex-direction: column; + overflow: auto; +} + +.meta { + display: flex; + align-items: center; + padding: 0 16px 16px; + border-bottom: 1px solid var(--in-content-border-color); + background-color: var(--in-content-box-background); + color: var(--text-color-deemphasized); + font-size: 0.8em; +} + +.meta > label > span { + margin-inline-end: 2px; +} + +#login-sort { + background-color: transparent; + margin: 0; + padding-inline: 0 16px; + min-height: initial; + font: inherit; + font-weight: 600; + color: var(--in-content-text-color) !important; +} + +#login-sort:hover:not([disabled]) { + background-color: var(--in-content-button-background); +} + +#login-sort > option { + font-weight: normal; +} + +.count { + flex-grow: 1; + text-align: end; + margin-inline-start: 18px; +} + +.container { + display: contents; +} + +.listHeader { + display: flex; + justify-content: center; + align-content: center; + gap: 16px; + padding: 16px; +} + +:host(.no-logins) .empty-search-message, +:host(:not(.empty-search)) .empty-search-message, +:host(.empty-search:not(.create-login-selected)) ol, +:host(.no-logins:not(.create-login-selected)) ol, +:host(:not(.no-logins)) .intro, +:host(.create-login-selected) .intro, +:host(.create-login-selected) .empty-search-message { + display: none; +} + +:host(:not(.initialized)) .count, +:host(:not(.initialized)) .empty-search-message { + visibility: hidden; +} + +.empty-search-message, +.intro { + text-align: center; + padding: 1em; + max-width: 50ch; /* This should be kept in sync with login-list-item username and title max-width */ + flex-grow: 1; + border-bottom: 1px solid var(--in-content-border-color); +} + +.empty-search-message span, +.intro span { + font-size: 0.85em; +} + +ol { + outline-offset: var(--in-content-focus-outline-inset); + margin-block: 0; + padding-inline-start: 0; + overflow: hidden auto; + flex-grow: 1; + scroll-padding-top: 24px; /* there is the section header that is sticky to the top */ +} + +.create-login-button { + margin: 0; + min-width: auto; + background-repeat: no-repeat; + background-image: url("chrome://global/skin/icons/plus.svg"); + background-position: center; + -moz-context-properties: fill; + fill: currentColor; +} + +.login-list-item { + display: flex; + align-items: center; + padding-block: 10px; + padding-inline: 12px 18px; + border-inline-start: 4px solid transparent; + user-select: none; +} + +.login-list-header { + display: block; + position: sticky; + top: 0; + font-size: .85em; + font-weight: 600; + padding: 4px 16px; + border-bottom: 1px solid var(--in-content-border-color); + background-color: var(--in-content-box-background); + margin-block-start: 2px; + margin-inline: 2px; +} + +.login-list-item:not(.selected):hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +.login-list-item:not(.selected):hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +.login-list-item.keyboard-selected { + border-inline-start-color: var(--in-content-border-color); + background-color: var(--in-content-button-background-hover); +} + +.login-list-item.selected { + border-inline-start-color: var(--in-content-accent-color); + background-color: var(--in-content-page-background); +} + +.login-list-item.selected .title { + font-weight: 600; +} + +.labels { + flex-grow: 1; + overflow: hidden; + min-height: 40px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.title, +.username { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.favicon { + height: 16px; + width: 16px; + margin-inline-end: 12px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; +} + +.username { + font-size: 0.85em; + color: var(--text-color-deemphasized); +} + +.alert-icon { + min-width: 16px; + width: 16px; + margin-inline-start: 12px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.75; +} + +@media not (prefers-contrast) { + .breached > .alert-icon { + fill: var(--red-60); + fill-opacity: 1; + } +} diff --git a/browser/components/aboutlogins/content/components/login-list.mjs b/browser/components/aboutlogins/content/components/login-list.mjs new file mode 100644 index 0000000000..2af1a12a7a --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-list.mjs @@ -0,0 +1,912 @@ +/* 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/. */ + +import LoginListItemFactory from "./login-list-item.mjs"; +import LoginListSectionFactory from "./login-list-section.mjs"; +import { recordTelemetryEvent } from "../aboutLoginsUtils.mjs"; + +const collator = new Intl.Collator(); +const monthFormatter = new Intl.DateTimeFormat(undefined, { month: "long" }); +const yearMonthFormatter = new Intl.DateTimeFormat(undefined, { + year: "numeric", + month: "long", +}); +const dayDuration = 24 * 60 * 60_000; +const sortFnOptions = { + name: (a, b) => collator.compare(a.title, b.title), + "name-reverse": (a, b) => collator.compare(b.title, a.title), + username: (a, b) => collator.compare(a.username, b.username), + "username-reverse": (a, b) => collator.compare(b.username, a.username), + "last-used": (a, b) => a.timeLastUsed < b.timeLastUsed, + "last-changed": (a, b) => a.timePasswordChanged < b.timePasswordChanged, + alerts: (a, b, breachesByLoginGUID, vulnerableLoginsByLoginGUID) => { + const aIsBreached = breachesByLoginGUID && breachesByLoginGUID.has(a.guid); + const bIsBreached = breachesByLoginGUID && breachesByLoginGUID.has(b.guid); + const aIsVulnerable = + vulnerableLoginsByLoginGUID && vulnerableLoginsByLoginGUID.has(a.guid); + const bIsVulnerable = + vulnerableLoginsByLoginGUID && vulnerableLoginsByLoginGUID.has(b.guid); + + if ((aIsBreached && !bIsBreached) || (aIsVulnerable && !bIsVulnerable)) { + return -1; + } + + if ((!aIsBreached && bIsBreached) || (!aIsVulnerable && bIsVulnerable)) { + return 1; + } + return sortFnOptions.name(a, b); + }, +}; + +const headersFnOptions = { + // TODO: name should use the ICU API, see Bug 1592834 + // name: l => + // l.title.length && letterRegExp.test(l.title[0]) + // ? l.title[0].toUpperCase() + // : "#", + // "name-reverse": l => headersFnOptions.name(l), + name: () => "", + "name-reverse": () => "", + username: () => "", + "username-reverse": () => "", + "last-used": l => headerFromDate(l.timeLastUsed), + "last-changed": l => headerFromDate(l.timePasswordChanged), + alerts: (l, breachesByLoginGUID, vulnerableLoginsByLoginGUID) => { + const isBreached = breachesByLoginGUID && breachesByLoginGUID.has(l.guid); + const isVulnerable = + vulnerableLoginsByLoginGUID && vulnerableLoginsByLoginGUID.has(l.guid); + if (isBreached) { + return ( + LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-breach" + ); + } else if (isVulnerable) { + return ( + LoginListSectionFactory.ID_PREFIX + + "about-logins-list-section-vulnerable" + ); + } + return ( + LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-nothing" + ); + }, +}; + +function headerFromDate(timestamp) { + let now = new Date(); + now.setHours(0, 0, 0, 0); // reset to start of day + let date = new Date(timestamp); + + if (now < date) { + return ( + LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-today" + ); + } else if (now - dayDuration < date) { + return ( + LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-yesterday" + ); + } else if (now - 7 * dayDuration < date) { + return LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-week"; + } else if (now.getFullYear() == date.getFullYear()) { + return monthFormatter.format(date); + } else if (now.getFullYear() - 1 == date.getFullYear()) { + return yearMonthFormatter.format(date); + } + return String(date.getFullYear()); +} + +export default class LoginList extends HTMLElement { + // An array of login GUIDs, stored in sorted order. + _loginGuidsSortedOrder = []; + // A map of login GUID -> {login, listItem}. + _logins = {}; + // A map of section header -> sectionItem + _sections = {}; + _filter = ""; + _selectedGuid = null; + _blankLoginListItem = LoginListItemFactory.create({}); + + constructor() { + super(); + this._blankLoginListItem.hidden = true; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + let loginListTemplate = document.querySelector("#login-list-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(loginListTemplate.content.cloneNode(true)); + + this._count = shadowRoot.querySelector(".count"); + this._createLoginButton = shadowRoot.querySelector(".create-login-button"); + this._list = shadowRoot.querySelector("ol"); + this._list.appendChild(this._blankLoginListItem); + this._sortSelect = shadowRoot.querySelector("#login-sort"); + + this.render(); + + this.shadowRoot + .getElementById("login-sort") + .addEventListener("change", this); + window.addEventListener("AboutLoginsClearSelection", this); + window.addEventListener("AboutLoginsFilterLogins", this); + window.addEventListener("AboutLoginsInitialLoginSelected", this); + window.addEventListener("AboutLoginsLoginSelected", this); + window.addEventListener("AboutLoginsShowBlankLogin", this); + this._list.addEventListener("click", this); + this.addEventListener("keydown", this); + this.addEventListener("keyup", this); + this._createLoginButton.addEventListener("click", this); + } + + get #activeDescendant() { + const activeDescendantId = this._list.getAttribute("aria-activedescendant"); + let activeDescendant = + activeDescendantId && this.shadowRoot.getElementById(activeDescendantId); + + return activeDescendant; + } + + selectLoginByDomainOrGuid(searchParam) { + this._preselectLogin = searchParam; + } + + render() { + let visibleLoginGuids = this._applyFilter(); + this.#updateVisibleLoginCount( + visibleLoginGuids.size, + this._loginGuidsSortedOrder.length + ); + this.classList.toggle("empty-search", !visibleLoginGuids.size); + document.documentElement.classList.toggle( + "empty-search", + this._filter && !visibleLoginGuids.size + ); + this._sortSelect.disabled = !visibleLoginGuids.size; + + // Add all of the logins that are not in the DOM yet. + let fragment = document.createDocumentFragment(); + for (let guid of this._loginGuidsSortedOrder) { + if (this._logins[guid].listItem) { + continue; + } + let login = this._logins[guid].login; + let listItem = LoginListItemFactory.create(login); + this._logins[login.guid] = Object.assign(this._logins[login.guid], { + listItem, + }); + fragment.appendChild(listItem); + } + this._list.appendChild(fragment); + + // Show, hide, and update state of the list items per the applied search filter. + for (let guid of this._loginGuidsSortedOrder) { + let { listItem, login } = this._logins[guid]; + + if (guid == this._selectedGuid) { + this._setListItemAsSelected(listItem); + } + listItem.classList.toggle( + "breached", + !!this._breachesByLoginGUID && + this._breachesByLoginGUID.has(listItem.dataset.guid) + ); + listItem.classList.toggle( + "vulnerable", + !!this._vulnerableLoginsByLoginGUID && + this._vulnerableLoginsByLoginGUID.has(listItem.dataset.guid) && + !listItem.classList.contains("breached") + ); + if ( + listItem.classList.contains("breached") || + listItem.classList.contains("vulnerable") + ) { + LoginListItemFactory.update(listItem, login); + } + listItem.hidden = !visibleLoginGuids.has(listItem.dataset.guid); + } + + let sectionsKey = Object.keys(this._sections); + for (let sectionKey of sectionsKey) { + this._sections[sectionKey]._inUse = false; + } + + if (this._loginGuidsSortedOrder.length) { + let section = null; + let currentHeader = null; + // Re-arrange the login-list-items according to their sort and + // create / re-arrange sections + for (let i = this._loginGuidsSortedOrder.length - 1; i >= 0; i--) { + let guid = this._loginGuidsSortedOrder[i]; + let { listItem, _header } = this._logins[guid]; + + if (!listItem.hidden) { + if (currentHeader != _header) { + section = this.renderSectionHeader((currentHeader = _header)); + } + + section.insertBefore( + listItem, + section.firstElementChild.nextElementSibling + ); + } + } + } + + for (let sectionKey of sectionsKey) { + let section = this._sections[sectionKey]; + if (section._inUse) { + continue; + } + + section.hidden = true; + } + + let activeDescendant = this.#activeDescendant; + if (!activeDescendant || activeDescendant.hidden) { + let visibleListItem = this._list.querySelector( + ".login-list-item:not([hidden])" + ); + if (visibleListItem) { + this._list.setAttribute("aria-activedescendant", visibleListItem.id); + } + } + + if ( + this._sortSelect.namedItem("alerts").hidden && + ((this._breachesByLoginGUID && + this._loginGuidsSortedOrder.some(loginGuid => + this._breachesByLoginGUID.has(loginGuid) + )) || + (this._vulnerableLoginsByLoginGUID && + this._loginGuidsSortedOrder.some(loginGuid => + this._vulnerableLoginsByLoginGUID.has(loginGuid) + ))) + ) { + // Make available the "alerts" option but don't change the + // selected sort so the user's current task isn't interrupted. + this._sortSelect.namedItem("alerts").hidden = false; + } + } + + renderSectionHeader(header) { + let section = this._sections[header]; + if (!section) { + section = this._sections[header] = LoginListSectionFactory.create(header); + } + + this._list.insertBefore( + section, + this._blankLoginListItem.nextElementSibling + ); + + section._inUse = true; + section.hidden = false; + return section; + } + + handleEvent(event) { + switch (event.type) { + case "click": { + if (event.originalTarget == this._createLoginButton) { + window.dispatchEvent( + new CustomEvent("AboutLoginsShowBlankLogin", { + cancelable: true, + }) + ); + recordTelemetryEvent({ object: "new_login", method: "new" }); + return; + } + + let listItem = event.originalTarget.closest(".login-list-item"); + if (!listItem || !listItem.dataset.guid) { + return; + } + + let { login } = this._logins[listItem.dataset.guid]; + this.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + bubbles: true, + composed: true, + cancelable: true, // allow calling preventDefault() on event + detail: login, + }) + ); + + let extra = {}; + if (listItem.classList.contains("breached")) { + extra = { breached: "true" }; + } else if (listItem.classList.contains("vulnerable")) { + extra = { vulnerable: "true" }; + } + recordTelemetryEvent({ + object: "existing_login", + method: "select", + extra, + }); + break; + } + case "change": { + this._applyHeaders(); + this._applySortAndScrollToTop(); + const extra = { sort_key: this._sortSelect.value }; + recordTelemetryEvent({ object: "list", method: "sort", extra }); + document.dispatchEvent( + new CustomEvent("AboutLoginsSortChanged", { + bubbles: true, + detail: this._sortSelect.value, + }) + ); + break; + } + case "AboutLoginsClearSelection": { + if (!this._loginGuidsSortedOrder.length) { + this._createLoginButton.disabled = false; + this.classList.remove("create-login-selected"); + return; + } + + let firstVisibleListItem = this._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ); + let newlySelectedLogin; + if (firstVisibleListItem) { + newlySelectedLogin = + this._logins[firstVisibleListItem.dataset.guid].login; + } else { + // Clear the filter if all items have been filtered out. + this.classList.remove("create-login-selected"); + this._createLoginButton.disabled = false; + window.dispatchEvent( + new CustomEvent("AboutLoginsFilterLogins", { + detail: "", + }) + ); + newlySelectedLogin = + this._logins[this._loginGuidsSortedOrder[0]].login; + } + + // Select the first visible login after any possible filter is applied. + window.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + detail: newlySelectedLogin, + cancelable: true, + }) + ); + break; + } + case "AboutLoginsFilterLogins": { + this._filter = event.detail.toLocaleLowerCase(); + this.render(); + break; + } + case "AboutLoginsInitialLoginSelected": + case "AboutLoginsLoginSelected": { + if (event.defaultPrevented || this._selectedGuid == event.detail.guid) { + return; + } + + // XXX If an AboutLoginsLoginSelected event is received that doesn't contain + // the full login object, re-dispatch the event with the full login object since + // only the login-list knows the full details of each login object. + if ( + Object.keys(event.detail).length == 1 && + event.detail.hasOwnProperty("guid") + ) { + window.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + detail: this._logins[event.detail.guid].login, + cancelable: true, + }) + ); + return; + } + + let listItem = this._list.querySelector( + `.login-list-item[data-guid="${event.detail.guid}"]` + ); + if (listItem) { + this._setListItemAsSelected(listItem); + } else { + this.render(); + } + break; + } + case "AboutLoginsShowBlankLogin": { + if (!event.defaultPrevented) { + this._selectedGuid = null; + this._setListItemAsSelected(this._blankLoginListItem); + } + break; + } + case "keyup": + case "keydown": { + if (event.type == "keydown") { + if ( + this.shadowRoot.activeElement && + this.shadowRoot.activeElement.closest("ol") && + (event.key == " " || + event.key == "ArrowUp" || + event.key == "ArrowDown") + ) { + // Since Space, ArrowUp and ArrowDown will perform actions, prevent + // them from also scrolling the list. + event.preventDefault(); + } + } + + this._handleKeyboardNavWithinList(event); + break; + } + } + } + + /** + * @param {login[]} logins An array of logins used for displaying in the list. + */ + setLogins(logins) { + this._loginGuidsSortedOrder = []; + this._logins = logins.reduce((map, login) => { + this._loginGuidsSortedOrder.push(login.guid); + map[login.guid] = { login }; + return map; + }, {}); + this._sections = {}; + this._applyHeaders(); + this._applySort(); + this._list.textContent = ""; + this._list.appendChild(this._blankLoginListItem); + this.render(); + + if (!this._selectedGuid || !this._logins[this._selectedGuid]) { + this._selectFirstVisibleLogin(); + } + } + + /** + * @param {Map} breachesByLoginGUID A Map of breaches by login GUIDs used + * for displaying breached login indicators. + */ + setBreaches(breachesByLoginGUID) { + this._internalSetMonitorData("_breachesByLoginGUID", breachesByLoginGUID); + } + + /** + * @param {Map} breachesByLoginGUID A Map of breaches by login GUIDs that + * should be added to the local cache of + * breaches. + */ + updateBreaches(breachesByLoginGUID) { + this._internalUpdateMonitorData( + "_breachesByLoginGUID", + breachesByLoginGUID + ); + } + + setVulnerableLogins(vulnerableLoginsByLoginGUID) { + this._internalSetMonitorData( + "_vulnerableLoginsByLoginGUID", + vulnerableLoginsByLoginGUID + ); + } + + updateVulnerableLogins(vulnerableLoginsByLoginGUID) { + this._internalUpdateMonitorData( + "_vulnerableLoginsByLoginGUID", + vulnerableLoginsByLoginGUID + ); + } + + _internalSetMonitorData( + internalMemberName, + mapByLoginGUID, + updateSortAndSelectedLogin = true + ) { + this[internalMemberName] = mapByLoginGUID; + if (this[internalMemberName].size) { + for (let [loginGuid] of mapByLoginGUID) { + if (this._logins[loginGuid]) { + let { login, listItem } = this._logins[loginGuid]; + LoginListItemFactory.update(listItem, login); + } + } + if (updateSortAndSelectedLogin) { + const alertsSortOptionElement = this._sortSelect.namedItem("alerts"); + alertsSortOptionElement.hidden = false; + this._sortSelect.selectedIndex = alertsSortOptionElement.index; + this._applyHeaders(); + this._applySortAndScrollToTop(); + this._selectFirstVisibleLogin(); + } + } + this.render(); + } + + _internalUpdateMonitorData(internalMemberName, mapByLoginGUID) { + if (!this[internalMemberName]) { + this[internalMemberName] = new Map(); + } + for (const [guid, data] of [...mapByLoginGUID]) { + if (data) { + this[internalMemberName].set(guid, data); + } else { + this[internalMemberName].delete(guid); + } + } + this._internalSetMonitorData( + internalMemberName, + this[internalMemberName], + false + ); + } + + setSortDirection(sortDirection) { + // The 'alerts' sort becomes visible when there are known alerts. + // Don't restore to the 'alerts' sort if there are no alerts to show. + if ( + sortDirection == "alerts" && + this._sortSelect.namedItem("alerts").hidden + ) { + return; + } + this._sortSelect.value = sortDirection; + this._applyHeaders(); + this._applySortAndScrollToTop(); + this._selectFirstVisibleLogin(); + } + + /** + * @param {login} login A login that was added to storage. + */ + loginAdded(login) { + this._logins[login.guid] = { login }; + this._loginGuidsSortedOrder.push(login.guid); + this._applyHeaders(false); + this._applySort(); + + // Add the list item and update any other related state that may pertain + // to the list item such as breach alerts. + this.render(); + + if ( + this.classList.contains("no-logins") && + !this.classList.contains("create-login-selected") + ) { + this._selectFirstVisibleLogin(); + } + } + + /** + * @param {login} login A login that was modified in storage. The related + * login-list-item will get updated. + */ + loginModified(login) { + this._logins[login.guid] = Object.assign(this._logins[login.guid], { + login, + _header: null, // reset header + }); + this._applyHeaders(false); + this._applySort(); + let loginObject = this._logins[login.guid]; + LoginListItemFactory.update(loginObject.listItem, login); + + // Update any other related state that may pertain to the list item + // such as breach alerts that may or may not now apply. + this.render(); + } + + /** + * @param {login} login A login that was removed from storage. The related + * login-list-item will get removed. The login object + * is a plain JS object representation of + * nsILoginInfo/nsILoginMetaInfo. + */ + loginRemoved(login) { + // Update the selected list item to the previous item in the list + // if one exists, otherwise the next item. If no logins remain + // the login-intro or empty-search text will be shown instead of the login-list. + if (this._selectedGuid == login.guid) { + let visibleListItems = this._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ); + if (visibleListItems.length > 1) { + let index = [...visibleListItems].findIndex(listItem => { + return listItem.dataset.guid == login.guid; + }); + let newlySelectedIndex = index > 0 ? index - 1 : index + 1; + let newlySelectedLogin = + this._logins[visibleListItems[newlySelectedIndex].dataset.guid].login; + window.dispatchEvent( + new CustomEvent("AboutLoginsLoginSelected", { + detail: newlySelectedLogin, + cancelable: true, + }) + ); + } + } + + this._logins[login.guid].listItem.remove(); + delete this._logins[login.guid]; + this._loginGuidsSortedOrder = this._loginGuidsSortedOrder.filter(guid => { + return guid != login.guid; + }); + + // Render the login-list to update the search result count and show the + // empty-search message if needed. + this.render(); + } + + /** + * @returns {Set} Set of login guids that match the filter. + */ + _applyFilter() { + let matchingLoginGuids; + if (this._filter) { + matchingLoginGuids = new Set( + this._loginGuidsSortedOrder.filter(guid => { + let { login } = this._logins[guid]; + return ( + login.origin.toLocaleLowerCase().includes(this._filter) || + (!!login.httpRealm && + login.httpRealm.toLocaleLowerCase().includes(this._filter)) || + login.username.toLocaleLowerCase().includes(this._filter) || + login.password.toLocaleLowerCase().includes(this._filter) + ); + }) + ); + } else { + matchingLoginGuids = new Set([...this._loginGuidsSortedOrder]); + } + + return matchingLoginGuids; + } + + _applySort() { + const sort = this._sortSelect.value; + this._loginGuidsSortedOrder = this._loginGuidsSortedOrder.sort((a, b) => { + let loginA = this._logins[a].login; + let loginB = this._logins[b].login; + return sortFnOptions[sort]( + loginA, + loginB, + this._breachesByLoginGUID, + this._vulnerableLoginsByLoginGUID + ); + }); + } + + _applyHeaders(updateAll = true) { + let headerFn = headersFnOptions[this._sortSelect.value]; + for (let guid of this._loginGuidsSortedOrder) { + let login = this._logins[guid]; + if (updateAll || !login._header) { + login._header = headerFn( + login.login, + this._breachesByLoginGUID, + this._vulnerableLoginsByLoginGUID + ); + } + } + } + + _applySortAndScrollToTop() { + this._applySort(); + this.render(); + this._list.scrollTop = 0; + } + + #updateVisibleLoginCount(count, total) { + const args = document.l10n.getAttributes(this._count).args; + if (count != args.count || total != args.total) { + document.l10n.setAttributes( + this._count, + count == total ? "login-list-count" : "login-list-filtered-count", + { count, total } + ); + } + } + + #findPreviousItem(item) { + let previousItem = item; + do { + previousItem = + (previousItem.tagName == "SECTION" + ? previousItem.lastElementChild + : previousItem.previousElementSibling) || + (previousItem.parentElement.tagName == "SECTION" && + previousItem.parentElement.previousElementSibling); + } while ( + previousItem && + (previousItem.hidden || + !previousItem.classList.contains("login-list-item")) + ); + + return previousItem; + } + + #findNextItem(item) { + let nextItem = item; + do { + nextItem = + (nextItem.tagName == "SECTION" + ? nextItem.firstElementChild.nextElementSibling + : nextItem.nextElementSibling) || + (nextItem.parentElement.tagName == "SECTION" && + nextItem.parentElement.nextElementSibling); + } while ( + nextItem && + (nextItem.hidden || !nextItem.classList.contains("login-list-item")) + ); + + return nextItem; + } + + #pickByDirection(ltr, rtl) { + return document.dir == "ltr" ? ltr : rtl; + } + + //TODO May be we can use this fn in render(), but logic is different a bit + get #activeDescendantForSelection() { + let activeDescendant = this.#activeDescendant; + if ( + !activeDescendant || + activeDescendant.hidden || + !activeDescendant.classList.contains("login-list-item") + ) { + activeDescendant = + this._list.querySelector(".login-list-item[data-guid]:not([hidden])") || + this._list.firstElementChild; + } + + return activeDescendant; + } + + _handleKeyboardNavWithinList(event) { + if (this._list != this.shadowRoot.activeElement) { + return; + } + + let command = null; + + switch (event.type) { + case "keyup": + switch (event.key) { + case " ": + case "Enter": + command = "click"; + break; + } + break; + case "keydown": + switch (event.key) { + case "ArrowDown": + command = "next"; + break; + case "ArrowLeft": + command = this.#pickByDirection("previous", "next"); + break; + case "ArrowRight": + command = this.#pickByDirection("next", "previous"); + break; + case "ArrowUp": + command = "previous"; + break; + } + break; + } + + if (command) { + event.preventDefault(); + + switch (command) { + case "click": + this.clickSelected(); + break; + case "next": + this.selectNext(); + break; + case "previous": + this.selectPrevious(); + break; + } + } + } + + clickSelected() { + this.#activeDescendantForSelection?.click(); + } + + selectNext() { + const activeDescendant = this.#activeDescendantForSelection; + if (activeDescendant) { + this.#moveSelection( + activeDescendant, + this.#findNextItem(activeDescendant) + ); + } + } + + selectPrevious() { + const activeDescendant = this.#activeDescendantForSelection; + if (activeDescendant) { + this.#moveSelection( + activeDescendant, + this.#findPreviousItem(activeDescendant) + ); + } + } + + #moveSelection(from, to) { + if (to) { + this._list.setAttribute("aria-activedescendant", to.id); + from?.classList.remove("keyboard-selected"); + to.classList.add("keyboard-selected"); + to.scrollIntoView({ block: "nearest" }); + this.clickSelected(); + } + } + + /** + * Selects the first visible login as part of the initial load of the page, + * which will bypass any focus changes that occur during manual login + * selection. + */ + _selectFirstVisibleLogin() { + const visibleLoginsGuids = this._applyFilter(); + let selectedLoginGuid = + this._loginGuidsSortedOrder.find(guid => guid === this._preselectLogin) ?? + this.findLoginGuidFromDomain(this._preselectLogin) ?? + this._loginGuidsSortedOrder[0]; + + selectedLoginGuid = [ + selectedLoginGuid, + ...this._loginGuidsSortedOrder, + ].find(guid => visibleLoginsGuids.has(guid)); + + if (selectedLoginGuid && this._logins[selectedLoginGuid]) { + let { login } = this._logins[selectedLoginGuid]; + window.dispatchEvent( + new CustomEvent("AboutLoginsInitialLoginSelected", { + detail: login, + }) + ); + this.updateSelectedLocationHash(selectedLoginGuid); + } + } + + _setListItemAsSelected(listItem) { + let oldSelectedItem = this._list.querySelector(".selected"); + if (oldSelectedItem) { + oldSelectedItem.classList.remove("selected"); + oldSelectedItem.removeAttribute("aria-selected"); + } + this.classList.toggle("create-login-selected", !listItem.dataset.guid); + this._blankLoginListItem.hidden = !!listItem.dataset.guid; + this._createLoginButton.disabled = !listItem.dataset.guid; + listItem.classList.add("selected"); + listItem.setAttribute("aria-selected", "true"); + this._list.setAttribute("aria-activedescendant", listItem.id); + this._selectedGuid = listItem.dataset.guid; + this.updateSelectedLocationHash(this._selectedGuid); + // Scroll item into view if it isn't visible + listItem.scrollIntoView({ block: "nearest" }); + } + + updateSelectedLocationHash(guid) { + window.location.hash = `#${encodeURIComponent(guid)}`; + } + + findLoginGuidFromDomain(domain) { + for (let guid of this._loginGuidsSortedOrder) { + let login = this._logins[guid].login; + if (login.hostname === domain) { + return guid; + } + } + return null; + } +} +customElements.define("login-list", LoginList); diff --git a/browser/components/aboutlogins/content/components/login-timeline.mjs b/browser/components/aboutlogins/content/components/login-timeline.mjs new file mode 100644 index 0000000000..52d053e999 --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-timeline.mjs @@ -0,0 +1,137 @@ +/* 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/. */ + +import { + styleMap, + classMap, + html, + css, +} from "chrome://global/content/vendor/lit.all.mjs"; +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +export default class Timeline extends MozLitElement { + static get properties() { + return { + history: { type: Array }, + }; + } + + constructor() { + super(); + this.history = []; + } + + static styles = css` + .timeline { + display: grid; + grid-template-rows: 24px auto auto; + font-size: smaller; + color: var(--text-color-deemphasized); + padding-inline-start: 0px; + text-align: center; + } + + .timeline.empty { + display: none; + } + + .timeline > svg { + grid-row: 1 / 1; + fill: var(--in-content-box-background); + } + + .timeline > .line { + height: 2px; + justify-self: stretch; + align-self: center; + background-color: var(--in-content-border-color); + grid-row: 1; + } + + .timeline > .line:nth-child(1) { + grid-column: 1; + width: 50%; + justify-self: flex-end; + } + + .timeline > .line:nth-child(2) { + grid-column: 2/-2; + } + + .timeline > .line:nth-child(3) { + grid-column: -2; + width: 50%; + justify-self: flex-start; + } + + .timeline > .point { + width: 24px; + height: 24px; + stroke: var(--in-content-border-color); + stroke-width: 30px; + justify-self: center; + } + + .timeline > .date { + grid-row: 2; + padding: 4px 8px; + } + + .timeline > .action { + grid-row: 3; + } + `; + + render() { + this.history = this.history.filter(historyPoint => historyPoint.time); + this.history.sort((a, b) => a.time - b.time); + let columns = "auto"; + + // Add each history event to the timeline + let points = this.history.map((entry, index) => { + if (index > 0) { + // add a gap between previous point and current one + columns += ` ${entry.time - this.history[index - 1].time}fr auto`; + } + + let columnNumber = 2 * index + 1; + let styles = styleMap({ gridColumn: columnNumber }); + return html` + + + +
+
+ `; + }); + + return html` +
+
+
+
+ ${points} +
+ `; + } +} + +customElements.define("login-timeline", Timeline); diff --git a/browser/components/aboutlogins/content/components/menu-button.css b/browser/components/aboutlogins/content/components/menu-button.css new file mode 100644 index 0000000000..57e26676b3 --- /dev/null +++ b/browser/components/aboutlogins/content/components/menu-button.css @@ -0,0 +1,93 @@ +/* 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/. */ + +:host { + position: relative; +} + +.menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + width: 30px; + min-width: 30px; + margin: 0; +} + +.menu { + position: absolute; + inset-inline-end: 0; + margin: 0; + padding: 5px 0; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + box-shadow: var(--shadow-30); + min-width: max-content; + list-style-type: none; + display: flex; + flex-direction: column; + /* Show on top of .breach-alert which is also positioned */ + z-index: 1; + font: menu; +} + +.menuitem-button { + padding: 4px 8px; + /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */ + padding-inline-start: 32px; + background-repeat: no-repeat; + background-position: left 8px center; + background-size: 16px; + -moz-context-properties: fill; + fill: currentColor; + + /* Override common.inc.css properties */ + margin: 0; + border: 0; + border-radius: 0; + text-align: start; + min-height: initial; + font: inherit; +} + +.menuitem-button:dir(rtl) { + background-position-x: right 8px; +} + +.menuitem-button:focus-visible { + outline-offset: var(--in-content-focus-outline-inset); +} + +.menuitem-separator { + border-top-width: 1px; + margin-block: 5px; + width: 100%; +} + +.menuitem-help { + background-image: url("chrome://global/skin/icons/help.svg"); +} + +.menuitem-import-browser { + background-image: url("chrome://browser/skin/import.svg"); +} + +.menuitem-import-file { + background-image: url("chrome://browser/skin/import.svg"); +} + +.menuitem-export { + background-image: url("chrome://browser/skin/save.svg"); +} + +.menuitem-remove-all-logins { + background-image: url("chrome://global/skin/icons/delete.svg"); +} + +.menuitem-preferences { + background-image: url("chrome://global/skin/icons/settings.svg"); +} diff --git a/browser/components/aboutlogins/content/components/menu-button.mjs b/browser/components/aboutlogins/content/components/menu-button.mjs new file mode 100644 index 0000000000..bb69b711c9 --- /dev/null +++ b/browser/components/aboutlogins/content/components/menu-button.mjs @@ -0,0 +1,183 @@ +/* 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/. */ + +export default class MenuButton extends HTMLElement { + connectedCallback() { + if (this.shadowRoot) { + return; + } + + let MenuButtonTemplate = document.querySelector("#menu-button-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(MenuButtonTemplate.content.cloneNode(true)); + + for (let menuitem of this.shadowRoot.querySelectorAll( + ".menuitem-button[data-supported-platforms]" + )) { + let supportedPlatforms = menuitem.dataset.supportedPlatforms + .split(",") + .map(platform => platform.trim()); + if (supportedPlatforms.includes(navigator.platform)) { + menuitem.hidden = false; + } + } + + this._menu = this.shadowRoot.querySelector(".menu"); + this._menuButton = this.shadowRoot.querySelector(".menu-button"); + + this._menuButton.addEventListener("click", this); + document.addEventListener("keydown", this, true); + } + + handleEvent(event) { + switch (event.type) { + case "blur": { + if (event.explicitOriginalTarget) { + let node = event.explicitOriginalTarget; + if (node.nodeType == Node.TEXT_NODE) { + node = node.parentElement; + } + if (node.closest(".menu") == this._menu) { + // Only hide the menu if focus has left the menu-button. + return; + } + } + this._hideMenu(); + break; + } + case "click": { + // Skip the catch-all event listener if it was the menu-button + // that was clicked on. + if ( + event.currentTarget == document.documentElement && + event.target == this && + event.originalTarget == this._menuButton + ) { + return; + } + + if (event.originalTarget == this._menuButton) { + this._toggleMenu(); + if (!this._menu.hidden) { + this._menuButton.focus(); + } + return; + } + + let classList = event.originalTarget.classList; + if (classList.contains("menuitem-button")) { + let eventName = event.originalTarget.dataset.eventName; + const linkTrackingSource = "Elipsis_Menu"; + document.dispatchEvent( + new CustomEvent(eventName, { + bubbles: true, + detail: linkTrackingSource, + }) + ); + + // Bug 1645365: Only hide the menu when the buttons are clicked + // So that the menu isn't closed when non-buttons (e.g. separators, paddings) are clicked + this._hideMenu(); + } + + // Explicitly close menu at the catch-all click event (i.e. a click outside of the menu) + if ( + !this._menu.contains(event.originalTarget) && + !this._menuButton.contains(event.originalTarget) + ) { + this._hideMenu(); + } + + break; + } + case "keydown": { + this._handleKeyDown(event); + } + } + } + + _handleKeyDown(event) { + if (event.key == "Enter" && event.originalTarget == this._menuButton) { + event.preventDefault(); + this._toggleMenu(); + this._focusSuccessor(true); + } else if (event.key == "Escape" && !this._menu.hidden) { + this._hideMenu(); + this._menuButton.focus(); + } else if ( + (event.key == "ArrowDown" || event.key == "ArrowUp") && + !this._menu.hidden + ) { + event.preventDefault(); + this._focusSuccessor(event.key == "ArrowDown"); + } + } + + _focusSuccessor(next = true) { + let items = this._menu.querySelectorAll(".menuitem-button:not([hidden])"); + let firstItem = items[0]; + let lastItem = items[items.length - 1]; + + let activeItem = this.shadowRoot.activeElement; + let activeItemIndex = [...items].indexOf(activeItem); + + let successor = null; + + if (next) { + if (!activeItem || activeItem === lastItem) { + successor = firstItem; + } else { + successor = items[activeItemIndex + 1]; + } + } else if (activeItem === this._menuButton || activeItem === firstItem) { + successor = lastItem; + } else { + successor = items[activeItemIndex - 1]; + } + + if (this._menu.hidden) { + this._showMenu(); + } + if (successor.disabled) { + if (next) { + successor = items[activeItemIndex + 2]; + } else { + successor = items[activeItemIndex - 2]; + } + } + window.AboutLoginsUtils.setFocus(successor); + } + + _hideMenu() { + this._menu.hidden = true; + + this.removeEventListener("blur", this); + document.documentElement.removeEventListener("click", this, true); + } + + _showMenu() { + this._menu.querySelector(".menuitem-import-file").hidden = + !window.AboutLoginsUtils.fileImportEnabled; + + this._menu.hidden = false; + + // Event listeners to close the menu + this.addEventListener("blur", this); + document.documentElement.addEventListener("click", this, true); + } + + /** + * Toggles the visibility of the menu. + */ + _toggleMenu() { + let wasHidden = this._menu.hidden; + if (wasHidden) { + this._showMenu(); + } else { + this._hideMenu(); + } + } +} +customElements.define("menu-button", MenuButton); diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.css b/browser/components/aboutlogins/content/components/remove-logins-dialog.css new file mode 100644 index 0000000000..160ca47d03 --- /dev/null +++ b/browser/components/aboutlogins/content/components/remove-logins-dialog.css @@ -0,0 +1,102 @@ +/* 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/. */ + + .overlay { + position: fixed; + z-index: 1; + inset: 0; + /* TODO: this color is used in the about:preferences overlay, but + why isn't it declared as a variable? */ + background-color: rgba(0,0,0,0.5); + display: flex; +} + +.container { + z-index: 2; + position: relative; + display: flex; + flex-direction: column; + min-width: 300px; + max-width: 660px; + min-height: 200px; + margin: auto; + background-color: var(--in-content-page-background); + color: var(--in-content-text-color); + box-shadow: var(--shadow-30); + /* show a border in high contrast mode */ + outline: 1px solid transparent; +} + +.title { + grid-area: 1 / 2 / 2 / 8; +} + +.message { + font-weight: 600; + grid-area: 2 / 2 / 3 / 8; + font-size: 1.25em; +} + +.checkbox-text { + font-size: 1.25em; +} + +.dismiss-button { + position: absolute; + top: 0; + inset-inline-end: 0; + min-width: 20px; + min-height: 20px; + margin: 16px; + padding: 0; + line-height: 0; +} + +.dismiss-icon { + -moz-context-properties: fill; + fill: currentColor; +} + +.warning-icon { + -moz-context-properties: fill; + fill: currentColor; + width: 32px; + height: 32px; + margin: 8px; +} + +.content, +.buttons { + padding: 36px 48px; + padding-bottom: 24px; +} + +.content { + display: grid; + grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 0.5fr 0.5fr 0.5fr; +} + +.checkbox-wrapper { + grid-area: 3 / 2 / 4 / 8; + align-self: first baseline; + justify-self: start; +} + +.warning-icon { + grid-area: 1 / 1 / 2 / 2; +} + +.checkbox { + grid-area: 3 / 2 / 4 / 8; + font-size: 1.1em; + align-self: center; +} + +.buttons { + padding-block: 16px 32px; + padding-inline: 48px 0; + border-top: 1px solid var(--in-content-border-color); + margin-inline: 48px; +} diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.mjs b/browser/components/aboutlogins/content/components/remove-logins-dialog.mjs new file mode 100644 index 0000000000..94cd6ef13e --- /dev/null +++ b/browser/components/aboutlogins/content/components/remove-logins-dialog.mjs @@ -0,0 +1,117 @@ +/* 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/. */ + +import { setKeyboardAccessForNonDialogElements } from "../aboutLoginsUtils.mjs"; + +export default class RemoveLoginsDialog extends HTMLElement { + constructor() { + super(); + this._promise = null; + } + + connectedCallback() { + if (this.shadowRoot) { + return; + } + let template = document.querySelector("#remove-logins-dialog-template"); + let shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + shadowRoot.appendChild(template.content.cloneNode(true)); + + this._buttons = this.shadowRoot.querySelector(".buttons"); + this._cancelButton = this.shadowRoot.querySelector(".cancel-button"); + this._confirmButton = this.shadowRoot.querySelector(".confirm-button"); + this._dismissButton = this.shadowRoot.querySelector(".dismiss-button"); + this._message = this.shadowRoot.querySelector(".message"); + this._overlay = this.shadowRoot.querySelector(".overlay"); + this._title = this.shadowRoot.querySelector(".title"); + this._checkbox = this.shadowRoot.querySelector(".checkbox"); + this._checkboxLabel = this.shadowRoot.querySelector(".checkbox-text"); + } + + handleEvent(event) { + switch (event.type) { + case "keydown": + if (event.key === "Escape" && !event.defaultPrevented) { + this.onCancel(); + } + break; + case "click": + if ( + event.target.classList.contains("cancel-button") || + event.currentTarget.classList.contains("dismiss-button") || + event.target.classList.contains("overlay") + ) { + this.onCancel(); + } else if (event.target.classList.contains("confirm-button")) { + this.onConfirm(); + } else if (event.target.classList.contains("checkbox")) { + this._confirmButton.disabled = !this._checkbox.checked; + } + } + } + + hide() { + setKeyboardAccessForNonDialogElements(true); + this._cancelButton.removeEventListener("click", this); + this._confirmButton.removeEventListener("click", this); + this._dismissButton.removeEventListener("click", this); + this._overlay.removeEventListener("click", this); + this._checkbox.removeEventListener("click", this); + window.removeEventListener("keydown", this); + + this._checkbox.checked = false; + + this.hidden = true; + } + + show({ title, message, confirmButtonLabel, confirmCheckboxLabel, count }) { + setKeyboardAccessForNonDialogElements(false); + this.hidden = false; + + document.l10n.setAttributes(this._title, title, { + count, + }); + document.l10n.setAttributes(this._message, message, { + count, + }); + document.l10n.setAttributes(this._confirmButton, confirmButtonLabel, { + count, + }); + document.l10n.setAttributes(this._checkboxLabel, confirmCheckboxLabel, { + count, + }); + + this._checkbox.addEventListener("click", this); + this._cancelButton.addEventListener("click", this); + this._confirmButton.addEventListener("click", this); + this._dismissButton.addEventListener("click", this); + this._overlay.addEventListener("click", this); + window.addEventListener("keydown", this); + + this._confirmButton.disabled = true; + // For speed-of-use, focus the confirmation checkbox when the dialog loads. + // Introducing this checkbox provides enough of a buffer for accidental deletions. + this._checkbox.focus(); + + this._promise = new Promise((resolve, reject) => { + this._resolve = resolve; + this._reject = reject; + }); + + return this._promise; + } + + onCancel() { + this._reject(); + this.hide(); + } + + onConfirm() { + this._resolve(); + this.hide(); + } +} + +customElements.define("remove-logins-dialog", RemoveLoginsDialog); diff --git a/browser/components/aboutlogins/content/icons/breached-website.svg b/browser/components/aboutlogins/content/icons/breached-website.svg new file mode 100644 index 0000000000..7ab9d5a173 --- /dev/null +++ b/browser/components/aboutlogins/content/icons/breached-website.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/components/aboutlogins/content/icons/intro-illustration.svg b/browser/components/aboutlogins/content/icons/intro-illustration.svg new file mode 100644 index 0000000000..accbd3b979 --- /dev/null +++ b/browser/components/aboutlogins/content/icons/intro-illustration.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/components/aboutlogins/content/icons/vulnerable-password.svg b/browser/components/aboutlogins/content/icons/vulnerable-password.svg new file mode 100644 index 0000000000..9ffac637c9 --- /dev/null +++ b/browser/components/aboutlogins/content/icons/vulnerable-password.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/components/aboutlogins/jar.mn b/browser/components/aboutlogins/jar.mn new file mode 100644 index 0000000000..5821de278a --- /dev/null +++ b/browser/components/aboutlogins/jar.mn @@ -0,0 +1,42 @@ +# 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/. + +browser.jar: + content/browser/aboutlogins/components/confirmation-dialog.css (content/components/confirmation-dialog.css) + content/browser/aboutlogins/components/confirmation-dialog.mjs (content/components/confirmation-dialog.mjs) + content/browser/aboutlogins/components/remove-logins-dialog.css (content/components/remove-logins-dialog.css) + content/browser/aboutlogins/components/remove-logins-dialog.mjs (content/components/remove-logins-dialog.mjs) + content/browser/aboutlogins/components/import-summary-dialog.css (content/components/import-summary-dialog.css) + content/browser/aboutlogins/components/import-summary-dialog.mjs (content/components/import-summary-dialog.mjs) + content/browser/aboutlogins/components/import-error-dialog.css (content/components/import-error-dialog.css) + content/browser/aboutlogins/components/import-error-dialog.mjs (content/components/import-error-dialog.mjs) + content/browser/aboutlogins/components/import-details-row.mjs (content/components/import-details-row.mjs) + content/browser/aboutlogins/components/generic-dialog.css (content/components/generic-dialog.css) + content/browser/aboutlogins/components/generic-dialog.mjs (content/components/generic-dialog.mjs) + content/browser/aboutlogins/components/fxaccounts-button.css (content/components/fxaccounts-button.css) + content/browser/aboutlogins/components/fxaccounts-button.mjs (content/components/fxaccounts-button.mjs) + content/browser/aboutlogins/components/login-filter.css (content/components/login-filter.css) + content/browser/aboutlogins/components/login-filter.mjs (content/components/login-filter.mjs) + content/browser/aboutlogins/components/login-intro.css (content/components/login-intro.css) + content/browser/aboutlogins/components/login-intro.mjs (content/components/login-intro.mjs) + content/browser/aboutlogins/components/login-item.css (content/components/login-item.css) + content/browser/aboutlogins/components/login-item.mjs (content/components/login-item.mjs) + content/browser/aboutlogins/components/login-list.css (content/components/login-list.css) + content/browser/aboutlogins/components/login-list.mjs (content/components/login-list.mjs) + content/browser/aboutlogins/components/login-list-item.mjs (content/components/login-list-item.mjs) + content/browser/aboutlogins/components/login-list-section.mjs (content/components/login-list-section.mjs) + content/browser/aboutlogins/components/menu-button.css (content/components/menu-button.css) + content/browser/aboutlogins/components/menu-button.mjs (content/components/menu-button.mjs) + content/browser/aboutlogins/components/login-timeline.mjs (content/components/login-timeline.mjs) + content/browser/aboutlogins/icons/breached-website.svg (content/icons/breached-website.svg) + content/browser/aboutlogins/icons/vulnerable-password.svg (content/icons/vulnerable-password.svg) + content/browser/aboutlogins/icons/intro-illustration.svg (content/icons/intro-illustration.svg) + content/browser/aboutlogins/aboutLogins.css (content/aboutLogins.css) + content/browser/aboutlogins/aboutLogins.mjs (content/aboutLogins.mjs) + content/browser/aboutlogins/aboutLogins.html (content/aboutLogins.html) + content/browser/aboutlogins/aboutLoginsImportReport.css (content/aboutLoginsImportReport.css) + content/browser/aboutlogins/aboutLoginsImportReport.mjs (content/aboutLoginsImportReport.mjs) + content/browser/aboutlogins/aboutLoginsImportReport.html (content/aboutLoginsImportReport.html) + content/browser/aboutlogins/aboutLoginsUtils.mjs (content/aboutLoginsUtils.mjs) + content/browser/aboutlogins/common.css (content/common.css) diff --git a/browser/components/aboutlogins/moz.build b/browser/components/aboutlogins/moz.build new file mode 100644 index 0000000000..200b05fed6 --- /dev/null +++ b/browser/components/aboutlogins/moz.build @@ -0,0 +1,23 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] + +with Files("**"): + BUG_COMPONENT = ("Firefox", "about:logins") + +EXTRA_JS_MODULES += [ + "LoginBreaches.sys.mjs", +] + +FINAL_TARGET_FILES.actors += [ + "AboutLoginsChild.sys.mjs", + "AboutLoginsParent.sys.mjs", +] + +BROWSER_CHROME_MANIFESTS += ["tests/browser/browser.ini"] +MOCHITEST_CHROME_MANIFESTS += ["tests/chrome/chrome.ini"] +XPCSHELL_TESTS_MANIFESTS += ["tests/unit/xpcshell.ini"] diff --git a/browser/components/aboutlogins/tests/browser/AboutLoginsTestUtils.sys.mjs b/browser/components/aboutlogins/tests/browser/AboutLoginsTestUtils.sys.mjs new file mode 100644 index 0000000000..44a51b80ad --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/AboutLoginsTestUtils.sys.mjs @@ -0,0 +1,107 @@ +/* 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/. */ + +/** + * An utility class to help out with the about:logins and about:loginsimportreport DOM interaction for the tests. + * + */ +export class AboutLoginsTestUtils { + /** + * An utility method to fetch the data from the CSV import success dialog. + * + * @param {content} content + * The content object. + * @param {ContentTaskUtils} ContentTaskUtils + * The ContentTaskUtils object. + * @returns {Promise} A promise that contains added, modified, noChange and errors count. + */ + static async getCsvImportSuccessDialogData(content, ContentTaskUtils) { + let dialog = Cu.waiveXrays( + content.document.querySelector("import-summary-dialog") + ); + await ContentTaskUtils.waitForCondition( + () => !dialog.hidden, + "Waiting for the dialog to be visible" + ); + + let added = dialog.shadowRoot.querySelector( + ".import-items-added .result-count" + ).textContent; + let modified = dialog.shadowRoot.querySelector( + ".import-items-modified .result-count" + ).textContent; + let noChange = dialog.shadowRoot.querySelector( + ".import-items-no-change .result-count" + ).textContent; + let errors = dialog.shadowRoot.querySelector( + ".import-items-errors .result-count" + ).textContent; + return { + added, + modified, + noChange, + errors, + l10nFocused: dialog.shadowRoot.activeElement.getAttribute("data-l10n-id"), + }; + } + + /** + * An utility method to fetch the data from the CSV import error dialog. + * + * @param {content} content + * The content object. + * @returns {Promise} A promise that contains the hidden state and l10n id for title, description and focused element. + */ + static async getCsvImportErrorDialogData(content) { + const dialog = Cu.waiveXrays( + content.document.querySelector("import-error-dialog") + ); + const l10nTitle = dialog._genericDialog + .querySelector(".error-title") + .getAttribute("data-l10n-id"); + const l10nDescription = dialog._genericDialog + .querySelector(".error-description") + .getAttribute("data-l10n-id"); + return { + hidden: dialog.hidden, + l10nFocused: dialog.shadowRoot.activeElement.getAttribute("data-l10n-id"), + l10nTitle, + l10nDescription, + }; + } + + /** + * An utility method to fetch data from the about:loginsimportreport page. + * It also cleans up the tab so you don't have to. + * + * @param {content} content + * The content object. + * @returns {Promise} A promise that contains the detailed report data like added, modified, noChange, errors and rows. + */ + static async getCsvImportReportData(content) { + const rows = []; + for (let element of content.document.querySelectorAll(".row-details")) { + rows.push(element.getAttribute("data-l10n-id")); + } + const added = content.document.querySelector( + ".new-logins .result-count" + ).textContent; + const modified = content.document.querySelector( + ".exiting-logins .result-count" + ).textContent; + const noChange = content.document.querySelector( + ".duplicate-logins .result-count" + ).textContent; + const errors = content.document.querySelector( + ".errors-logins .result-count" + ).textContent; + return { + rows, + added, + modified, + noChange, + errors, + }; + } +} diff --git a/browser/components/aboutlogins/tests/browser/browser.ini b/browser/components/aboutlogins/tests/browser/browser.ini new file mode 100644 index 0000000000..06eb8ab92a --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser.ini @@ -0,0 +1,58 @@ +[DEFAULT] +support-files = + head.js +prefs = + signon.management.page.vulnerable-passwords.enabled=true + signon.management.page.os-auth.enabled=true + # lower the interval for event telemetry in the content process to update the parent process + toolkit.telemetry.ipcBatchTimeout=10 + +# Run first so content events from previous tests won't trickle in. +# Skip ASAN and debug since waiting for content events is already slow. +[browser_aaa_eventTelemetry_run_first.js] +skip-if = + asan || tsan || ccov || debug || (os == "win" && !debug) # bug 1605494 is more prevalent on linux, Bug 1627419 + os == 'linux' && bits == 64 && !debug # Bug 1648862 +[browser_alertDismissedAfterChangingPassword.js] +skip-if = + os == "mac" && os_version == "10.15" && !debug # Bug 1684513 +[browser_breachAlertShowingForAddedLogin.js] +[browser_confirmDeleteDialog.js] +[browser_contextmenuFillLogins.js] +skip-if = win10_2004 && debug # Bug 1723573 +[browser_copyToClipboardButton.js] +[browser_createLogin.js] +[browser_deleteLogin.js] +[browser_fxAccounts.js] +[browser_loginFilter.js] +[browser_loginItemErrors.js] +skip-if = debug # Bug 1577710 +[browser_loginListChanges.js] +[browser_loginSortOrderRestored.js] +skip-if = os == 'linux' && bits == 64 && os_version == '18.04' # Bug 1587625; Bug 1587626 for linux1804 +[browser_noLoginsView.js] +[browser_openExport.js] +[browser_openFiltered.js] +[browser_openImport.js] +skip-if = + os != "win" && os != "mac" # import is only available on Windows and macOS + os == "mac" && !debug # bug 1775753 +[browser_openImportCSV.js] +[browser_openPreferences.js] +[browser_openPreferencesExternal.js] +[browser_openSite.js] +skip-if = + os == "linux" && bits == 64 # Bug 1581889 +[browser_osAuthDialog.js] +skip-if = (os == 'linux') # bug 1527745 +[browser_primaryPassword.js] +skip-if = + (os == 'linux') # bug 1569789 +[browser_removeAllDialog.js] +[browser_sessionRestore.js] +skip-if = + tsan + debug # Bug 1576876 +[browser_tabKeyNav.js] +[browser_updateLogin.js] +[browser_vulnerableLoginAddedInSecondaryWindow.js] diff --git a/browser/components/aboutlogins/tests/browser/browser_aaa_eventTelemetry_run_first.js b/browser/components/aboutlogins/tests/browser/browser_aaa_eventTelemetry_run_first.js new file mode 100644 index 0000000000..0ff77a2240 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_aaa_eventTelemetry_run_first.js @@ -0,0 +1,271 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +requestLongerTimeout(2); + +const { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +let VULNERABLE_TEST_LOGIN2 = new nsLoginInfo( + "https://2.example.com", + "https://2.example.com", + null, + "user2", + "pass3", + "username", + "password" +); + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + VULNERABLE_TEST_LOGIN2 = await addLogin(VULNERABLE_TEST_LOGIN2); + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + + await TestUtils.waitForCondition(() => { + Services.telemetry.clearEvents(); + let events = Services.telemetry.snapshotEvents( + Ci.nsITelemetry.DATASET_PRERELEASE_CHANNELS, + true + ).content; + return !events || !events.length; + }, "Waiting for telemetry events to get cleared"); + + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_telemetry_events() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginList = content.document.querySelector("login-list"); + let loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item.breached" + ); + loginListItem.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(2); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-username-button" + ); + copyButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(3); + + if (OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + let reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-password-button" + ); + copyButton.click(); + }); + await reauthObserved; + // When reauth is observed an extra telemetry event will be recorded + // for the reauth, hence the event count increasing by 2 here, and later + // in the test as well. + await LoginTestUtils.telemetry.waitForEventCount(5); + } + let nextTelemetryEventCount = OSKeyStoreTestUtils.canTestOSKeyStoreLogin() + ? 6 + : 4; + + let promiseNewTab = BrowserTestUtils.waitForNewTab( + gBrowser, + TEST_LOGIN3.origin + "/" + ); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let originInput = loginItem.shadowRoot.querySelector(".origin-input"); + originInput.click(); + }); + let newTab = await promiseNewTab; + Assert.ok(true, "New tab opened to " + TEST_LOGIN3.origin); + BrowserTestUtils.removeTab(newTab); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + // Show the password + if (OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + let reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + nextTelemetryEventCount++; // An extra event is observed for the reauth event. + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await reauthObserved; + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + // Hide the password + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + // Don't force the auth timeout here to check that `auth_skipped: true` is set as + // in `extra`. + nextTelemetryEventCount++; // An extra event is observed for the reauth event. + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let usernameField = loginItem.shadowRoot.querySelector( + 'input[name="username"]' + ); + usernameField.value = "user1-modified"; + + let saveButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + } + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let deleteButton = loginItem.shadowRoot.querySelector(".delete-button"); + deleteButton.click(); + let confirmDeleteDialog = content.document.querySelector( + "confirmation-dialog" + ); + let confirmDeleteButton = + confirmDeleteDialog.shadowRoot.querySelector(".confirm-button"); + confirmDeleteButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let newLoginButton = content.document + .querySelector("login-list") + .shadowRoot.querySelector(".create-login-button"); + newLoginButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + cancelButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginList = content.document.querySelector("login-list"); + let loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item.vulnerable" + ); + loginListItem.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-username-button" + ); + copyButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let deleteButton = loginItem.shadowRoot.querySelector(".delete-button"); + deleteButton.click(); + let confirmDeleteDialog = content.document.querySelector( + "confirmation-dialog" + ); + let confirmDeleteButton = + confirmDeleteDialog.shadowRoot.querySelector(".confirm-button"); + confirmDeleteButton.click(); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginSort = content.document + .querySelector("login-list") + .shadowRoot.querySelector("#login-sort"); + loginSort.value = "last-used"; + loginSort.dispatchEvent(new content.Event("change", { bubbles: true })); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + registerCleanupFunction(() => { + Services.prefs.clearUserPref("signon.management.page.sort"); + }); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + const loginList = content.document.querySelector("login-list"); + const loginFilter = loginList.shadowRoot.querySelector("login-filter"); + const input = loginFilter.shadowRoot.querySelector("input"); + input.setUserInput("test"); + }); + await LoginTestUtils.telemetry.waitForEventCount(nextTelemetryEventCount++); + + const testOSAuth = OSKeyStoreTestUtils.canTestOSKeyStoreLogin(); + let expectedEvents = [ + [true, "pwmgr", "open_management", "direct"], + [true, "pwmgr", "select", "existing_login", null, { breached: "true" }], + [true, "pwmgr", "copy", "username", null, { breached: "true" }], + [testOSAuth, "pwmgr", "reauthenticate", "os_auth", "success"], + [testOSAuth, "pwmgr", "copy", "password", null, { breached: "true" }], + [true, "pwmgr", "open_site", "existing_login", null, { breached: "true" }], + [testOSAuth, "pwmgr", "reauthenticate", "os_auth", "success"], + [testOSAuth, "pwmgr", "show", "password", null, { breached: "true" }], + [testOSAuth, "pwmgr", "hide", "password", null, { breached: "true" }], + [testOSAuth, "pwmgr", "reauthenticate", "os_auth", "success_no_prompt"], + [testOSAuth, "pwmgr", "edit", "existing_login", null, { breached: "true" }], + [testOSAuth, "pwmgr", "save", "existing_login", null, { breached: "true" }], + [true, "pwmgr", "delete", "existing_login", null, { breached: "true" }], + [true, "pwmgr", "new", "new_login"], + [true, "pwmgr", "cancel", "new_login"], + [true, "pwmgr", "select", "existing_login", null, { vulnerable: "true" }], + [true, "pwmgr", "copy", "username", null, { vulnerable: "true" }], + [true, "pwmgr", "delete", "existing_login", null, { vulnerable: "true" }], + [true, "pwmgr", "sort", "list"], + [true, "pwmgr", "filter", "list"], + ]; + expectedEvents = expectedEvents + .filter(event => event[0]) + .map(event => event.slice(1)); + + TelemetryTestUtils.assertEvents( + expectedEvents, + { category: "pwmgr" }, + { clear: true, process: "content" } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_alertDismissedAfterChangingPassword.js b/browser/components/aboutlogins/tests/browser/browser_alertDismissedAfterChangingPassword.js new file mode 100644 index 0000000000..623df38fcb --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_alertDismissedAfterChangingPassword.js @@ -0,0 +1,227 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +let VULNERABLE_TEST_LOGIN2 = new nsLoginInfo( + "https://2.example.com", + "https://2.example.com", + null, + "user2", + "pass3", + "username", + "password" +); + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + VULNERABLE_TEST_LOGIN2 = await addLogin(VULNERABLE_TEST_LOGIN2); + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_added_login_shows_breach_warning() { + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn( + browser, + [[TEST_LOGIN1.guid, VULNERABLE_TEST_LOGIN2.guid, TEST_LOGIN3.guid]], + async ([regularLoginGuid, vulnerableLoginGuid, breachedLoginGuid]) => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => loginList.shadowRoot.querySelectorAll(".login-list-item").length, + "Waiting for login-list to get populated" + ); + let { listItem: regularListItem } = loginList._logins[regularLoginGuid]; + let { listItem: vulnerableListItem } = + loginList._logins[vulnerableLoginGuid]; + let { listItem: breachedListItem } = loginList._logins[breachedLoginGuid]; + await ContentTaskUtils.waitForCondition(() => { + return ( + !regularListItem.matches(".breached.vulnerable") && + vulnerableListItem.matches(".vulnerable") && + breachedListItem.matches(".breached") + ); + }, `waiting for the list items to get their classes updated: ${regularListItem.className} / ${vulnerableListItem.className} / ${breachedListItem.className}`); + Assert.ok( + !regularListItem.classList.contains("breached") && + !regularListItem.classList.contains("vulnerable"), + "regular login should not be marked breached or vulnerable: " + + regularLoginGuid.className + ); + Assert.ok( + !vulnerableListItem.classList.contains("breached") && + vulnerableListItem.classList.contains("vulnerable"), + "vulnerable login should be marked vulnerable: " + + vulnerableListItem.className + ); + Assert.ok( + breachedListItem.classList.contains("breached") && + !breachedListItem.classList.contains("vulnerable"), + "breached login should be marked breached: " + + breachedListItem.className + ); + + breachedListItem.click(); + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition(() => { + return loginItem._login && loginItem._login.guid == breachedLoginGuid; + }, "waiting for breached login to get selected"); + Assert.ok( + !ContentTaskUtils.is_hidden( + loginItem.shadowRoot.querySelector(".breach-alert") + ), + "the breach alert should be visible" + ); + } + ); + + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + info( + "leaving test early since the remaining part of the test requires 'edit' mode which requires 'oskeystore' login" + ); + return; + } + + let reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + // Change the password on the breached login and check that the + // login is no longer marked as breached. The vulnerable login + // should still be marked as vulnerable afterwards. + await SpecialPowers.spawn(browser, [], () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + loginItem.shadowRoot.querySelector(".edit-button").click(); + }); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [[TEST_LOGIN1.guid, VULNERABLE_TEST_LOGIN2.guid, TEST_LOGIN3.guid]], + async ([regularLoginGuid, vulnerableLoginGuid, breachedLoginGuid]) => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing == "true", + "waiting for login-item to enter edit mode" + ); + + // The password display field is in the DOM when password input is unfocused. + // To get the password input field, ensure it receives focus. + let passwordInput = loginItem.shadowRoot.querySelector( + "input[type='password']" + ); + passwordInput.focus(); + passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + + const CHANGED_PASSWORD_VALUE = "changedPassword"; + passwordInput.value = CHANGED_PASSWORD_VALUE; + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveChangesButton.click(); + + await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._logins[breachedLoginGuid].login.password == + CHANGED_PASSWORD_VALUE + ); + }, "waiting for stored login to get updated"); + + Assert.ok( + ContentTaskUtils.is_hidden( + loginItem.shadowRoot.querySelector(".breach-alert") + ), + "the breach alert should be hidden now" + ); + + let { listItem: breachedListItem } = loginList._logins[breachedLoginGuid]; + let { listItem: vulnerableListItem } = + loginList._logins[vulnerableLoginGuid]; + Assert.ok( + !breachedListItem.classList.contains("breached") && + !breachedListItem.classList.contains("vulnerable"), + "the originally breached login should no longer be marked as breached" + ); + Assert.ok( + !vulnerableListItem.classList.contains("breached") && + vulnerableListItem.classList.contains("vulnerable"), + "vulnerable login should still be marked vulnerable: " + + vulnerableListItem.className + ); + + // Change the password on the vulnerable login and check that the + // login is no longer marked as vulnerable. + vulnerableListItem.click(); + await ContentTaskUtils.waitForCondition(() => { + return loginItem._login && loginItem._login.guid == vulnerableLoginGuid; + }, "waiting for vulnerable login to get selected"); + Assert.ok( + !ContentTaskUtils.is_hidden( + loginItem.shadowRoot.querySelector(".vulnerable-alert") + ), + "the vulnerable alert should be visible" + ); + loginItem.shadowRoot.querySelector(".edit-button").click(); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing == "true", + "waiting for login-item to enter edit mode" + ); + + passwordInput.value = CHANGED_PASSWORD_VALUE; + saveChangesButton.click(); + + await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._logins[vulnerableLoginGuid].login.password == + CHANGED_PASSWORD_VALUE + ); + }, "waiting for stored login to get updated"); + + Assert.ok( + ContentTaskUtils.is_hidden( + loginItem.shadowRoot.querySelector(".vulnerable-alert") + ), + "the vulnerable alert should be hidden now" + ); + Assert.equal( + vulnerableListItem.querySelector(".alert-icon").src, + "", + ".alert-icon for the vulnerable list item should have its source removed" + ); + vulnerableListItem = loginList._logins[vulnerableLoginGuid].listItem; + Assert.ok( + !vulnerableListItem.classList.contains("breached") && + !vulnerableListItem.classList.contains("vulnerable"), + "vulnerable login should no longer be marked vulnerable: " + + vulnerableListItem.className + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_breachAlertShowingForAddedLogin.js b/browser/components/aboutlogins/tests/browser/browser_breachAlertShowingForAddedLogin.js new file mode 100644 index 0000000000..a5aef703fa --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_breachAlertShowingForAddedLogin.js @@ -0,0 +1,123 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_added_login_shows_breach_warning() { + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 0, + "the login list should be empty" + ); + }); + + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + await SpecialPowers.spawn( + browser, + [TEST_LOGIN3.guid], + async aTestLogin3Guid => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => loginList._loginGuidsSortedOrder.length == 1, + "waiting for login list count to equal one. count=" + + loginList._loginGuidsSortedOrder.length + ); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 1, + "one login should be in the list" + ); + let breachedLoginListItems; + await ContentTaskUtils.waitForCondition(() => { + breachedLoginListItems = loginList._list.querySelectorAll( + ".login-list-item[data-guid].breached" + ); + return breachedLoginListItems.length == 1; + }, "waiting for the login to get marked as breached"); + Assert.equal( + breachedLoginListItems[0].dataset.guid, + aTestLogin3Guid, + "the breached login should be login3" + ); + } + ); + + info("adding a login that uses the same password as the breached login"); + let vulnerableLogin = new nsLoginInfo( + "https://2.example.com", + "https://2.example.com", + null, + "user2", + "pass3", + "username", + "password" + ); + vulnerableLogin = await addLogin(vulnerableLogin); + await SpecialPowers.spawn( + browser, + [[TEST_LOGIN3.guid, vulnerableLogin.guid]], + async ([aTestLogin3Guid, aVulnerableLoginGuid]) => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => loginList._loginGuidsSortedOrder.length == 2, + "waiting for login list count to equal two. count=" + + loginList._loginGuidsSortedOrder.length + ); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 2, + "two logins should be in the list" + ); + let breachedAndVulnerableLoginListItems; + await ContentTaskUtils.waitForCondition(() => { + breachedAndVulnerableLoginListItems = [ + ...loginList._list.querySelectorAll(".breached, .vulnerable"), + ]; + return breachedAndVulnerableLoginListItems.length == 2; + }, "waiting for the logins to get marked as breached and vulnerable"); + Assert.ok( + !!breachedAndVulnerableLoginListItems.find( + listItem => listItem.dataset.guid == aTestLogin3Guid + ), + "the list should include the breached login: " + + breachedAndVulnerableLoginListItems.map(li => li.dataset.guid) + ); + Assert.ok( + !!breachedAndVulnerableLoginListItems.find( + listItem => listItem.dataset.guid == aVulnerableLoginGuid + ), + "the list should include the vulnerable login: " + + breachedAndVulnerableLoginListItems.map(li => li.dataset.guid) + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_confirmDeleteDialog.js b/browser/components/aboutlogins/tests/browser/browser_confirmDeleteDialog.js new file mode 100644 index 0000000000..52c288c780 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_confirmDeleteDialog.js @@ -0,0 +1,128 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test() { + let browser = gBrowser.selectedBrowser; + + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + + let showPromise = loginItem.showConfirmationDialog("delete"); + + let dialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + let cancelButton = dialog.shadowRoot.querySelector(".cancel-button"); + let confirmDeleteButton = + dialog.shadowRoot.querySelector(".confirm-button"); + let dismissButton = dialog.shadowRoot.querySelector(".dismiss-button"); + let message = dialog.shadowRoot.querySelector(".message"); + let title = dialog.shadowRoot.querySelector(".title"); + + await content.document.l10n.translateElements([ + title, + message, + cancelButton, + confirmDeleteButton, + ]); + + Assert.equal( + title.textContent, + "Remove this login?", + "Title contents should match l10n attribute set on outer element" + ); + Assert.equal( + message.textContent, + "This action cannot be undone.", + "Message contents should match l10n attribute set on outer element" + ); + Assert.equal( + cancelButton.textContent, + "Cancel", + "Cancel button contents should match l10n attribute set on outer element" + ); + Assert.equal( + confirmDeleteButton.textContent, + "Remove", + "Remove button contents should match l10n attribute set on outer element" + ); + + cancelButton.click(); + try { + await showPromise; + Assert.ok( + false, + "Promise returned by show() should not resolve after clicking cancel button" + ); + } catch (ex) { + Assert.ok( + true, + "Promise returned by show() should reject after clicking cancel button" + ); + } + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden" + ); + Assert.ok( + dialog.hidden, + "Dialog should be hidden after clicking cancel button" + ); + + showPromise = loginItem.showConfirmationDialog("delete"); + dismissButton.click(); + try { + await showPromise; + Assert.ok( + false, + "Promise returned by show() should not resolve after clicking dismiss button" + ); + } catch (ex) { + Assert.ok( + true, + "Promise returned by show() should reject after clicking dismiss button" + ); + } + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden" + ); + Assert.ok( + dialog.hidden, + "Dialog should be hidden after clicking dismiss button" + ); + + showPromise = loginItem.showConfirmationDialog("delete"); + confirmDeleteButton.click(); + try { + await showPromise; + Assert.ok( + true, + "Promise returned by show() should resolve after clicking confirm button" + ); + } catch (ex) { + Assert.ok( + false, + "Promise returned by show() should not reject after clicking confirm button" + ); + } + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden" + ); + Assert.ok( + dialog.hidden, + "Dialog should be hidden after clicking confirm button" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_contextmenuFillLogins.js b/browser/components/aboutlogins/tests/browser/browser_contextmenuFillLogins.js new file mode 100644 index 0000000000..a10d92baac --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_contextmenuFillLogins.js @@ -0,0 +1,185 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +const gTests = [ + { + name: "test contextmenu on password field in create login view", + async setup(browser) { + // load up the create login view + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let createButton = loginList._createLoginButton; + createButton.click(); + }); + }, + }, +]; + +if (OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + gTests[gTests.length] = { + name: "test contextmenu on password field in edit login view", + async setup(browser) { + let osAuthDialogShown = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + + // load up the edit login view + await SpecialPowers.spawn( + browser, + [LoginHelper.loginToVanillaObject(TEST_LOGIN1)], + async login => { + let loginList = content.document.querySelector("login-list"); + let loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ); + info("Clicking on the first login"); + + loginListItem.click(); + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition(() => { + return ( + loginItem._login.guid == loginListItem.dataset.guid && + loginItem._login.guid == login.guid + ); + }, "Waiting for login item to get populated"); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + } + ); + await osAuthDialogShown; + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Waiting for login-item to be in editing state" + ); + }); + }, + }; +} + +/** + * Synthesize mouse clicks to open the password manager context menu popup + * for a target input element. + * + */ +async function openContextMenuForPasswordInput(browser) { + const doc = browser.ownerDocument; + const CONTEXT_MENU = doc.getElementById("contentAreaContextMenu"); + + let contextMenuShownPromise = BrowserTestUtils.waitForEvent( + CONTEXT_MENU, + "popupshown" + ); + + let passwordInputCoords = await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + + // The password display field is in the DOM when password input is unfocused. + // To get the password input field, ensure it receives focus. + let passwordInput = loginItem.shadowRoot.querySelector( + "input[type='password']" + ); + passwordInput.focus(); + passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + + passwordInput.focus(); + let passwordRect = passwordInput.getBoundingClientRect(); + + // listen for the contextmenu event so we can assert on receiving it + // and examine the target + content.contextmenuPromise = new Promise(resolve => { + content.document.body.addEventListener( + "contextmenu", + event => { + info( + `Received event on target: ${event.target.nodeName}, type: ${event.target.type}` + ); + content.console.log("got contextmenu event: ", event); + resolve(event); + }, + { once: true } + ); + }); + + let coords = { + x: passwordRect.x + passwordRect.width / 2, + y: passwordRect.y + passwordRect.height / 2, + }; + return coords; + }); + + // add the offsets of the in the chrome window + let browserOffsets = browser.getBoundingClientRect(); + let offsetX = browserOffsets.x + passwordInputCoords.x; + let offsetY = browserOffsets.y + passwordInputCoords.y; + + // Synthesize a right mouse click over the password input element, we have to trigger + // both events because formfill code relies on this event happening before the contextmenu + // (which it does for real user input) in order to not show the password autocomplete. + let eventDetails = { type: "mousedown", button: 2 }; + await EventUtils.synthesizeMouseAtPoint(offsetX, offsetY, eventDetails); + + // Synthesize a contextmenu event to actually open the context menu. + eventDetails = { type: "contextmenu", button: 2 }; + await EventUtils.synthesizeMouseAtPoint(offsetX, offsetY, eventDetails); + + await SpecialPowers.spawn(browser, [], async () => { + let event = await content.contextmenuPromise; + // XXX the event target here is the login-item element, + // not the input[type='password'] in its shadowRoot + info("contextmenu event target: " + event.target.nodeName); + }); + + info("waiting for contextMenuShownPromise"); + await contextMenuShownPromise; + return CONTEXT_MENU; +} + +async function testContextMenuOnInputField(testData) { + let browser = gBrowser.selectedBrowser; + + await SimpleTest.promiseFocus(browser.ownerGlobal); + await testData.setup(browser); + + info("test setup completed"); + let contextMenu = await openContextMenuForPasswordInput(browser); + let fillItem = contextMenu.querySelector("#fill-login"); + Assert.ok(fillItem, "fill menu item exists"); + Assert.ok( + fillItem && EventUtils.isHidden(fillItem), + "fill menu item is hidden" + ); + + let promiseHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden"); + info("Calling hidePopup on contextMenu"); + contextMenu.hidePopup(); + info("waiting for promiseHidden"); + await promiseHidden; +} + +for (let testData of gTests) { + let tmp = { + async [testData.name]() { + await testContextMenuOnInputField(testData); + }, + }; + add_task(tmp[testData.name]); +} diff --git a/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js b/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js new file mode 100644 index 0000000000..f8ca37cc47 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js @@ -0,0 +1,118 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_task(async function test() { + await SpecialPowers.pushPrefEnv({ + set: [["dom.events.testing.asyncClipboard", true]], + }); + + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async function (browser) { + let TEST_LOGIN = { + guid: "70a", + username: "jared", + password: "deraj", + origin: "https://www.example.com", + }; + + await SpecialPowers.spawn(browser, [TEST_LOGIN], async function (login) { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + + // The login object needs to be cloned into the content global. + loginItem.setLogin(Cu.cloneInto(login, content)); + + // Lower the timeout for the test. + Object.defineProperty( + loginItem.constructor, + "COPY_BUTTON_RESET_TIMEOUT", + { + configurable: true, + writable: true, + value: 1000, + } + ); + }); + + let testCases = [[TEST_LOGIN.username, ".copy-username-button"]]; + if (OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + testCases[1] = [TEST_LOGIN.password, ".copy-password-button"]; + } + + for (let testCase of testCases) { + let testObj = { + expectedValue: testCase[0], + copyButtonSelector: testCase[1], + }; + info( + "waiting for " + testObj.expectedValue + " to be placed on clipboard" + ); + let reauthObserved = true; + if (testObj.copyButtonSelector.includes("password")) { + reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + } + + await SimpleTest.promiseClipboardChange( + testObj.expectedValue, + async () => { + await SpecialPowers.spawn( + browser, + [testObj], + async function (aTestObj) { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + aTestObj.copyButtonSelector + ); + info("Clicking 'copy' button"); + copyButton.click(); + } + ); + } + ); + await reauthObserved; + Assert.ok(true, testObj.expectedValue + " is on clipboard now"); + + await SpecialPowers.spawn( + browser, + [testObj], + async function (aTestObj) { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let copyButton = loginItem.shadowRoot.querySelector( + aTestObj.copyButtonSelector + ); + let otherCopyButton = + copyButton == loginItem._copyUsernameButton + ? loginItem._copyPasswordButton + : loginItem._copyUsernameButton; + Assert.ok( + !otherCopyButton.dataset.copied, + "The other copy button should have the 'copied' state removed" + ); + Assert.ok( + copyButton.dataset.copied, + "Success message should be shown" + ); + } + ); + } + + // Wait for the 'copied' attribute to get removed from the copyPassword + // button, which is the last button that is clicked in the above testcase. + // Since another Copy button isn't clicked, the state won't get cleared + // instantly. This test covers the built-in timeout of the visual display. + await SpecialPowers.spawn(browser, [], async () => { + let copyButton = Cu.waiveXrays( + content.document.querySelector("login-item") + )._copyPasswordButton; + await ContentTaskUtils.waitForCondition( + () => !copyButton.dataset.copied, + "'copied' attribute should be removed after a timeout" + ); + }); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_createLogin.js b/browser/components/aboutlogins/tests/browser/browser_createLogin.js new file mode 100644 index 0000000000..a876320ecf --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_createLogin.js @@ -0,0 +1,535 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + let aboutLoginsTab = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(aboutLoginsTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_create_login() { + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + Assert.ok( + !loginList._selectedGuid, + "should not be a selected guid by default" + ); + Assert.ok( + content.document.documentElement.classList.contains("no-logins"), + "Should initially be in no logins view" + ); + Assert.ok( + loginList.classList.contains("no-logins"), + "login-list should initially be in no logins view" + ); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 0, + "login list should be empty" + ); + }); + + let testCases = [ + ["ftp://ftp.example.com/", "ftp://ftp.example.com"], + ["https://example.com/foo", "https://example.com"], + ["http://example.com/", "http://example.com"], + [ + "https://testuser1:testpass1@bugzilla.mozilla.org/show_bug.cgi?id=1556934", + "https://bugzilla.mozilla.org", + ], + ["https://www.example.com/bar", "https://www.example.com"], + ]; + + for (let i = 0; i < testCases.length; i++) { + let originTuple = testCases[i]; + info("Testcase " + i); + let storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "addLogin" + ); + + await SpecialPowers.spawn( + browser, + [[originTuple, i]], + async ([aOriginTuple, index]) => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let createButton = loginList._createLoginButton; + Assert.ok( + ContentTaskUtils.is_hidden(loginList._blankLoginListItem), + "the blank login list item should be hidden initially" + ); + Assert.ok( + !createButton.disabled, + "Create button should not be disabled initially" + ); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + usernameInput.placeholder = "dummy placeholder"; + + createButton.click(); + + Assert.ok( + ContentTaskUtils.is_visible(loginList._blankLoginListItem), + "the blank login list item should be visible after clicking on the create button" + ); + Assert.ok( + createButton.disabled, + "Create button should be disabled after being clicked" + ); + + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + Assert.ok( + ContentTaskUtils.is_visible(cancelButton), + "cancel button should be visible in create mode with no logins saved" + ); + + let originInput = loginItem.shadowRoot.querySelector( + "input[name='origin']" + ); + let passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + + Assert.equal( + content.document.l10n.getAttributes(usernameInput).id, + null, + "there should be no placeholder id on the username input in edit mode" + ); + Assert.equal( + usernameInput.placeholder, + "", + "there should be no placeholder on the username input in edit mode" + ); + originInput.value = aOriginTuple[0]; + usernameInput.value = "testuser1"; + passwordInput.value = "testpass1"; + + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveChangesButton.click(); + } + ); + + info("waiting for login to get added to storage"); + await storageChangedPromised; + info("login added to storage"); + + let canTestOSKeyStoreLogin = OSKeyStoreTestUtils.canTestOSKeyStoreLogin(); + if (canTestOSKeyStoreLogin) { + storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "modifyLogin" + ); + } + await SpecialPowers.spawn(browser, [originTuple], async aOriginTuple => { + await ContentTaskUtils.waitForCondition(() => { + return !content.document.documentElement.classList.contains( + "no-logins" + ); + }, "waiting for no-logins view to exit"); + Assert.ok( + !content.document.documentElement.classList.contains("no-logins"), + "Should no longer be in no logins view" + ); + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + Assert.ok( + !loginList.classList.contains("no-logins"), + "login-list should no longer be in no logins view" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginList._blankLoginListItem), + "the blank login list item should be hidden after adding new login" + ); + Assert.ok( + !loginList._createLoginButton.disabled, + "Create button shouldn't be disabled after exiting create login view" + ); + + let loginGuid = await ContentTaskUtils.waitForCondition(() => { + return loginList._loginGuidsSortedOrder.find( + guid => loginList._logins[guid].login.origin == aOriginTuple[1] + ); + }, "Waiting for login to be displayed"); + Assert.ok(loginGuid, "Expected login found in login-list"); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + Assert.equal(loginItem._login.guid, loginGuid, "login-item should match"); + + let { login, listItem } = loginList._logins[loginGuid]; + Assert.ok( + listItem.classList.contains("selected"), + "list item should be selected" + ); + Assert.equal( + login.origin, + aOriginTuple[1], + "Stored login should only include the origin of the URL provided during creation" + ); + Assert.equal( + login.username, + "testuser1", + "Stored login should have username provided during creation" + ); + Assert.equal( + login.password, + "testpass1", + "Stored login should have password provided during creation" + ); + + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + await ContentTaskUtils.waitForCondition( + () => usernameInput.placeholder, + "waiting for placeholder to get set" + ); + Assert.ok( + usernameInput.placeholder, + "there should be a placeholder on the username input when not in edit mode" + ); + }); + + if (!canTestOSKeyStoreLogin) { + continue; + } + + let reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(browser, [originTuple], async aOriginTuple => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + info("clicking on edit button"); + editButton.click(); + }); + info("waiting for oskeystore auth"); + await reauthObserved; + + await SpecialPowers.spawn(browser, [originTuple], async aOriginTuple => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "waiting for 'edit' mode" + ); + info("in edit mode"); + + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem.shadowRoot.querySelector( + "input[type='password']" + ); + passwordInput.focus(); + passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + usernameInput.value = "testuser2"; + passwordInput.value = "testpass2"; + + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + info("clicking save changes button"); + saveChangesButton.click(); + }); + + info("waiting for login to get modified in storage"); + await storageChangedPromised; + info("login modified in storage"); + + await SpecialPowers.spawn(browser, [originTuple], async aOriginTuple => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let login; + await ContentTaskUtils.waitForCondition(() => { + login = Object.values(loginList._logins).find( + obj => obj.login.origin == aOriginTuple[1] + ).login; + info(`${login.origin} / ${login.username} / ${login.password}`); + return ( + login.origin == aOriginTuple[1] && + login.username == "testuser2" && + login.password == "testpass2" + ); + }, "waiting for the login to get updated"); + Assert.equal( + login.origin, + aOriginTuple[1], + "Stored login should only include the origin of the URL provided during creation" + ); + Assert.equal( + login.username, + "testuser2", + "Stored login should have modified username" + ); + Assert.equal( + login.password, + "testpass2", + "Stored login should have modified password" + ); + }); + } + + await SpecialPowers.spawn( + browser, + [testCases.length], + async testCasesLength => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 5, + "login list should have a login per testcase" + ); + } + ); +}); + +add_task(async function test_cancel_create_login() { + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + Assert.ok( + loginList._selectedGuid, + "there should be a selected guid before create mode" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginList._blankLoginListItem), + "the blank login list item should be hidden before create mode" + ); + + let createButton = content.document + .querySelector("login-list") + .shadowRoot.querySelector(".create-login-button"); + createButton.click(); + + Assert.ok( + !loginList._selectedGuid, + "there should be no selected guid when in create mode" + ); + Assert.ok( + ContentTaskUtils.is_visible(loginList._blankLoginListItem), + "the blank login list item should be visible in create mode" + ); + + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + cancelButton.click(); + + Assert.ok( + loginList._selectedGuid, + "there should be a selected guid after canceling create mode" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginList._blankLoginListItem), + "the blank login list item should be hidden after canceling create mode" + ); + }); +}); + +add_task( + async function test_cancel_create_login_with_filter_showing_one_login() { + const browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + + const loginFilter = Cu.waiveXrays( + loginList.shadowRoot.querySelector("login-filter") + ); + loginFilter.value = "bugzilla.mozilla.org"; + Assert.equal( + loginList._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ).length, + 1, + "filter should have one login showing" + ); + let visibleLoginGuid = loginList.shadowRoot.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + )[0].dataset.guid; + + let createButton = loginList._createLoginButton; + createButton.click(); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + Assert.ok( + ContentTaskUtils.is_visible(cancelButton), + "cancel button should be visible in create mode with one login showing" + ); + cancelButton.click(); + + Assert.equal( + loginFilter.value, + "bugzilla.mozilla.org", + "login-filter should not be cleared if there was a login in the list" + ); + Assert.equal( + loginList.shadowRoot.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + )[0].dataset.guid, + visibleLoginGuid, + "the same login should still be visible" + ); + }); + } +); + +add_task(async function test_cancel_create_login_with_logins_filtered_out() { + const browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + const loginFilter = Cu.waiveXrays( + loginList.shadowRoot.querySelector("login-filter") + ); + loginFilter.value = "XXX-no-logins-should-match-this-XXX"; + await Promise.resolve(); + Assert.equal( + loginList._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ).length, + 0, + "filter should have no logins showing" + ); + + let createButton = loginList._createLoginButton; + createButton.click(); + + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + Assert.ok( + ContentTaskUtils.is_visible(cancelButton), + "cancel button should be visible in create mode with no logins showing" + ); + cancelButton.click(); + await Promise.resolve(); + + Assert.equal( + loginFilter.value, + "", + "login-filter should be cleared if there were no logins in the list" + ); + let visibleLoginItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ); + Assert.equal( + visibleLoginItems.length, + 5, + "all logins should be visible with blank filter" + ); + Assert.equal( + loginList._selectedGuid, + visibleLoginItems[0].dataset.guid, + "the first item in the list should be selected" + ); + }); +}); + +add_task(async function test_create_duplicate_login() { + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + return; + } + + let browser = gBrowser.selectedBrowser; + EXPECTED_ERROR_MESSAGE = "This login already exists."; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let createButton = loginList._createLoginButton; + createButton.click(); + + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let originInput = loginItem.shadowRoot.querySelector( + "input[name='origin']" + ); + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + const EXISTING_USERNAME = "testuser2"; + const EXISTING_ORIGIN = "https://example.com"; + originInput.value = EXISTING_ORIGIN; + usernameInput.value = EXISTING_USERNAME; + passwordInput.value = "different password value"; + + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveChangesButton.click(); + + await ContentTaskUtils.waitForCondition( + () => !loginItem._errorMessage.hidden, + "waiting until the error message is visible" + ); + let duplicatedGuid = Object.values(loginList._logins).find( + v => + v.login.origin == EXISTING_ORIGIN && + v.login.username == EXISTING_USERNAME + ).login.guid; + Assert.equal( + loginItem._errorMessageLink.dataset.errorGuid, + duplicatedGuid, + "Error message has GUID of existing duplicated login set on it" + ); + + let confirmationDialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + Assert.ok( + confirmationDialog.hidden, + "the discard-changes dialog should be hidden before clicking the error-message-text" + ); + loginItem._errorMessageLink.querySelector("a").click(); + Assert.ok( + !confirmationDialog.hidden, + "the discard-changes dialog should be visible" + ); + let discardChangesButton = + confirmationDialog.shadowRoot.querySelector(".confirm-button"); + discardChangesButton.click(); + + await ContentTaskUtils.waitForCondition( + () => + Object.keys(loginItem._login).length > 1 && + loginItem._login.guid == duplicatedGuid, + "waiting until the existing duplicated login is selected" + ); + Assert.equal( + loginList._selectedGuid, + duplicatedGuid, + "the duplicated login should be selected in the list" + ); + }); + EXPECTED_ERROR_MESSAGE = null; +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_deleteLogin.js b/browser/components/aboutlogins/tests/browser/browser_deleteLogin.js new file mode 100644 index 0000000000..8aa4201378 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_deleteLogin.js @@ -0,0 +1,182 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test_show_logins() { + let browser = gBrowser.selectedBrowser; + + await SpecialPowers.spawn( + browser, + [[TEST_LOGIN1.guid, TEST_LOGIN2.guid]], + async loginGuids => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 2 && + loginList._loginGuidsSortedOrder.includes(loginGuids[0]) && + loginList._loginGuidsSortedOrder.includes(loginGuids[1]) + ); + }, "Waiting for logins to be displayed"); + Assert.ok( + !content.document.documentElement.classList.contains("no-logins"), + "Should no longer be in no logins view" + ); + Assert.ok( + !loginList.classList.contains("no-logins"), + "login-list should no longer be in no logins view" + ); + Assert.ok(loginFound, "Newly added logins should be added to the page"); + } + ); +}); + +add_task(async function test_login_item() { + let browser = gBrowser.selectedBrowser; + + function waitForDelete() { + let numLogins = Services.logins.countLogins("", "", ""); + return TestUtils.waitForCondition( + () => Services.logins.countLogins("", "", "") < numLogins, + "Error waiting for login deletion" + ); + } + + async function deleteFirstLoginAfterEdit() { + await SpecialPowers.spawn(browser, [], async () => { + let loginList = content.document.querySelector("login-list"); + let loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ); + info("Clicking on the first login"); + loginListItem.click(); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let loginItemPopulated = await ContentTaskUtils.waitForCondition(() => { + return loginItem._login.guid == loginListItem.dataset.guid; + }, "Waiting for login item to get populated"); + Assert.ok(loginItemPopulated, "The login item should get populated"); + }); + let reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + await reauthObserved; + return SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem._passwordInput; + usernameInput.value += "-undone"; + passwordInput.value += "-undone"; + + let deleteButton = loginItem.shadowRoot.querySelector(".delete-button"); + deleteButton.click(); + + let confirmDeleteDialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + let confirmButton = + confirmDeleteDialog.shadowRoot.querySelector(".confirm-button"); + confirmButton.click(); + }); + } + + function deleteFirstLogin() { + return SpecialPowers.spawn(browser, [], async () => { + let loginList = content.document.querySelector("login-list"); + let loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ); + info("Clicking on the first login"); + loginListItem.click(); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let loginItemPopulated = await ContentTaskUtils.waitForCondition(() => { + return loginItem._login.guid == loginListItem.dataset.guid; + }, "Waiting for login item to get populated"); + Assert.ok(loginItemPopulated, "The login item should get populated"); + + let deleteButton = loginItem.shadowRoot.querySelector(".delete-button"); + deleteButton.click(); + + let confirmDeleteDialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + let confirmButton = + confirmDeleteDialog.shadowRoot.querySelector(".confirm-button"); + confirmButton.click(); + }); + } + + let onDeletePromise; + if (OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + // Can only test Edit mode in official builds + onDeletePromise = waitForDelete(); + await deleteFirstLoginAfterEdit(); + await onDeletePromise; + + await SpecialPowers.spawn(browser, [], async () => { + let loginList = content.document.querySelector("login-list"); + Assert.ok( + !content.document.documentElement.classList.contains("no-logins"), + "Should not be in no logins view as there is still one login" + ); + Assert.ok( + !loginList.classList.contains("no-logins"), + "Should not be in no logins view as there is still one login" + ); + + let confirmDiscardDialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + Assert.ok( + confirmDiscardDialog.hidden, + "Discard confirm dialog should not show up after delete an edited login" + ); + }); + } else { + onDeletePromise = waitForDelete(); + await deleteFirstLogin(); + await onDeletePromise; + } + + onDeletePromise = waitForDelete(); + await deleteFirstLogin(); + await onDeletePromise; + + await SpecialPowers.spawn(browser, [], async () => { + let loginList = content.document.querySelector("login-list"); + Assert.ok( + content.document.documentElement.classList.contains("no-logins"), + "Should be in no logins view as all logins got deleted" + ); + Assert.ok( + loginList.classList.contains("no-logins"), + "login-list should be in no logins view as all logins got deleted" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_fxAccounts.js b/browser/components/aboutlogins/tests/browser/browser_fxAccounts.js new file mode 100644 index 0000000000..b66f204c92 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_fxAccounts.js @@ -0,0 +1,96 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +const { UIState } = ChromeUtils.importESModule( + "resource://services-sync/UIState.sys.mjs" +); + +function mockState(state) { + UIState.get = () => ({ + status: state.status, + lastSync: new Date(), + email: state.email, + avatarURL: state.avatarURL, + }); +} + +add_setup(async function () { + let aboutLoginsTab = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + let getState = UIState.get; + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(aboutLoginsTab); + UIState.get = getState; + }); +}); + +add_task(async function test_logged_out() { + mockState({ status: UIState.STATUS_NOT_CONFIGURED }); + Services.obs.notifyObservers(null, UIState.ON_UPDATE); + + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let fxAccountsButton = content.document.querySelector("fxaccounts-button"); + Assert.ok(fxAccountsButton, "fxAccountsButton should exist"); + fxAccountsButton = Cu.waiveXrays(fxAccountsButton); + await ContentTaskUtils.waitForCondition( + () => fxAccountsButton._loggedIn === false, + "waiting for _loggedIn to strictly equal false" + ); + Assert.equal( + fxAccountsButton._loggedIn, + false, + "state should reflect not logged in" + ); + }); +}); + +add_task(async function test_login_syncing_enabled() { + const TEST_EMAIL = "test@example.com"; + const TEST_AVATAR_URL = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; + mockState({ + status: UIState.STATUS_SIGNED_IN, + email: TEST_EMAIL, + avatarURL: TEST_AVATAR_URL, + }); + await SpecialPowers.pushPrefEnv({ + set: [["services.sync.engine.passwords", true]], + }); + Services.obs.notifyObservers(null, UIState.ON_UPDATE); + + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn( + browser, + [[TEST_EMAIL, TEST_AVATAR_URL]], + async ([expectedEmail, expectedAvatarURL]) => { + let fxAccountsButton = + content.document.querySelector("fxaccounts-button"); + Assert.ok(fxAccountsButton, "fxAccountsButton should exist"); + fxAccountsButton = Cu.waiveXrays(fxAccountsButton); + await ContentTaskUtils.waitForCondition( + () => fxAccountsButton._email === expectedEmail, + "waiting for _email to strictly equal expectedEmail" + ); + Assert.equal( + fxAccountsButton._loggedIn, + true, + "state should reflect logged in" + ); + Assert.equal( + fxAccountsButton._email, + expectedEmail, + "state should have email set" + ); + Assert.equal( + fxAccountsButton._avatarURL, + expectedAvatarURL, + "state should have avatarURL set" + ); + } + ); + + await SpecialPowers.popPrefEnv(); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_loginFilter.js b/browser/components/aboutlogins/tests/browser/browser_loginFilter.js new file mode 100644 index 0000000000..765e68713f --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_loginFilter.js @@ -0,0 +1,60 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + const aboutLoginsTab = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(aboutLoginsTab); + }); +}); + +add_task(async function focus_filter_by_ctrl_f() { + const browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + function getActiveElement() { + let element = content.document.activeElement; + + while (element?.shadowRoot) { + element = element.shadowRoot.activeElement; + } + + return element; + } + + //// State after load + + const loginFilter = content.document + .querySelector("login-list") + .shadowRoot.querySelector("login-filter") + .shadowRoot.querySelector("input"); + Assert.equal( + getActiveElement(), + loginFilter, + "login filter must be focused after opening about:logins" + ); + + //// Focus something else (Create Login button) + + content.document + .querySelector("login-list") + .shadowRoot.querySelector(".create-login-button") + .focus(); + Assert.notEqual( + getActiveElement(), + loginFilter, + "login filter is not focused" + ); + + //// Ctrl+F key + + EventUtils.synthesizeKey("f", { accelKey: true }, content); + Assert.equal( + getActiveElement(), + loginFilter, + "Ctrl+F/Cmd+F focused login filter" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_loginItemErrors.js b/browser/components/aboutlogins/tests/browser/browser_loginItemErrors.js new file mode 100644 index 0000000000..952149f0db --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_loginItemErrors.js @@ -0,0 +1,153 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_showLoginItemErrors() { + const browser = gBrowser.selectedBrowser; + let LOGIN_TO_UPDATE = new nsLoginInfo( + "https://example.com", + "https://example.com", + null, + "user2", + "pass2" + ); + LOGIN_TO_UPDATE = await Services.logins.addLoginAsync(LOGIN_TO_UPDATE); + EXPECTED_ERROR_MESSAGE = "This login already exists."; + const LOGIN_UPDATES = { + origin: "https://example.com", + password: "my1GoodPassword", + username: "user1", + }; + + await SpecialPowers.spawn( + browser, + [[LoginHelper.loginToVanillaObject(LOGIN_TO_UPDATE), LOGIN_UPDATES]], + async ([loginToUpdate, loginUpdates]) => { + const loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + const loginItemErrorMessage = Cu.waiveXrays( + loginItem.shadowRoot.querySelector(".error-message") + ); + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + + const createButton = loginList._createLoginButton; + createButton.click(); + + const event = Cu.cloneInto( + { + bubbles: true, + detail: loginUpdates, + }, + content + ); + + content.dispatchEvent( + // adds first login + new content.CustomEvent("AboutLoginsCreateLogin", event) + ); + + await ContentTaskUtils.waitForCondition(() => { + return ( + loginList.shadowRoot.querySelectorAll(".login-list-item").length === 3 + ); + }, "Waiting for login item to be created."); + + Assert.ok( + loginItemErrorMessage.hidden, + "An error message should not be displayed after adding a new login." + ); + + content.dispatchEvent( + // adds a duplicate of the first login + new content.CustomEvent("AboutLoginsCreateLogin", event) + ); + + const loginItemErrorMessageVisible = + await ContentTaskUtils.waitForCondition(() => { + return !loginItemErrorMessage.hidden; + }, "Waiting for error message to be shown after attempting to create a duplicate login."); + Assert.ok( + loginItemErrorMessageVisible, + "An error message should be shown after user attempts to add a login that already exists." + ); + + const loginItemErrorMessageText = + loginItemErrorMessage.querySelector("span:not([hidden])"); + Assert.equal( + loginItemErrorMessageText.dataset.l10nId, + "about-logins-error-message-duplicate-login-with-link", + "The correct error message is displayed." + ); + + let loginListItem = Cu.waiveXrays( + loginList.shadowRoot.querySelector( + `.login-list-item[data-guid='${loginToUpdate.guid}']` + ) + ); + loginListItem.click(); + + Assert.ok( + loginItemErrorMessage.hidden, + "The error message should no longer be visible." + ); + } + ); + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + // The rest of the test uses Edit mode which causes an OS prompt in official builds. + return; + } + let reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn( + browser, + [[LoginHelper.loginToVanillaObject(LOGIN_TO_UPDATE), LOGIN_UPDATES]], + async ([loginToUpdate, loginUpdates]) => { + const loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + const editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + + const updateEvent = Cu.cloneInto( + { + bubbles: true, + detail: Object.assign({ guid: loginToUpdate.guid }, loginUpdates), + }, + content + ); + + content.dispatchEvent( + // attempt to update LOGIN_TO_UPDATE to a username/origin combination that already exists. + new content.CustomEvent("AboutLoginsUpdateLogin", updateEvent) + ); + + const loginItemErrorMessage = Cu.waiveXrays( + loginItem.shadowRoot.querySelector(".error-message") + ); + const loginAlreadyExistsErrorShownAfterUpdate = + await ContentTaskUtils.waitForCondition(() => { + return !loginItemErrorMessage.hidden; + }, "Waiting for error message to show after updating login to existing login."); + Assert.ok( + loginAlreadyExistsErrorShownAfterUpdate, + "An error message should be shown after updating a login to a username/origin combination that already exists." + ); + } + ); + info("making sure os auth dialog is shown"); + await reauthObserved; + info("saw os auth dialog"); + EXPECTED_ERROR_MESSAGE = null; +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_loginListChanges.js b/browser/components/aboutlogins/tests/browser/browser_loginListChanges.js new file mode 100644 index 0000000000..13df6c1ef6 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_loginListChanges.js @@ -0,0 +1,144 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test_login_added() { + let login = { + guid: "70", + username: "jared", + password: "deraj", + origin: "https://www.example.com", + }; + let browser = gBrowser.selectedBrowser; + browser.browsingContext.currentWindowGlobal + .getActor("AboutLogins") + .sendAsyncMessage("AboutLogins:LoginAdded", login); + + await SpecialPowers.spawn(browser, [login], async addedLogin => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 1 && + loginList._loginGuidsSortedOrder[0] == addedLogin.guid + ); + }, "Waiting for login to be added"); + Assert.ok(loginFound, "Newly added logins should be added to the page"); + }); +}); + +add_task(async function test_login_modified() { + let login = { + guid: "70", + username: "jared@example.com", + password: "deraj", + origin: "https://www.example.com", + }; + let browser = gBrowser.selectedBrowser; + browser.browsingContext.currentWindowGlobal + .getActor("AboutLogins") + .sendAsyncMessage("AboutLogins:LoginModified", login); + + await SpecialPowers.spawn(browser, [login], async modifiedLogin => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 1 && + loginList._loginGuidsSortedOrder[0] == modifiedLogin.guid && + loginList._logins[loginList._loginGuidsSortedOrder[0]].login.username == + modifiedLogin.username + ); + }, "Waiting for username to get updated"); + Assert.ok(loginFound, "The login should get updated on the page"); + }); +}); + +add_task(async function test_login_removed() { + let login = { + guid: "70", + username: "jared@example.com", + password: "deraj", + origin: "https://www.example.com", + }; + let browser = gBrowser.selectedBrowser; + browser.browsingContext.currentWindowGlobal + .getActor("AboutLogins") + .sendAsyncMessage("AboutLogins:LoginRemoved", login); + + await SpecialPowers.spawn(browser, [login], async removedLogin => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginRemoved = await ContentTaskUtils.waitForCondition(() => { + return !loginList._loginGuidsSortedOrder.length; + }, "Waiting for login to get removed"); + Assert.ok(loginRemoved, "The login should be removed from the page"); + }); +}); + +add_task(async function test_all_logins_removed() { + // Setup the test with 2 logins. + let logins = [ + { + guid: "70", + username: "jared", + password: "deraj", + origin: "https://www.example.com", + }, + { + guid: "71", + username: "ntim", + password: "verysecurepassword", + origin: "https://www.example.com", + }, + ]; + + let browser = gBrowser.selectedBrowser; + browser.browsingContext.currentWindowGlobal + .getActor("AboutLogins") + .sendAsyncMessage("AboutLogins:AllLogins", logins); + + await SpecialPowers.spawn(browser, [logins], async addedLogins => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 2 && + loginList._loginGuidsSortedOrder[0] == addedLogins[0].guid && + loginList._loginGuidsSortedOrder[1] == addedLogins[1].guid + ); + }, "Waiting for login to be added"); + Assert.ok(loginFound, "Newly added logins should be added to the page"); + Assert.ok( + !content.document.documentElement.classList.contains("no-logins"), + "Should not be in no logins view after adding logins" + ); + Assert.ok( + !loginList.classList.contains("no-logins"), + "login-list should not be in no logins view after adding logins" + ); + }); + + Services.logins.removeAllUserFacingLogins(); + + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return !loginList._loginGuidsSortedOrder.length; + }, "Waiting for logins to be cleared"); + Assert.ok(loginFound, "Logins should be cleared"); + Assert.ok( + content.document.documentElement.classList.contains("no-logins"), + "Should be in no logins view after clearing" + ); + Assert.ok( + loginList.classList.contains("no-logins"), + "login-list should be in no logins view after clearing" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_loginSortOrderRestored.js b/browser/components/aboutlogins/tests/browser/browser_loginSortOrderRestored.js new file mode 100644 index 0000000000..fb39dda30c --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_loginSortOrderRestored.js @@ -0,0 +1,172 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +const SORT_PREF_NAME = "signon.management.page.sort"; + +add_setup(async function () { + TEST_LOGIN3.QueryInterface(Ci.nsILoginMetaInfo).timePasswordChanged = 1; + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + info(`TEST_LOGIN1 added with guid=${TEST_LOGIN1.guid}`); + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + info(`TEST_LOGIN3 added with guid=${TEST_LOGIN3.guid}`); + registerCleanupFunction(() => { + Services.logins.removeAllUserFacingLogins(); + Services.prefs.clearUserPref(SORT_PREF_NAME); + }); +}); + +add_task(async function test_sort_order_persisted() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: "about:logins", + }, + async function (browser) { + await ContentTask.spawn( + browser, + [TEST_LOGIN1.guid, TEST_LOGIN3.guid], + async function ([testLogin1Guid, testLogin3Guid]) { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => loginList._sortSelect.value == "alerts", + "Waiting for login-list sort to get changed to 'alerts'. Current value is: " + + loginList._sortSelect.value + ); + Assert.equal( + loginList._sortSelect.value, + "alerts", + "selected sort should be 'alerts' since there is a breached login" + ); + Assert.equal( + loginList._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ).dataset.guid, + testLogin3Guid, + "the first login should be TEST_LOGIN3 since they are sorted by alerts" + ); + + loginList._sortSelect.value = "last-changed"; + loginList._sortSelect.dispatchEvent( + new content.Event("change", { bubbles: true }) + ); + Assert.equal( + loginList._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ).dataset.guid, + testLogin1Guid, + "the first login should be TEST_LOGIN1 since it has the most recent timePasswordChanged value" + ); + } + ); + } + ); + + Assert.equal( + Services.prefs.getCharPref(SORT_PREF_NAME), + "last-changed", + "'last-changed' should be stored in the pref" + ); + + // Set the pref to the value used in Fx70-76 to confirm our + // backwards-compat support that "breached" is changed to "alerts" + Services.prefs.setCharPref(SORT_PREF_NAME, "breached"); + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: "about:logins", + }, + async function (browser) { + await ContentTask.spawn( + browser, + TEST_LOGIN3.guid, + async function (testLogin3Guid) { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => loginList._sortSelect.value == "alerts", + "Waiting for login-list sort to get changed to 'alerts'. Current value is: " + + loginList._sortSelect.value + ); + Assert.equal( + loginList._sortSelect.value, + "alerts", + "selected sort should be restored to 'alerts' since 'breached' was in prefs" + ); + Assert.equal( + loginList._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ).dataset.guid, + testLogin3Guid, + "the first login should be TEST_LOGIN3 since they are sorted by alerts" + ); + } + ); + } + ); + + let storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "removeLogin" + ); + Services.logins.removeLogin(TEST_LOGIN3); + await storageChangedPromised; + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + + Assert.equal( + Services.prefs.getCharPref(SORT_PREF_NAME), + "breached", + "confirm that the stored sort is still 'breached' and as such shouldn't apply when the page loads" + ); + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: "about:logins", + }, + async function (browser) { + await ContentTask.spawn( + browser, + TEST_LOGIN2.guid, + async function (testLogin2Guid) { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition( + () => + loginList._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ), + "wait for a visible loging to get populated" + ); + Assert.equal( + loginList._sortSelect.value, + "name", + "selected sort should be name since 'alerts' no longer applies with no breached or vulnerable logins" + ); + Assert.equal( + loginList._list.querySelector( + ".login-list-item[data-guid]:not([hidden])" + ).dataset.guid, + testLogin2Guid, + "the first login should be TEST_LOGIN2 since it is sorted first by 'name'" + ); + } + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_noLoginsView.js b/browser/components/aboutlogins/tests/browser/browser_noLoginsView.js new file mode 100644 index 0000000000..b86304aac1 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_noLoginsView.js @@ -0,0 +1,199 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test_no_logins_class() { + let { platform } = AppConstants; + let wizardPromise; + + // The import link is hidden on Linux, so we don't wait for the migration + // wizard to open on that platform. + if (AppConstants.platform != "linux") { + wizardPromise = BrowserTestUtils.waitForMigrationWizard(window); + } + + await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [platform], + async aPlatform => { + let loginList = content.document.querySelector("login-list"); + + Assert.ok( + content.document.documentElement.classList.contains("no-logins"), + "root should be in no logins view" + ); + Assert.ok( + loginList.classList.contains("no-logins"), + "login-list should be in no logins view" + ); + + let loginIntro = Cu.waiveXrays( + content.document.querySelector("login-intro") + ); + let loginItem = content.document.querySelector("login-item"); + let loginListIntro = loginList.shadowRoot.querySelector(".intro"); + let loginListList = loginList.shadowRoot.querySelector("ol"); + + Assert.ok( + !ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be shown in no logins view" + ); + Assert.ok( + !ContentTaskUtils.is_hidden(loginListIntro), + "login-list intro should be shown in no logins view" + ); + + Assert.ok( + ContentTaskUtils.is_hidden(loginItem), + "login-item should be hidden in no logins view" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginListList), + "login-list logins list should be hidden in no logins view" + ); + Assert.equal( + content.document.l10n.getAttributes( + loginIntro.shadowRoot.querySelector(".heading") + ).id, + "about-logins-login-intro-heading-logged-out2", + "The default message should be the non-logged-in message" + ); + Assert.ok( + loginIntro.shadowRoot + .querySelector("a.intro-help-link") + .href.includes("password-manager-remember-delete-edit-logins"), + "Check support href populated" + ); + + loginIntro.updateState(Cu.cloneInto({ loggedIn: true }, content)); + + Assert.equal( + content.document.l10n.getAttributes( + loginIntro.shadowRoot.querySelector(".heading") + ).id, + "about-logins-login-intro-heading-logged-in", + "When logged in the message should update" + ); + + let importClass = Services.prefs.getBoolPref( + "signon.management.page.fileImport.enabled" + ) + ? ".intro-import-text.file-import" + : ".intro-import-text.no-file-import"; + Assert.equal( + ContentTaskUtils.is_hidden( + loginIntro.shadowRoot.querySelector(importClass) + ), + aPlatform == "linux", + "the import link should be hidden on Linux builds" + ); + if (aPlatform == "linux") { + // End the test now for Linux since the link is hidden. + return; + } + loginIntro.shadowRoot.querySelector(importClass + " > a").click(); + info("waiting for MigrationWizard to open"); + } + ); + if (AppConstants.platform == "linux") { + // End the test now for Linux since the link is hidden. + return; + } + let wizard = await wizardPromise; + Assert.ok(wizard, "Migrator window opened"); + await BrowserTestUtils.closeMigrationWizard(wizard); +}); + +add_task( + async function login_selected_when_login_added_and_in_no_logins_view() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => { + let loginList = content.document.querySelector("login-list"); + let loginItem = content.document.querySelector("login-item"); + let loginIntro = content.document.querySelector("login-intro"); + Assert.ok( + loginList.classList.contains("empty-search"), + "login-list should be showing no logins view from a search with no results" + ); + Assert.ok( + loginList.classList.contains("no-logins"), + "login-list should be showing no logins view since there are no saved logins" + ); + Assert.ok( + !loginList.classList.contains("create-login-selected"), + "login-list should not be in create-login-selected mode" + ); + Assert.ok( + loginItem.classList.contains("no-logins"), + "login-item should be marked as having no-logins" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginItem), + "login-item should be hidden" + ); + Assert.ok( + !ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be visible" + ); + }); + + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + + await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [TEST_LOGIN1.guid], + async testLogin1Guid => { + let loginList = content.document.querySelector("login-list"); + let loginItem = content.document.querySelector("login-item"); + let loginIntro = content.document.querySelector("login-intro"); + await ContentTaskUtils.waitForCondition(() => { + return !loginList.classList.contains("no-logins"); + }, "waiting for login-list to leave the no-logins view"); + Assert.ok( + !loginList.classList.contains("empty-search"), + "login-list should not be showing no logins view since one login exists" + ); + Assert.ok( + !loginList.classList.contains("no-logins"), + "login-list should not be showing no logins view since one login exists" + ); + Assert.ok( + !loginList.classList.contains("create-login-selected"), + "login-list should not be in create-login-selected mode" + ); + Assert.equal( + loginList.shadowRoot.querySelector( + ".login-list-item.selected[data-guid]" + ).dataset.guid, + testLogin1Guid, + "the login that was just added should be selected" + ); + Assert.ok( + !loginItem.classList.contains("no-logins"), + "login-item should not be marked as having no-logins" + ); + Assert.equal( + Cu.waiveXrays(loginItem)._login.guid, + testLogin1Guid, + "the login-item should have the newly added login selected" + ); + Assert.ok( + !ContentTaskUtils.is_hidden(loginItem), + "login-item should be visible" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden" + ); + } + ); + } +); diff --git a/browser/components/aboutlogins/tests/browser/browser_openExport.js b/browser/components/aboutlogins/tests/browser/browser_openExport.js new file mode 100644 index 0000000000..c5df84c447 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openExport.js @@ -0,0 +1,149 @@ +/* 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"; + +/** + * Test the export logins file picker appears. + */ + +let { OSKeyStore } = ChromeUtils.importESModule( + "resource://gre/modules/OSKeyStore.sys.mjs" +); +let { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); + +let { MockFilePicker } = SpecialPowers; + +add_setup(async function () { + await TestUtils.waitForCondition(() => { + Services.telemetry.clearEvents(); + let events = Services.telemetry.snapshotEvents( + Ci.nsITelemetry.DATASET_PRERELEASE_CHANNELS, + true + ).content; + return !events || !events.length; + }, "Waiting for content telemetry events to get cleared"); + + MockFilePicker.init(window); + MockFilePicker.useAnyFile(); + MockFilePicker.returnValue = MockFilePicker.returnOK; + + registerCleanupFunction(() => { + MockFilePicker.cleanup(); + }); +}); + +function waitForFilePicker() { + return new Promise(resolve => { + MockFilePicker.showCallback = () => { + MockFilePicker.showCallback = null; + Assert.ok(true, "Saw the file picker"); + resolve(); + }; + }); +} + +add_task(async function test_open_export() { + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async function (browser) { + await BrowserTestUtils.synthesizeMouseAtCenter( + "menu-button", + {}, + browser + ); + + await SpecialPowers.spawn(browser, [], async () => { + let menuButton = content.document.querySelector("menu-button"); + return ContentTaskUtils.waitForCondition(function waitForMenu() { + return !menuButton.shadowRoot.querySelector(".menu").hidden; + }, "waiting for menu to open"); + }); + + function getExportMenuItem() { + let menuButton = window.document.querySelector("menu-button"); + let exportButton = + menuButton.shadowRoot.querySelector(".menuitem-export"); + return exportButton; + } + + await BrowserTestUtils.synthesizeMouseAtCenter( + getExportMenuItem, + {}, + browser + ); + + // First event is for opening about:logins + await LoginTestUtils.telemetry.waitForEventCount(2); + TelemetryTestUtils.assertEvents( + [["pwmgr", "mgmt_menu_item_used", "export"]], + { category: "pwmgr", method: "mgmt_menu_item_used" }, + { process: "content" } + ); + + info("Clicking confirm button"); + let osReAuthPromise = null; + + if ( + OSKeyStore.canReauth() && + !OSKeyStoreTestUtils.canTestOSKeyStoreLogin() + ) { + todo( + OSKeyStoreTestUtils.canTestOSKeyStoreLogin(), + "Cannot test OS key store login in this build." + ); + return; + } + + if (OSKeyStore.canReauth()) { + osReAuthPromise = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + } + let filePicker = waitForFilePicker(); + await BrowserTestUtils.synthesizeMouseAtCenter( + () => { + let confirmExportDialog = window.document.querySelector( + "confirmation-dialog" + ); + return confirmExportDialog.shadowRoot.querySelector( + ".confirm-button" + ); + }, + {}, + browser + ); + + if (osReAuthPromise) { + Assert.ok(osReAuthPromise, "Waiting for OS re-auth promise"); + await osReAuthPromise; + } + + info("waiting for Export file picker to get opened"); + await filePicker; + Assert.ok(true, "Export file picker opened"); + + info("Waiting for the export to complete"); + let expectedEvents = [ + [ + "pwmgr", + "reauthenticate", + "os_auth", + osReAuthPromise ? "success" : "success_unsupported_platform", + ], + ["pwmgr", "mgmt_menu_item_used", "export_complete"], + ]; + await LoginTestUtils.telemetry.waitForEventCount( + expectedEvents.length, + "parent" + ); + + TelemetryTestUtils.assertEvents( + expectedEvents, + { category: "pwmgr", method: /(reauthenticate|mgmt_menu_item_used)/ }, + { process: "parent" } + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openFiltered.js b/browser/components/aboutlogins/tests/browser/browser_openFiltered.js new file mode 100644 index 0000000000..fcd9692065 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openFiltered.js @@ -0,0 +1,295 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + let storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "addLogin" + ); + TEST_LOGIN1 = await Services.logins.addLoginAsync(TEST_LOGIN1); + await storageChangedPromised; + storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "addLogin" + ); + TEST_LOGIN2 = await Services.logins.addLoginAsync(TEST_LOGIN2); + await storageChangedPromised; + let tabOpenedPromise = BrowserTestUtils.waitForNewTab( + gBrowser, + url => + url.includes( + `about:logins?filter=${encodeURIComponent(TEST_LOGIN1.origin)}` + ), + true + ); + LoginHelper.openPasswordManager(window, { + filterString: TEST_LOGIN1.origin, + entryPoint: "preferences", + }); + await tabOpenedPromise; + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_query_parameter_filter() { + let browser = gBrowser.selectedBrowser; + let vanillaLogins = [ + LoginHelper.loginToVanillaObject(TEST_LOGIN1), + LoginHelper.loginToVanillaObject(TEST_LOGIN2), + ]; + await SpecialPowers.spawn(browser, [vanillaLogins], async logins => { + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition(() => { + return loginList._loginGuidsSortedOrder.length == 2; + }, "Waiting for logins to be cached"); + + await ContentTaskUtils.waitForCondition(() => { + const selectedLoginItem = Cu.waiveXrays( + loginList.shadowRoot.querySelector("li[aria-selected='true']") + ); + return selectedLoginItem.dataset.guid === logins[0].guid; + }, "Waiting for TEST_LOGIN1 to be selected for the login-item view"); + + const loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + + Assert.ok( + ContentTaskUtils.is_visible(loginItem), + "login-item should be visible when a login is selected" + ); + const loginIntro = content.document.querySelector("login-intro"); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden when a login is selected" + ); + + const loginFilter = loginList.shadowRoot.querySelector("login-filter"); + + const xRayLoginFilter = Cu.waiveXrays(loginFilter); + Assert.equal( + xRayLoginFilter.value, + logins[0].origin, + "The filter should be prepopulated" + ); + Assert.equal( + loginList.shadowRoot.activeElement, + loginFilter, + "login-filter should be focused" + ); + Assert.equal( + loginFilter.shadowRoot.activeElement, + loginFilter.shadowRoot.querySelector(".filter"), + "the actual input inside of login-filter should be focused" + ); + + let hiddenLoginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item[hidden]" + ); + let visibleLoginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item:not([hidden])" + ); + Assert.equal( + visibleLoginListItems.length, + 1, + "The one login should be visible" + ); + Assert.equal( + visibleLoginListItems[0].dataset.guid, + logins[0].guid, + "TEST_LOGIN1 should be visible" + ); + Assert.equal( + hiddenLoginListItems.length, + 2, + "One saved login and one blank login should be hidden" + ); + Assert.equal( + hiddenLoginListItems[0].id, + "new-login-list-item", + "#new-login-list-item should be hidden" + ); + Assert.equal( + hiddenLoginListItems[1].dataset.guid, + logins[1].guid, + "TEST_LOGIN2 should be hidden" + ); + }); +}); + +add_task(async function test_query_parameter_filter_no_logins_for_site() { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + const HOSTNAME_WITH_NO_LOGINS = "xxx-no-logins-for-site-xxx"; + let tabOpenedPromise = BrowserTestUtils.waitForNewTab( + gBrowser, + url => + url.includes( + `about:logins?filter=${encodeURIComponent(HOSTNAME_WITH_NO_LOGINS)}` + ), + true + ); + LoginHelper.openPasswordManager(window, { + filterString: HOSTNAME_WITH_NO_LOGINS, + entryPoint: "preferences", + }); + await tabOpenedPromise; + + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + await ContentTaskUtils.waitForCondition(() => { + return loginList._loginGuidsSortedOrder.length == 2; + }, "Waiting for logins to be cached"); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 2, + "login list should have two logins stored" + ); + + Assert.ok( + ContentTaskUtils.is_hidden(loginList._list), + "the login list should be hidden when there is a search with no results" + ); + let intro = loginList.shadowRoot.querySelector(".intro"); + Assert.ok( + ContentTaskUtils.is_hidden(intro), + "the intro should be hidden when there is a search with no results" + ); + let emptySearchMessage = loginList.shadowRoot.querySelector( + ".empty-search-message" + ); + Assert.ok( + ContentTaskUtils.is_visible(emptySearchMessage), + "the empty search message should be visible when there is a search with no results" + ); + + let visibleLoginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item:not([hidden])" + ); + Assert.equal(visibleLoginListItems.length, 0, "No login should be visible"); + + Assert.ok( + !loginList._createLoginButton.disabled, + "create button should be enabled" + ); + + let loginItem = content.document.querySelector("login-item"); + Assert.ok(!loginItem.dataset.isNewLogin, "should not be in create mode"); + Assert.ok(!loginItem.dataset.editing, "should not be in edit mode"); + Assert.ok( + ContentTaskUtils.is_hidden(loginItem), + "login-item should be hidden when a login is not selected and we're not in create mode" + ); + let loginIntro = content.document.querySelector("login-intro"); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden when a login is not selected and we're not in create mode" + ); + + loginList._createLoginButton.click(); + + Assert.ok(loginItem.dataset.isNewLogin, "should be in create mode"); + Assert.ok(loginItem.dataset.editing, "should be in edit mode"); + Assert.ok( + ContentTaskUtils.is_visible(loginItem), + "login-item should be visible in create mode" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden in create mode" + ); + }); +}); + +add_task(async function test_query_parameter_filter_no_login_until_backspace() { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + let tabOpenedPromise = BrowserTestUtils.waitForNewTab( + gBrowser, + "about:logins?filter=" + encodeURIComponent(TEST_LOGIN1.origin) + "x", + true + ); + LoginHelper.openPasswordManager(window, { + filterString: TEST_LOGIN1.origin + "x", + entryPoint: "preferences", + }); + await tabOpenedPromise; + + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + await ContentTaskUtils.waitForCondition(() => { + return loginList._loginGuidsSortedOrder.length == 2; + }, "Waiting for logins to be cached"); + Assert.equal( + loginList._loginGuidsSortedOrder.length, + 2, + "login list should have two logins stored" + ); + + Assert.ok( + ContentTaskUtils.is_hidden(loginList._list), + "the login list should be hidden when there is a search with no results" + ); + + // Backspace the trailing 'x' to get matching logins + const EventUtils = ContentTaskUtils.getEventUtils(content); + EventUtils.sendChar("KEY_Backspace", content); + + let intro = loginList.shadowRoot.querySelector(".intro"); + Assert.ok( + ContentTaskUtils.is_hidden(intro), + "the intro should be hidden when there is no selection" + ); + let emptySearchMessage = loginList.shadowRoot.querySelector( + ".empty-search-message" + ); + Assert.ok( + ContentTaskUtils.is_hidden(emptySearchMessage), + "the empty search message should be hidden when there is matching logins" + ); + + let visibleLoginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item:not([hidden])" + ); + Assert.equal( + visibleLoginListItems.length, + 1, + "One login should be visible after backspacing" + ); + + Assert.ok( + !loginList._createLoginButton.disabled, + "create button should be enabled" + ); + + let loginItem = content.document.querySelector("login-item"); + Assert.ok(!loginItem.dataset.isNewLogin, "should not be in create mode"); + Assert.ok(!loginItem.dataset.editing, "should not be in edit mode"); + Assert.ok( + ContentTaskUtils.is_hidden(loginItem), + "login-item should be hidden when a login is not selected and we're not in create mode" + ); + let loginIntro = content.document.querySelector("login-intro"); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden when a login is not selected and we're not in create mode" + ); + + loginList._createLoginButton.click(); + + Assert.ok(loginItem.dataset.isNewLogin, "should be in create mode"); + Assert.ok(loginItem.dataset.editing, "should be in edit mode"); + Assert.ok( + ContentTaskUtils.is_visible(loginItem), + "login-item should be visible in create mode" + ); + Assert.ok( + ContentTaskUtils.is_hidden(loginIntro), + "login-intro should be hidden in create mode" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openImport.js b/browser/components/aboutlogins/tests/browser/browser_openImport.js new file mode 100644 index 0000000000..627e0d6e3b --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openImport.js @@ -0,0 +1,60 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +let { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); + +add_setup(async function () { + await TestUtils.waitForCondition(() => { + Services.telemetry.clearEvents(); + let events = Services.telemetry.snapshotEvents( + Ci.nsITelemetry.DATASET_PRERELEASE_CHANNELS, + true + ).content; + return !events || !events.length; + }, "Waiting for content telemetry events to get cleared"); + + let aboutLoginsTab = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(aboutLoginsTab); + }); +}); + +add_task(async function test_open_import() { + let promiseImportWindow = BrowserTestUtils.waitForMigrationWizard(window); + + let browser = gBrowser.selectedBrowser; + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + await SpecialPowers.spawn(browser, [], async () => { + return ContentTaskUtils.waitForCondition(() => { + let menuButton = Cu.waiveXrays( + content.document.querySelector("menu-button") + ); + return !menuButton.shadowRoot.querySelector(".menu").hidden; + }, "waiting for menu to open"); + }); + + function getImportItem() { + let menuButton = window.document.querySelector("menu-button"); + return menuButton.shadowRoot.querySelector(".menuitem-import-browser"); + } + await BrowserTestUtils.synthesizeMouseAtCenter(getImportItem, {}, browser); + + info("waiting for Import to get opened"); + let importWindow = await promiseImportWindow; + Assert.ok(true, "Import opened"); + + // First event is for opening about:logins + await LoginTestUtils.telemetry.waitForEventCount(2); + TelemetryTestUtils.assertEvents( + [["pwmgr", "mgmt_menu_item_used", "import_from_browser"]], + { category: "pwmgr", method: "mgmt_menu_item_used" }, + { process: "content" } + ); + + await BrowserTestUtils.closeMigrationWizard(importWindow); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openImportCSV.js b/browser/components/aboutlogins/tests/browser/browser_openImportCSV.js new file mode 100644 index 0000000000..c4994215d8 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openImportCSV.js @@ -0,0 +1,411 @@ +/* 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/. */ + +const { FileTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/FileTestUtils.sys.mjs" +); + +let { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); + +let { MockFilePicker } = SpecialPowers; + +/** + * A helper class to deal with Login CSV import UI. + */ +class CsvImportHelper { + /** + * Waits until the mock file picker is opened and sets the destFilePath as it's selected file. + * + * @param {nsIFile} destFile + * The file being passed to the picker. + * @returns {string} A promise that is resolved when the picker selects the file. + */ + static waitForOpenFilePicker(destFile) { + return new Promise(resolve => { + MockFilePicker.showCallback = fp => { + info("showCallback"); + info("fileName: " + destFile.path); + MockFilePicker.setFiles([destFile]); + MockFilePicker.filterIndex = 1; + info("done showCallback"); + resolve(); + }; + }); + } + + /** + * Clicks the 3 dot menu and then "Import from a file..." and then it serves a CSV file. + * It also does the needed assertions and telemetry validations. + * If you await for it to return, it will have processed the CSV file already. + * + * @param {browser} browser + * The browser object. + * @param {string[]} linesInFile + * An array of strings to be used to generate the CSV file. Each string is a line. + * @returns {Promise} A promise that is resolved when the picker selects the file. + */ + static async clickImportFromCsvMenu(browser, linesInFile) { + MockFilePicker.init(window); + MockFilePicker.returnValue = MockFilePicker.returnOK; + let csvFile = await LoginTestUtils.file.setupCsvFileWithLines(linesInFile); + + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + + await SpecialPowers.spawn(browser, [], async () => { + let menuButton = content.document.querySelector("menu-button"); + return ContentTaskUtils.waitForCondition(function waitForMenu() { + return !menuButton.shadowRoot.querySelector(".menu").hidden; + }, "waiting for menu to open"); + }); + + Services.telemetry.clearEvents(); + + function getImportMenuItem() { + let menuButton = window.document.querySelector("menu-button"); + let importButton = menuButton.shadowRoot.querySelector( + ".menuitem-import-file" + ); + // Force the menu item to be visible for the test. + importButton.hidden = false; + return importButton; + } + + BrowserTestUtils.synthesizeMouseAtCenter(getImportMenuItem, {}, browser); + + async function waitForFilePicker() { + let filePickerPromise = CsvImportHelper.waitForOpenFilePicker(csvFile); + // First event is for opening about:logins + await LoginTestUtils.telemetry.waitForEventCount( + 1, + "content", + "pwmgr", + "mgmt_menu_item_used" + ); + TelemetryTestUtils.assertEvents( + [["pwmgr", "mgmt_menu_item_used", "import_from_csv"]], + { category: "pwmgr", method: "mgmt_menu_item_used" }, + { process: "content", clear: false } + ); + + info("waiting for Import file picker to get opened"); + await filePickerPromise; + Assert.ok(true, "Import file picker opened"); + } + + await waitForFilePicker(); + } + + /** + * An utility method to fetch the data from the CSV import success dialog. + * + * @param {browser} browser + * The browser object. + * @returns {Promise} A promise that contains added, modified, noChange and errors count. + */ + static async getCsvImportSuccessDialogData(browser) { + return SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("import-summary-dialog") + ); + await ContentTaskUtils.waitForCondition( + () => !dialog.hidden, + "Waiting for the dialog to be visible" + ); + + let added = dialog.shadowRoot.querySelector( + ".import-items-added .result-count" + ).textContent; + let modified = dialog.shadowRoot.querySelector( + ".import-items-modified .result-count" + ).textContent; + let noChange = dialog.shadowRoot.querySelector( + ".import-items-no-change .result-count" + ).textContent; + let errors = dialog.shadowRoot.querySelector( + ".import-items-errors .result-count" + ).textContent; + const dialogData = { + added, + modified, + noChange, + errors, + }; + if (dialog.shadowRoot.activeElement) { + dialogData.l10nFocused = + dialog.shadowRoot.activeElement.getAttribute("data-l10n-id"); + } + return dialogData; + }); + } + + /** + * An utility method to fetch the data from the CSV import error dialog. + * + * @param {browser} browser + * The browser object. + * @returns {Promise} A promise that contains the hidden state and l10n id for title, description and focused element. + */ + static async getCsvImportErrorDialogData(browser) { + return SpecialPowers.spawn(browser, [], async () => { + const dialog = Cu.waiveXrays( + content.document.querySelector("import-error-dialog") + ); + const l10nTitle = dialog._genericDialog + .querySelector(".error-title") + .getAttribute("data-l10n-id"); + const l10nDescription = dialog._genericDialog + .querySelector(".error-description") + .getAttribute("data-l10n-id"); + return { + hidden: dialog.hidden, + l10nFocused: + dialog.shadowRoot.activeElement.getAttribute("data-l10n-id"), + l10nTitle, + l10nDescription, + }; + }); + } + + /** + * An utility method to wait until CSV import is complete. + * + * @returns {Promise} A promise that gets resolved when the import is complete. + */ + static async waitForImportToComplete() { + info("Waiting for the import to complete"); + await LoginTestUtils.telemetry.waitForEventCount(1, "parent"); + TelemetryTestUtils.assertEvents( + [["pwmgr", "mgmt_menu_item_used", "import_csv_complete"]], + { category: "pwmgr", method: "mgmt_menu_item_used" }, + { process: "parent" } + ); + } + + /** + * An utility method open the about:loginsimportreport page. + * + * @param {browser} browser + * The browser object. + * @returns {Promise} A promise that contains the about:loginsimportreport tab. + */ + static async clickDetailedReport(browser) { + let loadedReportTab = BrowserTestUtils.waitForNewTab( + gBrowser, + "about:loginsimportreport", + true + ); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("import-summary-dialog") + ); + await ContentTaskUtils.waitForCondition( + () => !dialog.hidden, + "Waiting for the dialog to be visible" + ); + let detailedReportLink = dialog.shadowRoot.querySelector( + ".open-detailed-report" + ); + + detailedReportLink.click(); + }); + return loadedReportTab; + } + + /** + * An utility method to fetch data from the about:loginsimportreport page. + * + * @param {browser} browser + * The browser object. + * @returns {Promise} A promise that contains the detailed report data like added, modified, noChange, errors and rows. + */ + static async getDetailedReportData(browser) { + const data = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [], + async () => { + function getCount(selector) { + const attribute = content.document + .querySelector(selector) + .getAttribute("data-l10n-args"); + return JSON.parse(attribute).count; + } + const rows = []; + for (let element of content.document.querySelectorAll(".row-details")) { + rows.push(element.getAttribute("data-l10n-id")); + } + const added = getCount(".new-logins"); + const modified = getCount(".exiting-logins"); + const noChange = getCount(".duplicate-logins"); + const errors = getCount(".errors-logins"); + return { + rows, + added, + modified, + noChange, + errors, + }; + } + ); + return data; + } +} + +const random = Math.round(Math.random() * 100000001); + +add_setup(async function () { + registerCleanupFunction(() => { + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_open_import_one_item_from_csv() { + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async browser => { + await CsvImportHelper.clickImportFromCsvMenu(browser, [ + "url,username,password,httpRealm,formActionOrigin,guid,timeCreated,timeLastUsed,timePasswordChanged", + `https://example.com,joe${random}@example.com,qwerty,My realm,,{${random}-e194-4279-ae1b-d7d281bb46f0},1589617814635,1589710449871,1589617846802`, + ]); + await CsvImportHelper.waitForImportToComplete(); + + let summary = await CsvImportHelper.getCsvImportSuccessDialogData( + browser + ); + Assert.equal(summary.added, "1", "It should have one item as added"); + Assert.equal( + summary.l10nFocused, + "about-logins-import-dialog-done", + "dismiss button should be focused" + ); + } + ); +}); + +add_task(async function test_open_import_all_four_categories() { + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async browser => { + const initialCsvData = [ + "url,username,password,httpRealm,formActionOrigin,guid,timeCreated,timeLastUsed,timePasswordChanged", + `https://example1.com,existing${random},existing,,,{${random}-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924000`, + `https://example1.com,duplicate,duplicate,,,{dddd0080-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363`, + ]; + const updatedCsvData = [ + "url,username,password,httpRealm,formActionOrigin,guid,timeCreated,timeLastUsed,timePasswordChanged", + `https://example1.com,added${random},added,,,,,,`, + `https://example1.com,existing${random},modified,,,{${random}-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363`, + `https://example1.com,duplicate,duplicate,,,{dddd0080-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363`, + `https://example1.com,error,,,,,,,`, + ]; + + await CsvImportHelper.clickImportFromCsvMenu(browser, initialCsvData); + await CsvImportHelper.waitForImportToComplete(); + await BrowserTestUtils.synthesizeMouseAtCenter( + "dismiss-button", + {}, + browser + ); + await CsvImportHelper.clickImportFromCsvMenu(browser, updatedCsvData); + await CsvImportHelper.waitForImportToComplete(); + + let summary = await CsvImportHelper.getCsvImportSuccessDialogData( + browser + ); + Assert.equal(summary.added, "1", "It should have one item as added"); + Assert.equal( + summary.modified, + "1", + "It should have one item as modified" + ); + Assert.equal( + summary.noChange, + "1", + "It should have one item as unchanged" + ); + Assert.equal(summary.errors, "1", "It should have one item as error"); + } + ); +}); + +add_task(async function test_open_import_all_four_detailed_report() { + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async browser => { + const initialCsvData = [ + "url,username,password,httpRealm,formActionOrigin,guid,timeCreated,timeLastUsed,timePasswordChanged", + `https://example2.com,existing${random},existing,,,{${random}-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924000`, + "https://example2.com,duplicate,duplicate,,,{dddd0080-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363", + ]; + const updatedCsvData = [ + "url,username,password,httpRealm,formActionOrigin,guid,timeCreated,timeLastUsed,timePasswordChanged", + `https://example2.com,added${random},added,,,,,,`, + `https://example2.com,existing${random},modified,,,{${random}-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363`, + "https://example2.com,duplicate,duplicate,,,{dddd0080-07a1-4bcf-86f0-7d56b9c1f48f},1582229924361,1582495972623,1582229924363", + "https://example2.com,error,,,,,,,", + ]; + + await CsvImportHelper.clickImportFromCsvMenu(browser, initialCsvData); + await CsvImportHelper.waitForImportToComplete(); + await BrowserTestUtils.synthesizeMouseAtCenter( + "dismiss-button", + {}, + browser + ); + await CsvImportHelper.clickImportFromCsvMenu(browser, updatedCsvData); + await CsvImportHelper.waitForImportToComplete(); + const reportTab = await CsvImportHelper.clickDetailedReport(browser); + const report = await CsvImportHelper.getDetailedReportData(browser); + BrowserTestUtils.removeTab(reportTab); + const { added, modified, noChange, errors, rows } = report; + Assert.equal(added, 1, "It should have one item as added"); + Assert.equal(modified, 1, "It should have one item as modified"); + Assert.equal(noChange, 1, "It should have one item as unchanged"); + Assert.equal(errors, 1, "It should have one item as error"); + Assert.deepEqual( + [ + "about-logins-import-report-row-description-added", + "about-logins-import-report-row-description-modified", + "about-logins-import-report-row-description-no-change", + "about-logins-import-report-row-description-error-missing-field", + ], + rows, + "It should have expected rows in order" + ); + } + ); +}); + +add_task(async function test_open_import_from_csv_with_invalid_file() { + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:logins" }, + async browser => { + await CsvImportHelper.clickImportFromCsvMenu(browser, [ + "invalid csv file", + ]); + + info("Waiting for the import error dialog"); + const errorDialog = await CsvImportHelper.getCsvImportErrorDialogData( + browser + ); + Assert.equal(errorDialog.hidden, false, "Dialog should not be hidden"); + Assert.equal( + errorDialog.l10nTitle, + "about-logins-import-dialog-error-file-format-title", + "Dialog error title should be correct" + ); + Assert.equal( + errorDialog.l10nDescription, + "about-logins-import-dialog-error-file-format-description", + "Dialog error description should be correct" + ); + Assert.equal( + errorDialog.l10nFocused, + "about-logins-import-dialog-error-learn-more", + "Learn more link should be focused." + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openPreferences.js b/browser/components/aboutlogins/tests/browser/browser_openPreferences.js new file mode 100644 index 0000000000..57ca74ba87 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openPreferences.js @@ -0,0 +1,82 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +let { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); + +add_setup(async function () { + await TestUtils.waitForCondition(() => { + Services.telemetry.clearEvents(); + let events = Services.telemetry.snapshotEvents( + Ci.nsITelemetry.DATASET_PRERELEASE_CHANNELS, + true + ).content; + return !events || !events.length; + }, "Waiting for content telemetry events to get cleared"); + + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test_open_preferences() { + // We want to make sure we visit about:preferences#privacy-logins , as that is + // what causes us to scroll to and highlight the "logins" section. However, + // about:preferences will redirect the URL, so the eventual load event will happen + // on about:preferences#privacy . The `wantLoad` parameter we pass to + // `waitForNewTab` needs to take this into account: + let seenFirstURL = false; + let promiseNewTab = BrowserTestUtils.waitForNewTab( + gBrowser, + url => { + if (url == "about:preferences#privacy-logins") { + seenFirstURL = true; + return true; + } else if (url == "about:preferences#privacy") { + Assert.ok( + seenFirstURL, + "Must have seen an onLocationChange notification for the privacy-logins hash" + ); + return true; + } + return false; + }, + true + ); + + let browser = gBrowser.selectedBrowser; + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + await SpecialPowers.spawn(browser, [], async () => { + return ContentTaskUtils.waitForCondition(() => { + let menuButton = Cu.waiveXrays( + content.document.querySelector("menu-button") + ); + return !menuButton.shadowRoot.querySelector(".menu").hidden; + }, "waiting for menu to open"); + }); + + function getPrefsItem() { + let menuButton = window.document.querySelector("menu-button"); + return menuButton.shadowRoot.querySelector(".menuitem-preferences"); + } + await BrowserTestUtils.synthesizeMouseAtCenter(getPrefsItem, {}, browser); + + info("waiting for new tab to get opened"); + let newTab = await promiseNewTab; + Assert.ok(true, "New tab opened to about:preferences"); + + BrowserTestUtils.removeTab(newTab); + + // First event is for opening about:logins + await LoginTestUtils.telemetry.waitForEventCount(2); + TelemetryTestUtils.assertEvents( + [["pwmgr", "mgmt_menu_item_used", "preferences"]], + { category: "pwmgr", method: "mgmt_menu_item_used" }, + { process: "content" } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openPreferencesExternal.js b/browser/components/aboutlogins/tests/browser/browser_openPreferencesExternal.js new file mode 100644 index 0000000000..e4290371fb --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openPreferencesExternal.js @@ -0,0 +1,65 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); +}); + +add_task(async function test_open_feedback() { + const menuArray = [ + { + urlFinal: + "https://example.com/password-manager-remember-delete-edit-logins", + urlBase: "https://example.com/", + pref: "app.support.baseURL", + selector: ".menuitem-help", + }, + ]; + + for (const { urlFinal, urlBase, pref, selector } of menuArray) { + info("Test on " + urlFinal); + + await SpecialPowers.pushPrefEnv({ + set: [[pref, urlBase]], + }); + + let promiseNewTab = BrowserTestUtils.waitForNewTab(gBrowser, urlFinal); + + let browser = gBrowser.selectedBrowser; + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + await SpecialPowers.spawn(browser, [], async () => { + return ContentTaskUtils.waitForCondition(() => { + let menuButton = content.document.querySelector("menu-button"); + return !menuButton.shadowRoot.querySelector(".menu").hidden; + }, "waiting for menu to open"); + }); + + // Not using synthesizeMouseAtCenter here because the element we want clicked on + // is in the shadow DOM and therefore requires using a function 1st argument + // to BrowserTestUtils.synthesizeMouseAtCenter but we need to pass an + // arbitrary selector. See bug 1557489 for more info. As a workaround, this + // manually calculates the position to click. + let { x, y } = await SpecialPowers.spawn( + browser, + [selector], + async menuItemSelector => { + let menuButton = content.document.querySelector("menu-button"); + let prefsItem = menuButton.shadowRoot.querySelector(menuItemSelector); + return prefsItem.getBoundingClientRect(); + } + ); + await BrowserTestUtils.synthesizeMouseAtPoint(x + 5, y + 5, {}, browser); + + info("waiting for new tab to get opened"); + let newTab = await promiseNewTab; + Assert.ok(true, "New tab opened to" + urlFinal); + + BrowserTestUtils.removeTab(newTab); + } +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_openSite.js b/browser/components/aboutlogins/tests/browser/browser_openSite.js new file mode 100644 index 0000000000..f33d57a8e4 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_openSite.js @@ -0,0 +1,94 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_launch_login_item() { + let promiseNewTab = BrowserTestUtils.waitForNewTab( + gBrowser, + TEST_LOGIN1.origin + "/" + ); + + let browser = gBrowser.selectedBrowser; + + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let originInput = loginItem.shadowRoot.querySelector("a[name='origin']"); + let EventUtils = ContentTaskUtils.getEventUtils(content); + // Use synthesizeMouseAtCenter to generate an event that more closely resembles the + // properties of the event object that will be seen when the user clicks the element + // (.click() sets originalTarget while synthesizeMouse has originalTarget as a Restricted object). + await EventUtils.synthesizeMouseAtCenter(originInput, {}, content); + }); + + info("waiting for new tab to get opened"); + let newTab = await promiseNewTab; + Assert.ok(true, "New tab opened to " + TEST_LOGIN1.origin); + BrowserTestUtils.removeTab(newTab); + + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + return; + } + + promiseNewTab = BrowserTestUtils.waitForNewTab( + gBrowser, + TEST_LOGIN1.origin + "/" + ); + let reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + loginItem._editButton.click(); + }); + await reauthObserved; + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + loginItem._usernameInput.value += "-changed"; + + Assert.ok( + content.document.querySelector("confirmation-dialog").hidden, + "discard-changes confirmation-dialog should be hidden before opening the site" + ); + + let originInput = loginItem.shadowRoot.querySelector("a[name='origin']"); + let EventUtils = ContentTaskUtils.getEventUtils(content); + // Use synthesizeMouseAtCenter to generate an event that more closely resembles the + // properties of the event object that will be seen when the user clicks the element + // (.click() sets originalTarget while synthesizeMouse has originalTarget as a Restricted object). + await EventUtils.synthesizeMouseAtCenter(originInput, {}, content); + }); + + info("waiting for new tab to get opened"); + newTab = await promiseNewTab; + Assert.ok(true, "New tab opened to " + TEST_LOGIN1.origin); + + let modifiedLogin = TEST_LOGIN1.clone(); + modifiedLogin.timeLastUsed = 9000; + let storageChangedPromised = TestUtils.topicObserved( + "passwordmgr-storage-changed", + (_, data) => data == "modifyLogin" + ); + Services.logins.modifyLogin(TEST_LOGIN1, modifiedLogin); + await storageChangedPromised; + + BrowserTestUtils.removeTab(newTab); + + await SpecialPowers.spawn(browser, [], async () => { + await ContentTaskUtils.waitForCondition(() => { + return !content.document.querySelector("confirmation-dialog").hidden; + }, "waiting for confirmation-dialog to appear"); + Assert.ok( + !content.document.querySelector("confirmation-dialog").hidden, + "discard-changes confirmation-dialog should be visible after logging in to a site with a modified login present in the form" + ); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_osAuthDialog.js b/browser/components/aboutlogins/tests/browser/browser_osAuthDialog.js new file mode 100644 index 0000000000..ca054e449a --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_osAuthDialog.js @@ -0,0 +1,165 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +add_task(async function test() { + info( + `updatechannel: ${UpdateUtils.getUpdateChannel(false)}; platform: ${ + AppConstants.platform + }` + ); + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + Assert.ok( + true, + `skipping test since oskeystore cannot be automated in this environment` + ); + return; + } + + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + + registerCleanupFunction(function () { + Services.logins.removeAllUserFacingLogins(); + BrowserTestUtils.removeTab(gBrowser.selectedTab); + }); + + // Show OS auth dialog when Reveal Password checkbox is checked if not on a new login + let osAuthDialogShown = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(false); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await osAuthDialogShown; + info("OS auth dialog shown and canceled"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok( + !revealCheckbox.checked, + "reveal checkbox should be unchecked if OS auth dialog canceled" + ); + }); + osAuthDialogShown = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await osAuthDialogShown; + info("OS auth dialog shown and authenticated"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok( + revealCheckbox.checked, + "reveal checkbox should be checked if OS auth dialog authenticated" + ); + }); + + info("'Edit' shouldn't show the prompt since the user has authenticated now"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + !loginItem.dataset.editing, + "Not in edit mode before clicking 'Edit'" + ); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "waiting for 'edit' mode" + ); + Assert.ok(loginItem.dataset.editing, "In edit mode"); + }); + + info("Test that the OS auth prompt is shown after about:logins is reopened"); + BrowserTestUtils.removeTab(gBrowser.selectedTab); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + + // Show OS auth dialog since the page has been reloaded. + osAuthDialogShown = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(false); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await osAuthDialogShown; + info("OS auth dialog shown and canceled"); + + // Show OS auth dialog since the previous attempt was canceled + osAuthDialogShown = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + info("clicking on reveal checkbox to hide the password"); + revealCheckbox.click(); + }); + await osAuthDialogShown; + info("OS auth dialog shown and passed"); + + // Show OS auth dialog since the timeout will have expired + osAuthDialogShown = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + info("clicking on reveal checkbox to reveal password"); + revealCheckbox.click(); + }); + info("waiting for os auth dialog"); + await osAuthDialogShown; + info("OS auth dialog shown and passed after timeout expiration"); + + // Disable the OS auth feature and confirm the prompt doesn't appear + await SpecialPowers.pushPrefEnv({ + set: [["signon.management.page.os-auth.enabled", false]], + }); + info("Reload about:logins to reset the timeout"); + BrowserTestUtils.removeTab(gBrowser.selectedTab); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + + info("'Edit' shouldn't show the prompt since the feature has been disabled"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + !loginItem.dataset.editing, + "Not in edit mode before clicking 'Edit'" + ); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "waiting for 'edit' mode" + ); + Assert.ok(loginItem.dataset.editing, "In edit mode"); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_primaryPassword.js b/browser/components/aboutlogins/tests/browser/browser_primaryPassword.js new file mode 100644 index 0000000000..79a1e9a1da --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_primaryPassword.js @@ -0,0 +1,282 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +function waitForLoginCountToReach(browser, loginCount) { + return SpecialPowers.spawn( + browser, + [loginCount], + async expectedLoginCount => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + await ContentTaskUtils.waitForCondition(() => { + return loginList._loginGuidsSortedOrder.length == expectedLoginCount; + }); + return loginList._loginGuidsSortedOrder.length; + } + ); +} + +add_setup(async function () { + await addLogin(TEST_LOGIN1); + registerCleanupFunction(() => { + Services.logins.removeAllUserFacingLogins(); + LoginTestUtils.primaryPassword.disable(); + }); +}); + +add_task(async function test() { + // Confirm that the mocking of the OS auth dialog isn't enabled so the + // test will timeout if a real OS auth dialog is shown. We don't show + // the OS auth dialog when Primary Password is enabled. + Assert.equal( + Services.prefs.getStringPref( + "toolkit.osKeyStore.unofficialBuildOnlyLogin", + "" + ), + "", + "Pref should be set to default value of empty string to start the test" + ); + LoginTestUtils.primaryPassword.enable(); + + let mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("cancel"); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + await mpDialogShown; + + let browser = gBrowser.selectedBrowser; + let logins = await waitForLoginCountToReach(browser, 0); + Assert.equal( + logins, + 0, + "No logins should be displayed when MP is set and unauthenticated" + ); + + let notification; + await TestUtils.waitForCondition( + () => + (notification = gBrowser + .getNotificationBox() + .getNotificationWithValue("primary-password-login-required")), + "waiting for primary-password-login-required notification" + ); + + Assert.ok( + notification, + "primary-password-login-required notification should be visible" + ); + + let buttons = notification.buttonContainer.querySelectorAll( + ".notification-button" + ); + Assert.equal(buttons.length, 1, "Should have one button."); + + let refreshPromise = BrowserTestUtils.browserLoaded(browser); + // Sign in with the Primary Password this time the dialog is shown + mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("authenticate"); + // Click the button to reload the page. + buttons[0].click(); + await refreshPromise; + info("Page reloaded"); + + await mpDialogShown; + info("Primary Password dialog shown and authenticated"); + + logins = await waitForLoginCountToReach(browser, 1); + Assert.equal( + logins, + 1, + "Logins should be displayed when MP is set and authenticated" + ); + + // Show MP dialog when Copy Password button clicked + mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("cancel"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-password-button" + ); + copyButton.click(); + }); + await mpDialogShown; + info("Primary Password dialog shown and canceled"); + mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("authenticate"); + info("Clicking copy password button again"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-password-button" + ); + copyButton.click(); + }); + await mpDialogShown; + info("Primary Password dialog shown and authenticated"); + await SpecialPowers.spawn(browser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let copyButton = loginItem.shadowRoot.querySelector( + ".copy-password-button" + ); + await ContentTaskUtils.waitForCondition(() => { + return copyButton.disabled; + }, "Waiting for copy button to be disabled"); + info("Password was copied to clipboard"); + }); + + // Show MP dialog when Reveal Password checkbox is checked if not on a new login + mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("cancel"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await mpDialogShown; + info("Primary Password dialog shown and canceled"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok( + !revealCheckbox.checked, + "reveal checkbox should be unchecked if MP dialog canceled" + ); + }); + mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("authenticate"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + }); + await mpDialogShown; + info("Primary Password dialog shown and authenticated"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok( + revealCheckbox.checked, + "reveal checkbox should be checked if MP dialog authenticated" + ); + }); + + info("Test toggling the password visibility on a new login"); + await SpecialPowers.spawn(browser, [], async function createNewToggle() { + let createButton = content.document + .querySelector("login-list") + .shadowRoot.querySelector(".create-login-button"); + createButton.click(); + + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let passwordField = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok(ContentTaskUtils.is_visible(revealCheckbox), "Toggle visible"); + Assert.ok(!revealCheckbox.checked, "Not revealed initially"); + Assert.equal(passwordField.type, "password", "type is password"); + revealCheckbox.click(); + + await ContentTaskUtils.waitForCondition(() => { + return passwordField.type == "text"; + }, "Waiting for type='text'"); + Assert.ok(revealCheckbox.checked, "Not revealed after click"); + + let cancelButton = loginItem.shadowRoot.querySelector(".cancel-button"); + cancelButton.click(); + }); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + + const loginFilter = Cu.waiveXrays( + loginList.shadowRoot.querySelector("login-filter") + ); + loginFilter.value = "pass1"; + Assert.equal( + loginList._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ).length, + 1, + "login-list should show corresponding result when primary password is enabled" + ); + loginFilter.value = ""; + Assert.equal( + loginList._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ).length, + 1, + "login-list should show all results since the filter is empty" + ); + }); + LoginTestUtils.primaryPassword.disable(); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + Cu.waiveXrays(content).AboutLoginsUtils.primaryPasswordEnabled = false; + const loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + const loginFilter = Cu.waiveXrays( + loginList.shadowRoot.querySelector("login-filter") + ); + loginFilter.value = "pass1"; + Assert.equal( + loginList._list.querySelectorAll( + ".login-list-item[data-guid]:not([hidden])" + ).length, + 1, + "login-list should show login with matching password since MP is disabled" + ); + }); + + BrowserTestUtils.removeTab(gBrowser.selectedTab); +}); + +add_task(async function test_login_item_after_successful_auth() { + // Confirm that the mocking of the OS auth dialog isn't enabled so the + // test will timeout if a real OS auth dialog is shown. We don't show + // the OS auth dialog when Primary Password is enabled. + Assert.equal( + Services.prefs.getStringPref( + "toolkit.osKeyStore.unofficialBuildOnlyLogin", + "" + ), + "", + "Pref should be set to default value of empty string to start the test" + ); + LoginTestUtils.primaryPassword.enable(); + + let mpDialogShown = forceAuthTimeoutAndWaitForMPDialog("authenticate"); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + await mpDialogShown; + + let browser = gBrowser.selectedBrowser; + let logins = await waitForLoginCountToReach(browser, 1); + Assert.equal( + logins, + 1, + "Logins should be displayed when MP is set and authenticated" + ); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + !loginItem.classList.contains("no-logins"), + "Login item should have content after MP is authenticated" + ); + }); + + LoginTestUtils.primaryPassword.disable(); + BrowserTestUtils.removeTab(gBrowser.selectedTab); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_removeAllDialog.js b/browser/components/aboutlogins/tests/browser/browser_removeAllDialog.js new file mode 100644 index 0000000000..41503e2b4d --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_removeAllDialog.js @@ -0,0 +1,555 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ +/* eslint-disable mozilla/no-arbitrary-setTimeout */ + +const OS_REAUTH_PREF = "signon.management.page.os-auth.enabled"; + +async function openRemoveAllDialog(browser) { + await SimpleTest.promiseFocus(browser); + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + await SpecialPowers.spawn(browser, [], async () => { + let menuButton = content.document.querySelector("menu-button"); + let menu = menuButton.shadowRoot.querySelector("ul.menu"); + await ContentTaskUtils.waitForCondition(() => !menu.hidden); + }); + function getRemoveAllMenuButton() { + let menuButton = window.document.querySelector("menu-button"); + return menuButton.shadowRoot.querySelector(".menuitem-remove-all-logins"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getRemoveAllMenuButton, + {}, + browser + ); + info("remove all dialog should be opened"); +} + +async function activateLoginItemEdit(browser) { + await SimpleTest.promiseFocus(browser); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok(loginItem, "Login item should exist"); + }); + function getLoginItemEditButton() { + let loginItem = window.document.querySelector("login-item"); + return loginItem.shadowRoot.querySelector(".edit-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getLoginItemEditButton, + {}, + browser + ); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + loginItem.shadowRoot.querySelector(".edit-button").click(); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Waiting for login-item to enter edit mode" + ); + }); + info("login-item should be in edit mode"); +} + +async function activateCreateNewLogin(browser) { + await SimpleTest.promiseFocus(browser); + function getCreateNewLoginButton() { + let loginList = window.document.querySelector("login-list"); + return loginList.shadowRoot.querySelector(".create-login-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getCreateNewLoginButton, + {}, + browser + ); +} + +async function waitForRemoveAllLogins() { + return new Promise(resolve => { + Services.obs.addObserver(function observer(subject, topic, changeType) { + if (changeType != "removeAllLogins") { + return; + } + + Services.obs.removeObserver(observer, "passwordmgr-storage-changed"); + resolve(); + }, "passwordmgr-storage-changed"); + }); +} + +add_setup(async function () { + await SpecialPowers.pushPrefEnv({ + set: [[OS_REAUTH_PREF, false]], + }); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(async () => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + await SpecialPowers.popPrefEnv(); + }); + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); +}); + +add_task(async function test_remove_all_dialog_l10n() { + Assert.ok(TEST_LOGIN1, "test_login1"); + let browser = gBrowser.selectedBrowser; + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + const EventUtils = ContentTaskUtils.getEventUtils(content); + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + Assert.ok(!dialog.hidden); + let title = dialog.shadowRoot.querySelector(".title"); + let message = dialog.shadowRoot.querySelector(".message"); + let label = dialog.shadowRoot.querySelector(".checkbox-text"); + let cancelButton = dialog.shadowRoot.querySelector(".cancel-button"); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + await content.document.l10n.translateElements([ + title, + message, + label, + cancelButton, + removeAllButton, + ]); + Assert.equal( + title.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-title", + "Title contents should match l10n-id attribute set on element" + ); + Assert.equal( + message.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-message", + "Message contents should match l10n-id attribute set on element" + ); + Assert.equal( + label.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-checkbox-label", + "Label contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + cancelButton.dataset.l10nId, + "confirmation-dialog-cancel-button", + "Cancel button contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + removeAllButton.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-confirm-button-label", + "Remove all button contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + JSON.parse(title.dataset.l10nArgs).count, + 1, + "Title contents should match l10n-args attribute set on element" + ); + Assert.equal( + JSON.parse(message.dataset.l10nArgs).count, + 1, + "Message contents should match l10n-args attribute set on element" + ); + Assert.equal( + JSON.parse(label.dataset.l10nArgs).count, + 1, + "Label contents should match l10n-id attribute set on outer element" + ); + EventUtils.synthesizeMouseAtCenter( + dialog.shadowRoot.querySelector(".cancel-button"), + {}, + content + ); + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden after clicking cancel button" + ); + }); +}); + +add_task(async function test_remove_all_dialog_keyboard_navigation() { + let browser = gBrowser.selectedBrowser; + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + const EventUtils = ContentTaskUtils.getEventUtils(content); + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let cancelButton = dialog.shadowRoot.querySelector(".cancel-button"); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + Assert.equal( + removeAllButton.disabled, + true, + "Remove all should be disabled on dialog open" + ); + await EventUtils.synthesizeKey(" ", {}, content); + Assert.equal( + removeAllButton.disabled, + false, + "Remove all should be enabled when activating the checkbox" + ); + await EventUtils.synthesizeKey(" ", {}, content); + Assert.equal( + removeAllButton.disabled, + true, + "Remove all should be disabled after deactivating the checkbox" + ); + await EventUtils.synthesizeKey("KEY_Tab", {}, content); + Assert.equal( + dialog.shadowRoot.activeElement, + cancelButton, + "Cancel button should be the next element in tab order" + ); + await EventUtils.synthesizeKey(" ", {}, content); + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden after activating cancel button via Space key" + ); + }); + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + await EventUtils.synthesizeKey("KEY_Escape", {}, content); + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden after activating Escape key" + ); + }); + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let dismissButton = dialog.shadowRoot.querySelector(".dismiss-button"); + await EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content); + Assert.equal( + dialog.shadowRoot.activeElement, + dismissButton, + "dismiss button should be focused" + ); + await EventUtils.synthesizeKey(" ", {}, content); + await ContentTaskUtils.waitForCondition( + () => dialog.hidden, + "Waiting for the dialog to be hidden after activating X button" + ); + }); +}); + +add_task(async function test_remove_all_dialog_remove_logins() { + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + let browser = gBrowser.selectedBrowser; + let removeAllPromise = waitForRemoveAllLogins(); + + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let title = dialog.shadowRoot.querySelector(".title"); + let message = dialog.shadowRoot.querySelector(".message"); + let label = dialog.shadowRoot.querySelector(".checkbox-text"); + let cancelButton = dialog.shadowRoot.querySelector(".cancel-button"); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + + let checkbox = dialog.shadowRoot.querySelector(".checkbox"); + + await content.document.l10n.translateElements([ + title, + message, + cancelButton, + removeAllButton, + label, + checkbox, + ]); + Assert.equal( + dialog.shadowRoot.activeElement, + checkbox, + "Checkbox should be the focused element on dialog open" + ); + Assert.equal( + title.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-title", + "Title contents should match l10n-id attribute set on element" + ); + Assert.equal( + JSON.parse(title.dataset.l10nArgs).count, + 2, + "Title contents should match l10n-args attribute set on element" + ); + Assert.equal( + message.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-message", + "Message contents should match l10n-id attribute set on element" + ); + Assert.equal( + JSON.parse(message.dataset.l10nArgs).count, + 2, + "Message contents should match l10n-args attribute set on element" + ); + Assert.equal( + label.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-checkbox-label", + "Label contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + JSON.parse(label.dataset.l10nArgs).count, + 2, + "Label contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + cancelButton.dataset.l10nId, + "confirmation-dialog-cancel-button", + "Cancel button contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + removeAllButton.dataset.l10nId, + "about-logins-confirm-remove-all-dialog-confirm-button-label", + "Remove all button contents should match l10n-id attribute set on outer element" + ); + Assert.equal( + removeAllButton.disabled, + true, + "Remove all button should be disabled on dialog open" + ); + }); + function activateConfirmCheckbox() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".checkbox"); + } + + await BrowserTestUtils.synthesizeMouseAtCenter( + activateConfirmCheckbox, + {}, + browser + ); + + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + Assert.equal( + removeAllButton.disabled, + false, + "Remove all should be enabled after clicking the checkbox" + ); + }); + function getDialogRemoveAllButton() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".confirm-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getDialogRemoveAllButton, + {}, + browser + ); + await removeAllPromise; + await SpecialPowers.spawn(browser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + await ContentTaskUtils.waitForCondition( + () => content.document.documentElement.classList.contains("no-logins"), + "Waiting for no logins view since all logins should be deleted" + ); + await ContentTaskUtils.waitForCondition( + () => + !content.document.documentElement.classList.contains("login-selected"), + "Waiting for the FxA Sync illustration to reappear" + ); + await ContentTaskUtils.waitForCondition( + () => loginList.classList.contains("no-logins"), + "Waiting for login-list to be in no logins view as all logins should be deleted" + ); + }); + await BrowserTestUtils.synthesizeMouseAtCenter("menu-button", {}, browser); + await SpecialPowers.spawn(browser, [], async () => { + let menuButton = content.document.querySelector("menu-button"); + let removeAllMenuButton = menuButton.shadowRoot.querySelector( + ".menuitem-remove-all-logins" + ); + Assert.ok( + removeAllMenuButton.disabled, + "Remove all logins menu button is disabled if there are no logins" + ); + }); + await SpecialPowers.spawn(browser, [], async () => { + let menuButton = Cu.waiveXrays( + content.document.querySelector("menu-button") + ); + let menu = menuButton.shadowRoot.querySelector("ul.menu"); + await EventUtils.synthesizeKey("KEY_Escape", {}, content); + await ContentTaskUtils.waitForCondition( + () => menu.hidden, + "Waiting for menu to close" + ); + }); +}); + +add_task(async function test_edit_mode_resets_on_remove_all_with_login() { + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + let removeAllPromise = waitForRemoveAllLogins(); + let browser = gBrowser.selectedBrowser; + await activateLoginItemEdit(browser); + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + loginItem.dataset.editing, + "Login item is still in edit mode when the remove all dialog opens" + ); + }); + function getDialogCancelButton() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".cancel-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getDialogCancelButton, + {}, + browser + ); + await TestUtils.waitForTick(); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + loginItem.dataset.editing, + "Login item should be in editing mode after activating the cancel button in the remove all dialog" + ); + }); + + await openRemoveAllDialog(browser); + function activateConfirmCheckbox() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".checkbox"); + } + + await BrowserTestUtils.synthesizeMouseAtCenter( + activateConfirmCheckbox, + {}, + browser + ); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + Assert.equal( + removeAllButton.disabled, + false, + "Remove all should be enabled after clicking the checkbox" + ); + }); + function getDialogRemoveAllButton() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".confirm-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getDialogRemoveAllButton, + {}, + browser + ); + await TestUtils.waitForTick(); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + !loginItem.dataset.editing, + "Login item should not be in editing mode after activating the confirm button in the remove all dialog" + ); + }); + await removeAllPromise; +}); + +add_task(async function test_remove_all_when_creating_new_login() { + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + let removeAllPromise = waitForRemoveAllLogins(); + let browser = gBrowser.selectedBrowser; + await activateCreateNewLogin(browser); + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + loginItem.dataset.editing, + "Login item should be in edit mode when the remove all dialog opens" + ); + Assert.ok( + loginItem.dataset.isNewLogin, + "Login item should be in the 'new login' state when the remove all dialog opens" + ); + }); + function getDialogCancelButton() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".cancel-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getDialogCancelButton, + {}, + browser + ); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + loginItem.dataset.editing, + "Login item is still in edit mode after cancelling out of the remove all dialog" + ); + Assert.ok( + loginItem.dataset.isNewLogin, + "Login item should be in the 'newLogin' state after cancelling out of the remove all dialog" + ); + }); + + await openRemoveAllDialog(browser); + function activateConfirmCheckbox() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".checkbox"); + } + + await BrowserTestUtils.synthesizeMouseAtCenter( + activateConfirmCheckbox, + {}, + browser + ); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = Cu.waiveXrays( + content.document.querySelector("remove-logins-dialog") + ); + let removeAllButton = dialog.shadowRoot.querySelector(".confirm-button"); + Assert.equal( + removeAllButton.disabled, + false, + "Remove all should be enabled after clicking the checkbox" + ); + }); + function getDialogRemoveAllButton() { + let dialog = window.document.querySelector("remove-logins-dialog"); + return dialog.shadowRoot.querySelector(".confirm-button"); + } + await BrowserTestUtils.synthesizeMouseAtCenter( + getDialogRemoveAllButton, + {}, + browser + ); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = content.document.querySelector("login-item"); + Assert.ok( + !loginItem.dataset.editing, + "Login item should not be in editing mode after activating the confirm button in the remove all dialog" + ); + Assert.ok( + !loginItem.dataset.isNewLogin, + "Login item should not be in 'new login' mode after activating the confirm button in the remove all dialog" + ); + }); + await removeAllPromise; +}); + +add_task(async function test_ensure_icons_are_not_draggable() { + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + let browser = gBrowser.selectedBrowser; + await openRemoveAllDialog(browser); + await SpecialPowers.spawn(browser, [], async () => { + let dialog = content.document.querySelector("remove-logins-dialog"); + let warningIcon = dialog.shadowRoot.querySelector(".warning-icon"); + Assert.ok(!warningIcon.draggable, "Warning icon should not be draggable"); + let dismissIcon = dialog.shadowRoot.querySelector(".dismiss-icon"); + Assert.ok(!dismissIcon.draggable, "Dismiss icon should not be draggable"); + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_sessionRestore.js b/browser/components/aboutlogins/tests/browser/browser_sessionRestore.js new file mode 100644 index 0000000000..5ab03f9867 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_sessionRestore.js @@ -0,0 +1,62 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +async function checkLoginDisplayed(browser, testGuid) { + await SpecialPowers.spawn(browser, [testGuid], async function (guid) { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 1 && + loginList._loginGuidsSortedOrder[0] == guid + ); + }, "Waiting for login to be displayed in page"); + Assert.ok(loginFound, "Confirming that login is displayed in page"); + }); +} + +add_task(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + registerCleanupFunction(() => { + Services.logins.removeAllUserFacingLogins(); + }); + + const testGuid = TEST_LOGIN1.guid; + const tab = BrowserTestUtils.addTab(gBrowser, "about:logins"); + const browser = gBrowser.getBrowserForTab(tab); + await BrowserTestUtils.browserLoaded(browser); + + await checkLoginDisplayed(browser, testGuid); + + BrowserTestUtils.removeTab(tab); + info("Adding a lazy about:logins tab..."); + let lazyTab = BrowserTestUtils.addTab(gBrowser, "about:logins", { + createLazyBrowser: true, + }); + + Assert.equal(lazyTab.linkedPanel, "", "Tab is lazy"); + let tabLoaded = new Promise(resolve => { + gBrowser.addTabsProgressListener({ + async onLocationChange(aBrowser) { + if (lazyTab.linkedBrowser == aBrowser) { + gBrowser.removeTabsProgressListener(this); + await Promise.resolve(); + resolve(); + } + }, + }); + }); + + info("Switching tab to cause it to get restored"); + const browserLoaded = BrowserTestUtils.browserLoaded(lazyTab.linkedBrowser); + await BrowserTestUtils.switchTab(gBrowser, lazyTab); + + await tabLoaded; + await browserLoaded; + + let lazyBrowser = lazyTab.linkedBrowser; + await checkLoginDisplayed(lazyBrowser, testGuid); + + BrowserTestUtils.removeTab(lazyTab); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_tabKeyNav.js b/browser/components/aboutlogins/tests/browser/browser_tabKeyNav.js new file mode 100644 index 0000000000..0305107d23 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_tabKeyNav.js @@ -0,0 +1,276 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_tab_key_nav() { + const browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + // Helper function for getting the resulting DOM element given a list of selectors possibly inside shadow DOM + const selectWithShadowRootIfNeeded = (document, selectorsArray) => + selectorsArray.reduce( + (selectionSoFar, currentSelector) => + selectionSoFar.shadowRoot + ? selectionSoFar.shadowRoot.querySelector(currentSelector) + : selectionSoFar.querySelector(currentSelector), + document + ); + + const EventUtils = ContentTaskUtils.getEventUtils(content); + // list [selector, shadow root selector] for each element + // in the order we expect them to be navigated. + const expectedElementsInOrder = [ + ["login-list", "login-filter", "input"], + ["login-list", "button.create-login-button"], + ["login-list", "select#login-sort"], + ["login-list", "ol"], + ["login-item", "button.edit-button"], + ["login-item", "button.delete-button"], + ["login-item", "a.origin-input"], + ["login-item", "button.copy-username-button"], + ["login-item", "input.reveal-password-checkbox"], + ["login-item", "button.copy-password-button"], + ]; + + const firstElement = selectWithShadowRootIfNeeded( + content.document, + expectedElementsInOrder.at(0) + ); + + const lastElement = selectWithShadowRootIfNeeded( + content.document, + expectedElementsInOrder.at(-1) + ); + + async function tab() { + EventUtils.synthesizeKey("KEY_Tab", {}, content); + await new Promise(resolve => content.requestAnimationFrame(resolve)); + // The following line can help with focus trap debugging: + // await new Promise(resolve => content.window.setTimeout(resolve, 500)); + } + async function shiftTab() { + EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content); + await new Promise(resolve => content.requestAnimationFrame(resolve)); + // await new Promise(resolve => content.window.setTimeout(resolve, 500)); + } + + // Getting focused shadow DOM element itself instead of shadowRoot, + // using recursion for any component-nesting level, as in: + // document.activeElement.shadowRoot.activeElement.shadowRoot.activeElement + function getFocusedElement() { + let element = content.document.activeElement; + const getShadowRootFocus = e => { + if (e.shadowRoot) { + return getShadowRootFocus(e.shadowRoot.activeElement); + } + return e; + }; + return getShadowRootFocus(element); + } + + // Ensure the test starts in a valid state + firstElement.focus(); + // Assert that we tab navigate correctly + for (let expectedSelector of expectedElementsInOrder) { + const expectedElement = selectWithShadowRootIfNeeded( + content.document, + expectedSelector + ); + + // By default, MacOS will skip over certain text controls, such as links. + if ( + content.window.navigator.platform.toLowerCase().includes("mac") && + expectedElement.tagName === "A" + ) { + continue; + } + + const actualElement = getFocusedElement(); + + Assert.equal( + actualElement, + expectedElement, + "Actual focused element should equal the expected focused element" + ); + await tab(); + } + + lastElement.focus(); + + // Assert that we shift + tab navigate correctly starting from the last ordered element + for (let expectedSelector of expectedElementsInOrder.reverse()) { + const expectedElement = selectWithShadowRootIfNeeded( + content.document, + expectedSelector + ); + // By default, MacOS will skip over certain text controls, such as links. + if ( + content.window.navigator.platform.toLowerCase().includes("mac") && + expectedElement.tagName === "A" + ) { + continue; + } + + const actualElement = getFocusedElement(); + Assert.equal( + actualElement, + expectedElement, + "Actual focused element should equal the expected focused element" + ); + await shiftTab(); + } + await tab(); // tab back to the first element + }); +}); + +add_task(async function test_tab_to_create_button() { + const browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [], async () => { + const EventUtils = ContentTaskUtils.getEventUtils(content); + + function waitForAnimationFrame() { + return new Promise(resolve => content.requestAnimationFrame(resolve)); + } + + async function tab() { + EventUtils.synthesizeKey("KEY_Tab", {}, content); + await waitForAnimationFrame(); + } + + const loginList = content.document.querySelector("login-list"); + const loginFilter = loginList.shadowRoot.querySelector("login-filter"); + const loginSort = loginList.shadowRoot.getElementById("login-sort"); + const loginListbox = loginList.shadowRoot.querySelector("ol"); + const createButton = loginList.shadowRoot.querySelector( + ".create-login-button" + ); + + const getFocusedElement = () => loginList.shadowRoot.activeElement; + Assert.equal(getFocusedElement(), loginFilter, "login-filter is focused"); + + await tab(); + Assert.equal(getFocusedElement(), createButton, "create button is focused"); + + await tab(); + Assert.equal(getFocusedElement(), loginSort, "login sort is focused"); + + await tab(); + Assert.equal(getFocusedElement(), loginListbox, "listbox is focused next"); + + await tab(); + Assert.equal(getFocusedElement(), null, "login-list isn't focused again"); + }); +}); + +add_task(async function test_tab_to_edit_button() { + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn( + browser, + [[TEST_LOGIN1.guid, TEST_LOGIN3.guid]], + async ([testLoginNormalGuid, testLoginBreachedGuid]) => { + const EventUtils = ContentTaskUtils.getEventUtils(content); + + function waitForAnimationFrame() { + return new Promise(resolve => content.requestAnimationFrame(resolve)); + } + + async function tab() { + EventUtils.synthesizeKey("KEY_Tab", {}, content); + await waitForAnimationFrame(); + } + + const loginList = content.document.querySelector("login-list"); + const loginItem = content.document.querySelector("login-item"); + const loginFilter = loginList.shadowRoot.querySelector("login-filter"); + const createButton = loginList.shadowRoot.querySelector( + ".create-login-button" + ); + const loginSort = loginList.shadowRoot.getElementById("login-sort"); + const loginListbox = loginList.shadowRoot.querySelector("ol"); + const editButton = loginItem.shadowRoot.querySelector(".edit-button"); + const breachAlert = loginItem.shadowRoot.querySelector(".breach-alert"); + const getFocusedElement = () => { + if (content.document.activeElement == loginList) { + return loginList.shadowRoot.activeElement; + } + if (content.document.activeElement == loginItem) { + return loginItem.shadowRoot.activeElement; + } + if (content.document.activeElement == loginFilter) { + return loginFilter.shadowRoot.activeElement; + } + Assert.ok( + false, + "not expecting a different element to get focused in this test: " + + content.document.activeElement.outerHTML + ); + return undefined; + }; + + for (let guidToSelect of [testLoginNormalGuid, testLoginBreachedGuid]) { + let loginListItem = loginList.shadowRoot.querySelector( + `.login-list-item[data-guid="${guidToSelect}"]` + ); + loginListItem.click(); + await ContentTaskUtils.waitForCondition(() => { + let waivedLoginItem = Cu.waiveXrays(loginItem); + return ( + waivedLoginItem._login && + waivedLoginItem._login.guid == guidToSelect + ); + }, "waiting for login-item to show the selected login"); + + Assert.equal( + breachAlert.hidden, + guidToSelect == testLoginNormalGuid, + ".breach-alert should be hidden if the login is not breached. current login breached? " + + (guidToSelect == testLoginBreachedGuid) + ); + + createButton.focus(); + Assert.equal( + getFocusedElement(), + createButton, + "create button is focused" + ); + + await tab(); + Assert.equal(getFocusedElement(), loginSort, "login sort is focused"); + + await tab(); + Assert.equal( + getFocusedElement(), + loginListbox, + "listbox is focused next" + ); + + await tab(); + Assert.equal(getFocusedElement(), editButton, "edit button is focused"); + } + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_updateLogin.js b/browser/components/aboutlogins/tests/browser/browser_updateLogin.js new file mode 100644 index 0000000000..efa8bbdd7b --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_updateLogin.js @@ -0,0 +1,421 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +const { CONCEALED_PASSWORD_TEXT } = ChromeUtils.importESModule( + "chrome://browser/content/aboutlogins/aboutLoginsUtils.mjs" +); + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + registerCleanupFunction(() => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + }); +}); + +add_task(async function test_show_logins() { + let browser = gBrowser.selectedBrowser; + await SpecialPowers.spawn(browser, [TEST_LOGIN1.guid], async loginGuid => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + let loginFound = await ContentTaskUtils.waitForCondition(() => { + return ( + loginList._loginGuidsSortedOrder.length == 1 && + loginList._loginGuidsSortedOrder[0] == loginGuid + ); + }, "Waiting for login to be displayed"); + Assert.ok( + loginFound, + "Stored logins should be displayed upon loading the page" + ); + }); +}); + +add_task(async function test_login_item() { + if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) { + return; + } + + async function test_discard_dialog( + login, + exitPointSelector, + concealedPasswordText + ) { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Entering edit mode" + ); + await Promise.resolve(); + + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem._passwordInput; + usernameInput.value += "-undome"; + passwordInput.value += "-undome"; + + let dialog = content.document.querySelector("confirmation-dialog"); + Assert.ok(dialog.hidden, "Confirm dialog should initially be hidden"); + + let exitPoint = + loginItem.shadowRoot.querySelector(exitPointSelector) || + loginList.shadowRoot.querySelector(exitPointSelector); + exitPoint.click(); + + Assert.ok(!dialog.hidden, "Confirm dialog should be visible"); + + let confirmDiscardButton = + dialog.shadowRoot.querySelector(".confirm-button"); + await content.document.l10n.translateElements([ + dialog.shadowRoot.querySelector(".title"), + dialog.shadowRoot.querySelector(".message"), + confirmDiscardButton, + ]); + + confirmDiscardButton.click(); + + Assert.ok( + dialog.hidden, + "Confirm dialog should be hidden after confirming" + ); + + await Promise.resolve(); + + let loginListItem = Cu.waiveXrays( + loginList.shadowRoot.querySelector(".login-list-item[data-guid]") + ); + + loginListItem.click(); + + await ContentTaskUtils.waitForCondition( + () => usernameInput.value == login.username + ); + + Assert.equal( + usernameInput.value, + login.username, + "Username change should be reverted" + ); + Assert.equal( + passwordInput.value, + login.password, + "Password change should be reverted" + ); + let passwordDisplayInput = loginItem._passwordDisplayInput; + Assert.equal( + passwordDisplayInput.value, + concealedPasswordText, + "Password change should be reverted for display" + ); + Assert.ok( + !passwordInput.hasAttribute("value"), + "Password shouldn't be exposed in @value" + ); + Assert.equal( + passwordInput.style.width, + login.password.length + "ch", + "Password field width shouldn't have changed" + ); + } + + let browser = gBrowser.selectedBrowser; + let reauthObserved = OSKeyStoreTestUtils.waitForOSKeyStoreLogin(true); + await SpecialPowers.spawn( + browser, + [LoginHelper.loginToVanillaObject(TEST_LOGIN1)], + async login => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let loginListItem = Cu.waiveXrays( + loginList.shadowRoot.querySelector(".login-list-item[data-guid]") + ); + loginListItem.click(); + + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + let loginItemPopulated = await ContentTaskUtils.waitForCondition(() => { + return ( + loginItem._login.guid == loginListItem.dataset.guid && + loginItem._login.guid == login.guid + ); + }, "Waiting for login item to get populated"); + Assert.ok(loginItemPopulated, "The login item should get populated"); + + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + } + ); + info("waiting for oskeystore auth #1"); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [ + LoginHelper.loginToVanillaObject(TEST_LOGIN1), + ".create-login-button", + CONCEALED_PASSWORD_TEXT, + ], + test_discard_dialog + ); + reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + info("waiting for oskeystore auth #2"); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [ + LoginHelper.loginToVanillaObject(TEST_LOGIN1), + ".cancel-button", + CONCEALED_PASSWORD_TEXT, + ], + test_discard_dialog + ); + reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + info("waiting for oskeystore auth #3"); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [LoginHelper.loginToVanillaObject(TEST_LOGIN1), CONCEALED_PASSWORD_TEXT], + async (login, concealedPasswordText) => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Entering edit mode" + ); + await Promise.resolve(); + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem._passwordInput; + let passwordDisplayInput = loginItem._passwordDisplayInput; + + Assert.ok( + loginItem.dataset.editing, + "LoginItem should be in 'edit' mode" + ); + Assert.equal( + passwordInput.type, + "password", + "Password should still be hidden before revealed in edit mode" + ); + + passwordDisplayInput.focus(); + + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + Assert.ok( + revealCheckbox.checked, + "reveal-checkbox should be checked when password input is focused" + ); + + Assert.equal( + passwordInput.type, + "text", + "Password should be shown as text when focused" + ); + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + + saveChangesButton.click(); + + await ContentTaskUtils.waitForCondition(() => { + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + return !editButton.disabled; + }, "Waiting to exit edit mode"); + + Assert.ok( + !revealCheckbox.checked, + "reveal-checkbox should be unchecked after saving changes" + ); + Assert.ok( + !loginItem.dataset.editing, + "LoginItem should not be in 'edit' mode after saving" + ); + Assert.equal( + passwordInput.type, + "password", + "Password should be hidden after exiting edit mode" + ); + Assert.equal( + usernameInput.value, + login.username, + "Username change should be reverted" + ); + Assert.equal( + passwordInput.value, + login.password, + "Password change should be reverted" + ); + Assert.equal( + passwordDisplayInput.value, + concealedPasswordText, + "Password change should be reverted for display" + ); + Assert.ok( + !passwordInput.hasAttribute("value"), + "Password shouldn't be exposed in @value" + ); + Assert.equal( + passwordInput.style.width, + login.password.length + "ch", + "Password field width shouldn't have changed" + ); + } + ); + reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + info("waiting for oskeystore auth #4"); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [LoginHelper.loginToVanillaObject(TEST_LOGIN1)], + async login => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Entering edit mode" + ); + await Promise.resolve(); + + let revealCheckbox = loginItem.shadowRoot.querySelector( + ".reveal-password-checkbox" + ); + revealCheckbox.click(); + Assert.ok( + revealCheckbox.checked, + "reveal-checkbox should be checked after clicking" + ); + + let usernameInput = loginItem.shadowRoot.querySelector( + "input[name='username']" + ); + let passwordInput = loginItem._passwordInput; + + usernameInput.value += "-saveme"; + passwordInput.value += "-saveme"; + + Assert.ok( + loginItem.dataset.editing, + "LoginItem should be in 'edit' mode" + ); + + let saveChangesButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveChangesButton.click(); + + await ContentTaskUtils.waitForCondition(() => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let guid = loginList._loginGuidsSortedOrder[0]; + let updatedLogin = loginList._logins[guid].login; + return ( + updatedLogin && + updatedLogin.username == usernameInput.value && + updatedLogin.password == passwordInput.value + ); + }, "Waiting for corresponding login in login list to update"); + + Assert.ok( + !revealCheckbox.checked, + "reveal-checkbox should be unchecked after saving changes" + ); + Assert.ok( + !loginItem.dataset.editing, + "LoginItem should not be in 'edit' mode after saving" + ); + Assert.equal( + passwordInput.style.width, + passwordInput.value.length + "ch", + "Password field width should be correctly updated" + ); + } + ); + reauthObserved = forceAuthTimeoutAndWaitForOSKeyStoreLogin({ + loginResult: true, + }); + await SpecialPowers.spawn(browser, [], async () => { + let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); + let editButton = loginItem.shadowRoot.querySelector(".edit-button"); + editButton.click(); + }); + info("waiting for oskeystore auth #5"); + await reauthObserved; + await SpecialPowers.spawn( + browser, + [LoginHelper.loginToVanillaObject(TEST_LOGIN1)], + async login => { + let loginItem = Cu.waiveXrays( + content.document.querySelector("login-item") + ); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.editing, + "Entering edit mode" + ); + await Promise.resolve(); + + Assert.ok( + loginItem.dataset.editing, + "LoginItem should be in 'edit' mode" + ); + let deleteButton = loginItem.shadowRoot.querySelector(".delete-button"); + deleteButton.click(); + let confirmDeleteDialog = Cu.waiveXrays( + content.document.querySelector("confirmation-dialog") + ); + let confirmDeleteButton = + confirmDeleteDialog.shadowRoot.querySelector(".confirm-button"); + confirmDeleteButton.click(); + + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let loginListItem = Cu.waiveXrays( + loginList.shadowRoot.querySelector(".login-list-item[data-guid]") + ); + await ContentTaskUtils.waitForCondition(() => { + loginListItem = loginList.shadowRoot.querySelector( + ".login-list-item[data-guid]" + ); + return !loginListItem; + }, "Waiting for login to be removed from list"); + + Assert.ok( + !loginItem.dataset.editing, + "LoginItem should not be in 'edit' mode after deleting" + ); + } + ); +}); diff --git a/browser/components/aboutlogins/tests/browser/browser_vulnerableLoginAddedInSecondaryWindow.js b/browser/components/aboutlogins/tests/browser/browser_vulnerableLoginAddedInSecondaryWindow.js new file mode 100644 index 0000000000..fac3e91af4 --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/browser_vulnerableLoginAddedInSecondaryWindow.js @@ -0,0 +1,223 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +EXPECTED_BREACH = { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.example.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", +}; + +let tabInSecondWindow; + +add_setup(async function () { + TEST_LOGIN1 = await addLogin(TEST_LOGIN1); + TEST_LOGIN2 = await addLogin(TEST_LOGIN2); + TEST_LOGIN3 = await addLogin(TEST_LOGIN3); + + let breaches = await LoginBreaches.getPotentialBreachesByLoginGUID([ + TEST_LOGIN3, + ]); + Assert.ok(breaches.size, "TEST_LOGIN3 should be marked as breached"); + + // Remove the breached login so the 'alerts' option + // is hidden when opening about:logins. + Services.logins.removeLogin(TEST_LOGIN3); + + await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + url: "about:logins", + }); + + let newWin = await BrowserTestUtils.openNewBrowserWindow(); + tabInSecondWindow = await BrowserTestUtils.openNewForegroundTab({ + gBrowser: newWin.gBrowser, + url: "about:logins", + }); + + registerCleanupFunction(async () => { + BrowserTestUtils.removeTab(gBrowser.selectedTab); + Services.logins.removeAllUserFacingLogins(); + await BrowserTestUtils.closeWindow(newWin); + }); +}); + +add_task(async function test_new_login_marked_vulnerable_in_both_windows() { + const ORIGIN_FOR_NEW_VULNERABLE_LOGIN = "https://vulnerable"; + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + Assert.ok( + loginList.shadowRoot.querySelector("#login-sort").namedItem("alerts") + .hidden, + "The 'alerts' option should be hidden before adding a vulnerable login to the list" + ); + }); + + await SpecialPowers.spawn( + tabInSecondWindow.linkedBrowser, + [[TEST_LOGIN3.password, ORIGIN_FOR_NEW_VULNERABLE_LOGIN]], + async ([passwordOfBreachedAccount, originForNewVulnerableLogin]) => { + let loginList = content.document.querySelector("login-list"); + + await ContentTaskUtils.waitForCondition( + () => + loginList.shadowRoot.querySelectorAll(".login-list-item[data-guid]") + .length == 2, + "waiting for all two initials logins to get added to login-list" + ); + + let loginSort = loginList.shadowRoot.querySelector("#login-sort"); + Assert.ok( + loginSort.namedItem("alerts").hidden, + "The 'alerts' option should be hidden when there are no breached or vulnerable logins in the list" + ); + + let createButton = loginList.shadowRoot.querySelector( + ".create-login-button" + ); + createButton.click(); + + let loginItem = content.document.querySelector("login-item"); + await ContentTaskUtils.waitForCondition( + () => loginItem.dataset.isNewLogin, + "waiting for create login form to be visible" + ); + + let originInput = loginItem.shadowRoot.querySelector( + "input[name='origin']" + ); + originInput.value = originForNewVulnerableLogin; + let passwordInput = loginItem.shadowRoot.querySelector( + "input[name='password']" + ); + passwordInput.value = passwordOfBreachedAccount; + + let saveButton = loginItem.shadowRoot.querySelector( + ".save-changes-button" + ); + saveButton.click(); + + await ContentTaskUtils.waitForCondition( + () => + loginList.shadowRoot.querySelectorAll(".login-list-item[data-guid]") + .length == 3, + "waiting for new login to get added to login-list" + ); + + let vulnerableLoginGuid = Cu.waiveXrays(loginItem)._login.guid; + let vulnerableListItem = loginList.shadowRoot.querySelector( + `.login-list-item[data-guid="${vulnerableLoginGuid}"]` + ); + + Assert.ok( + vulnerableListItem.classList.contains("vulnerable"), + "vulnerable login list item should be marked as such" + ); + Assert.ok( + !loginItem.shadowRoot.querySelector(".vulnerable-alert").hidden, + "vulnerable alert on login-item should be visible" + ); + + Assert.ok( + !loginSort.namedItem("alerts").hidden, + "The 'alerts' option should be visible after adding a vulnerable login to the list" + ); + } + ); + console.log("xxxxxxx ---- 0"); + + tabInSecondWindow.linkedBrowser.reload(); + await BrowserTestUtils.browserLoaded( + tabInSecondWindow.linkedBrowser, + false, + url => url.includes("about:logins") + ); + + console.log("xxxxxxx ---- 1"); + + await SpecialPowers.spawn(tabInSecondWindow.linkedBrowser, [], async () => { + let loginList = content.document.querySelector("login-list"); + let loginSort = loginList.shadowRoot.querySelector("#login-sort"); + + await ContentTaskUtils.waitForCondition( + () => loginSort.value == "alerts", + "waiting for sort to get updated to 'alerts'" + ); + + Assert.equal( + loginSort.value, + "alerts", + "The login list should be sorted by Alerts" + ); + let loginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item[data-guid]" + ); + for (let i = 1; i < loginListItems.length; i++) { + if (loginListItems[i].matches(".vulnerable, .breached")) { + Assert.ok( + loginListItems[i - 1].matches(".vulnerable, .breached"), + `The previous login-list-item must be vulnerable or breached if the current one is (second window, i=${i})` + ); + } + } + }); + console.log("xxxxxxx ---- 2"); + + await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [ORIGIN_FOR_NEW_VULNERABLE_LOGIN], + async originForNewVulnerableLogin => { + let loginList = Cu.waiveXrays( + content.document.querySelector("login-list") + ); + let vulnerableListItem; + await ContentTaskUtils.waitForCondition(() => { + let entry = Object.entries(loginList._logins).find( + ([guid, { login, listItem }]) => + login.origin == originForNewVulnerableLogin + ); + vulnerableListItem = entry[1].listItem; + return !!entry; + }, "waiting for vulnerable list item to get added to login-list"); + Assert.ok( + vulnerableListItem.classList.contains("vulnerable"), + "vulnerable login list item should be marked as such" + ); + + Assert.ok( + !loginList.shadowRoot.querySelector("#login-sort").namedItem("alerts") + .hidden, + "The 'alerts' option should be visible after adding a vulnerable login to the list" + ); + } + ); + gBrowser.selectedBrowser.reload(); + await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser, false, url => + url.includes("about:logins") + ); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => { + let loginList = Cu.waiveXrays(content.document.querySelector("login-list")); + await ContentTaskUtils.waitForCondition( + () => loginList.shadowRoot.querySelector("#login-sort").value == "alerts", + "waiting for sort to get updated to 'alerts'" + ); + let loginListItems = loginList.shadowRoot.querySelectorAll( + ".login-list-item[data-guid]" + ); + for (let i = 1; i < loginListItems.length; i++) { + if (loginListItems[i].matches(".vulnerable, .breached")) { + Assert.ok( + loginListItems[i - 1].matches(".vulnerable, .breached"), + `The previous login-list-item must be vulnerable or breached if the current one is (first window, i=${i})` + ); + } + } + }); +}); diff --git a/browser/components/aboutlogins/tests/browser/head.js b/browser/components/aboutlogins/tests/browser/head.js new file mode 100644 index 0000000000..2aec0e632a --- /dev/null +++ b/browser/components/aboutlogins/tests/browser/head.js @@ -0,0 +1,225 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +let { LoginBreaches } = ChromeUtils.importESModule( + "resource:///modules/LoginBreaches.sys.mjs" +); +let { RemoteSettings } = ChromeUtils.importESModule( + "resource://services-settings/remote-settings.sys.mjs" +); +let { _AboutLogins } = ChromeUtils.importESModule( + "resource:///actors/AboutLoginsParent.sys.mjs" +); +let { OSKeyStoreTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/OSKeyStoreTestUtils.sys.mjs" +); +var { LoginTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/LoginTestUtils.sys.mjs" +); + +let nsLoginInfo = new Components.Constructor( + "@mozilla.org/login-manager/loginInfo;1", + Ci.nsILoginInfo, + "init" +); + +let TEST_LOGIN1 = new nsLoginInfo( + "https://example.com", + "https://example.com", + null, + "user1", + "pass1", + "username", + "password" +); +let TEST_LOGIN2 = new nsLoginInfo( + "https://2.example.com", + "https://2.example.com", + null, + "user2", + "pass2", + "username", + "password" +); + +let TEST_LOGIN3 = new nsLoginInfo( + "https://breached.example.com", + "https://breached.example.com", + null, + "breachedLogin1", + "pass3", + "breachedLogin", + "password" +); +TEST_LOGIN3.QueryInterface(Ci.nsILoginMetaInfo).timePasswordChanged = 123456; + +async function addLogin(login) { + const result = await Services.logins.addLoginAsync(login); + registerCleanupFunction(() => { + let matchData = Cc["@mozilla.org/hash-property-bag;1"].createInstance( + Ci.nsIWritablePropertyBag2 + ); + matchData.setPropertyAsAUTF8String("guid", result.guid); + + let logins = Services.logins.searchLogins(matchData); + if (!logins.length) { + return; + } + // Use the login that was returned from searchLogins + // in case the initial login object was changed by the test code, + // since removeLogin makes sure that the login argument exactly + // matches the login that it will be removing. + Services.logins.removeLogin(logins[0]); + }); + return result; +} + +let EXPECTED_BREACH = null; +let EXPECTED_ERROR_MESSAGE = null; +add_setup(async function setup_head() { + const db = RemoteSettings(LoginBreaches.REMOTE_SETTINGS_COLLECTION).db; + if (EXPECTED_BREACH) { + await db.create(EXPECTED_BREACH, { + useRecordId: true, + }); + } + await db.importChanges({}, Date.now()); + if (EXPECTED_BREACH) { + await RemoteSettings(LoginBreaches.REMOTE_SETTINGS_COLLECTION).emit( + "sync", + { data: { current: [EXPECTED_BREACH] } } + ); + } + + SpecialPowers.registerConsoleListener(function onConsoleMessage(msg) { + if (msg.isWarning || !msg.errorMessage) { + // Ignore warnings and non-errors. + return; + } + + if (msg.errorMessage.includes('Unknown event: ["jsonfile", "load"')) { + // Ignore telemetry errors from JSONFile.sys.mjs. + return; + } + + if ( + msg.errorMessage == "Refreshing device list failed." || + msg.errorMessage == "Skipping device list refresh; not signed in" + ) { + // Ignore errors from browser-sync.js. + return; + } + if ( + msg.errorMessage.includes( + "ReferenceError: MigrationWizard is not defined" + ) + ) { + // todo(Bug 1587237): Ignore error when loading the Migration Wizard in automation. + return; + } + if ( + msg.errorMessage.includes("Error detecting Chrome profiles") || + msg.errorMessage.includes( + "Library/Application Support/Chromium/Local State (No such file or directory)" + ) || + msg.errorMessage.includes( + "Library/Application Support/Google/Chrome/Local State (No such file or directory)" + ) + ) { + // Ignore errors that can occur when the migrator is looking for a + // Chrome/Chromium profile + return; + } + if (msg.errorMessage.includes("Can't find profile directory.")) { + // Ignore error messages for no profile found in old XULStore.jsm + return; + } + if (msg.errorMessage.includes("Error reading typed URL history")) { + // The Migrator when opened can log this exception if there is no Edge + // history on the machine. + return; + } + if (msg.errorMessage.includes(EXPECTED_ERROR_MESSAGE)) { + return; + } + if (msg.errorMessage == "FILE_FORMAT_ERROR") { + // Ignore errors handled by the error message dialog. + return; + } + if ( + msg.errorMessage == + "NotFoundError: No such JSWindowActor 'MarionetteEvents'" + ) { + // Ignore MarionetteEvents error (Bug 1730837, Bug 1710079). + return; + } + Assert.ok(false, msg.message || msg.errorMessage); + }); + + registerCleanupFunction(async () => { + EXPECTED_ERROR_MESSAGE = null; + await db.clear(); + Services.telemetry.clearEvents(); + SpecialPowers.postConsoleSentinel(); + }); +}); + +/** + * Waits for the primary password prompt and performs an action. + * @param {string} action Set to "authenticate" to log in or "cancel" to + * close the dialog without logging in. + */ +function waitForMPDialog(action, aWindow = window) { + const BRAND_BUNDLE = Services.strings.createBundle( + "chrome://branding/locale/brand.properties" + ); + const BRAND_FULL_NAME = BRAND_BUNDLE.GetStringFromName("brandFullName"); + let dialogShown = TestUtils.topicObserved("common-dialog-loaded"); + return dialogShown.then(function ([subject]) { + let dialog = subject.Dialog; + let expected = "Password Required - " + BRAND_FULL_NAME; + Assert.equal( + dialog.args.title, + expected, + "Dialog is the Primary Password dialog" + ); + if (action == "authenticate") { + SpecialPowers.wrap(dialog.ui.password1Textbox).setUserInput( + LoginTestUtils.primaryPassword.primaryPassword + ); + dialog.ui.button0.click(); + } else if (action == "cancel") { + dialog.ui.button1.click(); + } + return BrowserTestUtils.waitForEvent(aWindow, "DOMModalDialogClosed"); + }); +} + +/** + * Allows for tests to reset the MP auth expiration and + * return a promise that will resolve after the MP dialog has + * been presented. + * + * @param {string} action Set to "authenticate" to log in or "cancel" to + * close the dialog without logging in. + * @returns {Promise} Resolves after the MP dialog has been presented and actioned upon + */ +function forceAuthTimeoutAndWaitForMPDialog(action, aWindow = window) { + const AUTH_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes (duplicated from AboutLoginsParent.sys.mjs) + _AboutLogins._authExpirationTime -= AUTH_TIMEOUT_MS + 1; + return waitForMPDialog(action, aWindow); +} + +/** + * Allows for tests to reset the OS auth expiration and + * return a promise that will resolve after the OS auth dialog has + * been presented. + * + * @param {bool} loginResult True if the auth prompt should pass, otherwise false will fail + * @returns {Promise} Resolves after the OS auth dialog has been presented + */ +function forceAuthTimeoutAndWaitForOSKeyStoreLogin({ loginResult }) { + const AUTH_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes (duplicated from AboutLoginsParent.sys.mjs) + _AboutLogins._authExpirationTime -= AUTH_TIMEOUT_MS + 1; + return OSKeyStoreTestUtils.waitForOSKeyStoreLogin(loginResult); +} diff --git a/browser/components/aboutlogins/tests/chrome/.eslintrc.js b/browser/components/aboutlogins/tests/chrome/.eslintrc.js new file mode 100644 index 0000000000..9b6510bdd2 --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/.eslintrc.js @@ -0,0 +1,16 @@ +/* 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"; + +module.exports = { + overrides: [ + { + files: ["test_login_item.html"], + parserOptions: { + sourceType: "module", + }, + }, + ], +}; diff --git a/browser/components/aboutlogins/tests/chrome/aboutlogins_common.js b/browser/components/aboutlogins/tests/chrome/aboutlogins_common.js new file mode 100644 index 0000000000..d24c962da0 --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/aboutlogins_common.js @@ -0,0 +1,97 @@ +"use strict"; + +/* exported asyncElementRendered, importDependencies */ + +/** + * A helper to await on while waiting for an asynchronous rendering of a Custom + * Element. + * @returns {Promise} + */ +function asyncElementRendered() { + return Promise.resolve(); +} + +/** + * Import the templates from the real page to avoid duplication in the tests. + * @param {HTMLIFrameElement} templateFrame - Frame to copy the resources from + * @param {HTMLElement} destinationEl - Where to append the copied resources + */ +function importDependencies(templateFrame, destinationEl) { + let promises = []; + for (let template of templateFrame.contentDocument.querySelectorAll( + "template" + )) { + let imported = document.importNode(template, true); + destinationEl.appendChild(imported); + // Preload the styles in the actual page, to ensure they're loaded on time. + for (let element of imported.content.querySelectorAll( + "link[rel='stylesheet']" + )) { + let clone = element.cloneNode(true); + promises.push( + new Promise(resolve => { + clone.onload = function () { + resolve(); + clone.remove(); + }; + }) + ); + destinationEl.appendChild(clone); + } + } + return Promise.all(promises); +} + +Object.defineProperty(document, "l10n", { + configurable: true, + writable: true, + value: { + connectRoot() {}, + translateElements() { + return Promise.resolve(); + }, + getAttributes(element) { + return { + id: element.getAttribute("data-l10n-id"), + args: element.getAttribute("data-l10n-args") + ? JSON.parse(element.getAttribute("data-l10n-args")) + : {}, + }; + }, + setAttributes(element, id, args) { + element.setAttribute("data-l10n-id", id); + if (args) { + element.setAttribute("data-l10n-args", JSON.stringify(args)); + } else { + element.removeAttribute("data-l10n-args"); + } + }, + }, +}); + +Object.defineProperty(window, "AboutLoginsUtils", { + configurable: true, + writable: true, + value: { + getLoginOrigin(uriString) { + return uriString; + }, + setFocus(element) { + return element.focus(); + }, + async promptForPrimaryPassword(resolve, messageId) { + resolve(true); + }, + doLoginsMatch(login1, login2) { + return ( + login1.origin == login2.origin && + login1.username == login2.username && + login1.password == login2.password + ); + }, + fileImportEnabled: SpecialPowers.getBoolPref( + "signon.management.page.fileImport.enabled" + ), + primaryPasswordEnabled: false, + }, +}); diff --git a/browser/components/aboutlogins/tests/chrome/chrome.ini b/browser/components/aboutlogins/tests/chrome/chrome.ini new file mode 100644 index 0000000000..ac1ba7076c --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/chrome.ini @@ -0,0 +1,13 @@ +[DEFAULT] +scheme = https +prefs = + identity.fxaccounts.enabled=true +support-files = + aboutlogins_common.js + +[test_confirm_delete_dialog.html] +[test_fxaccounts_button.html] +[test_login_filter.html] +[test_login_item.html] +[test_login_list.html] +[test_menu_button.html] diff --git a/browser/components/aboutlogins/tests/chrome/test_confirm_delete_dialog.html b/browser/components/aboutlogins/tests/chrome/test_confirm_delete_dialog.html new file mode 100644 index 0000000000..68a58aee4f --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_confirm_delete_dialog.html @@ -0,0 +1,127 @@ + + + + + + Test the confirmation-dialog component + + + + + + + + +

+

+ +
+
+ + + diff --git a/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html b/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html new file mode 100644 index 0000000000..ce6046bf2a --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html @@ -0,0 +1,96 @@ + + + + + + Test the fxaccounts-button component + + + + + + + + +

+

+ +
+
+ + + + diff --git a/browser/components/aboutlogins/tests/chrome/test_login_filter.html b/browser/components/aboutlogins/tests/chrome/test_login_filter.html new file mode 100644 index 0000000000..00e0a96a51 --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_login_filter.html @@ -0,0 +1,178 @@ + + + + + + Test the login-filter component + + + + + + + + + +

+

+ +
+
+ + + + diff --git a/browser/components/aboutlogins/tests/chrome/test_login_item.html b/browser/components/aboutlogins/tests/chrome/test_login_item.html new file mode 100644 index 0000000000..a7946a0618 --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_login_item.html @@ -0,0 +1,481 @@ + + + + + + Test the login-item component + + + + + + + + + + +

+

+ +
+
+ + + + diff --git a/browser/components/aboutlogins/tests/chrome/test_login_list.html b/browser/components/aboutlogins/tests/chrome/test_login_list.html new file mode 100644 index 0000000000..98342978fb --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_login_list.html @@ -0,0 +1,697 @@ + + + + + + Test the login-list component + + + + + + + + +

+

+ +
+
+ + + + diff --git a/browser/components/aboutlogins/tests/chrome/test_menu_button.html b/browser/components/aboutlogins/tests/chrome/test_menu_button.html new file mode 100644 index 0000000000..2beede09f1 --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_menu_button.html @@ -0,0 +1,260 @@ + + + + + + Test the menu-button component + + + + + + + + +

+

+ +
+
+ + + + diff --git a/browser/components/aboutlogins/tests/unit/head.js b/browser/components/aboutlogins/tests/unit/head.js new file mode 100644 index 0000000000..938e06e3c0 --- /dev/null +++ b/browser/components/aboutlogins/tests/unit/head.js @@ -0,0 +1,22 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { LoginTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/LoginTestUtils.sys.mjs" +); +const { LoginHelper } = ChromeUtils.importESModule( + "resource://gre/modules/LoginHelper.sys.mjs" +); + +const TestData = LoginTestUtils.testData; +const newPropertyBag = LoginHelper.newPropertyBag; + +/** + * All the tests are implemented with add_task, this starts them automatically. + */ +function run_test() { + do_get_profile(); + run_next_test(); +} diff --git a/browser/components/aboutlogins/tests/unit/test_getPotentialBreachesByLoginGUID.js b/browser/components/aboutlogins/tests/unit/test_getPotentialBreachesByLoginGUID.js new file mode 100644 index 0000000000..a868572a6a --- /dev/null +++ b/browser/components/aboutlogins/tests/unit/test_getPotentialBreachesByLoginGUID.js @@ -0,0 +1,327 @@ +/** + * Test LoginBreaches.getPotentialBreachesByLoginGUID + */ + +"use strict"; + +const { RemoteSettings } = ChromeUtils.importESModule( + "resource://services-settings/remote-settings.sys.mjs" +); + +// Initializing BrowserGlue requires a profile on Windows. +do_get_profile(); + +const gBrowserGlue = Cc["@mozilla.org/browser/browserglue;1"].getService( + Ci.nsIObserver +); + +ChromeUtils.defineESModuleGetters(this, { + LoginBreaches: "resource:///modules/LoginBreaches.sys.mjs", +}); + +const TEST_BREACHES = [ + { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached.com", + Name: "Breached", + PwnCount: 1643100, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0043", + last_modified: "1541615610052", + schema: "1541615609018", + }, + { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached-subdomain.host.com", + Name: "Only a Sub-Domain was Breached", + PwnCount: 2754200, + DataClasses: ["Email addresses", "Usernames", "Passwords", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0044", + last_modified: "1541615610052", + schema: "1541615609018", + }, + { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "breached-site-without-passwords.com", + Name: "Breached Site without passwords", + PwnCount: 987654, + DataClasses: ["Email addresses", "Usernames", "IP addresses"], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0045", + last_modified: "1541615610052", + schema: "1541615609018", + }, +]; + +const CRASHING_URI_LOGIN = LoginTestUtils.testData.formLogin({ + origin: "chrome://grwatcher", + formActionOrigin: "https://www.example.com", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), +}); +const NOT_BREACHED_LOGIN = LoginTestUtils.testData.formLogin({ + origin: "https://www.example.com", + formActionOrigin: "https://www.example.com", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), +}); +const BREACHED_LOGIN = LoginTestUtils.testData.formLogin({ + origin: "https://www.breached.com", + formActionOrigin: "https://www.breached.com", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), +}); +const NOT_BREACHED_SUBDOMAIN_LOGIN = LoginTestUtils.testData.formLogin({ + origin: "https://not-breached-subdomain.host.com", + formActionOrigin: "https://not-breached-subdomain.host.com", + username: "username", + password: "password", +}); +const BREACHED_SUBDOMAIN_LOGIN = LoginTestUtils.testData.formLogin({ + origin: "https://breached-subdomain.host.com", + formActionOrigin: "https://breached-subdomain.host.com", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), +}); +const LOGIN_FOR_BREACHED_SITE_WITHOUT_PASSWORDS = + LoginTestUtils.testData.formLogin({ + origin: "https://breached-site-without-passwords.com", + formActionOrigin: "https://breached-site-without-passwords.com", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), + }); +const LOGIN_WITH_NON_STANDARD_URI = LoginTestUtils.testData.formLogin({ + origin: "someApp://random/path/to/login", + formActionOrigin: "someApp://random/path/to/login", + username: "username", + password: "password", + timePasswordChanged: new Date("2018-12-15").getTime(), +}); + +add_task(async function test_notBreachedLogin() { + await Services.logins.addLoginAsync(NOT_BREACHED_LOGIN); + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [NOT_BREACHED_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 0, + "Should be 0 breached logins." + ); +}); + +add_task(async function test_breachedLogin() { + await Services.logins.addLoginAsync(BREACHED_LOGIN); + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [NOT_BREACHED_LOGIN, BREACHED_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Should be 1 breached login: " + BREACHED_LOGIN.origin + ); + Assert.strictEqual( + breachesByLoginGUID.get(BREACHED_LOGIN.guid).breachAlertURL, + "https://monitor.firefox.com/breach-details/Breached?utm_source=firefox-desktop&utm_medium=referral&utm_campaign=about-logins&utm_content=about-logins", + "Breach alert link should be equal to the breachAlertURL" + ); +}); + +add_task(async function test_breachedLoginAfterCrashingUriLogin() { + await Services.logins.addLoginAsync(CRASHING_URI_LOGIN); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [CRASHING_URI_LOGIN, BREACHED_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Should be 1 breached login: " + BREACHED_LOGIN.origin + ); + Assert.strictEqual( + breachesByLoginGUID.get(BREACHED_LOGIN.guid).breachAlertURL, + "https://monitor.firefox.com/breach-details/Breached?utm_source=firefox-desktop&utm_medium=referral&utm_campaign=about-logins&utm_content=about-logins", + "Breach alert link should be equal to the breachAlertURL" + ); +}); + +add_task(async function test_notBreachedSubdomain() { + await Services.logins.addLoginAsync(NOT_BREACHED_SUBDOMAIN_LOGIN); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [NOT_BREACHED_LOGIN, NOT_BREACHED_SUBDOMAIN_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 0, + "Should be 0 breached logins." + ); +}); + +add_task(async function test_breachedSubdomain() { + await Services.logins.addLoginAsync(BREACHED_SUBDOMAIN_LOGIN); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [NOT_BREACHED_SUBDOMAIN_LOGIN, BREACHED_SUBDOMAIN_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Should be 1 breached login: " + BREACHED_SUBDOMAIN_LOGIN.origin + ); +}); + +add_task(async function test_breachedSiteWithoutPasswords() { + await Services.logins.addLoginAsync( + LOGIN_FOR_BREACHED_SITE_WITHOUT_PASSWORDS + ); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [LOGIN_FOR_BREACHED_SITE_WITHOUT_PASSWORDS], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 0, + "Should be 0 breached login: " + + LOGIN_FOR_BREACHED_SITE_WITHOUT_PASSWORDS.origin + ); +}); + +add_task(async function test_breachAlertHiddenAfterDismissal() { + BREACHED_LOGIN.guid = "{d2de5ac1-4de6-e544-a7af-1f75abcba92b}"; + + await Services.logins.initializationPromise; + const storageJSON = Services.logins.wrappedJSObject._storage.wrappedJSObject; + + storageJSON.recordBreachAlertDismissal(BREACHED_LOGIN.guid); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [BREACHED_LOGIN, NOT_BREACHED_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID.size, + 0, + "Should be 0 breached logins after dismissal: " + BREACHED_LOGIN.origin + ); + + info("Clear login storage"); + Services.logins.removeAllUserFacingLogins(); + + const breachesByLoginGUID2 = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [BREACHED_LOGIN, NOT_BREACHED_LOGIN], + TEST_BREACHES + ); + Assert.strictEqual( + breachesByLoginGUID2.size, + 1, + "Breached login should re-appear after clearing storage: " + + BREACHED_LOGIN.origin + ); +}); + +add_task(async function test_newBreachAfterDismissal() { + TEST_BREACHES[0].AddedDate = new Date().toISOString(); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [BREACHED_LOGIN, NOT_BREACHED_LOGIN], + TEST_BREACHES + ); + + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Should be 1 breached login after new breach following the dismissal of a previous breach: " + + BREACHED_LOGIN.origin + ); +}); + +add_task(async function test_ExceptionsThrownByNonStandardURIsAreCaught() { + await Services.logins.addLoginAsync(LOGIN_WITH_NON_STANDARD_URI); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID( + [LOGIN_WITH_NON_STANDARD_URI, BREACHED_LOGIN], + TEST_BREACHES + ); + + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Exceptions thrown by logins with non-standard URIs should be caught." + ); +}); + +add_task(async function test_setBreachesFromRemoteSettingsSync() { + const login = NOT_BREACHED_SUBDOMAIN_LOGIN; + const nowExampleIsInBreachedRecords = [ + { + AddedDate: "2018-12-20T23:56:26Z", + BreachDate: "2018-12-16", + Domain: "not-breached-subdomain.host.com", + Name: "not-breached-subdomain.host.com is now breached!", + PwnCount: 1643100, + DataClasses: [ + "Email addresses", + "Usernames", + "Passwords", + "IP addresses", + ], + _status: "synced", + id: "047940fe-d2fd-4314-b636-b4a952ee0044", + last_modified: "1541615610052", + schema: "1541615609018", + }, + ]; + async function emitSync() { + await RemoteSettings(LoginBreaches.REMOTE_SETTINGS_COLLECTION).emit( + "sync", + { data: { current: nowExampleIsInBreachedRecords } } + ); + } + + const beforeSyncBreachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID([login]); + Assert.strictEqual( + beforeSyncBreachesByLoginGUID.size, + 0, + "Should be 0 breached login before not-breached-subdomain.host.com is added to fxmonitor-breaches collection and synced: " + ); + gBrowserGlue.observe(null, "browser-glue-test", "add-breaches-sync-handler"); + const db = RemoteSettings(LoginBreaches.REMOTE_SETTINGS_COLLECTION).db; + await db.importChanges({}, Date.now(), [nowExampleIsInBreachedRecords[0]]); + await emitSync(); + + const breachesByLoginGUID = + await LoginBreaches.getPotentialBreachesByLoginGUID([login]); + Assert.strictEqual( + breachesByLoginGUID.size, + 1, + "Should be 1 breached login after not-breached-subdomain.host.com is added to fxmonitor-breaches collection and synced: " + ); +}); diff --git a/browser/components/aboutlogins/tests/unit/xpcshell.ini b/browser/components/aboutlogins/tests/unit/xpcshell.ini new file mode 100644 index 0000000000..e827d6d688 --- /dev/null +++ b/browser/components/aboutlogins/tests/unit/xpcshell.ini @@ -0,0 +1,7 @@ +[DEFAULT] +skip-if = toolkit == 'android' # bug 1730213 +head = head.js +firefox-appdir = browser + +[test_getPotentialBreachesByLoginGUID.js] +tags = remote-settings -- cgit v1.2.3