| import { html } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; |
| export function getTemplate() { |
| return html `<!--_html_template_start_--> <style include="cr-shared-style settings-shared iron-flex"> |
| #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) { |
| border-top: var(--cr-separator-line); |
| } |
| |
| .list-item { |
| display: flex; |
| } |
| |
| .list-item > div { |
| flex: 1; |
| } |
| </style> |
| |
| |
| |
| <div id="sync-data-radio" class="cr-row first"> |
| <cr-radio-group |
| selected="[[selectedSyncDataRadio_(syncPrefs)]]" |
| on-selected-changed="onSyncDataRadioSelectionChanged_"> |
| <cr-radio-button name="sync-everything"> |
| $i18n{syncEverythingCheckboxLabel} |
| </cr-radio-button> |
| <cr-radio-button name="customize-sync"> |
| $i18n{customizeSyncLabel} |
| </cr-radio-button> |
| </cr-radio-group> |
| </div> |
| |
| <div class="cr-row first"> |
| <h2 class="cr-title-text flex">$i18n{syncData}</h2> |
| </div> |
| |
| <div class="list-frame" id="sync-data-types"> |
| <div class="list-item" hidden="[[!syncPrefs.appsRegistered]]"> |
| <div id="appCheckboxLabel"> |
| $i18n{appCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.appsSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="appCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.bookmarksRegistered]]"> |
| <div id="bookmarksCheckboxLabel"> |
| $i18n{bookmarksCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.bookmarksSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="bookmarksCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.extensionsRegistered]]"> |
| <div id="extensionsCheckboxLabel"> |
| $i18n{extensionsCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.extensionsSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="extensionsCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.typedUrlsRegistered]]"> |
| <div id="historyCheckboxLabel"> |
| $i18n{historyCheckboxLabel} |
| </div> |
| <!-- TypedUrls has a special on-change handler to deal with user |
| events. --> |
| <cr-toggle id="historyToggle" |
| checked="{{syncPrefs.typedUrlsSynced}}" |
| on-change="onTypedUrlsDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="historyCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.preferencesRegistered]]"> |
| <div id="settingsCheckboxLabel"> |
| $i18n{settingsCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.preferencesSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="settingsCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.themesRegistered]]"> |
| <div id="themeCheckboxLabel"> |
| $i18n{themeCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.themesSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="themeCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.readingListRegistered]]"> |
| <div id="readingListCheckboxLabel"> |
| $i18n{readingListCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.readingListSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="readingListCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.tabsRegistered]]"> |
| <div id="openTabsCheckboxLabel"> |
| $i18n{openTabsCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.tabsSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="openTabsCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.passwordsRegistered]]"> |
| <div id="passwordsCheckboxLabel"> |
| $i18n{passwordsCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.passwordsSynced}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="passwordsCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.autofillRegistered]]"> |
| <div id="autofillCheckboxLabel"> |
| $i18n{autofillCheckboxLabel} |
| </div> |
| <!-- Autofill has a special on-change handler to deal with |
| Payments integration. --> |
| <cr-toggle checked="{{syncPrefs.autofillSynced}}" |
| on-change="onAutofillDataTypeChanged_" |
| disabled="[[syncPrefs.syncAllDataTypes]]" |
| aria-labelledby="autofillCheckboxLabel"> |
| </cr-toggle> |
| </div> |
| |
| <div class="list-item" hidden="[[!syncPrefs.autofillRegistered]]"> |
| <!-- The Payments integration checkbox is a special case in many |
| ways. It's visible only if autofill is registered. It's |
| disabled and unchecked if autofill is unchecked.--> |
| <div> |
| $i18n{enablePaymentsIntegrationCheckboxLabel} |
| </div> |
| <cr-toggle checked="{{syncPrefs.paymentsIntegrationEnabled}}" |
| on-change="onSingleSyncDataTypeChanged_" |
| disabled="[[shouldPaymentsCheckboxBeDisabled_( |
| syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]" |
| aria-label="$i18n{enablePaymentsIntegrationCheckboxLabel}"> |
| </cr-toggle> |
| </div> |
| |
| |
| <!--_html_template_end_-->`; |
| } |