Bug 1149721 - Restyle the Sync preferences page. r=jaws

This commit is contained in:
Edouard Oger 2015-08-04 11:46:00 +02:00
Родитель 31c893bae6
Коммит 40d9e412b9
18 изменённых файлов: 325 добавлений и 154 удалений

Просмотреть файл

@ -240,18 +240,14 @@ let gSyncPane = {
gSyncPane.startOver(true);
return false;
});
setEventListener("noFxaSignUp", "click", function () {
setEventListener("noFxaSignUp", "command", function () {
gSyncPane.signUp();
return false;
});
setEventListener("noFxaSignIn", "click", function () {
setEventListener("noFxaSignIn", "command", function () {
gSyncPane.signIn();
return false;
});
setEventListener("noFxaUseOldSync", "click", function () {
gSyncPane.openOldSyncSupportPage();
return false;
});
setEventListener("verifiedManage", "command",
gSyncPane.manageFirefoxAccount);
setEventListener("fxaUnlinkButton", "click", function () {
@ -259,13 +255,13 @@ let gSyncPane = {
});
setEventListener("verifyFxaAccount", "command",
gSyncPane.verifyFirefoxAccount);
setEventListener("unverifiedUnlinkFxaAccount", "click", function () {
setEventListener("unverifiedUnlinkFxaAccount", "command", function () {
/* no warning as account can't have previously synced */
gSyncPane.unlinkFirefoxAccount(false);
});
setEventListener("rejectReSignIn", "command",
gSyncPane.reSignIn);
setEventListener("rejectUnlinkFxaAccount", "click", function () {
setEventListener("rejectUnlinkFxaAccount", "command", function () {
gSyncPane.unlinkFirefoxAccount(true);
});
setEventListener("tosPP-small-ToS", "click", gSyncPane.openToS);

Просмотреть файл

@ -200,112 +200,133 @@
</vbox>
<!-- These panels are for the Firefox Accounts identity provider -->
<vbox id="noFxaAccount" align="start">
<label>&welcome.description;</label>
<label id="noFxaSignUp" class="text-link">
&welcome.createAccount.label;
</label>
<label id="noFxaSignIn" class="text-link">
&welcome.signIn.label;
</label>
<separator/>
<label id="noFxaUseOldSync" class="text-link">
&welcome.useOldSync.label;
</label>
<vbox id="noFxaAccount">
<hbox>
<groupbox id="noFxaGroup">
<vbox>
<label id="noFxaCaption">&signedOut.caption;</label>
<description id="noFxaDescription" flex="1">&signedOut.description;</description>
<hbox class="fxaAccountBox">
<image class="fxaFirefoxLogo"/>
<vbox>
<label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
<hbox>
<button id="noFxaSignUp" label="&signedOut.accountBox.create;"/>
<button id="noFxaSignIn" label="&signedOut.accountBox.signin;"/>
</hbox>
</vbox>
</hbox>
</vbox>
</groupbox>
<image class="fxaSyncIllustration"/>
</hbox>
<hbox class="fxaMobilePromo">
<label>&mobilePromo.start;</label>
<image class="androidLogo"/>
<label class="text-link"
href="https://www.mozilla.org/firefox/android/">
&mobilePromo.androidLink;
</label>
<label>&mobilePromo.end;</label>
</hbox>
<label class="androidAttribution">&androidAttribution;</label>
</vbox>
<vbox id="hasFxaAccount">
<groupbox id="fxaGroup">
<caption><label>&syncBrand.fxAccount.label;</label></caption>
<hbox>
<vbox>
<groupbox id="fxaGroup">
<caption><label>&syncBrand.fxAccount.label;</label></caption>
<deck id="fxaLoginStatus">
<deck id="fxaLoginStatus">
<!-- logged in and verified and all is good -->
<hbox id="fxaLoginVerified"
align="center">
<hbox align="center">
<image id="fxaProfileImage"
onclick="gSyncPane.openChangeProfileImage();" hidden="true"
tooltiptext="&profilePicture.tooltip;"/>
<label id="fxaEmailAddress1"/>
<label id="fxaDisplayName" hidden="true"/>
<!-- logged in and verified and all is good -->
<hbox id="fxaLoginVerified" class="fxaAccountBox">
<image id="fxaProfileImage"
onclick="gSyncPane.openChangeProfileImage();" hidden="true"
tooltiptext="&profilePicture.tooltip;" class="actionable"/>
<vbox>
<label id="fxaEmailAddress1"/>
<label id="fxaDisplayName" hidden="true"/>
<hbox class="fxaAccountBoxButtons">
<button id="verifiedManage" label="&manage.label;"/>
<button id="fxaUnlinkButton" label="&disconnect.label;"/>
</hbox>
</vbox>
</hbox>
<!-- logged in to an unverified account -->
<hbox id="fxaLoginUnverified" class="fxaAccountBox">
<image id="fxaProfileImage"/>
<vbox>
<hbox>
<vbox><image id="fxaLoginRejectedWarning"/></vbox>
<description>
&signedInUnverified.beforename.label;
<label id="fxaEmailAddress2"/>
&signedInUnverified.aftername.label;
</description>
</hbox>
<hbox class="fxaAccountBoxButtons">
<button id="verifyFxaAccount" label="&verify.label;"/>
<button id="unverifiedUnlinkFxaAccount" label="&forget.label;"/>
</hbox>
</vbox>
</hbox>
<!-- logged in locally but server rejected credentials -->
<hbox id="fxaLoginRejected" class="fxaAccountBox">
<image id="fxaProfileImage"/>
<vbox>
<hbox>
<vbox><image id="fxaLoginRejectedWarning"/></vbox>
<description>
&signedInLoginFailure.beforename.label;
<label id="fxaEmailAddress3"/>
&signedInLoginFailure.aftername.label;
</description>
</hbox>
<hbox class="fxaAccountBoxButtons">
<button id="rejectReSignIn" label="&signIn.label;"/>
<button id="rejectUnlinkFxaAccount" label="&forget.label;"/>
</hbox>
</vbox>
</hbox>
</deck>
</groupbox>
<groupbox id="syncOptions">
<caption><label>&signedIn.engines.caption;</label></caption>
<hbox id="fxaSyncEngines">
<vbox align="start">
<checkbox label="&engine.tabs.label;"
accesskey="&engine.tabs.accesskey;"
preference="engine.tabs"/>
<checkbox label="&engine.bookmarks.label;"
accesskey="&engine.bookmarks.accesskey;"
preference="engine.bookmarks"/>
<checkbox label="&engine.passwords.label;"
accesskey="&engine.passwords.accesskey;"
preference="engine.passwords"/>
</vbox>
<vbox align="start">
<checkbox label="&engine.history.label;"
accesskey="&engine.history.accesskey;"
preference="engine.history"/>
<checkbox label="&engine.addons.label;"
accesskey="&engine.addons.accesskey;"
preference="engine.addons"/>
<checkbox label="&engine.prefs.label;"
accesskey="&engine.prefs.accesskey;"
preference="engine.prefs"/>
</vbox>
<spacer/>
</hbox>
<spacer flex="1"/>
<button id="verifiedManage"
label="&manage.label;"/>
<button id="fxaUnlinkButton"
label="&disconnect.label;"/>
</hbox>
<!-- logged in to an unverified account -->
<hbox id="fxaLoginUnverified"
flex="1">
<description>
&signedInUnverified.beforename.label;
<label id="fxaEmailAddress2"/>
&signedInUnverified.aftername.label;
</description>
<spacer flex="1"/>
<vbox align="end">
<button id="verifyFxaAccount"
label="&verify.label;"/>
<label id="unverifiedUnlinkFxaAccount" class="text-link">
&forget.label;
</label>
</vbox>
</hbox>
<!-- logged in locally but server rejected credentials -->
<hbox id="fxaLoginRejected"
flex="1">
<vbox>
<image id="fxaLoginRejectedWarning"/>
</vbox>
<description>
&signedInLoginFailure.beforename.label;
<label id="fxaEmailAddress3"/>
&signedInLoginFailure.aftername.label;
</description>
<spacer flex="1"/>
<vbox align="end">
<button id="rejectReSignIn"
label="&signIn.label;"/>
<label id="rejectUnlinkFxaAccount" class="text-link">
&forget.label;
</label>
</vbox>
</hbox>
</deck>
</groupbox>
<groupbox id="syncOptions">
<caption><label>&syncBrand.shortName.label;</label></caption>
<hbox id="fxaSyncEngines">
<vbox align="start">
<checkbox label="&engine.tabs.label;"
accesskey="&engine.tabs.accesskey;"
preference="engine.tabs"/>
<checkbox label="&engine.bookmarks.label;"
accesskey="&engine.bookmarks.accesskey;"
preference="engine.bookmarks"/>
<checkbox label="&engine.passwords.label;"
accesskey="&engine.passwords.accesskey;"
preference="engine.passwords"/>
</vbox>
<vbox align="start">
<checkbox label="&engine.history.label;"
accesskey="&engine.history.accesskey;"
preference="engine.history"/>
<checkbox label="&engine.addons.label;"
accesskey="&engine.addons.accesskey;"
preference="engine.addons"/>
<checkbox label="&engine.prefs.label;"
accesskey="&engine.prefs.accesskey;"
preference="engine.prefs"/>
</vbox>
<spacer/>
</hbox>
</groupbox>
</groupbox>
</vbox>
<spacer flex="1"/>
<image class="fxaSyncIllustration"/>
</hbox>
<spacer class="separator"/>
<groupbox>
<caption>
<label accesskey="&syncDeviceName.accesskey;"
@ -314,9 +335,10 @@
</label>
</caption>
<hbox id="fxaDeviceName">
<hbox flex="1">
<hbox>
<textbox id="fxaSyncComputerName" disabled="true" flex="1"/>
</hbox>
<spacer flex="1"/>
<hbox>
<button id="fxaChangeDeviceName"
label="&changeSyncDeviceName.label;"/>
@ -329,6 +351,16 @@
</hbox>
</hbox>
</groupbox>
<spacer class="separator"/>
<hbox class="fxaMobilePromo">
<label>&mobilePromo.start;</label>
<image class="androidLogo"/>
<label class="text-link"
href="https://www.mozilla.org/firefox/android/">
&mobilePromo.androidLink;
</label>
<label>&mobilePromo.end;</label>
</hbox>
<spacer flex="1"/>
<vbox id="tosPP-small">
<label id="tosPP-small-ToS" class="text-link">
@ -338,5 +370,6 @@
&fxaPrivacyNotice.link.label;
</label>
</vbox>
<label class="androidAttribution">&androidAttribution;</label>
</vbox>
</deck>

Просмотреть файл

@ -83,3 +83,17 @@ both, to better adapt this sentence to their language.
<!ENTITY welcome.createAccount.label "Create Account">
<!ENTITY welcome.useOldSync.label "Using an older version of Sync?">
<!ENTITY signedOut.caption "Take your Web with you">
<!ENTITY signedOut.description "Synchronize your bookmarks, history, tabs, passwords, add-ons, and preferences across all your devices.">
<!ENTITY signedOut.accountBox.title "Connect with a &syncBrand.fxAccount.label;">
<!ENTITY signedOut.accountBox.create "Create Account">
<!ENTITY signedOut.accountBox.signin "Sign In">
<!ENTITY signedIn.engines.caption "Sync between all devices">
<!ENTITY mobilePromo.start "Download Firefox for ">
<!-- LOCALIZATION NOTE (mobilePromo.androidLink): This is a link title that links to https://www.mozilla.org/firefox/android/ -->
<!ENTITY mobilePromo.androidLink "Android™">
<!ENTITY mobilePromo.end " to sync with your mobile device.">
<!ENTITY androidAttribution "Android is a trademark of Google Inc.">

Просмотреть файл

@ -222,7 +222,14 @@ browser.jar:
skin/classic/browser/preferences/in-content/favicon.ico (../shared/incontentprefs/favicon.ico)
skin/classic/browser/preferences/in-content/icons.svg (../shared/incontentprefs/icons.svg)
skin/classic/browser/preferences/in-content/search.css (../shared/incontentprefs/search.css)
skin/classic/browser/fxa/default-profile-image.svg (../shared/fxa/default-profile-image.svg)
skin/classic/browser/fxa/default-avatar.png (../shared/fxa/default-avatar.png)
skin/classic/browser/fxa/default-avatar@2x.png (../shared/fxa/default-avatar@2x.png)
skin/classic/browser/fxa/logo.png (../shared/fxa/logo.png)
skin/classic/browser/fxa/logo@2x.png (../shared/fxa/logo@2x.png)
skin/classic/browser/fxa/sync-illustration.png (../shared/fxa/sync-illustration.png)
skin/classic/browser/fxa/sync-illustration@2x.png (../shared/fxa/sync-illustration@2x.png)
skin/classic/browser/fxa/android.png (../shared/fxa/android.png)
skin/classic/browser/fxa/android@2x.png (../shared/fxa/android@2x.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
skin/classic/browser/preferences/search.css (preferences/search.css)

Просмотреть файл

@ -298,7 +298,14 @@ browser.jar:
skin/classic/browser/preferences/in-content/favicon.ico (../shared/incontentprefs/favicon.ico)
skin/classic/browser/preferences/in-content/icons.svg (../shared/incontentprefs/icons.svg)
skin/classic/browser/preferences/in-content/search.css (../shared/incontentprefs/search.css)
skin/classic/browser/fxa/default-profile-image.svg (../shared/fxa/default-profile-image.svg)
skin/classic/browser/fxa/default-avatar.png (../shared/fxa/default-avatar.png)
skin/classic/browser/fxa/default-avatar@2x.png (../shared/fxa/default-avatar@2x.png)
skin/classic/browser/fxa/logo.png (../shared/fxa/logo.png)
skin/classic/browser/fxa/logo@2x.png (../shared/fxa/logo@2x.png)
skin/classic/browser/fxa/sync-illustration.png (../shared/fxa/sync-illustration.png)
skin/classic/browser/fxa/sync-illustration@2x.png (../shared/fxa/sync-illustration@2x.png)
skin/classic/browser/fxa/android.png (../shared/fxa/android.png)
skin/classic/browser/fxa/android@2x.png (../shared/fxa/android@2x.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
skin/classic/browser/preferences/search.css (preferences/search.css)

Просмотреть файл

@ -238,10 +238,6 @@ html|a.inline-link:-moz-focusring {
margin-bottom: 1em;
}
#fxaUnlinkButton {
margin: 0;
}
#noFxaAccount {
margin: 12px 4px;
line-height: 1.2em;

Просмотреть файл

@ -702,7 +702,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
}
#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
list-style-image: url(chrome://browser/skin/fxa/default-avatar.png)
}
#PanelUI-customize:hover,
@ -1498,6 +1498,10 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
list-style-image: url(chrome://branding/content/icon32.png);
}
#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png)
}
#PanelUI-fxa-label,
#PanelUI-fxa-icon {
list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);

Двоичные данные
browser/themes/shared/fxa/android.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 15 KiB

Двоичные данные
browser/themes/shared/fxa/android@2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 736 B

Двоичные данные
browser/themes/shared/fxa/default-avatar.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичные данные
browser/themes/shared/fxa/default-avatar@2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.5 KiB

Просмотреть файл

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<path fill="#c3cfd8" d="M500-0.3c276.1,0,500,223.9,500,500s-223.9,500-500,500S0,775.8,0,499.7C0,223.5,223.9-0.3,500-0.3z"/>
<circle fill="#fff" cx="500" cy="317" r="139.1"/>
<path fill="#fff" d="M751.8,643.6L751.8,643.6c0.1-2.3,0.2-4.6,0.2-6.9c0-68-55.3-127-136.2-156.3L505.9,590.4h0 c-0.4,29.8-1.4,58.8-2.8,86.6c-1,0.1-2,0.3-3.1,0.3s-2-0.2-3.1-0.3c-1.4-27.9-2.4-56.9-2.8-86.7h0L384.3,480.4 C303.3,509.7,248,568.7,248,636.7c0,2.3,0.1,4.6,0.2,6.9l7.4,49.7c57.1,72,145.4,118.2,244.4,118.2c99,0,187.3-46.2,244.4-118.2 L751.8,643.6z"/>
</svg>

До

Ширина:  |  Высота:  |  Размер: 861 B

Двоичные данные
browser/themes/shared/fxa/logo.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 17 KiB

Двоичные данные
browser/themes/shared/fxa/logo@2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.4 KiB

Двоичные данные
browser/themes/shared/fxa/sync-illustration.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 18 KiB

Двоичные данные
browser/themes/shared/fxa/sync-illustration@2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 8.5 KiB

Просмотреть файл

@ -223,32 +223,6 @@ description > html|a {
cursor: pointer;
}
#fxaProfileImage {
width: 60px;
height: 60px;
border-radius: 50%;
border-width: 5px;
border-color: red;
background-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
background-size: contain;
cursor: pointer;
-moz-margin-end: 15px;
}
#fxaProfileImage:hover {
box-shadow: 0px 0px 0px 1px #0095DD;
}
#fxaProfileImage:active {
box-shadow: 0px 0px 0px 1px #ff9500;
}
#noFxaAccount {
/* Overriding the margins from the base preferences.css theme file.
These overrides can be simplified by fixing bug 1027174 */
margin: 0;
}
#weavePrefsDeck > vbox > label,
#weavePrefsDeck > vbox > groupbox,
#weavePrefsDeck > vbox > description,
@ -397,16 +371,123 @@ description > html|a {
* Sync
*/
#fxaProfileImage {
width: 60px;
max-height: 60px;
border-radius: 50%;
background-image: url(chrome://browser/skin/fxa/default-avatar.png);
background-size: contain;
margin-inline-end: 15px;
}
#fxaProfileImage.actionable {
cursor: pointer;
}
#fxaProfileImage.actionable:hover {
box-shadow: 0px 0px 0px 1px #0095DD;
}
#fxaProfileImage.actionable:hover:active {
box-shadow: 0px 0px 0px 1px #ff9500;
}
#noFxaAccount {
/* Overriding the margins from the base preferences.css theme file.
These overrides can be simplified by fixing bug 1027174 */
margin: 0;
}
#noFxaGroup {
-moz-box-flex: 1;
}
#noFxaGroup > vbox {
-moz-box-align: start;
}
#fxaSyncEngines > vbox:first-child {
margin-right: 80px;
}
#fxaSyncComputerName {
margin-left: 0px;
margin-inline-start: 0px;
width: 500px;
}
#tosPP-small-ToS {
margin-bottom: 1em;
margin-bottom: 14px;
}
#noFxaCaption {
font-weight: bold;
margin-bottom: 11px;
}
.fxaSyncIllustration {
margin-top: 35px;
}
#syncOptions caption {
margin-bottom: 11px;
}
#fxaDeviceName {
margin-bottom: 27.5px;
}
#noFxaDescription {
margin-bottom: 20px !important;
}
.separator {
border-bottom: 1px solid var(--in-content-header-border-color);
}
.fxaAccountBox {
border: 1px solid #D1D2D3;
border-radius: 5px;
padding: 14px 20px 14px 14px;
}
#signedOutAccountBoxTitle {
margin-inline-start: 6px !important;
font-weight: bold;
margin-bottom: 11px;
}
.fxaAccountBox button {
padding-left: 11px;
padding-right: 11px;
}
.fxaSyncIllustration {
width: 231px;
max-height: 200px;
list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
}
.fxaFirefoxLogo {
list-style-image: url(chrome://browser/skin/fxa/logo.png);
max-width: 64px;
margin-inline-end: 14px;
}
#noFxaAccount .fxaMobilePromo {
margin-bottom: 55px;
}
#hasFxaAccount .fxaMobilePromo {
margin-bottom: 41px;
margin-top: 27.5px;
}
.fxaMobilePromo > label {
margin-inline-start: 0;
}
#hasFxaAccount .fxaAccountBoxButtons {
margin-top: 11px;
}
#fxaLoginRejectedWarning {
@ -414,3 +495,38 @@ description > html|a {
filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
margin: 4px 8px 0px 0px;
}
#syncOptions {
margin-bottom: 27.5px;
}
.androidLogo {
list-style-image: url(chrome://browser/skin/fxa/android.png);
max-width: 24px;
margin-top: -4px;
margin-inline-end: 4px;
}
#tosPP-small {
margin-bottom: 20px;
}
.androidAttribution {
font-size: 12px;
color: #D1D2D3;
}
@media (min-resolution: 1.1dppx) {
.fxaSyncIllustration {
list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
}
.fxaFirefoxLogo {
list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
}
.androidLogo {
list-style-image: url(chrome://browser/skin/fxa/android@2x.png);
}
#fxaProfileImage {
background-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
}
}

Просмотреть файл

@ -307,7 +307,14 @@ browser.jar:
skin/classic/browser/preferences/in-content/favicon.ico (../shared/incontentprefs/favicon.ico)
skin/classic/browser/preferences/in-content/icons.svg (../shared/incontentprefs/icons.svg)
skin/classic/browser/preferences/in-content/search.css (../shared/incontentprefs/search.css)
skin/classic/browser/fxa/default-profile-image.svg (../shared/fxa/default-profile-image.svg)
skin/classic/browser/fxa/default-avatar.png (../shared/fxa/default-avatar.png)
skin/classic/browser/fxa/default-avatar@2x.png (../shared/fxa/default-avatar@2x.png)
skin/classic/browser/fxa/logo.png (../shared/fxa/logo.png)
skin/classic/browser/fxa/logo@2x.png (../shared/fxa/logo@2x.png)
skin/classic/browser/fxa/sync-illustration.png (../shared/fxa/sync-illustration.png)
skin/classic/browser/fxa/sync-illustration@2x.png (../shared/fxa/sync-illustration@2x.png)
skin/classic/browser/fxa/android.png (../shared/fxa/android.png)
skin/classic/browser/fxa/android@2x.png (../shared/fxa/android@2x.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
skin/classic/browser/preferences/search.css (preferences/search.css)