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