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

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 7af7c90102ef6e515a872e051b43a172193a1c1f..677ead660fd2b020926e943341403569f95fb8f0 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -488,26 +488,104 @@ html[oobe=old] #user-image {
   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 */