Bug 590805 - Sync UI: Revamp setup wizard (part 5), r=mconnor a=blocking2.0
authorPhilipp von Weitershausen <philipp@weitershausen.de>
Wed, 08 Sep 2010 03:37:46 +0200
changeset 52171 728a4c3f0a5380817a716be93351caebe0fcfc71
parent 52170 9ec78f93036c047fb35a683c58c74e59f8276d8f
child 52172 87d1bedd44d9876492744c82929923dc26821c73
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersmconnor, blocking2.0
bugs590805
milestone2.0b6pre
Bug 590805 - Sync UI: Revamp setup wizard (part 5), r=mconnor a=blocking2.0 Restyle the setup wizard.
browser/base/content/syncSetup.xul
browser/components/preferences/sync.xul
browser/locales/en-US/chrome/browser/syncSetup.dtd
browser/themes/gnomestripe/browser/jar.mn
browser/themes/gnomestripe/browser/sync-merge.png
browser/themes/gnomestripe/browser/sync-wipeClient.png
browser/themes/gnomestripe/browser/sync-wipeServer.png
browser/themes/gnomestripe/browser/syncSetup.css
browser/themes/pinstripe/browser/jar.mn
browser/themes/pinstripe/browser/sync-merge.png
browser/themes/pinstripe/browser/sync-wipeClient.png
browser/themes/pinstripe/browser/sync-wipeServer.png
browser/themes/pinstripe/browser/syncSetup.css
browser/themes/winstripe/browser/jar.mn
browser/themes/winstripe/browser/sync-merge.png
browser/themes/winstripe/browser/sync-wipeClient.png
browser/themes/winstripe/browser/sync-wipeServer.png
browser/themes/winstripe/browser/syncSetup.css
--- a/browser/base/content/syncSetup.xul
+++ b/browser/base/content/syncSetup.xul
@@ -67,42 +67,39 @@
   <script type="application/javascript"
           src="chrome://browser/content/syncUtils.js"/>
   <script type="application/javascript"
           src="chrome://browser/content/utilityOverlay.js"/>
   <script type="application/javascript"
           src="chrome://global/content/printUtils.js"/>
 
   <wizardpage id="pickSetupType"
-              label="&setup.choicePage.title.label;"
+              label="&syncBrand.fullName.label;"
               onpageshow="gSyncSetup.onPageShow()">
-    <button id="newAccount"
-            class="accountChoiceButton"
-            aria-labelledby="createNewDesc"
-            oncommand="gSyncSetup.startNewAccountSetup()"
-            align="center">
-      <image class="mergeChoiceImage"/>
-      <vbox class="mergeChoiceButtonBox" flex="1">
-        <description class="mainDesc" id="createNewDesc">
-          &setup.choicePage.new.label;
-        </description>
-      </vbox>
-    </button>
-    <button id="existingAccount"
-            class="accountChoiceButton"
-            aria-labelledby="useExistingButton"
-            oncommand="gSyncSetup.useExistingAccount()"
-            align="center">
-      <image class="mergeChoiceImage"/>
-      <vbox class="mergeChoiceButtonBox" flex="1">
-        <description class="mainDesc" id="useExistingDesc">
-          &setup.choicePage.existing.label;
-        </description>
-      </vbox>
-    </button>
+    <vbox align="center" flex="1">
+      <description style="padding: 0 7em;">
+        &setup.pickSetupType.description;
+      </description>
+      <spacer flex="1"/>
+      <button id="newAccount"
+              class="accountChoiceButton"
+              label="&button.createNewAccount.label;"
+              oncommand="gSyncSetup.startNewAccountSetup()"
+              align="center"/>
+      <spacer flex="3"/>
+    </vbox>
+    <separator class="groove"/>
+    <vbox align="center" flex="1">
+      <spacer flex="3"/>
+      <button id="existingAccount"
+              class="accountChoiceButton"
+              label="&button.haveAccount.label;"
+              oncommand="gSyncSetup.useExistingAccount()"/>
+      <spacer flex="3"/>
+    </vbox>
   </wizardpage>
 
   <wizardpage label="&setup.newAccountDetailsPage.title.label;"
               id="newAccountStart"
               onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow();">
     <grid>
       <columns>
@@ -185,17 +182,17 @@
           <spacer/>
           <hbox>
             <image class="statusIcon"/>
             <label class="status" value=" "/>
           </hbox>
         </row>
         <row id="TOSRow" align="center">
           <spacer/>
-          <hbox align="top">
+          <hbox align="center">
             <checkbox id="tos"
                       accesskey="&setup.tosAgree1.accesskey;"
                       oncommand="gSyncSetup.checkFields();"/>
             <description id="tosDesc"
                          onclick="document.getElementById('tos').focus();
                                   document.getElementById('tos').click()">
               &setup.tosAgree1.label;
               <label class="text-link inline-link"
@@ -216,17 +213,17 @@
   <wizardpage label="&setup.newSyncKeyPage.title.label;"
               onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow();">
     <description>
       &setup.newSyncKeyPage.description.label;
     </description>
     <spacer/>
 
-    <vbox>
+    <groupbox>
       <hbox>
         <label value="&syncKeyEntry.label;"
                accesskey="&syncKeyEntry.accesskey;"
                control="weavePassphrase"/>
         <label id="generatePassphraseButton"
                value="&syncKeyGenerate.label;"
                class="text-link inline-link"
                onclick="event.stopPropagation();
@@ -238,35 +235,35 @@
                onfocus="this.select()"/>
       <hbox id="passphraseFeedbackRow" align="center" hidden="true">
         <spacer/>
         <hbox>
           <image class="statusIcon"/>
           <label class="status" value=" "/>
         </hbox>
       </hbox>
-    </vbox>
+    </groupbox>
 
-    <vbox align="center">
+    <groupbox align="center">
       <description>&syncKeyBackup.description;</description>
       <hbox>
         <button label="&button.syncKeyBackup.email.label;"
                 accesskey="&button.syncKeyBackup.email.accesskey;"
                 oncommand="gSyncUtils.passphraseEmail('weavePassphrase');
                            gSyncSetup.afterBackup();"/>
         <button label="&button.syncKeyBackup.print.label;"
                 accesskey="&button.syncKeyBackup.print.accesskey;"
                 oncommand="gSyncUtils.passphrasePrint('weavePassphrase');
                            gSyncSetup.afterBackup();"/>
         <button label="&button.syncKeyBackup.save.label;"
                 accesskey="&button.syncKeyBackup.save.accesskey;"
                 oncommand="gSyncUtils.passphraseSave('weavePassphrase');
                            gSyncSetup.afterBackup();"/>
       </hbox>
-    </vbox>
+    </groupbox>
   </wizardpage>
 
   <wizardpage label="&setup.captchaPage2.title.label;"
               onextra1="gSyncSetup.onSyncOptions()">
     <vbox flex="1" align="center">
       <browser height="150"
                width="450"
                id="captcha"
@@ -381,51 +378,55 @@
     </vbox>
   </wizardpage>
 
   <wizardpage id="syncOptionsPage"
               label="&setup.optionsPage.title;"
               onpageshow="gSyncSetup.onPageShow()">
     <groupbox id="syncOptions">
     <grid>
+      <columns>
+        <column/>
+        <column flex="1" style="-moz-margin-end: 2px"/>
+      </columns>
       <rows>
         <row align="center">
           <label value="&syncComputerName.label;"
                  accesskey="&syncComputerName.accesskey;"
                  control="syncComputerName"/>
           <textbox id="syncComputerName" flex="1"
                    onchange="gSyncUtils.changeName(this)"/>
         </row>
+        <row>
+          <label value="&syncMy.label;" />
+          <vbox>
+            <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>
+        </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">
         <grid>
           <columns>
             <column/>
             <column flex="1"/>
@@ -461,30 +462,22 @@
       </radiogroup>
     </groupbox>
   </wizardpage>
 
   <wizardpage id="syncOptionsConfirm"
               label="&setup.optionsConfirmPage.title;"
               onpageshow="gSyncSetup.onPageShow()">
       <deck id="chosenActionDeck">
-        <vbox id="chosenActionMerge">
-          <hbox pack="start" align="baseline">
-            <image/>
-          </hbox>
-          <separator class="thin"/>
+        <vbox id="chosenActionMerge" class="confirm">
           <description class="normal">
             &confirm.merge.label;
           </description>
         </vbox>
-        <vbox id="chosenActionWipeClient">
-          <hbox pack="start" align="baseline">
-            <image/>
-          </hbox>
-          <separator class="thin"/>
+        <vbox id="chosenActionWipeClient" class="confirm">
           <description class="normal">
             &confirm.client.label;
           </description>
           <separator class="thin"/>
           <vbox id="dataList">
             <label class="data indent" id="bookmarkCount"/>
             <label class="data indent" id="historyCount"/>
             <label class="data indent" id="passwordCount"/>
@@ -493,21 +486,17 @@
           <description class="normal">
             &confirm.client.moreinfo.label;
           </description>
           <separator class="thin"/>
           <description class="warning">
             &confirm.client.warning.label;
           </description>
         </vbox>
-        <vbox id="chosenActionWipeServer">
-          <hbox pack="start" align="baseline">
-            <image/>
-          </hbox>
-          <separator class="thin"/>
+        <vbox id="chosenActionWipeServer" class="confirm">
           <description class="normal">
             &confirm.server.label;
           </description>
           <separator class="thin"/>
           <vbox id="clientList">
           </vbox>
           <separator class="thin"/>
           <description class="warning">
@@ -516,19 +505,24 @@
         </vbox>
       </deck>
   </wizardpage>
 
   <wizardpage label="&setup.successPage.title;" 
               id="successfulSetup"
               onextra1="gSyncSetup.onSyncOptions()"
               onpageshow="gSyncSetup.onPageShow()">
+    <vbox align="center">
+      <image id="successPageIcon"/>
+    </vbox>
+    <separator/>
     <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>
       &continueUsing.label;
     </description>
+    <separator flex="1"/>
   </wizardpage>
 </wizard>
 
--- a/browser/components/preferences/sync.xul
+++ b/browser/components/preferences/sync.xul
@@ -143,48 +143,51 @@
                   <spacer/>
                 </row>
               </rows>
             </grid>
           </groupbox>
           <groupbox>
             <caption label="&syncPrefsCaption.label;"/>
             <grid>
+              <columns>
+                <column/>
+                <column flex="1"/>
+              </columns>
               <rows>
                 <row align="center">
                   <label value="&syncComputerName.label;"
                          accesskey="&syncComputerName.accesskey;"
                          control="syncComputerName"/>
                   <textbox id="syncComputerName"
                            onchange="gSyncUtils.changeName(this)"/>
                 </row>
+                <row>
+                  <label value="&syncMy.label;" />
+                  <vbox>
+                    <checkbox label="&engine.bookmarks.label;"
+                              accesskey="&engine.bookmarks.accesskey;"
+                              preference="engine.bookmarks"/>
+                    <checkbox label="&engine.passwords.label;"
+                              accesskey="&engine.passwords.accesskey;"
+                              preference="engine.passwords"/>
+                    <checkbox label="&engine.prefs.label;"
+                              accesskey="&engine.prefs.accesskey;"
+                              preference="engine.prefs"/>
+                    <checkbox label="&engine.history.label;"
+                              accesskey="&engine.history.accesskey;"
+                              preference="engine.history"/>
+                    <checkbox label="&engine.tabs.label;"
+                              accesskey="&engine.tabs.accesskey;"
+                              preference="engine.tabs"/>
+                  </vbox>
+                </row>
               </rows>
             </grid>
             <separator/>
-            <vbox>
-              <label value="&syncMy.label;" />
-              <vbox class="indent">
-                <checkbox label="&engine.bookmarks.label;"
-                          accesskey="&engine.bookmarks.accesskey;"
-                          preference="engine.bookmarks"/>
-                <checkbox label="&engine.passwords.label;"
-                          accesskey="&engine.passwords.accesskey;"
-                          preference="engine.passwords"/>
-                <checkbox label="&engine.prefs.label;"
-                          accesskey="&engine.prefs.accesskey;"
-                          preference="engine.prefs"/>
-                <checkbox label="&engine.history.label;"
-                          accesskey="&engine.history.accesskey;"
-                          preference="engine.history"/>
-                <checkbox label="&engine.tabs.label;"
-                          accesskey="&engine.tabs.accesskey;"
-                          preference="engine.tabs"/>
-              </vbox>
-            </vbox>
-            <separator/>
           </groupbox>
           <hbox id="tosPP" pack="center">
             <label class="text-link"
                    onclick="event.stopPropagation();gSyncUtils.openToS();"
                    value="&prefs.tosLink.label;"/>
             <label class="text-link"
                    onclick="event.stopPropagation();gSyncUtils.openPP();"
                    value="&prefs.ppLink.label;"/>
--- a/browser/locales/en-US/chrome/browser/syncSetup.dtd
+++ b/browser/locales/en-US/chrome/browser/syncSetup.dtd
@@ -1,12 +1,16 @@
 <!ENTITY accountSetupTitle.label    "&syncBrand.fullName.label; Setup">
 
 <!-- First page of the wizard -->
 
+<!ENTITY setup.pickSetupType.description "Welcome, if you've never used &syncBrand.fullName.label; before, you will need to create a new account.">
+<!ENTITY button.createNewAccount.label "Create a New Account">
+<!ENTITY button.haveAccount.label "I Have a &syncBrand.fullName.label; Account">
+
 <!ENTITY setup.choicePage.title.label     "Have you used &syncBrand.fullName.label; before?">
 <!ENTITY setup.choicePage.new.label       "I've never used &syncBrand.shortName.label; before">
 <!ENTITY setup.choicePage.existing.label  "I'm already using &syncBrand.shortName.label; on another computer">
 
 <!-- New Account AND Existing Account -->
 <!ENTITY server.label               "Server">
 <!ENTITY serverType.main.label      "&syncBrand.fullName.label; Server">
 <!ENTITY serverType.custom.label    "Use a custom server">
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -83,17 +83,14 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
   skin/classic/browser/sync-32.png
   skin/classic/browser/sync-bg.png
   skin/classic/browser/sync-desktopIcon.png
-  skin/classic/browser/sync-merge.png
   skin/classic/browser/sync-mobileIcon.png
   skin/classic/browser/sync-usedBefore.png
   skin/classic/browser/sync-usedNever.png
-  skin/classic/browser/sync-wipeClient.png
-  skin/classic/browser/sync-wipeServer.png
   skin/classic/browser/syncSetup.css
   skin/classic/browser/syncCommon.css
 #endif
deleted file mode 100644
index b99bf3e848b9034c2c41255af1183db51ee6557b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 56871afd21d637257e67b3c85e31f17649328857..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 98ddca3b2f6ff64d172e0db4cd838dd6ebb06971..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/gnomestripe/browser/syncSetup.css
+++ b/browser/themes/gnomestripe/browser/syncSetup.css
@@ -1,49 +1,75 @@
-.wizard-header-icon {
-  list-style-image: url(chrome://browser/skin/sync-32.png);
+wizard {
+  -moz-appearance: none;
+  width: 55em;
+  height: 42em;
+  padding: 0;
+  background-color: Window;
+}
+
+.wizard-page-box {
+  -moz-appearance: none;
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+wizardpage {
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  margin: 0;
+  padding: 0 8em;
+  background-color: Window;
 }
 
-wizard,
-.wizard-page-box,
 .wizard-header {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
+  border: none;
+  padding: 2em 0 1em 0;
+  text-align: center;
+}
+.wizard-header-label {
+  font-size: 24pt;
+  font-weight: normal;
+}
+
+.wizard-buttons {
+  border-top: 2px solid #ccd9ea;
+  background-color: #f1f5fb;
+  padding: 1em;
 }
 
-wizard {
-  background-color: #FFF;
-  background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
+.wizard-buttons-separator {
+  visibility: collapse;
+}
+
+.wizard-header-icon {
+  visibility: collapse;
+}
+
+.accountChoiceButton {
+  font: menu;
+}
+
+.confirm {
+  border: 1px solid black;
+  padding: 1em;
+  -moz-border-radius: 5px;
 }
 
 /* Override the text-link style from global.css */
 .text-link,
 .text-link:focus {
   margin: 0px;
   padding: 0px;
   border: 0px;
 }
 
 
-.accountChoiceButton {
-  -moz-appearance: none;
-  border: #999999 1px solid !important;
-  padding: 2px 3px;
-  -moz-border-radius: 6px;
-  background-color: menu;
-  -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.5) 0 1px 0px,
-    inset rgba(0, 0, 0, 0.1) 0 -2px 0px,
-    rgba(0, 0, 0, 0.1) 0px 1px 0px;
-}
-
-.accountChoiceButton:hover {
-  background-color: -moz-MenuHover;
-  color: -moz-MenuHoverText;
-}
-
 .success,
 .error {
   padding: 2px;
   -moz-border-radius: 2px;
 }
 
 .error {
   background-color: #FF0000 !important;
@@ -64,48 +90,21 @@ wizard {
   font-weight: bold;
   font-size: 100%;
 }
 
 .normal {
   font-size: 100%;
 }
 
-/* Buttons on first page of wizard */
-#newAccount,
-#existingAccount {
-  min-height: 5em;
-}
-#newAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedNever.png");
-}
-#existingAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedBefore.png");
-}
-
 .inputColumn {
   -moz-margin-end: 2px
 }
 
-#tosDesc {
-  width: 16em;
-}
-
 #connect-throbber image,
 #passphrase-throbber image {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
-/* Merge choice images */
-#resetClient .mergeChoiceImage,
-#chosenActionMerge image {
-  list-style-image: url("chrome://browser/skin/sync-merge.png");
+#successPageIcon {
+  /* TODO replace this with a 128px version (bug 591122) */
+  list-style-image: url("chrome://browser/skin/sync-32.png");
 }
-
-#wipeClient .mergeChoiceImage,
-#chosenActionWipeClient image {
-  list-style-image: url("chrome://browser/skin/sync-wipeClient.png");
-}
-
-#wipeRemote .mergeChoiceImage,
-#chosenActionWipeServer image {
-  list-style-image: url("chrome://browser/skin/sync-wipeServer.png");
-}
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -123,17 +123,14 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
   skin/classic/browser/sync-32.png
   skin/classic/browser/sync-bg.png
   skin/classic/browser/sync-desktopIcon.png
-  skin/classic/browser/sync-merge.png
   skin/classic/browser/sync-mobileIcon.png
   skin/classic/browser/sync-usedBefore.png
   skin/classic/browser/sync-usedNever.png
-  skin/classic/browser/sync-wipeClient.png
-  skin/classic/browser/sync-wipeServer.png
   skin/classic/browser/syncSetup.css
   skin/classic/browser/syncCommon.css
 #endif
deleted file mode 100644
index b99bf3e848b9034c2c41255af1183db51ee6557b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 56871afd21d637257e67b3c85e31f17649328857..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 98ddca3b2f6ff64d172e0db4cd838dd6ebb06971..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/pinstripe/browser/syncSetup.css
+++ b/browser/themes/pinstripe/browser/syncSetup.css
@@ -1,49 +1,75 @@
-.wizard-header-icon {
-  list-style-image: url(chrome://browser/skin/sync-32.png);
+wizard {
+  -moz-appearance: none;
+  width: 55em;
+  height: 42em;
+  padding: 0;
+  background-color: Window;
+}
+
+.wizard-page-box {
+  -moz-appearance: none;
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+wizardpage {
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  margin: 0;
+  padding: 0 8em;
+  background-color: Window;
 }
 
-wizard,
-.wizard-page-box,
 .wizard-header {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
+  border: none;
+  padding: 2em 0 1em 0;
+  text-align: center;
+}
+.wizard-header-label {
+  font-size: 24pt;
+  font-weight: normal;
+}
+
+.wizard-buttons {
+  border-top: 2px solid #ccd9ea;
+  background-color: #f1f5fb;
+  padding: 1em;
 }
 
-wizard {
-  background-color: #FFF;
-  background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
+.wizard-buttons-separator {
+  visibility: collapse;
+}
+
+.wizard-header-icon {
+  visibility: collapse;
+}
+
+.accountChoiceButton {
+  font: menu;
+}
+
+.confirm {
+  border: 1px solid black;
+  padding: 1em;
+  -moz-border-radius: 5px;
 }
 
 /* Override the text-link style from global.css */
 .text-link,
 .text-link:focus {
   margin: 0px;
   padding: 0px;
   border: 0px;
 }
 
 
-.accountChoiceButton {
-  -moz-appearance: none;
-  border: #999999 1px solid !important;
-  padding: 2px 3px;
-  -moz-border-radius: 6px;
-  background-color: menu;
-  -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.5) 0 1px 0px,
-    inset rgba(0, 0, 0, 0.1) 0 -2px 0px,
-    rgba(0, 0, 0, 0.1) 0px 1px 0px;
-}
-
-.accountChoiceButton:hover {
-  background-color: -moz-MenuHover;
-  color: -moz-MenuHoverText;
-}
-
 .success,
 .error {
   padding: 2px;
   -moz-border-radius: 2px;
 }
 
 .error {
   background-color: #FF0000 !important;
@@ -64,48 +90,21 @@ wizard {
   font-weight: bold;
   font-size: 100%;
 }
 
 .normal {
   font-size: 100%;
 }
 
-/* Buttons on first page of wizard */
-#newAccount,
-#existingAccount {
-  min-height: 5em;
-}
-#newAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedNever.png");
-}
-#existingAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedBefore.png");
-}
-
 .inputColumn {
   -moz-margin-end: 2px
 }
 
-#tosDesc {
-  width: 16em;
-}
-
 #connect-throbber image,
 #passphrase-throbber image {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
-/* Merge choice images */
-#resetClient .mergeChoiceImage,
-#chosenActionMerge image {
-  list-style-image: url("chrome://browser/skin/sync-merge.png");
+#successPageIcon {
+  /* TODO replace this with a 128px version (bug 591122) */
+  list-style-image: url("chrome://browser/skin/sync-32.png");
 }
-
-#wipeClient .mergeChoiceImage,
-#chosenActionWipeClient image {
-  list-style-image: url("chrome://browser/skin/sync-wipeClient.png");
-}
-
-#wipeRemote .mergeChoiceImage,
-#chosenActionWipeServer image {
-  list-style-image: url("chrome://browser/skin/sync-wipeServer.png");
-}
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@@ -102,22 +102,19 @@ browser.jar:
         skin/classic/browser/tabview/stack-expander.png             (tabview/stack-expander.png)
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-16-throbber.png
         skin/classic/browser/sync-16.png
         skin/classic/browser/sync-32.png
         skin/classic/browser/sync-bg.png
         skin/classic/browser/sync-desktopIcon.png
-        skin/classic/browser/sync-merge.png
         skin/classic/browser/sync-mobileIcon.png
         skin/classic/browser/sync-usedBefore.png
         skin/classic/browser/sync-usedNever.png
-        skin/classic/browser/sync-wipeClient.png
-        skin/classic/browser/sync-wipeServer.png
         skin/classic/browser/syncSetup.css
         skin/classic/browser/syncCommon.css
 #endif
 
 #ifdef XP_WIN
 browser.jar:
 % skin browser classic/1.0 %skin/classic/aero/browser/ os=WINNT osversion>=6
         skin/classic/aero/browser/sanitizeDialog.css                       (sanitizeDialog.css)
@@ -220,18 +217,15 @@ browser.jar:
         skin/classic/aero/browser/tabview/stack-expander.png         (tabview/stack-expander.png)
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-16-throbber.png
         skin/classic/aero/browser/sync-16.png
         skin/classic/aero/browser/sync-32.png
         skin/classic/aero/browser/sync-bg.png
         skin/classic/aero/browser/sync-desktopIcon.png
-        skin/classic/aero/browser/sync-merge.png
         skin/classic/aero/browser/sync-mobileIcon.png
         skin/classic/aero/browser/sync-usedBefore.png
         skin/classic/aero/browser/sync-usedNever.png
-        skin/classic/aero/browser/sync-wipeClient.png
-        skin/classic/aero/browser/sync-wipeServer.png
         skin/classic/aero/browser/syncSetup.css
         skin/classic/aero/browser/syncCommon.css
 #endif
 #endif
deleted file mode 100644
index b99bf3e848b9034c2c41255af1183db51ee6557b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 56871afd21d637257e67b3c85e31f17649328857..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 98ddca3b2f6ff64d172e0db4cd838dd6ebb06971..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/winstripe/browser/syncSetup.css
+++ b/browser/themes/winstripe/browser/syncSetup.css
@@ -1,49 +1,75 @@
-.wizard-header-icon {
-  list-style-image: url(chrome://browser/skin/sync-32.png);
+wizard {
+  -moz-appearance: none;
+  width: 55em;
+  height: 42em;
+  padding: 0;
+  background-color: Window;
+}
+
+.wizard-page-box {
+  -moz-appearance: none;
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+wizardpage {
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  margin: 0;
+  padding: 0 8em;
+  background-color: Window;
 }
 
-wizard,
-.wizard-page-box,
 .wizard-header {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
+  border: none;
+  padding: 2em 0 1em 0;
+  text-align: center;
+}
+.wizard-header-label {
+  font-size: 24pt;
+  font-weight: normal;
+}
+
+.wizard-buttons {
+  border-top: 2px solid #ccd9ea;
+  background-color: #f1f5fb;
+  padding: 1em;
 }
 
-wizard {
-  background-color: #FFF;
-  background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
+.wizard-buttons-separator {
+  visibility: collapse;
+}
+
+.wizard-header-icon {
+  visibility: collapse;
+}
+
+.accountChoiceButton {
+  font: menu;
+}
+
+.confirm {
+  border: 1px solid black;
+  padding: 1em;
+  -moz-border-radius: 5px;
 }
 
 /* Override the text-link style from global.css */
 .text-link,
 .text-link:focus {
   margin: 0px;
   padding: 0px;
   border: 0px;
 }
 
 
-.accountChoiceButton {
-  -moz-appearance: none;
-  border: #999999 1px solid !important;
-  padding: 2px 3px;
-  -moz-border-radius: 6px;
-  background-color: menu;
-  -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.5) 0 1px 0px,
-    inset rgba(0, 0, 0, 0.1) 0 -2px 0px,
-    rgba(0, 0, 0, 0.1) 0px 1px 0px;
-}
-
-.accountChoiceButton:hover {
-  background-color: -moz-MenuHover;
-  color: -moz-MenuHoverText;
-}
-
 .success,
 .error {
   padding: 2px;
   -moz-border-radius: 2px;
 }
 
 .error {
   background-color: #FF0000 !important;
@@ -64,48 +90,21 @@ wizard {
   font-weight: bold;
   font-size: 100%;
 }
 
 .normal {
   font-size: 100%;
 }
 
-/* Buttons on first page of wizard */
-#newAccount,
-#existingAccount {
-  min-height: 5em;
-}
-#newAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedNever.png");
-}
-#existingAccount image {
-  list-style-image: url("chrome://browser/skin/sync-usedBefore.png");
-}
-
 .inputColumn {
   -moz-margin-end: 2px
 }
 
-#tosDesc {
-  width: 16em;
-}
-
 #connect-throbber image,
 #passphrase-throbber image {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
-/* Merge choice images */
-#resetClient .mergeChoiceImage,
-#chosenActionMerge image {
-  list-style-image: url("chrome://browser/skin/sync-merge.png");
+#successPageIcon {
+  /* TODO replace this with a 128px version (bug 591122) */
+  list-style-image: url("chrome://browser/skin/sync-32.png");
 }
-
-#wipeClient .mergeChoiceImage,
-#chosenActionWipeClient image {
-  list-style-image: url("chrome://browser/skin/sync-wipeClient.png");
-}
-
-#wipeRemote .mergeChoiceImage,
-#chosenActionWipeServer image {
-  list-style-image: url("chrome://browser/skin/sync-wipeServer.png");
-}