Sync promo: UI tweaks for new layout.

BUG=101813,100619
TEST=Looks good, works well.
R=sail@chromium.org


Review URL: http://codereview.chromium.org/8437072

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@108578 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 25 insertions, 26 deletions

diff --git a/chrome/browser/resources/sync_promo.css b/chrome/browser/resources/sync_promo.css
index 0a60290..918a48a 100644
--- a/chrome/browser/resources/sync_promo.css
+++ b/chrome/browser/resources/sync_promo.css
@@ -84,6 +84,11 @@ html[dir='rtl'] #sync-setup-login-content-column {
   color: #d14836;
 }
 
+/* When showing the full page promo, remove top margin from sign-in box. */
+#sync-promo .sign-in {
+  margin-top: 0;
+}
+
 #sync-setup-login h1 {
   color: #222;
   font-size: 27px;
diff --git a/chrome/browser/resources/sync_setup_overlay.css b/chrome/browser/resources/sync_setup_overlay.css
index 4683024..c558284 100644
--- a/chrome/browser/resources/sync_setup_overlay.css
+++ b/chrome/browser/resources/sync_setup_overlay.css
@@ -177,22 +177,23 @@
   margin: 0 10px;
 }
 
-#cancel-space-no-captcha {
-  height: 22px;
-}
-
 #top-blurb-error {
-  -webkit-border-radius: 2px;
+  -webkit-transition: margin-top .33s ease-out, opacity .66s ease-out;
   background: #f9edbe;
   border: 1px solid #f0c36d;
   display: block;
   font-weight: bold;
   line-height: 1.5em;
-  margin: 10px auto;
-  padding:0 16px;
-  text-align: center;
-  visibility: hidden;
-  width: 70%;
+  margin-bottom: 10px;
+  opacity: 1;
+  padding: 8px 25px;
+  position: relative;
+}
+
+#top-blurb-error[hidden] {
+  display: block;
+  margin-top: -37px;
+  opacity: 0;
 }
 
 #password-row {
@@ -284,7 +285,7 @@ html[dir='rtl'] #learn-more-link {
 /* Sign in box. */
 
 .sign-in {
-  margin: 0 auto;
+  margin: 20px auto;
   width: 335px;
 }
 
diff --git a/chrome/browser/resources/sync_setup_overlay.html b/chrome/browser/resources/sync_setup_overlay.html
index 8e1ce71..12c5200 100644
--- a/chrome/browser/resources/sync_setup_overlay.html
+++ b/chrome/browser/resources/sync_setup_overlay.html
@@ -6,16 +6,11 @@
         <h1 id="sync-setup-overlay-title"
             i18n-content="syncSetupOverlayTitle">
         </h1>
-        <!-- top-blurb-error's reset state is handled differently from most
-             elements. Instead of being [hidden] it is visibility:hidden so it
-             still takes up space. But it is also [hidden] when we display the
-             captcha, so when it is reset, it needs to be shown. -->
-        <div id="top-blurb-error"
-            class="reset-shown reset-visibility-hidden">
-          <span id="error-signing-in" i18n-content="errorSigningIn"></span>
-          <span id="error-custom" hidden></span>
-        </div>
         <div class="sign-in">
+          <div id="top-blurb-error" class="reset-hidden" hidden>
+            <span id="error-signing-in" i18n-content="errorSigningIn"></span>
+            <span id="error-custom" hidden></span>
+          </div>
           <div class="signin-box">
             <div id="signin-header">
               <h2 i18n-content="signinHeader"></h2>
diff --git a/chrome/browser/resources/sync_setup_overlay.js b/chrome/browser/resources/sync_setup_overlay.js
index a60b29b..8e3a955 100644
--- a/chrome/browser/resources/sync_setup_overlay.js
+++ b/chrome/browser/resources/sync_setup_overlay.js
@@ -609,8 +609,6 @@ cr.define('options', function() {
           function(elt) { elt.disabled = true; });
       forEach(page.getElementsByClassName('reset-enabled'),
           function(elt) { elt.disabled = false; });
-      forEach(page.getElementsByClassName('reset-visibility-hidden'),
-          function(elt) { elt.style.visibility = 'hidden'; });
       forEach(page.getElementsByClassName('reset-value'),
           function(elt) { elt.value = ''; });
       forEach(page.getElementsByClassName('reset-opaque'),
@@ -696,7 +694,7 @@ cr.define('options', function() {
         $('error-custom').hidden = true;
       }
 
-      $('top-blurb-error').style.visibility = "visible";
+      $('top-blurb-error').hidden = false;
       $('gaia-email').disabled = false;
       $('gaia-passwd').disabled = false;
     },
@@ -773,7 +771,7 @@ cr.define('options', function() {
 
     showSuccessAndSettingUp_: function() {
       $('sign-in').value = localStrings.getString('settingUp');
-      $('top-blurb-error').style.visibility = "hidden";
+      $('top-blurb-error').hidden = true;
     },
 
     /**
diff --git a/chrome/browser/sync/resources/gaia_login.js b/chrome/browser/sync/resources/gaia_login.js
index 1212347..2a7bff7 100644
--- a/chrome/browser/sync/resources/gaia_login.js
+++ b/chrome/browser/sync/resources/gaia_login.js
@@ -87,8 +87,8 @@ function showCaptcha(args) {
   g_is_captcha_challenge_active = true;
 
   // The captcha takes up lots of space, so make room.
+  $('top-blurb-error').hidden = true;
   setElementVisible('top-blurb', false);
-  setElementVisible('top-blurb-error', false);
   setElementVisible('create-account-div', false);
   document.getElementById('create-account-cell').height = 0;
 
@@ -200,7 +200,7 @@ function setBlurbError(error_message) {
     document.getElementById('error-signing-in').hidden = false;
     document.getElementById('error-custom').hidden = true;
   }
-  document.getElementById('top-blurb-error').style.visibility = 'visible';
+  document.getElementById('top-blurb-error').hidden = false;
   document.getElementById('email').disabled = false;
   document.getElementById('passwd').disabled = false;
 }