[cros] Initial WebRTC-enabled implementation of user image picker on OOBE.

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

 /* Copyright (c) 2012 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,
  * sign in and lock screens.
  */
 
 html,
 body {
@@ skipping 468 matching lines @@
   top: 14px;
 }
 
 #user-image-preview {
   border-radius: 4px;
   float: right;
   margin: 4px;
   max-width: 220px;
 }
 
+/**
+ * #user-image-preview can have the following classes:
+ * .default-image: one of the default images is selected (including the grey
+ *                 silhouette);
+ * .profile-image: profile image is selected;
+ * .profile-image-loading: profile image is being loaded;
+ * .online: camera is streaming video;

[Nikita (slow), 2012/06/07 15:26:55]

How online / live are different?

[Ivan Korotkov, 2012/06/09 14:19:01]

.online means that camera is working (i.e. present and initialized)
.live means that camera is in live mode (shown to user); when user takes a
picture, streaming is not stopped (camera remains .online but no longer .live
and is hidden)

+ * .camera: camera (live or photo) is selected;
+ * .live: camera is in live mode (no photo taken yet/last photo removed).
+ */
+
 html[dir=rtl] #user-image-preview {
   float: left;
 }
 
 #user-image-preview-img {
+  display: block;

[Nikita (slow), 2012/06/07 15:26:55]

Please make sure that doesn't affect existing layout (with new camera being
disabled).

[Ivan Korotkov, 2012/06/09 14:19:01]

Done.

   max-height: 220px;
   max-width: 220px;
 }
 
+html[camera=webrtc] .camera.live #user-image-preview-img {
+  display: none;
+}
+
 .default-image #user-image-preview-img {
   background: white;
   border: solid 1px #cacaca;
 }
 
+#user-image-stream-area {
+  display: none;
+  height: 220px;

[Nikita (slow), 2012/06/07 15:26:55]

Btw, why w-h is 220x220 when we capture 160x160?

+  overflow: hidden;
+  position: relative;
+  width: 220px;
+}
+
+html[camera=webrtc] .camera.live #user-image-stream-area {
+  display: block;

[Nikita (slow), 2012/06/07 15:26:55]

nit: May as well add separate style that defines display: none; with old camera
type. Looks easier to cleanup.

[Ivan Korotkov, 2012/06/09 14:19:01]

It should already be display: none in base style (so that it's only shown camera
is live), why add another style for old type?

+}
+
+/* TODO(ivankr): specify dimensions from real capture size. */
+#user-image-stream {
+  border: solid 1px #cacaca;
+  height: 220px;
+  /* Center image for 4:3 aspect ratio. */
+  left: -16.6%;

[Nikita (slow), 2012/06/07 15:26:55]

-webkit-margin-start

[Ivan Korotkov, 2012/06/09 14:19:01]

No need in RTL support as this is symmetric (left == right)

+  position: absolute;
+  visibility: hidden;
+}
+
+.online #user-image-stream {
+  visibility: visible;
+}
+
+#user-image-stream-area .spinner {
+  display: none;
+  left: 14px;

[Nikita (slow), 2012/06/07 15:26:55]

-webkit-margin-start

[Ivan Korotkov, 2012/06/09 14:19:01]

Done.

+  position: absolute;
+  top: 14px;

[Nikita (slow), 2012/06/07 15:26:55]

-webkit-margin-before for consistency

[Ivan Korotkov, 2012/06/09 14:19:01]

Done.

+}
+
+.camera.live:not(.online) #user-image-stream-area .spinner {
+  display: block;
+}
+
 #user-image-preview-caption {
   color: dimGray;
   font-size: smaller;
   margin: 8px 4px;
 }
 
+.camera #user-image-preview-caption {
+  display: none;
+}
+
+#discard-photo,
+#take-photo {
+  display: none;
+  height: 25px;
+  margin: 4px 1px;
+  padding: 0;
+  width: 220px;
+}
+
+html[camera=webrtc] .camera:not(.live) #discard-photo {
+  background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
+      no-repeat center 0;
+  display: block;

[Nikita (slow), 2012/06/07 15:26:55]

nit: Same here, makes sense to define "display: none;" as a part of old camera
type rule.

[Ivan Korotkov, 2012/06/09 14:19:01]

Same reasoning

+}
+
+html[camera=webrtc] .camera.live.online #take-photo {
+  background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
+      no-repeat center -1px;
+  display: block;
+}
+
 /* TODO(nkostylev): Remove footer, button-strip styles. */
 #footer {
   height: 28px;  /* Same as button height */
 }
 
 #footer button {
   display: none;
   height: 28px;
 }
 
@@ skipping 535 matching lines @@
 }
 
 #notification-area a {
   color: rgb(37, 79, 155);
 }
 
 #notification-area .butter-bar {
   margin: 0 auto;
   max-width: 850px;
 }