Fade in the demo login UI's logo and text.

This CL fades in the Chrome logo on the demo login UI after 1s and the text fades in, in the 1s after that.

R=xiyuan@chromium.org
BUG=chromium-os:28634
TEST=Tested the fade in screen with the --enable-kiosk-mode flag.

Review URL: https://chromiumcodereview.appspot.com/10024023

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

2 files changed, 8 insertions, 0 deletions

diff --git a/chrome/browser/resources/chromeos/login/demo_user_login.css b/chrome/browser/resources/chromeos/login/demo_user_login.css
index 94e15ca..296d0fb 100644
--- a/chrome/browser/resources/chromeos/login/demo_user_login.css
+++ b/chrome/browser/resources/chromeos/login/demo_user_login.css
@@ -30,10 +30,15 @@ body {
 }
 
 #logo {
+  -webkit-transition: opacity 1s linear;
+  opacity: 0;
   width: 150px;
 }
 
 #demo-login-text {
+  /* Delay the login text showing up till the logo has fully faded in */
+  -webkit-transition: opacity 1s linear 1s;
   font-size: 24px;
+  opacity: 0;
   padding-top: 80px;
 }
diff --git a/chrome/browser/resources/chromeos/login/demo_user_login.js b/chrome/browser/resources/chromeos/login/demo_user_login.js
index d898728..7b758b7 100644
--- a/chrome/browser/resources/chromeos/login/demo_user_login.js
+++ b/chrome/browser/resources/chromeos/login/demo_user_login.js
@@ -9,6 +9,7 @@
 /**
  * Handles a user clicking anywhere on the screen. This will log the demo user
  * in. Yes, this actually _is the intention.
+ * @param {Event} e The click event that triggered this function.
  */
 onClick = function(e) {
   document.removeEventListener('click', onClick);
@@ -20,6 +21,8 @@ onClick = function(e) {
  * Initializes the click handler.
  */
 initialize = function() {
+  $('logo').style.opacity = 1;
+  $('demo-login-text').style.opacity = 1;
   document.addEventListener('click', onClick);
 };