| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/html/assert.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/list_property_update_behavior.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="../controls/settings_toggle_button.html"> |
| <link rel="import" href="../controls/extension_controlled_indicator.html"> |
| <link rel="import" href="../global_scroll_target_behavior.html"> |
| <link rel="import" href="../prefs/prefs.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| <link rel="import" href="../site_favicon.html"> |
| <link rel="import" href="password_edit_dialog.html"> |
| <link rel="import" href="passwords_export_dialog.html"> |
| <link rel="import" href="passwords_shared_css.html"> |
| <link rel="import" href="password_list_item.html"> |
| <link rel="import" href="password_manager_proxy.html"> |
| |
| <dom-module id="passwords-section"> |
| <template> |
| <style include="settings-shared passwords-shared"> |
| #savedPasswordsHeaders { |
| /* This adds enough padding so that the labels are aligned with the |
| * columns. It is necessary due to the absence of the "more actions" |
| * button in the heading. |
| */ |
| padding-inline-end: calc( |
| var(--cr-icon-ripple-size) + var(--cr-icon-button-margin-start)); |
| } |
| |
| #undoLabel { |
| color: #fff; |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #exportImportMenuButtonContainer { |
| margin-inline-end: 0; |
| } |
| </style> |
| <settings-toggle-button id="passwordToggle" |
| class="first" |
| aria-label="$i18n{passwords}" no-extension-indicator |
| label="$i18n{passwordsSavePasswordsLabel}" |
| pref="{{prefs.credentials_enable_service}}"> |
| </settings-toggle-button> |
| <template is="dom-if" |
| if="[[prefs.credentials_enable_service.extensionId]]"> |
| <div class="settings-box continuation"> |
| <extension-controlled-indicator class="start" |
| id="passwordsExtensionIndicator" |
| extension-id="[[prefs.credentials_enable_service.extensionId]]" |
| extension-name="[[ |
| prefs.credentials_enable_service.controlledByName]]" |
| extension-can-be-disabled="[[ |
| prefs.credentials_enable_service.extensionCanBeDisabled]]"> |
| </extension-controlled-indicator> |
| </div> |
| </template> |
| <settings-toggle-button id="autosigninCheckbox" |
| pref="{{prefs.credentials_enable_autosignin}}" |
| label="$i18n{passwordsAutosigninLabel}" |
| sub-label="$i18n{passwordsAutosigninDescription}"> |
| </settings-toggle-button> |
| <div id="manageLink" class="settings-box first two-line"> |
| <!-- This span lays out the url correctly, relative to the label. --> |
| <span>$i18nRaw{managePasswordsLabel}</span> |
| </div> |
| <div class="settings-box first"> |
| <h2 id="savedPasswordsHeading" class="start"> |
| $i18n{savedPasswordsHeading} |
| </h2> |
| <template is="dom-if" |
| if="[[showImportOrExportPasswords_( |
| showExportPasswords_, showImportPasswords_)]]"> |
| <paper-icon-button-light id="exportImportMenuButtonContainer" |
| class="icon-more-vert"> |
| <button id="exportImportMenuButton" |
| on-click="onImportExportMenuTap_" |
| title="$i18n{moreActions}" focus-type="exportImportMenuButton" |
| aria-describedby="savedPasswordsHeading"> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| </div> |
| <div class="list-frame"> |
| <div id="savedPasswordsHeaders" class="list-item column-header" |
| hidden$="[[!hasSome_(savedPasswords, savedPasswords.splices)]]"> |
| <div class="website-column">$i18n{editPasswordWebsiteLabel}</div> |
| <div class="username-column"> |
| $i18n{editPasswordUsernameLabel} |
| </div> |
| <div class="password-column"> |
| $i18n{editPasswordPasswordLabel} |
| </div> |
| </div> |
| <iron-list id="passwordList" preserve-focus |
| items="[[getFilteredPasswords_(filter, savedPasswords.splices)]]" |
| class="cr-separators list-with-header" |
| scroll-target="[[subpageScrollTarget]]" risk-selection> |
| <template> |
| <password-list-item item="[[item]]" tabindex$="[[tabIndex]]" |
| first$="[[!index]]" iron-list-tab-index="[[tabIndex]]" |
| last-focused="{{lastFocused_}}"> |
| </password-list-item> |
| </template> |
| </iron-list> |
| <div id="noPasswordsLabel" class="list-item" |
| hidden$="[[hasSome_(savedPasswords, savedPasswords.splices)]]"> |
| $i18n{noPasswordsFound} |
| </div> |
| </div> |
| <cr-action-menu id="menu"> |
| <button id="menuEditPassword" slot="item" class="dropdown-item" |
| on-click="onMenuEditPasswordTap_">$i18n{passwordViewDetails}</button> |
| <button id="menuRemovePassword" slot="item" class="dropdown-item" |
| on-click="onMenuRemovePasswordTap_">$i18n{removePassword}</button> |
| </cr-action-menu> |
| <cr-action-menu id="exportImportMenu"> |
| <button id="menuImportPassword" slot="item" class="dropdown-item" |
| on-click="onImportTap_" hidden="[[!showImportPasswords_]]"> |
| $i18n{import} |
| </button> |
| <button id="menuExportPassword" slot="item" class="dropdown-item" |
| on-click="onExportTap_" hidden="[[!showExportPasswords_]]"> |
| $i18n{exportMenuItem} |
| </button> |
| </cr-action-menu> |
| <template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp> |
| <passwords-export-dialog on-close="onPasswordsExportDialogClosed_"> |
| </passwords-export-dialog> |
| </template> |
| <template is="dom-if" if="[[showPasswordEditDialog_]]" restamp> |
| <password-edit-dialog on-close="onPasswordEditDialogClosed_" |
| item="[[activePassword.item]]"> |
| </password-edit-dialog> |
| </template> |
| <cr-toast id="undoToast" duration="[[toastDuration_]]"> |
| <div id="undoLabel">$i18n{passwordDeleted}</div> |
| <paper-button on-click="onUndoButtonTap_"> |
| $i18n{undoRemovePassword} |
| </paper-button> |
| </cr-toast> |
| <div class="settings-box block first"> |
| <h2>$i18n{passwordExceptionsHeading}</h2> |
| </div> |
| <div class="list-frame vertical-list" id="passwordExceptionsList"> |
| <template is="dom-repeat" items="[[passwordExceptions]]" |
| filter="[[passwordExceptionFilter_(filter)]]"> |
| <div class="list-item"> |
| <div class="start website-column"> |
| <site-favicon url="[[item.urls.link]]"></site-favicon> |
| <a id="exception" href="[[item.urls.link]]" target="_blank"> |
| [[item.urls.shown]] |
| </a> |
| </div> |
| <paper-icon-button-light class="icon-clear"> |
| <button id="removeExceptionButton" |
| on-click="onRemoveExceptionButtonTap_" |
| tabindex$="[[tabIndex]]" |
| title="$i18n{deletePasswordException}"> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| </template> |
| <div id="noExceptionsLabel" class="list-item" |
| hidden$="[[hasSome_(passwordExceptions)]]"> |
| $i18n{noExceptionsFound} |
| </div> |
| </div> |
| </template> |
| <script src="passwords_section.js"></script> |
| </dom-module> |
