configure.html revision 72a454cd3513ac24fbdd0e0cb9ad70b86a99b801 
1<html i18n-values="dir:textdirection;">
2<head>
3<title></title>
4<style type="text/css">
5body {
6   line-height: 1.33em;
7   background: #FFFFFF;
8   font-size: 11pt;
9}
10html[os='mac'] body {
11  line-height: 1.5em;
12  background: #FFFFFF;
13}
14form {
15  -webkit-user-select: none;
16}
17.sync-header {
18  font-size: 1.2em;
19  font-weight: bold;
20  margin-bottom: 10px;
21}
22.sync-select-customization {
23  margin-top: 10px;
24}
25#chooseDataTypesRadio {
26  vertical-align: top;
27}
28#chooseDataTypes > div {
29  display: inline-block;
30}
31#chooseDataTypesBody {
32  width: 90%;
33  -webkit-margin-start: 3ex;
34}
35#chooseDataTypesBody > div {
36  margin-top: 0px;
37  -webkit-column-count: 2;
38  -webkit-column-gap: 10px;
39  column-count: 2;
40  column-gap: 10px;
41}
42
43.sync-config-tab-contents-inactive {
44  display: none;
45}
46.sync-config-tab-contents-active {
47  display: block;
48  margin: 10px 15px;
49}
50.sync-config-tabstrip {
51  border-bottom: 1px solid gray;
52  height: 25px;
53  margin-bottom: 10px;
54  padding-top: 10px;
55  background-color: #DDD;
56}
57.sync-config-tab-active {
58  background-color: white;
59  border-top: 1px solid gray;
60  border-left: 1px solid gray;
61  border-right: 1px solid gray;
62  border-top-left-radius: 5px 5px;
63  border-top-right-radius: 5px 5px;
64}
65
66.sync-config-tab-active,
67.sync-config-tab-inactive {
68  float: left;
69  height: 22px;
70  padding: 3px 5px 0px;
71  margin-left: 15px;
72  min-width: 100px;
73  text-align: center;
74}
75.sync-config-tab-active A,
76.sync-config-tab-inactive A,
77.sync-config-tab-active A:visited,
78.sync-config-tab-inactive A:visited,
79.sync-config-tab-active A:hover,
80.sync-config-tab-inactive A:hover {
81  color: black;
82  text-decoration: none;
83}
84
85#sync-encryption-instructions {
86  margin-bottom: 5px;
87}
88
89#sync-passphrase-warning {
90  margin-bottom: 5px;
91}
92
93#encryption-tab-contents > .sync_item_show {
94  margin-bottom: 5px;
95}
96
97.sync-item-show {
98  display: block;
99  white-space: nowrap;
100}
101
102.sync-item-show > label {
103 overflow: hidden;
104 white-space: nowrap;
105 text-overflow: ellipsis;
106 display: inline-block;
107 width: 92%;
108}
109
110.sync-item-hide {
111  display: none;
112}
113.sync-label-inactive {
114  color: #9B9B9B;
115}
116.sync-label-active {
117  color: #000000;
118}
119.sync-data-types {
120  margin-left: 5px;
121}
122.sync-errors {
123  margin-top: 5px;
124}
125.sync-error-show {
126  display: block;
127  width: 80%;
128  margin-left: auto;
129  margin-right: auto;
130  text-align: center;
131  padding: 1px 10px;
132  background-color: #eeb939;
133  border-radius: 4px;
134  font-weight: bold;
135}
136.sync-error-hide {
137  display: none;
138}
139.sync-footer {
140  position: fixed;
141  right: 0px;
142  bottom: 0px;
143  margin-right: 10px;
144  margin-bottom: 10px;
145}
146.sync-section {
147  background: #EEE;
148  margin: 5px 0px 5px 19px;
149  padding: 6px;
150}
151
152#explicit-message {
153  margin-bottom: 5px;
154}
155
156#learn-more-link {
157  float: right;
158}
159
160#change-passphrase {
161  margin: 10px 0;
162  background: #EEE;
163  padding: 8px;
164}
165
166#clear-data-button {
167  margin-top: 10px;
168}
169
170html[dir='rtl'] .sync-footer {
171  text-align: left;
172  left: 0px;
173  bottom: 0px;
174  margin-left: 20px;
175}
176
177input[type='button'],
178input[type='submit'] {
179  min-width: 87px;
180  min-height: 26px;
181}
182html[os='mac'] input[type='button'],
183html[os='mac'] input[type='submit'] {
184  font-size: 12pt;
185}
186
187</style>
188<script src="chrome://resources/js/cr.js"></script>
189<script>
190  var currentTab;
191
192  // Called once, when this html/js is loaded.
193  function initializeConfigureDialog(args) {
194    // Allow platform specific rules
195    if (cr.isMac) {
196      document.documentElement.setAttribute('os', 'mac');
197    } else if (!cr.isWindows) {
198      document.documentElement.setAttribute('os', 'linux');
199    }
200
201    if (args) {
202      currentTab = args['initialTab'];
203      switchToTab(currentTab);
204      setCheckboxesAndErrors(args);
205    }
206  }
207
208  function setCheckboxesAndErrors(args) {
209    setChooseDataTypesCheckboxes(args);
210    setEncryptionCheckboxes(args);
211    setErrorState(args);
212  }
213
214  function checkAllDataTypeCheckboxes() {
215    var checkboxes = document.getElementsByName("dataTypeCheckbox");
216    for (var i = 0; i < checkboxes.length; i++) {
217      // Only check the visible ones (since there's no way to uncheck
218      // the invisible ones).
219      if (checkboxes[i].parentElement.className == "sync-item-show") {
220        checkboxes[i].checked = true;
221      }
222    }
223  }
224
225  function setCheckboxesToKeepEverythingSynced(value) {
226    setDataTypeCheckboxesEnabled(!value);
227    if (value)
228      checkAllDataTypeCheckboxes();
229  }
230
231  // Can be called multiple times.
232  function setChooseDataTypesCheckboxes(args) {
233    // If this frame is on top, the focus should be on it, so pressing enter
234    // submits this form.
235    if (args.iframeToShow == 'configure') {
236      document.getElementById("okButton").focus();
237    }
238
239    document.getElementById("keepEverythingSyncedRadio").checked =
240        args.keepEverythingSynced;
241    document.getElementById("chooseDataTypesRadio").checked =
242        !args.keepEverythingSynced;
243
244    document.getElementById("bookmarksCheckbox").checked = args.syncBookmarks;
245    document.getElementById("preferencesCheckbox").checked =
246        args.syncPreferences;
247    document.getElementById("themesCheckbox").checked = args.syncThemes;
248
249    if (args.passwordsRegistered) {
250      document.getElementById("passwordsCheckbox").checked = args.syncPasswords;
251      document.getElementById("passwordsItem").className = "sync-item-show";
252    } else {
253      document.getElementById("passwordsItem").className = "sync-item-hide";
254    }
255    if (args.autofillRegistered) {
256      document.getElementById("autofillCheckbox").checked = args.syncAutofill;
257      document.getElementById("autofillItem").className = "sync-item-show";
258    } else {
259      document.getElementById("autofillItem").className = "sync-item-hide";
260    }
261    if (args.extensionsRegistered) {
262      document.getElementById("extensionsCheckbox").checked =
263          args.syncExtensions;
264      document.getElementById("extensionsItem").className = "sync-item-show";
265    } else {
266      document.getElementById("extensionsItem").className = "sync-item-hide";
267    }
268    if (args.typedUrlsRegistered) {
269      document.getElementById("typedUrlsCheckbox").checked = args.syncTypedUrls;
270      document.getElementById("omniboxItem").className = "sync-item-show";
271    } else {
272      document.getElementById("omniboxItem").className = "sync-item-hide";
273    }
274    if (args.appsRegistered) {
275      document.getElementById("appsCheckbox").checked =
276          args.syncApps;
277      document.getElementById("appsItem").className = "sync-item-show";
278    } else {
279      document.getElementById("appsItem").className = "sync-item-hide";
280    }
281
282    setCheckboxesToKeepEverythingSynced(args.keepEverythingSynced);
283    if (args.sessionsRegistered) {
284      document.getElementById("sessionsCheckbox").checked = args.syncSessions;
285      document.getElementById("sessionsItem").className = "sync-item-show";
286    } else {
287      document.getElementById("sessionsItem").className = "sync-item-hide";
288    }
289  }
290
291  function setEncryptionCheckboxes(args) {
292    if (args["usePassphrase"]) {
293      document.getElementById("explicit-option").checked = true;
294
295      // The passphrase, once set, cannot be unset, but we show a reset link.
296      document.getElementById("explicit-option").disabled = true;
297      document.getElementById("google-option").disabled = true;
298      document.getElementById("change-passphrase").style.display = "block";
299    } else {
300      document.getElementById("google-option").checked = true;
301      document.getElementById("change-passphrase").style.display = "none";
302    }
303    switchToMode("");
304  }
305
306  function setErrorState(args) {
307    if (!args.was_aborted)
308      return;
309    document.getElementById("aborted_text").className = "sync-error-show";
310    document.getElementById("okButton").disabled = true;
311    document.getElementById("keepEverythingSyncedRadio").disabled = true;
312    document.getElementById("chooseDataTypesRadio").disabled = true;
313  }
314
315  function setDataTypeCheckboxesEnabled(enabled) {
316    var checkboxes = document.getElementsByName("dataTypeCheckbox");
317    var labels = document.getElementsByName("dataTypeLabel");
318    for (var i = 0; i < checkboxes.length; i++) {
319      checkboxes[i].disabled = !enabled;
320      if (checkboxes[i].disabled) {
321        labels[i].className = "sync-label-inactive";
322      } else {
323        labels[i].className = "sync-label-active";
324      }
325    }
326  }
327
328
329
330  // Returns true if at least one data type is enabled and no data types are
331  // checked.  (If all data type checkboxes are disabled, it's because "keep
332  // everything synced" is checked.)
333  function noDataTypesChecked() {
334    var checkboxes = document.getElementsByName("dataTypeCheckbox");
335    var atLeastOneChecked = false;
336    var atLeastOneEnabled = false;
337    for (var i = 0; i < checkboxes.length; i++) {
338      if (!checkboxes[i].disabled &&
339          checkboxes[i].parentElement.className == "sync-item-show") {
340        atLeastOneEnabled = true;
341        if (checkboxes[i].checked) {
342          atLeastOneChecked = true;
343        }
344      }
345    }
346    return atLeastOneEnabled && !atLeastOneChecked;
347  }
348
349  function sendConfiguration() {
350    // Trying to submit, so hide previous errors.
351    document.getElementById("aborted_text").className = "sync-error-hide";
352    document.getElementById("error_text").className = "sync-error-hide";
353
354    if (noDataTypesChecked()) {
355      document.getElementById("error_text").className = "sync-error-show";
356      return;
357    }
358
359    var f = document.getElementById("chooseDataTypesForm");
360    if (!checkPassphraseMatch()) {
361      return false;
362    }
363
364    var syncAll = f.keepEverythingSyncedRadio.checked;
365    // These values need to be kept in sync with where they are read in
366    // SyncSetupFlow::GetDataTypeChoiceData().
367    var result = JSON.stringify({
368        "keepEverythingSynced": syncAll,
369        "syncBookmarks": syncAll || f.bookmarksCheckbox.checked,
370        "syncPreferences": syncAll || f.preferencesCheckbox.checked,
371        "syncThemes": syncAll || f.themesCheckbox.checked,
372        "syncPasswords": syncAll || f.passwordsCheckbox.checked,
373        "syncAutofill": syncAll || f.autofillCheckbox.checked,
374        "syncExtensions": syncAll || f.extensionsCheckbox.checked,
375        "syncTypedUrls": syncAll || f.typedUrlsCheckbox.checked,
376        "syncApps": syncAll || f.appsCheckbox.checked,
377        "syncSessions": syncAll || f.sessionsCheckbox.checked,
378        "usePassphrase": (getRadioCheckedValue() == 'explicit'),
379        "passphrase": f.passphrase.value
380    });
381    chrome.send("Configure", [result]);
382  }
383
384  function switchToTab(newTab) {
385    if (currentTab) {
386      document.getElementById(currentTab + "-tab").className =
387          "sync-config-tab-inactive";
388      document.getElementById(currentTab + "-tab-contents").className =
389          "sync-config-tab-contents-inactive";
390    }
391
392    // Default to the 'Data Types' tab.
393    if (!newTab)
394      newTab = "data-type";
395
396    document.getElementById(newTab + "-tab").className =
397        "sync-config-tab-active";
398    document.getElementById(newTab + "-tab-contents").className =
399        "sync-config-tab-contents-active";
400
401    currentTab = newTab;
402  }
403
404  function switchToMode(mode) {
405    document.getElementById("section-explicit").style.display = "none";
406    document.getElementById("section-google").style.display = "none";
407
408    if (mode == "google") {
409      document.getElementById("section-google").style.display = "block";
410    } else if (mode =="explicit") {
411      document.getElementById("section-explicit").style.display = "block";
412    }
413  }
414
415  function getRadioCheckedValue() {
416    var f = document.getElementById("chooseDataTypesForm");
417    for (var i = 0; i < f.option.length; ++i) {
418      if (f.option[i].checked) {
419        return f.option[i].value;
420      }
421    }
422    return undefined;
423  }
424
425  function onRadioChange() {
426    switchToMode(getRadioCheckedValue());
427  }
428
429  function checkPassphraseMatch() {
430    var emptyError = document.getElementById("emptyerror");
431    var mismatchError = document.getElementById("mismatcherror");
432    emptyError.style.display = "none";
433    mismatchError.style.display = "none";
434
435    var f = document.getElementById("chooseDataTypesForm");
436    if (getRadioCheckedValue() != "explicit" || f.option[0].disabled) {
437      return true;
438    }
439    if (f.passphrase.value.length == 0) {
440      emptyError.style.display = "block";
441      return false;
442    }
443    if (f.confirmpassphrase.value != f.passphrase.value) {
444      mismatchError.style.display = "block";
445      return false;
446    }
447    return true;
448  }
449
450  function goToDashboard() {
451    chrome.send("GoToDashboard", [""]);
452    chrome.send("DialogClose", [""]);
453  }
454
455</script>
456</head>
457<body i18n-values=".style.fontFamily:fontfamily"
458      onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));">
459<form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">
460
461  <div class="sync-config-tabstrip">
462    <div id="data-type-tab" class="sync-config-tab-inactive">
463      <a href="#" onclick="switchToTab('data-type'); return false;"
464         i18n-content="dataTypes"></a>
465    </div>
466    <div id="encryption-tab" class="sync-config-tab-inactive">
467      <a href="#" onclick="switchToTab('encryption'); return false;"
468         i18n-content="encryption"></a>
469    </div>
470  </div>
471  <div id="data-type-tab-contents" class="sync-config-tab-contents-inactive">
472
473    <div class="sync-header"
474         i18n-content="choosedatatypesheader"></div>
475    <div class="sync-choose_data_types_instructions"
476         i18n-content="choosedatatypesinstructions"></div>
477    <div class="sync-select-customization">
478      <div class="sync-choice_radio">
479        <input id="keepEverythingSyncedRadio" type="radio"
480               name="syncChooseDataTypes"
481               onclick="setCheckboxesToKeepEverythingSynced(true);">
482        <label for="keepEverythingSyncedRadio"
483               i18n-content="keepeverythingsynced">
484        </label>
485      </div>
486      <div id="chooseDataTypes" class="sync-choice_radio">
487        <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes"
488               onclick="setCheckboxesToKeepEverythingSynced(false)">
489        <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" ></label>
490        <div id="chooseDataTypesBody">
491          <div>
492            <!-- Apps -->
493            <div class="sync-item-show" id="appsItem">
494              <input id="appsCheckbox" name="dataTypeCheckbox" type="checkbox">
495              <label id="appsCheckboxLabel" name="dataTypeLabel"
496                     for="appsCheckbox" i18n-content="apps"
497                     i18n-values="title:apps"></label>
498            </div>
499            <!-- Autofill -->
500            <div class="sync-item-show" id="autofillItem">
501              <input id="autofillCheckbox" name="dataTypeCheckbox" type="checkbox">
502              <label id="autofillCheckboxLabel" name="dataTypeLabel"
503                     for="autofillCheckbox" i18n-content="autofill"
504                     i18n-values="title:autofill"></label>
505            </div>
506            <!-- Bookmarks -->
507            <div class="sync-item-show" id="bookmarksItem">
508              <input id="bookmarksCheckbox" name="dataTypeCheckbox" type="checkbox">
509              <label id="bookmarksCheckboxLabel" name="dataTypeLabel"
510                     for="bookmarksCheckbox" i18n-content="bookmarks"
511                     i18n-values="title:bookmarks"></label>
512            </div>
513            <!-- Extensions -->
514            <div class="sync-item-show" id="extensionsItem">
515              <input id="extensionsCheckbox" name="dataTypeCheckbox" type="checkbox">
516              <label id="extensionsCheckboxLabel" name="dataTypeLabel"
517                     for="extensionsCheckbox" i18n-content="extensions"
518                     i18n-values="title:extensions"></label>
519            </div>
520            <!-- Omnibox -->
521            <div class="sync-item-show" id="omniboxItem">
522              <input id="typedUrlsCheckbox" name="dataTypeCheckbox" type="checkbox">
523              <label id="typedUrlsCheckboxLabel" name="dataTypeLabel"
524                     for="typedUrlsCheckbox" i18n-content="typedurls"
525                     i18n-values="title:typedurls"></label>
526            </div>
527            <!-- Passwords -->
528            <div class="sync-item-show" id="passwordsItem">
529              <input id="passwordsCheckbox" name="dataTypeCheckbox" type="checkbox">
530              <label id="passwordsCheckboxLabel" name="dataTypeLabel"
531                     for="passwordsCheckbox" i18n-content="passwords"
532                     i18n-values="title:passwords"></label>
533            </div>
534            <!-- Preferences -->
535            <div class="sync-item-show" id="preferencesItem">
536              <input id="preferencesCheckbox" name="dataTypeCheckbox" type="checkbox">
537              <label id="preferencesCheckboxLabel" name="dataTypeLabel"
538                     for="preferencesCheckbox" i18n-content="preferences"
539                     i18n-values="title:preferences"></label>
540            </div>
541            <!-- Themes -->
542            <div class="sync-item-show" id="themesItem">
543              <input id="themesCheckbox" name="dataTypeCheckbox" type="checkbox">
544              <label id="themesCheckboxLabel" name="dataTypeLabel" for="themesCheckbox"
545                     i18n-content="themes" i18n-values="title:themes"></label>
546            </div>
547            <!-- Sessions -->
548            <div class="sync-item-show" id="sessionsItem">
549              <input id="sessionsCheckbox" name="dataTypeCheckbox" type="checkbox">
550              <label id="sessionsCheckboxLabel" name="dataTypeLabel"
551                     for="sessionsCheckbox" i18n-content="foreignsessions"
552                     il8n-values="title:sessions"></label>
553            </div>
554          </div>
555        </div>
556      </div>
557      <div class="sync-errors">
558        <span id="error_text" i18n-content="synczerodatatypeserror"
559              class="sync-error-hide"></span>
560        <span id="aborted_text" i18n-content="abortederror"
561              class="sync-error-hide"></span>
562      </div>
563    </div>
564
565  </div>
566  <div id="encryption-tab-contents" class="sync-config-tab-contents-inactive">
567    <div id="sync-encryption-instructions"
568         i18n-content="encryptionInstructions"></div>
569
570    <div>
571      <input id="google-option" name="option" type="radio"
572             value="google" onchange="onRadioChange();">
573      <label for="google-option" i18n-content="googleOption"></label>
574    </input>
575    </div>
576    <div>
577      <input id="explicit-option" name="option" type="radio" value="explicit"
578             onchange="onRadioChange();">
579      <div id="learn-more-link">
580        <a i18n-values="href:encryptionhelpurl" target="_blank"
581           i18n-content="learnmore"></a>
582      </div>
583      <label for="explicit-option" i18n-content="explicitOption"></label>
584    </input>
585    </div>
586
587    <div class="sync-section" id="section-google">
588      <div i18n-content="sectionGoogleMessage"></div>
589    </div>
590    <div class="sync-section" id="section-explicit">
591      <div i18n-content="sectionExplicitMessage" id="explicit-message"></div>
592      <div>
593        <div i18n-content="passphraseLabel" id="passphraseLabel"></div>
594        <input id="passphrase" name="passphrase" label="passphraseLabel"
595               type="password" />
596      </div>
597      <div>
598        <div i18n-content="confirmLabel" id="confirmPassphraseLabel">
599        </div>
600        <input id="confirmpassphrase" name="confirmpassphrase" type="password"
601               label="confirmPassphraseLabel" />
602      </div>
603      <div class="error" style="display:none"
604           id="emptyerror" i18n-content="emptyErrorMessage"></div>
605      <div class="error" style="display:none"
606           id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
607    </div>
608
609    <div id="change-passphrase">
610      <div id="sync-passphrase-warning" i18n-content="passphraseWarning">
611      </div>
612      <a id="clear-data-link" i18n-content="cleardatalink" href="#"
613             onclick='goToDashboard(); return false;'></a>
614    </div>
615  </div>
616
617  <div class="sync-footer">
618    <input id="okButton" type="submit" i18n-values="value:ok" />
619    <input id="cancelButton" type="button" i18n-values="value:cancel"
620           onclick='chrome.send("DialogClose", [""])' />
621  </div>
622</form>
623</body>
624</html>
625