Add UI for setting the encryption passphrase....

chrome/browser/sync/resources/configure.html

Index: chrome/browser/sync/resources/configure.html
===================================================================
--- chrome/browser/sync/resources/configure.html	(revision 61524)
+++ chrome/browser/sync/resources/configure.html	(working copy)
@@ -5,12 +5,10 @@
 body {
    line-height: 1.5em;
    background: #FFFFFF;
-   margin: 10px 15px;
    font-size: 11pt;
 }
 html[os='mac'] body {
   line-height: 1.5em;
-  margin: 15px 20px;
   background: #FFFFFF;
 }
 form {
@@ -41,6 +39,63 @@
   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: 10px;
+  line-height: 1.8em;
+}
+
+#sync-passphrase-warning {
+  font-style: italic;
+  line-height: 1.8em;
+}
+
+#encryption-tab-contents > .sync_item_show {
+  margin-bottom: 5px;
+}
+
 .sync-item-show {
   display: block;
   white-space: nowrap;
@@ -96,14 +151,7 @@
   bottom: 0px;
   margin-left: 20px;
 }
-#throb {
-  background-image: url("../../../../app/resources/throbber.png");
-  width: 16px;
-  height: 16px;
-  background-position: 0px;
-  margin: -3px 10px;
-  display: inline-block;
-}
+
 input[type='button'],
 input[type='submit'] {
   min-width: 87px;
@@ -117,9 +165,10 @@
 </style>
 <script src="chrome://resources/js/cr.js"></script>
 <script>
+  var currentTab;
 
   // Called once, when this html/js is loaded.
-  function initializeChooseDataTypesDialog() {
+  function initializeConfigureDialog(args) {
     // Allow platform specific rules
     if (cr.isMac) {
       document.documentElement.setAttribute('os', 'mac');
@@ -127,20 +176,21 @@
       document.documentElement.setAttribute('os', 'linux');
     }
 
-    setInterval(advanceThrobber, 30);
-    var args = JSON.parse(chrome.dialogArguments);
-    setChooseDataTypesCheckboxes(args);
+    if (args) {
+      currentTab = args['initialTab'];
+      switchToTab(currentTab);
+      setCheckboxesAndErrors(args);
+    }
   }
 
   function setCheckboxesAndErrors(args) {
     setChooseDataTypesCheckboxes(args);
+    setEncryptionCheckboxes(args);
     setErrorState(args);
   }
 
   // Can be called multiple times.
   function setChooseDataTypesCheckboxes(args) {
-    setStateThrobbing(false);
-
     // If this frame is on top, the focus should be on it, so pressing enter
     // submits this form.
     if (args.iframeToShow == 'choose_data_types') {
@@ -192,6 +242,16 @@
     }
   }
 
+  function setEncryptionCheckboxes(args) {
+    document.getElementById("usePassphraseCheckbox").checked =
+        args["usePassphrase"];
+
+    // The passphrase, once set, cannot be unset.
+    if (args["usePassphrase"]) {
+      document.getElementById("usePassphraseCheckbox").disabled = true;
+    }
+  }
+
   function setErrorState(args) {
     if (!args.was_aborted)
       return;
@@ -214,23 +274,6 @@
     }
   }
 
-  function advanceThrobber() {
-    var throbber = document.getElementById('throb');
-    throbber.style.backgroundPositionX =
-        ((parseInt(getComputedStyle(throbber).backgroundPositionX) - 16) %
-        576) + 'px';
-  }
-
-  function setStateThrobbing(isThrobbing) {
-    var throbberContainer = document.getElementById('throbber_container');
-    throbberContainer.style.visibility = isThrobbing ? "visible" : "hidden";
-
-    var okButton = document.getElementById('okButton');
-    okButton.disabled = isThrobbing || templateData["was_aborted"];
-    okButton.value = isThrobbing ? templateData['settingup'] :
-        templateData['ok'];
-  }
-
   // 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.)
@@ -249,7 +292,7 @@
     return atLeastOneEnabled && !atLeastOneChecked;
   }
 
-  function sendChooseDataTypesAndClose() {
+  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";
@@ -259,8 +302,6 @@
       return;
     }
 
-    setStateThrobbing(true);
-
     var f = document.getElementById("chooseDataTypesForm");
     var syncAll = f.keepEverythingSyncedRadio.checked;
     // These values need to be kept in sync with where they are read in
@@ -274,108 +315,153 @@
         "syncAutofill": syncAll || f.autofillCheckbox.checked,
         "syncExtensions": syncAll || f.extensionsCheckbox.checked,
         "syncTypedUrls": syncAll || f.typedUrlsCheckbox.checked,
-        "syncApps": syncAll || f.appsCheckbox.checked
+        "syncApps": syncAll || f.appsCheckbox.checked,
+        "usePassphrase": document.getElementById("usePassphraseCheckbox").checked
     });
-    chrome.send("ChooseDataTypes", [result]);
+    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;
+  }
+
 </script>
 </head>
 <body i18n-values=".style.fontFamily:fontfamily"
-      onload="initializeChooseDataTypesDialog();">
-<form id="chooseDataTypesForm" 
-      onSubmit="sendChooseDataTypesAndClose(); return false;">
+      onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));">
+<form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">
 
- <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="setDataTypeCheckboxesEnabled(false)">
-   <label for="keepEverythingSyncedRadio" i18n-content="keepeverythingsynced">
-   </label>
- </div>
- <div id="chooseDataTypes" class="sync-choice_radio">
-   <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes" 
-          onclick="setDataTypeCheckboxesEnabled(true)">
-   <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>
+  <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="setDataTypeCheckboxesEnabled(false)">
+        <label for="keepEverythingSyncedRadio"
+               i18n-content="keepeverythingsynced">
+        </label>
+      </div>
+      <div id="chooseDataTypes" class="sync-choice_radio">
+        <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes" 
+               onclick="setDataTypeCheckboxesEnabled(true)">
+        <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>
+          </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>
- <div class="sync-errors">
-   <span id="error_text" i18n-content="synczerodatatypeserror"
-         class="sync-error-hide"></span>
-   <span id="aborted_text" i18n-content="setupabortederror"
-         class="sync-error-hide"></span>
- </div>
- <div class="sync-footer">
-   <span id="throbber_container" style="visibility:hidden">
-     <span id="throb"></span>
-   </span>
-   <input id="okButton" type="submit" i18n-values="value:ok" />
-   <input id="cancelButton" type="button" i18n-values="value:cancel"
-             onclick='chrome.send("DialogClose", [""])' />
- </div>
-</div>
+  <div id="encryption-tab-contents" class="sync-config-tab-contents-inactive">
+    <div id="sync-encryption-instructions" 
+         i18n-content="encryptionInstructions"></div>
+    
+    <div class="sync-item-show" id="usePassphrase">
+      <input id="usePassphraseCheckbox" name="usePassphraseCheckbox"
+             type="checkbox" />
+      <label id="usePassphraseLabel" name="usePassphraseLabel"
+             for="usePassphraseCheckbox" i18n-content="usePassphraseLabel">
+      </label>
+    </div>
+    
+    <div id="sync-passphrase-warning" i18n-content="passphraseWarning">
+    </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>
Property changes on: chrome/browser/sync/resources/configure.html
___________________________________________________________________
Added: svn:mergeinfo