Reflowed the profile card in mac desktop user menu into a button (for material design user menu).

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

Index: chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
diff --git a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
index 20da1a19f1671d29ae789978355199e124d4ce85..1b4bf92a3a154236a9ae2fc2a3a93ae365f00740 100644
--- a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
+++ b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
@@ -86,10 +86,11 @@ namespace {
 // chrome/browser/ui/views/profile_chooser_view.cc
 const int kLargeImageSide = 88;
 const int kSmallImageSide = 32;
-const CGFloat kFixedMenuWidth = 250;
+const int kMdImageSide = 40;
 
 const CGFloat kVerticalSpacing = 16.0;
 const CGFloat kSmallVerticalSpacing = 10.0;
+const CGFloat kRelatedControllVerticalSpacing = 8.0;
 const CGFloat kHorizontalSpacing = 16.0;
 const CGFloat kTitleFontSize = 15.0;
 const CGFloat kTextFontSize = 12.0;
@@ -111,9 +112,15 @@ const int kFixedSwitchUserViewWidth = 320;
 // The tag number for the primary account.
 const int kPrimaryProfileTag = -1;
 
-gfx::Image CreateProfileImage(const gfx::Image& icon, int imageSize) {
-  return profiles::GetSizedAvatarIcon(
-      icon, true /* image is a square */, imageSize, imageSize);
+CGFloat GetFixedMenuWidth() {
+  return (CGFloat)switches::IsMaterialDesignUserMenu() ? 240 : 250;

[groby-ooo-7-16, 2016/07/11 21:35:28]

Please use C++ style cast
(https://google.github.io/styleguide/cppguide.html#Casting)

i.e. static_cast<CGFloat>(...)

Alternatively, don't cast at all and write the numbers as 240.0 : 250.0 - that's
pretty common across the Chrome code base.

[Jane, 2016/07/12 14:51:06]

Done.

+}
+
+gfx::Image CreateProfileImage(const gfx::Image& icon,

[groby-ooo-7-16, 2016/07/11 21:35:29]

Why not return an NSImage here, so later code can skip all the ToNSImage
invocations?

[Jane, 2016/07/12 14:51:07]

Done.

+                              int imageSize,
+                              profiles::AvatarShape shape) {
+  return profiles::GetSizedAvatarIcon(icon, true /* image is a square */,
+                                      imageSize, imageSize, shape);
 }
 
 // Updates the window size and position.
@@ -548,11 +555,14 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
         [[CustomCircleImageCell alloc] init]);
     [self setCell:cell.get()];
 
-    [self setDefaultImage:CreateProfileImage(
-        profileIcon, kLargeImageSide).ToNSImage()];
+    const int imageSide =
+        switches::IsMaterialDesignUserMenu() ? kMdImageSide : kLargeImageSide;
+    [self setDefaultImage:CreateProfileImage(profileIcon, imageSide,
+                                             profiles::SHAPE_CIRCLE)
+                              .ToNSImage()];
     [self setImagePosition:NSImageOnly];
 
-    NSRect bounds = NSMakeRect(0, 0, kLargeImageSide, kLargeImageSide);
+    NSRect bounds = NSMakeRect(0, 0, imageSide, imageSide);

[groby-ooo-7-16, 2016/07/11 21:35:29]

Move init inside if() ?

[Jane, 2016/07/12 14:51:06]

Done.

     if (editingAllowed) {
       [self setTarget:self];
       [self setAction:@selector(editPhoto:)];
@@ -818,10 +828,12 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
 - (void)setHoverState:(HoverState)state {
   [super setHoverState:state];
-  bool isHighlighted = ([self hoverState] != kHoverStateNone);
 
-  NSColor* backgroundColor = isHighlighted ? hoverColor_ : backgroundColor_;
-  [[self cell] setBackgroundColor:backgroundColor];
+  if ([self isEnabled]) {

[groby-ooo-7-16, 2016/07/11 21:35:28]

If isEnabled is changed _after_ a hoverstate change, this might cause unexpected
results. It might be better to change the background color in drawRect.

[Jane, 2016/07/12 14:51:06]

Done.

+    bool isHighlighted = ([self hoverState] != kHoverStateNone);
+    NSColor* backgroundColor = isHighlighted ? hoverColor_ : backgroundColor_;
+    [[self cell] setBackgroundColor:backgroundColor];
+  }
 }
 
 -(void)keyDown:(NSEvent*)event {
@@ -939,8 +951,10 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 - (NSView*)buildSigninErrorView;
 
 // Creates the main profile card for the profile |item| at the top of
-// the bubble.
+// the bubble, for non-material-design and material design user menu
+// respectively.
 - (NSView*)createCurrentProfileView:(const AvatarMenu::Item&)item;
+- (NSView*)createMaterialDesignCurrentProfileView:(const AvatarMenu::Item&)item;
 
 // Creates the possible links for the main profile card with profile |item|.
 - (NSView*)createCurrentProfileLinksForItem:(const AvatarMenu::Item&)item
@@ -1010,6 +1024,12 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   tutorialMode_ = tutorialMode;
 }
 
+- (IBAction)editProfile:(id)sender {
+  avatarMenu_->EditProfile(avatarMenu_->GetActiveProfileIndex());
+  [self postActionPerformed:ProfileMetrics::PROFILE_DESKTOP_MENU_EDIT_IMAGE];
+  [self postActionPerformed:ProfileMetrics::PROFILE_DESKTOP_MENU_EDIT_NAME];
+}
+
 - (IBAction)switchToProfile:(id)sender {
   // Check the event flags to see if a new window should be created.
   bool alwaysCreate = ui::WindowOpenDispositionFromNSEvent(
@@ -1307,8 +1327,9 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
 - (CGFloat)addSeparatorToContainer:(NSView*)container
                          atYOffset:(CGFloat)yOffset {
-  NSBox* separator = [self horizontalSeparatorWithFrame:NSMakeRect(
-      0, yOffset, kFixedMenuWidth, 0)];
+  NSBox* separator =
+      [self horizontalSeparatorWithFrame:NSMakeRect(0, yOffset,
+                                                    GetFixedMenuWidth(), 0)];
   [container addSubview:separator];
   return NSMaxY([separator frame]);
 }
@@ -1329,7 +1350,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
    yOffset = [self addSeparatorToContainer:container atYOffset: yOffset];
   }
 
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
 }
 
 - (void)buildProfileChooserViewWithProfileView:(NSView*)currentProfileView
@@ -1338,7 +1359,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
                                    inContainer:(NSView*)container
                                    displayLock:(bool)displayLock {
   // Option buttons.
-  NSRect rect = NSMakeRect(0, yOffset, kFixedMenuWidth, 0);
+  NSRect rect = NSMakeRect(0, yOffset, GetFixedMenuWidth(), 0);
   NSView* optionsView = [self createOptionsViewWithRect:rect
                                             displayLock:displayLock];
   [container addSubview:optionsView];
@@ -1350,19 +1371,23 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
   // For supervised users, add the disclaimer text.
   if (browser_->profile()->IsSupervised()) {
-    yOffset += kSmallVerticalSpacing;
+    yOffset += switches::IsMaterialDesignUserMenu() ? kVerticalSpacing
+                                                    : kSmallVerticalSpacing;
     NSView* disclaimerContainer = [self createSupervisedUserDisclaimerView];
     [disclaimerContainer setFrameOrigin:NSMakePoint(0, yOffset)];
     [container addSubview:disclaimerContainer];
     yOffset = NSMaxY([disclaimerContainer frame]);
-    yOffset += kSmallVerticalSpacing;
 
-    yOffset = [self addSeparatorToContainer:container atYOffset: yOffset];
+    if (!switches::IsMaterialDesignUserMenu()) {
+      yOffset += kSmallVerticalSpacing;
+      yOffset = [self addSeparatorToContainer:container atYOffset:yOffset];
+    }
   }
 
   if (viewMode_ == profiles::BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT) {
-    NSView* currentProfileAccountsView = [self createCurrentProfileAccountsView:
-        NSMakeRect(0, yOffset, kFixedMenuWidth, 0)];
+    NSView* currentProfileAccountsView = [self
+        createCurrentProfileAccountsView:NSMakeRect(0, yOffset,
+                                                    GetFixedMenuWidth(), 0)];
     [container addSubview:currentProfileAccountsView];
     yOffset = NSMaxY([currentProfileAccountsView frame]);
 
@@ -1371,10 +1396,13 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
   // Active profile card.
   if (currentProfileView) {
-    yOffset += kVerticalSpacing;
+    const CGFloat verticalSpacing = switches::IsMaterialDesignUserMenu()
+                                        ? kRelatedControllVerticalSpacing
+                                        : kVerticalSpacing;
+    yOffset += verticalSpacing;
     [currentProfileView setFrameOrigin:NSMakePoint(0, yOffset)];
     [container addSubview:currentProfileView];
-    yOffset = NSMaxY([currentProfileView frame]) + kVerticalSpacing;
+    yOffset = NSMaxY([currentProfileView frame]) + verticalSpacing;
   }
 
   if (tutorialView) {
@@ -1386,7 +1414,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
     tutorialMode_ = profiles::TUTORIAL_MODE_NONE;
   }
 
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
 }
 
 - (NSView*)buildProfileChooserView {
@@ -1416,7 +1444,10 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
       if (viewMode_ == profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER) {
         tutorialView = [self buildTutorialViewIfNeededForItem:item];
       }
-      currentProfileView = [self createCurrentProfileView:item];
+      currentProfileView =
+          switches::IsMaterialDesignUserMenu()
+              ? [self createMaterialDesignCurrentProfileView:item]
+              : [self createCurrentProfileView:item];
       displayLock = item.signed_in &&
           profiles::IsLockAvailable(browser_->profile());
     } else {
@@ -1498,11 +1529,12 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   NSString* contentMessage = l10n_util::GetNSString(
       IDS_PROFILES_WELCOME_UPGRADE_TUTORIAL_CONTENT_TEXT);
   // For local profiles, the "Not you" link doesn't make sense.
-  NSString* linkMessage = item.signed_in ?
-      ElideMessage(
-          l10n_util::GetStringFUTF16(IDS_PROFILES_NOT_YOU, item.name),
-          kFixedMenuWidth - 2 * kHorizontalSpacing) :
-      nil;
+  NSString* linkMessage =
+      item.signed_in
+          ? ElideMessage(
+                l10n_util::GetStringFUTF16(IDS_PROFILES_NOT_YOU, item.name),
+                GetFixedMenuWidth() - 2 * kHorizontalSpacing)
+          : nil;
   NSString* buttonMessage = l10n_util::GetNSString(
       IDS_PROFILES_TUTORIAL_WHATS_NEW_BUTTON);
   return [self tutorialViewWithMode:profiles::TUTORIAL_MODE_WELCOME_UPGRADE
@@ -1576,9 +1608,9 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   NSColor* tutorialBackgroundColor =
       skia::SkColorToSRGBNSColor(profiles::kAvatarTutorialBackgroundColor);
   base::scoped_nsobject<NSView> container([[BackgroundColorView alloc]
-      initWithFrame:NSMakeRect(0, 0, kFixedMenuWidth, 0)
+      initWithFrame:NSMakeRect(0, 0, GetFixedMenuWidth(), 0)
           withColor:tutorialBackgroundColor]);
-  CGFloat availableWidth = kFixedMenuWidth - 2 * kHorizontalSpacing;
+  CGFloat availableWidth = GetFixedMenuWidth() - 2 * kHorizontalSpacing;
   CGFloat yOffset = kVerticalSpacing;
 
   // Adds links and buttons at the bottom.
@@ -1603,8 +1635,11 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
   if (stackButton) {
     if (linkMessage) {

[groby-ooo-7-16, 2016/07/11 21:35:28]

Technically, you can skip if (linkMessage) here -  if learnMoreLink is nil,
setFrameOrigin will just do nothing.

[Jane, 2016/07/12 14:51:06]

Done.

-      [learnMoreLink setFrameOrigin:NSMakePoint(
-          (kFixedMenuWidth - NSWidth([learnMoreLink frame])) / 2, yOffset)];
+      [learnMoreLink
+          setFrameOrigin:NSMakePoint((GetFixedMenuWidth() -
+                                      NSWidth([learnMoreLink frame])) /
+                                         2,

[groby-ooo-7-16, 2016/07/11 21:35:28]

eew. Can we keep the /2 part on the same line? 

[Jane, 2016/07/12 14:51:06]

Done. I'll try to remember to not run git cl format again starting from this
patch..

+                                     yOffset)];
     }
     [tutorialOkButton setFrameSize:NSMakeSize(
         availableWidth, NSHeight([tutorialOkButton frame]))];
@@ -1619,8 +1654,9 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
       buttonSize.width += 2 * kLeftRightTextPadding;
       buttonSize.height += 2 * kTopBottomTextPadding;
       [tutorialOkButton setFrameSize:buttonSize];
-      CGFloat buttonXOffset = kFixedMenuWidth -
-          NSWidth([tutorialOkButton frame]) - kHorizontalSpacing;
+      CGFloat buttonXOffset = GetFixedMenuWidth() -
+                              NSWidth([tutorialOkButton frame]) -
+                              kHorizontalSpacing;
       [tutorialOkButton setFrameOrigin:NSMakePoint(buttonXOffset, yOffset)];
     }
 
@@ -1680,8 +1716,10 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
     [closeButton setTarget:self];
     [closeButton setAction:@selector(dismissTutorial:)];
     [closeButton setFrameSize:[closeImage size]];
-    [closeButton setFrameOrigin:NSMakePoint(
-        kFixedMenuWidth - kHorizontalSpacing - closeImageWidth, yOffset)];
+    [closeButton
+        setFrameOrigin:NSMakePoint(GetFixedMenuWidth() - kHorizontalSpacing -
+                                       closeImageWidth,
+                                   yOffset)];
     [container addSubview:closeButton];
 
     [titleLabel setFrameSize:NSMakeSize(
@@ -1694,7 +1732,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   [container addSubview:titleLabel];
   yOffset = NSMaxY([titleLabel frame]) + kVerticalSpacing;
 
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
   [container setFrameOrigin:NSZeroPoint];
   return container.autorelease();
 }
@@ -1705,8 +1743,8 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
   CGFloat xOffset = kHorizontalSpacing;
   CGFloat yOffset = 0;
-  CGFloat availableTextWidth = kFixedMenuWidth - 2 * kHorizontalSpacing;
-  CGFloat maxAvailableTextWidth = kFixedMenuWidth - kHorizontalSpacing;
+  CGFloat availableTextWidth = GetFixedMenuWidth() - 2 * kHorizontalSpacing;
+  CGFloat maxAvailableTextWidth = GetFixedMenuWidth() - kHorizontalSpacing;
 
   // 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.
@@ -1742,7 +1780,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   yOffset = NSMaxY([profileName frame]) + 4;  // Adds a small vertical padding.
 
   // Profile icon, centered.
-  xOffset = (kFixedMenuWidth - kLargeImageSide) / 2;
+  xOffset = (GetFixedMenuWidth() - kLargeImageSide) / 2;
   base::scoped_nsobject<EditableProfilePhoto> iconView(
       [[EditableProfilePhoto alloc]
           initWithFrame:NSMakeRect(xOffset, yOffset,
@@ -1771,7 +1809,114 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
     [container addSubview:supervisedIcon];
   }
 
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
+  return container.autorelease();
+}
+
+- (NSView*)createMaterialDesignCurrentProfileView:
+    (const AvatarMenu::Item&)item {
+  base::scoped_nsobject<NSView> container(
+      [[NSView alloc] initWithFrame:NSZeroRect]);
+
+  CGFloat xOffset = kHorizontalSpacing;
+  CGFloat yOffset = 0;

[groby-ooo-7-16, 2016/07/11 21:35:28]

nit: 0.0 - since it's float. See also two lines below, 3.0 and 2.0

[Jane, 2016/07/12 14:51:06]

Done.

+  CGFloat cardYOffset = kRelatedControllVerticalSpacing;
+  CGFloat availableTextWidth =
+      GetFixedMenuWidth() - 3 * kHorizontalSpacing - kMdImageSide - 2;
+  CGFloat maxAvailableTextWidth = GetFixedMenuWidth() - kHorizontalSpacing;
+
+  // Profile options. This can be a link to the accounts view, or a "Sign in"
+  // button for local profiles.
+  SigninManagerBase* signinManager = SigninManagerFactory::GetForProfile(
+      browser_->profile()->GetOriginalProfile());
+  NSRect profileLinksBound = NSZeroRect;
+  if (item.signed_in && switches::IsEnableAccountConsistency()) {
+    profileLinksBound = NSMakeRect(0, 0, GetFixedMenuWidth(), 0);
+  } else if (!item.signed_in && signinManager->IsSigninAllowed()) {
+    profileLinksBound = NSMakeRect(xOffset, kRelatedControllVerticalSpacing,
+                                   maxAvailableTextWidth, 0);
+  }
+  if (!NSEqualRects(profileLinksBound, NSZeroRect)) {

[groby-ooo-7-16, 2016/07/11 21:35:28]

if (!NSIsEmptyRect(profileLinksBound)) {

[Jane, 2016/07/12 14:51:07]

I wrote it this way because NSIsEmptyRect would return true as long as the
rectangle has a 0 side, which is the case here even when a container needs to be
added. Should I add a height specification for the bound above?

[groby-ooo-7-16, 2016/07/19 17:43:34]

To me, that'd read a little bit clearer, but it's a matter of taste, really.
Your choice :)

[Jane, 2016/07/19 19:20:07]

Done. Added height specifications above and changed this to NSIsEmptyRect.

+    NSView* linksContainer =
+        [self createCurrentProfileLinksForItem:item rect:profileLinksBound];
+    [container addSubview:linksContainer];
+    yOffset = NSMaxY([linksContainer frame]);
+  }
+
+  // Profile card button that contains the profile icon, name, and username.
+  NSRect rect = NSMakeRect(0, yOffset, GetFixedMenuWidth(),
+                           kMdImageSide + kVerticalSpacing);
+  NSButton* profileCard = [self hoverButtonWithRect:rect

[groby-ooo-7-16, 2016/07/11 21:35:28]

Would you mind making this scoped_nsobject? (I see it's addSubviewed later on,
but autoreleased items that don't get retained for 100+ lines make me nervous.
Alternatively, addSubview right here?)

[Jane, 2016/07/12 14:51:06]

Done. addSubview moved to here.

+                                               text:[[NSString alloc] init]
+                                             action:@selector(editProfile:)];
+  if (isGuestSession_)
+    [profileCard setEnabled:NO];
+
+  // Profile icon, left-aligned.
+  base::scoped_nsobject<NSImageView> iconView([[NSImageView alloc]
+      initWithFrame:NSMakeRect(xOffset, cardYOffset, kMdImageSide,
+                               kMdImageSide)]);
+  [iconView setImage:CreateProfileImage(item.icon, kMdImageSide,
+                                        profiles::SHAPE_CIRCLE)
+                         .ToNSImage()];
+  [profileCard addSubview:iconView];
+
+  // Profile name, left-aligned to the right of profile icon.
+  xOffset += kMdImageSide + kHorizontalSpacing;
+  NSTextField* profileName = BuildLabel(
+      ElideMessage(

[groby-ooo-7-16, 2016/07/11 21:35:28]

Why elideMessage for an NSTextField? setLineBreakMode would have the textfield
autotruncate? Is that for compat with the Views code?

[Jane, 2016/07/12 14:51:07]

It's just that I thought a cell is needed for setLineBreakMode, but this
textfield doesn't need a cell. I saw other usages like this above so I wrote it
this way. Is it a better practice to use setLineBreakMode?

[groby-ooo-7-16, 2016/07/19 17:43:34]

In general, setLineBreakMode is the OS way to do linebreak, and it results in
less code. 

As for not needing a cell - all NSControls have a cell. That's what is actually
responsible for drawing the UI & handling behavior. (I apologize if you already
knew this and I misunderstood)

[Jane, 2016/07/19 19:20:07]

Done. Thanks for explaining and I didn't know this before! (new to cocoa and
all)

+          profiles::GetAvatarNameForProfile(browser_->profile()->GetPath()),
+          availableTextWidth),
+      NSZeroPoint, nil);
+  [profileName setFont:[NSFont labelFontOfSize:(kTextFontSize + 1)]];

[groby-ooo-7-16, 2016/07/11 21:35:29]

Question: How can we elide before we know the font size?

[Jane, 2016/07/12 14:51:06]

Good question, I missed that part. It looks like eliding is done here with the
default font size from gfx::FontList(), which is 12.
I added a new ElideMessage function that takes in an alternative font size so
that the message would be properly elided.
Thanks for catching this!
(In case you were wondering, the -2.0 I had for availableTextWidth was to
account for the weird overflow I noticed here. Now the mystery is solved!)

+  [profileName
+      setFrame:NSMakeRect(
+                   xOffset,
+                   cardYOffset +
+                       (kMdImageSide - [profileName frame].size.height) / 2,
+                   availableTextWidth + 2, [profileName frame].size.height)];
+  [profileCard addSubview:profileName];
+
+  // Username, left-aligned to the right of profile icon and below the profile
+  // name.
+  if (item.signed_in && !switches::IsEnableAccountConsistency()) {
+    // Adjust the y-position of profile name to leave space for username.
+    cardYOffset += kMdImageSide / 2 - [profileName frame].size.height;
+    [profileName setFrameOrigin:NSMakePoint(xOffset, cardYOffset)];
+
+    NSTextField* username = BuildLabel(
+        ElideEmail(base::UTF16ToUTF8(item.username), availableTextWidth),
+        NSZeroPoint, skia::SkColorToSRGBNSColor(SK_ColorGRAY));
+    [username setFrameOrigin:NSMakePoint(xOffset, NSMaxY([profileName frame]))];
+    [profileCard addSubview:username];
+  }
+
+  // Profile badge for supervised account.
+  if (browser_->profile()->IsSupervised()) {
+    base::scoped_nsobject<NSImageView> supervisedIcon(
+        [[NSImageView alloc] initWithFrame:NSZeroRect]);
+    // TODO(janeliulwq): Replace the following two profile badge icons with
+    // smaller versions of them (24 x 24) to adapt to smaller profile icons.
+    int imageId = browser_->profile()->IsChild()
+                      ? IDR_ICON_PROFILES_MENU_CHILD
+                      : IDR_ICON_PROFILES_MENU_LEGACY_SUPERVISED;
+    ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();

[groby-ooo-7-16, 2016/07/11 21:35:28]

Please use a ref instead of a pointer.

[Jane, 2016/07/12 14:51:06]

Done.

+    [supervisedIcon setImage:rb->GetNativeImageNamed(imageId).ToNSImage()];
+
+    NSSize size = [[supervisedIcon image] size];
+    [supervisedIcon setFrameSize:size];
+    NSRect parentFrame = [iconView frame];
+    const int badgeSpacing = 4;

[groby-ooo-7-16, 2016/07/11 21:35:28]

I assume the  point here is to inset the supervisedIcon by |badgeSpacing| on all
sides from the parentFrame? And the parentFrame always has the right size for
this? (I.e. is 8x8 points larger)


In that case, you can simplify the code to

[supervisedIcon setFrame:NSInsetRect([iconView frame], badgeSpacing,
badgeSpacing)];

[Jane, 2016/07/12 14:51:06]

The point is to actually place the supervisedIcon on the right-bottom corner of
parentFrame (like how it looks right now), and then let it flow out of
parentFrame by 4 on both sides.
See the third mock here:
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Desktop%20S...
I don't think insetting works here, but let me know if there is any other way to
simplify the code! I figured parentFrame might not be the clearest name so I
just changed it to profileIconFrame.

[groby-ooo-7-16, 2016/07/19 17:43:34]

Acknowledged.

+    [supervisedIcon
+        setFrameOrigin:NSMakePoint(
+                           NSMaxX(parentFrame) - size.width + badgeSpacing,
+                           NSMaxY(parentFrame) - size.height + badgeSpacing)];
+    [profileCard addSubview:supervisedIcon];
+  }
+
+  [container addSubview:profileCard];
+  yOffset = NSMaxY([profileCard frame]);
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
   return container.autorelease();
 }
 
@@ -1799,10 +1944,19 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
       SEL linkSelector =
           (viewMode_ == profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER) ?
           @selector(showAccountManagement:) : @selector(hideAccountManagement:);
-      link = [self linkButtonWithTitle:linkTitle
-                           frameOrigin:rect.origin
-                                action:linkSelector];
-    } else {
+      if (switches::IsMaterialDesignUserMenu()) {
+        rect.size.width +=
+            kRightPadding;  // Spans the width of the entire menu.
+        link = [self hoverButtonWithRect:NSMakeRect(0, 0, rect.size.width,
+                                                    kBlueButtonHeight)
+                                    text:linkTitle
+                                  action:linkSelector];
+      } else {
+        link = [self linkButtonWithTitle:linkTitle
+                             frameOrigin:rect.origin
+                                  action:linkSelector];
+      }
+    } else if (!switches::IsMaterialDesignUserMenu()) {

[groby-ooo-7-16, 2016/07/11 21:35:28]

Wait - this used to be the branch that doesn't have AccountConsistency enabled.
Is it OK if that branch is empty for MaterialDesignUserMenu?

I.e. if (!IsEnableAccountConsistency && IsMaterialDesignUserMenu) ASSERT(link ==
nil)?

[Jane, 2016/07/12 14:51:07]

Sorry, I'm kinda confused about what you are asking here - is this a suggestion
or just double-checking the code logic?
To explain the code, I'm leaving this branch empty for
!IsEnableAccountConsistency && IsMaterialDesignUserMenu. This is because the
username (email address) in material design user menu would appear in the
profile card, instead of a separate link. When calling this function for
material design user menu, I explicitly made sure that it's only for account
consistency and signin promo. Besides, this function would simply return an
empty container if no condition satisfies.
Let me know if this makes sense and if anything needs to be added!

[groby-ooo-7-16, 2016/07/19 17:43:34]

Yes, this makes sense, thank you. Maybe add a comment or DCHECK to make the
assumption clear?

[Jane, 2016/07/19 19:20:07]

Done. Added a DCHECK with a comment at the beginning of this function.

       link = [self linkButtonWithTitle:base::SysUTF16ToNSString(item.username)
                            frameOrigin:rect.origin
                                 action:nil];
@@ -1823,14 +1977,17 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
         [link setEnabled:NO];
       }
     }
-    // -linkButtonWithTitle sizeToFit's the link. We can use the height, but
-    // need to re-stretch the width so that the link can be centered correctly
-    // in the view.
-    rect.size.height = [link frame].size.height;
-    [link setAlignment:NSCenterTextAlignment];
-    [link setFrame:rect];
-    [container addSubview:link];
-    [container setFrameSize:rect.size];
+    if (link) {
+      // -linkButtonWithTitle sizeToFit's the link. We can use the height, but
+      // need to re-stretch the width so that the link can be centered correctly
+      // in the view.
+      rect.size.height = [link frame].size.height;
+      if (!switches::IsMaterialDesignUserMenu())
+        [link setAlignment:NSCenterTextAlignment];
+      [link setFrame:rect];
+      [container addSubview:link];
+      [container setFrameSize:rect.size];
+    }
   } else {
     rect.size.height = kBlueButtonHeight;
     NSButton* signinButton = [[BlueLabelButton alloc] initWithFrame:rect];
@@ -1845,6 +2002,8 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
         gfx::FontList(), rect.size.width, gfx::ELIDE_TAIL));
 
     [signinButton setTitle:elidedButtonText];
+    if (switches::IsMaterialDesignUserMenu())
+      [signinButton sizeToFit];
     [signinButton setTarget:self];
     [signinButton setAction:@selector(showInlineSigninPage:)];
     [container addSubview:signinButton];
@@ -1861,9 +2020,12 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
     [GTMUILocalizerAndLayoutTweaker sizeToFitFixedWidthTextField:promo];
     [container addSubview:promo];
 
-    [container setFrameSize:NSMakeSize(
-        rect.size.width,
-        NSMaxY([promo frame]) + 4)];  // Adds a small vertical padding.
+    [container
+        setFrameSize:NSMakeSize(rect.size.width,
+                                NSMaxY([promo frame]) +
+                                    (switches::IsMaterialDesignUserMenu()
+                                         ? kRelatedControllVerticalSpacing
+                                         : 4))];
     content::RecordAction(
         base::UserMetricsAction("Signin_Impression_FromAvatarBubbleSignin"));
   }
@@ -1876,7 +2038,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
       [[NSView alloc] initWithFrame:NSZeroRect]);
 
   int yOffset = 0;
-  int availableTextWidth = kFixedMenuWidth - 2 * kHorizontalSpacing;
+  int availableTextWidth = GetFixedMenuWidth() - 2 * kHorizontalSpacing;
 
   NSTextField* disclaimer = BuildLabel(
       base::SysUTF16ToNSString(avatarMenu_->GetSupervisedUserInformation()),
@@ -1886,7 +2048,7 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   yOffset = NSMaxY([disclaimer frame]);
 
   [container addSubview:disclaimer];
-  [container setFrameSize:NSMakeSize(kFixedMenuWidth, yOffset)];
+  [container setFrameSize:NSMakeSize(GetFixedMenuWidth(), yOffset)];
   return container.autorelease();
 }
 
@@ -1901,14 +2063,16 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   guestItem.name = base::SysNSStringToUTF16(
       l10n_util::GetNSString(IDS_PROFILES_GUEST_PROFILE_NAME));
 
-  return [self createCurrentProfileView:guestItem];
+  return switches::IsMaterialDesignUserMenu()
+             ? [self createMaterialDesignCurrentProfileView:guestItem]
+             : [self createCurrentProfileView:guestItem];
 }
 
 - (NSButton*)createOtherProfileView:(int)itemIndex {
   const AvatarMenu::Item& item = avatarMenu_->GetItemAt(itemIndex);
 
-  NSRect rect = NSMakeRect(
-      0, 0, kFixedMenuWidth, kBlueButtonHeight + kSmallVerticalSpacing);
+  NSRect rect = NSMakeRect(0, 0, GetFixedMenuWidth(),
+                           kBlueButtonHeight + kSmallVerticalSpacing);
   base::scoped_nsobject<BackgroundColorHoverButton> profileButton(
       [[BackgroundColorHoverButton alloc]
           initWithFrame:rect
@@ -1924,8 +2088,9 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
   gfx::Image itemIcon;
   AvatarMenu::GetImageForMenuButton(item.profile_path, &itemIcon);
 
-  [profileButton setDefaultImage:CreateProfileImage(
-      itemIcon, kSmallImageSide).ToNSImage()];
+  [profileButton setDefaultImage:CreateProfileImage(itemIcon, kSmallImageSide,
+                                                    profiles::SHAPE_SQUARE)
+                                     .ToNSImage()];
   [profileButton setImagePosition:NSImageLeft];
   [profileButton setAlignment:NSLeftTextAlignment];
   [profileButton setBordered:NO];
@@ -2292,19 +2457,28 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
                             text:(NSString*)text
                  imageResourceId:(int)imageResourceId
                           action:(SEL)action {
-  base::scoped_nsobject<BackgroundColorHoverButton> button(
-      [[BackgroundColorHoverButton alloc]
-          initWithFrame:rect
-      imageTitleSpacing:kImageTitleSpacing
-        backgroundColor:GetDialogBackgroundColor()]);
-
-  [button setTitle:text];
+  BackgroundColorHoverButton* button =
+      [self hoverButtonWithRect:rect text:text action:action];
   ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
   NSImage* image = rb->GetNativeImageNamed(imageResourceId).ToNSImage();
   [button setDefaultImage:image];
   [button setHoverImage:image];
   [button setPressedImage:image];
   [button setImagePosition:NSImageLeft];
+
+  return button;
+}
+
+- (BackgroundColorHoverButton*)hoverButtonWithRect:(NSRect)rect
+                                              text:(NSString*)text
+                                            action:(SEL)action {
+  base::scoped_nsobject<BackgroundColorHoverButton> button(
+      [[BackgroundColorHoverButton alloc]
+              initWithFrame:rect
+          imageTitleSpacing:kImageTitleSpacing
+            backgroundColor:GetDialogBackgroundColor()]);
+
+  [button setTitle:text];
   [button setAlignment:NSLeftTextAlignment];
   [button setBordered:NO];
   [button setTarget:self];