| <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/policy/cr_policy_indicator.html"> |
| <link rel="import" href="chrome://resources/html/action_link.html"> |
| <link rel="import" href="chrome://resources/html/action_link_css.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/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="../i18n_setup.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| <link rel="import" href="../controls/extension_controlled_indicator.html"> |
| <link rel="import" href="../controls/settings_toggle_button.html"> |
| <link rel="import" href="../prefs/prefs.html"> |
| <link rel="import" href="address_edit_dialog.html"> |
| <link rel="import" href="credit_card_edit_dialog.html"> |
| <link rel="import" href="passwords_shared_css.html"> |
| |
| <dom-module id="settings-autofill-section"> |
| <template> |
| <style include="settings-shared passwords-shared action-link"> |
| .type-column { |
| align-items: center; |
| flex: 2; |
| } |
| |
| .expiration-column { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| } |
| |
| .expiration-date { |
| flex: 1; |
| } |
| |
| .payments-label { |
| -webkit-margin-start: 16px; |
| color: var(--paper-grey-600); |
| } |
| |
| #addressList .start { |
| display: flex; |
| overflow: hidden; |
| } |
| |
| #addressSummary { |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| } |
| |
| .ellipses { |
| flex: 1; |
| max-width: fit-content; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| cr-policy-indicator { |
| padding-right: 20px; |
| width: 20px; |
| } |
| </style> |
| <settings-toggle-button id="autofillToggle" |
| class="first" |
| aria-label="$i18n{autofill}" no-extension-indicator |
| label="$i18n{autofillFormsLabel}" |
| pref="{{prefs.autofill.enabled}}"> |
| </settings-toggle-button> |
| <template is="dom-if" if="[[prefs.autofill.enabled.extensionId]]"> |
| <div class="settings-box continuation"> |
| <extension-controlled-indicator class="start" |
| id="autofillExtensionIndicator" |
| extension-id="[[prefs.autofill.enabled.extensionId]]" |
| extension-name="[[prefs.autofill.enabled.controlledByName]]" |
| extension-can-be-disabled="[[ |
| prefs.autofill.enabled.extensionCanBeDisabled]]"> |
| </extension-controlled-indicator> |
| </div> |
| </template> |
| <div class="settings-box continuation"> |
| <h2 class="start">$i18n{addresses}</h2> |
| <paper-button id="addAddress" |
| class="secondary-button header-aligned-button" |
| on-click="onAddAddressTap_"> |
| $i18n{add} |
| </paper-button> |
| </div> |
| <div class="list-frame"> |
| <div id="addressList" class="vertical-list"> |
| <template is="dom-repeat" items="[[addresses]]"> |
| <div class="list-item"> |
| <div class="start"> |
| <span id="addressSummary"> |
| <span class="ellipses"> |
| [[item.metadata.summaryLabel]] |
| </span> |
| <span class="ellipses"> |
| [[item.metadata.summarySublabel]] |
| </span> |
| </span> |
| <span class="payments-label" hidden$="[[item.metadata.isLocal]]"> |
| $i18n{googlePayments} |
| </span> |
| </div> |
| <template is="dom-if" if="[[item.metadata.isLocal]]"> |
| <paper-icon-button-light class="icon-more-vert"> |
| <button id="addressMenu" |
| on-click="onAddressMenuTap_" title="$i18n{moreActions}"> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| <template is="dom-if" if="[[!item.metadata.isLocal]]"> |
| <paper-icon-button-light class="icon-external"> |
| <button on-click="onRemoteEditAddressTap_" actionable></button> |
| </paper-icon-button-light> |
| </template> |
| </div> |
| </template> |
| </div> |
| <div id="noAddressesLabel" class="list-item" |
| hidden$="[[hasSome_(addresses)]]"> |
| $i18n{noAddressesFound} |
| </div> |
| </div> |
| <cr-action-menu id="addressSharedMenu"> |
| <button id="menuEditAddress" slot="item" class="dropdown-item" |
| on-click="onMenuEditAddressTap_">$i18n{edit}</button> |
| <button id="menuRemoveAddress" slot="item" class="dropdown-item" |
| on-click="onMenuRemoveAddressTap_">$i18n{removeAddress}</button> |
| </cr-action-menu> |
| <template is="dom-if" if="[[showAddressDialog_]]" restamp> |
| <settings-address-edit-dialog address="[[activeAddress]]" |
| on-close="onAddressDialogClosed_"> |
| </settings-address-edit-dialog> |
| </template> |
| <div class="settings-box first"> |
| <h2 class="start">$i18n{creditCards}</h2> |
| <paper-button id="addCreditCard" |
| class="secondary-button header-aligned-button" |
| on-click="onAddCreditCardTap_" |
| hidden$="[[isDisabled_(prefs.autofill.credit_card_enabled)]]"> |
| $i18n{add} |
| </paper-button> |
| </div> |
| <div class="list-frame"> |
| <template is="dom-if" |
| if="[[!isDisabled_(prefs.autofill.credit_card_enabled)]]"> |
| <div id="creditCardsHeading" class="list-item column-header" |
| hidden$="[[!hasSome_(creditCards)]]"> |
| <div class="type-column">$i18n{creditCardType}</div> |
| <div class="expiration-column">$i18n{creditCardExpiration}</div> |
| </div> |
| <div id="creditCardList" class="vertical-list list-with-header"> |
| <template is="dom-repeat" items="[[creditCards]]"> |
| <div class="list-item"> |
| <div class="type-column"> |
| <span id="creditCardLabel">[[item.metadata.summaryLabel]]</span> |
| <span class="payments-label" |
| hidden$="[[item.metadata.isLocal]]"> |
| <span hidden$="[[item.metadata.isCached]]"> |
| $i18n{googlePayments} |
| </span> |
| <span hidden$="[[!item.metadata.isCached]]"> |
| $i18n{googlePaymentsCached} |
| </span> |
| </span> |
| </div> |
| <div class="expiration-column"> |
| <div id="creditCardExpiration" |
| class="expiration-date">[[expiration_(item)]]</div> |
| <template is="dom-if" if="[[showDots_(item.metadata)]]"> |
| <paper-icon-button-light class="icon-more-vert"> |
| <button id="creditCardMenu" title="$i18n{moreActions}" |
| on-click="onCreditCardMenuTap_"> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| <template is="dom-if" if="[[!showDots_(item.metadata)]]"> |
| <paper-icon-button-light class="icon-external"> |
| <button id="remoteCreditCardLink" |
| on-click="onRemoteEditCreditCardTap_" actionable> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| </div> |
| </div> |
| </template> |
| </div> |
| <div id="noCreditCardsLabel" class="list-item" |
| hidden$="[[hasSome_(creditCards)]]"> |
| $i18n{noCreditCardsFound} |
| </div> |
| </template> |
| <div id="CreditCardsDisabledLabel" class="list-item" |
| hidden$="[[!isDisabled_(prefs.autofill.credit_card_enabled)]]"> |
| <cr-policy-indicator indicator-type="userPolicy" |
| icon-aria-label="$i18n{noCreditCardsPolicy}"></cr-policy-indicator> |
| $i18n{noCreditCardsPolicy} |
| </div> |
| </div> |
| <cr-action-menu id="creditCardSharedMenu"> |
| <button id="menuEditCreditCard" slot="item" class="dropdown-item" |
| on-click="onMenuEditCreditCardTap_">$i18n{edit}</button> |
| <button id="menuRemoveCreditCard" slot="item" class="dropdown-item" |
| hidden$="[[!activeCreditCard.metadata.isLocal]]" |
| on-click="onMenuRemoveCreditCardTap_">$i18n{removeCreditCard}</button> |
| <button id="menuClearCreditCard" slot="item" class="dropdown-item" |
| on-click="onMenuClearCreditCardTap_" |
| hidden$="[[!activeCreditCard.metadata.isCached]]"> |
| $i18n{clearCreditCard} |
| </button> |
| </cr-action-menu> |
| <template is="dom-if" if="[[showCreditCardDialog_]]" restamp> |
| <settings-credit-card-edit-dialog credit-card="[[activeCreditCard]]" |
| on-close="onCreditCardDialogClosed_"> |
| </settings-credit-card-edit-dialog> |
| </template> |
| </template> |
| <script src="autofill_section.js"></script> |
| </dom-module> |
