[Sharesheet] Add proper margins and spacing in bubble.

This CL adds proper margins for SharesheetTargetButton and
updates bubble targets to have a fixed size and alignment.
We also increase the size of the bubble to a fixed width.

Bug: 1097623
Change-Id: I9f236a6dd73dbf1a9159d8e6a8ee38a4447c06aa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2336117Reviewed-by: Avi Drissman <avi@chromium.org>
Commit-Queue: Melissa Zhang <melzhang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#794854}

chrome/browser/ui/views/sharesheet_bubble_view.cc

@@ -10,9 +10,10 @@
 #include "base/strings/string16.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/sharesheet/sharesheet_service_delegate.h"
-#include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "content/public/browser/web_contents.h"
 #include "third_party/skia/include/core/SkColor.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/font_list.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/geometry/size.h"
 #include "ui/gfx/image/image_skia.h"
@@ -24,16 +25,27 @@
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/styled_label.h"
 #include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/grid_layout.h"
 #include "ui/views/widget/widget.h"
 
 namespace {
 
-constexpr int kButtonSize = 64;
+// Sizes are in px.
+constexpr int kButtonWidth = 92;
+constexpr int kButtonHeight = 104;
+constexpr int kButtonLineHeight = 20;
+constexpr int kButtonPadding = 8;
+
 constexpr int kCornerRadius = 12;
-constexpr int kMaxTargetRowSize = 4;
+constexpr int kMaxTargetsPerRow = 4;
+constexpr int kBubbleWidth = 416;
 constexpr int kSpacing = 24;
+constexpr int kTitleLineHeight = 24;
 constexpr char kTitle[] = "Share";
 
+constexpr SkColor kShareTitleColor = gfx::kGoogleGrey900;
+constexpr SkColor kShareTargetTitleColor = gfx::kGoogleGrey700;
+
 enum { COLUMN_SET_ID_TITLE, COLUMN_SET_ID_TARGETS };
 
 }  // namespace
@@ -47,10 +59,13 @@ class ShareSheetTargetButton : public views::Button {
                          const base::string16& display_name,
                          const gfx::ImageSkia* icon)
       : Button(listener) {
-    SetLayoutManager(std::make_unique<views::BoxLayout>(
-        views::BoxLayout::Orientation::kVertical, gfx::Insets(),
-        ChromeLayoutProvider::Get()->GetDistanceMetric(
-            views::DISTANCE_RELATED_CONTROL_VERTICAL)));
+    auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+        views::BoxLayout::Orientation::kVertical, gfx::Insets(kButtonPadding),
+        kButtonPadding, true));
+    layout->set_main_axis_alignment(
+        views::BoxLayout::MainAxisAlignment::kStart);
+    layout->set_cross_axis_alignment(
+        views::BoxLayout::CrossAxisAlignment::kCenter);
 
     auto* image = AddChildView(std::make_unique<views::ImageView>());
     image->set_can_process_events_within_subtree(false);
@@ -60,9 +75,13 @@ class ShareSheetTargetButton : public views::Button {
     }
 
     auto* label = AddChildView(std::make_unique<views::Label>(display_name));
+    label->SetFontList(gfx::FontList("Roboto, Medium, 14px"));
+    label->SetLineHeight(kButtonLineHeight);
     label->SetBackgroundColor(SK_ColorTRANSPARENT);
-    label->SetHandlesTooltips(false);
-    label->SetMultiLine(true);
+    label->SetEnabledColor(kShareTargetTitleColor);
+    label->SetHandlesTooltips(true);
+    label->SetTooltipText(display_name);
+    label->SetMultiLine(false);
     label->SetAutoColorReadabilityEnabled(false);
     label->SetHorizontalAlignment(gfx::ALIGN_CENTER);
 
@@ -72,8 +91,9 @@ class ShareSheetTargetButton : public views::Button {
   ShareSheetTargetButton(const ShareSheetTargetButton&) = delete;
   ShareSheetTargetButton& operator=(const ShareSheetTargetButton&) = delete;
 
+  // Button is 76px width x 88px height + 8px padding along all sides.
   gfx::Size CalculatePreferredSize() const override {
-    return gfx::Size(kButtonSize, kButtonSize);
+    return gfx::Size(kButtonWidth, kButtonHeight);
   }
 };
 
@@ -108,44 +128,33 @@ void SharesheetBubbleView::ShowBubble(std::vector<TargetInfo> targets,
   // Set up columnsets
   views::ColumnSet* cs = main_layout->AddColumnSet(COLUMN_SET_ID_TITLE);
   cs->AddColumn(/* h_align */ views::GridLayout::FILL,
-                /* v_align */ views::GridLayout::CENTER,
-                /* resize_percent */ 1.0,
+                /* v_align */ views::GridLayout::LEADING,
+                /* resize_percent */ 0,
                 views::GridLayout::ColumnSize::kUsePreferred,
                 /* fixed_width */ 0, /*min_width*/ 0);
 
   views::ColumnSet* cs_buttons =
       main_layout->AddColumnSet(COLUMN_SET_ID_TARGETS);
-  cs_buttons->AddPaddingColumn(/* resize_percent */ 1, kSpacing);
-  cs_buttons->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
-                        1.0, views::GridLayout::ColumnSize::kFixed, kButtonSize,
-                        0);
-  cs_buttons->AddPaddingColumn(/* resize_percent */ 1, kSpacing);
-  cs_buttons->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
-                        1.0, views::GridLayout::ColumnSize::kFixed, kButtonSize,
-                        0);
-  cs_buttons->AddPaddingColumn(/* resize_percent */ 1, kSpacing);
-  cs_buttons->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
-                        1.0, views::GridLayout::ColumnSize::kFixed, kButtonSize,
-                        0);
-  cs_buttons->AddPaddingColumn(/* resize_percent */ 1, kSpacing);
-  cs_buttons->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
-                        1.0, views::GridLayout::ColumnSize::kFixed, kButtonSize,
-                        0);
-  cs_buttons->AddPaddingColumn(/* resize_percent */ 1, kSpacing);
+  for (int i = 0; i < kMaxTargetsPerRow; i++) {
+    cs_buttons->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
+                          0, views::GridLayout::ColumnSize::kFixed,
+                          kButtonWidth, 0);
+  }
 
   // Add Title label
-  main_layout->AddPaddingRow(views::GridLayout::kFixedSize, kSpacing);
   main_layout->StartRow(views::GridLayout::kFixedSize, COLUMN_SET_ID_TITLE,
-                        /* height */ kSpacing);
+                        kTitleLineHeight);
   auto* title = main_layout->AddView(std::make_unique<views::Label>(
-      base::UTF8ToUTF16(base::StringPiece(kTitle)),
-      views::style::CONTEXT_DIALOG_TITLE, views::style::STYLE_PRIMARY));
-  title->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+      base::UTF8ToUTF16(base::StringPiece(kTitle))));
+  title->SetFontList(gfx::FontList("GoogleSans, Medium, 24px"));
+  title->SetLineHeight(kTitleLineHeight);
+  title->SetEnabledColor(kShareTitleColor);
+  title->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 
   // Add Targets
   size_t i = 0;
   for (const auto& target : targets_) {
-    if (i % kMaxTargetRowSize == 0) {
+    if (i % kMaxTargetsPerRow == 0) {
       main_layout->AddPaddingRow(views::GridLayout::kFixedSize, kSpacing);
       main_layout->StartRow(views::GridLayout::kFixedSize,
                             COLUMN_SET_ID_TARGETS);
@@ -201,26 +210,19 @@ void SharesheetBubbleView::OnWidgetDestroyed(views::Widget* widget) {
 }
 
 gfx::Size SharesheetBubbleView::CalculatePreferredSize() const {
-  const int width = ChromeLayoutProvider::Get()->GetDistanceMetric(
-                        DISTANCE_BUBBLE_PREFERRED_WIDTH) -
-                    margins().width();
-  gfx::Size size = gfx::Size(width, GetHeightForWidth(width));
-  return size;
+  return gfx::Size(kBubbleWidth, GetHeightForWidth(kBubbleWidth));
 }
 
 void SharesheetBubbleView::CreateBubble() {
   SetButtons(ui::DIALOG_BUTTON_NONE);
 
   SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, gfx::Insets(),
-      ChromeLayoutProvider::Get()->GetDistanceMetric(
-          views::DISTANCE_RELATED_CONTROL_VERTICAL)));
+      views::BoxLayout::Orientation::kVertical));
 
   auto root_view = std::make_unique<views::View>();
   root_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, gfx::Insets(),
-      ChromeLayoutProvider::Get()->GetDistanceMetric(
-          views::DISTANCE_RELATED_CONTROL_VERTICAL)));
+      views::BoxLayout::Orientation::kVertical, gfx::Insets(kSpacing), 0,
+      true));
   root_view_ = AddChildView(std::move(root_view));
 
   auto main_view = std::make_unique<views::View>();