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

browser/components/preferences/in-content/sync.js

@@ -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);

browser/components/preferences/in-content/sync.xul

@@ -200,112 +200,133 @@
   </vbox>
 
   <!-- These panels are for the Firefox Accounts identity provider -->
-  <vbox id="noFxaAccount" align="start">
+  <vbox id="noFxaAccount">
-    <label>&welcome.description;</label>
+    <hbox>
-    <label id="noFxaSignUp" class="text-link">
+      <groupbox id="noFxaGroup">
-      &welcome.createAccount.label;
+        <vbox>
-    </label>
+          <label id="noFxaCaption">&signedOut.caption;</label>
-    <label id="noFxaSignIn" class="text-link">
+          <description id="noFxaDescription" flex="1">&signedOut.description;</description>
-      &welcome.signIn.label;
+          <hbox class="fxaAccountBox">
-    </label>
+            <image class="fxaFirefoxLogo"/>
-    <separator/>
+            <vbox>
-    <label id="noFxaUseOldSync" class="text-link">
+              <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
-      &welcome.useOldSync.label;
+              <hbox>
-    </label>
+                <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">
+    <hbox>
-      <caption><label>&syncBrand.fxAccount.label;</label></caption>
+      <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 -->
+                <!-- logged in and verified and all is good -->
-        <hbox id="fxaLoginVerified"
+                <hbox id="fxaLoginVerified" class="fxaAccountBox">
-              align="center">
+                  <image id="fxaProfileImage"
-          <hbox align="center">
+                      onclick="gSyncPane.openChangeProfileImage();" hidden="true"
-            <image id="fxaProfileImage"
+                      tooltiptext="&profilePicture.tooltip;" class="actionable"/>
-              onclick="gSyncPane.openChangeProfileImage();" hidden="true"
+                  <vbox>
-              tooltiptext="&profilePicture.tooltip;"/>
+                    <label id="fxaEmailAddress1"/>
-            <label id="fxaEmailAddress1"/>
+                    <label id="fxaDisplayName" hidden="true"/>
-            <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"/>
+        </groupbox>
-          <button id="verifiedManage"
+      </vbox>
-                  label="&manage.label;"/>
+      <spacer flex="1"/>
-          <button id="fxaUnlinkButton"
+      <image class="fxaSyncIllustration"/>
-                  label="&disconnect.label;"/>
+    </hbox>
-        </hbox>
+    <spacer class="separator"/>
-
-        <!-- 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>
       <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>

browser/locales/en-US/chrome/browser/preferences/sync.dtd

@@ -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.">

browser/themes/linux/jar.mn

@@ -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)

browser/themes/osx/jar.mn

@@ -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)

browser/themes/osx/preferences/preferences.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;

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -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/default-profile-image.svg

@@ -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>

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -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);
+  }
+}

browser/themes/windows/jar.mn

@@ -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)