| <html i18n-values="dir:textdirection;"> |
| <head> |
| <title></title> |
| <style type="text/css"> |
| body { |
| line-height: 1.5em; |
| background: #FFFFFF; |
| font-size: 11pt; |
| } |
| html[os='mac'] body { |
| line-height: 1.5em; |
| background: #FFFFFF; |
| } |
| form { |
| -webkit-user-select: none; |
| } |
| .sync-header { |
| font-size: 1.2em; |
| font-weight: bold; |
| margin-bottom: 10px; |
| } |
| .sync-select-customization { |
| margin-top: 10px; |
| } |
| #chooseDataTypesRadio { |
| vertical-align: top; |
| } |
| #chooseDataTypes > div { |
| display: inline-block; |
| } |
| #chooseDataTypesBody { |
| width: 90%; |
| -webkit-margin-start: 3ex; |
| } |
| #chooseDataTypesBody > div { |
| margin-top: 0px; |
| -webkit-column-count: 2; |
| -webkit-column-gap: 10px; |
| column-count: 2; |
| column-gap: 10px; |
| } |
| |
| .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-top: 3px; |
| margin-left: 15px; |
| 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; |
| 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> |
| <script> |
| var currentTab; |
| |
| // 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'); |
| } |
| |
| if (args) { |
| currentTab = args['initialTab']; |
| switchToTab(currentTab); |
| setCheckboxesAndErrors(args); |
| } |
| } |
| |
| 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(); |
| } |
| |
| document.getElementById("keepEverythingSyncedRadio").checked = |
| args.keepEverythingSynced; |
| document.getElementById("chooseDataTypesRadio").checked = |
| !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("change-passphrase").style.display = "block"; |
| } else { |
| document.getElementById("google-option").checked = true; |
| document.getElementById("change-passphrase").style.display = "none"; |
| } |
| 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 = f.keepEverythingSyncedRadio.checked; |
| // 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 switchToTab(newTab) { |
| if (currentTab) { |
| document.getElementById(currentTab + "-tab").className = |
| "sync-config-tab-inactive"; |
| document.getElementById(currentTab + "-tab-contents").className = |
| "sync-config-tab-contents-inactive"; |
| } |
| |
| document.getElementById(newTab + "-tab").className = |
| "sync-config-tab-active"; |
| document.getElementById(newTab + "-tab-contents").className = |
| "sync-config-tab-contents-active"; |
| |
| currentTab = newTab; |
| } |
| |
| function switchToMode(mode) { |
| document.getElementById("section-explicit").style.display = "none"; |
| document.getElementById("section-google").style.display = "none"; |
| |
| if (mode == "google") { |
| document.getElementById("section-google").style.display = "block"; |
| } else if (mode =="explicit") { |
| document.getElementById("section-explicit").style.display = "block"; |
| } |
| } |
| |
| 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"; |
| |
| if (getRadioCheckedValue() != "explicit") { |
| return true; |
| } |
| var f = document.getElementById("chooseDataTypesForm"); |
| if (f.passphrase.value.length == 0) { |
| emptyError.style.display = "block"; |
| return false; |
| } |
| if (f.confirmpassphrase.value.length > 0 && |
| f.confirmpassphrase.value != f.passphrase.value) { |
| mismatchError.style.display = "block"; |
| return false; |
| } |
| return true; |
| } |
| |
| function sendValuesAndClose() { |
| var result = JSON.stringify({"option": getRadioCheckedValue(), |
| "passphrase": f.passphrase.value}); |
| chrome.send("FirstPassphrase", [result]); |
| } |
| |
| function goToDashboard() { |
| chrome.send("GoToDashboard", [""]); |
| chrome.send("DialogClose", [""]); |
| } |
| |
| </script> |
| </head> |
| <body i18n-values=".style.fontFamily:fontfamily" |
| onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));"> |
| <form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;"> |
| |
| <div class="sync-config-tabstrip"> |
| <div id="data-type-tab" class="sync-config-tab-inactive"> |
| <a href="#" onclick="switchToTab('data-type'); return false;" |
| i18n-content="dataTypes"></a> |
| </div> |
| <div id="encryption-tab" class="sync-config-tab-inactive"> |
| <a href="#" onclick="switchToTab('encryption'); return false;" |
| i18n-content="encryption"></a> |
| </div> |
| </div> |
| <div id="data-type-tab-contents" class="sync-config-tab-contents-inactive"> |
| |
| <div class="sync-header" |
| i18n-content="choosedatatypesheader"></div> |
| <div class="sync-choose_data_types_instructions" |
| i18n-content="choosedatatypesinstructions"></div> |
| <div class="sync-select-customization"> |
| <div class="sync-choice_radio"> |
| <input id="keepEverythingSyncedRadio" type="radio" |
| name="syncChooseDataTypes" |
| onclick="setCheckboxesToKeepEverythingSynced(true);"> |
| <label for="keepEverythingSyncedRadio" |
| i18n-content="keepeverythingsynced"> |
| </label> |
| </div> |
| <div id="chooseDataTypes" class="sync-choice_radio"> |
| <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes" |
| onclick="setCheckboxesToKeepEverythingSynced(false)"> |
| <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" ></label> |
| <div id="chooseDataTypesBody"> |
| <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> |
| </div> |
| |
| </div> |
| <div id="encryption-tab-contents" class="sync-config-tab-contents-inactive"> |
| <div id="sync-encryption-instructions" |
| i18n-content="encryptionInstructions"></div> |
| |
| <div> |
| <input id="google-option" name="option" type="radio" |
| value="google" onchange="onRadioChange();"> |
| <span i18n-content="googleOption"></span> |
| </input> |
| </div> |
| <div> |
| <input id="explicit-option" name="option" type="radio" |
| value="explicit" onchange="onRadioChange();"> |
| <span i18n-content="explicitOption"></span> |
| </input> |
| </div> |
| |
| <div class="sync-section" id="section-google"> |
| <div i18n-content="sectionGoogleMessage"></div> |
| </div> |
| <div class="sync-section" id="section-explicit"> |
| <div i18n-content="sectionExplicitMessage" id="explicit-message"></div> |
| <div> |
| <div i18n-content="passphraseLabel" id="passphraseLabel"></div> |
| <input id="passphrase" name="passphrase" label="passphraseLabel" |
| type="password" onkeyup="checkPassphraseMatch();" |
| onchange="checkPassphraseMatch();"/> |
| </div> |
| <div> |
| <div i18n-content="confirmLabel" id="confirmPassphraseLabel"> |
| </div> |
| <input id="confirmpassphrase" name="confirmpassphrase" type="password" |
| label="confirmPassphraseLabel" |
| onkeyup="checkPassphraseMatch();" |
| onchange="checkPassphraseMatch();" /> |
| </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 id="change-passphrase"> |
| <div id="sync-passphrase-warning" i18n-content="passphraseWarning"> |
| </div> |
| <div id="sync-reset-confirmation" i18n-content="cleardataconfirmation" |
| style="display: none;"> |
| </div> |
| <a id="clear-data-link" i18n-content="cleardatalink" href="#" |
| onclick='goToDashboard(); return false;'></a> |
| </div> |
| </div> |
| |
| <div class="sync-footer"> |
| <input id="okButton" type="submit" i18n-values="value:ok" /> |
| <input id="cancelButton" type="button" i18n-values="value:cancel" |
| onclick='chrome.send("DialogClose", [""])' /> |
| </div> |
| </form> |
| </body> |
| </html> |
