[Win] Redesign the avatar bubble UI

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

Index: chrome/browser/ui/views/profiles/profile_chooser_view.cc
diff --git a/chrome/browser/ui/views/profiles/profile_chooser_view.cc b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
index a4feda38d01797a05657cac1f0574e7e8936dd3c..54c9c094dc318abbef90ff0cf7f537420110028c 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -34,6 +34,7 @@
 #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"
@@ -62,6 +63,7 @@ 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.
@@ -98,6 +100,21 @@ views::Link* CreateLink(const base::string16& link_text,
   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 -------------------------------------------------
 
@@ -136,7 +153,7 @@ 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);
 }
@@ -151,15 +168,16 @@ 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;
@@ -181,9 +199,9 @@ class EditableProfilePhoto : public views::ImageView {
     // 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_);
@@ -226,20 +244,33 @@ class EditableProfileName : public views::LabelButton,
     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_);
   }
@@ -280,10 +311,10 @@ class EditableProfileName : public views::LabelButton,
     // 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_;
 
@@ -415,7 +446,7 @@ void ProfileChooserView::ResetView() {
   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;
@@ -516,8 +547,6 @@ void ProfileChooserView::ButtonPressed(views::Button* sender,
     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
@@ -543,27 +572,29 @@ void ProfileChooserView::ButtonPressed(views::Button* sender,
   } 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 =
@@ -578,9 +609,18 @@ void ProfileChooserView::RemoveAccount() {
 
 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(
@@ -589,9 +629,6 @@ void ProfileChooserView::LinkClicked(views::Link* sender, int event_flags) {
         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());
   }
 }
 
@@ -646,13 +683,12 @@ views::View* ProfileChooserView::CreateProfileChooserView(
     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 {
@@ -689,9 +725,11 @@ views::View* ProfileChooserView::CreateProfileChooserView(
   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;
 }
@@ -822,79 +860,56 @@ 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(
@@ -911,10 +926,8 @@ views::View* ProfileChooserView::CreateGuestProfileView() {
 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];
@@ -926,19 +939,20 @@ views::View* ProfileChooserView::CreateOtherProfilesView(
         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;
@@ -966,11 +980,6 @@ views::View* ProfileChooserView::CreateOptionsView(bool enable_lock) {
     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,
@@ -978,6 +987,8 @@ views::View* ProfileChooserView::CreateOptionsView(bool enable_lock) {
           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_);
@@ -988,6 +999,8 @@ views::View* ProfileChooserView::CreateOptionsView(bool enable_lock) {
         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;
@@ -997,12 +1010,9 @@ 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 =
@@ -1015,17 +1025,18 @@ views::View* ProfileChooserView::CreateCurrentProfileAccountsView(
   // 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;
 }
 
@@ -1036,20 +1047,14 @@ void ProfileChooserView::CreateAccountButton(views::GridLayout* layout,
   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);