browser/components/aboutlogins/content/aboutLogins.html
author lesleynorton <lnorton@mozilla.com>
Thu, 15 Aug 2019 18:55:37 +0000
changeset 488329 2a6b7a24fdb3e082e98563107dfae018cb02ebe3
parent 488323 195166db95ccaae18f182af7ef11e576b29d13e4
child 488386 f7db69e3462cf046fca6782483ec999bd997f982
permissions -rw-r--r--
Bug 1569846: Add breach alert dismissal. r=MattN,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D41034

<!-- 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;"/>
    <title data-l10n-id="about-logins-page-title"></title>
    <link rel="localization" href="branding/brand.ftl">
    <link rel="localization" href="browser/branding/sync-brand.ftl">
    <link rel="localization" href="browser/branding/brandings.ftl">
    <link rel="localization" href="browser/aboutLogins.ftl">
    <script type="module" src="chrome://browser/content/aboutlogins/components/confirmation-dialog.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/login-filter.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/login-intro.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/login-item.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/login-list.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/login-list-item.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/components/menu-button.js"></script>
    <script type="module" src="chrome://browser/content/aboutlogins/aboutLogins.js"></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://browser/content/aboutlogins/icons/favicon.svg">
  </head>
  <body>
    <header>
      <img id="branding-logo" src="chrome://branding/content/aboutlogins.svg" alt=""/>
      <login-filter></login-filter>
      <fxaccounts-button></fxaccounts-button>
      <menu-button></menu-button>
    </header>
    <login-list></login-list>
    <login-item></login-item>
    <login-intro></login-intro>
    <confirmation-dialog hidden></confirmation-dialog>

    <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" data-l10n-id="confirmation-dialog-dismiss-button"></button>
          <div class="content">
            <img class="warning-icon" src="chrome://global/skin/icons/warning.svg"/>
            <h1 class="title" id="title"></h1>
            <p class="message" id="message"></p>
          </div>
          <div class="buttons">
            <button class="confirm-button danger-button" tabindex="2"></button>
            <button class="cancel-button" tabindex="1" data-l10n-id="confirmation-dialog-cancel-button"></button>
          </div>
        </div>
      </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-button"></button>
      </div>
      <div class="logged-in-view">
        <p class="fxaccount-email"></p>
        <button class="fxaccounts-avatar-button" data-l10n-id="fxaccounts-avatar-button"></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="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="last-user" 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="breached" data-l10n-id="login-list-breached-option" value="breached" 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>
      <button class="create-login-button" data-l10n-id="create-login-button"></button>
    </template>

    <template id="login-list-item-template">
      <li class="login-list-item" role="option">
        <div class="favicon-wrapper">
          <img class="favicon" src="" alt=""/>
        </div>
        <div>
          <span class="title"></span>
          <span class="username"></span>
        </div>
      </li>
    </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="login-intro-heading"></h1>
      <section>
        <p class="description" data-l10n-id="login-intro-description"></p>
        <ul>
          <li data-l10n-id="login-intro-instruction-fxa"></li>
          <li data-l10n-id="login-intro-instruction-fxa-settings"></li>
          <li data-l10n-id="login-intro-instruction-faq">
            <a data-l10n-name="faq" class="intro-faq-link" href="#"></a>
          </li>
        </ul>
      </section>
    </template>

    <template id="login-item-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-item.css">
      <div class="breach-alert">
        <span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
        <a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noopener noreferer" target="_blank"></a>
        <button class="dismiss-breach-alert"></button>
      </div>
      <div class="header">
        <div class="login-item-favicon-wrapper">
          <img class="login-item-favicon" src="" alt=""/>
        </div>
        <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="login-item-delete-button"></button>
      </div>
      <form>
        <div class="detail-row">
          <label class="detail-cell">
            <span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
            <input type="url" name="origin" class="origin-input" required data-l10n-id="login-item-origin" dir="auto"/>
          </label>
          <button class="open-site-button" data-l10n-id="login-item-open-site-button" type="button"></button>
        </div>
        <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"/>
          </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" required/>
              <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>
        <p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
        <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
        <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
        <button class="save-changes-button" type="submit"></button>
        <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
      </form>
    </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="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 ghost-button" hidden data-supported-platforms="Win32" data-event-name="AboutLoginsImport" data-l10n-id="menu-menuitem-import"></button>
        <button role="menuitem" class="menuitem-button menuitem-preferences ghost-button" data-event-name="AboutLoginsOpenPreferences" data-l10n-id="menu-menuitem-preferences"></button>
        <hr role="separator" class="menuitem-separator"></hr>
        <button role="menuitem" class="menuitem-button menuitem-feedback ghost-button" data-event-name="AboutLoginsOpenFeedback" data-l10n-id="menu-menuitem-feedback"></button>
        <button role="menuitem" class="menuitem-button menuitem-faq ghost-button" data-event-name="AboutLoginsOpenFAQ" data-l10n-id="menu-menuitem-faq"></button>
        <hr role="separator" class="menuitem-separator"></hr>
        <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-android ghost-button" data-event-name="AboutLoginsOpenMobileAndroid" data-l10n-id="menu-menuitem-android-app"></button>
        <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-ios ghost-button" data-event-name="AboutLoginsOpenMobileIos" data-l10n-id="menu-menuitem-iphone-app"></button>
      </ul>
    </template>
  </body>
</html>