Add new version of enrollment screen supporting OAuth.

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

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by the Out of the box experience (OOBE) flow.
  */
 
 body {
   background: -webkit-gradient(radial, center center, 0, center center, 400,
               from(#fefefe), to(#efefef));
@@ skipping 185 matching lines @@
 }
 
 #footer button {
   display: none;
 }
 
 #oobe.connect #continue-button,
 #oobe.eula #back-button,
 #oobe.eula #accept-button,
 #oobe.signin #signin-button,
-#oobe.user-image #ok-button {
+#oobe.user-image #ok-button,
+#oobe.oauth-enrollment #oauth-enroll-cancel-button,
+#oobe.oauth-enrollment #oauth-enroll-done-button {
   display: inline-block;
 }
 
 #oobe.connect #connect-dot,
 #oobe.eula #eula-dot,
 #oobe.signin #signin-dot,
+#oobe.gaia-signin #gaia-signin-dot,
 #oobe.enrollment #signin-dot,
+#oobe.enrollment #gaia-signin-dot,
+#oobe.oauth-enrollment #signin-dot,
+#oobe.oauth-enrollment #gaia-signin-dot,
 #oobe.user-image #user-image-dot {
   opacity: 0.4;
 }
 
-#enrollment-dot {
+#enrollment-dot,
+#oauth-enrollment-dot {
   display: none;
 }
 
 #connect table {
   margin: 7em auto;
 }
 
 #security-info {
   bottom: 10px;
   position: absolute;
@@ skipping 173 matching lines @@
 #enroll-confirmation-image {
   vertical-align: middle;
 }
 
 #enroll-confirmation-footer {
   bottom: 0;
   text-align: end;
   width: 100%;
 }
 
+/* Styling for OAuth enrollment screen. */
+
+#oauth-enroll-container {
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+#oauth-enroll-signin-frame {
+  bottom: 0;
+  display: -webkit-box;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.oauth-enroll-step-center {
+  display: table;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.oauth-enroll-step-content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.oauth-enroll-step-icon {
+  display: inline-block;
+  position: relative;
+  top: 0.5em;

[James Hawkins, 2011/08/05 17:01:01]

Why are you using em here?

[Mattias Nissler (ping if slow), 2011/08/08 16:38:47]

That's for aligning the vertical center of the icon with the vertical center of
the description text. To do that, I move the oauth-enroll-step-icon div
downwards 0.5 times line height here, and then the icon back up half the icon
height through top: -11px in the block below.

+  vertical-align: top;
+}
+
+.oauth-enroll-step-icon > * {
+  display: inline-block;
+  height: 22px;
+  margin-right: .4em;
+  position: relative;
+  top: -11px;
+  width: 22px;
+}
+
+.oauth-enroll-step-message {
+  display: inline-block;
+  max-width: 400px;
+  text-align: left;
+  vertical-align: top;
+}
+
+#oauth-enroll-error-retry {
+  color: -webkit-link;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+@-webkit-keyframes oauth-enroll-spinner {
+  /* There are 13 animation steps, the numbers below space them evenly. Note
+   * that a steps(13) declaration produces off-by-one offsets for some frames,
+   * so for best results we specify positions explicity and use step-end. */
+  0%           { background-position: 286px 0px; }
+  7.6923076%   { background-position: 264px 0px; }
+  15.3846153%  { background-position: 242px 0px; }
+  23.0769230%  { background-position: 220px 0px; }
+  30.7692307%  { background-position: 198px 0px; }
+  38.4615384%  { background-position: 176px 0px; }
+  46.1538461%  { background-position: 154px 0px; }
+  53.8461538%  { background-position: 132px 0px; }
+  61.5384615%  { background-position: 110px 0px; }
+  69.2307692%  { background-position: 88px  0px; }
+  76.9230769%  { background-position: 66px  0px; }
+  84.6153846%  { background-position: 44px  0px; }
+  92.3076923%  { background-position: 22px  0px; }
+  100.0000000% { background-position: 0px   0px; }
+}
+
+.oauth-enroll-spinner {
+  -webkit-animation: oauth-enroll-spinner 1s step-end infinite;
+  background-image: url('chrome://theme/IDR_SPINNER');
+  height: 22px;
+  width: 22px;
+}
+
 #close-button.visible {
   display: inline-block;
 }
 
 #bubble {
   -webkit-transition: 0.25s opacity;
 }
 
 #login-header-bar {
   padding: 8px;
@@ skipping 106 matching lines @@
 #version-labels {
   -webkit-transition: all .5s linear;
   bottom: 10px;
   color: #999;
   font-size: 11px;
   left: 10px;
   opacity: 1.0;
   position: absolute;
   text-shadow: 0 1px 1px #fff;
 }