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 6f262f9c51f78fc2fb90a8f49ff347d93027a0f0..a042561f46e538269c5229ec96646db3488629ca 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -49,6 +49,7 @@
 #include "ui/base/material_design/material_design_controller.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/compositor/clip_recorder.h"
+#include "ui/compositor/paint_recorder.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/image/canvas_image_source.h"
@@ -83,13 +84,17 @@ 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 kMdImageSide = 40;
+
+// Spacing between the edge of the material design user menu and the
+// top/bottom or left/right of the menu items.
+const int kMaterialMenuEdgeMargin = 16;
 
 const int kVerticalSpacing = 16;
 
@@ -100,6 +105,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 +273,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:
@@ -299,25 +312,35 @@ class RightAlignedIconLabelButton : public views::LabelButton {
 
 // EditableProfilePhoto -------------------------------------------------
 
+const size_t kProfileBadgeWhitePadding = 2;
+
 // A custom Image control that shows a "change" button when moused over.
 class EditableProfilePhoto : public views::LabelButton {
  public:
   EditableProfilePhoto(views::ButtonListener* listener,
                        const gfx::Image& icon,
                        bool is_editing_allowed,
-                       const gfx::Rect& bounds)
+                       Profile* profile)
       : views::LabelButton(listener, base::string16()),
-        photo_overlay_(NULL) {
-    gfx::Image image = profiles::GetSizedAvatarIcon(
-        icon, true, kLargeImageSide, kLargeImageSide);
+        photo_overlay_(nullptr),
+        profile_(profile) {
+    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);
+    if (switches::IsMaterialDesignUserMenu()) {
+      SetBorder(views::Border::CreateEmptyBorder(
+          views::kRelatedControlSmallVerticalSpacing, 0, 0, 0));
+    } else {
+      SetBorder(views::Border::NullBorder());
+    }
+    SetSize(gfx::Size(
+        GetPreferredSize().width() + badge_spacing,
+        GetPreferredSize().height() + badge_spacing + GetInsets().top()));
 
     // 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) + badge_spacing,
+                             SkIntToScalar(icon_image_side / 2));
 
     if (!is_editing_allowed) {
       SetEnabled(false);
@@ -332,18 +355,23 @@ 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_->SetY(badge_spacing);
     photo_overlay_->SetVisible(false);
     AddChildView(photo_overlay_);
   }
 
   void OnPaint(gfx::Canvas* canvas) override {
+    canvas->Save();
     // Display the profile picture as a circle.
     canvas->ClipPath(circular_mask_, true);
     views::LabelButton::OnPaint(canvas);
+    canvas->Restore();
   }
 
   void PaintChildren(const ui::PaintContext& context) override {
@@ -351,8 +379,49 @@ class EditableProfilePhoto : public views::LabelButton {
     ui::ClipRecorder clip_recorder(context);
     clip_recorder.ClipPathWithAntiAliasing(circular_mask_);
     View::PaintChildren(context);
+
+    ui::PaintRecorder recorder(
+        context, gfx::Size(GetProfileBadgeSize(), GetProfileBadgeSize()));
+    gfx::Canvas* canvas = recorder.canvas();
+    if (profile_->IsSupervised()) {
+      gfx::VectorIconId icon_id;
+      size_t icon_size;
+      if (profile_->IsChild()) {
+        icon_id = gfx::VectorIconId::ACCOUNT_CHILD_INVERT;
+        icon_size = switches::IsMaterialDesignUserMenu() ? 21 : 26;
+      } else {
+        icon_id = gfx::VectorIconId::SUPERVISOR_ACCOUNT;
+        icon_size = switches::IsMaterialDesignUserMenu() ? 16 : 20;
+      }
+      gfx::Rect bounds(0, 0, GetProfileBadgeSize(), GetProfileBadgeSize());
+
+      int badge_offset = views::kRelatedControlSmallVerticalSpacing +
+                         icon_image_side + badge_spacing -
+                         GetProfileBadgeSize();
+      gfx::Point center_point =
+          bounds.CenterPoint() + gfx::Vector2d(badge_offset, badge_offset);
+      SkPaint paint;
+      paint.setAntiAlias(true);
+      paint.setColor(GetNativeTheme()->GetSystemColor(
+          ui::NativeTheme::kColorId_BubbleBackground));
+      canvas->DrawCircle(center_point, GetProfileBadgeSize() / 2, paint);
+      paint.setColor(SkColorSetRGB(0xAF, 0xD9, 0xFC));
+      canvas->DrawCircle(center_point,

[Evan Stade, 2016/06/24 18:25:26]

what is this?

[Jane, 2016/06/27 18:08:56]

This is to draw the light blue circular background of the badge icon.

[Evan Stade, 2016/06/28 03:02:49]

I don't see a light blue bg in the mocks. All I see is white silhouettes on a
grey bg.

[Jane, 2016/06/28 14:59:22]

Oops, you are right, I totally missed that change.
Btw, does this color also need to go into color_palette or no? It doesn't seem
like a commonly used color.

[Evan Stade, 2016/06/28 23:32:09]

it already is in color_palette.h as kChromeIconGrey

[Jane, 2016/06/29 15:39:36]

Sorry, I got confused because of an inconsistency in the mockup. Changed to
kChromeIconGrey now.

+                         GetProfileBadgeSize() / 2 - kProfileBadgeWhitePadding,
+                         paint);
+
+      int offset = (GetProfileBadgeSize() - icon_size) / 2;
+      canvas->Translate(
+          gfx::Vector2d(badge_offset + offset, badge_offset + offset));
+      gfx::PaintVectorIcon(canvas, icon_id, icon_size,
+                           SkColorSetRGB(0, 0x66, 0xff));

[Evan Stade, 2016/06/28 03:02:49]

this should almost certainly be something from color_palette.h

[Jane, 2016/06/28 14:59:22]

(Changed it to white)
I couldn't find any defined SkColor for white in color_palette or anywhere else.
Should I add the definition over there? It doesn't seem to be used a lot.

[Jane, 2016/06/28 15:33:11]

Actually, I think it makes sense for this color to be the same as the profile
badge padding color, so I changed it to be
ui::NativeTheme::kColorId_BubbleBackground.

[Evan Stade, 2016/06/28 23:32:09]

a) the definition for white is SK_ColorWHITE
b) instead of manually drawing a circle and then a bubble-bg-colored icon on
top, you should be just drawing an icon that has the circle and the silhouettes
built in. In other words, you should be using ACCOUNT_CHILD instead of
ACCOUNT_CHILD_INVERT (the former may not exist yet but is on go/icons) and
SUPERVISOR_ACCOUNT_CIRCLE (which doesn't exist in chrome or on go/icons, so you
should request it). You will also get rid of the weird alternate sizes because
the size difference will be built into the icons.

[Jane, 2016/06/29 15:39:36]

Good suggestion on simplifying the code! I think I will have to request both of
the icons, since the current account_child icon doesn't have a white border
either. 
However, I think it's more reasonable to defer it to a later CL, with the main
reason being that the turnaround time for icon request is >2 weeks according to
go/materialiconinfo. Also, I think it makes sense for this CL to be just the
feature implementation, while code improvements like this could be done later.
This piece is also from current code, so it should work stably for now.
I have put this as a TODO here and will submit a icon request asap. If you think
it's ok to defer, I will also file a bug for this, and replace the icons once
they are ready.
Let me know what you think!

+    }
   }
 
+  int icon_image_side =
+      switches::IsMaterialDesignUserMenu() ? kMdImageSide : kLargeImageSide;
+  int badge_spacing = switches::IsMaterialDesignUserMenu() ? 4 : 0;
+
  private:
   // views::CustomButton:
   void StateChanged() override {
@@ -381,6 +450,8 @@ class EditableProfilePhoto : public views::LabelButton {
   // the photo isn't allowed to be edited (e.g. for guest profiles).
   views::ImageView* photo_overlay_;
 
+  Profile* profile_;
+
   DISALLOW_COPY_AND_ASSIGN(EditableProfilePhoto);
 };
 
@@ -393,22 +464,37 @@ 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));
 
     ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
     const gfx::FontList& medium_font_list =
         rb->GetFontList(ui::ResourceBundle::MediumFont);
+    const gfx::Insets textfield_border_insets =
+        views::Textfield().border()->GetInsets();
 
     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(textfield_border_insets));
+      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 +512,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(
+          textfield_border_insets +
+          gfx::Insets(0, profile_name_textfield_->GetInsets().left(), 0, 0)));
+    } else {
+      const int kIconTextLabelButtonSpacing = 5;
+      button_->SetBorder(views::Border::CreateEmptyBorder(
+          textfield_border_insets +
+          gfx::Insets(0, kIconSize + kIconTextLabelButtonSpacing, 0, 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() {
@@ -478,10 +562,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 +644,13 @@ 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 +670,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 +685,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 +743,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 +778,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 +923,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 +970,7 @@ bool ProfileChooserView::AcceleratorPressed(
 }
 
 views::View* ProfileChooserView::GetInitiallyFocusedView() {
-  return signin_current_profile_link_;
+  return signin_current_profile_button_;
 }
 
 int ProfileChooserView::GetDialogButtons() const {
@@ -955,7 +1039,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 +1176,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 +1216,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 +1251,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 +1327,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 +1430,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,
@@ -1350,8 +1440,8 @@ 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));
+      this, avatar_item.icon, !is_guest, browser_->profile());
+  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 +1528,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 +1544,92 @@ 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, kMaterialMenuEdgeMargin,
+                           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, browser_->profile());
+
+  // 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;
+  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 =
+      kMaterialMenuEdgeMargin - current_profile_photo_->badge_spacing;
+  profile_container->SetLayoutManager(new views::BoxLayout(
+      views::BoxLayout::kHorizontal, 0,
+      views::kRelatedControlSmallVerticalSpacing, between_child_spacing));
+  profile_container->AddChildView(current_profile_photo_);
+  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 +1640,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 +1680,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 +1731,16 @@ 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, kMaterialMenuEdgeMargin, kMaterialMenuEdgeMargin,
+                      kMaterialMenuEdgeMargin);
+  } 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 +1760,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 +1778,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);