| <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; |
| } |
| .error { |
| color: red; |
| font-size: 10pt; |
| } |
| .sync-header { |
| font-size: 1.2em; |
| font-weight: bold; |
| margin-bottom: 10px; |
| } |
| .sync-instructions { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| .sync-footer { |
| position: fixed; |
| right: 0px; |
| bottom: 0px; |
| margin-right: 10px; |
| margin-bottom: 10px; |
| } |
| .sync-section { |
| background: #EEE; |
| margin: 5px; |
| padding: 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; |
| } |
| |
| #passphrase { |
| margin-top: 5px; |
| } |
| |
| #passphraseLabel, |
| #confirmPassphraseLabel { |
| width: 145px; |
| float: left; |
| text-align: right; |
| margin-right: 4px; |
| padding-top: 3px; |
| } |
| |
| </style> |
| <script src="chrome://resources/js/cr.js"></script> |
| <script> |
| var currentMode; |
| |
| // Called once, when this html/js is loaded. |
| function setupDialog(args) { |
| // Allow platform specific rules |
| if (cr.isMac) { |
| document.documentElement.setAttribute('os', 'mac'); |
| } else if (!cr.isWindows) { |
| document.documentElement.setAttribute('os', 'linux'); |
| } |
| |
| switchToMode(""); |
| } |
| |
| function switchToMode(mode) { |
| document.getElementById("section-explicit").style.display = "none"; |
| document.getElementById("section-nothanks").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"; |
| } else if (mode == "nothanks") { |
| document.getElementById("section-nothanks").style.display = "block"; |
| } |
| } |
| |
| function getRadioCheckedValue() { |
| var f = document.getElementById("form"); |
| 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("form"); |
| 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 f = document.getElementById("form"); |
| if (!checkPassphraseMatch()) { |
| return false; |
| } |
| |
| var result = JSON.stringify({"option": getRadioCheckedValue(), |
| "passphrase": f.passphrase.value}); |
| chrome.send("FirstPassphrase", [result]); |
| } |
| </script> |
| </head> |
| <body i18n-values=".style.fontFamily:fontfamily" onload="setupDialog();"> |
| <form id="form" onSubmit="sendValuesAndClose(); return false;"> |
| <div class="sync-header" id="title" i18n-content="title"></div> |
| <div class="sync-instructions" id="instructions" |
| i18n-content="instructions"></div> |
| <div> |
| <input name="option" type="radio" value="google" onchange="onRadioChange();"> |
| <span i18n-content="googleOption"></span> |
| </input> |
| </div> |
| <div> |
| <input name="option" type="radio" value="explicit" onchange="onRadioChange();"> |
| <span i18n-content="explicitOption"></span> |
| </input> |
| </div> |
| <div> |
| <input name="option" type="radio" value="nothanks" onchange="onRadioChange();"> |
| <span i18n-content="nothanksOption"></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"></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 class="sync-section" id="section-nothanks"> |
| <div i18n-content="sectionNothanksMessage"></div> |
| </div> |
| |
| <div class="sync-footer"> |
| <input id="okButton" type="submit" i18n-values="value:ok" /> |
| </div> |
| </form> |
| </body> |
| </html> |
