Reflow of the profile items in desktop user menu

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 185de83fe0a9446e72e91fe3fc1eeabe9bb3fff1..c326c04d5ab9a88d12dce80c8d09b53a9465af0f 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -83,13 +83,20 @@ namespace {
 
 // Helpers --------------------------------------------------------------------
 
-const int kFixedMenuWidth = 250;
 const int kButtonHeight = 32;
 const int kPasswordCombinedFixedGaiaViewWidth = 360;
 const int kFixedGaiaViewWidth = 448;
 const int kFixedAccountRemovalViewWidth = 280;
 const int kFixedSwitchUserViewWidth = 320;
 const int kLargeImageSide = 88;
+const int kMediumImageSide = 40;

[Evan Stade, 2016/06/20 17:51:11]

if this is going to be the only image size, I'd name this MdImageSide or
something similar

[Jane, 2016/06/20 18:53:26]

Done.

+
+// Vertical spacing between the edge of the material design user menu and the
+// top or bottom of the menu items.
+const int kMaterialMenuVerticalEdgeMargin = 16;
+// Horizontal spacing between the edge of the material design user menu and the
+// left or right of the menu items.
+const int kMaterialMenuHorizontalEdgeMargin = 16;

[Evan Stade, 2016/06/20 17:51:11]

nit: I'd combine these constants

[Jane, 2016/06/20 18:53:26]

Done.

 
 const int kVerticalSpacing = 16;
 
@@ -100,6 +107,11 @@ bool IsProfileChooser(profiles::BubbleViewMode mode) {
       mode == profiles::BUBBLE_VIEW_MODE_FAST_PROFILE_CHOOSER;
 }
 
+int GetProfileBadgeSize() {
+  return switches::IsMaterialDesignUserMenu() ? 24 : 30;
+}
+
+// DEPRECATED: New user menu components should use views::BoxLayout instead.
 // Creates a GridLayout with a single column. This ensures that all the child
 // views added get auto-expanded to fill the full width of the bubble.
 views::GridLayout* CreateSingleColumnLayout(views::View* view, int width) {
@@ -263,14 +275,17 @@ void HostView::ViewHierarchyChanged(
 
 // RightAlignedIconLabelButton -------------------------------------------------
 
-// A custom LabelButton that has a centered text and right aligned icon.
+// A custom LabelButton that has a left-aligned text and right aligned icon.
+// For non-material-design user menu, it has centered text instead.
 class RightAlignedIconLabelButton : public views::LabelButton {
  public:
   RightAlignedIconLabelButton(views::ButtonListener* listener,
                               const base::string16& text)
       : views::LabelButton(listener, text) {
     SetHorizontalAlignment(gfx::ALIGN_RIGHT);
-    label()->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    label()->SetHorizontalAlignment(switches::IsMaterialDesignUserMenu()
+                                        ? gfx::ALIGN_LEFT
+                                        : gfx::ALIGN_CENTER);
   }
 
  protected:
@@ -304,20 +319,21 @@ class EditableProfilePhoto : public views::LabelButton {
  public:
   EditableProfilePhoto(views::ButtonListener* listener,
                        const gfx::Image& icon,
-                       bool is_editing_allowed,
-                       const gfx::Rect& bounds)
-      : views::LabelButton(listener, base::string16()),
-        photo_overlay_(NULL) {
-    gfx::Image image = profiles::GetSizedAvatarIcon(
-        icon, true, kLargeImageSide, kLargeImageSide);
+                       bool is_editing_allowed)
+      : views::LabelButton(listener, base::string16()), photo_overlay_(NULL) {

[Evan Stade, 2016/06/20 17:51:11]

s/NULL/nullptr

[Jane, 2016/06/20 18:53:26]

Done.

+    const int icon_image_side = switches::IsMaterialDesignUserMenu()
+                                    ? kMediumImageSide
+                                    : kLargeImageSide;
+    gfx::Image image = profiles::GetSizedAvatarIcon(icon, true, icon_image_side,
+                                                    icon_image_side);
     SetImage(views::LabelButton::STATE_NORMAL, *image.ToImageSkia());
     SetBorder(views::Border::NullBorder());
-    SetBoundsRect(bounds);
+    SetSize(GetPreferredSize());
 
     // Calculate the circular mask that will be used to display the photo.
-    circular_mask_.addCircle(SkIntToScalar(bounds.width() / 2),
-                             SkIntToScalar(bounds.height() / 2),
-                             SkIntToScalar(bounds.width() / 2));
+    circular_mask_.addCircle(SkIntToScalar(icon_image_side / 2),
+                             SkIntToScalar(icon_image_side / 2),
+                             SkIntToScalar(icon_image_side / 2));
 
     if (!is_editing_allowed) {
       SetEnabled(false);
@@ -332,10 +348,12 @@ class EditableProfilePhoto : public views::LabelButton {
     const SkColor kBackgroundColor = SkColorSetARGB(65, 255, 255, 255);
     photo_overlay_->set_background(
         views::Background::CreateSolidBackground(kBackgroundColor));
-    photo_overlay_->SetImage(gfx::CreateVectorIcon(
-        gfx::VectorIconId::PHOTO_CAMERA, 48u, SkColorSetRGB(0x33, 0x33, 0x33)));
+    photo_overlay_->SetImage(
+        gfx::CreateVectorIcon(gfx::VectorIconId::PHOTO_CAMERA,
+                              switches::IsMaterialDesignUserMenu() ? 22u : 48u,
+                              SkColorSetRGB(0x33, 0x33, 0x33)));
 
-    photo_overlay_->SetSize(bounds.size());
+    photo_overlay_->SetSize(gfx::Size(icon_image_side, icon_image_side));
     photo_overlay_->SetVisible(false);
     AddChildView(photo_overlay_);
   }
@@ -393,7 +411,7 @@ class EditableProfileName : public views::View,
   EditableProfileName(views::TextfieldController* controller,
                       const base::string16& text,
                       bool is_editing_allowed)
-      : button_(nullptr), label_(nullptr), profile_name_textfield_(nullptr) {
+      : button_(nullptr), profile_name_textfield_(nullptr) {
     SetLayoutManager(
         new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 0));
 
@@ -402,13 +420,26 @@ class EditableProfileName : public views::View,
         rb->GetFontList(ui::ResourceBundle::MediumFont);
 
     if (!is_editing_allowed) {
-      label_ = new views::Label(text);
-      label_->SetBorder(views::Border::CreateEmptyBorder(2, 0, 2, 0));
-      label_->SetFontList(medium_font_list);
-      AddChildView(label_);
+      views::Label* name_label = new views::Label(text);
+      name_label->SetBorder(
+          views::Border::CreateEmptyBorder(border_width, 0, border_width, 0));
+      name_label->SetFontList(medium_font_list);
+      if (switches::IsMaterialDesignUserMenu())
+        name_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+      AddChildView(name_label);
       return;
     }
 
+    profile_name_textfield_ = new views::Textfield();
+    // Textfield that overlaps the button.
+    profile_name_textfield_->set_controller(controller);
+    profile_name_textfield_->SetFontList(medium_font_list);
+    profile_name_textfield_->SetHorizontalAlignment(
+        switches::IsMaterialDesignUserMenu() ? gfx::ALIGN_LEFT
+                                             : gfx::ALIGN_CENTER);
+    profile_name_textfield_->SetVisible(false);
+    AddChildView(profile_name_textfield_);
+
     button_ = new RightAlignedIconLabelButton(this, text);
     button_->SetFontList(medium_font_list);
     // Show an "edit" pencil icon when hovering over. In the default state,
@@ -426,21 +457,19 @@ class EditableProfileName : public views::View,
                       gfx::CreateVectorIcon(
                           gfx::VectorIconId::MODE_EDIT, kIconSize,
                           SkColorSetRGB(0x20, 0x20, 0x20)));
-    // To center the text, we need to offest it by the width of the icon we
-    // are adding and its padding. We need to also add a small top/bottom
-    // padding to account for the textfield's border.
-    const int kIconTextLabelButtonSpacing = 5;
-    button_->SetBorder(views::Border::CreateEmptyBorder(
-        2, kIconSize + kIconTextLabelButtonSpacing, 2, 0));
+    // We need to add a left padding as well as a small top/bottom padding
+    // to the text to account for the textfield's border.
+    if (switches::IsMaterialDesignUserMenu()) {
+      button_->SetBorder(views::Border::CreateEmptyBorder(
+          border_width, profile_name_textfield_->GetInsets().left(),
+          border_width, 0));
+    } else {
+      const int kIconTextLabelButtonSpacing = 5;
+      button_->SetBorder(views::Border::CreateEmptyBorder(
+          border_width, kIconSize + kIconTextLabelButtonSpacing, border_width,
+          0));
+    }
     AddChildView(button_);
-
-    profile_name_textfield_ = new views::Textfield();
-    // Textfield that overlaps the button.
-    profile_name_textfield_->set_controller(controller);
-    profile_name_textfield_->SetFontList(medium_font_list);
-    profile_name_textfield_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
-    profile_name_textfield_->SetVisible(false);
-    AddChildView(profile_name_textfield_);
   }
 
   views::Textfield* profile_name_textfield() {
@@ -453,6 +482,8 @@ class EditableProfileName : public views::View,
     profile_name_textfield_->SetVisible(false);
   }
 
+  static const int border_width = 2;

[Evan Stade, 2016/06/20 17:51:11]

If you explained this already, I forgot (sorry): logically, why is this not 
profile_name_textfield_->GetInsets().top()/bottom()?

[Jane, 2016/06/20 18:53:26]

Don't think we went over this, but it's because its insets would be 4 instead. 2
here is to account for the textfield border width on the top and bottom. Does
this make sense?

[Evan Stade, 2016/06/21 21:55:16]

Not really, isn't the border 1px rather than 2? If you're saying 1+1=2 then why
are you setting this on the top and bottom of button_? Can you  use
profile_name_textfield_->border()->GetInsets()?

[Jane, 2016/06/22 15:38:33]

Done. I thought the original code had a purpose... But changing it to 1px
doesn't make it look any different.

+
  private:
   // views::ButtonListener:
   void ButtonPressed(views::Button* sender, const ui::Event& event) override {
@@ -478,10 +509,6 @@ class EditableProfileName : public views::View,
   // edited.
   RightAlignedIconLabelButton* button_;
 
-  // The label which shows when the profile name cannot be edited (e.g. for
-  // supervised user). Can be NULL if the profile name is allowed to be edited.
-  views::Label* label_;
-
   // 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_;
@@ -564,15 +591,15 @@ class TitleCard : public views::View {
 
 // ProfileBadge --------------------------------------------------------
 
-const size_t kProfileBadgeSize = 30;
 const size_t kProfileBadgeWhitePadding = 2;
 
 // Draws a white circle, then a light blue circle, then a dark blue icon.
 class ProfileBadge : public gfx::CanvasImageSource {
  public:
   ProfileBadge(gfx::VectorIconId id, size_t icon_size)
-      : CanvasImageSource(gfx::Size(kProfileBadgeSize, kProfileBadgeSize),
-                          false),
+      : CanvasImageSource(
+            gfx::Size(GetProfileBadgeSize(), GetProfileBadgeSize()),
+            false),
         id_(id),
         icon_size_(icon_size) {}
 
@@ -592,7 +619,7 @@ class ProfileBadge : public gfx::CanvasImageSource {
     canvas->DrawCircle(bounds.CenterPoint(),
                        size.width() / 2 - kProfileBadgeWhitePadding, paint);
 
-    int offset = (kProfileBadgeSize - icon_size_) / 2;
+    int offset = (GetProfileBadgeSize() - icon_size_) / 2;
     canvas->Translate(gfx::Vector2d(offset, offset));
     gfx::PaintVectorIcon(canvas, id_, icon_size_, SkColorSetRGB(0, 0x66, 0xff));
   }
@@ -607,9 +634,10 @@ class ProfileBadge : public gfx::CanvasImageSource {
 gfx::ImageSkia CreateBadgeForProfile(Profile* profile) {
   ProfileBadge* badge =
       profile->IsChild()
-          ? new ProfileBadge(gfx::VectorIconId::ACCOUNT_CHILD_INVERT, 26)
-          : new ProfileBadge(gfx::VectorIconId::SUPERVISOR_ACCOUNT, 20);
-
+          ? new ProfileBadge(gfx::VectorIconId::ACCOUNT_CHILD_INVERT,
+                             switches::IsMaterialDesignUserMenu() ? 21 : 26)
+          : new ProfileBadge(gfx::VectorIconId::SUPERVISOR_ACCOUNT,
+                             switches::IsMaterialDesignUserMenu() ? 16 : 20);
   return gfx::ImageSkia(badge, badge->size());
 }
 
@@ -664,6 +692,11 @@ void ProfileChooserView::Hide() {
     profile_bubble_->GetWidget()->Close();
 }
 
+// static
+int ProfileChooserView::GetFixedMenuWidth() {
+  return switches::IsMaterialDesignUserMenu() ? 240 : 250;
+}
+
 ProfileChooserView::ProfileChooserView(views::View* anchor_view,
                                        Browser* browser,
                                        profiles::BubbleViewMode view_mode,
@@ -694,7 +727,7 @@ void ProfileChooserView::ResetView() {
   delete_account_button_map_.clear();
   reauth_account_button_map_.clear();
   manage_accounts_link_ = NULL;
-  signin_current_profile_link_ = NULL;
+  signin_current_profile_button_ = NULL;
   auth_error_email_button_ = NULL;
   current_profile_photo_ = NULL;
   current_profile_name_ = NULL;
@@ -839,7 +872,7 @@ void ProfileChooserView::ShowView(profiles::BubbleViewMode view_to_display,
     case profiles::BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT:
     case profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER:
     case profiles::BUBBLE_VIEW_MODE_FAST_PROFILE_CHOOSER:
-      layout = CreateSingleColumnLayout(this, kFixedMenuWidth);
+      layout = CreateSingleColumnLayout(this, GetFixedMenuWidth());
       sub_view = CreateProfileChooserView(avatar_menu);
       break;
   }
@@ -886,7 +919,7 @@ bool ProfileChooserView::AcceleratorPressed(
 }
 
 views::View* ProfileChooserView::GetInitiallyFocusedView() {
-  return signin_current_profile_link_;
+  return signin_current_profile_button_;
 }
 
 int ProfileChooserView::GetDialogButtons() const {
@@ -955,7 +988,7 @@ void ProfileChooserView::ButtonPressed(views::Button* sender,
   } else if (sender == current_profile_photo_) {
     avatar_menu_->EditProfile(avatar_menu_->GetActiveProfileIndex());
     PostActionPerformed(ProfileMetrics::PROFILE_DESKTOP_MENU_EDIT_IMAGE);
-  } else if (sender == signin_current_profile_link_) {
+  } else if (sender == signin_current_profile_button_) {
     ShowViewFromMode(profiles::BUBBLE_VIEW_MODE_GAIA_SIGNIN);
   } else if (sender == add_person_button_) {
     ProfileMetrics::LogProfileNewAvatarMenuNotYou(
@@ -1092,7 +1125,10 @@ void ProfileChooserView::PopulateCompleteProfileChooserView(
     if (item.active) {
       option_buttons_view = CreateOptionsView(
           item.signed_in && profiles::IsLockAvailable(browser_->profile()));
-      current_profile_view = CreateCurrentProfileView(item, false);
+      current_profile_view =
+          switches::IsMaterialDesignUserMenu()
+              ? CreateMaterialDesignCurrentProfileView(item, false)
+              : CreateCurrentProfileView(item, false);
       if (IsProfileChooser(view_mode_)) {
         tutorial_view = CreateTutorialViewIfNeeded(item);
       } else {
@@ -1129,8 +1165,10 @@ void ProfileChooserView::PopulateCompleteProfileChooserView(
   }
 
   if (browser_->profile()->IsSupervised()) {
-    layout->StartRow(0, 0);
-    layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
+    if (!switches::IsMaterialDesignUserMenu()) {
+      layout->StartRow(0, 0);
+      layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
+    }
     layout->StartRow(1, 0);
     layout->AddView(CreateSupervisedUserDisclaimerView());
   }
@@ -1162,7 +1200,8 @@ void ProfileChooserView::PopulateMinimalProfileChooserView(
 views::View* ProfileChooserView::CreateProfileChooserView(
     AvatarMenu* avatar_menu) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+  views::GridLayout* layout =
+      CreateSingleColumnLayout(view, GetFixedMenuWidth());
 
   if (view_mode_ == profiles::BUBBLE_VIEW_MODE_FAST_PROFILE_CHOOSER) {
     PopulateMinimalProfileChooserView(layout, avatar_menu);
@@ -1237,8 +1276,8 @@ views::View* ProfileChooserView::CreateTutorialView(
   views::View* view = new views::View();
   view->set_background(views::Background::CreateSolidBackground(
       profiles::kAvatarTutorialBackgroundColor));
-  views::GridLayout* layout = CreateSingleColumnLayout(view,
-      kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew);
+  views::GridLayout* layout = CreateSingleColumnLayout(
+      view, GetFixedMenuWidth() - 2 * views::kButtonHEdgeMarginNew);
   // Creates a second column set for buttons and links.
   views::ColumnSet* button_columns = layout->AddColumnSet(1);
   button_columns->AddColumn(views::GridLayout::LEADING,
@@ -1340,7 +1379,7 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
     const AvatarMenu::Item& avatar_item,
     bool is_guest) {
   views::View* view = new views::View();
-  int column_width = kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew;
+  int column_width = GetFixedMenuWidth() - 2 * views::kButtonHEdgeMarginNew;
   views::GridLayout* layout = CreateSingleColumnLayout(view, column_width);
   layout->SetInsets(views::kButtonVEdgeMarginNew,
                     views::kButtonHEdgeMarginNew,
@@ -1349,9 +1388,9 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
 
   // Profile icon, centered.
   int x_offset = (column_width - kLargeImageSide) / 2;
-  current_profile_photo_ = new EditableProfilePhoto(
-      this, avatar_item.icon, !is_guest,
-      gfx::Rect(x_offset, 0, kLargeImageSide, kLargeImageSide));
+  current_profile_photo_ =
+      new EditableProfilePhoto(this, avatar_item.icon, !is_guest);
+  current_profile_photo_->SetX(x_offset);
   SizedContainer* profile_icon_container =
       new SizedContainer(gfx::Size(column_width, kLargeImageSide));
   profile_icon_container->AddChildView(current_profile_photo_);
@@ -1438,13 +1477,14 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
       layout->StartRow(1, 0);
       layout->AddView(promo);
 
-      signin_current_profile_link_ = new views::BlueButton(
-        this, l10n_util::GetStringFUTF16(IDS_SYNC_START_SYNC_BUTTON_LABEL,
-            l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
+      signin_current_profile_button_ = new views::BlueButton(
+          this, l10n_util::GetStringFUTF16(
+                    IDS_SYNC_START_SYNC_BUTTON_LABEL,
+                    l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
       layout->StartRowWithPadding(1, 0, 0,
                                   views::kRelatedControlVerticalSpacing);
       layout->StartRow(1, 0);
-      layout->AddView(signin_current_profile_link_);
+      layout->AddView(signin_current_profile_button_);
       content::RecordAction(
           base::UserMetricsAction("Signin_Impression_FromAvatarBubbleSignin"));
     }
@@ -1453,6 +1493,113 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
   return view;
 }
 
+views::View* ProfileChooserView::CreateMaterialDesignCurrentProfileView(
+    const AvatarMenu::Item& avatar_item,
+    bool is_guest) {
+  views::View* view = new views::View();
+  view->SetLayoutManager(new views::BoxLayout(
+      views::BoxLayout::kVertical, kMaterialMenuHorizontalEdgeMargin,
+      views::kRelatedControlVerticalSpacing,
+      views::kRelatedControlVerticalSpacing));
+
+  // Profile container for the profile photo and avatar/user name.
+  views::View* profile_container = new views::View();
+
+  // Profile picture, left-aligned.
+  current_profile_photo_ =
+      new EditableProfilePhoto(this, avatar_item.icon, !is_guest);
+  current_profile_photo_->SetY(views::kRelatedControlSmallVerticalSpacing);
+  gfx::Rect photo_bounds = current_profile_photo_->bounds();
+  const int badge_spacing = 4;
+  SizedContainer* profile_photo_container = new SizedContainer(
+      gfx::Size(current_profile_photo_->width() + badge_spacing,
+                current_profile_photo_->height() +
+                    2 * views::kRelatedControlSmallVerticalSpacing));
+  profile_photo_container->AddChildView(current_profile_photo_);
+
+  // Add supervised badge for supervised profile.
+  if (browser_->profile()->IsSupervised()) {
+    views::ImageView* supervised_icon = new views::ImageView();
+    supervised_icon->SetImage(CreateBadgeForProfile(browser_->profile()));
+    gfx::Size preferred_size = supervised_icon->GetPreferredSize();
+    supervised_icon->SetBounds(

[Evan Stade, 2016/06/20 17:51:11]

seems like supervised_icon should be a child of current_profile_photo_ instead
of profile_photo_container

[Jane, 2016/06/20 18:53:26]

That's a good logical point. However, the current implementation of the
EditableProfilePhoto class clips itself as a whole to display the profile photo
as a circle, and also inherits from LabelButton so that the profile photo is
clickable. This makes it hard for the badge to be added to
current_profile_photo_ since it should neither be clipped nor clickable. This is
why I made the decision to wrap current_profile_photo_ inside
profile_photo_container, and place the badge in there too. Let me know if you
think there's a cleaner way to achieve this!

[Evan Stade, 2016/06/21 21:55:16]

where does it say in the mocks it shouldn't be clickable? I'd have assumed it
would do the same thing as clicking the profile photo.

In fact you don't even really need a view for this. (see above)

[Jane, 2016/06/22 15:38:33]

Sorry, let me be more clear about "clickable": I was actually referring to the
current user menu behavior - you can't click the badge to edit the profile
photo. Since the material design user menu can only be turned on with a flag
right now, the current/old behavior has to be maintained, and that's why I had
worries about it.
It seems to me that your suggestion about putting the badge inside
EditableProfilePhoto would have the same problem, since the badge will be part
of the LabelButton. Am I missing something about this?

+        photo_bounds.right() - preferred_size.width() + badge_spacing,
+        photo_bounds.bottom() - preferred_size.height() + badge_spacing,
+        preferred_size.width(), preferred_size.height());
+    profile_photo_container->AddChildView(supervised_icon);
+  }
+
+  // Profile name, left-aligned to the right of profile icon.
+  bool editing_allowed =
+      !is_guest && !browser_->profile()->IsLegacySupervised();
+  current_profile_name_ = new EditableProfileName(
+      this, profiles::GetAvatarNameForProfile(browser_->profile()->GetPath()),
+      editing_allowed);
+  views::View* profile_name_container = new views::View();
+  int name_container_v_spacing = views::kRelatedControlSmallVerticalSpacing;
+  if (!avatar_item.signed_in) {
+    name_container_v_spacing += views::kRelatedControlVerticalSpacing;

[Evan Stade, 2016/06/20 17:51:11]

nit: no curly braces

[Jane, 2016/06/20 18:53:25]

Done.

+  }
+  profile_name_container->SetLayoutManager(new views::BoxLayout(
+      views::BoxLayout::kVertical, 0, name_container_v_spacing, 0));
+  profile_name_container->AddChildView(current_profile_name_);
+
+  const int between_child_spacing =
+      kMaterialMenuHorizontalEdgeMargin - badge_spacing;
+  profile_container->SetLayoutManager(new views::BoxLayout(
+      views::BoxLayout::kHorizontal, 0,
+      views::kRelatedControlSmallVerticalSpacing, between_child_spacing));
+  profile_container->AddChildView(profile_photo_container);
+  profile_container->AddChildView(profile_name_container);
+  view->AddChildView(profile_container);
+
+  if (is_guest)
+    return view;
+
+  // The available links depend on the type of profile that is active.
+  if (avatar_item.signed_in) {
+    if (switches::IsEnableAccountConsistency()) {
+      base::string16 link_title = l10n_util::GetStringUTF16(
+          IsProfileChooser(view_mode_)
+              ? 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_LEFT);
+      profile_name_container->AddChildView(manage_accounts_link_);
+    } else {
+      views::Label* email_label = new views::Label(avatar_item.username);
+      email_label->SetElideBehavior(gfx::ELIDE_EMAIL);
+      email_label->SetEnabled(false);
+      email_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+      profile_name_container->AddChildView(email_label);
+    }
+    return view;
+  }
+
+  SigninManagerBase* signin_manager = SigninManagerFactory::GetForProfile(
+      browser_->profile()->GetOriginalProfile());
+  if (signin_manager->IsSigninAllowed()) {
+    views::Label* promo =
+        new views::Label(l10n_util::GetStringUTF16(IDS_PROFILES_SIGNIN_PROMO));
+    promo->SetMultiLine(true);
+    promo->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+    view->AddChildView(promo);
+
+    signin_current_profile_button_ =
+        views::MdTextButton::CreateSecondaryUiBlueButton(
+            this, l10n_util::GetStringFUTF16(
+                      IDS_SYNC_START_SYNC_BUTTON_LABEL,
+                      l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
+    view->AddChildView(signin_current_profile_button_);
+    content::RecordAction(
+        base::UserMetricsAction("Signin_Impression_FromAvatarBubbleSignin"));
+    view->SetBorder(views::Border::CreateEmptyBorder(
+        0, 0, views::kRelatedControlVerticalSpacing, 0));
+  }
+
+  return view;
+}
+
 views::View* ProfileChooserView::CreateGuestProfileView() {
   gfx::Image guest_icon =
       ui::ResourceBundle::GetSharedInstance().GetImageNamed(
@@ -1463,13 +1610,16 @@ views::View* ProfileChooserView::CreateGuestProfileView() {
       IDS_PROFILES_GUEST_PROFILE_NAME);
   guest_avatar_item.signed_in = false;
 
-  return CreateCurrentProfileView(guest_avatar_item, true);
+  return switches::IsMaterialDesignUserMenu()
+             ? CreateMaterialDesignCurrentProfileView(guest_avatar_item, true)
+             : CreateCurrentProfileView(guest_avatar_item, true);
 }
 
 views::View* ProfileChooserView::CreateOtherProfilesView(
     const Indexes& avatars_to_show) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+  views::GridLayout* layout =
+      CreateSingleColumnLayout(view, GetFixedMenuWidth());
 
   for (size_t index : avatars_to_show) {
     const AvatarMenu::Item& item = avatar_menu_->GetItemAt(index);
@@ -1500,7 +1650,8 @@ views::View* ProfileChooserView::CreateOtherProfilesView(
 
 views::View* ProfileChooserView::CreateOptionsView(bool display_lock) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+  views::GridLayout* layout =
+      CreateSingleColumnLayout(view, GetFixedMenuWidth());
 
   base::string16 text = browser_->profile()->IsGuestSession() ?
       l10n_util::GetStringUTF16(IDS_PROFILES_EXIT_GUEST) :
@@ -1550,11 +1701,17 @@ views::View* ProfileChooserView::CreateOptionsView(bool display_lock) {
 views::View* ProfileChooserView::CreateSupervisedUserDisclaimerView() {
   views::View* view = new views::View();
   views::GridLayout* layout = CreateSingleColumnLayout(
-      view, kFixedMenuWidth - 2 * views::kButtonHEdgeMarginNew);
-  layout->SetInsets(views::kRelatedControlVerticalSpacing,
-                    views::kButtonHEdgeMarginNew,
-                    views::kRelatedControlVerticalSpacing,
-                    views::kButtonHEdgeMarginNew);
+      view, GetFixedMenuWidth() - 2 * views::kButtonHEdgeMarginNew);
+  if (switches::IsMaterialDesignUserMenu()) {
+    layout->SetInsets(0, kMaterialMenuHorizontalEdgeMargin,
+                      kMaterialMenuVerticalEdgeMargin,
+                      kMaterialMenuHorizontalEdgeMargin);
+  } else {
+    layout->SetInsets(
+        views::kRelatedControlVerticalSpacing, views::kButtonHEdgeMarginNew,
+        views::kRelatedControlVerticalSpacing, views::kButtonHEdgeMarginNew);
+  }
+
   views::Label* disclaimer = new views::Label(
       avatar_menu_->GetSupervisedUserInformation());
   disclaimer->SetMultiLine(true);
@@ -1574,7 +1731,8 @@ views::View* ProfileChooserView::CreateCurrentProfileAccountsView(
   views::View* view = new views::View();
   view->set_background(views::Background::CreateSolidBackground(
       profiles::kAvatarBubbleAccountsBackgroundColor));
-  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+  views::GridLayout* layout =
+      CreateSingleColumnLayout(view, GetFixedMenuWidth());
 
   Profile* profile = browser_->profile();
   std::string primary_account =
@@ -1591,10 +1749,10 @@ views::View* ProfileChooserView::CreateCurrentProfileAccountsView(
   // from the others in the UI, so more work is likely required here:
   // crbug.com/311124.
   CreateAccountButton(layout, primary_account, true,
-                      error_account_id == primary_account, kFixedMenuWidth);
+                      error_account_id == primary_account, GetFixedMenuWidth());
   for (size_t i = 0; i < accounts.size(); ++i)
     CreateAccountButton(layout, accounts[i], false,
-                        error_account_id == accounts[i], kFixedMenuWidth);
+                        error_account_id == accounts[i], GetFixedMenuWidth());
 
   if (!profile->IsSupervised()) {
     layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);