[profile-menu] Update layout of the sync info

- The sync icon is added.
- When there is no description text (e.g. sync is on),
  the sync info is made a hover button.
- The separator at the top is removed.

Screenshots:
https://drive.google.com/open?id=10kaxE5u_m6CgLaHZpf-6iz7LUK_T9Mcm
https://drive.google.com/open?id=1rssB_Q6tRzYosA7p7Nep3JwINEajzaXH
https://drive.google.com/open?id=1PwFOFAs_bAHseCarkAd7yo2f7-12J6ec

Bug: 995720
Change-Id: Ie1eb23e6eb62bd7accfd67a7c522dd0365b995a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1847913Reviewed-by: David Roger <droger@chromium.org>
Commit-Queue: Thomas Tangl <tangltom@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704124}

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

@@ -419,21 +419,21 @@ void ProfileMenuView::BuildIdentity() {
 
   if (account_info.has_value()) {
     SetIdentityInfo(account_info.value().account_image.AsImageSkia(),
-                    GetIdentityBadge(),
+                    GetSyncIcon(),
                     base::UTF8ToUTF16(account_info.value().full_name),
                     base::UTF8ToUTF16(account_info.value().email));
   } else {
     ProfileAttributesEntry* profile_attributes =
         GetProfileAttributesEntry(profile);
     SetIdentityInfo(
-        profile_attributes->GetAvatarIcon().AsImageSkia(), GetIdentityBadge(),
+        profile_attributes->GetAvatarIcon().AsImageSkia(), GetSyncIcon(),
         profile_attributes->GetName(),
         l10n_util::GetStringUTF16(IDS_PROFILES_LOCAL_PROFILE_STATE));
   }
 }
 
 void ProfileMenuView::BuildGuestIdentity() {
-  SetIdentityInfo(profiles::GetGuestAvatar(), GetIdentityBadge(),
+  SetIdentityInfo(profiles::GetGuestAvatar(), GetSyncIcon(),
                   l10n_util::GetStringUTF16(IDS_GUEST_PROFILE_NAME));
 }
 
@@ -442,7 +442,7 @@ void ProfileMenuView::BuildIncognitoIdentity() {
       BrowserList::GetIncognitoSessionsActiveForProfile(browser()->profile());
 
   SetIdentityInfo(
-      ImageForMenu(kIncognitoProfileIcon), GetIdentityBadge(),
+      ImageForMenu(kIncognitoProfileIcon), GetSyncIcon(),
       l10n_util::GetStringUTF16(IDS_INCOGNITO_PROFILE_MENU_TITLE),
       incognito_window_count > 1
           ? l10n_util::GetPluralStringFUTF16(IDS_INCOGNITO_WINDOW_COUNT_MESSAGE,
@@ -450,7 +450,7 @@ void ProfileMenuView::BuildIncognitoIdentity() {
           : base::string16());
 }
 
-gfx::ImageSkia ProfileMenuView::GetIdentityBadge() {
+gfx::ImageSkia ProfileMenuView::GetSyncIcon() {
   Profile* profile = browser()->profile();
   signin::IdentityManager* identity_manager =
       IdentityManagerFactory::GetForProfile(profile);
@@ -520,6 +520,7 @@ void ProfileMenuView::BuildSyncInfo() {
     switch (error) {
       case sync_ui_util::NO_SYNC_ERROR:
         SetSyncInfo(
+            GetSyncIcon(),
             /*description=*/base::string16(),
             l10n_util::GetStringUTF16(IDS_SETTINGS_SYNC_ADVANCED_PAGE_TITLE),
             base::BindRepeating(&ProfileMenuView::OnSyncSettingsButtonClicked,
@@ -532,7 +533,7 @@ void ProfileMenuView::BuildSyncInfo() {
       case sync_ui_util::SETTINGS_UNCONFIRMED_ERROR:
       case sync_ui_util::AUTH_ERROR:
         SetSyncInfo(
-            l10n_util::GetStringUTF16(description_string_id),
+            GetSyncIcon(), l10n_util::GetStringUTF16(description_string_id),
             l10n_util::GetStringUTF16(button_string_id),
             base::BindRepeating(&ProfileMenuView::OnSyncErrorButtonClicked,
                                 base::Unretained(this), error));
@@ -550,12 +551,14 @@ void ProfileMenuView::BuildSyncInfo() {
 
   if (account_info.has_value()) {
     SetSyncInfo(
-        /*description=*/base::string16(),
+        GetSyncIcon(),
+        l10n_util::GetStringUTF16(IDS_PROFILES_DICE_NOT_SYNCING_TITLE),
         l10n_util::GetStringUTF16(IDS_PROFILES_DICE_SIGNIN_BUTTON),
         base::BindRepeating(&ProfileMenuView::OnSigninAccountButtonClicked,
                             base::Unretained(this), account_info.value()));
   } else {
-    SetSyncInfo(l10n_util::GetStringUTF16(IDS_PROFILES_DICE_SYNC_PROMO),
+    SetSyncInfo(/*icon=*/gfx::ImageSkia(),
+                l10n_util::GetStringUTF16(IDS_PROFILES_DICE_SYNC_PROMO),
                 l10n_util::GetStringUTF16(IDS_PROFILES_DICE_SIGNIN_BUTTON),
                 base::BindRepeating(&ProfileMenuView::OnSigninButtonClicked,
                                     base::Unretained(this)));

chrome/browser/ui/views/profiles/profile_menu_view.h

@@ -105,7 +105,7 @@ class ProfileMenuView : public ProfileMenuViewBase, public AvatarMenuObserver {
   void BuildIdentity();
   void BuildGuestIdentity();
   void BuildIncognitoIdentity();
-  gfx::ImageSkia GetIdentityBadge();
+  gfx::ImageSkia GetSyncIcon();
   void BuildAutofillButtons();
   void BuildSyncInfo();
   void BuildAccountFeatureButtons();

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

@@ -317,35 +317,58 @@ void ProfileMenuViewBase::SetIdentityInfo(const gfx::ImageSkia& image,
   }
 }
 
-void ProfileMenuViewBase::SetSyncInfo(const base::string16& description,
+void ProfileMenuViewBase::SetSyncInfo(const gfx::ImageSkia& icon,
+                                      const base::string16& description,
                                       const base::string16& clickable_text,
                                       base::RepeatingClosure action) {
-  constexpr int kVerticalPadding = 8;
+  constexpr int kVerticalSpacing = 8;
+  constexpr int kIconSize = 16;
 
   sync_info_container_->RemoveAllChildViews(/*delete_children=*/true);
   sync_info_container_->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kVertical));
 
-  views::View* separator =
-      sync_info_container_->AddChildView(std::make_unique<views::Separator>());
-  separator->SetBorder(
-      views::CreateEmptyBorder(0, 0, /*bottom=*/kVerticalPadding, 0));
+  views::LabelButton* button = nullptr;
 
-  if (!description.empty()) {
-    views::Label* label = sync_info_container_->AddChildView(
+  if (description.empty()) {
+    button = sync_info_container_->AddChildView(std::make_unique<HoverButton>(
+        this, SizeImage(icon, kIconSize), clickable_text));
+  } else {
+    // Add icon + description on top.
+    views::View* description_container =
+        sync_info_container_->AddChildView(std::make_unique<views::View>());
+    views::BoxLayout* description_layout =
+        description_container->SetLayoutManager(
+            std::make_unique<views::BoxLayout>(
+                views::BoxLayout::Orientation::kHorizontal,
+                gfx::Insets(kVerticalSpacing, kMenuEdgeMargin),
+                /*between_child_spacing=*/
+                ChromeLayoutProvider::Get()->GetDistanceMetric(
+                    views::DISTANCE_RELATED_LABEL_HORIZONTAL)));
+
+    if (icon.isNull()) {
+      // If there is no image, the description text should be centered.
+      description_layout->set_main_axis_alignment(
+          views::BoxLayout::MainAxisAlignment::kCenter);
+    } else {
+      views::ImageView* icon_view = description_container->AddChildView(
+          std::make_unique<views::ImageView>());
+      icon_view->SetImage(SizeImage(icon, kIconSize));
+    }
+
+    views::Label* label = description_container->AddChildView(
         std::make_unique<views::Label>(description));
     label->SetMultiLine(true);
-    label->SetHorizontalAlignment(gfx::ALIGN_CENTER);
     label->SetHandlesTooltips(false);
-    label->SetBorder(views::CreateEmptyBorder(gfx::Insets(0, kMenuEdgeMargin)));
-  }
 
-  views::Button* button = sync_info_container_->AddChildView(
-      views::MdTextButton::CreateSecondaryUiBlueButton(this, clickable_text));
-  button->SetProperty(
-      views::kMarginsKey,
-      gfx::Insets(/*top=*/0, /*left=*/kMenuEdgeMargin,
-                  /*bottom=*/kVerticalPadding, /*right=*/kMenuEdgeMargin));
+    // Add blue button at the bottom.
+    button = sync_info_container_->AddChildView(
+        views::MdTextButton::CreateSecondaryUiBlueButton(this, clickable_text));
+    button->SetProperty(
+        views::kMarginsKey,
+        gfx::Insets(/*top=*/0, /*left=*/kMenuEdgeMargin,
+                    /*bottom=*/kVerticalSpacing, /*right=*/kMenuEdgeMargin));
+  }
 
   RegisterClickAction(button, std::move(action));
 }

chrome/browser/ui/views/profiles/profile_menu_view_base.h

@@ -99,7 +99,8 @@ class ProfileMenuViewBase : public content::WebContentsDelegate,
                        const gfx::ImageSkia& badge,
                        const base::string16& title,
                        const base::string16& subtitle = base::string16());
-  void SetSyncInfo(const base::string16& description,
+  void SetSyncInfo(const gfx::ImageSkia& icon,
+                   const base::string16& description,
                    const base::string16& clickable_text,
                    base::RepeatingClosure action);
   void AddShortcutFeatureButton(const gfx::ImageSkia& icon,