aboutLogins.html (22273B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <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;"> 10 <meta name="color-scheme" content="light dark"> 11 <title data-l10n-id="about-logins-page-title-name"></title> 12 <link rel="localization" href="branding/brand.ftl"> 13 <link rel="localization" href="browser/aboutLogins.ftl"> 14 <link rel="localization" href="toolkit/branding/brandings.ftl"> 15 <script type="module" src="chrome://browser/content/aboutlogins/components/confirmation-dialog.mjs"></script> 16 <script type="module" src="chrome://browser/content/aboutlogins/components/remove-logins-dialog.mjs"></script> 17 <script type="module" src="chrome://browser/content/aboutlogins/components/import-summary-dialog.mjs"></script> 18 <script type="module" src="chrome://browser/content/aboutlogins/components/import-error-dialog.mjs"></script> 19 <script type="module" src="chrome://browser/content/aboutlogins/components/generic-dialog.mjs"></script> 20 <script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.mjs"></script> 21 <script type="module" src="chrome://browser/content/aboutlogins/components/login-filter.mjs"></script> 22 <script type="module" src="chrome://browser/content/aboutlogins/components/login-intro.mjs"></script> 23 <script type="module" src="chrome://browser/content/aboutlogins/components/login-item.mjs"></script> 24 <script type="module" src="chrome://browser/content/aboutlogins/components/login-list.mjs"></script> 25 <script type="module" src="chrome://browser/content/aboutlogins/components/login-list-item.mjs"></script> 26 <script type="module" src="chrome://browser/content/aboutlogins/components/login-list-section.mjs"></script> 27 <script type="module" src="chrome://browser/content/aboutlogins/components/menu-button.mjs"></script> 28 <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script> 29 <script type="module" src="chrome://browser/content/aboutlogins/aboutLogins.mjs"></script> 30 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 31 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/aboutLogins.css"> 32 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 33 <link rel="icon" href="chrome://branding/content/icon32.png"> 34 </head> 35 <body> 36 <header> 37 <fxaccounts-button hidden></fxaccounts-button> 38 <menu-button></menu-button> 39 </header> 40 <login-list></login-list> 41 <login-item></login-item> 42 <login-intro></login-intro> 43 <confirmation-dialog hidden></confirmation-dialog> 44 <remove-logins-dialog hidden></remove-logins-dialog> 45 <import-summary-dialog hidden></import-summary-dialog> 46 <import-error-dialog hidden></import-error-dialog> 47 <div id="primary-password-required-overlay"></div> 48 49 <template id="confirmation-dialog-template"> 50 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 51 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 52 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/confirmation-dialog.css"> 53 <div class="overlay"> 54 <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message"> 55 <button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button"> 56 <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg" draggable="false"/> 57 </button> 58 <div class="content"> 59 <img class="warning-icon" src="chrome://global/skin/icons/warning.svg" draggable="false"/> 60 <h1 class="title" id="title"></h1> 61 <p class="message" id="message"></p> 62 </div> 63 <moz-button-group class="buttons"> 64 <button class="confirm-button primary danger-button"></button> 65 <button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button> 66 </moz-button-group> 67 </div> 68 </div> 69 </template> 70 71 <template id="generic-dialog-template"> 72 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css"> 73 <div class="overlay"> 74 <div class="container" role="dialog" aria-labelledby="title"> 75 <slot name="dialog-icon" part="dialog-icon"></slot> 76 <slot name="dialog-title"></slot> 77 <slot name="content"></slot> 78 <slot name="buttons"></slot> 79 </div> 80 </div> 81 </template> 82 83 <template id="import-summary-dialog-template"> 84 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 85 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css"> 86 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/import-summary-dialog.css"> 87 <generic-dialog> 88 <span slot="dialog-title" data-l10n-id="about-logins-import-dialog-title"></span> 89 <img slot="dialog-icon" part="dialog-icon" src="chrome://browser/skin/import.svg"/> 90 <div slot="content" class="content"> 91 <div class="import-summary"> 92 <div class="import-items-added import-items-row" data-l10n-id="about-logins-import-dialog-items-added2" data-l10n-args='{"count": 0}'> 93 <span data-l10n-name="count" class="result-count"></span> 94 </div> 95 <div class="import-items-modified import-items-row" data-l10n-id="about-logins-import-dialog-items-modified2" data-l10n-args='{"count": 0}'> 96 <span data-l10n-name="count" class="result-count"></span> 97 </div> 98 <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}'> 99 <span data-l10n-name="count" class="result-count"></span> 100 <span hidden data-l10n-name="meta" class="result-meta"></span> 101 </div> 102 <div class="import-items-errors import-items-row" data-l10n-id="about-logins-import-dialog-items-error" data-l10n-args='{"count": 0}'> 103 <span data-l10n-name="count" class="result-count"></span> 104 <span hidden data-l10n-name="meta" class="result-meta"></span> 105 </div> 106 </div> 107 <a class="open-detailed-report" href="about:loginsimportreport" target="_blank" data-l10n-id="about-logins-alert-import-message"></a> 108 </div> 109 <moz-button-group slot="buttons" class="buttons"> 110 <button class="dismiss-button primary" data-l10n-id="about-logins-import-dialog-done"></button> 111 </moz-button-group> 112 </generic-dialog> 113 </template> 114 115 <template id="import-error-dialog-template"> 116 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 117 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css"> 118 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/import-error-dialog.css"> 119 <generic-dialog> 120 <span slot="dialog-title" data-l10n-id="about-logins-import-dialog-error-title"></span> 121 <img slot="dialog-icon" part="dialog-icon" class="warning-icon" src="chrome://global/skin/icons/warning.svg" draggable="false"/> 122 <div slot="content" class="content"> 123 <span class="error-title" data-l10n-id="about-logins-import-dialog-error-unable-to-read-title"></span> 124 <span class="error-description" data-l10n-id="about-logins-import-dialog-error-unable-to-read-description"></span> 125 <span class="no-logins" data-l10n-id="about-logins-import-dialog-error-no-logins-imported"></span> 126 <a class="error-learn-more-link" href="https://support.mozilla.org/kb/import-login-data-file" 127 data-l10n-id="about-logins-import-dialog-error-learn-more" target="_blank" rel="noreferrer"></a> 128 </div> 129 <moz-button-group slot="buttons" class="buttons"> 130 <button class="dismiss-button" data-l10n-id="about-logins-import-dialog-error-cancel"></button> 131 <button class="try-import-again primary" data-l10n-id="about-logins-import-dialog-error-try-import-again"></button> 132 </moz-button-group> 133 </generic-dialog> 134 </template> 135 136 <template id="remove-logins-dialog-template"> 137 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 138 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 139 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/remove-logins-dialog.css"> 140 <div class="overlay"> 141 <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message"> 142 <button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button"> 143 <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg" draggable="false"/> 144 </button> 145 <div class="content"> 146 <img class="warning-icon" src="chrome://global/skin/icons/delete.svg" draggable="false"/> 147 <h1 class="title" id="title"></h1> 148 <p class="message" id="message"></p> 149 <label class="checkbox-wrapper toggle-container-with-text"> 150 <input id="confirmation-checkbox" type="checkbox" class="checkbox"></input> 151 <span class="checkbox-text"></span> 152 </label> 153 </div> 154 <moz-button-group class="buttons"> 155 <button class="confirm-button primary danger-button"></button> 156 <button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button> 157 </moz-button-group> 158 </div> 159 </template> 160 161 <template id="fxaccounts-button-template"> 162 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 163 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 164 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/fxaccounts-button.css"> 165 <div class="logged-out-view"> 166 <p class="fxaccounts-extra-text text-deemphasized" data-l10n-id="fxaccounts-sign-in-text"></p> 167 <button class="fxaccounts-enable-button" data-l10n-id="fxaccounts-sign-in-sync-button"></button> 168 </div> 169 <div class="logged-in-view"> 170 <a class="fxaccount-manage-link" target="_blank" rel="noreferrer"> 171 <button class="fxaccounts-avatar-button ghost-button" data-l10n-id="fxaccounts-avatar-button"> 172 <span class="fxaccount-email"></span> 173 <span class="fxaccount-avatar"></span> 174 </button> 175 </a> 176 </div> 177 </template> 178 179 <template id="login-list-template"> 180 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 181 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 182 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list.css"> 183 <script type="module" src="chrome://browser/content/aboutlogins/components/login-command-button.mjs"></script> 184 <div class="listHeader"> 185 <login-filter></login-filter> 186 <div class="create-login-button-container"> 187 <create-login-button></create-login-button> 188 </div> 189 </div> 190 <div class="meta text-deemphasized"> 191 <label for="login-sort"> 192 <span data-l10n-id="login-list-sort-label-text"></span> 193 <select id="login-sort"> 194 <option name="name" data-l10n-id="login-list-name-option" value="name"> 195 <option name="name-reverse" data-l10n-id="login-list-name-reverse-option" value="name-reverse"> 196 <option name="username" data-l10n-id="login-list-username-option" value="username"> 197 <option name="username-reverse" data-l10n-id="login-list-username-reverse-option" value="username-reverse"> 198 <option name="last-used" data-l10n-id="login-list-last-used-option" value="last-used"> 199 <option name="last-changed" data-l10n-id="login-list-last-changed-option" value="last-changed"> 200 <option name="alerts" data-l10n-id="about-logins-login-list-alerts-option" value="alerts" hidden> 201 </select> 202 </label> 203 <span class="count" data-l10n-id="login-list-count2" data-l10n-args='{"count": 0}'></span> 204 </div> 205 <!-- This container is to work around bug 1569292 --> 206 <div class="container"> 207 <ol role="listbox" tabindex="0" data-l10n-id="login-list"></ol> 208 <div class="intro"> 209 <p data-l10n-id="login-list-intro-title2"></p> 210 <span data-l10n-id="login-list-intro-description"></span> 211 </div> 212 <div class="empty-search-message"> 213 <p data-l10n-id="about-logins-login-list-empty-search-title2"></p> 214 <span data-l10n-id="about-logins-login-list-empty-search-description"></span> 215 </div> 216 </div> 217 </template> 218 219 <template id="login-list-item-template"> 220 <li class="login-list-item" role="option"> 221 <img class="favicon" /> 222 <div class="labels"> 223 <span class="title text-truncated-ellipsis" dir="auto"></span> 224 <span class="username text-deemphasized text-truncated-ellipsis" dir="ltr"></span> 225 </div> 226 <img class="alert-icon" title="" src=""/> 227 </li> 228 </template> 229 230 <template id="login-list-section-template"> 231 <section class="login-list-section"> 232 <span class="login-list-header" dir="auto"></span> 233 </section> 234 </template> 235 236 <template id="login-intro-template"> 237 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 238 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 239 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-intro.css"> 240 241 <img class="illustration" src="chrome://global/content/megalist/icons/cpm-fox-illustration.svg"/> 242 <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-message"></h1> 243 <section> 244 <p class="description" data-l10n-id="login-intro-description2"> 245 <a data-l10n-name="breach-alert-link" href="https://support.mozilla.org/kb/firefox-password-manager-alerts-breached-websites" target="_blank" rel="noreferrer"></a> 246 </p> 247 <ul> 248 <li data-l10n-id="login-intro-instructions-fxa2"></li> 249 <li data-l10n-id="login-intro-instructions-fxa-settings"></li> 250 <li data-l10n-id="login-intro-instructions-fxa-passwords-help"> 251 <a data-l10n-name="passwords-help-link" class="intro-help-link" target="_blank" rel="noreferrer"></a> 252 </li> 253 </ul> 254 <p class="description intro-import-text file-import" hidden data-l10n-id="about-logins-intro-import3"> 255 <a data-l10n-name="import-browser-link" href="#"></a> 256 <a data-l10n-name="import-file-link" href="#"></a> 257 </p> 258 </section> 259 </template> 260 261 <template id="login-item-template"> 262 <script type="module" src="chrome://browser/content/aboutlogins/components/login-timeline.mjs"></script> 263 <script type="module" src="chrome://browser/content/aboutlogins/components/login-command-button.mjs"></script> 264 <script type="module" src="chrome://browser/content/aboutlogins/components/login-alert.mjs"></script> 265 <script type="module" src="chrome://browser/content/aboutlogins/components/login-message-popup.mjs"></script> 266 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 267 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 268 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css"> 269 <div class="container"> 270 <div class="column"> 271 <div class="error-message"> 272 <span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span> 273 <span class="error-message-link"> 274 <a data-l10n-name="duplicate-link" tabindex="0" href=""></a> 275 </span> 276 </div> 277 <form> 278 <div class="header"> 279 <img class="login-item-favicon" /> 280 <h2 class="title"> 281 <span class="login-item-title"></span> 282 <span class="new-login-title" data-l10n-id="about-logins-login-item-new-login-title"></span> 283 </h2> 284 <div class="action-buttons"> 285 <edit-button></edit-button> 286 <moz-button-group class="form-actions-row"> 287 <button class="save-changes-button" type="submit"></button> 288 <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button> 289 </moz-button-group> 290 <delete-button></delete-button> 291 </div> 292 </div> 293 <login-breach-alert></login-breach-alert> 294 <login-vulnerable-password-alert></login-vulnerable-password-alert> 295 <div class="detail-row"> 296 <label class="detail-cell"> 297 <span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span> 298 <!-- Default text inputs to readonly to reduce jumping of the field 299 size on page load since it always starts readonly. --> 300 301 <input type="url" 302 name="origin" 303 required 304 data-l10n-id="login-item-origin" 305 dir="auto" 306 readonly/> 307 <a class="origin-input" dir="auto" target="_blank" rel="noreferrer" name="origin" href=""></a> 308 <origin-warning l10nId="about-logins-origin-tooltip2"></origin-warning> 309 </label> 310 </div> 311 <div class="detail-grid"> 312 <div class="detail-row"> 313 <label class="detail-cell"> 314 <span class="username-label field-label" data-l10n-id="login-item-username-label"></span> 315 <input type="text" 316 name="username" 317 data-l10n-id="login-item-username" 318 dir="ltr" 319 readonly/> 320 </label> 321 <copy-username-button class="copy-button"></copy-username-button> 322 </div> 323 <div class="detail-row"> 324 <label class="detail-cell"> 325 <span class="password-label field-label" data-l10n-id="login-item-password-label"></span> 326 <div class="reveal-password-wrapper"> 327 <input type="password" 328 name="password" 329 autocomplete="off" 330 dir="ltr" 331 required 332 readonly/> 333 <input class="password-display" 334 type="password" 335 autocomplete="off" 336 dir="ltr" 337 readonly/> 338 <input type="checkbox" 339 class="reveal-password-checkbox" 340 data-l10n-id="login-item-password-reveal-checkbox"/> 341 <password-warning></password-warning> 342 </div> 343 </label> 344 <copy-password-button class="copy-button"></copy-password-button> 345 </div> 346 </div> 347 <login-timeline hidden ></login-timeline> 348 </form> 349 </div> 350 </div> 351 </template> 352 353 <template id="login-filter-template"> 354 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 355 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 356 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-filter.css"> 357 <input data-l10n-id="about-logins-login-filter2" class="filter" type="text" dir="auto"/> 358 </template> 359 360 <template id="menu-button-template"> 361 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> 362 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css"> 363 <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/menu-button.css"> 364 <button class="menu-button ghost-button" data-l10n-id="menu"></button> 365 <ul class="menu" role="menu" hidden> 366 <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> 367 <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> 368 <button role="menuitem" class="menuitem-button menuitem-export ghost-button" data-event-name="AboutLoginsExportPasswordsDialog" data-l10n-id="about-logins-menu-menuitem-export-logins2"></button> 369 <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> 370 <hr role="separator" class="menuitem-separator"></hr> 371 <button role="menuitem" class="menuitem-button menuitem-preferences ghost-button" data-event-name="AboutLoginsOpenPreferences" data-l10n-id="menu-menuitem-preferences"></button> 372 <button role="menuitem" class="menuitem-button menuitem-help ghost-button" data-event-name="AboutLoginsGetHelp" data-l10n-id="about-logins-menu-menuitem-help"></button> 373 </ul> 374 </template> 375 376 </body> 377 </html>