[cros] Login: added caption for Profile image preview.

*) Profile image caption.
*) Borders for default images.

BUG=none
TEST=Manual: Profile image preview in OOBE should have a caption.

Review URL: http://codereview.chromium.org/8218011

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@104925 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 151 insertions, 19 deletions

diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index 5b960ad5..4b6b6c6 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -285,15 +285,44 @@ html[dir=rtl]  .step.left {
 #user-image-preview {
   border-radius: 4px;
   float: right;
-  height: 220px;
   margin: 4px;
-  width: 220px;
+  max-width: 220px;
 }
 
 html[dir=rtl] #user-image-preview {
   float: left;
 }
 
+#user-image-preview-img {
+  max-height: 220px;
+  max-width: 220px;
+}
+
+.default-image #user-image-preview-img {
+  border: solid 1px #cacaca;
+  background: white;
+}
+
+#user-image-preview-caption {
+  color: dimGray;
+  font-size: smaller;
+  margin: 8px 4px;
+  white-space: nowrap;
+}
+
+#user-image-preview-caption .spinner {
+  display: inline-block;
+  visibility: hidden;
+  vertical-align: -6px;
+  width: 0;
+}
+
+.profile-image.profile-image-loading #user-image-preview-caption .spinner {
+  margin-right: 2px;
+  visibility: visible;
+  width: 22px;
+}
+
 #footer {
   height: 28px;  /* Same as button height */
 }
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html
index e7bf0f6..4e4f5a0 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html
@@ -7,7 +7,13 @@
   <div id="user-image-screen-main">
     <grid id="user-image-grid">
     </grid>
-    <img id="user-image-preview" alt=""
-         src="chrome://theme/IDR_LOGIN_DEFAULT_USER">
+    <div id="user-image-preview">
+      <img id="user-image-preview-img" alt=""
+           src="chrome://theme/IDR_LOGIN_DEFAULT_USER">
+      <div id="user-image-preview-caption">
+        <div class="spinner"></div>
+        <span id="user-image-caption-text"></span>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
index feeab3f..39d9253 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
@@ -49,14 +49,24 @@ cr.define('oobe', function() {
       imageGrid.addEventListener('dblclick',
                                  this.handleImageDblClick_.bind(this));
 
-      imageGrid.addItem(ButtonImages.TAKE_PHOTO,
-                        undefined,
-                        this.handleTakePhoto_.bind(this));
+      this.buttonImages_ = [
+        imageGrid.addItem(ButtonImages.TAKE_PHOTO,
+                          undefined,
+                          this.handleTakePhoto_.bind(this))
+      ];
+      // Whether a button image is selected.
+      this.buttonImageSelected_ = false;
+
       // Photo image data (if present).
       this.photoImage_ = null;
 
       // Profile image data (if present).
       this.profileImage_ = imageGrid.addItem(ButtonImages.PROFILE_PICTURE);
+      this.profileImageUrl_ = this.profileImage_.url;
+
+      // Initialize profile image state.
+      this.profileImageSelected = false;
+      this.profileImageLoading = true;
     },
 
     /**
@@ -80,6 +90,57 @@ cr.define('oobe', function() {
     },
 
     /**
+     * The caption to use for the Profile image preview.
+     * @type {string}
+     */
+    get profileImageCaption() {
+      return this.profileImageCaption_;
+    },
+    set profileImageCaption(value) {
+      this.profileImageCaption_ = value;
+      this.updateCaption_();
+    },
+
+    /**
+     * True if the Profile image is being loaded.
+     * @type {boolean}
+     */
+    get profileImageLoading() {
+      return this.profileImageLoading_;
+    },
+    set profileImageLoading(value) {
+      this.profileImageLoading_ = value;
+      $('user-image-preview').classList[
+          value ? 'add' : 'remove']('profile-image-loading');
+      this.profileImageCaption = localStrings.getString(
+          value ? 'profilePhotoLoading' : 'profilePhoto');
+      this.updateButtons_();
+    },
+
+    /**
+     * True when a default image is selected (including button images).
+     * @type {boolean}
+     */
+    set defaultImageSelected(value) {
+      $('user-image-preview').classList[
+          value ? 'add' : 'remove']('default-image');
+    },
+
+    /**
+     * True when the profile image is selected.
+     * @type {boolean}
+     */
+    get profileImageSelected() {
+      return this.profileImageSelected_;
+    },
+    set profileImageSelected(value) {
+      this.profileImageSelected_ = value;
+      $('user-image-preview').classList[
+          value ? 'add' : 'remove']('profile-image');
+      this.updateCaption_();
+    },
+
+    /**
      * Handles "Take photo" button activation.
      * @private
      */
@@ -107,14 +168,26 @@ cr.define('oobe', function() {
      * @private
      */
     handleSelection_: function() {
-      var url = $('user-image-grid').selectedItemUrl;
-      if (url)
-        $('user-image-preview').src = url;
-      // Do not send button selections.
-      if (url == ButtonImages.TAKE_PHOTO) {
-        $('ok-button').disabled = true;
-      } else if (url) {
-        $('ok-button').disabled = false;
+      var selectedItem = $('user-image-grid').selectedItem;
+      if (selectedItem === null)
+        return;
+
+      // Update preview image URL.
+      var url = selectedItem.url;
+      $('user-image-preview-img').src = url;
+
+      // Update current selection type.
+      this.defaultImageSelected = /^chrome:\/\/theme\//.test(url);
+      // Cannot compare this.profileImage_ itself because it is updated
+      // by setProfileImage_ after the selection event is fired programmaticaly.
+      this.profileImageSelected = selectedItem.url == this.profileImageUrl_;
+      this.buttonImageSelected_ =
+          this.buttonImages_.indexOf(selectedItem) != -1;
+
+      this.updateButtons_();
+
+      if (!$('ok-button').disabled) {
+        // Don't send disabled selections.
         chrome.send('selectImage', [url]);
       }
     },
@@ -164,11 +237,13 @@ cr.define('oobe', function() {
     },
 
     /**
-     * Adds or updates image with user profile image and sets it as preview.
+     * Updates user profile image.
      * @param {string} imageUrl Image encoded as data URL.
      * @private
      */
     setProfileImage_: function(imageUrl) {
+      this.profileImageUrl_ = imageUrl;
+      this.profileImageLoading = false;
       this.profileImage_ =
           $('user-image-grid').updateItem(this.profileImage_, imageUrl);
     },
@@ -193,6 +268,29 @@ cr.define('oobe', function() {
       var imageGrid = $('user-image-grid');
       imageGrid.selectedItemUrl = url;
       imageGrid.focus();
+    },
+
+    /**
+     * Updates the image preview caption.
+     * @private
+     */
+    updateCaption_: function() {
+      $('user-image-caption-text').textContent =
+          this.profileImageSelected ? this.profileImageCaption : '';
+    },
+
+    /**
+     * Updates the 'OK' button state.
+     * @private
+     */
+    updateButtons_: function() {
+      // Do not allow user to choose a button image or the profile image
+      // while it's loading.
+      var okButton = $('ok-button');
+      if (okButton)
+        okButton.disabled =
+            this.buttonImageSelected_ ||
+            this.profileImageSelected && this.profileImageLoading;
     }
   };
 
diff --git a/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc b/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc
index 14da9be..3d7381d 100644
--- a/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc
+++ b/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc
@@ -45,10 +45,9 @@ void UserImageScreenHandler::GetLocalizedStrings(
   localized_strings->SetString("takePhoto",
       l10n_util::GetStringUTF16(IDS_OPTIONS_CHANGE_PICTURE_TAKE_PHOTO));
   localized_strings->SetString("profilePhoto",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO));
+      l10n_util::GetStringUTF16(IDS_IMAGE_SCREEN_PROFILE_PHOTO));
   localized_strings->SetString("profilePhotoLoading",
-      l10n_util::GetStringUTF16(
-          IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO));
+      l10n_util::GetStringUTF16(IDS_IMAGE_SCREEN_PROFILE_LOADING_PHOTO));
   localized_strings->SetString("okButtonText",
       l10n_util::GetStringUTF16(IDS_OK));
 }