Commits

Philipp von Weitershausen committed 9ec78f9

Bug 590805 - Sync UI: Revamp setup wizard (part 4), r=mconnor a=blocking2.0

Change flow of setup wizard

Comments (0)

Files changed (10)

browser/base/content/syncSetup.js

 const INTRO_PAGE                    = 0;
 const NEW_ACCOUNT_START_PAGE        = 1;
 const NEW_ACCOUNT_PP_PAGE           = 2;
-const NEW_ACCOUNT_PREFS_PAGE        = 3;
-const NEW_ACCOUNT_CAPTCHA_PAGE      = 4;
-const EXISTING_ACCOUNT_LOGIN_PAGE   = 5;
-const EXISTING_ACCOUNT_PP_PAGE      = 6;
-const EXISTING_ACCOUNT_MERGE_PAGE   = 7;
-const EXISTING_ACCOUNT_CONFIRM_PAGE = 8;
-const SETUP_SUCCESS_PAGE            = 9;
+const NEW_ACCOUNT_CAPTCHA_PAGE      = 3;
+const EXISTING_ACCOUNT_LOGIN_PAGE   = 4;
+const EXISTING_ACCOUNT_PP_PAGE      = 5;
+const OPTIONS_PAGE                  = 6;
+const OPTIONS_CONFIRM_PAGE          = 7;
+const SETUP_SUCCESS_PAGE            = 8;
 
 Cu.import("resource://services-sync/main.js");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
     if (window.arguments && window.arguments[0] == true) {
       // we're resetting sync
       this._resettingSync = true;
-      this.wizard.pageIndex = EXISTING_ACCOUNT_MERGE_PAGE;
+      this.wizard.pageIndex = OPTIONS_PAGE;
     }
     else {
       this.wizard.canAdvance = false;
       this.captchaBrowser.addProgressListener(this);
       Weave.Svc.Prefs.set("firstSync", "notReady");
     }
-  },
 
-  updateSyncPrefs: function () {
-    let syncEverything = document.getElementById("weaveSyncMode").selectedItem.value == "syncEverything";
-    document.getElementById("syncModeOptions").selectedIndex = syncEverything ? 0 : 1;
+    this.wizard.getButton("extra1").label =
+      this._stringBundle.GetStringFromName("button.syncOptions.label");
 
-    if (syncEverything) {
-      document.getElementById("engine.bookmarks").checked = true;
-      document.getElementById("engine.passwords").checked = true;
-      document.getElementById("engine.history").checked   = true;
-      document.getElementById("engine.tabs").checked      = true;
-      document.getElementById("engine.prefs").checked     = true;
-    }
+    // Remember these values because the options pages change them temporarily.
+    this._nextButtonLabel = this.wizard.getButton("next").label;
+    this._nextButtonAccesskey = this.wizard.getButton("next")
+                                           .getAttribute("accesskey");
+    this._backButtonLabel = this.wizard.getButton("back").label;
+    this._backButtonAccesskey = this.wizard.getButton("back")
+                                           .getAttribute("accesskey");
   },
 
   startNewAccountSetup: function () {
     }
   },
 
-  handleExpanderClick: function (event) {
-    let expander = document.getElementById("setupAccountExpander");
-    let expand = expander.className == "expander-down";
-    expander.className =
-       expand ? "expander-up" : "expander-down";
-    document.getElementById("signInBox").hidden = !expand;
-  },
-
   setupInitialSync: function () {
     let action = document.getElementById("mergeChoiceRadio").selectedItem.id;
     switch (action) {
       case INTRO_PAGE:
         this.wizard.getButton("next").hidden = true;
         this.wizard.getButton("back").hidden = true;
-        this.wizard.getButton("cancel").label =
-          this._stringBundle.GetStringFromName("cancelSetup.label");
+        this.wizard.getButton("extra1").hidden = true;
         break;
       case NEW_ACCOUNT_PP_PAGE:
         let el = document.getElementById("weavePassphrase");
         this.checkFields();
         break;
       case NEW_ACCOUNT_START_PAGE:
+        this.wizard.getButton("extra1").hidden = false;
         this.onServerChange();
-        this.checkFields(); // fall through
+        // fall through
       case EXISTING_ACCOUNT_LOGIN_PAGE:
-      case EXISTING_ACCOUNT_MERGE_PAGE:
+        this.checkFields();
         this.wizard.getButton("next").hidden = false;
         this.wizard.getButton("back").hidden = false;
-        this.wizard.canRewind = !this._resettingSync;
+        this.wizard.getButton("extra1").hidden = false;
+        this.wizard.canRewind = true;
         break;
       case SETUP_SUCCESS_PAGE:
         this.wizard.canRewind = false;
         this.wizard.getButton("back").hidden = true;
+        this.wizard.getButton("next").hidden = true;
         this.wizard.getButton("cancel").hidden = true;
+        this.wizard.getButton("finish").hidden = false;
+        this._handleSuccess();
+        break;
+      case OPTIONS_PAGE:
+        this.wizard.canRewind = false;
+        this.wizard.canAdvance = true;
+        if (!this._resettingSync) {
+          this.wizard.getButton("next").label =
+            this._stringBundle.GetStringFromName("button.syncOptionsDone.label");
+          this.wizard.getButton("next").removeAttribute("accesskey");
+        }
+        this.wizard.getButton("next").hidden = false;
+        this.wizard.getButton("back").hidden = true;
+        this.wizard.getButton("cancel").hidden = !this._resettingSync;
+        this.wizard.getButton("extra1").hidden = true;
+        document.getElementById("syncComputerName").value = Weave.Clients.localName;
+        document.getElementById("syncOptions").collapsed = this._resettingSync;
+        document.getElementById("mergeOptions").collapsed = this._settingUpNew;
+        break;
+      case OPTIONS_CONFIRM_PAGE:
+        this.wizard.canRewind = true;
+        this.wizard.canAdvance = true;
+        this.wizard.getButton("back").label =
+          this._stringBundle.GetStringFromName("button.syncOptionsCancel.label");
+        this.wizard.getButton("back").removeAttribute("accesskey");
+        this.wizard.getButton("back").hidden = this._resettingSync;
+        this.wizard.getButton("next").hidden = false;
+        this.wizard.getButton("finish").hidden = true;
         break;
     }
   },
       return true;
 
     switch (this.wizard.pageIndex) {
-      case NEW_ACCOUNT_PREFS_PAGE:
-        if (this._settingUpNew) {
-          // time to load the captcha
-          // first check for NoScript and whitelist the right sites
-          this._handleNoScript(true);
-          this.captchaBrowser.loadURI(Weave.Service.miscAPI + "captcha_html");
-          return true;
-        }
-
-        this.wizard.pageIndex = SETUP_SUCCESS_PAGE;
-        return false;
       case NEW_ACCOUNT_CAPTCHA_PAGE:
         let doc = this.captchaBrowser.contentDocument;
         let getField = function getField(field) {
           return node && node.value;
         };
 
-        this.startThrobber(true);
+        // Display throbber
+        let feedback = document.getElementById("captchaFeedback");
+        let image = feedback.firstChild;
+        let label = image.nextSibling;
+        image.setAttribute("status", "active");
+        label.value = this._stringBundle.GetStringFromName("verifying.label");
+        feedback.hidden = false;
+
         let username = document.getElementById("weaveUsername").value;
         let password = document.getElementById("weavePassword").value;
         let email    = document.getElementById("weaveEmail").value;
 
         let error = Weave.Service.createAccount(username, password, email,
                                                 challenge, response);
-        this.startThrobber(false);
 
         if (error == null) {
           Weave.Service.username = username;
           Weave.Service.password = password;
           this._handleNoScript(false);
           this.wizard.pageIndex = SETUP_SUCCESS_PAGE;
-          return true;
+          return false;
         }
 
-        // this could be nicer, but it'll do for now
-        Weave.Svc.Prompt.alert(window,
-                               this._stringBundle.GetStringFromName("errorCreatingAccount.title"),
-                               Weave.Utils.getErrorString(error));
+        image.setAttribute("status", "error");
+        label.value = Weave.Utils.getErrorString(error);
         return false;
       case NEW_ACCOUNT_PP_PAGE:
         if (this._haveCustomSyncKey)
           Weave.Service.passphrase = document.getElementById("weavePassphrase").value;
-        document.getElementById("syncComputerName").value = Weave.Clients.localName;
+        // Time to load the captcha.
+        // First check for NoScript and whitelist the right sites.
+        this._handleNoScript(true);
+        this.captchaBrowser.loadURI(Weave.Service.miscAPI + "captcha_html");
         break;
       case EXISTING_ACCOUNT_LOGIN_PAGE:
         Weave.Service.username = document.getElementById("existingUsername").value;
         let pp = document.getElementById("existingPassphrase").value;
         Weave.Service.passphrase = gSyncUtils.normalizePassphrase(pp);
         if (Weave.Service.login())
-          return true;
-
+          this.wizard.pageIndex = SETUP_SUCCESS_PAGE;
         return false;
-      case EXISTING_ACCOUNT_MERGE_PAGE:
+      case OPTIONS_PAGE:
+        let desc = document.getElementById("mergeChoiceRadio").selectedIndex;
+        // No confirmation needed on new account setup or merge option
+        // with existing account.
+        if (this._settingUpNew || (!this._resettingSync && desc == 0))
+          return this.returnFromOptions();
         return this._handleChoice();
-      case EXISTING_ACCOUNT_CONFIRM_PAGE:
-        this.setupInitialSync();
+      case OPTIONS_CONFIRM_PAGE:
         if (this._resettingSync) {
           this.onWizardFinish();
           window.close();
           return false;
         }
-
-        this.wizard.pageIndex = NEW_ACCOUNT_PREFS_PAGE;
-        document.getElementById("syncComputerName").value = Weave.Clients.localName;
-        return false;
+        return this.returnFromOptions();
     }
     return true;
   },
       case EXISTING_ACCOUNT_PP_PAGE: // no idea wtf is up here, but meh!
         this.wizard.pageIndex = EXISTING_ACCOUNT_LOGIN_PAGE;
         return false;
-      case NEW_ACCOUNT_PREFS_PAGE:
-        if (this._settingUpNew)
-          return true;
-
-        this.wizard.pageIndex = EXISTING_ACCOUNT_CONFIRM_PAGE;
-        return false;
+      case OPTIONS_CONFIRM_PAGE:
+        // Backing up from the confirmation page = resetting first sync to merge.
+        document.getElementById("mergeChoiceRadio").selectedIndex = 0;
+        return this.returnFromOptions();
     }
     return true;
   },
 
   onWizardFinish: function () {
-    Weave.Status.service == Weave.STATUS_OK;
+    this.setupInitialSync();
 
     if (!this._resettingSync) {
       function isChecked(element) {
     if (this._resettingSync)
       return;
 
-    if (this.wizard.pageIndex == 9) {
+    if (this.wizard.pageIndex == SETUP_SUCCESS_PAGE) {
       this.onWizardFinish();
       return;
     }
     Weave.Service.startOver();
   },
 
+  onSyncOptions: function () {
+    this._beforeOptionsPage = this.wizard.pageIndex;
+    this.wizard.pageIndex = OPTIONS_PAGE;
+  },
+
+  returnFromOptions: function() {
+    this.wizard.getButton("next").label = this._nextButtonLabel;
+    this.wizard.getButton("next").setAttribute("accesskey",
+                                               this._nextButtonAccesskey);
+    this.wizard.getButton("back").label = this._backButtonLabel;
+    this.wizard.getButton("back").setAttribute("accesskey",
+                                               this._backButtonAccesskey);
+    this.wizard.getButton("cancel").hidden = false;
+    this.wizard.getButton("extra1").hidden = false;
+    this.wizard.pageIndex = this._beforeOptionsPage;
+    return false;
+  },
+
   // _handleNoScript is needed because it blocks the captcha. So we temporarily
   // allow the necessary sites so that we can verify the user is in fact a human.
   // This was done with the help of Giorgio (NoScript author). See bug 508112.
     }
   },
 
-  startThrobber: function (start) {
-    // FIXME: stubbed (bug 583653)
-  },
-
   onServerChange: function () {
     if (this.wizard.pageIndex == EXISTING_ACCOUNT_LOGIN_PAGE) {
       if (this._usingMainServers)
     return valid;
   },
 
+  _handleSuccess: function() {
+    let self = this;
+    function fill(id, string)
+      document.getElementById(id).firstChild.nodeValue =
+        string ? self._stringBundle.GetStringFromName(string) : "";
+
+    fill("firstSyncAction", "");
+    fill("firstSyncActionWarning", "");
+    if (this._settingUpNew) {
+      fill("firstSyncAction", "newAccount.action.label");
+      fill("firstSyncActionChange", "newAccount.change.label");
+      return;
+    }
+    fill("firstSyncActionChange", "existingAccount.change.label");
+    let action = document.getElementById("mergeChoiceRadio").selectedItem.id;
+    let id = action == "resetClient" ? "firstSyncAction" : "firstSyncActionWarning";
+    fill(id, action + ".change.label");
+  },
+
   _handleChoice: function () {
     let desc = document.getElementById("mergeChoiceRadio").selectedIndex;
     document.getElementById("chosenActionDeck").selectedIndex = desc;

browser/base/content/syncSetup.xul

     </button>
   </wizardpage>
 
-  <wizardpage label="&setup.newAccountPage.title.label;"
+  <wizardpage label="&setup.newAccountDetailsPage.title.label;"
               id="newAccountStart"
+              onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow();">
     <grid>
       <columns>
         <column class="inputColumn" flex="1"/>
       </columns>
       <rows>
-        <row align="center">
-          <label control="serverType"
-                 value="&connectTo.label;"/>
-          <menulist id="serverType" oncommand="gSyncSetup.onServerChange()">
-            <menupopup>
-              <menuitem label="&serverType.main.label;"
-                        value="main"/>
-              <menuitem label="&serverType.custom.label;"
-                        value="custom"/>
-            </menupopup>
-          </menulist>
-        </row>
-        <row id="serverRow" hidden="true" align="center">
-          <label value="&signIn.serverURL.label;"
-                 accesskey="&signIn.serverURL.accesskey;"
-                 control="weaveServerURL"/>
-          <textbox id="weaveServerURL" onchange="gSyncSetup.onServerChange()"/>
-        </row>
-        <row id="serverFeedbackRow" align="center" hidden="true">
-          <spacer/>
-          <hbox>
-            <image class="statusIcon"/>
-            <label class="status" value=" "/>
-          </hbox>
-        </row>
         <row id="usernameRow" align="center">
           <label value="&signIn.username.label;"
                  accesskey="&signIn.username.accesskey;"
                  accesskey="&setup.emailAddress.accesskey;"
                  control="weaveEmail"/>
           <textbox id="weaveEmail"
-                   oninput="gSyncSetup.onEmailChange()"/>
+                   onchange="gSyncSetup.onEmailChange()"/>
         </row>
         <row id="emailFeedbackRow" align="center" hidden="true">
           <spacer/>
             <label class="status" value=" "/>
           </hbox>
         </row>
+        <row align="center">
+          <label control="serverType"
+                 value="&server.label;"/>
+          <menulist id="serverType" oncommand="gSyncSetup.onServerChange()">
+            <menupopup>
+              <menuitem label="&serverType.main.label;"
+                        value="main"/>
+              <menuitem label="&serverType.custom.label;"
+                        value="custom"/>
+            </menupopup>
+          </menulist>
+        </row>
+        <row id="serverRow" hidden="true" align="center">
+          <label value="&signIn.serverURL.label;"
+                 accesskey="&signIn.serverURL.accesskey;"
+                 control="weaveServerURL"/>
+          <textbox id="weaveServerURL" onchange="gSyncSetup.onServerChange()"/>
+        </row>
+        <row id="serverFeedbackRow" align="center" hidden="true">
+          <spacer/>
+          <hbox>
+            <image class="statusIcon"/>
+            <label class="status" value=" "/>
+          </hbox>
+        </row>
         <row id="TOSRow" align="center">
           <spacer/>
           <hbox align="top">
             <checkbox id="tos"
                       accesskey="&setup.tosAgree1.accesskey;"
                       oncommand="gSyncSetup.checkFields();"/>
-            <description id="tosDesc" onclick="document.getElementById('tos').click()">
+            <description id="tosDesc"
+                         onclick="document.getElementById('tos').focus();
+                                  document.getElementById('tos').click()">
               &setup.tosAgree1.label;
               <label class="text-link inline-link"
                      onclick="event.stopPropagation();gSyncUtils.openToS();"
   </wizardpage>
 
   <wizardpage label="&setup.newSyncKeyPage.title.label;"
+              onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow();">
     <description>
       &setup.newSyncKeyPage.description.label;
     </vbox>
   </wizardpage>
 
-  <wizardpage label="&setup.newAccountPrefs2.title.label;">
-    <grid>
-      <rows>
-        <row align="center">
-          <label value="&syncComputerName.label;"
-                 accesskey="&syncComputerName.accesskey;"
-                 control="syncComputerName"/>
-          <textbox id="syncComputerName" flex="1"
-                   onchange="gSyncUtils.changeName(this)"/>
-        </row>
-        <row align="center">
-      <label value="&syncModeSwitchDesc.label;"
-             accesskey="&syncModeSwitchDesc.accesskey;"
-             control="weaveSyncMode"/>
-      <menulist id="weaveSyncMode"
-                oncommand="gSyncSetup.updateSyncPrefs()">
-        <menupopup>
-          <menuitem label="&syncEverything.label;" value="syncEverything"/>
-          <menuitem label="&customSync.label;"     value="customSync"/>
-        </menupopup>
-      </menulist>
-        </row>
-      </rows>
-    </grid>
-    <separator/>
-    <deck id="syncModeOptions" class="indent">
-      <description id="syncEverythingDesc">
-        &syncEverythingDescription.label;
-      </description>
-      <vbox>
-        <checkbox label="&syncItem.bookmarks.label;"
-                  accesskey="&syncItem.bookmarks.accesskey;"
-                  id="engine.bookmarks"
-                  checked="true"/>
-        <checkbox label="&syncItem.passwords.label;"
-                  accesskey="&syncItem.passwords.accesskey;"
-                  id="engine.passwords"
-                  checked="true"/>
-        <checkbox label="&syncItem.prefs.label;"
-                  accesskey="&syncItem.prefs.accesskey;"
-                  id="engine.prefs"
-                  checked="true"/>
-        <checkbox label="&syncItem.history.label;"
-                  accesskey="&syncItem.history.accesskey;"
-                  id="engine.history"
-                  checked="true"/>
-        <checkbox label="&syncItem.tabs.label;"
-                  accesskey="&syncItem.tabs.accesskey;"
-                  id="engine.tabs"
-                  checked="true"/>
-      </vbox>
-    </deck>
-
-  </wizardpage>
-
-  <wizardpage label="&setup.captchaPage.title.label;">
-    <browser height="150"
-             width="322"
-             id="captcha"
-             type="content"
-             disablehistory="true"/>
+  <wizardpage label="&setup.captchaPage2.title.label;"
+              onextra1="gSyncSetup.onSyncOptions()">
+    <vbox flex="1" align="center">
+      <browser height="150"
+               width="450"
+               id="captcha"
+               type="content"
+               disablehistory="true"/>
+      <spacer flex="1"/>
+      <hbox id="captchaFeedback" hidden="true">
+        <image class="statusIcon"/>
+        <label class="status" value=" "/>
+      </hbox>
+      <spacer flex="3"/>
+    </vbox>
   </wizardpage>
 
   <wizardpage id="useExisting"
               label="&setup.existingAccount.title.label;"
+              onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow()">
       <grid>
         <columns>
           <column/>
-          <column/>
+          <column class="inputColumn" flex="1"/>
         </columns>
         <rows>
           <row align="center">
             <label control="existingServerType"
-                   value="&connectTo.label;"/>
+                   value="&server.label;"/>
             <menulist id="existingServerType" oncommand="gSyncSetup.onServerChange()">
               <menupopup>
                 <menuitem label="&serverType.main.label;"
         </rows>
       </grid>
   </wizardpage>
+
   <wizardpage id="existingPassphraseEntry"
+              onextra1="gSyncSetup.onSyncOptions()"
               label="&setup.existingSyncKeyPage.title;">
     <description>&setup.existingSyncKeyPage.description;</description>
     <textbox id="existingPassphrase"
              onclick="gSyncUtils.resetPassphrase(); return false;"/>
     </vbox>
   </wizardpage>
-  <wizardpage id="mergeOptionsChoice"
-              label="&setup.mergeChoicePage.title.label;"
+
+  <wizardpage id="syncOptionsPage"
+              label="&setup.optionsPage.title;"
               onpageshow="gSyncSetup.onPageShow()">
+    <groupbox id="syncOptions">
+    <grid>
+      <rows>
+        <row align="center">
+          <label value="&syncComputerName.label;"
+                 accesskey="&syncComputerName.accesskey;"
+                 control="syncComputerName"/>
+          <textbox id="syncComputerName" flex="1"
+                   onchange="gSyncUtils.changeName(this)"/>
+        </row>
+      </rows>
+    </grid>
+    <vbox>
+      <label value="&syncMy.label;" />
+      <vbox class="indent">
+        <checkbox label="&engine.bookmarks.label;"
+                  accesskey="&engine.bookmarks.accesskey;"
+                  id="engine.bookmarks"
+                  checked="true"/>
+        <checkbox label="&engine.passwords.label;"
+                  accesskey="&engine.passwords.accesskey;"
+                  id="engine.passwords"
+                  checked="true"/>
+        <checkbox label="&engine.prefs.label;"
+                  accesskey="&engine.prefs.accesskey;"
+                  id="engine.prefs"
+                  checked="true"/>
+        <checkbox label="&engine.history.label;"
+                  accesskey="&engine.history.accesskey;"
+                  id="engine.history"
+                  checked="true"/>
+        <checkbox label="&engine.tabs.label;"
+                  accesskey="&engine.tabs.accesskey;"
+                  id="engine.tabs"
+                  checked="true"/>
+      </vbox>
+    </vbox>
+    </groupbox>
+
+    <groupbox id="mergeOptions">
       <radiogroup id="mergeChoiceRadio" pack="start">
-        <radio id="resetClient"
-               class="mergeChoiceButton"
-               aria-labelledby="mergeMain"
-               aria-describedby="mergeSecondary1 mergeSecondary2"
-               align="top">
-          <image class="mergeChoiceImage"/>
-          <vbox class="mergeChoiceButtonBox" flex="1">
-            <description class="mainDesc" id="mergeMain">
-              &choice.merge.main.label;
-            </description>
-            <separator class="thin"/>
-            <description class="normal" id="mergeSecondary2">
-              &choice.merge.recommend.label;
-            </description>
-          </vbox>
-        </radio>
-        <radio id="wipeClient"
-               class="mergeChoiceButton"
-               aria-labelledby="wipeClientMain"
-               align="top">
-            <image class="mergeChoiceImage"/>
-            <vbox class="mergeChoiceButtonBox" flex="1">
-              <description class="mainDesc" id="wipeClientMain">
-                &choice.client.main.label;
-              </description>
-            </vbox>
-        </radio>
-        <radio id="wipeRemote"
-               class="mergeChoiceButton"
-               aria-labelledby="wipeServerMain"
-               align="top">
-            <image class="mergeChoiceImage"/>
-            <vbox class="mergeChoiceButtonBox" flex="1">
-              <description class="mainDesc" id="wipeServerMain">
-                &choice.server.main.label;
-              </description>
-            </vbox>
-        </radio>
-    </radiogroup>
+        <grid>
+          <columns>
+            <column/>
+            <column flex="1"/>
+          </columns>
+          <rows>
+            <row align="center">
+              <radio id="resetClient"
+                     class="mergeChoiceButton"
+                     aria-labelledby="resetClientLabel"/>
+              <label id="resetClientLabel" control="resetClient">
+                <html:strong>&choice2.merge.recommended.label;</html:strong>
+                &choice2.merge.main.label;
+              </label>
+            </row>
+            <row align="center">
+              <radio id="wipeClient"
+                     class="mergeChoiceButton"
+                     aria-labelledby="wipeClientLabel"/>
+              <label id="wipeClientLabel"
+                     control="wipeClient"
+                     value="&choice2.client.main.label;"/>
+            </row>
+            <row align="center">
+              <radio id="wipeRemote"
+                     class="mergeChoiceButton"
+                     aria-labelledby="wipeRemoteLabel"/>
+              <label id="wipeRemoteLabel"
+                     control="wipeRemote"
+                     value="&choice2.server.main.label;"/>
+            </row>
+          </rows>
+        </grid>
+      </radiogroup>
+    </groupbox>
   </wizardpage>
-  <wizardpage id="mergeOptionsConfirm" label="&confirm.caption.label;">
+
+  <wizardpage id="syncOptionsConfirm"
+              label="&setup.optionsConfirmPage.title;"
+              onpageshow="gSyncSetup.onPageShow()">
       <deck id="chosenActionDeck">
         <vbox id="chosenActionMerge">
           <hbox pack="start" align="baseline">
         </vbox>
       </deck>
   </wizardpage>
-  <wizardpage label="&setup.successPage.title.label;" 
+
+  <wizardpage label="&setup.successPage.title;" 
               id="successfulSetup"
+              onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow()">
+    <description class="normal">
+      <html:span id="firstSyncAction">replace me</html:span>
+      <html:strong id="firstSyncActionWarning">replace me</html:strong>
+      <html:span id="firstSyncActionChange">replace me</html:span>
+    </description>
     <description>
-      &setup.successPage.desc.label;
+      &continueUsing.label;
     </description>
   </wizardpage>
 </wizard>

browser/components/preferences/sync.js

  *   Edward Lee <edilee@mozilla.com>
  *   Mike Connor <mconnor@mozilla.com>
  *   Paul O’Shannessy <paul@oshannessy.com>
+ *   Philipp von Weitershausen <philipp@weitershausen.de>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
       if (Weave.Status.service == Weave.LOGIN_FAILED)
         this.onLoginError();
       this.updateConnectButton();
-      let syncEverything = this._checkDefaultValues();
-      document.getElementById("weaveSyncMode").selectedIndex = syncEverything ? 0 : 1;
-      document.getElementById("syncModeOptions").selectedIndex = syncEverything ? 0 : 1;
       document.getElementById("tosPP").hidden = this._usingCustomServer;
     }
   },
       gSyncUtils.resetPassphrase();
   },
 
-  updateSyncPrefs: function () {
-    let syncEverything = document.getElementById("weaveSyncMode").selectedItem.value == "syncEverything";
-    document.getElementById("syncModeOptions").selectedIndex = syncEverything ? 0 : 1;
-
-    if (syncEverything) {
-      let prefs = this.prefArray;
-      for (let i = 0; i < prefs.length; ++i)
-        document.getElementById(prefs[i]).value = true;
-    }
-  },
-
-  /**
-   * Check whether all the preferences values are set to their default values
-   *
-   * @param aPrefs an array of pref names to check for
-   * @returns boolean true if all of the prefs are set to their default values,
-   *                  false otherwise
-   */
-  _checkDefaultValues: function () {
-    let prefs = this.prefArray;
-    for (let i = 0; i < prefs.length; ++i) {
-      let pref = document.getElementById(prefs[i]);
-      if (pref.value != pref.defaultValue)
-        return false;
-    }
-    return true;
-  },
-
-
   handleExpanderClick: function () {
     //XXXzpao Might be fixed in bug 583441, otherwise we'll need a new bug.
     // ok, this is pretty evil, and likely fragile if the prefwindow

browser/components/preferences/sync.xul

 #   Edward Lee <edilee@mozilla.com>
 #   Mike Connor <mconnor@mozilla.com>
 #   Paul O’Shannessy <paul@oshannessy.com>
+#   Philipp von Weitershausen <philipp@weitershausen.de>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
                   <textbox id="syncComputerName"
                            onchange="gSyncUtils.changeName(this)"/>
                 </row>
-                <row align="center">
-              <label value="&syncModeSwitchDesc.label;"
-                     accesskey="&syncModeSwitchDesc.accesskey;"
-                     control="weaveSyncMode"/>
-              <menulist id="weaveSyncMode" oncommand="gSyncPane.updateSyncPrefs()">
-                <menupopup>
-                  <menuitem label="&syncEverything.label;" value="syncEverything"/>
-                  <menuitem label="&customSync.label;"     value="customSync"/>
-                </menupopup>
-              </menulist>
-                </row>
               </rows>
             </grid>
             <separator/>
-            <deck id="syncModeOptions" class="indent">
-              <description id="syncEverythingDesc">
-                &syncEverythingDescription.label;
-              </description>
-              <vbox>
-                <checkbox label="&syncItem.bookmarks.label;"
-                          accesskey="&syncItem.bookmarks.accesskey;"
+            <vbox>
+              <label value="&syncMy.label;" />
+              <vbox class="indent">
+                <checkbox label="&engine.bookmarks.label;"
+                          accesskey="&engine.bookmarks.accesskey;"
                           preference="engine.bookmarks"/>
-                <checkbox label="&syncItem.passwords.label;"
-                          accesskey="&syncItem.passwords.accesskey;"
+                <checkbox label="&engine.passwords.label;"
+                          accesskey="&engine.passwords.accesskey;"
                           preference="engine.passwords"/>
-                <checkbox label="&syncItem.prefs.label;"
-                          accesskey="&syncItem.prefs.accesskey;"
+                <checkbox label="&engine.prefs.label;"
+                          accesskey="&engine.prefs.accesskey;"
                           preference="engine.prefs"/>
-                <checkbox label="&syncItem.history.label;"
-                          accesskey="&syncItem.history.accesskey;"
+                <checkbox label="&engine.history.label;"
+                          accesskey="&engine.history.accesskey;"
                           preference="engine.history"/>
-                <checkbox label="&syncItem.tabs.label;"
-                          accesskey="&syncItem.tabs.accesskey;"
+                <checkbox label="&engine.tabs.label;"
+                          accesskey="&engine.tabs.accesskey;"
                           preference="engine.tabs"/>
               </vbox>
-            </deck>
+            </vbox>
             <separator/>
           </groupbox>
           <hbox id="tosPP" pack="center">

browser/locales/en-US/chrome/browser/preferences/sync.dtd

 <!ENTITY syncPrefsCaption.label       "Browser Sync">
 <!ENTITY syncComputerName.label       "Computer Name:">
 <!ENTITY syncComputerName.accesskey   "c">
-<!ENTITY syncModeSwitchDesc.label     "&brandShortName; will: ">
-<!ENTITY syncModeSwitchDesc.accesskey "w">
-<!ENTITY syncEverything.label         "Sync Everything">
-<!ENTITY customSync.label             "Use my custom settings">
-<!ENTITY syncEverythingDescription.label  "Your bookmarks, history, passwords, preferences, and tabs will be synced.">
-<!ENTITY syncItem.bookmarks.label     "Sync Bookmarks">
-<!ENTITY syncItem.bookmarks.accesskey "m">
-<!ENTITY syncItem.tabs.label          "Sync Tabs">
-<!ENTITY syncItem.tabs.accesskey      "T">
-<!ENTITY syncItem.history.label       "Sync History">
-<!ENTITY syncItem.history.accesskey   "r">
-<!ENTITY syncItem.passwords.label     "Sync Passwords">
-<!ENTITY syncItem.passwords.accesskey "P">
-<!ENTITY syncItem.prefs.label         "Sync Preferences">
-<!ENTITY syncItem.prefs.accesskey     "S">
+
+<!ENTITY syncMy.label               "Sync My">
+<!ENTITY engine.bookmarks.label     "Bookmarks">
+<!ENTITY engine.bookmarks.accesskey "m">
+<!ENTITY engine.tabs.label          "Tabs">
+<!ENTITY engine.tabs.accesskey      "T">
+<!ENTITY engine.history.label       "History">
+<!ENTITY engine.history.accesskey   "r">
+<!ENTITY engine.passwords.label     "Passwords">
+<!ENTITY engine.passwords.accesskey "P">
+<!ENTITY engine.prefs.label         "Preferences">
+<!ENTITY engine.prefs.accesskey     "S">
+
 
 <!-- Footer stuff -->
 <!ENTITY prefs.tosLink.label        "Terms of Service">

browser/locales/en-US/chrome/browser/syncSetup.dtd

 <!ENTITY setup.choicePage.existing.label  "I'm already using &syncBrand.shortName.label; on another computer">
 
 <!-- New Account AND Existing Account -->
-<!ENTITY connectTo.label            "Connect to">
+<!ENTITY server.label               "Server">
 <!ENTITY serverType.main.label      "&syncBrand.fullName.label; Server">
 <!ENTITY serverType.custom.label    "Use a custom server">
 <!ENTITY signIn.username.label      "User Name">
 <!ENTITY signIn.serverURL.accesskey "L">
 
 <!-- New Account Page 1: Basic Account Info -->
-<!ENTITY setup.newAccountPage.title.label  "Create your &syncBrand.shortName.label; Account">
+<!ENTITY setup.newAccountDetailsPage.title.label "Account Details">
 <!ENTITY setup.confirmPassword.label  "Confirm Password">
 <!ENTITY setup.confirmPassword.accesskey  "m">
 <!ENTITY setup.emailAddress.label     "Email Address">
 <!ENTITY button.syncKeyBackup.save.label      "Save…">
 <!ENTITY button.syncKeyBackup.save.accesskey  "S">
 
-<!-- New Account Page 3: Sync Type Options -->
-<!ENTITY setup.newAccountPrefs2.title.label "Browser Sync Preferences">
-<!ENTITY syncComputerName.label       "Computer Name:">
-<!ENTITY syncComputerName.accesskey   "c">
-
 <!ENTITY page.syncKeyBackup.title     "Your Firefox Sync Key">
 <!ENTITY page.syncKeyBackup.descr     "This secret key is used to encrypt your personal data. It is not uploaded to the server and cannot be recovered. Do not lose it or share with other people.">
-<!ENTITY syncModeSwitchDesc.label     "&brandShortName; will: ">
-<!ENTITY syncModeSwitchDesc.accesskey "w">
-<!ENTITY syncEverything.label         "Sync Everything">
-<!ENTITY customSync.label             "Use my custom settings">
-<!ENTITY syncEverythingDescription.label  "Your bookmarks, history, passwords, preferences, and tabs will be synced.">
-<!ENTITY syncItem.bookmarks.label     "Sync Bookmarks">
-<!ENTITY syncItem.bookmarks.accesskey "m">
-<!ENTITY syncItem.tabs.label          "Sync Tabs">
-<!ENTITY syncItem.tabs.accesskey      "T">
-<!ENTITY syncItem.history.label       "Sync History">
-<!ENTITY syncItem.history.accesskey   "r">
-<!ENTITY syncItem.passwords.label     "Sync Passwords">
-<!ENTITY syncItem.passwords.accesskey "P">
-<!ENTITY syncItem.prefs.label         "Sync Preferences">
-<!ENTITY syncItem.prefs.accesskey     "S">
 
-<!-- New Account Page 4: Captcha -->
-<!ENTITY setup.captchaPage.title.label     "Please confirm you're not a robot ;)">
+<!-- New Account Page 3: Captcha -->
+<!ENTITY setup.captchaPage2.title.label     "Please Confirm You're Not a Robot">
 
 <!-- Existing Account Page 1: Login -->
 <!ENTITY setup.existingAccount.title.label "Enter Account Information">
 <!ENTITY lostSyncKey.label            "I have lost my Sync Key">
 <!ENTITY verifying.label              "Verifying…">
 
-<!-- New & Existing Account: Merge Options -->
-<!ENTITY setup.mergeChoicePage.title.label "How do you want to start off?">
-<!ENTITY choice.merge.main.label      "Merge this computer's data with your &syncBrand.shortName.label; data">
-<!ENTITY choice.merge.recommend.label "This option is strongly recommended by Mozilla for all users.">
-<!ENTITY choice.client.main.label     "Replace all data on this computer with your &syncBrand.fullName.label; data">
-<!ENTITY choice.server.main.label     "Replace all other devices with your local data">
+<!-- Sync Options -->
+<!ENTITY setup.optionsPage.title      "Sync Options">
+<!ENTITY syncComputerName.label       "Computer Name:">
+<!ENTITY syncComputerName.accesskey   "c">
 
-<!-- New & Existing Account: Confirm Merge Options -->
-<!ENTITY confirm.caption.label        "Confirm your choice">
-<!ENTITY confirm.merge.label          "You have chosen to merge your data on this computer with the data on your other devices running &syncBrand.fullName.label;.">
+<!ENTITY syncMy.label               "Sync My">
+<!ENTITY engine.bookmarks.label     "Bookmarks">
+<!ENTITY engine.bookmarks.accesskey "m">
+<!ENTITY engine.tabs.label          "Tabs">
+<!ENTITY engine.tabs.accesskey      "T">
+<!ENTITY engine.history.label       "History">
+<!ENTITY engine.history.accesskey   "r">
+<!ENTITY engine.passwords.label     "Passwords">
+<!ENTITY engine.passwords.accesskey "P">
+<!ENTITY engine.prefs.label         "Preferences">
+<!ENTITY engine.prefs.accesskey     "S">
+
+<!ENTITY choice2.merge.main.label      "Merge this computer's data with my &syncBrand.shortName.label; data">
+<!ENTITY choice2.merge.recommended.label "Recommended:">
+<!ENTITY choice2.client.main.label     "Replace all data on this computer with my &syncBrand.shortName.label; data">
+<!ENTITY choice2.server.main.label     "Replace all other devices with this computer's data">
+
+<!-- Confirm Merge Options -->
+<!ENTITY setup.optionsConfirmPage.title "Confirm">
+<!ENTITY confirm.merge.label    "&syncBrand.fullName.label; will now merge all this computer's browser data into your Sync account.">
 <!ENTITY confirm.client.label         "All &brandShortName; data on this computer will be deleted, including the following:">
 <!ENTITY confirm.client.moreinfo.label "&brandShortName; will then copy your &syncBrand.fullName.label; data to this computer.">
 <!ENTITY confirm.client.warning.label "WARNING: This will result in all &brandShortName; data on this computer being replaced!">
 <!ENTITY confirm.server.warning.label "WARNING: Your local data will replace all &brandShortName; data on these devices!">
 
 <!-- New & Existing Account: Setup Complete -->
-<!ENTITY setup.successPage.title.label   "Setup Complete!">
-<!ENTITY setup.successPage.desc.label    "Congratulations! &brandShortName; is now set up to automatically sync your information. Don't forget to install &syncBrand.fullName.label; on all your devices. You can now continue using &brandShortName;.">
+<!ENTITY setup.successPage.title "Setup Complete">
+<!ENTITY changeOptions.label "You can change this preference by selecting Sync Options below.">
+<!ENTITY continueUsing.label "You may now continue using &brandShortName;.">

browser/locales/en-US/chrome/browser/syncSetup.properties

-cancelSetup.label           = Cancel Setup
-errorCreatingAccount.title  = Error Creating Account
+button.syncOptions.label       = Sync Options
+button.syncOptionsDone.label   = Done
+button.syncOptionsCancel.label = Cancel
 
 invalidEmail.label          = Invalid email address
 serverInvalid.label         = Please enter a valid server URL
 usernameNotAvailable.label  = Already in use
 
+verifying.label = Verifying…
+
 # LOCALIZATION NOTE (additionalClients.label, bookmarkCount.label, historyCount.label, passwordCount.label).
 # We'll fix the lack of PluralForms in bug 583661.
 additionalClients.label     = and %S additional devices
 email.synckey.body          = Congratulations for signing up for Firefox Sync! Your secret Firefox Sync key is %S. Do not lose it or share with other people.
 save.synckey.title = Save Sync Key
 
+newAccount.action.label = Firefox Sync is now set up to automatically sync all of your browser data.
+newAccount.change.label = You can choose exactly what to sync by selecting Sync Options below.
+resetClient.change.label = Firefox Sync will now merge all this computer's browser data into your Sync account.
+wipeClient.change.label = Firefox Sync will now replace all of the browser data on this computer with the data in your Sync account.
+wipeRemote.change.label = Firefox Sync will now replace all of the browser data in your Sync account with the data on this computer.
+existingAccount.change.label = You can change this preference by selecting Sync Options below.
+
 # Several other strings are used (via Weave.Status.login), but they come from
 #  /services/sync */

browser/themes/gnomestripe/browser/syncSetup.css

 }
 
 
-.accountChoiceButton,
-.mergeChoiceButton {
+.accountChoiceButton {
   -moz-appearance: none;
   border: #999999 1px solid !important;
   padding: 2px 3px;
     rgba(0, 0, 0, 0.1) 0px 1px 0px;
 }
 
-.accountChoiceButton:hover,
-.mergeChoiceButton[selected="true"] {
+.accountChoiceButton:hover {
   background-color: -moz-MenuHover;
   color: -moz-MenuHoverText;
 }
 
-.mergeChoiceButtonBox {
-  padding: 0.2em;
-}
-
 .success,
 .error {
   padding: 2px;

browser/themes/pinstripe/browser/syncSetup.css

 }
 
 
-.accountChoiceButton,
-.mergeChoiceButton {
+.accountChoiceButton {
   -moz-appearance: none;
   border: #999999 1px solid !important;
   padding: 2px 3px;
     rgba(0, 0, 0, 0.1) 0px 1px 0px;
 }
 
-.accountChoiceButton:hover,
-.mergeChoiceButton[selected="true"] {
+.accountChoiceButton:hover {
   background-color: -moz-MenuHover;
   color: -moz-MenuHoverText;
 }
 
-.mergeChoiceButtonBox {
-  padding: 0.2em;
-}
-
 .success,
 .error {
   padding: 2px;

browser/themes/winstripe/browser/syncSetup.css

 }
 
 
-.accountChoiceButton,
-.mergeChoiceButton {
+.accountChoiceButton {
   -moz-appearance: none;
   border: #999999 1px solid !important;
   padding: 2px 3px;
     rgba(0, 0, 0, 0.1) 0px 1px 0px;
 }
 
-.accountChoiceButton:hover,
-.mergeChoiceButton[selected="true"] {
+.accountChoiceButton:hover {
   background-color: -moz-MenuHover;
   color: -moz-MenuHoverText;
 }
 
-.mergeChoiceButtonBox {
-  padding: 0.2em;
-}
-
 .success,
 .error {
   padding: 2px;