Add new version of enrollment screen supporting OAuth.

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

Index: chrome/browser/resources/chromeos/login/oobe.css
diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index e82286e4110a16f78e70997d20d1fb7d4e11d1f7..a8adc1a4988599d9869ed5a87508887a5df423da 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -203,19 +203,26 @@ hr.bottomshadow {
 #oobe.eula #back-button,
 #oobe.eula #accept-button,
 #oobe.signin #signin-button,
-#oobe.user-image #ok-button {
+#oobe.user-image #ok-button ,

[pastarmovj, 2011/08/03 15:01:56]

There seems to be one space too much before the ,

[Mattias Nissler (ping if slow), 2011/08/04 09:58:59]

Done.

+#oobe.oauth-enrollment #oauth-enroll-button-cancel,

[whywhat, 2011/08/03 17:48:03]

nit: Could you move button to the end of the name to conform with the rest
button names?

[Mattias Nissler (ping if slow), 2011/08/04 09:58:59]

Done.

+#oobe.oauth-enrollment #oauth-enroll-button-done {
   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 #photo-dot {
   opacity: 0.4;
 }
 
-#enrollment-dot {
+#enrollment-dot,
+#oauth-enrollment-dot {
   display: none;
 }
 
@@ -409,6 +416,95 @@ button {
   width: 100%;
 }
 
+/* Styling for OAuth enrollment screen. */
+
+#oauth-enroll-container {
+  display: -webkit-box;

[whywhat, 2011/08/03 17:48:03]

please, sort all properties for each selector alphabetically

[Mattias Nissler (ping if slow), 2011/08/04 09:58:59]

Done.

+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+#oauth-enroll-signin-frame {
+  display: -webkit-box;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.oauth-enroll-step-center {
+  display: table;
+  margin: 0 auto;
+  height: 100%;
+}
+
+.oauth-enroll-step-content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.oauth-enroll-step-icon {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  top: 0.5em;
+}
+
+.oauth-enroll-step-icon > * {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  position: relative;
+  top: -11px;
+  margin-right: .4em;
+}
+
+.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 {
+  width: 22px;
+  height: 22px;
+  background-image: url('chrome://theme/IDR_SPINNER');
+  -webkit-animation: oauth-enroll-spinner 1s step-end infinite;
+}
+
 #close-button.visible {
   display: inline-block;
 }