blob: 22a1380202e94da454ebf360c6c86e9b3844e0a0 [file] [log] [blame]
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_-->`;
}