Reflow of the profile items in desktop user menu

chrome/browser/ui/views/profiles/profile_chooser_view.cc

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "chrome/browser/ui/views/profiles/profile_chooser_view.h"
 
 #include "base/macros.h"
 #include "base/metrics/user_metrics.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/browser_process.h"
@@ skipping 32 matching lines @@
 #include "components/signin/core/browser/signin_manager.h"
 #include "components/signin/core/common/profile_management_switches.h"
 #include "content/public/browser/render_widget_host_view.h"
 #include "content/public/browser/user_metrics.h"
 #include "grit/theme_resources.h"
 #include "third_party/skia/include/core/SkColor.h"
 #include "ui/base/l10n/l10n_util.h"
 #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"
 #include "ui/gfx/image/image.h"
 #include "ui/gfx/image/image_skia.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/path.h"
 #include "ui/gfx/skia_util.h"
 #include "ui/gfx/text_elider.h"
 #include "ui/gfx/vector_icons_public.h"
@@ skipping 14 matching lines @@
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/layout/grid_layout.h"
 #include "ui/views/layout/layout_constants.h"
 #include "ui/views/widget/widget.h"
 
 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;
 
 const int kTitleViewNativeWidgetOffset = 8;
 
 bool IsProfileChooser(profiles::BubbleViewMode mode) {
   return mode == profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER ||
       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) {
   views::GridLayout* layout = new views::GridLayout(view);
   view->SetLayoutManager(layout);
 
   views::ColumnSet* columns = layout->AddColumnSet(0);
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 0,
                      views::GridLayout::FIXED, width, width);
   return layout;
@@ skipping 143 matching lines @@
   gfx::Rect bounds(title_view_->GetPreferredSize());
   title_view_->SetBoundsRect(bounds);
   bounds.Offset(kTitleViewNativeWidgetOffset, kTitleViewNativeWidgetOffset);
   title_widget_->SetBounds(bounds);
 }
 
 }  // namespace
 
 // 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:
   void Layout() override {
     views::LabelButton::Layout();
 
     // Keep the text centered and the icon right-aligned by stretching the label
     // to take up more of the content area and centering its contents.
     gfx::Rect content_bounds = GetContentsBounds();
     gfx::Rect label_bounds = label()->bounds();
     label_bounds.Inset(content_bounds.x() - label_bounds.x(), 0, 0, 0);
     label()->SetBoundsRect(label_bounds);
   }
 
  private:
   void OnFocus() override {
     SetState(STATE_HOVERED);
   }
 
   void OnBlur() override {
     SetState(STATE_NORMAL);
   }
 
   DISALLOW_COPY_AND_ASSIGN(RightAlignedIconLabelButton);
 };
 
 // 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()) {
+      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);
       return;
     }
 
     set_notify_enter_exit_on_child(true);
 
     // Photo overlay that appears when hovering over the button.
     photo_overlay_ = new views::ImageView();
 
     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 icons when new versions of
+      // them are ready, which be inverted as silhouettes.

[Evan Stade, 2016/06/30 13:32:38]

can you elaborate a little on this TODO? Some indication of the code
simplifications that will be possible with the new icons (since right now it
just sounds like a simple icon swap).

[Jane, 2016/06/30 14:06:30]

Done.

+      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(SK_ColorWHITE);

[Evan Stade, 2016/06/30 13:32:38]

I liked the idea you had of using the theme's bubble bg color here instead of
specifying white

[Jane, 2016/06/30 14:06:30]

Done.

+      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);
+    }
   }
 
+  int icon_image_side =
+      switches::IsMaterialDesignUserMenu() ? kMdImageSide : kLargeImageSide;
+  int badge_spacing = switches::IsMaterialDesignUserMenu() ? 4 : 0;

[Evan Stade, 2016/06/30 13:32:38]

these both need to be static functions rather than member variables (public
member variables are banned in the style guide)

[Jane, 2016/06/30 14:06:29]

Done.

+
  private:
   // views::CustomButton:
   void StateChanged() override {
     bool show_overlay =
         (state() == STATE_PRESSED || state() == STATE_HOVERED || HasFocus());
     if (photo_overlay_)
       photo_overlay_->SetVisible(show_overlay);
   }
 
   void OnFocus() override {
     views::LabelButton::OnFocus();
     if (photo_overlay_)
       photo_overlay_->SetVisible(true);
   }
 
   void OnBlur() override {
     views::LabelButton::OnBlur();
     // Don't hide the overlay if it's being shown as a result of a mouseover.
     if (photo_overlay_ && state() != STATE_HOVERED)
       photo_overlay_->SetVisible(false);
   }
 
   gfx::Path circular_mask_;
 
   // Image that is shown when hovering over the image button. Can be NULL if
   // the photo isn't allowed to be edited (e.g. for guest profiles).
   views::ImageView* photo_overlay_;
 
+  Profile* profile_;
+
   DISALLOW_COPY_AND_ASSIGN(EditableProfilePhoto);
 };
 
 // EditableProfileName -------------------------------------------------
 
 // A custom text control that turns into a textfield for editing when clicked.
 class EditableProfileName : public views::View,
                             public views::ButtonListener {
  public:
   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,
     // we need to create an empty placeholder of the correct size, so that
     // the text doesn't jump around when the hovered icon appears.
     // TODO(estade): revisit colors and press effect.
     const int kIconSize = 16;
     button_->SetImage(views::LabelButton::STATE_NORMAL,
                       CreateSquarePlaceholderImage(kIconSize));
     button_->SetImage(views::LabelButton::STATE_HOVERED,
                       gfx::CreateVectorIcon(
                           gfx::VectorIconId::MODE_EDIT, kIconSize,
                           SkColorSetRGB(0x33, 0x33, 0x33)));
     button_->SetImage(views::LabelButton::STATE_PRESSED,
                       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() {
     return profile_name_textfield_;
   }
 
   // Hide the editable textfield to show the profile name button instead.
   void ShowReadOnlyView() {
     button_->SetVisible(true);
     profile_name_textfield_->SetVisible(false);
@@ skipping 17 matching lines @@
     // you press space and clicks it when you release space, as the space can be
     // part of the new profile name typed in the textfield.
     return false;
   }
 
   // The label button which shows the profile name, and can handle the event to
   // make it editable. Can be NULL if the profile name isn't allowed to be
   // 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_;
 
   DISALLOW_COPY_AND_ASSIGN(EditableProfileName);
 };
 
 // A title card with one back button right aligned and one label center aligned.
 class TitleCard : public views::View {
  public:
@@ skipping 62 matching lines @@
   }
 
   views::ImageButton* back_button_;
   views::Label* title_label_;
 
   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),
+      : CanvasImageSource(
+            gfx::Size(GetProfileBadgeSize(), GetProfileBadgeSize()),
+            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;
+    int offset = (GetProfileBadgeSize() - 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) {

[Evan Stade, 2016/06/30 13:32:38]

is this still being used?

[Jane, 2016/06/30 14:06:30]

Done. Removed this and ProfileBadge class.

   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());
 }
 
 // ProfileChooserView ---------------------------------------------------------
 
 // static
 ProfileChooserView* ProfileChooserView::profile_bubble_ = nullptr;
 bool ProfileChooserView::close_on_deactivate_for_testing_ = true;
 
 // static
@@ skipping 37 matching lines @@
 bool ProfileChooserView::IsShowing() {
   return profile_bubble_ != NULL;
 }
 
 // static
 void ProfileChooserView::Hide() {
   if (IsShowing())
     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,
                                        profiles::TutorialMode tutorial_mode,
                                        signin::GAIAServiceType service_type,
                                        signin_metrics::AccessPoint access_point)
     : BubbleDialogDelegateView(anchor_view, views::BubbleBorder::TOP_RIGHT),
       browser_(browser),
       view_mode_(view_mode),
       tutorial_mode_(tutorial_mode),
@@ skipping 10 matching lines @@
       ProfileOAuth2TokenServiceFactory::GetForProfile(browser_->profile());
   if (oauth2_token_service)
     oauth2_token_service->RemoveObserver(this);
 }
 
 void ProfileChooserView::ResetView() {
   open_other_profile_indexes_map_.clear();
   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;
   guest_profile_button_ = nullptr;
   users_button_ = nullptr;
   go_incognito_button_ = nullptr;
   lock_button_ = nullptr;
   close_all_windows_button_ = nullptr;
   add_account_link_ = nullptr;
   gaia_signin_cancel_button_ = nullptr;
@@ skipping 126 matching lines @@
       break;
     case profiles::BUBBLE_VIEW_MODE_SWITCH_USER:
       layout = CreateSingleColumnLayout(this, kFixedSwitchUserViewWidth);
       sub_view = CreateSwitchUserView();
       ProfileMetrics::LogProfileNewAvatarMenuNotYou(
           ProfileMetrics::PROFILE_AVATAR_MENU_NOT_YOU_VIEW);
       break;
     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;
   }
   // Clears tutorial mode for all non-profile-chooser views.
   if (view_mode_ != profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER)
     tutorial_mode_ = profiles::TUTORIAL_MODE_NONE;
 
   layout->StartRow(1, 0);
   layout->AddView(sub_view);
   Layout();
@@ skipping 26 matching lines @@
   if (accelerator.key_code() != ui::VKEY_DOWN &&
       accelerator.key_code() != ui::VKEY_UP)
     return BubbleDialogDelegateView::AcceleratorPressed(accelerator);
 
   // Move the focus up or down.
   GetFocusManager()->AdvanceFocus(accelerator.key_code() != ui::VKEY_DOWN);
   return true;
 }
 
 views::View* ProfileChooserView::GetInitiallyFocusedView() {
-  return signin_current_profile_link_;
+  return signin_current_profile_button_;
 }
 
 int ProfileChooserView::GetDialogButtons() const {
   return ui::DIALOG_BUTTON_NONE;
 }
 
 bool ProfileChooserView::HandleContextMenu(
     const content::ContextMenuParams& params) {
   // Suppresses the context menu because some features, such as inspecting
   // elements, are not appropriate in a bubble.
@@ skipping 55 matching lines @@
     bool account_management_available =
         SigninManagerFactory::GetForProfile(browser_->profile())->
             IsAuthenticated() &&
         switches::IsEnableAccountConsistency();
     ShowViewFromMode(account_management_available ?
         profiles::BUBBLE_VIEW_MODE_ACCOUNT_MANAGEMENT :
         profiles::BUBBLE_VIEW_MODE_PROFILE_CHOOSER);
   } 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(
         ProfileMetrics::PROFILE_AVATAR_MENU_NOT_YOU_ADD_PERSON);
     UserManager::Show(base::FilePath(),
                       profiles::USER_MANAGER_NO_TUTORIAL,
                       profiles::USER_MANAGER_SELECT_PROFILE_NO_ACTION);
   } else if (sender == disconnect_button_) {
     ProfileMetrics::LogProfileNewAvatarMenuNotYou(
         ProfileMetrics::PROFILE_AVATAR_MENU_NOT_YOU_DISCONNECT);
@@ skipping 117 matching lines @@
   views::View* tutorial_view = NULL;
   views::View* current_profile_view = NULL;
   views::View* current_profile_accounts = NULL;
   views::View* option_buttons_view = NULL;
   for (size_t i = 0; i < avatar_menu->GetNumberOfItems(); ++i) {
     const AvatarMenu::Item& item = avatar_menu->GetItemAt(i);
     if (item.active) {
       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 {
         current_profile_accounts = CreateCurrentProfileAccountsView(item);
       }
     } else {
       other_profiles.push_back(i);
     }
   }
 
@@ skipping 16 matching lines @@
 
   if (!IsProfileChooser(view_mode_)) {
     DCHECK(current_profile_accounts);
     layout->StartRow(0, 0);
     layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
     layout->StartRow(1, 0);
     layout->AddView(current_profile_accounts);
   }
 
   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());
   }
 
   layout->StartRow(0, 0);
   layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
 
   if (option_buttons_view) {
     layout->StartRow(0, 0);
     layout->AddView(option_buttons_view);
@@ skipping 11 matching lines @@
     }
   }
 
   layout->StartRow(1, 0);
   layout->AddView(CreateOtherProfilesView(other_profiles));
 }
 
 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);
     // The user is using right-click switching, no need to tell them about it.
     PrefService* local_state = g_browser_process->local_state();
     local_state->SetBoolean(
         prefs::kProfileAvatarRightClickTutorialDismissed, true);
   } else {
     PopulateCompleteProfileChooserView(layout, avatar_menu);
   }
@@ skipping 54 matching lines @@
     const base::string16& button_text,
     bool stack_button,
     views::Link** link,
     views::LabelButton** button,
     views::ImageButton** close_button) {
   tutorial_mode_ = tutorial_mode;
 
   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,
       views::GridLayout::CENTER, 0, views::GridLayout::USE_PREF, 0, 0);
   button_columns->AddPaddingColumn(
       1, views::kUnrelatedControlHorizontalSpacing);
   button_columns->AddColumn(views::GridLayout::TRAILING,
       views::GridLayout::CENTER, 0, views::GridLayout::USE_PREF, 0, 0);
   layout->SetInsets(views::kButtonVEdgeMarginNew,
                     views::kButtonHEdgeMarginNew,
@@ skipping 81 matching lines @@
       layout->SkipColumns(1);
   }
 
   return view;
 }
 
 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,
                     views::kUnrelatedControlVerticalSpacing,
                     views::kButtonHEdgeMarginNew);
 
   // 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);
 
   // Profile name, centered.
   bool editing_allowed = !is_guest &&
                          !browser_->profile()->IsLegacySupervised();
   current_profile_name_ = new EditableProfileName(
       this,
       profiles::GetAvatarNameForProfile(browser_->profile()->GetPath()),
@@ skipping 50 matching lines @@
     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);
       layout->StartRowWithPadding(1, 0, 0,
                                   views::kRelatedControlSmallVerticalSpacing);
       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"));
     }
   }
 
   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(
           profiles::GetPlaceholderAvatarIconResourceID());
   AvatarMenu::Item guest_avatar_item(0, base::FilePath(), guest_icon);
   guest_avatar_item.active = true;
   guest_avatar_item.name = l10n_util::GetStringUTF16(
       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);
     const int kSmallImageSide = 32;
 
     // Use the low-res, small default avatars in the fast user switcher, like
     // we do in the menu bar.
     gfx::Image item_icon;
     AvatarMenu::GetImageForMenuButton(item.profile_path, &item_icon);
 
@@ skipping 11 matching lines @@
     layout->StartRow(1, 0);
     layout->AddView(button);
   }
 
   return view;
 }
 
 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()) {
     // Add the user switching buttons
     const int kProfileIconSize = 18;
     layout->StartRowWithPadding(1, 0, 0, views::kRelatedControlVerticalSpacing);
     for (size_t i = 0; i < avatar_menu->GetNumberOfItems(); ++i) {
       const AvatarMenu::Item& item = avatar_menu->GetItemAt(i);
       if (!item.active) {
         gfx::Image image = profiles::GetSizedAvatarIcon(
@@ skipping 85 matching lines @@
   }
 
   if (switches::IsMaterialDesignUserMenu())
     layout->StartRowWithPadding(1, 0, 0, views::kRelatedControlVerticalSpacing);
   return view;
 }
 
 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);
   disclaimer->SetAllowCharacterBreak(true);
   disclaimer->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   ui::ResourceBundle* rb = &ui::ResourceBundle::GetSharedInstance();
   disclaimer->SetFontList(rb->GetFontList(ui::ResourceBundle::SmallFont));
   layout->StartRow(1, 0);
   layout->AddView(disclaimer);
 
   return view;
 }
 
 views::View* ProfileChooserView::CreateCurrentProfileAccountsView(
     const AvatarMenu::Item& avatar_item) {
   DCHECK(avatar_item.signed_in);
   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 =
       SigninManagerFactory::GetForProfile(profile)->GetAuthenticatedAccountId();
   DCHECK(!primary_account.empty());
   std::vector<std::string>accounts =
       profiles::GetSecondaryAccountsForProfile(profile, primary_account);
 
   // Get state of authentication error, if any.
   std::string error_account_id = GetAuthErrorAccountId(profile);
 
   // The primary account should always be listed first.
   // TODO(rogerta): we still need to further differentiate the primary account
   // 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);
 
     add_account_link_ = CreateLink(l10n_util::GetStringFUTF16(
         IDS_PROFILES_PROFILE_ADD_ACCOUNT_BUTTON, avatar_item.name), this);
     add_account_link_->SetBorder(views::Border::CreateEmptyBorder(
         0, views::kButtonVEdgeMarginNew,
         views::kRelatedControlVerticalSpacing, 0));
     layout->StartRow(1, 0);
@@ skipping 289 matching lines @@
       IncognitoModePrefs::GetAvailability(browser_->profile()->GetPrefs()) !=
           IncognitoModePrefs::DISABLED;
   return incognito_available && !browser_->profile()->IsGuestSession();
 }
 
 void ProfileChooserView::PostActionPerformed(
     ProfileMetrics::ProfileDesktopMenu action_performed) {
   ProfileMetrics::LogProfileDesktopMenu(action_performed, gaia_service_type_);
   gaia_service_type_ = signin::GAIA_SERVICE_TYPE_NONE;
 }