[Chrome Autofill] Update cardholder name fix flow UI

Changes made by request of UX team.

Bug: 848955
Change-Id: I4b5486a97cf3482f98a26657ac2644b9bc2c1bd4
Reviewed-on: https://chromium-review.googlesource.com/1142200Reviewed-by: Michael Wasserman <msw@chromium.org>
Commit-Queue: Jared Saul <jsaul@google.com>
Cr-Commit-Position: refs/heads/master@{#576313}

chrome/browser/ui/views/autofill/save_card_bubble_views.cc

@@ -28,6 +28,7 @@
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/border.h"
+#include "ui/views/bubble/bubble_border.h"
 #include "ui/views/bubble/bubble_frame_view.h"
 #include "ui/views/bubble/tooltip_icon.h"
 #include "ui/views/controls/button/blue_button.h"
@@ -50,11 +51,7 @@ const int kGooglePayLogoHeight = 16;
 
 const int kGooglePayLogoSeparatorHeight = 12;
 
-// Using custom padding instead of reusing left/right padding from
-// INSETS_DIALOG_TITLE, because it gives too much spacing when there is a
-// separator line between the icon and the title.
-// TODO(ftirelo): This padding should come from the layout provider.
-const int kTitleSeparatorPadding = 8;
+const int kTooltipIconSize = 12;
 
 const SkColor kTitleSeparatorColor = SkColorSetRGB(0x9E, 0x9E, 0x9E);
 
@@ -188,10 +185,15 @@ void SaveCardBubbleViews::AddedToWidget() {
   // is added to the widget, so the bubble frame view is guaranteed to exist.
   if (GetCurrentFlowStep() != UPLOAD_SAVE_ONLY_STEP)
     return;
+  ChromeLayoutProvider* provider = ChromeLayoutProvider::Get();
 
   auto title_container = std::make_unique<views::View>();
+  // TODO(ftirelo): DISTANCE_RELATED_BUTTON_HORIZONTAL isn't the right choice
+  //                here, but INSETS_DIALOG_TITLE gives too much padding.
+  //                Make a new Harmony DistanceMetric?
   title_container->SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::kHorizontal, gfx::Insets(), kTitleSeparatorPadding));
+      views::BoxLayout::kHorizontal, gfx::Insets(),
+      provider->GetDistanceMetric(views::DISTANCE_RELATED_BUTTON_HORIZONTAL)));
 
   // kGooglePayLogoIcon is square, and CreateTiledImage() will clip it whereas
   // setting the icon size would rescale it incorrectly.
@@ -348,11 +350,14 @@ std::unique_ptr<views::View> SaveCardBubbleViews::CreateMainContentView() {
         std::make_unique<views::View>();
 
     // Set up cardholder name label.
+    // TODO(jsaul): DISTANCE_RELATED_BUTTON_HORIZONTAL isn't the right choice
+    //              here, but DISTANCE_RELATED_CONTROL_HORIZONTAL gives too much
+    //              padding. Make a new Harmony DistanceMetric?
     cardholder_name_label_row->SetLayoutManager(
         std::make_unique<views::BoxLayout>(
             views::BoxLayout::kHorizontal, gfx::Insets(),
             provider->GetDistanceMetric(
-                views::DISTANCE_RELATED_CONTROL_HORIZONTAL)));
+                views::DISTANCE_RELATED_BUTTON_HORIZONTAL)));
     std::unique_ptr<views::Label> cardholder_name_label =
         std::make_unique<views::Label>(
             l10n_util::GetStringUTF16(
@@ -372,8 +377,12 @@ std::unique_ptr<views::View> SaveCardBubbleViews::CreateMainContentView() {
     // textfield will be prefilled.
     if (!prefilled_name.empty()) {
       std::unique_ptr<views::TooltipIcon> cardholder_name_tooltip =
-          std::make_unique<views::TooltipIcon>(l10n_util::GetStringUTF16(
-              IDS_AUTOFILL_SAVE_CARD_PROMPT_CARDHOLDER_NAME_TOOLTIP));
+          std::make_unique<views::TooltipIcon>(
+              l10n_util::GetStringUTF16(
+                  IDS_AUTOFILL_SAVE_CARD_PROMPT_CARDHOLDER_NAME_TOOLTIP),
+              kTooltipIconSize);
+      cardholder_name_tooltip->set_anchor_point_arrow(
+          views::BubbleBorder::Arrow::TOP_LEFT);
       cardholder_name_tooltip->set_id(DialogViewId::CARDHOLDER_NAME_TOOLTIP);
       cardholder_name_label_row->AddChildView(
           cardholder_name_tooltip.release());

ui/views/bubble/tooltip_icon.cc

@@ -14,8 +14,9 @@
 
 namespace views {
 
-TooltipIcon::TooltipIcon(const base::string16& tooltip)
+TooltipIcon::TooltipIcon(const base::string16& tooltip, int tooltip_icon_size)
     : tooltip_(tooltip),
+      tooltip_icon_size_(tooltip_icon_size),
       mouse_inside_(false),
       bubble_(nullptr),
       preferred_width_(0),
@@ -69,9 +70,8 @@ void TooltipIcon::MouseMovedOutOfHost() {
 }
 
 void TooltipIcon::SetDrawAsHovered(bool hovered) {
-  constexpr int kTooltipIconSize = 16;
   SetImage(
-      gfx::CreateVectorIcon(vector_icons::kInfoOutlineIcon, kTooltipIconSize,
+      gfx::CreateVectorIcon(vector_icons::kInfoOutlineIcon, tooltip_icon_size_,
                             hovered ? SkColorSetARGB(0xBD, 0, 0, 0)
                                     : SkColorSetARGB(0xBD, 0x44, 0x44, 0x44)));
 }
@@ -84,7 +84,7 @@ void TooltipIcon::ShowBubble() {
 
   bubble_ = new InfoBubble(this, tooltip_);
   bubble_->set_preferred_width(preferred_width_);
-  bubble_->set_arrow(BubbleBorder::TOP_RIGHT);
+  bubble_->set_arrow(anchor_point_arrow_);
   // When shown due to a gesture event, close on deactivate (i.e. don't use
   // "focusless").
   bubble_->set_can_activate(!mouse_inside_);

ui/views/bubble/tooltip_icon.h

@@ -11,6 +11,7 @@
 #include "base/scoped_observer.h"
 #include "base/strings/string16.h"
 #include "base/timer/timer.h"
+#include "ui/views/bubble/bubble_border.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/mouse_watcher.h"
 #include "ui/views/widget/widget_observer.h"
@@ -24,7 +25,8 @@ class VIEWS_EXPORT TooltipIcon : public ImageView,
                                  public MouseWatcherListener,
                                  public WidgetObserver {
  public:
-  explicit TooltipIcon(const base::string16& tooltip);
+  explicit TooltipIcon(const base::string16& tooltip,
+                       int tooltip_icon_size = 16);
   ~TooltipIcon() override;
 
   // ImageView:
@@ -45,6 +47,10 @@ class VIEWS_EXPORT TooltipIcon : public ImageView,
     preferred_width_ = preferred_width;
   }
 
+  void set_anchor_point_arrow(BubbleBorder::Arrow arrow) {
+    anchor_point_arrow_ = arrow;
+  }
+
  private:
   // Changes the color to reflect the hover node_data.
   void SetDrawAsHovered(bool hovered);
@@ -59,6 +65,14 @@ class VIEWS_EXPORT TooltipIcon : public ImageView,
   // The text to show in a bubble when hovered.
   base::string16 tooltip_;
 
+  // The size of the tooltip icon, in dip.
+  // Must be set in the constructor, otherwise the pre-hovered icon will show
+  // the default size.
+  int tooltip_icon_size_;
+
+  // The point at which to anchor the tooltip.
+  BubbleBorder::Arrow anchor_point_arrow_ = BubbleBorder::TOP_RIGHT;
+
   // Whether the mouse is inside this tooltip.
   bool mouse_inside_;