[MD] Share button code between find bar and download shelf

- improved theme support in both find bar and download shelf
- inkdrop effect in download shelf
- less code duplication

Looks better on inverted color schemes on Windows or Linux (with GTK
theming on). Should have no effect on CrOS because the browser theme
doesn't change these colors and there's only one native theme.

BUG=512443

Review URL: https://codereview.chromium.org/1408223008

Cr-Commit-Position: refs/heads/master@{#357696}

9 files changed, 311 insertions, 220 deletions

diff --git a/chrome/browser/ui/views/bar_control_button.cc b/chrome/browser/ui/views/bar_control_button.cc
new file mode 100644
index 0000000..0e4336d
--- /dev/null
+++ b/chrome/browser/ui/views/bar_control_button.cc
@@ -0,0 +1,137 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "chrome/browser/ui/views/bar_control_button.h"
+
+#include "ui/gfx/color_utils.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/vector_icons_public.h"
+#include "ui/views/animation/ink_drop_animation_controller.h"
+#include "ui/views/animation/ink_drop_animation_controller_factory.h"
+#include "ui/views/border.h"
+
+namespace {
+
+// Extra space around the buttons to increase their event target size.
+const int kButtonExtraTouchSize = 4;
+
+}  // namespace
+
+BarControlButton::BarControlButton(views::ButtonListener* listener)
+    : views::ImageButton(listener),
+      id_(gfx::VectorIconId::VECTOR_ICON_NONE),
+      ink_drop_animation_controller_(
+          views::InkDropAnimationControllerFactory::
+              CreateInkDropAnimationController(this)) {
+  const int kInkDropLargeSize = 32;
+  const int kInkDropLargeCornerRadius = 4;
+  const int kInkDropSmallSize = 24;
+  const int kInkDropSmallCornerRadius = 2;
+  ink_drop_animation_controller_->SetInkDropSize(
+      gfx::Size(kInkDropLargeSize, kInkDropLargeSize),
+      kInkDropLargeCornerRadius,
+      gfx::Size(kInkDropSmallSize, kInkDropSmallSize),
+      kInkDropSmallCornerRadius);
+}
+
+BarControlButton::~BarControlButton() {}
+
+void BarControlButton::SetIcon(
+    gfx::VectorIconId id,
+    const base::Callback<SkColor(void)>& get_text_color_callback) {
+  id_ = id;
+  get_text_color_callback_ = get_text_color_callback;
+
+  SetBorder(views::Border::CreateEmptyBorder(
+      kButtonExtraTouchSize, kButtonExtraTouchSize, kButtonExtraTouchSize,
+      kButtonExtraTouchSize));
+  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
+                    views::ImageButton::ALIGN_MIDDLE);
+}
+
+void BarControlButton::OnThemeChanged() {
+  SkColor icon_color =
+      color_utils::DeriveDefaultIconColor(get_text_color_callback_.Run());
+  gfx::ImageSkia image = gfx::CreateVectorIcon(id_, 16, icon_color);
+  SetImage(views::CustomButton::STATE_NORMAL, &image);
+  image = gfx::CreateVectorIcon(id_, 16, SkColorSetA(icon_color, 0xff / 2));
+  SetImage(views::CustomButton::STATE_DISABLED, &image);
+}
+
+void BarControlButton::OnNativeThemeChanged(const ui::NativeTheme* theme) {
+  OnThemeChanged();
+}
+
+void BarControlButton::Layout() {
+  ImageButton::Layout();
+
+  ink_drop_animation_controller_->SetInkDropCenter(
+      GetLocalBounds().CenterPoint());
+}
+
+void BarControlButton::AddInkDropLayer(ui::Layer* ink_drop_layer) {
+  SetPaintToLayer(true);
+  SetFillsBoundsOpaquely(false);
+  layer()->Add(ink_drop_layer);
+  layer()->StackAtBottom(ink_drop_layer);
+}
+
+void BarControlButton::RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
+  layer()->Remove(ink_drop_layer);
+  SetFillsBoundsOpaquely(true);
+  SetPaintToLayer(false);
+}
+
+bool BarControlButton::OnMousePressed(const ui::MouseEvent& event) {
+  if (IsTriggerableEvent(event)) {
+    ink_drop_animation_controller_->AnimateToState(
+        views::InkDropState::ACTION_PENDING);
+  }
+
+  return ImageButton::OnMousePressed(event);
+}
+
+void BarControlButton::OnGestureEvent(ui::GestureEvent* event) {
+  views::InkDropState ink_drop_state = views::InkDropState::HIDDEN;
+  switch (event->type()) {
+    case ui::ET_GESTURE_TAP_DOWN:
+      ink_drop_state = views::InkDropState::ACTION_PENDING;
+      // The ui::ET_GESTURE_TAP_DOWN event needs to be marked as handled so
+      // that subsequent events for the gesture are sent to |this|.
+      event->SetHandled();
+      break;
+    case ui::ET_GESTURE_LONG_PRESS:
+      ink_drop_state = views::InkDropState::SLOW_ACTION_PENDING;
+      break;
+    case ui::ET_GESTURE_TAP:
+      ink_drop_state = views::InkDropState::QUICK_ACTION;
+      break;
+    case ui::ET_GESTURE_LONG_TAP:
+      ink_drop_state = views::InkDropState::SLOW_ACTION;
+      break;
+    case ui::ET_GESTURE_END:
+    case ui::ET_GESTURE_TAP_CANCEL:
+      ink_drop_state = views::InkDropState::HIDDEN;
+      break;
+    default:
+      return;
+  }
+  ink_drop_animation_controller_->AnimateToState(ink_drop_state);
+
+  ImageButton::OnGestureEvent(event);
+}
+
+void BarControlButton::OnMouseReleased(const ui::MouseEvent& event) {
+  if (!HitTestPoint(event.location()))
+    ink_drop_animation_controller_->AnimateToState(views::InkDropState::HIDDEN);
+
+  ImageButton::OnMouseReleased(event);
+}
+
+void BarControlButton::NotifyClick(const ui::Event& event) {
+  ink_drop_animation_controller_->AnimateToState(
+      views::InkDropState::QUICK_ACTION);
+
+  ImageButton::NotifyClick(event);
+}
diff --git a/chrome/browser/ui/views/bar_control_button.h b/chrome/browser/ui/views/bar_control_button.h
new file mode 100644
index 0000000..7a997cc
--- /dev/null
+++ b/chrome/browser/ui/views/bar_control_button.h
@@ -0,0 +1,56 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CHROME_BROWSER_UI_VIEWS_BAR_CONTROL_BUTTON_H_
+#define CHROME_BROWSER_UI_VIEWS_BAR_CONTROL_BUTTON_H_
+
+#include "base/callback.h"
+#include "base/macros.h"
+#include "ui/views/animation/ink_drop_host.h"
+#include "ui/views/controls/button/image_button.h"
+
+namespace gfx {
+enum class VectorIconId;
+}
+
+namespace views {
+class InkDropAnimationController;
+}
+
+// A class for buttons that control bars (find bar, download shelf, etc.). The
+// button has an image and no text.
+class BarControlButton : public views::ImageButton, public views::InkDropHost {
+ public:
+  explicit BarControlButton(views::ButtonListener* listener);
+  ~BarControlButton() override;
+
+  // Sets the icon to display and provides a callback which should return the
+  // text color from which to derive this icon's color.
+  void SetIcon(gfx::VectorIconId id,
+               const base::Callback<SkColor(void)>& get_text_color_callback);
+
+  // views::ImageButton:
+  void OnThemeChanged() override;
+  void OnNativeThemeChanged(const ui::NativeTheme* theme) override;
+  void Layout() override;
+  bool OnMousePressed(const ui::MouseEvent& event) override;
+  void OnGestureEvent(ui::GestureEvent* event) override;
+  void OnMouseReleased(const ui::MouseEvent& event) override;
+  void NotifyClick(const ui::Event& event) override;
+
+ private:
+  // views::InkDropHost:
+  void AddInkDropLayer(ui::Layer* ink_drop_layer) override;
+  void RemoveInkDropLayer(ui::Layer* ink_drop_layer) override;
+
+  gfx::VectorIconId id_;
+  base::Callback<SkColor(void)> get_text_color_callback_;
+
+  // Animation controller for the ink drop ripple effect.
+  scoped_ptr<views::InkDropAnimationController> ink_drop_animation_controller_;
+
+  DISALLOW_COPY_AND_ASSIGN(BarControlButton);
+};
+
+#endif  // CHROME_BROWSER_UI_VIEWS_BAR_CONTROL_BUTTON_H_
diff --git a/chrome/browser/ui/views/download/download_item_view_md.cc b/chrome/browser/ui/views/download/download_item_view_md.cc
index 03c8aab3..81281d9 100644
--- a/chrome/browser/ui/views/download/download_item_view_md.cc
+++ b/chrome/browser/ui/views/download/download_item_view_md.cc
@@ -30,6 +30,7 @@
 #include "chrome/browser/safe_browsing/download_protection_service.h"
 #include "chrome/browser/safe_browsing/safe_browsing_service.h"
 #include "chrome/browser/themes/theme_properties.h"
+#include "chrome/browser/ui/views/bar_control_button.h"
 #include "chrome/browser/ui/views/download/download_feedback_dialog_view.h"
 #include "chrome/browser/ui/views/download/download_shelf_context_menu_view.h"
 #include "chrome/browser/ui/views/download/download_shelf_view.h"
@@ -103,8 +104,6 @@ const int kLabelPadding = 8;
 // Height/width of the warning icon, also in dp.
 const int kWarningIconSize = 24;
 
-const SkColor kFileNameDisabledColor = SkColorSetRGB(171, 192, 212);
-
 // How long the 'download complete' animation should last for.
 const int kCompleteAnimationDurationMs = 2500;
 
@@ -180,12 +179,7 @@ DownloadItemViewMd::DownloadItemViewMd(DownloadItem* download_item,
 
   OnDownloadUpdated(download());
 
-  // TODO(estade): share this button init code with the find in page bar;
-  // also fix theming.
-  dropdown_button_ = new views::ImageButton(this);
-  dropdown_button_->SetBorder(views::Border::CreateEmptyBorder(4, 4, 4, 4));
-  dropdown_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                      views::ImageButton::ALIGN_MIDDLE);
+  dropdown_button_ = new BarControlButton(this);
   AddChildView(dropdown_button_);
   SetDropdownState(NORMAL);
   UpdateColorsFromTheme();
@@ -222,6 +216,13 @@ void DownloadItemViewMd::StopDownloadProgress() {
   progress_timer_.Stop();
 }
 
+// static
+SkColor DownloadItemViewMd::GetTextColorForThemeProvider(
+    ui::ThemeProvider* theme) {
+  return theme ? theme->GetColor(ThemeProperties::COLOR_BOOKMARK_TEXT)
+               : SK_ColorRED;
+}
+
 void DownloadItemViewMd::OnExtractIconComplete(gfx::Image* icon_bitmap) {
   if (icon_bitmap)
     shelf_->SchedulePaint();
@@ -588,10 +589,8 @@ void DownloadItemViewMd::DrawStatusText(gfx::Canvas* canvas) {
       kTextWidth);
   int y =
       GetYForFilenameText() + font_list_.GetBaseline() + kVerticalTextPadding;
-  SkColor file_name_color = SkColorSetA(
-      GetThemeProvider()->GetColor(ThemeProperties::COLOR_BOOKMARK_TEXT), 0xC7);
   canvas->DrawStringRect(
-      status_text_, status_font_list_, file_name_color,
+      status_text_, status_font_list_, GetDimmedTextColor(),
       gfx::Rect(mirrored_x, y, kTextWidth, status_font_list_.GetHeight()));
 }
 
@@ -624,11 +623,8 @@ void DownloadItemViewMd::DrawFilename(gfx::Canvas* canvas) {
       kStartPadding + DownloadShelf::kProgressIndicatorSize +
           kProgressTextPadding,
       kTextWidth);
-  SkColor file_name_color =
-      GetThemeProvider()->GetColor(ThemeProperties::COLOR_BOOKMARK_TEXT);
-
   canvas->DrawStringRect(filename, font_list_,
-                         enabled() ? file_name_color : kFileNameDisabledColor,
+                         enabled() ? GetTextColor() : GetDimmedTextColor(),
                          gfx::Rect(mirrored_x, GetYForFilenameText(),
                                    kTextWidth, font_list_.GetHeight()));
 }
@@ -760,10 +756,8 @@ void DownloadItemViewMd::UpdateColorsFromTheme() {
   if (!GetThemeProvider())
     return;
 
-  if (dangerous_download_label_) {
-    dangerous_download_label_->SetEnabledColor(
-        GetThemeProvider()->GetColor(ThemeProperties::COLOR_BOOKMARK_TEXT));
-  }
+  if (dangerous_download_label_)
+    dangerous_download_label_->SetEnabledColor(GetTextColor());
   SetBorder(make_scoped_ptr(new SeparatorBorder(
       GetThemeProvider()->GetColor(ThemeProperties::COLOR_TOOLBAR_SEPARATOR))));
 }
@@ -825,12 +819,11 @@ void DownloadItemViewMd::SetDropdownState(State new_state) {
       !dropdown_button_->GetImage(views::CustomButton::STATE_NORMAL).isNull())
     return;
 
-  // TODO(estade): theme this color instead of using a constant.
-  gfx::ImageSkia image =
-      gfx::CreateVectorIcon(new_state == PUSHED ? gfx::VectorIconId::FIND_NEXT
-                                                : gfx::VectorIconId::FIND_PREV,
-                            16, gfx::kChromeIconGrey);
-  dropdown_button_->SetImage(views::CustomButton::STATE_NORMAL, &image);
+  dropdown_button_->SetIcon(
+      new_state == PUSHED ? gfx::VectorIconId::FIND_NEXT
+                          : gfx::VectorIconId::FIND_PREV,
+      base::Bind(&DownloadItemViewMd::GetTextColor, base::Unretained(this)));
+  dropdown_button_->OnThemeChanged();
   dropdown_state_ = new_state;
   SchedulePaint();
 }
@@ -1077,3 +1070,11 @@ void DownloadItemViewMd::AnimateStateTransition(
     animation->Reset((to == HOT) ? 1.0 : 0.0);
   }
 }
+
+SkColor DownloadItemViewMd::GetTextColor() {
+  return GetTextColorForThemeProvider(GetThemeProvider());
+}
+
+SkColor DownloadItemViewMd::GetDimmedTextColor() {
+  return SkColorSetA(GetTextColor(), 0xC7);
+}
diff --git a/chrome/browser/ui/views/download/download_item_view_md.h b/chrome/browser/ui/views/download/download_item_view_md.h
index 2d69906..2d646db 100644
--- a/chrome/browser/ui/views/download/download_item_view_md.h
+++ b/chrome/browser/ui/views/download/download_item_view_md.h
@@ -35,6 +35,7 @@
 #include "ui/views/controls/button/button.h"
 #include "ui/views/view.h"
 
+class BarControlButton;
 class DownloadShelfView;
 class DownloadShelfContextMenuView;
 
@@ -48,6 +49,10 @@ class ImageSkia;
 class SlideAnimation;
 }
 
+namespace ui {
+class ThemeProvider;
+}
+
 namespace views {
 class ImageButton;
 class Label;
@@ -71,6 +76,9 @@ class DownloadItemViewMd : public views::ButtonListener,
   void StartDownloadProgress();
   void StopDownloadProgress();
 
+  // Returns the base color for text on this download item, based on |theme|.
+  static SkColor GetTextColorForThemeProvider(ui::ThemeProvider* theme);
+
   // IconManager::Client interface.
   void OnExtractIconComplete(gfx::Image* icon);
 
@@ -205,6 +213,12 @@ class DownloadItemViewMd : public views::ButtonListener,
                               State to,
                               gfx::SlideAnimation* animation);
 
+  // Returns the base text color.
+  SkColor GetTextColor();
+
+  // Returns a slightly dimmed version of the base text color.
+  SkColor GetDimmedTextColor();
+
   // The download shelf that owns us.
   DownloadShelfView* shelf_;
 
@@ -264,7 +278,7 @@ class DownloadItemViewMd : public views::ButtonListener,
   views::LabelButton* discard_button_;
 
   // The drop down button.
-  views::ImageButton* dropdown_button_;
+  BarControlButton* dropdown_button_;
 
   // Dangerous mode label.
   views::Label* dangerous_download_label_;
diff --git a/chrome/browser/ui/views/download/download_shelf_view.cc b/chrome/browser/ui/views/download/download_shelf_view.cc
index 59ae5ce..94c139f 100644
--- a/chrome/browser/ui/views/download/download_shelf_view.cc
+++ b/chrome/browser/ui/views/download/download_shelf_view.cc
@@ -15,6 +15,7 @@
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/chrome_pages.h"
 #include "chrome/browser/ui/view_ids.h"
+#include "chrome/browser/ui/views/bar_control_button.h"
 #include "chrome/browser/ui/views/download/download_item_view.h"
 #include "chrome/browser/ui/views/download/download_item_view_md.h"
 #include "chrome/browser/ui/views/frame/browser_view.h"
@@ -29,8 +30,6 @@
 #include "ui/base/theme_provider.h"
 #include "ui/gfx/animation/slide_animation.h"
 #include "ui/gfx/canvas.h"
-#include "ui/gfx/color_palette.h"
-#include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/vector_icons_public.h"
 #include "ui/resources/grit/ui_resources.h"
 #include "ui/views/background.h"
@@ -143,9 +142,6 @@ DownloadShelfView::DownloadShelfView(Browser* browser, BrowserView* parent)
 
   arrow_image_ = new views::ImageView();
   AddChildView(arrow_image_);
-  close_button_ = new views::ImageButton(this);
-  close_button_->SetAccessibleName(
-      l10n_util::GetStringUTF16(IDS_ACCNAME_CLOSE));
   if (!ui::MaterialDesignController::IsModeMaterial()) {
     arrow_image_->SetImage(rb.GetImageSkiaNamed(IDR_DOWNLOADS_FAVICON));
 
@@ -154,6 +150,7 @@ DownloadShelfView::DownloadShelfView(Browser* browser, BrowserView* parent)
     show_all_view->set_listener(this);
     show_all_view_ = show_all_view;
 
+    close_button_ = new views::ImageButton(this);
     close_button_->SetImage(views::CustomButton::STATE_NORMAL,
                             rb.GetImageSkiaNamed(IDR_CLOSE_1));
     close_button_->SetImage(views::CustomButton::STATE_HOVERED,
@@ -167,15 +164,14 @@ DownloadShelfView::DownloadShelfView(Browser* browser, BrowserView* parent)
     show_all_view->SetStyle(views::Button::STYLE_BUTTON);
     show_all_view_ = show_all_view;
 
-    // TODO(estade): share this button init code with the find in page bar;
-    // also fix theming.
-    close_button_->SetBorder(views::Border::CreateEmptyBorder(4, 4, 4, 4));
-    close_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                     views::ImageButton::ALIGN_MIDDLE);
-    gfx::ImageSkia image = gfx::CreateVectorIcon(gfx::VectorIconId::BAR_CLOSE,
-                                                 16, gfx::kChromeIconGrey);
-    close_button_->SetImage(views::CustomButton::STATE_NORMAL, &image);
+    BarControlButton* close_button = new BarControlButton(this);
+    close_button->SetIcon(gfx::VectorIconId::BAR_CLOSE,
+                          base::Bind(&DownloadShelfView::GetTextColorForIconMd,
+                                     base::Unretained(this)));
+    close_button_ = close_button;
   }
+  close_button_->SetAccessibleName(
+      l10n_util::GetStringUTF16(IDS_ACCNAME_CLOSE));
   AddChildView(show_all_view_);
   AddChildView(close_button_);
 
@@ -397,15 +393,13 @@ void DownloadShelfView::UpdateColorsFromTheme() {
       show_all_view->SetBackgroundColor(background()->get_color());
       show_all_view->SetEnabledColor(
           GetThemeProvider()->GetColor(ThemeProperties::COLOR_BOOKMARK_TEXT));
-    }
 
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    set_background(views::Background::CreateSolidBackground(
-        GetThemeProvider()->GetColor(ThemeProperties::COLOR_TOOLBAR)));
-    close_button_->SetBackground(
-        GetThemeProvider()->GetColor(ThemeProperties::COLOR_TAB_TEXT),
-        rb.GetImageSkiaNamed(IDR_CLOSE_1),
-        rb.GetImageSkiaNamed(IDR_CLOSE_1_MASK));
+      ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+      close_button_->SetBackground(
+          GetThemeProvider()->GetColor(ThemeProperties::COLOR_TAB_TEXT),
+          rb.GetImageSkiaNamed(IDR_CLOSE_1),
+          rb.GetImageSkiaNamed(IDR_CLOSE_1_MASK));
+    }
   }
 }
 
@@ -494,3 +488,7 @@ content::DownloadItem* DownloadShelfView::GetDownloadItemForView(size_t i) {
     return static_cast<DownloadItemViewMd*>(download_views_[i])->download();
   return static_cast<DownloadItemView*>(download_views_[i])->download();
 }
+
+SkColor DownloadShelfView::GetTextColorForIconMd() {
+  return DownloadItemViewMd::GetTextColorForThemeProvider(GetThemeProvider());
+}
diff --git a/chrome/browser/ui/views/download/download_shelf_view.h b/chrome/browser/ui/views/download/download_shelf_view.h
index 083f76a..0be189c 100644
--- a/chrome/browser/ui/views/download/download_shelf_view.h
+++ b/chrome/browser/ui/views/download/download_shelf_view.h
@@ -124,6 +124,9 @@ class DownloadShelfView : public views::AccessiblePaneView,
   // shouldn't be necessary after we only have one type of DownloadItemView.
   content::DownloadItem* GetDownloadItemForView(size_t i);
 
+  // Returns the color of text for the shelf (used for deriving icon color).
+  SkColor GetTextColorForIconMd();
+
   // The browser for this shelf.
   Browser* browser_;
 
diff --git a/chrome/browser/ui/views/find_bar_view.cc b/chrome/browser/ui/views/find_bar_view.cc
index 2ae8912..1fd5b59 100644
--- a/chrome/browser/ui/views/find_bar_view.cc
+++ b/chrome/browser/ui/views/find_bar_view.cc
@@ -17,6 +17,7 @@
 #include "chrome/browser/ui/find_bar/find_notification_details.h"
 #include "chrome/browser/ui/find_bar/find_tab_helper.h"
 #include "chrome/browser/ui/view_ids.h"
+#include "chrome/browser/ui/views/bar_control_button.h"
 #include "chrome/browser/ui/views/find_bar_host.h"
 #include "chrome/browser/ui/views/frame/browser_view.h"
 #include "chrome/grit/generated_resources.h"
@@ -36,9 +37,6 @@
 #include "ui/native_theme/common_theme.h"
 #include "ui/native_theme/native_theme.h"
 #include "ui/resources/grit/ui_resources.h"
-#include "ui/views/animation/ink_drop_animation_controller.h"
-#include "ui/views/animation/ink_drop_animation_controller_factory.h"
-#include "ui/views/animation/ink_drop_host.h"
 #include "ui/views/background.h"
 #include "ui/views/border.h"
 #include "ui/views/bubble/bubble_border.h"
@@ -68,8 +66,6 @@ const int kInterChildSpacing = 4;
 // Additional spacing around the separator.
 const int kSeparatorLeftSpacing = 12 - kInterChildSpacing;
 const int kSeparatorRightSpacing = 8 - kInterChildSpacing;
-// Extra space around the buttons to increase their event target size.
-const int kButtonExtraTouchSize = 4;
 
 // The margins around the match count label (We add extra space so that the
 // background highlight extends beyond just the text).
@@ -90,36 +86,10 @@ const SkColor kBackgroundColorMatch = SkColorSetARGB(0, 255, 255, 255);
 // The background color of the match count label when no results are found.
 const SkColor kBackgroundColorNoMatch = SkColorSetRGB(255, 102, 102);
 
-// The color of the match count label for Material Design.
-const SkColor kMatchTextColorMD = SkColorSetRGB(0x96, 0x96, 0x96);
-
-// Color of the vertical separator between match count and buttons. (MD only.)
-const SkColor kSeparatorColor = SkColorSetARGB(0x26, 0, 0, 0);
-
 // The default number of average characters that the text box will be. This
 // number brings the width on a "regular fonts" system to about 300px.
 const int kDefaultCharWidth = 43;
 
-class FindBarButton : public views::ImageButton, public views::InkDropHost {
- public:
-  explicit FindBarButton(views::ButtonListener* listener);
-  ~FindBarButton() override;
-
- private:
-  void Layout() override;
-  void AddInkDropLayer(ui::Layer* ink_drop_layer) override;
-  void RemoveInkDropLayer(ui::Layer* ink_drop_layer) override;
-  bool OnMousePressed(const ui::MouseEvent& event) override;
-  void OnGestureEvent(ui::GestureEvent* event) override;
-  void OnMouseReleased(const ui::MouseEvent& event) override;
-  void NotifyClick(const ui::Event& event) override;
-
-  // Animation controller for the ink drop ripple effect.
-  scoped_ptr<views::InkDropAnimationController> ink_drop_animation_controller_;
-
-  DISALLOW_COPY_AND_ASSIGN(FindBarButton);
-};
-
 // The match count label is like a normal label, but can process events (which
 // makes it easier to forward events to the text input --- see
 // FindBarView::TargetForRect).
@@ -138,114 +108,17 @@ class MatchCountLabel : public views::Label {
 }  // namespace
 
 ////////////////////////////////////////////////////////////////////////////////
-// FindBarButton, public:
-
-FindBarButton::FindBarButton(views::ButtonListener* listener)
-    : views::ImageButton(listener),
-      ink_drop_animation_controller_(
-          views::InkDropAnimationControllerFactory::
-              CreateInkDropAnimationController(this)) {
-  const int kInkDropLargeSize = 32;
-  const int kInkDropLargeCornerRadius = 4;
-  const int kInkDropSmallSize = 24;
-  const int kInkDropSmallCornerRadius = 2;
-
-  ink_drop_animation_controller_->SetInkDropSize(
-      gfx::Size(kInkDropLargeSize, kInkDropLargeSize),
-      kInkDropLargeCornerRadius,
-      gfx::Size(kInkDropSmallSize, kInkDropSmallSize),
-      kInkDropSmallCornerRadius);
-}
-
-FindBarButton::~FindBarButton() {}
-
-////////////////////////////////////////////////////////////////////////////////
-// FindBarButton, private:
-
-void FindBarButton::Layout() {
-  ImageButton::Layout();
-
-  ink_drop_animation_controller_->SetInkDropCenter(
-      GetLocalBounds().CenterPoint());
-}
-
-void FindBarButton::AddInkDropLayer(ui::Layer* ink_drop_layer) {
-  SetPaintToLayer(true);
-  SetFillsBoundsOpaquely(false);
-  layer()->Add(ink_drop_layer);
-  layer()->StackAtBottom(ink_drop_layer);
-}
-
-void FindBarButton::RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
-  layer()->Remove(ink_drop_layer);
-  SetFillsBoundsOpaquely(true);
-  SetPaintToLayer(false);
-}
-
-bool FindBarButton::OnMousePressed(const ui::MouseEvent& event) {
-  if (IsTriggerableEvent(event)) {
-    ink_drop_animation_controller_->AnimateToState(
-        views::InkDropState::ACTION_PENDING);
-  }
-
-  return ImageButton::OnMousePressed(event);
-}
-
-void FindBarButton::OnGestureEvent(ui::GestureEvent* event) {
-  views::InkDropState ink_drop_state = views::InkDropState::HIDDEN;
-  switch (event->type()) {
-    case ui::ET_GESTURE_TAP_DOWN:
-      ink_drop_state = views::InkDropState::ACTION_PENDING;
-      // The ui::ET_GESTURE_TAP_DOWN event needs to be marked as handled so
-      // that subsequent events for the gesture are sent to |this|.
-      event->SetHandled();
-      break;
-    case ui::ET_GESTURE_LONG_PRESS:
-      ink_drop_state = views::InkDropState::SLOW_ACTION_PENDING;
-      break;
-    case ui::ET_GESTURE_TAP:
-      ink_drop_state = views::InkDropState::QUICK_ACTION;
-      break;
-    case ui::ET_GESTURE_LONG_TAP:
-      ink_drop_state = views::InkDropState::SLOW_ACTION;
-      break;
-    case ui::ET_GESTURE_END:
-    case ui::ET_GESTURE_TAP_CANCEL:
-      ink_drop_state = views::InkDropState::HIDDEN;
-      break;
-    default:
-      return;
-  }
-  ink_drop_animation_controller_->AnimateToState(ink_drop_state);
-
-  ImageButton::OnGestureEvent(event);
-}
-
-void FindBarButton::OnMouseReleased(const ui::MouseEvent& event) {
-  if (!HitTestPoint(event.location()))
-    ink_drop_animation_controller_->AnimateToState(views::InkDropState::HIDDEN);
-
-  ImageButton::OnMouseReleased(event);
-}
-
-void FindBarButton::NotifyClick(const ui::Event& event) {
-  ink_drop_animation_controller_->AnimateToState(
-      views::InkDropState::QUICK_ACTION);
-
-  ImageButton::NotifyClick(event);
-}
-
-////////////////////////////////////////////////////////////////////////////////
 // FindBarView, public:
 
 FindBarView::FindBarView(FindBarHost* host)
     : DropdownBarView(host),
-      find_text_(NULL),
-      match_count_text_(NULL),
-      focus_forwarder_view_(NULL),
-      find_previous_button_(NULL),
-      find_next_button_(NULL),
-      close_button_(NULL) {
+      find_text_(nullptr),
+      match_count_text_(nullptr),
+      focus_forwarder_view_(nullptr),
+      separator_(nullptr),
+      find_previous_button_(nullptr),
+      find_next_button_(nullptr),
+      close_button_(nullptr) {
   find_text_ = new views::Textfield;
   find_text_->set_id(VIEW_ID_FIND_IN_PAGE_TEXT_FIELD);
   find_text_->set_default_width_in_chars(kDefaultCharWidth);
@@ -254,7 +127,29 @@ FindBarView::FindBarView(FindBarHost* host)
   find_text_->SetTextInputFlags(ui::TEXT_INPUT_FLAG_AUTOCORRECT_OFF);
   AddChildView(find_text_);
 
-  find_previous_button_ = new FindBarButton(this);
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    BarControlButton* find_previous = new BarControlButton(this);
+    find_previous->SetIcon(
+        gfx::VectorIconId::FIND_PREV,
+        base::Bind(&FindBarView::GetTextColorForIcon, base::Unretained(this)));
+    BarControlButton* find_next = new BarControlButton(this);
+    find_next->SetIcon(
+        gfx::VectorIconId::FIND_NEXT,
+        base::Bind(&FindBarView::GetTextColorForIcon, base::Unretained(this)));
+    BarControlButton* close = new BarControlButton(this);
+    close->SetIcon(
+        gfx::VectorIconId::BAR_CLOSE,
+        base::Bind(&FindBarView::GetTextColorForIcon, base::Unretained(this)));
+
+    find_previous_button_ = find_previous;
+    find_next_button_ = find_next;
+    close_button_ = close;
+  } else {
+    find_previous_button_ = new views::ImageButton(this);
+    find_next_button_ = new views::ImageButton(this);
+    close_button_ = new views::ImageButton(this);
+  }
+
   find_previous_button_->set_tag(FIND_PREVIOUS_TAG);
   find_previous_button_->SetFocusable(true);
   find_previous_button_->set_request_focus_on_press(false);
@@ -264,7 +159,6 @@ FindBarView::FindBarView(FindBarHost* host)
       l10n_util::GetStringUTF16(IDS_ACCNAME_PREVIOUS));
   AddChildView(find_previous_button_);
 
-  find_next_button_ = new FindBarButton(this);
   find_next_button_->set_tag(FIND_NEXT_TAG);
   find_next_button_->SetFocusable(true);
   find_next_button_->set_request_focus_on_press(false);
@@ -274,7 +168,6 @@ FindBarView::FindBarView(FindBarHost* host)
       l10n_util::GetStringUTF16(IDS_ACCNAME_NEXT));
   AddChildView(find_next_button_);
 
-  close_button_ = new FindBarButton(this);
   close_button_->set_tag(CLOSE_TAG);
   close_button_->SetFocusable(true);
   close_button_->set_request_focus_on_press(false);
@@ -655,40 +548,13 @@ void FindBarView::InitViewsForMaterial() {
       make_scoped_ptr(new views::ViewTargeter(this)));
   AddChildViewAt(match_count_text_, 1);
 
-  views::Separator* separator =
-      new views::Separator(views::Separator::VERTICAL);
-  separator->SetColor(kSeparatorColor);
-  separator->SetBorder(views::Border::CreateEmptyBorder(
+  separator_ = new views::Separator(views::Separator::VERTICAL);
+  separator_->SetBorder(views::Border::CreateEmptyBorder(
       0, kSeparatorLeftSpacing, 0, kSeparatorRightSpacing));
-  AddChildViewAt(separator, 2);
+  AddChildViewAt(separator_, 2);
 
   find_text_->SetBorder(views::Border::NullBorder());
 
-  struct {
-    views::ImageButton* button;
-    gfx::VectorIconId id;
-  } button_images[] = {
-      {find_previous_button_, gfx::VectorIconId::FIND_PREV},
-      {find_next_button_, gfx::VectorIconId::FIND_NEXT},
-      {close_button_, gfx::VectorIconId::BAR_CLOSE},
-  };
-
-  for (size_t i = 0; i < arraysize(button_images); ++i) {
-    views::ImageButton* button = button_images[i].button;
-    button->SetBorder(views::Border::CreateEmptyBorder(
-        kButtonExtraTouchSize, kButtonExtraTouchSize, kButtonExtraTouchSize,
-        kButtonExtraTouchSize));
-    button->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                              views::ImageButton::ALIGN_MIDDLE);
-
-    gfx::ImageSkia image =
-        gfx::CreateVectorIcon(button_images[i].id, 16, gfx::kChromeIconGrey);
-    button->SetImage(views::CustomButton::STATE_NORMAL, &image);
-    image = gfx::CreateVectorIcon(button_images[i].id, 16,
-                                  SkColorSetA(gfx::kChromeIconGrey, 0xff / 2));
-    button->SetImage(views::CustomButton::STATE_DISABLED, &image);
-  }
-
   views::BoxLayout* manager =
       new views::BoxLayout(views::BoxLayout::kHorizontal, kInteriorPadding,
                            kInteriorPadding, kInterChildSpacing);
@@ -781,9 +647,18 @@ void FindBarView::OnNativeThemeChanged(const ui::NativeTheme* theme) {
   if (!ui::MaterialDesignController::IsModeMaterial())
     return;
 
-  SkColor color =
-      theme->GetSystemColor(ui::NativeTheme::kColorId_DialogBackground);
-  set_background(views::Background::CreateSolidBackground(color));
-  match_count_text_->SetBackgroundColor(color);
-  match_count_text_->SetEnabledColor(kMatchTextColorMD);
+  SkColor bg_color = theme->GetSystemColor(
+      ui::NativeTheme::kColorId_TextfieldDefaultBackground);
+  set_background(views::Background::CreateSolidBackground(bg_color));
+  match_count_text_->SetBackgroundColor(bg_color);
+
+  SkColor text_color =
+      theme->GetSystemColor(ui::NativeTheme::kColorId_TextfieldDefaultColor);
+  match_count_text_->SetEnabledColor(SkColorSetA(text_color, 0x69));
+  separator_->SetColor(SkColorSetA(text_color, 0x26));
+}
+
+SkColor FindBarView::GetTextColorForIcon() {
+  return GetNativeTheme()->GetSystemColor(
+      ui::NativeTheme::kColorId_TextfieldDefaultColor);
 }
diff --git a/chrome/browser/ui/views/find_bar_view.h b/chrome/browser/ui/views/find_bar_view.h
index 5fac1d1..b26c753 100644
--- a/chrome/browser/ui/views/find_bar_view.h
+++ b/chrome/browser/ui/views/find_bar_view.h
@@ -22,6 +22,7 @@ class ImageButton;
 class Label;
 class MouseEvent;
 class Painter;
+class Separator;
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -104,6 +105,9 @@ class FindBarView : public DropdownBarView,
   void OnThemeChanged() override;
   void OnNativeThemeChanged(const ui::NativeTheme* theme) override;
 
+  // Returns the color for the icons on the buttons per the current NativeTheme.
+  SkColor GetTextColorForIcon();
+
   // We use a hidden view to grab mouse clicks and bring focus to the find
   // text box. This is because although the find text box may look like it
   // extends all the way to the find button, it only goes as far as to the
@@ -137,6 +141,7 @@ class FindBarView : public DropdownBarView,
   scoped_ptr<views::Painter> find_text_border_;
   views::Label* match_count_text_;
   views::View* focus_forwarder_view_;
+  views::Separator* separator_;
   views::ImageButton* find_previous_button_;
   views::ImageButton* find_next_button_;
   views::ImageButton* close_button_;
diff --git a/chrome/chrome_browser_ui.gypi b/chrome/chrome_browser_ui.gypi
index c5825aa..8ca0905 100644
--- a/chrome/chrome_browser_ui.gypi
+++ b/chrome/chrome_browser_ui.gypi
@@ -2108,6 +2108,8 @@
       'browser/ui/views/autofill/save_card_bubble_views.h',
       'browser/ui/views/autofill/tooltip_icon.cc',
       'browser/ui/views/autofill/tooltip_icon.h',
+      'browser/ui/views/bar_control_button.cc',
+      'browser/ui/views/bar_control_button.h',
       'browser/ui/views/bookmarks/bookmark_bar_instructions_view.cc',
       'browser/ui/views/bookmarks/bookmark_bar_instructions_view.h',
       'browser/ui/views/bookmarks/bookmark_bar_view.cc',