Merge 84775 - [cros] all images on changePicture page, capture and pick are first

Fixed layout on image screen.
Fixed html layout on changePicture page.

BUG=chromiumos:14618
TEST=Check that all images on both OOBE image screen and change picture page are aligned. Verify that all 17 avatars are visible and selectable on the page.

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

TBR=avayvod@chromium.org
Review URL: http://codereview.chromium.org/6993010

git-svn-id: svn://svn.chromium.org/chrome/branches/742/src@84785 0039d316-1c4b-4281-b951-d872f2087c98

11 files changed, 111 insertions, 102 deletions

diff --git a/chrome/app/theme/choose_file.png b/chrome/app/theme/choose_file.png
index b543540..6eee874 100644
--- a/chrome/app/theme/choose_file.png
+++ b/chrome/app/theme/choose_file.png
diff --git a/chrome/app/theme/take_photo.png b/chrome/app/theme/take_photo.png
index 57d1ce1..92df61f 100644
--- a/chrome/app/theme/take_photo.png
+++ b/chrome/app/theme/take_photo.png
diff --git a/chrome/browser/chromeos/login/default_images_view.cc b/chrome/browser/chromeos/login/default_images_view.cc
index b456f5e..b5388cf 100644
--- a/chrome/browser/chromeos/login/default_images_view.cc
+++ b/chrome/browser/chromeos/login/default_images_view.cc
@@ -15,6 +15,7 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "views/border.h"
+#include "views/background.h"
 #include "views/controls/button/image_button.h"
 #include "views/layout/grid_layout.h"
 
@@ -27,15 +28,19 @@ const int kDefaultImageSize = 64;
 // Margin from left and right sides to the view contents.
 const int kHorizontalMargin = 10;
 // Margin from top and bottom sides to the view contents.
-const int kVerticalMargin = 5;
-// Margin around the default image where selection border is drawn.
-const int kSelectionMargin = 5;
+const int kVerticalMargin = 10;
 // Padding between image columns.
-const int kHorizontalPadding = 10;
+const int kHorizontalPadding = 20;
 // Padding between image rows.
-const int kVerticalPadding = 5;
+const int kVerticalPadding = 15;
 // Number of columns in a row of default images.
 const int kColumnsCount = 5;
+// Size of the border around default image.
+const int kImageBorderSize = 1;
+// Color of default image border.
+const SkColor kImageBorderColor = SkColorSetARGB(38, 0, 0, 0);
+// Color of default image background.
+const SkColor kImageBackgroundColor = SK_ColorWHITE;
 // We give each image control an ID so we could distinguish them. Since 0 is
 // the default ID we want an offset for IDs we set.
 const int kImageStartId = 100;
@@ -44,57 +49,34 @@ const int kCaptureButtonId = 1000;
 
 }  // namespace
 
+// Image button with border and background. Corrects view size by border
+// insets as ImageButton ignores it.
 class UserImageButton : public views::ImageButton {
  public:
   explicit UserImageButton(views::ButtonListener* listener);
 
-  // Changes button state to selected or unselected.
-  void SetSelected(bool is_selected);
-
   // Overridden from views::View:
   virtual gfx::Size GetPreferredSize();
-  virtual void OnPaintBackground(gfx::Canvas* canvas);
 
  private:
-  bool is_selected_;
-
   DISALLOW_COPY_AND_ASSIGN(UserImageButton);
 };
 
 UserImageButton::UserImageButton(views::ButtonListener* listener)
-    : ImageButton(listener),
-      is_selected_(false) {
-  set_border(views::Border::CreateEmptyBorder(
-      kSelectionMargin,
-      kSelectionMargin,
-      kSelectionMargin,
-      kSelectionMargin));
-  set_background(CreateRoundedBackground(kSelectionMargin,
-                                         1,
-                                         SK_ColorLTGRAY,
-                                         SK_ColorDKGRAY));
+    : ImageButton(listener) {
+  set_border(
+      views::Border::CreateSolidBorder(kImageBorderSize, kImageBorderColor));
+  set_background(
+      views::Background::CreateSolidBackground(kImageBackgroundColor));
   SetImageAlignment(ALIGN_CENTER, ALIGN_MIDDLE);
 }
 
-void UserImageButton::SetSelected(bool is_selected) {
-  if (is_selected_ != is_selected) {
-    is_selected_ = is_selected;
-    SchedulePaint();
-  }
-}
-
 gfx::Size UserImageButton::GetPreferredSize() {
   gfx::Size size = views::ImageButton::GetPreferredSize();
   size.Enlarge(GetInsets().width(), GetInsets().height());
   return size;
 }
 
-void UserImageButton::OnPaintBackground(gfx::Canvas* canvas) {
-  // TODO(avayvod): Either implement border highlight or remove it.
-  //  if (is_selected_)
-  //  views::View::OnPaintBackground(canvas);
-}
-
 
 DefaultImagesView::DefaultImagesView(Delegate* delegate)
     : selected_image_index_(-1),
@@ -125,14 +107,11 @@ int DefaultImagesView::GetDefaultImageIndex() const {
 }
 
 void DefaultImagesView::ClearSelection() {
-  if (selected_image_index_ != -1) {
-    default_images_[selected_image_index_]->SetSelected(false);
-    selected_image_index_ = -1;
-  }
+  selected_image_index_ = -1;
 }
 
 gfx::Size DefaultImagesView::GetPreferredSize() {
-  int image_size_with_margin = (kDefaultImageSize + 2 * kSelectionMargin);
+  int image_size_with_margin = (kDefaultImageSize + 2 * kImageBorderSize);
   int width = kColumnsCount * image_size_with_margin +
               (kColumnsCount - 1) * kHorizontalPadding;
   size_t image_count = default_images_.size();
@@ -161,7 +140,6 @@ void DefaultImagesView::ButtonPressed(views::Button* sender,
       return;
     }
     selected_image_index_ = image_index + 1;
-    default_images_[selected_image_index_]->SetSelected(true);
     if (delegate_)
       delegate_->OnImageSelected(image_index % kDefaultImagesCount);
   }
@@ -188,6 +166,7 @@ void DefaultImagesView::InitLayout() {
                                 kHorizontalMargin));
   SetLayoutManager(layout);
 
+  size_t current_image = 0;
   size_t image_count = default_images_.size();
   int rows_count = (image_count + kColumnsCount - 1) / kColumnsCount;
   for (int row = 0; row < rows_count; ++row) {
@@ -195,24 +174,32 @@ void DefaultImagesView::InitLayout() {
     for (int column = 0; column < kColumnsCount; ++column) {
       if (column != 0)
         column_set->AddPaddingColumn(1, kHorizontalPadding);
-      column_set->AddColumn(
-          views::GridLayout::LEADING,
-          views::GridLayout::LEADING,
-          1,
-          views::GridLayout::USE_PREF,
-          0,
-          0);
+      if (current_image < image_count) {
+        column_set->AddColumn(
+            views::GridLayout::LEADING,
+            views::GridLayout::LEADING,
+            1,
+            views::GridLayout::USE_PREF,
+            0,
+            0);
+      } else {
+        int placeholders_count = kColumnsCount - column;
+        int placeholders_width = placeholders_count *
+                                 (kDefaultImageSize + 2 * kImageBorderSize);
+        int padding_width = (placeholders_count - 1) * kHorizontalPadding;
+        column_set->AddPaddingColumn(1, placeholders_width + padding_width);
+        break;
+      }
+      ++current_image;
     }
   }
-  size_t current_image = 0;
+  current_image = 0;
   for (int row = 0; row < rows_count; ++row) {
-    if (current_image >= default_images_.size())
-      break;
     if (row != 0)
       layout->AddPaddingRow(1, kVerticalPadding);
     layout->StartRow(0, row);
     for (int column = 0; column < kColumnsCount; ++column) {
-      if (current_image >= default_images_.size())
+      if (current_image >= image_count)
         break;
       layout->AddView(default_images_[current_image]);
       ++current_image;
diff --git a/chrome/browser/chromeos/login/default_user_images.cc b/chrome/browser/chromeos/login/default_user_images.cc
index d7f12e0..7c3c41d 100644
--- a/chrome/browser/chromeos/login/default_user_images.cc
+++ b/chrome/browser/chromeos/login/default_user_images.cc
@@ -16,7 +16,8 @@ namespace chromeos {
 namespace {
 
 const char kDefaultPathPrefix[] = "default:";
-const int kDefaultPathPrefixLength = arraysize(kDefaultPathPrefix) - 1;
+const char kDefaultUrlPrefix[] = "chrome://theme/IDR_LOGIN_DEFAULT_USER_";
+const char kFirstDefaultUrl[] = "chrome://theme/IDR_LOGIN_DEFAULT_USER";
 
 const char* kOldDefaultImageNames[] = {
   "default:gray",
@@ -26,27 +27,29 @@ const char* kOldDefaultImageNames[] = {
   "default:red",
 };
 
-}  // namespace
-
-std::string GetDefaultImagePath(int index) {
+// Returns a string consisting of the prefix specified and the index of the
+// image if its valid.
+std::string GetDefaultImageString(int index, const std::string& prefix) {
   if (index < 0 || index >= kDefaultImagesCount) {
     NOTREACHED();
     return std::string();
   }
-  return StringPrintf("default:%d", index);
+  return StringPrintf("%s%d", prefix.c_str(), index);
 }
 
-// Checks if given path is one of the default ones. If it is, returns true
-// and its index in kDefaultImageNames through |image_id|. If not, returns
-// false.
-bool IsDefaultImagePath(const std::string& path, int* image_id) {
+// Returns true if the string specified consists of the prefix and one of
+// the default images indices. Returns the index of the image in |image_id|
+// variable.
+bool IsDefaultImageString(const std::string& s,
+                          const std::string& prefix,
+                          int* image_id) {
   DCHECK(image_id);
-  if (!StartsWithASCII(path, kDefaultPathPrefix, true))
+  if (!StartsWithASCII(s, prefix, true))
     return false;
 
   int image_index = -1;
-  if (base::StringToInt(path.begin() + kDefaultPathPrefixLength,
-                        path.end(),
+  if (base::StringToInt(s.begin() + prefix.length(),
+                        s.end(),
                         &image_index)) {
     if (image_index < 0 || image_index >= kDefaultImagesCount)
       return false;
@@ -54,6 +57,18 @@ bool IsDefaultImagePath(const std::string& path, int* image_id) {
     return true;
   }
 
+  return false;
+}
+}  // namespace
+
+std::string GetDefaultImagePath(int index) {
+  return GetDefaultImageString(index, kDefaultPathPrefix);
+}
+
+bool IsDefaultImagePath(const std::string& path, int* image_id) {
+  if (IsDefaultImageString(path, kDefaultPathPrefix, image_id))
+    return true;
+
   // Check old default image names for back-compatibility.
   for (size_t i = 0; i < arraysize(kOldDefaultImageNames); ++i) {
     if (path == kOldDefaultImageNames[i]) {
@@ -64,6 +79,20 @@ bool IsDefaultImagePath(const std::string& path, int* image_id) {
   return false;
 }
 
+std::string GetDefaultImageUrl(int index) {
+  if (index == 0)
+    return kFirstDefaultUrl;
+  return GetDefaultImageString(index, kDefaultUrlPrefix);
+}
+
+bool IsDefaultImageUrl(const std::string url, int* image_id) {
+  if (url == kFirstDefaultUrl) {
+    *image_id = 0;
+    return true;
+  }
+  return IsDefaultImageString(url, kDefaultUrlPrefix, image_id);
+}
+
 // Resource IDs of default user images.
 const int kDefaultImageResources[] = {
   IDR_LOGIN_DEFAULT_USER,
diff --git a/chrome/browser/chromeos/login/default_user_images.h b/chrome/browser/chromeos/login/default_user_images.h
index 969192b..e75bbae 100644
--- a/chrome/browser/chromeos/login/default_user_images.h
+++ b/chrome/browser/chromeos/login/default_user_images.h
@@ -19,6 +19,13 @@ std::string GetDefaultImagePath(int index);
 // and its index through |image_id|. If not, returns false.
 bool IsDefaultImagePath(const std::string& path, int* image_id);
 
+// Returns URL to default user image with specifided index.
+std::string GetDefaultImageUrl(int index);
+
+// Checks if the given URL points to one of the default images. If it is,
+// returns true and its index through |image_id|. If not, returns false.
+bool IsDefaultImageUrl(const std::string url, int* image_id);
+
 // Resource IDs of default user images.
 extern const int kDefaultImageResources[];
 
diff --git a/chrome/browser/chromeos/login/take_photo_view.cc b/chrome/browser/chromeos/login/take_photo_view.cc
index 93759a3..af00679 100644
--- a/chrome/browser/chromeos/login/take_photo_view.cc
+++ b/chrome/browser/chromeos/login/take_photo_view.cc
@@ -12,6 +12,8 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/canvas.h"
+#include "views/background.h"
+#include "views/border.h"
 #include "views/controls/button/image_button.h"
 #include "views/controls/image_view.h"
 #include "views/controls/label.h"
@@ -24,6 +26,8 @@ namespace {
 const int kHorizontalPadding = 10;
 // Padding between vertically neighboring elements.
 const int kVerticalPadding = 10;
+// Color of image view border.
+const SkColor kImageBorderColor = SkColorSetARGB(38, 0, 0, 0);
 
 // IDs of column sets for grid layout manager.
 enum ColumnSets {
@@ -49,6 +53,9 @@ class CameraImageView : public views::ImageView {
     DCHECK(NULL == throbber_);
     DCHECK(NULL == message_);
 
+    set_border(views::Border::CreateSolidBorder(1, kImageBorderColor));
+    set_background(views::Background::CreateSolidBackground(SK_ColorWHITE));
+
     throbber_ = CreateDefaultSmoothedThrobber();
     throbber_->SetVisible(false);
     AddChildView(throbber_);
diff --git a/chrome/browser/resources/options/chromeos/change_picture_options.css b/chrome/browser/resources/options/chromeos/change_picture_options.css
index 5305f03..c9175c8 100644
--- a/chrome/browser/resources/options/chromeos/change_picture_options.css
+++ b/chrome/browser/resources/options/chromeos/change_picture_options.css
@@ -16,7 +16,8 @@
 }
 
 #images-list img {
-  width: 70px;
-  height: 70px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  width: 64px;
+  height: 64px;
 }
 
diff --git a/chrome/browser/resources/options/chromeos/change_picture_options.html b/chrome/browser/resources/options/chromeos/change_picture_options.html
index fcc0621..3947d1f 100644
--- a/chrome/browser/resources/options/chromeos/change_picture_options.html
+++ b/chrome/browser/resources/options/chromeos/change_picture_options.html
@@ -2,13 +2,9 @@
   <h1 i18n-content="changePicturePage"></h1>
   <span i18n-content="changePicturePageDescription"></span>
   <div id="images-list">
-    <div id="choose-file-item" class="list-element">
-      <img id="choose-file-button"
-           src="chrome://theme/IDR_BUTTON_USER_IMAGE_CHOOSE_FILE"/>
-    </div>
     <div id="take-photo-item" class="list-element">
-      <img id="take-photo-button" src="chrome://theme/IDR_BUTTON_USER_IMAGE_TAKE_PHOTO"/>
-    </div>
-  </div>
-</div>
-
+      <img id="take-photo-button"
+           src="chrome://theme/IDR_BUTTON_USER_IMAGE_TAKE_PHOTO"/></div><div
+        id="choose-file-item" class="list-element"><img
+          id="choose-file-button"
+          src="chrome://theme/IDR_BUTTON_USER_IMAGE_CHOOSE_FILE"/></div></div></div>
diff --git a/chrome/browser/resources/options/chromeos/change_picture_options.js b/chrome/browser/resources/options/chromeos/change_picture_options.js
index 262ebaa..98b2436 100644
--- a/chrome/browser/resources/options/chromeos/change_picture_options.js
+++ b/chrome/browser/resources/options/chromeos/change_picture_options.js
@@ -74,7 +74,7 @@ cr.define('options', function() {
     },
 
     /**
-     * Inserts new image before "Choose file" button.
+     * Appends new image to the end of the image list.
      * @param {string} src A url for the user image.
      * @private
      */
@@ -87,7 +87,7 @@ cr.define('options', function() {
       var divElement = document.createElement('div');
       divElement.classList.add('list-element');
       divElement.appendChild(imageElement);
-      $('images-list').insertBefore(divElement, $('choose-file-item'));
+      $('images-list').appendChild(divElement);
     },
 
     /**
diff --git a/chrome/browser/ui/webui/options/chromeos/change_picture_options_handler.cc b/chrome/browser/ui/webui/options/chromeos/change_picture_options_handler.cc
index 05a501d..e230c06 100644
--- a/chrome/browser/ui/webui/options/chromeos/change_picture_options_handler.cc
+++ b/chrome/browser/ui/webui/options/chromeos/change_picture_options_handler.cc
@@ -25,24 +25,6 @@ namespace chromeos {
 
 namespace {
 
-// URLs to default user images through chrome://theme/ scheme.
-const char* kDefaultImagePaths[] = {
-  "chrome://theme/IDR_LOGIN_DEFAULT_USER",
-  "chrome://theme/IDR_LOGIN_DEFAULT_USER_1",
-  "chrome://theme/IDR_LOGIN_DEFAULT_USER_2",
-  "chrome://theme/IDR_LOGIN_DEFAULT_USER_3",
-  "chrome://theme/IDR_LOGIN_DEFAULT_USER_4"
-};
-
-int GetUserImageIndexFromURL(const std::string& url) {
-  for (size_t i = 0; i < arraysize(kDefaultImagePaths); ++i) {
-    if (url == kDefaultImagePaths[i]) {
-      return i;
-    }
-  }
-  return -1;
-}
-
 // Returns info about extensions for files we support as user images.
 SelectFileDialog::FileTypeInfo GetUserImageFileTypeInfo() {
   SelectFileDialog::FileTypeInfo file_type_info;
@@ -142,8 +124,8 @@ void ChangePictureOptionsHandler::TakePhoto(const ListValue* args) {
 void ChangePictureOptionsHandler::GetAvailableImages(const ListValue* args) {
   DCHECK(args && args->empty());
   ListValue image_urls;
-  for (size_t i = 0; i < arraysize(kDefaultImagePaths); ++i) {
-    image_urls.Append(new StringValue(kDefaultImagePaths[i]));
+  for (int i = 0; i < kDefaultImagesCount; ++i) {
+    image_urls.Append(new StringValue(GetDefaultImageUrl(i)));
   }
   web_ui_->CallJavascriptFunction("ChangePictureOptions.addUserImages",
                                   image_urls);
@@ -157,8 +139,8 @@ void ChangePictureOptionsHandler::SelectImage(const ListValue* args) {
     NOTREACHED();
     return;
   }
-  int user_image_index = GetUserImageIndexFromURL(image_url);
-  if (user_image_index == -1)
+  int user_image_index = -1;
+  if (!IsDefaultImageUrl(image_url, &user_image_index))
     return;
 
   const SkBitmap* image = ResourceBundle::GetSharedInstance().GetBitmapNamed(
@@ -167,7 +149,7 @@ void ChangePictureOptionsHandler::SelectImage(const ListValue* args) {
   user_manager->SetLoggedInUserImage(*image);
   user_manager->SaveUserImagePath(
       user_manager->logged_in_user().email(),
-      GetDefaultImagePath(static_cast<size_t>(user_image_index)));
+      GetDefaultImagePath(user_image_index));
 }
 
 void ChangePictureOptionsHandler::FileSelected(const FilePath& path,
diff --git a/chrome/browser/ui/webui/options/chromeos/user_image_source.cc b/chrome/browser/ui/webui/options/chromeos/user_image_source.cc
index 2ba294e..fff3b4d 100644
--- a/chrome/browser/ui/webui/options/chromeos/user_image_source.cc
+++ b/chrome/browser/ui/webui/options/chromeos/user_image_source.cc
@@ -19,14 +19,14 @@ std::vector<unsigned char> UserImageSource::GetUserImage(
   chromeos::UserVector users = chromeos::UserManager::Get()->GetUsers();
   for (size_t i = 0; i < users.size(); ++i) {
     if (users[i].email() == email) {
-      gfx::PNGCodec::EncodeBGRASkBitmap(users[i].image(), true, &user_image);
+      gfx::PNGCodec::EncodeBGRASkBitmap(users[i].image(), false, &user_image);
       return user_image;
     }
   }
   gfx::PNGCodec::EncodeBGRASkBitmap(
       *ResourceBundle::GetSharedInstance().GetBitmapNamed(
           IDR_LOGIN_DEFAULT_USER),
-      true,
+      false,
       &user_image);
   return user_image;
 }