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 aa3ade501c117ea8100156af170511de9164aa20..cdab61cd0c7951749862b5d8bc29ca23e9dfad78 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -50,6 +50,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"
@@ -84,13 +85,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;
 
@@ -101,6 +106,15 @@ bool IsProfileChooser(profiles::BubbleViewMode mode) {
       mode == profiles::BUBBLE_VIEW_MODE_FAST_PROFILE_CHOOSER;
 }
 
+int GetFixedMenuWidth() {
+  return switches::IsMaterialDesignUserMenu() ? 240 : 250;
+}
+
+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) {
@@ -264,14 +278,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:
@@ -300,25 +317,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) {
+        photo_overlay_(nullptr),
+        profile_(profile) {
     gfx::Image image = profiles::GetSizedAvatarIcon(
-        icon, true, kLargeImageSide, kLargeImageSide);
+        icon, true, icon_image_side(), icon_image_side());
     SetImage(views::LabelButton::STATE_NORMAL, *image.ToImageSkia());
     SetBorder(views::Border::NullBorder());
-    SetBoundsRect(bounds);
+    if (switches::IsMaterialDesignUserMenu()) {
+      SetMinSize(gfx::Size(GetPreferredSize().width() + badge_spacing(),
+                           GetPreferredSize().height() + badge_spacing() +
+                               views::kRelatedControlSmallVerticalSpacing));
+    } else {
+      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) + badge_spacing(),
+        SkIntToScalar(icon_image_side() / 2));
 
     if (!is_editing_allowed) {
       SetEnabled(false);
@@ -333,25 +360,92 @@ 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 {
     // Display any children (the "change photo" overlay) as a circle.
-    ui::ClipRecorder clip_recorder(context);
-    clip_recorder.ClipPathWithAntiAliasing(circular_mask_);
-    View::PaintChildren(context);
+    {
+      ui::ClipRecorder clip_recorder(context);
+      clip_recorder.ClipPathWithAntiAliasing(circular_mask_);
+      View::PaintChildren(context);
+    }
+
+    ui::PaintRecorder paint_recorder(
+        context, gfx::Size(GetProfileBadgeSize(), GetProfileBadgeSize()));
+    gfx::Canvas* canvas = paint_recorder.canvas();
+    if (profile_->IsSupervised()) {
+      gfx::VectorIconId icon_id;
+      size_t icon_size;
+      // TODO(janeliulwq): Replace the following two profile badge icons when
+      // new versions of them are ready, which be inverted as silhouettes. Also,
+      // remove the code below for painting the background for the badges as
+      // they won't be necessary.
+      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 =
+          icon_image_side() + badge_spacing() - GetProfileBadgeSize();
+      gfx::Vector2d badge_offset_vector = gfx::Vector2d(
+          badge_offset,
+          badge_offset + (switches::IsMaterialDesignUserMenu()
+                              ? views::kRelatedControlSmallVerticalSpacing
+                              : 0));
+      gfx::Point center_point = bounds.CenterPoint() + badge_offset_vector;
+
+      SkPaint paint;
+      paint.setAntiAlias(true);
+      paint.setColor(GetNativeTheme()->GetSystemColor(
+          ui::NativeTheme::kColorId_BubbleBackground));
+      canvas->DrawCircle(center_point, GetProfileBadgeSize() / 2, paint);
+
+      if (!switches::IsMaterialDesignUserMenu()) {
+        paint.setColor(SkColorSetRGB(0xaf, 0xd9, 0xfc));
+        canvas->DrawCircle(
+            center_point, GetProfileBadgeSize() / 2 - kProfileBadgeWhitePadding,
+            paint);
+      }
+
+      int offset = (GetProfileBadgeSize() - icon_size) / 2;
+      canvas->Translate(badge_offset_vector + gfx::Vector2d(offset, offset));
+      const SkColor badge_color = switches::IsMaterialDesignUserMenu()
+                                      ? gfx::kChromeIconGrey
+                                      : SkColorSetRGB(0, 0x66, 0xff);
+      gfx::PaintVectorIcon(canvas, icon_id, icon_size, badge_color);
+    }
+  }
+
+  static int icon_image_side() {
+    return switches::IsMaterialDesignUserMenu() ? kMdImageSide
+                                                : kLargeImageSide;
+  }
+
+  static int badge_spacing() {
+    // The space between the right/bottom edge of the profile badge and the
+    // right/bottom edge of the profile icon.
+    return switches::IsMaterialDesignUserMenu() ? 4 : 0;
   }
 
  private:
@@ -382,6 +476,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);
 };
 
@@ -394,22 +490,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,
@@ -427,21 +538,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() {
@@ -479,10 +588,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_;
@@ -563,57 +668,6 @@ class TitleCard : public views::View {
   DISALLOW_COPY_AND_ASSIGN(TitleCard);
 };
 
-// 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),
-        id_(id),
-        icon_size_(icon_size) {}
-
-  ~ProfileBadge() override {}
-
-  // CanvasImageSource:
-  void Draw(gfx::Canvas* canvas) override {
-    const SkISize size = canvas->sk_canvas()->getBaseLayerSize();
-    gfx::Rect bounds(0, 0, size.width(), size.height());
-
-    SkPaint paint;
-    paint.setAntiAlias(true);
-    paint.setColor(SK_ColorWHITE);
-    canvas->DrawCircle(bounds.CenterPoint(), size.width() / 2, paint);
-
-    paint.setColor(SkColorSetRGB(0xAF, 0xD9, 0xFC));
-    canvas->DrawCircle(bounds.CenterPoint(),
-                       size.width() / 2 - kProfileBadgeWhitePadding, paint);
-
-    int offset = (kProfileBadgeSize - icon_size_) / 2;
-    canvas->Translate(gfx::Vector2d(offset, offset));
-    gfx::PaintVectorIcon(canvas, id_, icon_size_, SkColorSetRGB(0, 0x66, 0xff));
-  }
-
- private:
-  const gfx::VectorIconId id_;
-  const size_t icon_size_;
-
-  DISALLOW_COPY_AND_ASSIGN(ProfileBadge);
-};
-
-gfx::ImageSkia CreateBadgeForProfile(Profile* profile) {
-  ProfileBadge* badge =
-      profile->IsChild()
-          ? new ProfileBadge(gfx::VectorIconId::ACCOUNT_CHILD_INVERT, 26)
-          : new ProfileBadge(gfx::VectorIconId::SUPERVISOR_ACCOUNT, 20);
-
-  return gfx::ImageSkia(badge, badge->size());
-}
-
 // ProfileChooserView ---------------------------------------------------------
 
 // static
@@ -698,7 +752,7 @@ void ProfileChooserView::ResetView() {
   delete_account_button_map_.clear();
   reauth_account_button_map_.clear();
   manage_accounts_link_ = nullptr;
-  signin_current_profile_link_ = nullptr;
+  signin_current_profile_button_ = nullptr;
   auth_error_email_button_ = nullptr;
   current_profile_photo_ = nullptr;
   current_profile_name_ = nullptr;
@@ -845,7 +899,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;
   }
@@ -892,7 +946,7 @@ bool ProfileChooserView::AcceleratorPressed(
 }
 
 views::View* ProfileChooserView::GetInitiallyFocusedView() {
-  return signin_current_profile_link_;
+  return signin_current_profile_button_;
 }
 
 int ProfileChooserView::GetDialogButtons() const {
@@ -968,7 +1022,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(
@@ -1106,7 +1160,10 @@ void ProfileChooserView::PopulateCompleteProfileChooserView(
       option_buttons_view = CreateOptionsView(
           item.signed_in && profiles::IsLockAvailable(browser_->profile()),
           avatar_menu);
-      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 {
@@ -1143,8 +1200,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());
   }
@@ -1176,7 +1235,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);
@@ -1251,8 +1311,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,
@@ -1354,7 +1414,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,
@@ -1364,24 +1424,12 @@ 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_);
 
-  if (browser_->profile()->IsSupervised()) {
-    views::ImageView* supervised_icon = new views::ImageView();
-    supervised_icon->SetImage(CreateBadgeForProfile(browser_->profile()));
-    gfx::Size preferred_size = supervised_icon->GetPreferredSize();
-    gfx::Rect parent_bounds = current_profile_photo_->bounds();
-    supervised_icon->SetBounds(
-        parent_bounds.right() - preferred_size.width(),
-        parent_bounds.bottom() - preferred_size.height(),
-        preferred_size.width(),
-        preferred_size.height());
-    profile_icon_container->AddChildView(supervised_icon);
-  }
 
   layout->StartRow(1, 0);
   layout->AddView(profile_icon_container);
@@ -1452,13 +1500,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"));
     }
@@ -1467,6 +1516,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 - EditableProfilePhoto::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(
@@ -1477,13 +1612,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);
@@ -1515,7 +1653,8 @@ views::View* ProfileChooserView::CreateOtherProfilesView(
 views::View* ProfileChooserView::CreateOptionsView(bool display_lock,
                                                    AvatarMenu* avatar_menu) {
   views::View* view = new views::View();
-  views::GridLayout* layout = CreateSingleColumnLayout(view, kFixedMenuWidth);
+  views::GridLayout* layout =
+      CreateSingleColumnLayout(view, GetFixedMenuWidth());
 
   const int kIconSize = switches::IsMaterialDesignUserMenu() ? 20 : 16;
   if (switches::IsMaterialDesignUserMenu()) {
@@ -1621,11 +1760,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);
@@ -1645,7 +1789,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 =
@@ -1662,10 +1807,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);