[Mac] Redesign the avatar bubble UI

chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm

 // 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.
 
 #import <Cocoa/Cocoa.h>
 
 #import "chrome/browser/ui/cocoa/profiles/profile_chooser_controller.h"
 
 #include "base/mac/bundle_locations.h"
 #include "base/prefs/pref_service.h"
@@ skipping 47 matching lines @@
 #include "ui/base/l10n/l10n_util_mac.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/image/image.h"
 #include "ui/gfx/text_elider.h"
 #include "ui/native_theme/native_theme.h"
 
 namespace {
 
 // Constants taken from the Windows/Views implementation at:
 // chrome/browser/ui/views/profile_chooser_view.cc
-const int kLargeImageSide = 64;
+const int kLargeImageSide = 88;
 const int kSmallImageSide = 32;
 const CGFloat kFixedMenuWidth = 250;
 
-const CGFloat kVerticalSpacing = 20.0;
+const CGFloat kVerticalSpacing = 16.0;
 const CGFloat kSmallVerticalSpacing = 10.0;
-const CGFloat kHorizontalSpacing = 20.0;
+const CGFloat kHorizontalSpacing = 16.0;
 const CGFloat kTitleFontSize = 15.0;
 const CGFloat kTextFontSize = 12.0;
 const CGFloat kProfileButtonHeight = 30;
 const int kOverlayHeight = 20;  // Height of the "Change" avatar photo overlay.
 const int kBezelThickness = 3;  // Width of the bezel on an NSButton.
 const int kImageTitleSpacing = 10;
 const int kBlueButtonHeight = 30;
 
 // Fixed size for embedded sign in pages as defined in Gaia.
 const CGFloat kFixedGaiaViewWidth = 360;
 const CGFloat kFixedGaiaViewHeight = 400;
 
 // Fixed size for the account removal view.
 const CGFloat kFixedAccountRemovalViewWidth = 280;
 
 // Maximum number of times to show the tutorial in the profile avatar bubble.
 const int kProfileAvatarTutorialShowMax = 5;
 
 // The tag number for the primary account.
 const int kPrimaryProfileTag = -1;
 
 gfx::Image CreateProfileImage(const gfx::Image& icon, int imageSize) {
-  return profiles::GetSizedAvatarIconWithBorder(
+  return profiles::GetSizedAvatarIcon(
       icon, true /* image is a square */,
       imageSize + profiles::kAvatarIconPadding,
       imageSize + profiles::kAvatarIconPadding);
 }
 
 // Updates the window size and position.
 void SetWindowSize(NSWindow* window, NSSize size) {
   NSRect frame = [window frame];
   frame.origin.x += frame.size.width - size.width;
   frame.origin.y += frame.size.height - size.height;
@@ skipping 368 matching lines @@
 @implementation EditableProfileNameButton
 - (id)initWithFrame:(NSRect)frameRect
             profile:(Profile*)profile
         profileName:(NSString*)profileName
      editingAllowed:(BOOL)editingAllowed {
   if ((self = [super initWithFrame:frameRect])) {
     profile_ = profile;
 
     [self setBordered:NO];
     [self setFont:[NSFont labelFontOfSize:kTitleFontSize]];
-    [self setAlignment:NSLeftTextAlignment];
+    [self setAlignment:NSCenterTextAlignment];
     [[self cell] setLineBreakMode:NSLineBreakByTruncatingTail];
     [self setTitle:profileName];
 
     if (editingAllowed) {
-      // Show an "edit" pencil icon when hovering over.
+      // 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.
       ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
-      [self setHoverImage:
-          rb->GetNativeImageNamed(IDR_ICON_PROFILES_EDIT_HOVER).AsNSImage()];
+      NSImage* hoverImage = rb->GetNativeImageNamed(
+          IDR_ICON_PROFILES_EDIT_HOVER).AsNSImage();
+      NSImage* placeholder = [[NSImage alloc] initWithSize:[hoverImage size]];
+      [self setDefaultImage:placeholder];
+      [self setHoverImage:hoverImage];
       [self setAlternateImage:
           rb->GetNativeImageNamed(IDR_ICON_PROFILES_EDIT_PRESSED).AsNSImage()];
       [self setImagePosition:NSImageRight];
       [self setTarget:self];
       [self setAction:@selector(showEditableView:)];
 
       // We need to subtract the width of the bezel from the frame rect, so that
       // the textfield can take the exact same space as the button.
       frameRect.size.height -= 2 * kBezelThickness;
       frameRect.origin = NSMakePoint(0, kBezelThickness);
       profileNameTextField_.reset(
           [[NSTextField alloc] initWithFrame:frameRect]);
       [profileNameTextField_ setStringValue:profileName];
       [profileNameTextField_ setFont:[NSFont labelFontOfSize:kTitleFontSize]];
       [profileNameTextField_ setEditable:YES];
       [profileNameTextField_ setDrawsBackground:YES];
       [profileNameTextField_ setBezeled:YES];
+      [profileNameTextField_ setAlignment:NSCenterTextAlignment];
       [[profileNameTextField_ cell] setWraps:NO];
       [[profileNameTextField_ cell] setLineBreakMode:
           NSLineBreakByTruncatingTail];
       [profileNameTextField_ setDelegate:self];
       [self addSubview:profileNameTextField_];
 
       // Hide the textfield until the user clicks on the button.
       [profileNameTextField_ setHidden:YES];
     }
   }
@@ skipping 63 matching lines @@
 
 - (NSSize)cellSize {
   NSSize buttonSize = [super cellSize];
   buttonSize.width += leftMarginSpacing_ + imageTitleSpacing_;
   return buttonSize;
 }
 
 @end
 
 // A custom button that allows for setting a background color when hovered over.
-@interface BackgroundColorHoverButton : HoverImageButton
+@interface BackgroundColorHoverButton : HoverImageButton {
+ @private
+  base::scoped_nsobject<NSColor> backgroundColor_;
+}
 @end
 
 @implementation BackgroundColorHoverButton
-- (id)initWithFrame:(NSRect)frameRect {
+
+- (id)initWithFrame:(NSRect)frameRect
+  imageTitleSpacing:(int)imageTitleSpacing
+    backgroundColor:(const SkColor&)backgroundColor {
   if ((self = [super initWithFrame:frameRect])) {
+    backgroundColor_.reset(
+        [gfx::SkColorToCalibratedNSColor(backgroundColor) retain]);
+
     [self setBordered:NO];
     [self setFont:[NSFont labelFontOfSize:kTextFontSize]];
     [self setButtonType:NSMomentaryChangeButton];
 
     base::scoped_nsobject<CustomPaddingImageButtonCell> cell(
         [[CustomPaddingImageButtonCell alloc]
             initWithLeftMarginSpacing:kHorizontalSpacing
-                    imageTitleSpacing:kImageTitleSpacing]);
+                    imageTitleSpacing:imageTitleSpacing]);
     [cell setLineBreakMode:NSLineBreakByTruncatingTail];
     [self setCell:cell.get()];
   }
   return self;
 }
 
 - (void)setHoverState:(HoverState)state {
   [super setHoverState:state];
   bool isHighlighted = ([self hoverState] != kHoverStateNone);
 
-  NSColor* backgroundColor = gfx::SkColorToCalibratedNSColor(
-      ui::NativeTheme::instance()->GetSystemColor(isHighlighted?
-          ui::NativeTheme::kColorId_MenuSeparatorColor :
-          ui::NativeTheme::kColorId_DialogBackground));

[Elliot Glaysher, 2014/04/16 21:24:48]

Like, you probably want to maintain this structure. If you have a specific color
that you want to use, you should make a kColorId and access that instead.

[noms (inactive), 2014/04/17 14:13:41]

But If I make a specific ColorId, how is that different than just making a
constant? I assume it won't change on different themes -- i think in that menu,
we always want the button to have a grey hover background. I guess I've only
tested this on Mac and Windows, is Linux the theme that is different, or can
there be different themes for each platform?

The reason why here I had used the menuSeparatorColor is that initially I didn't
know what the exact colour of the hover should be (not because it should
actually be the same as the separator)...

On 2014/04/16 21:24:48, Elliot Glaysher wrote:

[Elliot Glaysher, 2014/04/17 17:29:25]

There can be different NativeTheme subclasses compiled into the same platform.
The Linux theme (chrome/browser/ui/libgtk2ui/native_theme_gtk2.cc) plumbs mostly
native system colors. We plumb the native dialog color through on Linux (even
though it's hardcoded white everywhere(?) else) and probably want to do the same
for something that interacts like a bubble.

-
+  NSColor* backgroundColor = isHighlighted ? gfx::SkColorToCalibratedNSColor(
+      profiles::kAvatarBubbleButtonHighlightColor) : backgroundColor_;
   [[self cell] setBackgroundColor:backgroundColor];
 }
 
 @end
 
 // A custom view with the given background color.
 @interface BackgroundColorView : NSView {
  @private
   base::scoped_nsobject<NSColor> backgroundColor_;
 }
@@ skipping 32 matching lines @@
 // out the feature. Otherwise, it notifies the user that the feature has been
 // enabled if needed.
 - (NSView*)buildPreviewTutorialIfNeeded:(const AvatarMenu::Item&)item;
 
 // Creates the main profile card for the profile |item| at the top of
 // the bubble.
 - (NSView*)createCurrentProfileView:(const AvatarMenu::Item&)item;
 
 // Creates the possible links for the main profile card with profile |item|.
 - (NSView*)createCurrentProfileLinksForItem:(const AvatarMenu::Item&)item
-                                withXOffset:(CGFloat)xOffset;
+                                       rect:(NSRect)rect;
 
 // Creates a main profile card for the guest user.
 - (NSView*)createGuestProfileView;
 
 // Creates an item for the profile |itemIndex| that is used in the fast profile
 // switcher in the middle of the bubble.
 - (NSButton*)createOtherProfileView:(int)itemIndex;
 
 // Creates the "Not you" and Lock option buttons.
 - (NSView*)createOptionsViewWithRect:(NSRect)rect
@@ skipping 46 matching lines @@
 }
 
 - (IBAction)showUserManager:(id)sender {
   profiles::ShowUserManagerMaybeWithTutorial(browser_->profile());
 }
 
 - (IBAction)showAccountManagement:(id)sender {
   [self initMenuContentsWithView:BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT];
 }
 
+- (IBAction)hideAccountManagement:(id)sender {
+  [self initMenuContentsWithView:BUBBLE_VIEW_MODE_PROFILE_CHOOSER];
+}
+
 - (IBAction)lockProfile:(id)sender {
   profiles::LockProfile(browser_->profile());
 }
 
-- (IBAction)showSigninPage:(id)sender {
+- (IBAction)showInlineSigninPage:(id)sender {
   [self initMenuContentsWithView:BUBBLE_VIEW_MODE_GAIA_SIGNIN];
 }
 
+- (IBAction)showTabbedSigninPage:(id)sender {
+  chrome::ShowBrowserSignin(browser_, signin::SOURCE_MENU);
+}
+
 - (IBAction)addAccount:(id)sender {
   [self initMenuContentsWithView:BUBBLE_VIEW_MODE_GAIA_ADD_ACCOUNT];
 }
 
 - (IBAction)navigateBackFromSigninPage:(id)sender {
   std::string primaryAccount = SigninManagerFactory::GetForProfile(
       browser_->profile())->GetAuthenticatedUsername();
   [self initMenuContentsWithView:primaryAccount.empty() ?
       BUBBLE_VIEW_MODE_PROFILE_CHOOSER : BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT];
 }
@@ skipping 120 matching lines @@
       enableLock = item.signed_in;
     } else {
       [otherProfiles addObject:[self createOtherProfileView:i]];
     }
   }
   if (!currentProfileView)  // Guest windows don't have an active profile.
     currentProfileView = [self createGuestProfileView];
 
   // |yOffset| is the next position at which to draw in |contentView|
   // coordinates.
-  CGFloat yOffset = kSmallVerticalSpacing;
+  CGFloat yOffset = 0;
 
-  // Option buttons.
-  NSView* optionsView = [self createOptionsViewWithRect:
-      NSMakeRect(0, yOffset, kFixedMenuWidth, 0)
-                                        enableLock:enableLock];
-  [contentView addSubview:optionsView];
-  yOffset = NSMaxY([optionsView frame]) + kSmallVerticalSpacing;
+  // Option buttons. Only available with the new profile management flag.
+  if (switches::IsNewProfileManagement()) {
+    NSRect rect = NSMakeRect(0, yOffset, kFixedMenuWidth, 0);
+    NSView* optionsView = [self createOptionsViewWithRect:rect
+                                               enableLock:enableLock];
+    [contentView addSubview:optionsView];
+    rect.origin.y = NSMaxY([optionsView frame]);
 
-  NSBox* separator = [self separatorWithFrame:
-      NSMakeRect(0, yOffset, kFixedMenuWidth, 0)];
-  [contentView addSubview:separator];
-  yOffset = NSMaxY([separator frame]) + kVerticalSpacing;
+    NSBox* separator = [self separatorWithFrame:rect];
+    [contentView addSubview:separator];
+    yOffset = NSMaxY([separator frame]);
+  }
 
   if (viewToDisplay == BUBBLE_VIEW_MODE_PROFILE_CHOOSER &&
       switches::IsFastUserSwitching()) {
     // Other profiles switcher. The profiles have already been sorted
     // by their y-coordinate, so they can be added in the existing order.
     for (NSView *otherProfileView in otherProfiles.get()) {
-      [otherProfileView setFrameOrigin:NSMakePoint(kHorizontalSpacing,
-                                                   yOffset)];
+      [otherProfileView setFrameOrigin:NSMakePoint(0, yOffset)];
       [contentView addSubview:otherProfileView];
-      yOffset = NSMaxY([otherProfileView frame]) + kSmallVerticalSpacing;
+      yOffset = NSMaxY([otherProfileView frame]);
+
+      NSBox* separator =
+          [self separatorWithFrame:NSMakeRect(0, yOffset, kFixedMenuWidth, 0)];
+      [contentView addSubview:separator];
+      yOffset = NSMaxY([separator frame]);
     }
-
-    // If we displayed other profiles, ensure the spacing between the last item
-    // and the active profile card is the same as the spacing between the active
-    // profile card and the bottom of the bubble.
-    if ([otherProfiles.get() count] > 0)
-      yOffset += kSmallVerticalSpacing;
   } else if (viewToDisplay == BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT) {
     NSView* currentProfileAccountsView = [self createCurrentProfileAccountsView:
-        NSMakeRect(kHorizontalSpacing,
-                   yOffset,
-                   kFixedMenuWidth - 2 * kHorizontalSpacing,
-                   0)];
+        NSMakeRect(0, yOffset, kFixedMenuWidth, 0)];
     [contentView addSubview:currentProfileAccountsView];
-    yOffset = NSMaxY([currentProfileAccountsView frame]) + kVerticalSpacing;
+    yOffset = NSMaxY([currentProfileAccountsView frame]);
 
     NSBox* accountsSeparator = [self separatorWithFrame:
         NSMakeRect(0, yOffset, kFixedMenuWidth, 0)];
     [contentView addSubview:accountsSeparator];
-    yOffset = NSMaxY([accountsSeparator frame]) + kVerticalSpacing;
+    yOffset = NSMaxY([accountsSeparator frame]);
   }
 
   // Active profile card.
   if (currentProfileView) {
-    [currentProfileView setFrameOrigin:NSMakePoint(kHorizontalSpacing,
-                                                   yOffset)];
+    yOffset += kVerticalSpacing;
+    [currentProfileView setFrameOrigin:NSMakePoint(0, yOffset)];
     [contentView addSubview:currentProfileView];
     yOffset = NSMaxY([currentProfileView frame]) + kVerticalSpacing;
   }
 
   if (tutorialView) {
     [tutorialView setFrameOrigin:NSMakePoint(0, yOffset)];
     [contentView addSubview:tutorialView];
     yOffset = NSMaxY([tutorialView frame]);
   } else {
     tutorialShowing_ = false;
@@ skipping 133 matching lines @@
 
   [containerWithCaret setFrameSize:
       NSMakeSize(kFixedMenuWidth, NSMaxY([container frame]))];
   return containerWithCaret.autorelease();
 }
 
 - (NSView*)createCurrentProfileView:(const AvatarMenu::Item&)item {
   base::scoped_nsobject<NSView> container([[NSView alloc]
       initWithFrame:NSZeroRect]);
 
-  // Profile icon.
-  base::scoped_nsobject<EditableProfilePhoto> iconView(
-      [[EditableProfilePhoto alloc]
-          initWithFrame:NSMakeRect(0, 0, kLargeImageSide, kLargeImageSide)
-             avatarMenu:avatarMenu_.get()
-            profileIcon:item.icon
-         editingAllowed:!isGuestSession_]);
+  CGFloat xOffset = kHorizontalSpacing;
+  CGFloat yOffset = 0;
+  CGFloat availableTextWidth = kFixedMenuWidth - 2 * kHorizontalSpacing;
 
-  [container addSubview:iconView];
-
-  CGFloat xOffset = NSMaxX([iconView frame]) + kHorizontalSpacing;
-  CGFloat yOffset = kVerticalSpacing;
-  if (!isGuestSession_ && viewMode_ == BUBBLE_VIEW_MODE_PROFILE_CHOOSER) {
+  // Profile options. This can be a link to the accounts view, the profile's
+  // username for signed in users, or a "Sign in" button for local profiles.
+  if (!isGuestSession_) {
     NSView* linksContainer =
-        [self createCurrentProfileLinksForItem:item withXOffset:xOffset];
+        [self createCurrentProfileLinksForItem:item
+                                          rect:NSMakeRect(xOffset, yOffset,
+                                                          availableTextWidth,
+                                                          0)];
     [container addSubview:linksContainer];
     yOffset = NSMaxY([linksContainer frame]);
   }
 
-  // Profile name.
-  CGFloat availableTextWidth =
-      kFixedMenuWidth - xOffset - 2 * kHorizontalSpacing;
+  // Profile name, centered.
   base::scoped_nsobject<EditableProfileNameButton> profileName(
       [[EditableProfileNameButton alloc]
           initWithFrame:NSMakeRect(xOffset, yOffset,
                                    availableTextWidth,
                                    kProfileButtonHeight)
                 profile:browser_->profile()
             profileName:base::SysUTF16ToNSString(
                 profiles::GetAvatarNameForProfile(browser_->profile()))
          editingAllowed:!isGuestSession_]);
 
   [container addSubview:profileName];
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth,
-                                     NSHeight([iconView frame]))];
+  yOffset = NSMaxY([profileName frame]);
+
+  // Profile icon, centered.
+  xOffset = (kFixedMenuWidth - kLargeImageSide) / 2;
+  base::scoped_nsobject<EditableProfilePhoto> iconView(
+      [[EditableProfilePhoto alloc]
+          initWithFrame:NSMakeRect(xOffset, yOffset,
+                                   kLargeImageSide, kLargeImageSide)
+             avatarMenu:avatarMenu_.get()
+            profileIcon:item.icon
+         editingAllowed:!isGuestSession_]);
+
+  [container addSubview:iconView];
+  yOffset = NSMaxY([iconView frame]);
+
+  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
   return container.autorelease();
 }
 
 - (NSView*)createCurrentProfileLinksForItem:(const AvatarMenu::Item&)item
-                                withXOffset:(CGFloat)xOffset {
-  base::scoped_nsobject<NSView> container([[NSView alloc]
-      initWithFrame:NSZeroRect]);
+                                       rect:(NSRect)rect {
+  base::scoped_nsobject<NSView> container([[NSView alloc] initWithFrame:rect]);
 
+  // Don't double-apply the left margin to the sub-views.
+  rect.origin.x = 0;
+
+  // The available links depend on the type of profile that is active.
   NSButton* link;
-  NSPoint frameOrigin = NSMakePoint(xOffset, kSmallVerticalSpacing);
-  // The available links depend on the type of profile that is active.
   if (item.signed_in) {
-    link = [self linkButtonWithTitle:l10n_util::GetNSString(
-        IDS_PROFILES_PROFILE_MANAGE_ACCOUNTS_BUTTON)
-                         frameOrigin:frameOrigin
-                              action:@selector(showAccountManagement:)];
+    if (switches::IsNewProfileManagement()) {
+      NSString* linkTitle = l10n_util::GetNSString(
+          viewMode_ ==  BUBBLE_VIEW_MODE_PROFILE_CHOOSER ?
+              IDS_PROFILES_PROFILE_MANAGE_ACCOUNTS_BUTTON :
+              IDS_PROFILES_PROFILE_HIDE_MANAGE_ACCOUNTS_BUTTON);
+      SEL linkSelector = (viewMode_ ==  BUBBLE_VIEW_MODE_PROFILE_CHOOSER) ?
+          @selector(showAccountManagement:) : @selector(hideAccountManagement:);
+      link = [self linkButtonWithTitle:linkTitle
+                           frameOrigin:rect.origin
+                                action:linkSelector];
+    } else {
+      link = [self linkButtonWithTitle:base::SysUTF16ToNSString(item.sync_state)
+                           frameOrigin:rect.origin
+                                action:nil];
+      [[link cell] setTextColor:[NSColor blackColor]];
+    }
+    // -linkButtonWithTitle sizeToFit's the link, so re-stretch it so that it
+    // can be centered correctly in the view.
+    rect.size.height = NSMaxY([link frame]);
+    [link setFrame:rect];
+    [link setAlignment:NSCenterTextAlignment];
   } else {
-    link = [self linkButtonWithTitle:l10n_util::GetNSStringFWithFixup(
-        IDS_SYNC_START_SYNC_BUTTON_LABEL,
-        l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME))
-                         frameOrigin:frameOrigin
-                              action:@selector(showSigninPage:)];
+    rect.size.height = kBlueButtonHeight;
+    link = [[BlueLabelButton alloc] initWithFrame:rect];
+
+    // Manually elide the button text so that the contents fit inside the bubble
+    // This is needed because the BlueLabelButton cell resets the style on
+    // every call to -cellSize, which prevents setting a custom lineBreakMode.
+    NSString* elidedButtonText = base::SysUTF16ToNSString(gfx::ElideText(
+        l10n_util::GetStringFUTF16(
+            IDS_SYNC_START_SYNC_BUTTON_LABEL,
+            l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)),
+        ui::ResourceBundle::GetSharedInstance().GetFontList(
+            ui::ResourceBundle::BaseFont),
+        rect.size.width,
+        gfx::ELIDE_AT_END));
+
+    [link setTitle:elidedButtonText];
+    [link setTarget:self];
+    [link setAction:switches::IsNewProfileManagement() ?
+        @selector(showInlineSigninPage:) : @selector(showTabbedSigninPage:)];
   }
 
   [container addSubview:link];
-  [container setFrameSize:NSMakeSize(
-      NSMaxX([link frame]), NSMaxY([link frame]) + kSmallVerticalSpacing)];
+  [container setFrameSize:rect.size];
   return container.autorelease();
 }
 
 - (NSView*)createGuestProfileView {
   gfx::Image guestIcon =
       ui::ResourceBundle::GetSharedInstance().GetNativeImageNamed(
           IDR_LOGIN_GUEST);
   AvatarMenu::Item guestItem(std::string::npos, /* menu_index, not used */
                              std::string::npos, /* profile_index, not used */
                              guestIcon);
   guestItem.active = true;
   guestItem.name = base::SysNSStringToUTF16(
       l10n_util::GetNSString(IDS_PROFILES_GUEST_PROFILE_NAME));
 
   return [self createCurrentProfileView:guestItem];
 }
 
 - (NSButton*)createOtherProfileView:(int)itemIndex {
   const AvatarMenu::Item& item = avatarMenu_->GetItemAt(itemIndex);
-  base::scoped_nsobject<NSButton> profileButton([[NSButton alloc]
-      initWithFrame:NSZeroRect]);
-  base::scoped_nsobject<CustomPaddingImageButtonCell> cell(
-  [[CustomPaddingImageButtonCell alloc]
-      initWithLeftMarginSpacing:0
-              imageTitleSpacing:kImageTitleSpacing]);
-  [profileButton setCell:cell.get()];
 
-  [[profileButton cell] setLineBreakMode:NSLineBreakByTruncatingTail];
+  NSRect rect = NSMakeRect(0, 0, kFixedMenuWidth,
+                           kBlueButtonHeight + kSmallVerticalSpacing);
+  SkColor backgroundColor = ui::NativeTheme::instance()->GetSystemColor(
+      ui::NativeTheme::kColorId_DialogBackground);
+
+  base::scoped_nsobject<BackgroundColorHoverButton> profileButton(
+      [[BackgroundColorHoverButton alloc] initWithFrame:rect
+                                      imageTitleSpacing:kImageTitleSpacing
+                                        backgroundColor:backgroundColor]);
   [profileButton setTitle:base::SysUTF16ToNSString(item.name)];
-  [profileButton setImage:CreateProfileImage(
+  [profileButton setDefaultImage:CreateProfileImage(
       item.icon, kSmallImageSide).ToNSImage()];
   [profileButton setImagePosition:NSImageLeft];
   [profileButton setAlignment:NSLeftTextAlignment];
   [profileButton setBordered:NO];
-  [profileButton setFont:[NSFont labelFontOfSize:kTitleFontSize]];
   [profileButton setTag:itemIndex];
   [profileButton setTarget:self];
   [profileButton setAction:@selector(switchToProfile:)];
 
-  // Since the bubble is fixed width, we need to calculate the width available
-  // for the profile name, as longer names will have to be elided.
-  CGFloat availableTextWidth = kFixedMenuWidth - 2 * kHorizontalSpacing;
-  [profileButton sizeToFit];
-  [profileButton setFrameSize:NSMakeSize(availableTextWidth,
-                                         NSHeight([profileButton frame]))];
-
   return profileButton.autorelease();
 }
 
 - (NSView*)createOptionsViewWithRect:(NSRect)rect
                           enableLock:(BOOL)enableLock {
   int widthOfLockButton = enableLock? 2 * kHorizontalSpacing + 12 : 0;
   NSRect viewRect = NSMakeRect(0, 0,
                                rect.size.width - widthOfLockButton,
-                               kBlueButtonHeight);
+                               kBlueButtonHeight + kVerticalSpacing);
   NSButton* notYouButton =
       [self hoverButtonWithRect:viewRect
                            text:l10n_util::GetNSStringF(
           IDS_PROFILES_NOT_YOU_BUTTON,
           profiles::GetAvatarNameForProfile(browser_->profile()))
                 imageResourceId:IDR_ICON_PROFILES_MENU_AVATAR
        alternateImageResourceId:IDR_ICON_PROFILES_MENU_AVATAR
                          action:@selector(showUserManager:)];
 
   rect.size.height = NSMaxY([notYouButton frame]);
-  base::scoped_nsobject<NSView> container([[NSView alloc]
-      initWithFrame:rect]);
+  base::scoped_nsobject<NSView> container([[NSView alloc] initWithFrame:rect]);
   [container addSubview:notYouButton];
 
   if (enableLock) {
     viewRect.origin.x = NSMaxX([notYouButton frame]);
     viewRect.size.width = widthOfLockButton;
     NSButton* lockButton =
         [self hoverButtonWithRect:viewRect
                              text:@""
                   imageResourceId:IDR_ICON_PROFILES_MENU_LOCK
          alternateImageResourceId:IDR_ICON_PROFILES_MENU_LOCK
                            action:@selector(lockProfile:)];
     [container addSubview:lockButton];
   }
 
   return container.autorelease();
 }
 
 - (NSView*)createCurrentProfileAccountsView:(NSRect)rect {
-  const CGFloat kAccountButtonHeight = 15;
+  const CGFloat kAccountButtonHeight = 34;
 
   const AvatarMenu::Item& item =
       avatarMenu_->GetItemAt(avatarMenu_->GetActiveProfileIndex());
   DCHECK(item.signed_in);
 
-  base::scoped_nsobject<NSView> container([[NSView alloc] initWithFrame:rect]);
-
-  NSRect viewRect = NSMakeRect(0, 0, rect.size.width, kBlueButtonHeight);
-  base::scoped_nsobject<NSButton> addAccountsButton([[BlueLabelButton alloc]
-      initWithFrame:viewRect]);
+  NSColor* backgroundColor = gfx::SkColorToCalibratedNSColor(
+      profiles::kAvatarBubbleAccountsBackgroundColor);
+  base::scoped_nsobject<NSView> container([[BackgroundColorView alloc]
+      initWithFrame:rect
+          withColor:backgroundColor]);
 
   // Manually elide the button text so that the contents fit inside the bubble.
   // This is needed because the BlueLabelButton cell resets the style on
   // every call to -cellSize, which prevents setting a custom lineBreakMode.
   NSString* elidedButtonText = base::SysUTF16ToNSString(gfx::ElideText(
       l10n_util::GetStringFUTF16(
           IDS_PROFILES_PROFILE_ADD_ACCOUNT_BUTTON, item.name),
       ui::ResourceBundle::GetSharedInstance().GetFontList(
           ui::ResourceBundle::BaseFont),
       rect.size.width,
       gfx::ELIDE_AT_END));
 
-  [addAccountsButton setTitle:elidedButtonText];
-  [addAccountsButton setTarget:self];
-  [addAccountsButton setAction:@selector(addAccount:)];
+  NSButton* addAccountsButton =
+      [self linkButtonWithTitle:elidedButtonText
+                    frameOrigin:NSMakePoint(
+          kHorizontalSpacing, kSmallVerticalSpacing)
+                         action:@selector(addAccount:)];
   [container addSubview:addAccountsButton];
 
-  // Update the height of the email account buttons. This is needed so that the
-  // all the buttons span the entire width of the bubble.
-  viewRect.origin.y = NSMaxY([addAccountsButton frame]) + kVerticalSpacing;
-  viewRect.size.height = kAccountButtonHeight;
+  NSView* accountEmails = [self createAccountsListWithRect:NSMakeRect(
+      0, kAccountButtonHeight, rect.size.width, kAccountButtonHeight)];
+  [container addSubview:accountEmails];
 
-  NSView* accountEmails = [self createAccountsListWithRect:viewRect];
-  [container addSubview:accountEmails];
-  [container setFrameSize:NSMakeSize(
-      NSWidth([container frame]), NSMaxY([accountEmails frame]))];
+  [container setFrameSize:NSMakeSize(rect.size.width,
+                                     NSMaxY([accountEmails frame]))];
   return container.autorelease();
 }
 
 - (NSView*)createAccountsListWithRect:(NSRect)rect {
   base::scoped_nsobject<NSView> container([[NSView alloc] initWithFrame:rect]);
   currentProfileAccounts_.clear();
 
   Profile* profile = browser_->profile();
   std::string primaryAccount =
       SigninManagerFactory::GetForProfile(profile)->GetAuthenticatedUsername();
   DCHECK(!primaryAccount.empty());
   std::vector<std::string>accounts =
       profiles::GetSecondaryAccountsForProfile(profile, primaryAccount);
 
   rect.origin.y = 0;
   for (size_t i = 0; i < accounts.size(); ++i) {
     // Save the original email address, as the button text could be elided.
     currentProfileAccounts_[i] = accounts[i];
     NSButton* accountButton = [self accountButtonWithRect:rect
                                                     title:accounts[i]];
     [accountButton setTag:i];
     [container addSubview:accountButton];
-    rect.origin.y = NSMaxY([accountButton frame]) + kSmallVerticalSpacing;
+    rect.origin.y = NSMaxY([accountButton frame]);
   }
 
   // The primary account should always be listed first.
   NSButton* accountButton = [self accountButtonWithRect:rect
                                                   title:primaryAccount];
   [container addSubview:accountButton];
   [container setFrameSize:NSMakeSize(NSWidth([container frame]),
                                      NSMaxY([accountButton frame]))];
   [accountButton setTag:kPrimaryProfileTag];
   return container.autorelease();
@@ skipping 117 matching lines @@
    clickedOnLink:(id)link
          atIndex:(NSUInteger)charIndex {
   chrome::ShowSettings(browser_);
   return YES;
 }
 
 - (NSButton*)hoverButtonWithRect:(NSRect)rect
                             text:(NSString*)text
                  imageResourceId:(int)imageResourceId
         alternateImageResourceId:(int)alternateImageResourceId
-                          action:(SEL)action  {
+                          action:(SEL)action {
+  SkColor backgroundColor = ui::NativeTheme::instance()->GetSystemColor(
+      ui::NativeTheme::kColorId_DialogBackground);
   base::scoped_nsobject<BackgroundColorHoverButton> button(
-      [[BackgroundColorHoverButton alloc] initWithFrame:rect]);
+      [[BackgroundColorHoverButton alloc] initWithFrame:rect
+                                      imageTitleSpacing:kImageTitleSpacing
+                                        backgroundColor:backgroundColor]);
 
   [button setTitle:text];
   ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
   NSImage* alternateImage = rb->GetNativeImageNamed(
       alternateImageResourceId).ToNSImage();
   [button setDefaultImage:rb->GetNativeImageNamed(imageResourceId).ToNSImage()];
   [button setHoverImage:alternateImage];
   [button setPressedImage:alternateImage];
   [button setImagePosition:NSImageLeft];
   [button setAlignment:NSLeftTextAlignment];
@@ skipping 19 matching lines @@
   [link setTarget:self];
   [link setAction:action];
   [link setFrameOrigin:frameOrigin];
   [link sizeToFit];
 
   return link.autorelease();
 }
 
 - (NSButton*)accountButtonWithRect:(NSRect)rect
                              title:(const std::string&)title {
-  base::scoped_nsobject<NSButton> button([[NSButton alloc] initWithFrame:rect]);
+  SkColor backgroundColor = profiles::kAvatarBubbleAccountsBackgroundColor;
+  base::scoped_nsobject<BackgroundColorHoverButton> button(
+      [[BackgroundColorHoverButton alloc] initWithFrame:rect
+                                      imageTitleSpacing:0
+                                        backgroundColor:backgroundColor]);
+
   [button setTitle:ElideEmail(title, rect.size.width)];
   [button setAlignment:NSLeftTextAlignment];
   [button setBordered:NO];
-
-  [button setImage:ui::ResourceBundle::GetSharedInstance().
-      GetNativeImageNamed(IDR_CLOSE_1).ToNSImage()];
-  [button setImagePosition:NSImageRight];
   [button setTarget:self];
   [button setAction:@selector(showAccountRemovalView:)];
 
   return button.autorelease();
 }
 
 @end