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

Restyle the setup wizard.
This commit is contained in:
Philipp von Weitershausen 2010-09-08 03:37:46 +02:00
parent aec0175d67
commit ecd2af6423
18 changed files with 266 additions and 280 deletions

View File

@ -72,32 +72,29 @@
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;"
@ -190,7 +187,7 @@
</row>
<row id="TOSRow" align="center">
<spacer/>
<hbox align="top">
<hbox align="center">
<checkbox id="tos"
accesskey="&setup.tosAgree1.accesskey;"
oncommand="gSyncSetup.checkFields();"/>
@ -221,7 +218,7 @@
</description>
<spacer/>
<vbox>
<groupbox>
<hbox>
<label value="&syncKeyEntry.label;"
accesskey="&syncKeyEntry.accesskey;"
@ -243,9 +240,9 @@
<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;"
@ -261,7 +258,7 @@
oncommand="gSyncUtils.passphraseSave('weavePassphrase');
gSyncSetup.afterBackup();"/>
</hbox>
</vbox>
</groupbox>
</wizardpage>
<wizardpage label="&setup.captchaPage2.title.label;"
@ -386,6 +383,10 @@
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;"
@ -394,33 +395,33 @@
<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">
@ -466,20 +467,12 @@
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>
@ -498,11 +491,7 @@
&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>
@ -521,6 +510,10 @@
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>
@ -529,6 +522,7 @@
<description>
&continueUsing.label;
</description>
<separator flex="1"/>
</wizardpage>
</wizard>

View File

@ -148,6 +148,10 @@
<groupbox>
<caption label="&syncPrefsCaption.label;"/>
<grid>
<columns>
<column/>
<column flex="1"/>
</columns>
<rows>
<row align="center">
<label value="&syncComputerName.label;"
@ -156,30 +160,29 @@
<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"

View File

@ -2,6 +2,10 @@
<!-- 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">

View File

@ -88,12 +88,9 @@ browser.jar:
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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -1,16 +1,59 @@
.wizard-header-icon {
list-style-image: url(chrome://browser/skin/sync-32.png);
}
wizard,
.wizard-page-box,
.wizard-header {
-moz-appearance: none !important;
}
wizard {
background-color: #FFF;
background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
-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-header {
-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-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 */
@ -22,23 +65,6 @@ wizard {
}
.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;
@ -69,43 +95,16 @@ wizard {
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");
}
#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");
#successPageIcon {
/* TODO replace this with a 128px version (bug 591122) */
list-style-image: url("chrome://browser/skin/sync-32.png");
}

View File

@ -128,12 +128,9 @@ browser.jar:
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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -1,16 +1,59 @@
.wizard-header-icon {
list-style-image: url(chrome://browser/skin/sync-32.png);
}
wizard,
.wizard-page-box,
.wizard-header {
-moz-appearance: none !important;
}
wizard {
background-color: #FFF;
background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
-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-header {
-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-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 */
@ -22,23 +65,6 @@ wizard {
}
.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;
@ -69,43 +95,16 @@ wizard {
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");
}
#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");
#successPageIcon {
/* TODO replace this with a 128px version (bug 591122) */
list-style-image: url("chrome://browser/skin/sync-32.png");
}

View File

@ -107,12 +107,9 @@ browser.jar:
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
@ -225,12 +222,9 @@ browser.jar:
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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -1,16 +1,59 @@
.wizard-header-icon {
list-style-image: url(chrome://browser/skin/sync-32.png);
}
wizard,
.wizard-page-box,
.wizard-header {
-moz-appearance: none !important;
}
wizard {
background-color: #FFF;
background: url(chrome://browser/skin/sync-bg.png) #FFF repeat-x center -80px;
-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-header {
-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-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 */
@ -22,23 +65,6 @@ wizard {
}
.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;
@ -69,43 +95,16 @@ wizard {
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");
}
#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");
#successPageIcon {
/* TODO replace this with a 128px version (bug 591122) */
list-style-image: url("chrome://browser/skin/sync-32.png");
}