зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1193989 - Make sync preferences responsive with longer strings. r=markh
This commit is contained in:
Edouard Oger
Родитель
c8319bd6b1
Коммит
8c9cca4fc0
|
|
@ -362,7 +362,7 @@ let gSyncPane = {
|
|||
document.getElementById("fxaChangeDeviceName").disabled = !syncReady;
|
||||
|
||||
// Clear the profile image (if any) of the previously logged in account.
|
||||
document.getElementById("fxaProfileImage").style.removeProperty("background-image");
|
||||
document.getElementById("fxaProfileImage").style.removeProperty("list-style-image");
|
||||
|
||||
// If the account is verified the next promise in the chain will
|
||||
// fetch profile data.
|
||||
|
|
@ -385,7 +385,7 @@ let gSyncPane = {
|
|||
let img = new Image();
|
||||
img.onload = () => {
|
||||
let bgImage = "url('" + data.avatar + "')";
|
||||
document.getElementById("fxaProfileImage").style.backgroundImage = bgImage;
|
||||
document.getElementById("fxaProfileImage").style.listStyleImage = bgImage;
|
||||
};
|
||||
img.src = data.avatar;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -200,102 +200,111 @@
|
|||
<!-- These panels are for the Firefox Accounts identity provider -->
|
||||
<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>
|
||||
<vbox id="fxaContentWrapper">
|
||||
<groupbox id="noFxaGroup">
|
||||
<vbox>
|
||||
<label id="noFxaCaption">&signedOut.caption;</label>
|
||||
<description id="noFxaDescription" flex="1">&signedOut.description;</description>
|
||||
<hbox class="fxaAccountBox">
|
||||
<vbox>
|
||||
<image class="fxaFirefoxLogo"/>
|
||||
</vbox>
|
||||
<vbox flex="1">
|
||||
<label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
|
||||
<description class="fxaAccountBoxButtons">
|
||||
<button id="noFxaSignUp">&signedOut.accountBox.create;</button>
|
||||
<button id="noFxaSignIn">&signedOut.accountBox.signin;</button>
|
||||
</description>
|
||||
</vbox>
|
||||
</hbox>
|
||||
</vbox>
|
||||
</groupbox>
|
||||
</vbox>
|
||||
<vbox>
|
||||
<image class="fxaSyncIllustration"/>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<label class="fxaMobilePromo">
|
||||
&mobilePromo.start;<!-- We put these comments to avoid inserting white spaces
|
||||
--><image class="androidLogo"/><!--
|
||||
--><label class="androidLink text-link" href="https://www.mozilla.org/firefox/android/"><!--
|
||||
-->&mobilePromo.androidLink;</label><!--
|
||||
-->&mobilePromo.end;
|
||||
</label>
|
||||
<label class="androidAttribution">&androidAttribution;</label>
|
||||
</vbox>
|
||||
|
||||
<vbox id="hasFxaAccount">
|
||||
<hbox>
|
||||
<vbox>
|
||||
<vbox id="fxaContentWrapper">
|
||||
<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" class="fxaAccountBox">
|
||||
<vbox>
|
||||
<image id="fxaProfileImage"
|
||||
onclick="gSyncPane.openChangeProfileImage();" hidden="true"
|
||||
tooltiptext="&profilePicture.tooltip;" class="actionable"/>
|
||||
</vbox>
|
||||
<vbox flex="1">
|
||||
<label id="fxaEmailAddress1"/>
|
||||
<label id="fxaDisplayName" hidden="true"/>
|
||||
<description class="fxaAccountBoxButtons">
|
||||
<button id="verifiedManage">&manage.label;</button>
|
||||
<button id="fxaUnlinkButton">&disconnect.label;</button>
|
||||
</description>
|
||||
</vbox>
|
||||
</hbox>
|
||||
|
||||
<!-- 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>
|
||||
<!-- logged in to an unverified account -->
|
||||
<hbox id="fxaLoginUnverified" class="fxaAccountBox">
|
||||
<vbox>
|
||||
<image id="fxaProfileImage"/>
|
||||
</vbox>
|
||||
<vbox flex="1">
|
||||
<hbox>
|
||||
<vbox><image id="fxaLoginRejectedWarning"/></vbox>
|
||||
<description flex="1">
|
||||
&signedInUnverified.beforename.label;
|
||||
<label id="fxaEmailAddress2"/>
|
||||
&signedInUnverified.aftername.label;
|
||||
</description>
|
||||
</hbox>
|
||||
<description class="fxaAccountBoxButtons">
|
||||
<button id="verifyFxaAccount">&verify.label;</button>
|
||||
<button id="unverifiedUnlinkFxaAccount">&forget.label;</button>
|
||||
</description>
|
||||
</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>
|
||||
<!-- logged in locally but server rejected credentials -->
|
||||
<hbox id="fxaLoginRejected" class="fxaAccountBox">
|
||||
<vbox>
|
||||
<image id="fxaProfileImage"/>
|
||||
</vbox>
|
||||
<vbox flex="1">
|
||||
<hbox>
|
||||
<vbox><image id="fxaLoginRejectedWarning"/></vbox>
|
||||
<description flex="1">
|
||||
&signedInLoginFailure.beforename.label;
|
||||
<label id="fxaEmailAddress3"/>
|
||||
&signedInLoginFailure.aftername.label;
|
||||
</description>
|
||||
</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>
|
||||
<description class="fxaAccountBoxButtons">
|
||||
<button id="rejectReSignIn">&signIn.label;</button>
|
||||
<button id="rejectUnlinkFxaAccount">&forget.label;</button>
|
||||
</description>
|
||||
</vbox>
|
||||
</hbox>
|
||||
</deck>
|
||||
</groupbox>
|
||||
<groupbox id="syncOptions">
|
||||
<caption><label>&signedIn.engines.label;</label></caption>
|
||||
<hbox id="fxaSyncEngines">
|
||||
<vbox align="start">
|
||||
<vbox align="start" flex="1">
|
||||
<checkbox label="&engine.tabs.label;"
|
||||
accesskey="&engine.tabs.accesskey;"
|
||||
preference="engine.tabs"/>
|
||||
|
|
@ -306,7 +315,7 @@
|
|||
accesskey="&engine.passwords.accesskey;"
|
||||
preference="engine.passwords"/>
|
||||
</vbox>
|
||||
<vbox align="start">
|
||||
<vbox align="start" flex="1">
|
||||
<checkbox label="&engine.history.label;"
|
||||
accesskey="&engine.history.accesskey;"
|
||||
preference="engine.history"/>
|
||||
|
|
@ -321,8 +330,9 @@
|
|||
</hbox>
|
||||
</groupbox>
|
||||
</vbox>
|
||||
<spacer flex="1"/>
|
||||
<image class="fxaSyncIllustration"/>
|
||||
<vbox>
|
||||
<image class="fxaSyncIllustration"/>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<spacer class="separator"/>
|
||||
<groupbox>
|
||||
|
|
@ -333,10 +343,7 @@
|
|||
</label>
|
||||
</caption>
|
||||
<hbox id="fxaDeviceName">
|
||||
<hbox>
|
||||
<textbox id="fxaSyncComputerName" disabled="true" flex="1"/>
|
||||
</hbox>
|
||||
<spacer flex="1"/>
|
||||
<textbox id="fxaSyncComputerName" disabled="true"/>
|
||||
<hbox>
|
||||
<button id="fxaChangeDeviceName"
|
||||
label="&changeSyncDeviceName.label;"/>
|
||||
|
|
@ -350,15 +357,13 @@
|
|||
</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>
|
||||
<label class="fxaMobilePromo">
|
||||
&mobilePromo.start;<!-- We put these comments to avoid inserting white spaces
|
||||
--><image class="androidLogo"/><!--
|
||||
--><label class="androidLink text-link" href="https://www.mozilla.org/firefox/android/"><!--
|
||||
-->&mobilePromo.androidLink;</label><!--
|
||||
-->&mobilePromo.end;
|
||||
</label>
|
||||
<spacer flex="1"/>
|
||||
<vbox id="tosPP-small" align="start">
|
||||
<label id="tosPP-small-ToS" class="text-link">
|
||||
|
|
|
|||
|
|
@ -372,11 +372,9 @@ description > html|a {
|
|||
*/
|
||||
|
||||
#fxaProfileImage {
|
||||
width: 60px;
|
||||
max-height: 60px;
|
||||
max-width: 60px;
|
||||
border-radius: 50%;
|
||||
background-image: url(chrome://browser/skin/fxa/default-avatar.png);
|
||||
background-size: contain;
|
||||
list-style-image: url(chrome://browser/skin/fxa/default-avatar.png);
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -396,13 +394,24 @@ description > html|a {
|
|||
/* Overriding the margins from the base preferences.css theme file.
|
||||
These overrides can be simplified by fixing bug 1027174 */
|
||||
margin: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
#fxaContentWrapper {
|
||||
-moz-box-flex: 1;
|
||||
}
|
||||
|
||||
#noFxaGroup {
|
||||
-moz-box-flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#noFxaGroup > vbox {
|
||||
#fxaContentWrapper {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#noFxaGroup > vbox,
|
||||
#fxaGroup {
|
||||
-moz-box-align: start;
|
||||
}
|
||||
|
||||
|
|
@ -412,7 +421,7 @@ description > html|a {
|
|||
|
||||
#fxaSyncComputerName {
|
||||
margin-inline-start: 0px;
|
||||
width: 500px;
|
||||
-moz-box-flex: 1;
|
||||
}
|
||||
|
||||
#tosPP-small-ToS {
|
||||
|
|
@ -453,41 +462,38 @@ description > html|a {
|
|||
#signedOutAccountBoxTitle {
|
||||
margin-inline-start: 6px !important;
|
||||
font-weight: bold;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.fxaAccountBox button {
|
||||
.fxaAccountBoxButtons {
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.fxaAccountBoxButtons > button {
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
}
|
||||
|
||||
.fxaSyncIllustration {
|
||||
width: 231px;
|
||||
max-height: 200px;
|
||||
list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
|
||||
}
|
||||
|
||||
#fxaEmailAddress1,
|
||||
#fxaEmailAddress2,
|
||||
#fxaEmailAddress3 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.fxaMobilePromo {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 41px;
|
||||
margin-top: 27.5px;
|
||||
}
|
||||
|
||||
.fxaMobilePromo > label {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
#hasFxaAccount .fxaAccountBoxButtons {
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
#fxaLoginRejectedWarning {
|
||||
|
|
@ -503,8 +509,14 @@ description > html|a {
|
|||
.androidLogo {
|
||||
list-style-image: url(chrome://browser/skin/fxa/android.png);
|
||||
max-width: 24px;
|
||||
margin-top: -4px;
|
||||
margin-inline-end: 4px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
margin: 0px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
.androidLink {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#tosPP-small {
|
||||
|
|
@ -527,6 +539,6 @@ description > html|a {
|
|||
list-style-image: url(chrome://browser/skin/fxa/android@2x.png);
|
||||
}
|
||||
#fxaProfileImage {
|
||||
background-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
|
||||
list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче