Bug 1193989 - Make sync preferences responsive with longer strings. r=markh, a=sledru
authorEdouard Oger <edouard.oger@gmail.com>
Wed, 12 Aug 2015 22:44:00 -0400
changeset 288859 96cdc9bfc6512fc7db6b2748e38dc6bacf273971
parent 288858 76c987fe2b25ec4e75b926e678a831cc5f255ded
child 288860 7c4f341f35f1b549a0753a50c062f92662ce81f0
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmarkh, sledru
bugs1193989
milestone42.0a2
Bug 1193989 - Make sync preferences responsive with longer strings. r=markh, a=sledru
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/sync.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -357,17 +357,17 @@ let gSyncPane = {
         document.getElementById("fxaSyncComputerName").value = Weave.Service.clientsEngine.localName;
         let engines = document.getElementById("fxaSyncEngines")
         for (let checkbox of engines.querySelectorAll("checkbox")) {
           checkbox.disabled = !syncReady;
         }
         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.
         return data.verified;
       }).then(isVerified => {
         if (isVerified) {
           return fxAccounts.getSignedInUserProfile();
         }
@@ -380,17 +380,17 @@ let gSyncPane = {
           }
           if (data.avatar) {
             // Make sure the image is available before displaying it,
             // as we don't want to overwrite the default profile image
             // with a broken/unavailable image
             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;
           }
         }
       }, err => {
         FxAccountsCommon.log.error(err);
       }).catch(err => {
         // If we get here something's really busted
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -195,175 +195,180 @@
     <label id="loginErrorStartOver" class="text-link">
       &unlinkDevice.label;
     </label>
   </vbox>
 
   <!-- 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"/>
+      <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>
-    <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>
     <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">
-                  <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 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 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 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 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>
+            <!-- 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>
-              </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"/>
               <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">
+            <vbox align="start" flex="1">
               <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>
       </vbox>
-      <spacer flex="1"/>
-      <image class="fxaSyncIllustration"/>
+      <vbox>
+        <image class="fxaSyncIllustration"/>
+      </vbox>
     </hbox>
     <spacer class="separator"/>
     <groupbox>
       <caption>
         <label accesskey="&syncDeviceName.accesskey;"
                control="fxaSyncComputerName">
           &fxaSyncDeviceName.label;
         </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;"/>
           <button id="fxaCancelChangeDeviceName"
                   label="&cancelChangeSyncDeviceName.label;"
                   hidden="true"/>
           <button id="fxaSaveChangeDeviceName"
                   label="&saveChangeSyncDeviceName.label;"
                   hidden="true"/>
         </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>
+    <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">
         &prefs.tosLink.label;
       </label>
       <label id="tosPP-small-PP" class="text-link">
         &fxaPrivacyNotice.link.label;
       </label>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -367,21 +367,19 @@ description > html|a {
   to   { opacity: 1; }
 }
 
 /**
  * Sync
  */
 
 #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;
 }
 
 #fxaProfileImage.actionable {
   cursor: pointer;
 }
 
 #fxaProfileImage.actionable:hover {
@@ -391,33 +389,44 @@ description > html|a {
 #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;
+  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;
 }
 
 #fxaSyncEngines > vbox:first-child {
   margin-right: 80px;
 }
 
 #fxaSyncComputerName {
   margin-inline-start: 0px;
-  width: 500px;
+  -moz-box-flex: 1;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
   font-weight: bold;
@@ -448,68 +457,71 @@ description > html|a {
   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 {
+.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 {
   list-style-image: url(chrome://browser/skin/warning.svg);
   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;
+  position: relative;
+  top: 8px;
+  margin: 0px;
+  margin-inline-end: 5px;
+}
+
+.androidLink {
+  margin: 0;
 }
 
 #tosPP-small {
   margin-bottom: 20px;
 }
 
 .androidAttribution {
   font-size: 12px;
@@ -522,11 +534,11 @@ description > html|a {
   }
   .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);
+    list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
   }
 }