[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 470 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;
+ * .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;
   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;
+  overflow: hidden;
+  position: relative;
+  width: 220px;
+}
+
+html[camera=webrtc] .camera.live #user-image-stream-area {
+  display: block;
+}
+
+/* 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%;
+  position: absolute;
+  visibility: hidden;
+}
+
+.online #user-image-stream {
+  visibility: visible;
+}
+
+#user-image-stream-area .spinner {
+  -webkit-margin-before: 14px;
+  -webkit-margin-start: 14px;
+  display: none;
+  position: absolute;
+}
+
+.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;
+}
+
+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;
 }