Source code
Revision control
Copy as Markdown
Other Tools
<!-- 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; object-src 'none'; script-src resource: chrome:; img-src data: blob: https://firefoxusercontent.com https://profile.accounts.firefox.com;">
<meta name="color-scheme" content="light dark">
<title data-l10n-id="about-logins-page-title-name"></title>
<link rel="localization" href="branding/brand.ftl">
<link rel="localization" href="browser/aboutLogins.ftl">
<link rel="localization" href="toolkit/branding/accounts.ftl">
<link rel="localization" href="toolkit/branding/brandings.ftl">
<script type="module" src="chrome://browser/content/aboutlogins/components/confirmation-dialog.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/remove-logins-dialog.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/import-summary-dialog.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/import-error-dialog.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/generic-dialog.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-filter.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-intro.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-item.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-list.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-list-item.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-list-section.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/menu-button.mjs"></script>
</head>
<body>
<header>
<fxaccounts-button hidden></fxaccounts-button>
<menu-button></menu-button>
</header>
<login-list></login-list>
<login-item></login-item>
<login-intro></login-intro>
<confirmation-dialog hidden></confirmation-dialog>
<remove-logins-dialog hidden></remove-logins-dialog>
<import-summary-dialog hidden></import-summary-dialog>
<import-error-dialog hidden></import-error-dialog>
<div id="primary-password-required-overlay"></div>
<template id="confirmation-dialog-template">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/confirmation-dialog.css">
<div class="overlay">
<div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
<button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button">
</button>
<div class="content">
<h1 class="title" id="title"></h1>
<p class="message" id="message"></p>
</div>
<moz-button-group class="buttons">
<button class="confirm-button primary danger-button"></button>
<button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button>
</moz-button-group>
</div>
</div>
</template>
<template id="generic-dialog-template">
<div class="overlay">
<div class="container" role="dialog" aria-labelledby="title">
<slot name="dialog-icon" part="dialog-icon"></slot>
<slot name="dialog-title"></slot>
<slot name="content"></slot>
<slot name="buttons"></slot>
</div>
</div>
</template>
<template id="import-summary-dialog-template">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/import-summary-dialog.css">
<generic-dialog>
<span slot="dialog-title" data-l10n-id="about-logins-import-dialog-title"></span>
<div slot="content" class="content">
<div class="import-summary">
<div class="import-items-added import-items-row" data-l10n-id="about-logins-import-dialog-items-added2" data-l10n-args='{"count": 0}'>
<span data-l10n-name="count" class="result-count"></span>
</div>
<div class="import-items-modified import-items-row" data-l10n-id="about-logins-import-dialog-items-modified2" data-l10n-args='{"count": 0}'>
<span data-l10n-name="count" class="result-count"></span>
</div>
<div class="import-items-no-change import-items-row" data-l10n-id="about-logins-import-dialog-items-no-change2" data-l10n-name="no-change" data-l10n-args='{"count": 0}'>
<span data-l10n-name="count" class="result-count"></span>
<span hidden data-l10n-name="meta" class="result-meta"></span>
</div>
<div class="import-items-errors import-items-row" data-l10n-id="about-logins-import-dialog-items-error" data-l10n-args='{"count": 0}'>
<span data-l10n-name="count" class="result-count"></span>
<span hidden data-l10n-name="meta" class="result-meta"></span>
</div>
</div>
<a class="open-detailed-report" href="about:loginsimportreport" target="_blank" data-l10n-id="about-logins-alert-import-message"></a>
</div>
<moz-button-group slot="buttons" class="buttons">
<button class="dismiss-button primary" data-l10n-id="about-logins-import-dialog-done"></button>
</moz-button-group>
</generic-dialog>
</template>
<template id="import-error-dialog-template">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/import-error-dialog.css">
<generic-dialog>
<span slot="dialog-title" data-l10n-id="about-logins-import-dialog-error-title"></span>
<img slot="dialog-icon" part="dialog-icon" class="warning-icon" src="chrome://global/skin/icons/warning.svg" draggable="false"/>
<div slot="content" class="content">
<span class="error-title" data-l10n-id="about-logins-import-dialog-error-unable-to-read-title"></span>
<span class="error-description" data-l10n-id="about-logins-import-dialog-error-unable-to-read-description"></span>
<span class="no-logins" data-l10n-id="about-logins-import-dialog-error-no-logins-imported"></span>
data-l10n-id="about-logins-import-dialog-error-learn-more" target="_blank" rel="noreferrer"></a>
</div>
<moz-button-group slot="buttons" class="buttons">
<button class="dismiss-button" data-l10n-id="about-logins-import-dialog-error-cancel"></button>
<button class="try-import-again primary" data-l10n-id="about-logins-import-dialog-error-try-import-again"></button>
</moz-button-group>
</generic-dialog>
</template>
<template id="remove-logins-dialog-template">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/remove-logins-dialog.css">
<div class="overlay">
<div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
<button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button">
</button>
<div class="content">
<h1 class="title" id="title"></h1>
<p class="message" id="message"></p>
<label class="checkbox-wrapper toggle-container-with-text">
<input id="confirmation-checkbox" type="checkbox" class="checkbox"></input>
<span class="checkbox-text"></span>
</label>
</div>
<moz-button-group class="buttons">
<button class="confirm-button primary danger-button"></button>
<button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button>
</moz-button-group>
</div>
</template>
<template id="fxaccounts-button-template">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/fxaccounts-button.css">
<div class="logged-out-view">
<p class="fxaccounts-extra-text text-deemphasized" data-l10n-id="fxaccounts-sign-in-text"></p>
<button class="fxaccounts-enable-button" data-l10n-id="fxaccounts-sign-in-sync-button"></button>
</div>
<div class="logged-in-view">
<button class="fxaccounts-avatar-button ghost-button" data-l10n-id="fxaccounts-avatar-button">
<span class="fxaccount-email"></span>
<span class="fxaccount-avatar"></span>
</button>
</div>
</template>
<template id="login-list-template">
<script type="module" src="chrome://browser/content/aboutlogins/components/login-command-button.mjs"></script>
<div class="listHeader">
<login-filter></login-filter>
<div class="create-login-button-container">
<create-login-button></create-login-button>
</div>
</div>
<div class="meta text-deemphasized">
<label for="login-sort">
<span data-l10n-id="login-list-sort-label-text"></span>
<select id="login-sort">
<option name="name" data-l10n-id="login-list-name-option" value="name">
<option name="name-reverse" data-l10n-id="login-list-name-reverse-option" value="name-reverse">
<option name="username" data-l10n-id="login-list-username-option" value="username">
<option name="username-reverse" data-l10n-id="login-list-username-reverse-option" value="username-reverse">
<option name="last-used" data-l10n-id="login-list-last-used-option" value="last-used">
<option name="last-changed" data-l10n-id="login-list-last-changed-option" value="last-changed">
<option name="alerts" data-l10n-id="about-logins-login-list-alerts-option" value="alerts" hidden>
</select>
</label>
<span class="count" data-l10n-id="login-list-count2" data-l10n-args='{"count": 0}'></span>
</div>
<div class="container">
<ol role="listbox" tabindex="0" data-l10n-id="login-list"></ol>
<div class="intro">
<p data-l10n-id="login-list-intro-title2"></p>
<span data-l10n-id="login-list-intro-description"></span>
</div>
<div class="empty-search-message">
<p data-l10n-id="about-logins-login-list-empty-search-title2"></p>
<span data-l10n-id="about-logins-login-list-empty-search-description"></span>
</div>
</div>
</template>
<template id="login-list-item-template">
<li class="login-list-item" role="option">
<img class="favicon" />
<div class="labels">
<span class="title text-truncated-ellipsis" dir="auto"></span>
<span class="username text-deemphasized text-truncated-ellipsis" dir="ltr"></span>
</div>
<img class="alert-icon" title="" src=""/>
</li>
</template>
<template id="login-list-section-template">
<section class="login-list-section">
<span class="login-list-header" dir="auto"></span>
</section>
</template>
<template id="login-intro-template">
<h1 class="heading" data-l10n-id="about-logins-login-intro-heading-message"></h1>
<section>
<p class="description" data-l10n-id="login-intro-description2">
<a data-l10n-name="breach-alert-link" href="https://support.mozilla.org/kb/firefox-password-manager-alerts-breached-websites" target="_blank" rel="noreferrer"></a>
</p>
<ul>
<li data-l10n-id="login-intro-instructions-fxa2"></li>
<li data-l10n-id="login-intro-instructions-fxa-settings"></li>
<li data-l10n-id="login-intro-instructions-fxa-passwords-help">
<a data-l10n-name="passwords-help-link" class="intro-help-link" target="_blank" rel="noreferrer"></a>
</li>
</ul>
<p class="description intro-import-text no-file-import" hidden data-l10n-id="about-logins-intro-browser-only-import">
<a data-l10n-name="import-link" href="#"></a>
</p>
<p class="description intro-import-text file-import" hidden data-l10n-id="about-logins-intro-import3">
<a data-l10n-name="import-browser-link" href="#"></a>
<a data-l10n-name="import-file-link" href="#"></a>
</p>
</section>
</template>
<template id="login-item-template">
<script type="module" src="chrome://browser/content/aboutlogins/components/login-timeline.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-command-button.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-alert.mjs"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/login-message-popup.mjs"></script>
<div class="container">
<div class="column">
<div class="error-message">
<span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
<span class="error-message-link">
<a data-l10n-name="duplicate-link" tabindex="0" href=""></a>
</span>
</div>
<form>
<div class="header">
<img class="login-item-favicon" />
<h2 class="title">
<span class="login-item-title"></span>
<span class="new-login-title" data-l10n-id="about-logins-login-item-new-login-title"></span>
</h2>
<div class="action-buttons">
<edit-button></edit-button>
<moz-button-group class="form-actions-row">
<button class="save-changes-button" type="submit"></button>
<button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
</moz-button-group>
<delete-button></delete-button>
</div>
</div>
<login-breach-alert></login-breach-alert>
<login-vulnerable-password-alert></login-vulnerable-password-alert>
<div class="detail-row">
<label class="detail-cell">
<span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
<!-- Default text inputs to readonly to reduce jumping of the field
size on page load since it always starts readonly. -->
<input type="url"
name="origin"
required
data-l10n-id="login-item-origin"
dir="auto"
readonly/>
<a class="origin-input" dir="auto" target="_blank" rel="noreferrer" name="origin" href=""></a>
<origin-warning></origin-warning>
</label>
</div>
<div class="detail-grid">
<div class="detail-row">
<label class="detail-cell">
<span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
<input type="text"
name="username"
data-l10n-id="login-item-username"
dir="ltr"
readonly/>
</label>
<copy-username-button class="copy-button"></copy-username-button>
</div>
<div class="detail-row">
<label class="detail-cell">
<span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
<div class="reveal-password-wrapper">
<input type="password"
name="password"
autocomplete="off"
dir="ltr"
required
readonly/>
<input class="password-display"
type="password"
autocomplete="off"
dir="ltr"
readonly/>
<input type="checkbox"
class="reveal-password-checkbox"
data-l10n-id="login-item-password-reveal-checkbox"/>
<password-warning></password-warning>
</div>
</label>
<copy-password-button class="copy-button"></copy-password-button>
</div>
</div>
<login-timeline hidden ></login-timeline>
</form>
</div>
</div>
</template>
<template id="login-filter-template">
<input data-l10n-id="about-logins-login-filter2" class="filter" type="text" dir="auto"/>
</template>
<template id="menu-button-template">
<button class="menu-button ghost-button" data-l10n-id="menu"></button>
<ul class="menu" role="menu" hidden>
<button role="menuitem" class="menuitem-button menuitem-import-browser ghost-button" hidden data-supported-platforms="Win32,MacIntel" data-event-name="AboutLoginsImportFromBrowser" data-l10n-id="about-logins-menu-menuitem-import-from-another-browser"></button>
<button role="menuitem" class="menuitem-button menuitem-import-file ghost-button" data-event-name="AboutLoginsImportFromFile" data-l10n-id="about-logins-menu-menuitem-import-from-a-file"></button>
<button role="menuitem" class="menuitem-button menuitem-export ghost-button" data-event-name="AboutLoginsExportPasswordsDialog" data-l10n-id="about-logins-menu-menuitem-export-logins2"></button>
<button role="menuitem" class="menuitem-button menuitem-remove-all-logins ghost-button" data-event-name="AboutLoginsRemoveAllLoginsDialog" data-l10n-id="about-logins-menu-menuitem-remove-all-logins2"></button>
<hr role="separator" class="menuitem-separator"></hr>
<button role="menuitem" class="menuitem-button menuitem-preferences ghost-button" data-event-name="AboutLoginsOpenPreferences" data-l10n-id="menu-menuitem-preferences"></button>
<button role="menuitem" class="menuitem-button menuitem-help ghost-button" data-event-name="AboutLoginsGetHelp" data-l10n-id="about-logins-menu-menuitem-help"></button>
</ul>
</template>
</body>
</html>