1 files changed, 392 insertions, 0 deletions
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 @@
+<!-- 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/. -->
+
+<!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"></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>
+    <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script>
+    <script type="module" src="chrome://browser/content/aboutlogins/aboutLogins.mjs"></script>
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <link rel="stylesheet" href="chrome://browser/content/aboutlogins/aboutLogins.css">
+    <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+    <link rel="icon" href="chrome://branding/content/icon32.png">
+  </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://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <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">
+            <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg" draggable="false"/>
+          </button>
+          <div class="content">
+            <img class="warning-icon" src="chrome://global/skin/icons/warning.svg" draggable="false"/>
+            <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">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css">
+      <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://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css">
+      <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>
+        <img slot="dialog-icon" part="dialog-icon" src="chrome://browser/skin/import.svg"/>
+        <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-added" 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-modified" 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-change" 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://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/generic-dialog.css">
+      <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>
+          <a class="error-learn-more-link" href="https://support.mozilla.org/kb/import-login-data-file"
+            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://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <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">
+          <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg" draggable="false"/>
+        </button>
+        <div class="content">
+          <img class="warning-icon" src="chrome://global/skin/icons/delete.svg" draggable="false"/>
+          <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://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/fxaccounts-button.css">
+      <div class="logged-out-view">
+        <p class="fxaccounts-extra-text" 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">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list.css">
+      <div class="listHeader">
+        <login-filter></login-filter>
+        <div class="create-login-button-container">
+          <button class="create-login-button" data-l10n-id="create-new-login-button"></button>
+        </div>
+      </div>
+      <div class="meta">
+        <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-count" data-l10n-args='{"count": 0}'></span>
+      </div>
+      <!-- This container is to work around bug 1569292 -->
+      <div class="container">
+        <ol role="listbox" tabindex="0" data-l10n-id="login-list"></ol>
+        <div class="intro">
+          <p data-l10n-id="login-list-intro-title"></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-title"></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" dir="auto"></span>
+          <span class="username" 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">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-intro.css">
+
+      <img class="illustration" src="chrome://browser/content/aboutlogins/icons/intro-illustration.svg"/>
+      <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-logged-out2"></h1>
+      <section>
+        <p class="description" data-l10n-id="login-intro-description"></p>
+        <ul>
+          <li data-l10n-id="login-intro-instructions-fxa"></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-import2">
+          <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>
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
+      <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>
+          <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="login-item-new-login-title"></span>
+            </h2>
+            <button class="edit-button ghost-button" data-l10n-id="login-item-edit-button"></button>
+            <button class="delete-button ghost-button" data-l10n-id="about-logins-login-item-remove-button"></button>
+          </div>
+          <div class="breach-alert">
+            <h3 class="alert-title" data-l10n-id="about-logins-breach-alert-title"></h3>
+            <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/breached-website.svg"/>
+            <span class="alert-date" data-l10n-id="about-logins-breach-alert-date" data-l10n-args='{"date": 0}'></span>
+            <span class="alert-text" data-l10n-id="breach-alert-text"></span>
+            <a class="alert-link" data-l10n-id="about-logins-breach-alert-link" data-l10n-args='{"hostname": ""}' href="#" rel="noreferrer" target="_blank"></a>
+          </div>
+          <div class="vulnerable-alert">
+            <h3 class="alert-title" data-l10n-id="about-logins-vulnerable-alert-title"></h3>
+            <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"/>
+            <span class="alert-text" data-l10n-id="about-logins-vulnerable-alert-text2"></span>
+            <a class="alert-link" data-l10n-id="about-logins-vulnerable-alert-link" data-l10n-args='{"hostname": ""}' href="#" rel="noreferrer" target="_blank"></a>
+            <a class="alert-learn-more-link" data-l10n-id="about-logins-vulnerable-alert-learn-more-link" href="#" rel="noreferrer" target="_blank"></a>
+          </div>
+          <form>
+            <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>
+                <div class="tooltip-container">
+                  <div class="arrow-box">
+                      <p class="tooltip-message" data-l10n-id="login-item-tooltip-message"></p>
+                  </div>
+                </div>
+              </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>
+                <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
+                  <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
+                  <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
+                </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"/>
+                  </div>
+                </label>
+                <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
+                  <span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
+                  <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
+                </button>
+              </div>
+            </div>
+            <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>
+            <login-timeline hidden ></login-timeline>
+          </form>
+        </div>
+      </div>
+    </template>
+
+    <template id="login-filter-template">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-filter.css">
+      <input data-l10n-id="about-logins-login-filter" class="filter" type="text" dir="auto"/>
+    </template>
+
+    <template id="menu-button-template">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/menu-button.css">
+      <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-logins"></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-logins"></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>