[profile-menu] Move bordered box to sync info

 - Remove big bordered box
 - Move sync info into bordered box when a blue
   button is shown
 - Refactor spacing

Screenshot:
https://drive.google.com/open?id=1CmKpM_rEA92NO-dP_V71q7TghYAALV_S

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

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

@@ -55,6 +55,7 @@ constexpr int kMenuWidth = 288;
 constexpr int kIconSize = 16;
 constexpr int kIdentityImageSize = 64;
 constexpr int kMaxImageSize = kIdentityImageSize;
+constexpr int kDefaultVerticalMargin = 12;
 
 // If the bubble is too large to fit on the screen, it still needs to be at
 // least this tall to show one row.
@@ -135,21 +136,6 @@ std::unique_ptr<views::BoxLayout> CreateBoxLayout(
   return layout;
 }
 
-std::unique_ptr<views::View> CreateBorderedBoxView() {
-  constexpr int kBorderThickness = 1;
-
-  auto bordered_box = std::make_unique<views::View>();
-  bordered_box->SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical));
-  bordered_box->SetBorder(views::CreateRoundedRectBorder(
-      kBorderThickness,
-      views::LayoutProvider::Get()->GetCornerRadiusMetric(views::EMPHASIS_HIGH),
-      GetDefaultSeparatorColor()));
-  bordered_box->SetProperty(views::kMarginsKey, gfx::Insets(kMenuEdgeMargin));
-
-  return bordered_box;
-}
-
 std::unique_ptr<views::Button> CreateCircularImageButton(
     views::ButtonListener* listener,
     const gfx::ImageSkia& image,
@@ -356,55 +342,62 @@ void ProfileMenuViewBase::SetSyncInfo(const gfx::ImageSkia& icon,
                                       const base::string16& description,
                                       const base::string16& clickable_text,
                                       base::RepeatingClosure action) {
-  constexpr int kVerticalSpacing = 8;
   constexpr int kIconSize = 16;
+  const int kDescriptionIconSpacing =
+      ChromeLayoutProvider::Get()->GetDistanceMetric(
+          views::DISTANCE_RELATED_LABEL_HORIZONTAL);
+  constexpr int kBorderThickness = 1;
+  const int kBorderCornerRadius =
+      views::LayoutProvider::Get()->GetCornerRadiusMetric(views::EMPHASIS_HIGH);
 
   sync_info_container_->RemoveAllChildViews(/*delete_children=*/true);
   sync_info_container_->SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical));
-
-  views::LabelButton* button = nullptr;
+      views::BoxLayout::Orientation::kVertical, gfx::Insets(),
+      kDefaultVerticalMargin));
 
   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::Button* button =
+        sync_info_container_->AddChildView(std::make_unique<HoverButton>(
+            this, SizeImage(icon, kIconSize), clickable_text));
+    RegisterClickAction(button, std::move(action));
+    return;
+  }
 
-    views::Label* label = description_container->AddChildView(
-        std::make_unique<views::Label>(description));
-    label->SetMultiLine(true);
-    label->SetHandlesTooltips(false);
-
-    // 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));
+  // Add padding, rounded border and margins.
+  sync_info_container_->SetBorder(views::CreatePaddedBorder(
+      views::CreateRoundedRectBorder(kBorderThickness, kBorderCornerRadius,
+                                     GetDefaultSeparatorColor()),
+      /*padding=*/gfx::Insets(kDefaultVerticalMargin, kMenuEdgeMargin)));
+  sync_info_container_->SetProperty(
+      views::kMarginsKey, gfx::Insets(kDefaultVerticalMargin, kMenuEdgeMargin));
+
+  // Add icon + description at the 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(),
+              kDescriptionIconSpacing));
+
+  if (icon.isNull()) {
+    // If there is no image, the description is 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->SetHandlesTooltips(false);
+
+  // Add blue button at the bottom.
+  views::Button* button = sync_info_container_->AddChildView(
+      views::MdTextButton::CreateSecondaryUiBlueButton(this, clickable_text));
   RegisterClickAction(button, std::move(action));
 }
 
@@ -456,27 +449,26 @@ void ProfileMenuViewBase::SetProfileManagementHeading(
       /*delete_children=*/true);
   profile_mgmt_heading_container_->SetLayoutManager(
       std::make_unique<views::FillLayout>());
+  profile_mgmt_heading_container_->SetBorder(views::CreateEmptyBorder(
+      gfx::Insets(kDefaultVerticalMargin, kMenuEdgeMargin)));
 
   views::Label* label = profile_mgmt_heading_container_->AddChildView(
       std::make_unique<views::Label>(heading, views::style::CONTEXT_LABEL,
                                      STYLE_HINT));
   label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   label->SetHandlesTooltips(false);
-  label->SetBorder(views::CreateEmptyBorder(gfx::Insets(0, kMenuEdgeMargin)));
 }
 
 void ProfileMenuViewBase::AddSelectableProfile(const gfx::ImageSkia& image,
                                                const base::string16& name,
                                                base::RepeatingClosure action) {
-  constexpr int kTopMargin = 8;
   constexpr int kImageSize = 22;
 
   // Initialize layout if this is the first time a button is added.
   if (!selectable_profiles_container_->GetLayoutManager()) {
     selectable_profiles_container_->SetLayoutManager(
         std::make_unique<views::BoxLayout>(
-            views::BoxLayout::Orientation::kVertical,
-            gfx::Insets(kTopMargin, 0, 0, 0)));
+            views::BoxLayout::Orientation::kVertical));
   }
 
   gfx::ImageSkia sized_image = CropCircle(SizeImage(image, kImageSize));
@@ -635,23 +627,23 @@ void ProfileMenuViewBase::Reset() {
       views::BoxLayout::Orientation::kVertical));
 
   // Create and add new component containers in the correct order.
-  // First, add the bordered box with the identity and feature buttons.
-  views::View* bordered_box = components->AddChildView(CreateBorderedBoxView());
+  // First, add the parts of the current profile.
   heading_container_ =
-      bordered_box->AddChildView(std::make_unique<views::View>());
+      components->AddChildView(std::make_unique<views::View>());
   identity_info_container_ =
-      bordered_box->AddChildView(std::make_unique<views::View>());
+      components->AddChildView(std::make_unique<views::View>());
   shortcut_features_container_ =
-      bordered_box->AddChildView(std::make_unique<views::View>());
+      components->AddChildView(std::make_unique<views::View>());
   sync_info_container_ =
-      bordered_box->AddChildView(std::make_unique<views::View>());
+      components->AddChildView(std::make_unique<views::View>());
   features_container_ =
-      bordered_box->AddChildView(std::make_unique<views::View>());
-  // Second, add the profile header.
+      components->AddChildView(std::make_unique<views::View>());
+  // Second, add the profile management header.
+  components->AddChildView(new views::Separator());
   auto profile_header = std::make_unique<views::View>();
-  views::BoxLayout* profile_header_layout =
-      profile_header->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::Orientation::kHorizontal));
+  views::BoxLayout* profile_header_layout = profile_header->SetLayoutManager(
+      CreateBoxLayout(views::BoxLayout::Orientation::kHorizontal,
+                      views::BoxLayout::CrossAxisAlignment::kCenter));
   profile_mgmt_heading_container_ =
       profile_header->AddChildView(std::make_unique<views::View>());
   profile_header_layout->SetFlexForView(profile_mgmt_heading_container_, 1);
@@ -660,7 +652,7 @@ void ProfileMenuViewBase::Reset() {
   profile_header_layout->SetFlexForView(
       profile_mgmt_shortcut_features_container_, 0);
   components->AddChildView(std::move(profile_header));
-  // Third, add the profile buttons at the bottom.
+  // Third, add the profile management buttons.
   selectable_profiles_container_ =
       components->AddChildView(std::make_unique<views::View>());
   profile_mgmt_features_container_ =