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 417c6fcc4d1f470afef3c4ef62e415290d4fc923..8c99b844b37276b6f9179e4ed00a95b3018d6a6c 100644
--- a/chrome/browser/ui/views/profiles/profile_chooser_view.cc
+++ b/chrome/browser/ui/views/profiles/profile_chooser_view.cc
@@ -83,14 +83,17 @@ namespace {
 
 // Helpers --------------------------------------------------------------------
 
-const int kFixedMenuWidth = 250;
+const int kFixedMenuWidth = 240;

[Jane, 2016/06/06 16:56:46]

I couldn't figure out how to make this helper parameter dependent on
IsMaterialDesignUserMenu(). Is there a simple way or can it remain like this?

[Roger Tawa OOO till Jul 10th, 2016/06/07 14:20:48]

You could write a function like:

static int GetFixedMenuWidth() {
  return switches::IsMaterialDesignUserMenu() ? 240 : 250;
}

and then use GetFixedMenuWidth() wherever kFixedMenuWidth is used below.

[Jane, 2016/06/07 17:32:44]

Done.

 const int kButtonHeight = 32;
 const int kPasswordCombinedFixedGaiaViewWidth = 360;
 const int kFixedGaiaViewWidth = 448;
 const int kFixedAccountRemovalViewWidth = 280;
 const int kFixedSwitchUserViewWidth = 320;
 const int kLargeImageSide = 88;
+const int kMediumImageSide = 40;
 
+const int kTextfieldLabelHorizontalSpacing = 4;
+const int kProfileHorizontalSpacing = 16;
 const int kVerticalSpacing = 16;
 
 const int kTitleViewNativeWidgetOffset = 8;
@@ -263,14 +266,16 @@ 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:
@@ -308,8 +313,10 @@ class EditableProfilePhoto : public views::LabelButton {
                        const gfx::Rect& bounds)
       : views::LabelButton(listener, base::string16()),
         photo_overlay_(NULL) {
+    const int kIconImageSide = switches::IsMaterialDesignUserMenu()
+        ? kMediumImageSide : kLargeImageSide;
     gfx::Image image = profiles::GetSizedAvatarIcon(
-        icon, true, kLargeImageSide, kLargeImageSide);
+        icon, true, kIconImageSide, kIconImageSide);
     SetImage(views::LabelButton::STATE_NORMAL, *image.ToImageSkia());
     SetBorder(views::Border::NullBorder());
     SetBoundsRect(bounds);
@@ -333,7 +340,9 @@ class EditableProfilePhoto : public views::LabelButton {
     photo_overlay_->set_background(
         views::Background::CreateSolidBackground(kBackgroundColor));
     photo_overlay_->SetImage(gfx::CreateVectorIcon(
-        gfx::VectorIconId::PHOTO_CAMERA, 48u, SkColorSetRGB(0x33, 0x33, 0x33)));
+        gfx::VectorIconId::PHOTO_CAMERA,
+        switches::IsMaterialDesignUserMenu() ? 22u : 48u,
+        SkColorSetRGB(0x33, 0x33, 0x33)));
 
     photo_overlay_->SetSize(bounds.size());
     photo_overlay_->SetVisible(false);
@@ -405,6 +414,9 @@ class EditableProfileName : public views::View,
       label_ = new views::Label(text);
       label_->SetBorder(views::Border::CreateEmptyBorder(2, 0, 2, 0));
       label_->SetFontList(medium_font_list);
+      if (switches::IsMaterialDesignUserMenu()) {
+        label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+      }
       AddChildView(label_);
       return;
     }
@@ -426,19 +438,25 @@ 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(
+          2, kTextfieldLabelHorizontalSpacing, 2, 0));
+    } else {
+      const int kIconTextLabelButtonSpacing = 5;
+      button_->SetBorder(views::Border::CreateEmptyBorder(
+          2, kIconSize + kIconTextLabelButtonSpacing, 2, 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_->SetHorizontalAlignment(
+        switches::IsMaterialDesignUserMenu()
+        ? gfx::ALIGN_LEFT : gfx::ALIGN_CENTER);
     profile_name_textfield_->SetVisible(false);
     AddChildView(profile_name_textfield_);
   }
@@ -565,14 +583,19 @@ class TitleCard : public views::View {
 // ProfileBadge --------------------------------------------------------
 
 const size_t kProfileBadgeSize = 30;
+const size_t kSmallProfileBadgeSize = 24;
 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(
+                              switches::IsMaterialDesignUserMenu()
+                              ? kSmallProfileBadgeSize : kProfileBadgeSize,
+                              switches::IsMaterialDesignUserMenu()
+                              ? kSmallProfileBadgeSize : kProfileBadgeSize),
+                              false),
         id_(id),
         icon_size_(icon_size) {}
 
@@ -592,7 +615,9 @@ class ProfileBadge : public gfx::CanvasImageSource {
     canvas->DrawCircle(bounds.CenterPoint(),
                        size.width() / 2 - kProfileBadgeWhitePadding, paint);
 
-    int offset = (kProfileBadgeSize - icon_size_) / 2;
+    int offset = ((switches::IsMaterialDesignUserMenu()
+        ? kSmallProfileBadgeSize : kProfileBadgeSize)
+        - icon_size_) / 2;
     canvas->Translate(gfx::Vector2d(offset, offset));
     gfx::PaintVectorIcon(canvas, id_, icon_size_, SkColorSetRGB(0, 0x66, 0xff));
   }
@@ -605,11 +630,11 @@ 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);
-
+  ProfileBadge* badge = profile->IsChild()
+      ? 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());
 }
 
@@ -1084,7 +1109,9 @@ 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);

[Roger Tawa OOO till Jul 10th, 2016/06/07 14:20:48]

I think lines 1113 and 1114 only need to be indented 4 more than line 1112.

[Jane, 2016/06/07 17:32:44]

Done.

       if (IsProfileChooser(view_mode_)) {
         tutorial_view = CreateTutorialViewIfNeeded(item);
       } else {
@@ -1121,8 +1148,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());
   }
@@ -1445,6 +1474,157 @@ views::View* ProfileChooserView::CreateCurrentProfileView(
   return view;
 }
 
+views::View* ProfileChooserView::CreateMaterialDesignCurrentProfileView(
+    const AvatarMenu::Item& avatar_item,
+    bool is_guest) {
+  views::View* view = new views::View();
+  int column_width = kFixedMenuWidth - 2 * views::kMaterialHorizontalMargin;
+  views::GridLayout* layout = CreateSingleColumnLayout(view, column_width);
+  layout->SetInsets(views::kRelatedControlVerticalSpacing,
+                    views::kMaterialHorizontalMargin,
+                    views::kRelatedControlVerticalSpacing,
+                    views::kMaterialHorizontalMargin);
+
+  // Profile picture left aligned for material design user menu,
+  // centered otherwise.
+  const int kProfileRowHeight = 56;
+  current_profile_photo_ = new EditableProfilePhoto(
+      this, avatar_item.icon, !is_guest,
+      gfx::Rect(0, (kProfileRowHeight - kMediumImageSide) / 2,
+                kMediumImageSide, kMediumImageSide));
+  SizedContainer* profile_container =
+      new SizedContainer(gfx::Size(column_width, kProfileRowHeight));
+  profile_container->AddChildView(current_profile_photo_);
+
+  // Add supervised badge for supervised profile.
+  if (browser_->profile()->IsSupervised()) {
+    const int kBadgeSpacing = 4;
+    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() + kBadgeSpacing,
+        parent_bounds.bottom() - preferred_size.height() + kBadgeSpacing,
+        preferred_size.width(),
+        preferred_size.height());
+    profile_container->AddChildView(supervised_icon);
+  }
+
+  // Profile name, left-aligned to the right of profile icon.
+  bool editing_allowed = !is_guest &&
+                         !browser_->profile()->IsLegacySupervised();
+  current_profile_name_ = new EditableProfileName(
+      this,
+      profiles::GetAvatarNameForProfile(browser_->profile()->GetPath()),
+      editing_allowed);
+  gfx::Rect photo_bounds = current_profile_photo_->bounds();
+  const int kTextfieldLeftMargin =
+      kProfileHorizontalSpacing - kTextfieldLabelHorizontalSpacing;
+  current_profile_name_->SetBounds(
+      photo_bounds.width() + kTextfieldLeftMargin,
+      views::kRelatedControlVerticalSpacing,
+      profile_container->GetPreferredSize().width() - photo_bounds.width()
+          - kTextfieldLeftMargin,
+      profile_container->GetPreferredSize().height() / 2
+          - views::kRelatedControlVerticalSpacing);
+  profile_container->AddChildView(current_profile_name_);
+
+  // Center-align the avatar name if the profile is not signed in.
+  if (is_guest || !avatar_item.signed_in) {
+    current_profile_name_->SetY(
+      (profile_container->GetPreferredSize().height()
+          - current_profile_name_->height()) / 2);
+    layout->StartRow(1, 0);
+    layout->AddView(profile_container);
+  }
+
+  if (is_guest)
+    return view;
+
+  // The available links depend on the type of profile that is active.
+  if (avatar_item.signed_in) {
+    // Calculate the position and size for links available for signed-in
+    // profiles.
+    const int kXCoordinate = photo_bounds.width() + kProfileHorizontalSpacing;
+    const int kYCoordinate = profile_container->GetPreferredSize().height() / 2;
+    const int kWidth = profile_container->GetPreferredSize().width()
+        - photo_bounds.width() - kProfileHorizontalSpacing;
+    const int kHeight = profile_container->GetPreferredSize().height() / 2
+        - views::kRelatedControlVerticalSpacing;
+    layout->StartRow(1, 0);
+
+    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);
+      manage_accounts_link_->SetBounds(
+          kXCoordinate, kYCoordinate, kWidth, kHeight);
+      profile_container->AddChildView(manage_accounts_link_);
+    } else {
+      // Badge the email address if there's an authentication error.
+      if (HasAuthError(browser_->profile())) {
+        auth_error_email_button_ =
+            new RightAlignedIconLabelButton(this, avatar_item.username);
+        auth_error_email_button_->SetElideBehavior(gfx::ELIDE_EMAIL);
+        auth_error_email_button_->SetImage(
+            views::LabelButton::STATE_NORMAL,
+            gfx::CreateVectorIcon(gfx::VectorIconId::WARNING, 12,
+                                  gfx::kChromeIconGrey));
+        auth_error_email_button_->SetFocusForPlatform();
+        auth_error_email_button_->set_request_focus_on_press(true);
+        gfx::Insets insets =
+            views::LabelButtonAssetBorder::GetDefaultInsetsForStyle(
+                views::Button::STYLE_TEXTBUTTON);
+        auth_error_email_button_->SetBorder(views::Border::CreateEmptyBorder(
+            insets.top(), insets.left(), insets.bottom(), insets.right()));
+        auth_error_email_button_->SetBounds(
+            kXCoordinate - insets.left(), kYCoordinate, kWidth, kHeight);
+        profile_container->AddChildView(auth_error_email_button_);
+      } 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);
+        email_label->SetBounds(
+            kXCoordinate, kYCoordinate, kWidth, kHeight);
+        profile_container->AddChildView(email_label);
+      }
+    }
+    layout->AddView(profile_container);
+  } else {
+    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);
+      layout->StartRowWithPadding(1, 0, 0,
+                                  views::kRelatedControlVerticalSpacing);
+      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)));
+      layout->StartRowWithPadding(1, 0, 0,
+                                  views::kRelatedControlVerticalSpacing);
+      layout->StartRow(1, 0);
+      layout->AddView(signin_current_profile_link_);
+      content::RecordAction(
+          base::UserMetricsAction("Signin_Impression_FromAvatarBubbleSignin"));
+      layout->StartRowWithPadding(1, 0, 0,
+                                  views::kLabelToControlVerticalSpacing);
+    }
+  }
+
+  return view;
+}
+
 views::View* ProfileChooserView::CreateGuestProfileView() {
   gfx::Image guest_icon =
       ui::ResourceBundle::GetSharedInstance().GetImageNamed(
@@ -1455,7 +1635,9 @@ 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(
@@ -1522,10 +1704,17 @@ 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);
+  if (switches::IsMaterialDesignUserMenu()) {
+    layout->SetInsets(0, views::kMaterialHorizontalMargin,

[Roger Tawa OOO till Jul 10th, 2016/06/07 14:20:48]

Nit: put views::kMaterialHorizontalMargin on next line.

[Jane, 2016/06/07 17:32:44]

Done.

+                      views::kMaterialVerticalMargin,
+                      views::kMaterialHorizontalMargin);
+  } else {
+    layout->SetInsets(views::kRelatedControlVerticalSpacing,
+                      views::kButtonHEdgeMarginNew,
+                      views::kRelatedControlVerticalSpacing,
+                      views::kButtonHEdgeMarginNew);
+  }
+
   views::Label* disclaimer = new views::Label(
       avatar_menu_->GetSupervisedUserInformation());
   disclaimer->SetMultiLine(true);