<html i18n-values="dir:textdirection;">
<head>
<title></title>
<style type="text/css">
body {
}
body {
}
h4 {
margin: 10px 0;
}
hr {
background-color: #ddd;
border: 0;
height: 1px;
margin: 5px 0;
text-align: left;
width: 100%;
}
form {
-webkit-user-select: none;
}
.content-area {
padding: 10px 15px;
}
.action-area {
-webkit-box-align: center;
-webkit-box-orient: horizontal;
-webkit-box-pack: end;
border-top: 1px solid rgba(188, 193, 208, .5);
display: -webkit-box;
padding: 12px;
}
.sync-header {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
.sync-select-customization {
margin-top: 10px;
}
.action-area-link-container {
-webkit-box-flex: 1;
}
#sync-passphrase-container {
margin: 10px 0;
}
#sync-custom-passphrase {
margin: 0 25px;
}
#sync-passphrase-message {
color: gray;
}
.sync-custom-passphrase-input {
margin: 10px 0;
}
#sync-select-container {
margin-bottom: 10px;
}
#sync-instructions-container {
margin-bottom: 30px;
}
#chooseDataTypesRadio {
vertical-align: top;
}
#chooseDataTypes > div {
display: inline-block;
}
#chooseDataTypesBody {
margin: 10px 0;
}
#chooseDataTypesBody > div {
-webkit-column-count: 3;
}
.sync-config-tab-contents-inactive {
display: none;
}
.sync-config-tab-contents-active {
display: block;
margin: 10px 15px;
}
.sync-config-tabstrip {
border-bottom: 1px solid gray;
height: 25px;
margin-bottom: 10px;
padding-top: 10px;
background-color: #DDD;
}
.sync-config-tab-active {
background-color: white;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
.sync-config-tab-active,
.sync-config-tab-inactive {
float: left;
height: 22px;
padding: 3px 5px 0px;
margin-left: 15px;
min-width: 100px;
text-align: center;
}
.sync-config-tab-active A,
.sync-config-tab-inactive A,
.sync-config-tab-active A:visited,
.sync-config-tab-inactive A:visited,
.sync-config-tab-active A:hover,
.sync-config-tab-inactive A:hover {
color: black;
text-decoration: none;
}
#sync-encryption-instructions {
margin-bottom: 5px;
}
#sync-passphrase-warning {
margin-bottom: 5px;
}
#encryption-tab-contents > .sync_item_show {
margin-bottom: 5px;
}
.sync-item-show {
display: block;
white-space: nowrap;
}
.sync-item-show > label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
width: 92%;
}
.sync-item-hide {
display: none;
}
.sync-label-inactive {
color: #9B9B9B;
}
.sync-label-active {
color: #000000;
}
.sync-data-types {
margin-left: 5px;
}
.sync-errors {
margin-top: 5px;
}
.sync-error-show {
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 1px 10px;
background-color: #eeb939;
border-radius: 4px;
font-weight: bold;
}
.sync-error-hide {
display: none;
}
.sync-footer {
position: fixed;
right: 0px;
bottom: 0px;
margin-right: 10px;
margin-bottom: 10px;
}
.sync-section {
background: #EEE;
margin: 5px 0px 5px 19px;
padding: 6px;
}
#explicit-message {
margin-bottom: 5px;
}
#change-passphrase {
margin: 10px 0;
background: #EEE;
padding: 8px;
}
#clear-data-button {
margin-top: 10px;
}
html[dir='rtl'] .sync-footer {
text-align: left;
left: 0px;
bottom: 0px;
margin-left: 20px;
}
input[type='button'],
input[type='submit'] {
min-width: 87px;
min-height: 26px;
}
html[os='mac'] input[type='button'],
html[os='mac'] input[type='submit'] {
font-size: 12pt;
}
</style>
<script src="chrome://resources/js/cr.js"></script>
<!-- TODO(jhawkins): util.js for $(). -->
<script>
// Called once, when this html/js is loaded.
function initializeConfigureDialog(args) {
// Allow platform specific rules
if (cr.isMac) {
document.documentElement.setAttribute('os', 'mac');
} else if (!cr.isWindows) {
document.documentElement.setAttribute('os', 'linux');
}
var datatypeSelect = document.getElementById('sync-select-datatypes');
datatypeSelect.onchange = function() {
var syncAll = this.selectedIndex == 0;
setCheckboxesToKeepEverythingSynced(syncAll);
document.getElementById('chooseDataTypesBody').hidden = syncAll;
};
if (args) {
setCheckboxesAndErrors(args);
// Whether to display the 'Sync everything' confirmation screen or the
// customize data types screen.
// TODO(jhawkins): Rename |keepEverythingSynced| to |syncAllDataTypes|.
var syncEverything = args['syncEverything'];
var syncAllDataTypes = args['keepEverythingSynced'];
var usePassphrase = args['usePassphrase'];
if (syncEverything == false || syncAllDataTypes == false ||
usePassphrase) {
showCustomizePage();
}
}
}
function showCustomizePage() {
document.getElementById('confirm-sync-preferences').hidden = true;
document.getElementById('customize-sync-preferences').hidden = false;
// If the user is shown the 'Customize' page, it's likely he intends to
// change the data types. Select the 'Choose data types' option in this
// case.
document.getElementById('sync-select-datatypes').selectedIndex = 1;
document.getElementById('chooseDataTypesBody').hidden = false;
setDataTypeCheckboxesEnabled(true);
}
function showSyncEverythingPage() {
document.getElementById('confirm-sync-preferences').hidden = false;
document.getElementById('customize-sync-preferences').hidden = true;
// The default state is to sync everything and to not use a custom
// passphrase.
setCheckboxesToKeepEverythingSynced(true);
document.getElementById("google-option").checked = true;
}
function setCheckboxesAndErrors(args) {
setChooseDataTypesCheckboxes(args);
setEncryptionCheckboxes(args);
setErrorState(args);
}
function checkAllDataTypeCheckboxes() {
var checkboxes = document.getElementsByName("dataTypeCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
// Only check the visible ones (since there's no way to uncheck
// the invisible ones).
if (checkboxes[i].parentElement.className == "sync-item-show") {
checkboxes[i].checked = true;
}
}
}
function setCheckboxesToKeepEverythingSynced(value) {
setDataTypeCheckboxesEnabled(!value);
if (value)
checkAllDataTypeCheckboxes();
}
// Can be called multiple times.
function setChooseDataTypesCheckboxes(args) {
// If this frame is on top, the focus should be on it, so pressing enter
// submits this form.
if (args.iframeToShow == 'configure') {
document.getElementById("okButton").focus();
}
var datatypeSelect = document.getElementById('sync-select-datatypes');
datatypeSelect.selectedIndex = args.keepEverythingSynced ? 0 : 1;
document.getElementById('chooseDataTypesBody').hidden =
args.keepEverythingSynced;
document.getElementById("bookmarksCheckbox").checked = args.syncBookmarks;
document.getElementById("preferencesCheckbox").checked =
args.syncPreferences;
document.getElementById("themesCheckbox").checked = args.syncThemes;
if (args.passwordsRegistered) {
document.getElementById("passwordsCheckbox").checked = args.syncPasswords;
document.getElementById("passwordsItem").className = "sync-item-show";
} else {
document.getElementById("passwordsItem").className = "sync-item-hide";
}
if (args.autofillRegistered) {
document.getElementById("autofillCheckbox").checked = args.syncAutofill;
document.getElementById("autofillItem").className = "sync-item-show";
} else {
document.getElementById("autofillItem").className = "sync-item-hide";
}
if (args.extensionsRegistered) {
document.getElementById("extensionsCheckbox").checked =
args.syncExtensions;
document.getElementById("extensionsItem").className = "sync-item-show";
} else {
document.getElementById("extensionsItem").className = "sync-item-hide";
}
if (args.typedUrlsRegistered) {
document.getElementById("typedUrlsCheckbox").checked = args.syncTypedUrls;
document.getElementById("omniboxItem").className = "sync-item-show";
} else {
document.getElementById("omniboxItem").className = "sync-item-hide";
}
if (args.appsRegistered) {
document.getElementById("appsCheckbox").checked =
args.syncApps;
document.getElementById("appsItem").className = "sync-item-show";
} else {
document.getElementById("appsItem").className = "sync-item-hide";
}
setCheckboxesToKeepEverythingSynced(args.keepEverythingSynced);
if (args.sessionsRegistered) {
document.getElementById("sessionsCheckbox").checked = args.syncSessions;
document.getElementById("sessionsItem").className = "sync-item-show";
} else {
document.getElementById("sessionsItem").className = "sync-item-hide";
}
}
function setEncryptionCheckboxes(args) {
if (args["usePassphrase"]) {
document.getElementById("explicit-option").checked = true;
// The passphrase, once set, cannot be unset, but we show a reset link.
document.getElementById("explicit-option").disabled = true;
document.getElementById("google-option").disabled = true;
document.getElementById("sync-custom-passphrase").hidden = true;
} else {
document.getElementById("google-option").checked = true;
}
switchToMode("");
}
function setErrorState(args) {
if (!args.was_aborted)
return;
document.getElementById("aborted-text").className = "sync-error-show";
document.getElementById("okButton").disabled = true;
document.getElementById("keepEverythingSyncedRadio").disabled = true;
document.getElementById("chooseDataTypesRadio").disabled = true;
}
function setDataTypeCheckboxesEnabled(enabled) {
var checkboxes = document.getElementsByName("dataTypeCheckbox");
var labels = document.getElementsByName("dataTypeLabel");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].disabled = !enabled;
if (checkboxes[i].disabled) {
labels[i].className = "sync-label-inactive";
} else {
labels[i].className = "sync-label-active";
}
}
}
// Returns true if at least one data type is enabled and no data types are
// checked. (If all data type checkboxes are disabled, it's because "keep
// everything synced" is checked.)
function noDataTypesChecked() {
var checkboxes = document.getElementsByName("dataTypeCheckbox");
var atLeastOneChecked = false;
var atLeastOneEnabled = false;
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].disabled &&
checkboxes[i].parentElement.className == "sync-item-show") {
atLeastOneEnabled = true;
if (checkboxes[i].checked) {
atLeastOneChecked = true;
}
}
}
return atLeastOneEnabled && !atLeastOneChecked;
}
function sendConfiguration() {
// Trying to submit, so hide previous errors.
document.getElementById("aborted-text").className = "sync-error-hide";
document.getElementById("error-text").className = "sync-error-hide";
if (noDataTypesChecked()) {
document.getElementById("error-text").className = "sync-error-show";
return;
}
var f = document.getElementById("chooseDataTypesForm");
if (!checkPassphraseMatch()) {
return false;
}
var syncAll =
document.getElementById('sync-select-datatypes').selectedIndex == 0;
// These values need to be kept in sync with where they are read in
// SyncSetupFlow::GetDataTypeChoiceData().
var result = JSON.stringify({
"keepEverythingSynced": syncAll,
"syncBookmarks": syncAll || f.bookmarksCheckbox.checked,
"syncPreferences": syncAll || f.preferencesCheckbox.checked,
"syncThemes": syncAll || f.themesCheckbox.checked,
"syncPasswords": syncAll || f.passwordsCheckbox.checked,
"syncAutofill": syncAll || f.autofillCheckbox.checked,
"syncExtensions": syncAll || f.extensionsCheckbox.checked,
"syncTypedUrls": syncAll || f.typedUrlsCheckbox.checked,
"syncApps": syncAll || f.appsCheckbox.checked,
"syncSessions": syncAll || f.sessionsCheckbox.checked,
"usePassphrase": (getRadioCheckedValue() == 'explicit'),
"passphrase": f.passphrase.value
});
chrome.send("Configure", [result]);
}
function switchToMode(mode) {
if (mode == "google")
document.getElementById("sync-custom-passphrase").hidden = true;
else if (mode =="explicit")
document.getElementById("sync-custom-passphrase").hidden = false;
}
function getRadioCheckedValue() {
var f = document.getElementById("chooseDataTypesForm");
for (var i = 0; i < f.option.length; ++i) {
if (f.option[i].checked) {
return f.option[i].value;
}
}
return undefined;
}
function onRadioChange() {
switchToMode(getRadioCheckedValue());
}
function checkPassphraseMatch() {
var emptyError = document.getElementById("emptyerror");
var mismatchError = document.getElementById("mismatcherror");
emptyError.style.display = "none";
mismatchError.style.display = "none";
var f = document.getElementById("chooseDataTypesForm");
if (getRadioCheckedValue() != "explicit" || f.option[0].disabled) {
return true;
}
if (f.passphrase.value.length == 0) {
emptyError.style.display = "block";
return false;
}
var confirmPassphrase = document.getElementById("confirm-passphrase");
var passphrase = document.getElementById("passphrase");
if (confirmPassphrase.value != passphrase.value) {
mismatchError.style.display = "block";
return false;
}
return true;
}
function goToDashboard() {
chrome.send("GoToDashboard", [""]);
chrome.send("DialogClose", [""]);
}
</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily"
onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));">
<div id="confirm-sync-preferences">
<div class="sync-header" i18n-content="confirmSyncPreferences"></div>
<div id="sync-instructions-container" class="content-area">
<span i18n-content="choosedatatypesinstructions"></span>
<a i18n-values="href:encryptionhelpurl" target="_blank"
i18n-content="learnmore"></a>
</div>
<div>
<div class="action-area">
<div class="action-area-link-container">
<a id="customize-link" href="#" i18n-content="customizelinklabel"
onclick="showCustomizePage();"></a>
</div>
<input id="okButton" type="button" i18n-values="value:syncEverything"
onclick="sendConfiguration();">
<input id="cancelButton" type="button" i18n-values="value:cancel"
onclick="chrome.send('DialogClose', [''])">
</div>
</div>
</div>
<div id="customize-sync-preferences" hidden>
<form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">
<div class="sync-header">Customize Sync Preferences</div>
<hr>
<div id="sync-configure-content" class="content-area">
<div id="sync-select-container">
<select id="sync-select-datatypes">
<option i18n-content="keepeverythingsynced"></option>
<option i18n-content="choosedatatypes" selected></option>
</select>
<div id="chooseDataTypesBody" hidden>
<div>
<!-- Apps -->
<div class="sync-item-show" id="appsItem">
<input id="appsCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="appsCheckboxLabel" name="dataTypeLabel"
for="appsCheckbox" i18n-content="apps"
i18n-values="title:apps"></label>
</div>
<!-- Autofill -->
<div class="sync-item-show" id="autofillItem">
<input id="autofillCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="autofillCheckboxLabel" name="dataTypeLabel"
for="autofillCheckbox" i18n-content="autofill"
i18n-values="title:autofill"></label>
</div>
<!-- Bookmarks -->
<div class="sync-item-show" id="bookmarksItem">
<input id="bookmarksCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="bookmarksCheckboxLabel" name="dataTypeLabel"
for="bookmarksCheckbox" i18n-content="bookmarks"
i18n-values="title:bookmarks"></label>
</div>
<!-- Extensions -->
<div class="sync-item-show" id="extensionsItem">
<input id="extensionsCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="extensionsCheckboxLabel" name="dataTypeLabel"
for="extensionsCheckbox" i18n-content="extensions"
i18n-values="title:extensions"></label>
</div>
<!-- Omnibox -->
<div class="sync-item-show" id="omniboxItem">
<input id="typedUrlsCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="typedUrlsCheckboxLabel" name="dataTypeLabel"
for="typedUrlsCheckbox" i18n-content="typedurls"
i18n-values="title:typedurls"></label>
</div>
<!-- Passwords -->
<div class="sync-item-show" id="passwordsItem">
<input id="passwordsCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="passwordsCheckboxLabel" name="dataTypeLabel"
for="passwordsCheckbox" i18n-content="passwords"
i18n-values="title:passwords"></label>
</div>
<!-- Preferences -->
<div class="sync-item-show" id="preferencesItem">
<input id="preferencesCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="preferencesCheckboxLabel" name="dataTypeLabel"
for="preferencesCheckbox" i18n-content="preferences"
i18n-values="title:preferences"></label>
</div>
<!-- Themes -->
<div class="sync-item-show" id="themesItem">
<input id="themesCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="themesCheckboxLabel" name="dataTypeLabel" for="themesCheckbox"
i18n-content="themes" i18n-values="title:themes"></label>
</div>
<!-- Sessions -->
<div class="sync-item-show" id="sessionsItem">
<input id="sessionsCheckbox" name="dataTypeCheckbox" type="checkbox">
<label id="sessionsCheckboxLabel" name="dataTypeLabel"
for="sessionsCheckbox" i18n-content="foreignsessions"
il8n-values="title:sessions"></label>
</div>
</div>
</div>
</div>
<div class="sync-errors">
<span id="error-text" i18n-content="synczerodatatypeserror"
class="sync-error-hide"></span>
<span id="aborted-text" i18n-content="abortederror"
class="sync-error-hide"></span>
</div>
<hr>
<h4 i18n-content="passphraseSectionTitle"></h4>
<div id="sync-passphrase-container">
<div>
<input id="google-option" name="option" type="radio" value="google"
onchange="onRadioChange();">
<label for="google-option" i18n-content="googleOption"></label>
</div>
<div>
<input id="explicit-option" name="option" type="radio"
value="explicit" onchange="onRadioChange();">
<label for="explicit-option" i18n-content="explicitOption"></label>
<a i18n-values="href:encryptionhelpurl" target="_blank"
i18n-content="learnmore"></a>
</div>
<div id="sync-custom-passphrase" hidden>
<div id="sync-passphrase-message">
<span i18n-content="sectionExplicitMessagePrefix"></span>
<a href="http://google.com/dashboard" target="_blank"
i18n-content="sectionExplicitMessagePostfix"></a>
<span>.</span>
</div>
<div class="sync-custom-passphrase-input">
<input id="passphrase" type="password"
i18n-values="placeholder:passphraseLabel">
</div>
<div class="sync-custom-passphrase-input">
<input id="confirm-passphrase" type="password"
i18n-values="placeholder:confirmLabel">
</div>
<div class="error" style="display:none"
id="emptyerror" i18n-content="emptyErrorMessage"></div>
<div class="error" style="display:none"
id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
</div>
</div>
<div class="action-area">
<div class="action-area-link-container">
<a id="use-default-link" href="#" i18n-content="useDefaultSettings"
onclick="showSyncEverythingPage();"></a>
</div>
<input id="okButton" type="submit" i18n-values="value:ok" />
<input id="cancelButton" type="button" i18n-values="value:cancel"
onclick='chrome.send("DialogClose", [""])' />
</div>
</div>
</form>
</div>
</body>
</html>