[Win] Redesign the avatar bubble UI

chrome/browser/ui/views/profiles/profile_chooser_view.cc

 // Copyright 2014 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.
 
 #include "chrome/browser/ui/views/profiles/profile_chooser_view.h"
 
 #include "base/prefs/pref_service.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/lifetime/application_lifetime.h"
@@ skipping 16 matching lines @@
 #include "components/signin/core/browser/profile_oauth2_token_service.h"
 #include "components/signin/core/browser/signin_manager.h"
 #include "components/signin/core/common/profile_management_switches.h"
 #include "grit/chromium_strings.h"
 #include "grit/generated_resources.h"
 #include "grit/theme_resources.h"
 #include "third_party/skia/include/core/SkColor.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/image/canvas_image_source.h"
 #include "ui/gfx/image/image.h"
 #include "ui/gfx/image/image_skia.h"
 #include "ui/gfx/text_elider.h"
 #include "ui/native_theme/native_theme.h"
 #include "ui/views/controls/button/blue_button.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/button/menu_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/link.h"
 #include "ui/views/controls/separator.h"
 #include "ui/views/controls/styled_label.h"
 #include "ui/views/controls/textfield/textfield.h"
 #include "ui/views/controls/webview/webview.h"
 #include "ui/views/layout/grid_layout.h"
 #include "ui/views/layout/layout_constants.h"
 #include "ui/views/widget/widget.h"
 
 namespace {
 
 // Helpers --------------------------------------------------------------------
 
 const int kFixedMenuWidth = 250;
 const int kButtonHeight = 29;
 const int kProfileAvatarTutorialShowMax = 5;
 const int kFixedGaiaViewHeight = 400;
 const int kFixedGaiaViewWidth = 360;
 const int kFixedAccountRemovalViewWidth = 280;
+const int kLargeImageSide = 88;
 
 // Creates a GridLayout with a single column. This ensures that all the child
 // views added get auto-expanded to fill the full width of the bubble.
 views::GridLayout* CreateSingleColumnLayout(views::View* view, int width) {
   views::GridLayout* layout = new views::GridLayout(view);
   view->SetLayoutManager(layout);
 
   views::ColumnSet* columns = layout->AddColumnSet(0);
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 0,
                      views::GridLayout::FIXED, width, width);
@@ skipping 16 matching lines @@
 
 views::Link* CreateLink(const base::string16& link_text,
                         views::LinkListener* listener) {
   views::Link* link_button = new views::Link(link_text);
   link_button->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   link_button->SetUnderline(false);
   link_button->set_listener(listener);
   return link_button;
 }
 
+class BlankImageSource : public gfx::CanvasImageSource {

[sky, 2014/04/23 20:40:53]

Why do you need this? Can't you either set a null image, or if you really need
an image create a real image without needing a CanvasImageSource?

[noms (inactive), 2014/04/24 14:29:23]

The placeholder image needs to have the same size as the hover image (so that
when you hover it maintains the layout).  A null image wouldn't have this set
size, and I haven't found out a different way to create an empty image of a set
size otherwise. 

(Unless by "real image" you mean a transparent physical png of the right size --
I thought that would be more annoying, I guess)

On 2014/04/23 20:40:53, sky wrote:

[sky, 2014/04/24 16:27:45]

https://code.google.com/p/chromium/codesearch#chromium/src/ui/gfx/image/image...

[noms (inactive), 2014/04/24 17:06:57]

AH, that makes sense. Thanks! Done.

On 2014/04/24 16:27:45, sky wrote:

+ public:
+  explicit BlankImageSource(const gfx::Size& size_in_dip)
+      : CanvasImageSource(size_in_dip, /*is_opaque =*/ false) {
+  }
+  virtual ~BlankImageSource() {}
+
+ private:
+  // gfx::CanvasImageSource overrides:
+  virtual void Draw(gfx::Canvas* canvas) OVERRIDE {
+    canvas->DrawColor(SkColorSetARGB(0, 0, 0, 0));
+  }
+
+  DISALLOW_COPY_AND_ASSIGN(BlankImageSource);
+};
 
 // BackgroundColorHoverButton -------------------------------------------------
 
 // A custom button that allows for setting a background color when hovered over.
 class BackgroundColorHoverButton : public views::LabelButton {
  public:
   BackgroundColorHoverButton(views::ButtonListener* listener,
                              const base::string16& text,
                              const gfx::ImageSkia& normal_icon,
                              const gfx::ImageSkia& hover_icon);
@@ skipping 18 matching lines @@
   SetImage(STATE_NORMAL, normal_icon);
   SetImage(STATE_HOVERED, hover_icon);
   SetImage(STATE_PRESSED, hover_icon);
 }
 
 BackgroundColorHoverButton::~BackgroundColorHoverButton() {}
 
 void BackgroundColorHoverButton::OnPaint(gfx::Canvas* canvas) {
   if ((state() == STATE_PRESSED) || (state() == STATE_HOVERED) || HasFocus()) {
     canvas->DrawColor(GetNativeTheme()->GetSystemColor(
-        ui::NativeTheme::kColorId_MenuSeparatorColor));
+        ui::NativeTheme::kColorId_ButtonHoverBackgroundColor));
   }
   LabelButton::OnPaint(canvas);
 }
 
 }  // namespace
 
 
 // EditableProfilePhoto -------------------------------------------------
 
 // A custom Image control that shows a "change" button when moused over.
 class EditableProfilePhoto : public views::ImageView {
  public:
   EditableProfilePhoto(views::ButtonListener* listener,
                        const gfx::Image& icon,
-                       bool is_editing_allowed)
+                       bool is_editing_allowed,
+                       const gfx::Rect& bounds)
       : views::ImageView(),
         change_photo_button_(NULL) {
-    const int kLargeImageSide = 64;
     gfx::Image image = profiles::GetSizedAvatarIcon(
         icon, true,
         kLargeImageSide + profiles::kAvatarIconPadding,
         kLargeImageSide + profiles::kAvatarIconPadding);
     SetImage(image.ToImageSkia());
+    SetBoundsRect(bounds);
 
     if (!is_editing_allowed)
       return;
 
     set_notify_enter_exit_on_child(true);
 
     // Button overlay that appears when hovering over the image.
     change_photo_button_ = new views::LabelButton(listener,
         l10n_util::GetStringUTF16(IDS_PROFILES_PROFILE_CHANGE_PHOTO_BUTTON));
     change_photo_button_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
     change_photo_button_->SetBorder(views::Border::NullBorder());
     const SkColor color = SK_ColorWHITE;
     change_photo_button_->SetTextColor(views::Button::STATE_NORMAL, color);
     change_photo_button_->SetTextColor(views::Button::STATE_HOVERED, color);
 
     const SkColor kBackgroundColor = SkColorSetARGB(125, 0, 0, 0);
     change_photo_button_->set_background(
         views::Background::CreateSolidBackground(kBackgroundColor));
     // Need to take into account the border padding on the avatar.
     const int kOverlayHeight = 20;
     change_photo_button_->SetBounds(
-        profiles::kAvatarIconPadding,
-        kLargeImageSide - kOverlayHeight,
-        kLargeImageSide - profiles::kAvatarIconPadding,
+        bounds.origin().x(),
+        bounds.origin().y() + kLargeImageSide - kOverlayHeight,
+        kLargeImageSide,
         kOverlayHeight);
     change_photo_button_->SetVisible(false);
     AddChildView(change_photo_button_);
   }
 
   views::LabelButton* change_photo_button() { return change_photo_button_; }
 
  private:
   // views::View:
   virtual void OnMouseEntered(const ui::MouseEvent& event) OVERRIDE {
@@ skipping 22 matching lines @@
  public:
   EditableProfileName(views::TextfieldController* controller,
                       const base::string16& text,
                       bool is_editing_allowed)
       : views::LabelButton(this, text),
         profile_name_textfield_(NULL) {
     ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
     const gfx::FontList& medium_font_list =
         rb->GetFontList(ui::ResourceBundle::MediumFont);
     SetFontList(medium_font_list);
-    SetBorder(views::Border::NullBorder());
+    SetHorizontalAlignment(gfx::ALIGN_CENTER);
 
     if (!is_editing_allowed)
       return;
 
-    SetImage(STATE_HOVERED,
-             *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_EDIT_HOVER));
+    // Show an "edit" pencil icon when hovering over. In the default state,
+    // we need to create an empty placeholder of the correct size, so that
+    // the text doesn't jump around when the hovered icon appears.
+    gfx::ImageSkia hover_image =
+        *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_EDIT_HOVER);
+    SetImage(STATE_NORMAL, gfx::ImageSkia(
+        new BlankImageSource(hover_image.size()),
+        hover_image.size()));
+    SetImage(STATE_HOVERED, hover_image);
     SetImage(STATE_PRESSED,
              *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_EDIT_PRESSED));
+    // To center the text, we need to offest it by the width of the icon we
+    // are adding. We need to also add a small top/bottom padding to account
+    // for the textfield's border.
+    SetBorder(views::Border::CreateEmptyBorder(2, hover_image.width(), 2, 0));
 
     // Textfield that overlaps the button.
     profile_name_textfield_ = new views::Textfield();
     profile_name_textfield_->set_controller(controller);
     profile_name_textfield_->SetFontList(medium_font_list);
+    profile_name_textfield_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+
     profile_name_textfield_->SetVisible(false);
     AddChildView(profile_name_textfield_);
   }
 
   views::Textfield* profile_name_textfield() {
     return profile_name_textfield_;
   }
 
   // Hide the editable textfield to show the profile name button instead.
   void ShowReadOnlyView() {
@@ skipping 20 matching lines @@
     // part of the new profile name typed in the textfield.
     return false;
   }
 
   virtual void Layout() OVERRIDE {
     if (profile_name_textfield_)
       profile_name_textfield_->SetBounds(0, 0, width(), height());
     // This layout trick keeps the text left-aligned and the icon right-aligned.
     SetHorizontalAlignment(gfx::ALIGN_RIGHT);
     views::LabelButton::Layout();
-    label()->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+    label()->SetHorizontalAlignment(gfx::ALIGN_CENTER);
   }
 
-  // Button that is shown when hovering over the image view. Can be NULL if
+  // Textfield that is shown when editing the profile name. Can be NULL if
   // the profile name isn't allowed to be edited (e.g. for guest profiles).
   views::Textfield* profile_name_textfield_;
 
   DISALLOW_COPY_AND_ASSIGN(EditableProfileName);
 };
 
 // A title card with one back button right aligned and one label center aligned.
 class TitleCard : public views::View {
  public:
    TitleCard(int message_id, views::ButtonListener* listener,
@@ skipping 111 matching lines @@
       ProfileOAuth2TokenServiceFactory::GetForProfile(browser_->profile());
   if (oauth2_token_service)
     oauth2_token_service->RemoveObserver(this);
 }
 
 void ProfileChooserView::ResetView() {
   manage_accounts_link_ = NULL;
   signin_current_profile_link_ = NULL;
   users_button_ = NULL;
   lock_button_ = NULL;
-  add_account_button_ = NULL;
+  add_account_link_ = NULL;
   current_profile_photo_ = NULL;
   current_profile_name_ = NULL;
   tutorial_ok_button_ = NULL;
   tutorial_learn_more_link_ = NULL;
   tutorial_enable_new_profile_management_button_ = NULL;
   account_removal_cancel_button_ = NULL;
   gaia_signin_cancel_button_ = NULL;
   open_other_profile_indexes_map_.clear();
   current_profile_accounts_map_.clear();
   tutorial_showing_ = false;
@@ skipping 80 matching lines @@
   // Disable button after clicking so that it doesn't get clicked twice and
   // start a second action... which can crash Chrome.  But don't disable if it
   // has no parent (like in tests) because that will also crash.
   if (sender->parent())
     sender->SetEnabled(false);
 
   if (sender == users_button_) {
     profiles::ShowUserManagerMaybeWithTutorial(browser_->profile());
   } else if (sender == lock_button_) {
     profiles::LockProfile(browser_->profile());
-  } else if (sender == add_account_button_) {
-    ShowView(BUBBLE_VIEW_MODE_GAIA_ADD_ACCOUNT, avatar_menu_.get());
   } else if (sender == tutorial_ok_button_) {
     // If the user manually dismissed the tutorial, never show it again by
     // setting the number of times shown to the maximum plus 1, so that later we
     // could distinguish between the dismiss case and the case when the tutorial
     // is indeed shown for the maximum number of times.
     browser_->profile()->GetPrefs()->SetInteger(
         prefs::kProfileAvatarTutorialShown, kProfileAvatarTutorialShowMax + 1);
     ShowView(BUBBLE_VIEW_MODE_PROFILE_CHOOSER, avatar_menu_.get());
   } else if (sender == tutorial_enable_new_profile_management_button_) {
     profiles::EnableNewProfileManagementPreview();
   } else if (sender == remove_account_and_relaunch_button_) {
     RemoveAccount();
   } else if (sender == account_removal_cancel_button_) {
     account_id_to_remove_.clear();
     ShowView(BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT, avatar_menu_.get());
   } else if (sender == gaia_signin_cancel_button_) {
     std::string primary_account =
         SigninManagerFactory::GetForProfile(browser_->profile())->
         GetAuthenticatedUsername();
     ShowView(primary_account.empty() ? BUBBLE_VIEW_MODE_PROFILE_CHOOSER :
                                        BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT,
              avatar_menu_.get());
   } else if (current_profile_photo_ &&
              sender == current_profile_photo_->change_photo_button()) {
     avatar_menu_->EditProfile(avatar_menu_->GetActiveProfileIndex());
+  } else if (sender == signin_current_profile_link_) {
+    ShowView(BUBBLE_VIEW_MODE_GAIA_SIGNIN, avatar_menu_.get());
   } else {
-    // One of the "other profiles" buttons was pressed.
-    ButtonIndexes::const_iterator match =
+    // Either one of the "other profiles", or one of the profile accounts
+    // buttons was pressed.
+    ButtonIndexes::const_iterator profile_match =
         open_other_profile_indexes_map_.find(sender);
-    DCHECK(match != open_other_profile_indexes_map_.end());
-    avatar_menu_->SwitchToProfile(
-        match->second,
-        ui::DispositionFromEventFlags(event.flags()) == NEW_WINDOW,
-        ProfileMetrics::SWITCH_PROFILE_ICON);
+    if (profile_match != open_other_profile_indexes_map_.end()) {
+      avatar_menu_->SwitchToProfile(
+          profile_match->second,
+          ui::DispositionFromEventFlags(event.flags()) == NEW_WINDOW,
+          ProfileMetrics::SWITCH_PROFILE_ICON);
+    } else {
+      // This was a profile accounts button.
+      AccountButtonIndexes::const_iterator account_match =
+      current_profile_accounts_map_.find(sender);
+      DCHECK(account_match != current_profile_accounts_map_.end());
+      account_id_to_remove_ = account_match->second;
+      ShowView(BUBBLE_VIEW_MODE_ACCOUNT_REMOVAL, avatar_menu_.get());
+    }
   }
 }
 
-void ProfileChooserView::OnMenuButtonClicked(views::View* source,
-                                             const gfx::Point& point) {
-  AccountButtonIndexes::const_iterator match =
-      current_profile_accounts_map_.find(source);
-  DCHECK(match != current_profile_accounts_map_.end());
-  account_id_to_remove_ = match->second;
-  ShowView(BUBBLE_VIEW_MODE_ACCOUNT_REMOVAL, avatar_menu_.get());
-}
-
 void ProfileChooserView::RemoveAccount() {
   DCHECK(!account_id_to_remove_.empty());
   MutableProfileOAuth2TokenService* oauth2_token_service =
       ProfileOAuth2TokenServiceFactory::GetPlatformSpecificForProfile(
       browser_->profile());
   if (oauth2_token_service)
     oauth2_token_service->RevokeCredentials(account_id_to_remove_);
   account_id_to_remove_.clear();
 
   chrome::AttemptRestart();
 }
 
 void ProfileChooserView::LinkClicked(views::Link* sender, int event_flags) {
   if (sender == manage_accounts_link_) {
-    // ShowView() will DCHECK if this view is displayed for non signed-in users.
-    ShowView(BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT, avatar_menu_.get());
-  } else if (sender == tutorial_learn_more_link_) {
+    // This link can either mean show/hide the account management view,
+    // depending on which view it is displayed. ShowView() will DCHECK if
+    // the account management view is displayed for non signed-in users.
+    ShowView(
+        view_mode_ == BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT ?
+            BUBBLE_VIEW_MODE_PROFILE_CHOOSER :
+            BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT,
+        avatar_menu_.get());
+  } else if (sender == add_account_link_) {
+    ShowView(BUBBLE_VIEW_MODE_GAIA_ADD_ACCOUNT, avatar_menu_.get());
+  } else {
+    DCHECK(sender == tutorial_learn_more_link_);
     // TODO(guohui): update |learn_more_url| once it is decided.
     const GURL lear_more_url("https://support.google.com/chrome/?hl=en#to");
     chrome::NavigateParams params(
         browser_->profile(),
         lear_more_url,
         content::PAGE_TRANSITION_LINK);
     params.disposition = NEW_FOREGROUND_TAB;
     chrome::Navigate(&params);
-  } else {
-    DCHECK(sender == signin_current_profile_link_);
-    ShowView(BUBBLE_VIEW_MODE_GAIA_SIGNIN, avatar_menu_.get());
   }
 }
 
 void ProfileChooserView::StyledLabelLinkClicked(
     const gfx::Range& range, int event_flags) {
   chrome::ShowSettings(browser_);
 }
 
 bool ProfileChooserView::HandleKeyEvent(views::Textfield* sender,
                                         const ui::KeyEvent& key_event) {
@@ skipping 34 matching lines @@
   // Separate items into active and alternatives.
   Indexes other_profiles;
   views::View* tutorial_view = NULL;
   views::View* current_profile_view = NULL;
   views::View* current_profile_accounts = NULL;
   views::View* option_buttons_view = NULL;
   for (size_t i = 0; i < avatar_menu->GetNumberOfItems(); ++i) {
     const AvatarMenu::Item& item = avatar_menu->GetItemAt(i);
     if (item.active) {
       option_buttons_view = CreateOptionsView(item.signed_in);
+      current_profile_view = CreateCurrentProfileView(item, false);
       if (view_mode_ == BUBBLE_VIEW_MODE_PROFILE_CHOOSER) {
         tutorial_view = switches::IsNewProfileManagement() ?
             CreatePreviewEnabledTutorialView(item, tutorial_shown) :
             CreateNewProfileManagementPreviewView();
-        current_profile_view = CreateCurrentProfileView(item, false);
       } else {
-        current_profile_view = CreateCurrentProfileEditableView(item);
         current_profile_accounts = CreateCurrentProfileAccountsView(item);
       }
     } else {
       other_profiles.push_back(i);
     }
   }
 
   if (tutorial_view) {
     layout->StartRow(1, 0);
     layout->AddView(tutorial_view);
@@ skipping 16 matching lines @@
     DCHECK(current_profile_accounts);
     layout->StartRow(0, 0);
     layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
     layout->StartRow(1, 0);
     layout->AddView(current_profile_accounts);
   }
 
   layout->StartRow(0, 0);
   layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
 
-  // Action buttons.
-  layout->StartRow(0, 0);
-  layout->AddView(option_buttons_view);
+  // Option buttons. Only available with the new profile management flag.
+  if (switches::IsNewProfileManagement()) {
+    layout->StartRow(0, 0);
+    layout->AddView(option_buttons_view);
+  }
 
   return view;
 }
 
 views::View* ProfileChooserView::CreatePreviewEnabledTutorialView(
     const AvatarMenu::Item& current_avatar_item,
     bool tutorial_shown) {
   if (!switches::IsNewProfileManagementPreviewEnabled())
     return NULL;
 
@@ skipping 110 matching lines @@
   layout_with_caret->AddView(view);
   layout_with_caret->StartRow(1, 0);
   layout_with_caret->AddView(padded_caret_view);
   return view_with_caret;
 }
 
 views::View* ProfileChooserView::CreateCurrentProfileView(
     const AvatarMenu::Item& avatar_item,
     bool is_guest) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateDoubleColumnLayout(view);
+  int column_width = kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew;
+  views::GridLayout* layout = CreateSingleColumnLayout(view, column_width);
   layout->SetInsets(views::kButtonVEdgeMarginNew,
                     views::kButtonHEdgeMarginNew,
-                    views::kButtonVEdgeMarginNew,
+                    views::kRelatedControlVerticalSpacing,
                     views::kButtonHEdgeMarginNew);
 
-  current_profile_photo_ =
-      new EditableProfilePhoto(this, avatar_item.icon, !is_guest);
-  view->SetBoundsRect(current_profile_photo_->bounds());
+  // Profile icon, centered.
+  float x_offset = (column_width - kLargeImageSide) / 2;
+  current_profile_photo_ = new EditableProfilePhoto(
+      this, avatar_item.icon, !is_guest,
+      gfx::Rect(x_offset, 0, kLargeImageSide, kLargeImageSide));
+  layout->StartRow(1, 0);
+  layout->AddView(current_profile_photo_);
+
+  // Profile name, centered.
   current_profile_name_ = new EditableProfileName(
       this, profiles::GetAvatarNameForProfile(browser_->profile()), !is_guest);
   layout->StartRow(1, 0);
-  layout->AddView(current_profile_photo_, 1, 3);
   layout->AddView(current_profile_name_);
 
-  if (is_guest) {
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
-  } else if (avatar_item.signed_in) {
-    manage_accounts_link_ = CreateLink(
-        l10n_util::GetStringUTF16(IDS_PROFILES_PROFILE_MANAGE_ACCOUNTS_BUTTON),
-        this);
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
-    layout->AddView(manage_accounts_link_);
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
+  if (is_guest)
+    return view;
+
+  // The available links depend on the type of profile that is active.
+  layout->StartRow(1, 0);
+  if (avatar_item.signed_in) {
+    if (switches::IsNewProfileManagement()) {
+      base::string16 link_title = l10n_util::GetStringUTF16(
+          view_mode_ ==  BUBBLE_VIEW_MODE_PROFILE_CHOOSER ?
+              IDS_PROFILES_PROFILE_MANAGE_ACCOUNTS_BUTTON :
+              IDS_PROFILES_PROFILE_HIDE_MANAGE_ACCOUNTS_BUTTON);
+      manage_accounts_link_ = CreateLink(link_title, this);
+      manage_accounts_link_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+      layout->AddView(manage_accounts_link_);
+    } else {
+      views::Label* email_label = new views::Label(avatar_item.sync_state);
+      email_label->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+      layout->AddView(email_label);
+    }
   } else {
-    signin_current_profile_link_ = CreateLink(
-        l10n_util::GetStringFUTF16(
-            IDS_SYNC_START_SYNC_BUTTON_LABEL,
-            l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)),
-        this);
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
+    signin_current_profile_link_ = new views::BlueButton(
+      this, l10n_util::GetStringFUTF16(IDS_SYNC_START_SYNC_BUTTON_LABEL,
+          l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
     layout->AddView(signin_current_profile_link_);
-    layout->StartRow(1, 0);
-    layout->SkipColumns(1);
   }
 
   return view;
 }
 
-views::View* ProfileChooserView::CreateCurrentProfileEditableView(
-    const AvatarMenu::Item& avatar_item) {
-  DCHECK(avatar_item.signed_in);
-  views::View* view = new views::View();
-  views::GridLayout* layout = CreateDoubleColumnLayout(view);
-  layout->SetInsets(views::kButtonVEdgeMarginNew,
-                    views::kButtonHEdgeMarginNew,
-                    views::kButtonVEdgeMarginNew,
-                    views::kButtonHEdgeMarginNew);
-
-  current_profile_photo_ =
-      new EditableProfilePhoto(this, avatar_item.icon, true);
-  view->SetBoundsRect(current_profile_photo_->bounds());
-  current_profile_name_ = new EditableProfileName(
-      this, profiles::GetAvatarNameForProfile(browser_->profile()), true);
-
-  layout->StartRow(1, 0);
-  layout->AddView(current_profile_photo_, 1, 3);
-  layout->AddView(current_profile_name_);
-
-  layout->StartRow(1, 0);
-  layout->SkipColumns(1);
-
-  layout->StartRow(1, 0);
-  layout->SkipColumns(1);
-  return view;
-}
-
 views::View* ProfileChooserView::CreateGuestProfileView() {
   gfx::Image guest_icon =
       ui::ResourceBundle::GetSharedInstance().GetImageNamed(
           profiles::GetPlaceholderAvatarIconResourceID());
   AvatarMenu::Item guest_avatar_item(0, 0, guest_icon);
   guest_avatar_item.active = true;
   guest_avatar_item.name = l10n_util::GetStringUTF16(
       IDS_PROFILES_GUEST_PROFILE_NAME);
   guest_avatar_item.signed_in = false;
 
   return CreateCurrentProfileView(guest_avatar_item, true);
 }
 
 views::View* ProfileChooserView::CreateOtherProfilesView(
     const Indexes& avatars_to_show) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateSingleColumnLayout(
-      view, kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew);
-  layout->SetInsets(0, views::kButtonHEdgeMarginNew,
-                    views::kButtonVEdgeMarginNew, views::kButtonHEdgeMarginNew);
+  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+
   int num_avatars_to_show = avatars_to_show.size();
   for (int i = 0; i < num_avatars_to_show; ++i) {
     const size_t index = avatars_to_show[i];
     const AvatarMenu::Item& item = avatar_menu_->GetItemAt(index);
     const int kSmallImageSide = 32;
 
     gfx::Image image = profiles::GetSizedAvatarIcon(
         item.icon, true,
         kSmallImageSide + profiles::kAvatarIconPadding,
         kSmallImageSide + profiles::kAvatarIconPadding);
 
-    views::LabelButton* button = new views::LabelButton(this, item.name);
+    views::LabelButton* button = new BackgroundColorHoverButton(
+        this,
+        item.name,
+        *image.ToImageSkia(),
+        *image.ToImageSkia());
+    button->set_min_size(gfx::Size(
+        0, kButtonHeight + views::kRelatedControlVerticalSpacing));
+
     open_other_profile_indexes_map_[button] = index;
-    button->SetImage(views::Button::STATE_NORMAL, *image.ToImageSkia());
-    button->SetFontList(ui::ResourceBundle::GetSharedInstance().GetFontList(
-        ui::ResourceBundle::MediumFont));
-    button->SetBorder(views::Border::NullBorder());
 
     layout->StartRow(1, 0);
+    layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
+    layout->StartRow(1, 0);
     layout->AddView(button);
-
-    // The last avatar in the list does not need any bottom padding.
-    if (i < num_avatars_to_show - 1)
-      layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
   }
 
   return view;
 }
 
 views::View* ProfileChooserView::CreateOptionsView(bool enable_lock) {
   views::View* view = new views::View();
   views::GridLayout* layout;
 
   // Only signed-in users have the ability to lock.
   if (enable_lock) {
     layout = new views::GridLayout(view);
     views::ColumnSet* columns = layout->AddColumnSet(0);
     int width_of_lock_button =
         2 * views::kUnrelatedControlLargeHorizontalSpacing + 12;
     int width_of_users_button = kFixedMenuWidth - width_of_lock_button;
     columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 0,
                        views::GridLayout::FIXED, width_of_users_button,
                        width_of_users_button);
     columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 0,
                        views::GridLayout::FIXED, width_of_lock_button,
                        width_of_lock_button);
     view->SetLayoutManager(layout);
   } else {
     layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
   }
 
-  // The horizontal padding will be set by each button individually, so that
-  // in the hovered state the button spans the entire parent view.
-  layout->SetInsets(views::kRelatedControlVerticalSpacing, 0,
-                    views::kRelatedControlVerticalSpacing, 0);
-
   ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
   users_button_ = new BackgroundColorHoverButton(
       this,
       l10n_util::GetStringFUTF16(IDS_PROFILES_NOT_YOU_BUTTON,
           profiles::GetAvatarNameForProfile(browser_->profile())),
       *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_MENU_AVATAR),
       *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_MENU_AVATAR));
+  users_button_->set_min_size(gfx::Size(
+      0, kButtonHeight + views::kRelatedControlVerticalSpacing));
 
   layout->StartRow(1, 0);
   layout->AddView(users_button_);
 
   if (enable_lock) {
     lock_button_ = new BackgroundColorHoverButton(
         this,
         base::string16(),
         *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_MENU_LOCK),
         *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_MENU_LOCK));
+    lock_button_->set_min_size(gfx::Size(
+      0, kButtonHeight + views::kRelatedControlVerticalSpacing));
     layout->AddView(lock_button_);
   }
   return view;
 }
 
 views::View* ProfileChooserView::CreateCurrentProfileAccountsView(
     const AvatarMenu::Item& avatar_item) {
   DCHECK(avatar_item.signed_in);
   views::View* view = new views::View();
-  int column_width = kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew;
-  views::GridLayout* layout = CreateSingleColumnLayout(view, column_width);
-  layout->SetInsets(views::kButtonVEdgeMarginNew,
-                    views::kButtonHEdgeMarginNew,
-                    views::kButtonVEdgeMarginNew,
-                    views::kButtonHEdgeMarginNew);
+  view->set_background(views::Background::CreateSolidBackground(
+      profiles::kAvatarBubbleAccountsBackgroundColor));
+  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
 
   Profile* profile = browser_->profile();
   std::string primary_account =
       SigninManagerFactory::GetForProfile(profile)->GetAuthenticatedUsername();
   DCHECK(!primary_account.empty());
   std::vector<std::string>accounts =
       profiles::GetSecondaryAccountsForProfile(profile, primary_account);
 
   // The primary account should always be listed first.
   // TODO(rogerta): we still need to further differentiate the primary account
   // from the others in the UI, so more work is likely required here:
   // crbug.com/311124.
-  CreateAccountButton(layout, primary_account, true, column_width);
+  CreateAccountButton(layout, primary_account, true, kFixedMenuWidth);
   for (size_t i = 0; i < accounts.size(); ++i)
-    CreateAccountButton(layout, accounts[i], false, column_width);
+    CreateAccountButton(layout, accounts[i], false, kFixedMenuWidth);
   layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
 
-  add_account_button_ = new views::BlueButton(
-      this,
-      l10n_util::GetStringFUTF16(IDS_PROFILES_PROFILE_ADD_ACCOUNT_BUTTON,
-                                 avatar_item.name));
+  add_account_link_ = CreateLink(l10n_util::GetStringFUTF16(
+      IDS_PROFILES_PROFILE_ADD_ACCOUNT_BUTTON, avatar_item.name), this);
+  add_account_link_->SetBorder(views::Border::CreateEmptyBorder(
+      0, views::kButtonVEdgeMarginNew,
+      views::kRelatedControlVerticalSpacing, 0));
   layout->StartRow(1, 0);
-  layout->AddView(add_account_button_);
+  layout->AddView(add_account_link_);
   return view;
 }
 
 void ProfileChooserView::CreateAccountButton(views::GridLayout* layout,
                                              const std::string& account,
                                              bool is_primary_account,
                                              int width) {
   ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
   const gfx::ImageSkia* menu_marker =
       rb->GetImageNamed(IDR_CLOSE_1).ToImageSkia();
-  // Use a MenuButtonListener and not a regular ButtonListener to be
-  // able to distinguish between the unnamed "other profile" buttons and the
-  // unnamed "multiple accounts" buttons.
-  views::MenuButton* email_button = new views::MenuButton(
-      NULL,
+
+  views::LabelButton* email_button = new BackgroundColorHoverButton(
+      this,
       gfx::ElideEmail(base::UTF8ToUTF16(account),
                       rb->GetFontList(ui::ResourceBundle::BaseFont),
                       width - menu_marker->width()),
-      this,
-      true /* show_menu_marker */);
-  email_button->SetBorder(views::Border::CreateEmptyBorder(0, 0, 0, 0));
-  email_button->set_menu_marker(menu_marker);
-  if (!is_primary_account)
-    layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
+      gfx::ImageSkia(),
+      gfx::ImageSkia());
   layout->StartRow(1, 0);
   layout->AddView(email_button);
 
   // Save the original email address, as the button text could be elided.
   current_profile_accounts_map_[email_button] = account;
 }
 
 views::View* ProfileChooserView::CreateGaiaSigninView(
     bool add_secondary_account) {
   views::View* view = new views::View();
@@ skipping 105 matching lines @@
 
 views::View* ProfileChooserView::CreateNewProfileManagementPreviewView() {
   return CreateTutorialView(
       l10n_util::GetStringUTF16(IDS_PROFILES_PREVIEW_TUTORIAL_TITLE),
       l10n_util::GetStringUTF16(IDS_PROFILES_PREVIEW_TUTORIAL_CONTENT_TEXT),
       l10n_util::GetStringUTF16(IDS_PROFILES_PROFILE_TUTORIAL_LEARN_MORE),
       l10n_util::GetStringUTF16(IDS_PROFILES_TUTORIAL_TRY_BUTTON),
       &tutorial_learn_more_link_,
       &tutorial_enable_new_profile_management_button_);
 }