[omnibox] Make tab switch button rounded

This CL adds the ability to customize MdTextButton's so that their
corners are rounded. This CL then makes the tab switch button round.

Bug: 780835
Change-Id: I2c46481caef074db009e681491d4f0b6822be861
Reviewed-on: https://chromium-review.googlesource.com/963836
Commit-Queue: Kevin Bailey <krb@chromium.org>
Reviewed-by: Trent Apted <tapted@chromium.org>
Reviewed-by: Justin Donnelly <jdonnelly@chromium.org>
Cr-Commit-Position: refs/heads/master@{#545693}

chrome/browser/ui/views/omnibox/omnibox_result_view.cc

@@ -133,7 +133,8 @@ OmniboxResultView::OmniboxResultView(OmniboxPopupContentsView* model,
   keyword_icon_view_->SizeToPreferredSize();
 
   if (OmniboxFieldTrial::InTabSwitchSuggestionWithButtonTrial()) {
-    tab_switch_button_.reset(new OmniboxTabSwitchButton(this));
+    tab_switch_button_ =
+        std::make_unique<OmniboxTabSwitchButton>(this, GetTextHeight());
     tab_switch_button_->set_owned_by_client();
   }
 }
@@ -486,12 +487,13 @@ void OmniboxResultView::Layout() {
                         icon.Height());
 
   if (tab_switch_button_ && match_.type == AutocompleteMatchType::TAB_SEARCH) {
-    const int ts_button_width = tab_switch_button_->GetPreferredSize().width();
-    const int ts_button_height = height();
-    tab_switch_button_->SetSize(gfx::Size(ts_button_width, ts_button_height));
+    const gfx::Size ts_button_size = tab_switch_button_->GetPreferredSize();
+    tab_switch_button_->SetSize(ts_button_size);
 
-    end_x -= ts_button_width;
-    tab_switch_button_->SetPosition(gfx::Point(end_x, 0));
+    // It looks nice to have the same margin on top, bottom and right side.
+    const int margin = (height() - ts_button_size.height()) / 2;
+    end_x -= ts_button_size.width() + margin;
+    tab_switch_button_->SetPosition(gfx::Point(end_x, margin));
   }
 
   // NOTE: While animating the keyword match, both matches may be visible.

chrome/browser/ui/views/omnibox/omnibox_tab_switch_button.cc

@@ -13,21 +13,23 @@
 #include "ui/gfx/color_utils.h"
 #include "ui/gfx/paint_vector_icon.h"
 
-OmniboxTabSwitchButton::OmniboxTabSwitchButton(OmniboxResultView* result_view)
+OmniboxTabSwitchButton::OmniboxTabSwitchButton(OmniboxResultView* result_view,
+                                               int text_height)
     : MdTextButton(this, views::style::CONTEXT_BUTTON_MD),
+      text_height_(text_height),
       result_view_(result_view) {
   // TODO: SetTooltipText(text);
   //       SetImageAlignment(ALIGN_CENTER, ALIGN_MIDDLE);
-  SetBackground(std::make_unique<BackgroundWith1PxBorder>(GetBackgroundColor(),
-                                                          SK_ColorBLACK));
   SetBgColorOverride(GetBackgroundColor());
   SetImage(STATE_NORMAL,
            gfx::CreateVectorIcon(omnibox::kSwitchIcon, 16, SK_ColorBLACK));
   SetText(base::ASCIIToUTF16("Switch to open tab"));
+  set_corner_radius(CalculatePreferredSize().height() / 2.f);
 }
 
 gfx::Size OmniboxTabSwitchButton::CalculatePreferredSize() const {
   gfx::Size size = MdTextButton::CalculatePreferredSize();
+  size.set_height(text_height_ + kVerticalPadding);
   const int horizontal_padding =
       GetLayoutConstant(LOCATION_BAR_PADDING) +
       GetLayoutConstant(LOCATION_BAR_ICON_INTERIOR_PADDING);

chrome/browser/ui/views/omnibox/omnibox_tab_switch_button.h

@@ -12,7 +12,7 @@ class OmniboxResultView;
 class OmniboxTabSwitchButton : public views::MdTextButton,
                                public views::ButtonListener {
  public:
-  explicit OmniboxTabSwitchButton(OmniboxResultView* result_view);
+  OmniboxTabSwitchButton(OmniboxResultView* result_view, int text_height);
 
   // views::View
   gfx::Size CalculatePreferredSize() const override;
@@ -24,12 +24,18 @@ class OmniboxTabSwitchButton : public views::MdTextButton,
   void StateChanged(ButtonState old_state) override;
 
  private:
+  // Encapsulates the color look-up, which uses the button state (hovered,
+  // etc.) and consults the parent result view.
   SkColor GetBackgroundColor() const;
 
-  OmniboxResultView* result_view_;
-
+  // Encapsulates changing the color of the button to display being
+  // pressed.
   void SetPressed();
 
+  static constexpr int kVerticalPadding = 2;
+  const int text_height_;
+  OmniboxResultView* result_view_;
+
   DISALLOW_COPY_AND_ASSIGN(OmniboxTabSwitchButton);
 };
 

components/omnibox/browser/vector_icons/switch.icon

@@ -3,16 +3,16 @@
 // found in the LICENSE file.
 
 CANVAS_DIMENSIONS, 32,
-MOVE_TO, 4, 6,
-LINE_TO, 26, 6,
-LINE_TO, 26, 24,
-LINE_TO, 4, 24,
-LINE_TO, 4, 8,
-LINE_TO, 5, 8,
-LINE_TO, 5, 23,
-LINE_TO, 25, 23,
-LINE_TO, 25, 13,
-LINE_TO, 16, 13,
-LINE_TO, 16, 7,
-LINE_TO, 4, 7,
+MOVE_TO, 4, 8,
+LINE_TO, 26, 8,
+LINE_TO, 26, 26,
+LINE_TO, 4, 26,
+LINE_TO, 4, 10,
+LINE_TO, 5, 10,
+LINE_TO, 5, 25,
+LINE_TO, 25, 25,
+LINE_TO, 25, 15,
+LINE_TO, 16, 15,
+LINE_TO, 16, 9,
+LINE_TO, 4, 9,
 CLOSE

ui/views/controls/button/md_text_button.cc

@@ -159,7 +159,7 @@ std::unique_ptr<views::InkDropHighlight> MdTextButton::CreateInkDropHighlight()
   return std::make_unique<InkDropHighlight>(
       gfx::RectF(GetLocalBounds()).CenterPoint(),
       base::WrapUnique(new BorderShadowLayerDelegate(
-          shadows, GetLocalBounds(), fill_color, kInkDropSmallCornerRadius)));
+          shadows, GetLocalBounds(), fill_color, corner_radius_)));
 }
 
 void MdTextButton::SetEnabledTextColors(SkColor color) {
@@ -179,7 +179,8 @@ void MdTextButton::UpdateStyleToIndicateDefaultStatus() {
 
 MdTextButton::MdTextButton(ButtonListener* listener, int button_context)
     : LabelButton(listener, base::string16(), button_context),
-      is_prominent_(false) {
+      is_prominent_(false),
+      corner_radius_(kInkDropSmallCornerRadius) {
   SetInkDropMode(InkDropMode::ON);
   set_has_ink_drop_action_on_click(true);
   SetHorizontalAlignment(gfx::ALIGN_CENTER);
@@ -330,7 +331,7 @@ void MdTextButton::UpdateColors() {
   DCHECK_EQ(SK_AlphaOPAQUE, static_cast<int>(SkColorGetA(bg_color)));
   SetBackground(
       CreateBackgroundFromPainter(Painter::CreateRoundRectWith1PxBorderPainter(
-          bg_color, stroke_color, kInkDropSmallCornerRadius)));
+          bg_color, stroke_color, corner_radius_)));
   SchedulePaint();
 }
 

ui/views/controls/button/md_text_button.h

@@ -34,6 +34,10 @@ class VIEWS_EXPORT MdTextButton : public LabelButton {
   // See |bg_color_override_|.
   void SetBgColorOverride(const base::Optional<SkColor>& color);
 
+  // Override the default corner radius of the round rect used for the
+  // background and ink drop effects.
+  void set_corner_radius(float radius) { corner_radius_ = radius; }
+
   // View:
   void OnPaintBackground(gfx::Canvas* canvas) override;
 
@@ -64,6 +68,8 @@ class VIEWS_EXPORT MdTextButton : public LabelButton {
   // When set, this provides the background color.
   base::Optional<SkColor> bg_color_override_;
 
+  float corner_radius_;
+
   DISALLOW_COPY_AND_ASSIGN(MdTextButton);
 };