<style include="cr-shared-style settings-shared">
.list-item {
display: flex;
}
.list-item[sync-revamp-enabled] {
align-items: center;
flex-direction: row;
gap: 16px;
padding: 14px 20px;
}
#tooltipIcon {
--cr-tooltip-icon-fill-color: var(--cros-color-secondary);
--paper-tooltip-delay-in: 0;
margin-inline-end: 20px;
}
#tooltipIcon[label-disabled]::part(tooltip) {
visibility: hidden;
}
.list-item > div {
flex: 1;
}
div[label-disabled],
cr-tooltip-icon[label-disabled] {
opacity: var(--cros-disabled-opacity);
}
</style>
<div class="settings-box first">
<localized-link class="secondary"
localized-string="$i18n{osSyncFeatureLabel}"
on-link-clicked="onBrowserSyncSettingsClicked_">
</localized-link>
</div>
<div id="syncDataRadio" class="cr-row first">
<cr-radio-group
selected="[[selectedSyncDataRadio_(osSyncPrefs)]]"
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" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
hidden="[[!osSyncPrefs.osAppsRegistered]]">
<div id="osAppsCheckboxLabel"
label-disabled$="[[areDataTypeTogglesDisabled_]]">
$i18n{osSyncAppsCheckboxLabel}
<div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
$i18n{osSyncAppsCheckboxSublabel}
</div>
</div>
<cr-tooltip-icon id="tooltipIcon"
tooltip-text="$i18n{osSyncAppsTooltipText}" icon-class="cr:help-outline"
icon-aria-label="$i18n{osSyncAppsTooltipText}"
hidden="[[!showSyncSettingsRevamp_]]"
label-disabled$="[[areDataTypeTogglesDisabled_]]"
exportparts="tooltip">
</cr-tooltip-icon>
<cr-toggle id="osAppsControl"
checked="{{osSyncPrefs.osAppsSynced}}"
on-change="onSingleSyncDataTypeChanged_"
disabled="[[areDataTypeTogglesDisabled_]]"
aria-labelledby="osAppsCheckboxLabel">
</cr-toggle>
</div>
<div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
hidden="[[!osSyncPrefs.osPreferencesRegistered]]">
<div id="osSettingsCheckboxLabel"
label-disabled$="[[areDataTypeTogglesDisabled_]]">
$i18n{osSyncSettingsCheckboxLabel}
<div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
$i18n{osSyncSettingsCheckboxSublabel}
</div>
</div>
<cr-toggle id="osPreferencesControl"
checked="{{osSyncPrefs.osPreferencesSynced}}"
on-change="onSettingsSyncedChanged_"
disabled="[[areDataTypeTogglesDisabled_]]"
aria-labelledby="osSettingsCheckboxLabel">
</cr-toggle>
</div>
<div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
hidden="[[!osSyncPrefs.osWifiConfigurationsRegistered]]">
<div id="osWifiConfigurationsCheckboxLabel"
label-disabled$="[[areDataTypeTogglesDisabled_]]">
$i18n{osSyncWifiConfigurationsCheckboxLabel}
<div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
$i18n{osSyncWifiCheckboxSublabel}
</div>
</div>
<cr-toggle checked="{{osSyncPrefs.osWifiConfigurationsSynced}}"
on-change="onSingleSyncDataTypeChanged_"
disabled="[[areDataTypeTogglesDisabled_]]"
aria-labelledby="osWifiConfigurationsCheckboxLabel">
</cr-toggle>
</div>
<div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
hidden="[[!osSyncPrefs.osAppsRegistered]]">
<!-- Wallpaper sync is a special case; its implementation relies upon
OS Settings to be synced. Thus, the wallpaper label and toggle are
only enabled when the Settings sync toggle above is on. -->
<div id="wallpaperCheckboxLabel"
label-disabled$="[[shouldWallpaperSyncSectionBeDisabled_(
areDataTypeTogglesDisabled_, osSyncPrefs.osAppsSynced)]]">
$i18n{wallpaperCheckboxLabel}
<div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
$i18n{osSyncWallpaperCheckboxSublabel}
</div>
</div>
<cr-toggle checked="{{osSyncPrefs.wallpaperEnabled}}"
on-change="onSingleSyncDataTypeChanged_"
disabled="[[shouldWallpaperSyncSectionBeDisabled_(
areDataTypeTogglesDisabled_, osSyncPrefs.osAppsSynced)]]"
aria-labelledby="wallpaperCheckboxLabel">
</cr-toggle>
</div>
</div>