[cros] OOBE transitions polishing.

*) Animation time shortened to 200ms.
*) Progress bar hidden during initial transition.
*) Update screen size fixed.
*) Screens are not forced to have equal size in old UI.
*) No initial border flicking on login screen.
*) No initial network dropdown flickering in OOBE (no slightest idea why).

BUG=141560

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

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

chrome/browser/resources/chromeos/login/display_manager.js

@@ -235,8 +235,14 @@ cr.define('cr.ui.login', function() {
         }
       } else {
         // First screen on OOBE launch.
-        $('inner-container').classList.remove('down');
-        newHeader.classList.remove('right');
+        var innerContainer = $('inner-container');
+        innerContainer.classList.remove('down');
+        innerContainer.addEventListener(
+            'webkitTransitionEnd', function f(e) {
+              innerContainer.removeEventListener('webkitTransitionEnd', f);
+              $('progress-dots').classList.remove('down');
+            });
+        newHeader.classList.remove('right');  // Old OOBE.
         // Report back first OOBE screen being painted.
         window.webkitRequestAnimationFrame(function() {
           chrome.send('loginVisible');
@@ -320,20 +326,22 @@ cr.define('cr.ui.login', function() {
     updateInnerContainerSize_: function(screen) {
       var height = screen.offsetHeight;
       var width = screen.offsetWidth;
-      for (var i = 0, screenGroup; screenGroup = SCREEN_GROUPS[i]; i++) {
-        if (screenGroup.indexOf(screen.id) != -1) {
-          // Set screen dimensions to maximum dimensions within this group.
-          for (var j = 0, screen2; screen2 = $(screenGroup[j]); j++) {
-            height = Math.max(height, screen2.offsetHeight);
-            width = Math.max(width, screen2.offsetWidth);
+      if (this.isNewOobe()) {
+        for (var i = 0, screenGroup; screenGroup = SCREEN_GROUPS[i]; i++) {
+          if (screenGroup.indexOf(screen.id) != -1) {
+            // Set screen dimensions to maximum dimensions within this group.
+            for (var j = 0, screen2; screen2 = $(screenGroup[j]); j++) {
+              height = Math.max(height, screen2.offsetHeight);
+              width = Math.max(width, screen2.offsetWidth);
+            }
+            break;
           }
-          break;
         }
       }
       $('inner-container').style.height = height + 'px';
       if (this.isNewOobe()) {
         $('inner-container').style.width = width + 'px';
-        // This requires |screen| to have |box-sizing: border-box|.
+        // This requires |screen| to have 'box-sizing: border-box'.
         screen.style.width = width + 'px';
         screen.style.height = height + 'px';
       }

chrome/browser/resources/chromeos/login/oobe.css

@@ -102,25 +102,29 @@ html[oobe=old] #inner-container {
 }
 
 html[oobe=new] #inner-container {
-  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
-                                      rgba(255,255,255,0.95));
   border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
-              0 4px 23px 5px rgba(0, 0, 0, 0.2),
-              0 2px 6px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   padding: 0;
 }
 
-/* Account picker has no border and background. */
-html[oobe=new] .account-picker #inner-container {
-  background: none;
-  box-shadow: none;
+/* Screens that have a border and background. */
+html[oobe=new] #oobe.connect #inner-container,
+html[oobe=new] #oobe.eula #inner-container,
+html[oobe=new] #oobe.update #inner-container,
+html[oobe=new] #oobe.gaia-signin #inner-container,
+html[oobe=new] #oobe.enrollment #inner-container,
+html[oobe=new] #oobe.oauth-enrollment #inner-container,
+html[oobe=new] #oobe.user-image #inner-container {
+  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
+                                      rgba(255,255,255,0.95));
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
+              0 4px 23px 5px rgba(0, 0, 0, 0.2),
+              0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 /* Only play this animation when 'down' class is removed. */
 html[oobe=new] #inner-container:not(.down) {
-  -webkit-transition: -webkit-transform 400ms ease;
+  -webkit-transition: -webkit-transform 200ms ease-in-out;
 }
 
 html[oobe=new] #inner-container.down {
@@ -287,9 +291,9 @@ html[oobe=new] .step {
 }
 
 html[oobe=new] .step.animated {
-  -webkit-transition: -webkit-transform 400ms ease,
-                      opacity 400ms ease,
-                      visibility 400ms ease;
+  -webkit-transition: -webkit-transform 200ms ease-in-out,
+                      opacity 200ms ease-in-out,
+                      visibility 200ms ease-in-out;
 }
 
 html[oobe=old][dir=ltr] .step {
@@ -369,6 +373,11 @@ html[oobe=new] #progress-dots {
   display: -webkit-box;
 }
 
+/* Hidden for the duration of initial transition. */
+html[oobe=new] #progress-dots.down {
+  visibility: hidden;
+}
+
 .progdot {
   -webkit-margin-end: 12px;
   opacity: 0.4;
@@ -854,11 +863,11 @@ html[oobe=old] #update #update-screen-curtain {
 }
 
 html[oobe=new] #update #update-screen-curtain {
-  margin: 87px 45px;
+  margin: 45px 45px;
 }
 
 html[oobe=new] #update-screen-main {
-  margin: 85px 45px;
+  margin: 45px 45px;
   min-height: 114px;
   text-align: center;
 }
@@ -883,17 +892,10 @@ html[oobe=old] #update #update-cancel-hint {
 }
 
 html[oobe=new] #update #update-cancel-hint {
+  -webkit-margin-before: 15px;
+  -webkit-margin-start: 45px;
   color: rgb(170, 0, 0);
   position: absolute;
-  top: 80px;
-}
-
-html[oobe=new][dir=ltr] #update #update-cancel-hint {
-  left: 137px;
-}
-
-html[oobe=new][dir=rtl] #update #update-cancel-hint {
-  right: 137px;
 }
 
 #update #update-upper-label {

chrome/browser/resources/chromeos/login/oobe.html

@@ -75,7 +75,7 @@
         <div id="progress"></div>
         <div id="button-strip" class="button-strip"></div>
       </div>
-      <div id="progress-dots"></div>
+      <div id="progress-dots" class="down"></div>
     </div>
     <div id="security-info">
       <a id="security-link" href="#" i18n-content="eulaSystemSecuritySetting">