[Mac, Win] Avatar photo is now a circle in the new avatar bubble.

Also cleaned up all the padding/margins to match the red 
lines in the mocks. But most importantly: LOOK AT THAT CIRCLE. <3

Screenshots: https://drive.google.com/open?id=0B1B1Up4p2NRMU2trNTBvZ3c5aHc&authuser=1

BUG=353398
TEST=With the --new-profile-management flag on, start Chrome. Clicking on the avatar button should open the avatar
 bubble. Most notably, the avatar icon should be a circle.

Review URL: https://codereview.chromium.org/250383007

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

6 files changed, 48 insertions, 62 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 4f3e6ff..2730c70 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -11418,9 +11418,6 @@ Would you like to start <ph name="CONTROL_PANEL_APPLET_NAME">$1<ex>Add/Remove Pr
           Learn More
         </message>
       </if>
-      <message name="IDS_PROFILES_PROFILE_CHANGE_PHOTO_BUTTON" desc="Button in the avatar menu bubble view used to change the photo for a profile.">
-        Change
-      </message>
       <message name="IDS_PROFILES_SWITCH_TO_PROFILE_ACCESSIBLE_NAME" desc="Description of the switch to profile button. This is used for accessibility.">
         Switch to user: <ph name="PROFILE_NAME">$1<ex>First user</ex></ph>
       </message>
diff --git a/chrome/app/theme/theme_resources.grd b/chrome/app/theme/theme_resources.grd
index 42888f6..5308681 100644
--- a/chrome/app/theme/theme_resources.grd
+++ b/chrome/app/theme/theme_resources.grd
@@ -359,6 +359,8 @@
         name="IDR_ICON_PROFILES_EDIT_HOVER" file="common/edit_button_hover.png" />
         <structure type="chrome_scaled_image" name="IDR_ICON_PROFILES_EDIT_PRESSED" file="common/edit_button_pressed.png" />
         <structure type="chrome_scaled_image" name="IDR_ICON_PROFILES_MENU_CARET" file="common/carrot_blue.png" />
+        <structure type="chrome_scaled_image" name="IDR_ICON_PROFILES_AVATAR_PHOTO_FRAME" file="common/avatar_photo_frame.png" />
+        <structure type="chrome_scaled_image" name="IDR_ICON_PROFILES_EDIT_CAMERA" file="common/edit_camera.png" />
       </if>
       <if expr="not is_android and not is_ios and not chromeos">
         <!-- User Manager tutorial -->
diff --git a/chrome/browser/profiles/profile_avatar_icon_util.cc b/chrome/browser/profiles/profile_avatar_icon_util.cc
index 1324194..7b43bde 100644
--- a/chrome/browser/profiles/profile_avatar_icon_util.cc
+++ b/chrome/browser/profiles/profile_avatar_icon_util.cc
@@ -79,9 +79,8 @@ AvatarImageSource::AvatarImageSource(gfx::ImageSkia avatar,
                                      AvatarBorder border)
     : gfx::CanvasImageSource(canvas_size, false),
       canvas_size_(canvas_size),
-      width_(width - profiles::kAvatarIconPadding),
-      height_(GetScaledAvatarHeightForWidth(width, avatar) -
-          profiles::kAvatarIconPadding),
+      width_(width),
+      height_(GetScaledAvatarHeightForWidth(width, avatar)),
       position_(position),
       border_(border) {
   avatar_ = gfx::ImageSkiaOperations::CreateResizedImage(
@@ -186,7 +185,6 @@ struct IconResourceInfo {
 
 const int kAvatarIconWidth = 38;
 const int kAvatarIconHeight = 38;
-const int kAvatarIconPadding = 2;
 const SkColor kAvatarTutorialBackgroundColor = SkColorSetRGB(0x42, 0x85, 0xf4);
 const SkColor kAvatarTutorialContentTextColor = SkColorSetRGB(0xc6, 0xda, 0xfc);
 const SkColor kAvatarBubbleAccountsBackgroundColor =
diff --git a/chrome/browser/profiles/profile_avatar_icon_util.h b/chrome/browser/profiles/profile_avatar_icon_util.h
index 6c426e0..ecc3642 100644
--- a/chrome/browser/profiles/profile_avatar_icon_util.h
+++ b/chrome/browser/profiles/profile_avatar_icon_util.h
@@ -26,7 +26,6 @@ extern const char kHighResAvatarFolderName[];
 // Avatar formatting.
 extern const int kAvatarIconWidth;
 extern const int kAvatarIconHeight;
-extern const int kAvatarIconPadding;
 extern const SkColor kAvatarTutorialBackgroundColor;
 extern const SkColor kAvatarTutorialContentTextColor;
 extern const SkColor kAvatarBubbleAccountsBackgroundColor;
diff --git a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
index 12fa745..dfb5158 100644
--- a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
+++ b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
@@ -75,7 +75,6 @@ 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;
@@ -95,9 +94,7 @@ const int kPrimaryProfileTag = -1;
 
 gfx::Image CreateProfileImage(const gfx::Image& icon, int imageSize) {
   return profiles::GetSizedAvatarIcon(
-      icon, true /* image is a square */,
-      imageSize + profiles::kAvatarIconPadding,
-      imageSize + profiles::kAvatarIconPadding);
+      icon, true /* image is a square */, imageSize, imageSize);
 }
 
 // Updates the window size and position.
@@ -348,7 +345,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 }
 
 - (void)drawRect:(NSRect)dirtyRect {
-  NSColor* backgroundColor = [NSColor colorWithCalibratedWhite:0 alpha:0.5f];
+  NSColor* backgroundColor = [NSColor colorWithCalibratedWhite:1 alpha:0.4f];
   [backgroundColor setFill];
   NSRectFillUsingOperation(dirtyRect, NSCompositeSourceAtop);
   [super drawRect:dirtyRect];
@@ -402,18 +399,22 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
             userInfo:nil]);
     [self addTrackingArea:trackingArea_.get()];
 
+    NSRect bounds = NSMakeRect(0, 0, kLargeImageSide, kLargeImageSide);
     if (editingAllowed) {
-      // The avatar photo uses a frame of width profiles::kAvatarIconPadding,
-      // which we must subtract from the button's bounds.
-      changePhotoButton_.reset([self changePhotoButtonWithRect:NSMakeRect(
-          profiles::kAvatarIconPadding, profiles::kAvatarIconPadding,
-          kLargeImageSide - 2 * profiles::kAvatarIconPadding,
-          kOverlayHeight)]);
+      changePhotoButton_.reset([self changePhotoButtonWithRect:bounds]);
       [self addSubview:changePhotoButton_];
 
       // Hide the button until the image is hovered over.
       [changePhotoButton_ setHidden:YES];
     }
+
+    // Add the frame overlay last, so that both the photo and the button
+    // look like circles.
+    base::scoped_nsobject<NSImageView> frameOverlay(
+        [[NSImageView alloc] initWithFrame:bounds]);
+    [frameOverlay setImage:ui::ResourceBundle::GetSharedInstance().
+        GetNativeImageNamed(IDR_ICON_PROFILES_AVATAR_PHOTO_FRAME).AsNSImage()];
+    [self addSubview:frameOverlay];
   }
   return self;
 }
@@ -433,21 +434,9 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 - (TransparentBackgroundButton*)changePhotoButtonWithRect:(NSRect)rect {
   TransparentBackgroundButton* button =
       [[TransparentBackgroundButton alloc] initWithFrame:rect];
-
-  // The button has a centered white text and a transparent background.
-  base::scoped_nsobject<NSMutableParagraphStyle> textStyle(
-      [[NSMutableParagraphStyle alloc] init]);
-  [textStyle setAlignment:NSCenterTextAlignment];
-  NSDictionary* titleAttributes = @{
-      NSParagraphStyleAttributeName : textStyle,
-      NSForegroundColorAttributeName : [NSColor whiteColor]
-  };
-  NSString* buttonTitle = l10n_util::GetNSString(
-      IDS_PROFILES_PROFILE_CHANGE_PHOTO_BUTTON);
-  base::scoped_nsobject<NSAttributedString> attributedTitle(
-      [[NSAttributedString alloc] initWithString:buttonTitle
-                                      attributes:titleAttributes]);
-  [button setAttributedTitle:attributedTitle];
+  [button setImage:ui::ResourceBundle::GetSharedInstance().GetNativeImageNamed(
+      IDR_ICON_PROFILES_EDIT_CAMERA).AsNSImage()];
+  [button setImagePosition:NSImageOnly];
   [button setTarget:self];
   [button setAction:@selector(editPhoto:)];
   return button;
diff --git a/chrome/browser/ui/views/profiles/profile_chooser_view.cc b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
index d6f9276..f580b87 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -152,36 +152,35 @@ class EditableProfilePhoto : public views::ImageView {
       : views::ImageView(),
         change_photo_button_(NULL) {
     gfx::Image image = profiles::GetSizedAvatarIcon(
-        icon, true,
-        kLargeImageSide + profiles::kAvatarIconPadding,
-        kLargeImageSide + profiles::kAvatarIconPadding);
+        icon, true, kLargeImageSide, kLargeImageSide);
     SetImage(image.ToImageSkia());
     SetBoundsRect(bounds);
 
+    ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
+    views::ImageView* frame_overlay = new views::ImageView();
+    frame_overlay->SetImage(rb->GetImageNamed(
+        IDR_ICON_PROFILES_AVATAR_PHOTO_FRAME).ToImageSkia());
+    frame_overlay->SetVerticalAlignment(views::ImageView::CENTER);
+    frame_overlay->SetBoundsRect(bounds);
+    AddChildView(frame_overlay);
+
     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_ = new views::LabelButton(listener, base::string16());
     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);
+    const SkColor kBackgroundColor = SkColorSetARGB(65, 255, 255, 255);
     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(
-        bounds.origin().x(),
-        bounds.origin().y() + kLargeImageSide - kOverlayHeight,
-        kLargeImageSide,
-        kOverlayHeight);
+    change_photo_button_->SetImage(views::LabelButton::STATE_NORMAL,
+        *rb->GetImageSkiaNamed(IDR_ICON_PROFILES_EDIT_CAMERA));
+
+    change_photo_button_->SetBoundsRect(bounds);
     change_photo_button_->SetVisible(false);
     AddChildView(change_photo_button_);
   }
@@ -335,9 +334,8 @@ class TitleCard : public views::View {
   }
 
   virtual gfx::Size GetPreferredSize() OVERRIDE{
-    int height = profiles::kAvatarIconPadding * 2 +
-        std::max(title_label_->GetPreferredSize().height(),
-                 back_button_->GetPreferredSize().height());
+    int height = std::max(title_label_->GetPreferredSize().height(),
+        back_button_->GetPreferredSize().height());
     return gfx::Size(width(), height);
   }
 
@@ -395,10 +393,6 @@ ProfileChooserView::ProfileChooserView(views::View* anchor_view,
 
   ResetView();
 
-  set_background(views::Background::CreateSolidBackground(
-      GetNativeTheme()->GetSystemColor(
-          ui::NativeTheme::kColorId_DialogBackground)));
-
   avatar_menu_.reset(new AvatarMenu(
       &g_browser_process->profile_manager()->GetProfileInfoCache(),
       this,
@@ -509,6 +503,10 @@ void ProfileChooserView::ShowView(BubbleViewMode view_to_display,
       layout = CreateSingleColumnLayout(this, kFixedMenuWidth);
       sub_view = CreateProfileChooserView(avatar_menu, last_tutorial_mode);
   }
+  sub_view->set_background(views::Background::CreateSolidBackground(
+      GetNativeTheme()->GetSystemColor(
+          ui::NativeTheme::kColorId_DialogBackground)));
+
   layout->StartRow(1, 0);
   layout->AddView(sub_view);
   Layout();
@@ -572,7 +570,12 @@ void ProfileChooserView::ButtonPressed(views::Button* sender,
              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());
+    // Only show the inline signin if the new UI flag is flipped. Otherwise,
+    // use the tab signin page.
+    if (switches::IsNewProfileManagement())
+      ShowView(BUBBLE_VIEW_MODE_GAIA_SIGNIN, avatar_menu_.get());
+    else
+      chrome::ShowBrowserSignin(browser_, signin::SOURCE_MENU);
   } else {
     // Either one of the "other profiles", or one of the profile accounts
     // buttons was pressed.
@@ -886,7 +889,7 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
   views::GridLayout* layout = CreateSingleColumnLayout(view, column_width);
   layout->SetInsets(views::kButtonVEdgeMarginNew,
                     views::kButtonHEdgeMarginNew,
-                    views::kRelatedControlVerticalSpacing,
+                    views::kUnrelatedControlVerticalSpacing,
                     views::kButtonHEdgeMarginNew);
 
   // Profile icon, centered.
@@ -971,9 +974,7 @@ views::View* ProfileChooserView::CreateOtherProfilesView(
     const int kSmallImageSide = 32;
 
     gfx::Image image = profiles::GetSizedAvatarIcon(
-        item.icon, true,
-        kSmallImageSide + profiles::kAvatarIconPadding,
-        kSmallImageSide + profiles::kAvatarIconPadding);
+        item.icon, true, kSmallImageSide, kSmallImageSide);
 
     views::LabelButton* button = new BackgroundColorHoverButton(
         this,