Add ripple effect to action buttons in new-style notification.

ui/message_center/views/notification_view_md.cc

Index: ui/message_center/views/notification_view_md.cc
diff --git a/ui/message_center/views/notification_view_md.cc b/ui/message_center/views/notification_view_md.cc
index 66e70fd5d2a6b06926314a4a680dc5d7b419b8d9..d876cf6a9a6fb4de6f61f95fc1a38cec1ad04dd6 100644
--- a/ui/message_center/views/notification_view_md.cc
+++ b/ui/message_center/views/notification_view_md.cc
@@ -49,6 +49,8 @@ constexpr gfx::Insets kContentRowPadding(4, 12, 12, 12);
 constexpr gfx::Insets kActionsRowPadding(8, 8, 8, 8);
 constexpr int kActionsRowHorizontalSpacing = 8;
 constexpr gfx::Insets kImageContainerPadding(0, 12, 12, 12);
+constexpr gfx::Insets kActionButtonPadding(0, 12, 0, 12);
+constexpr gfx::Size kActionButtonMinSize(88, 32);
 
 // Foreground of small icon image.
 constexpr SkColor kSmallImageBackgroundColor = SK_ColorWHITE;
@@ -56,6 +58,12 @@ constexpr SkColor kSmallImageBackgroundColor = SK_ColorWHITE;
 const SkColor kSmallImageColor = SkColorSetRGB(0x43, 0x43, 0x43);
 // Background of inline actions area.
 const SkColor kActionsRowBackgroundColor = SkColorSetRGB(0xee, 0xee, 0xee);
+// Ink drop color of action buttons.
+const SkColor kActionButtonInkDropBaseColor = SkColorSetRGB(0x0, 0x0, 0x0);
+// Ink drop opacity of action buttons when the ripple is visible.
+const float kActionButtonInkDropVisibleOpacity = 0.08f;
+// Text color of action button.
+const SkColor kActionButtonTextColor = SkColorSetRGB(0x33, 0x67, 0xD6);
 
 // Max number of lines for message_view_.
 constexpr int kMaxLinesForMessageView = 1;
@@ -679,6 +687,15 @@ void NotificationViewMD::CreateOrUpdateActionButtonViews(
     if (new_buttons) {
       views::LabelButton* button = new views::LabelButton(
           this, button_info.title, views::style::CONTEXT_BUTTON_MD);
+      button->SetInkDropMode(views::LabelButton::InkDropMode::ON);
+      button->set_has_ink_drop_action_on_click(true);
+      // TODO(tetsui): Hover background color is slightly different from the
+      // mock. Investigate how to set hover color and ripple color separately.

[fukino, 2017/06/28 02:11:57]

(record from offline discussion) As this change is not urgent, could you
investigate how the inkdrop effect and hover color works?

[tetsui, 2017/06/28 06:30:24]

Done. Hover color is precisely accurate. Ripple color is slightly different from
the mock, but I think the original mock RGB color might not be accurate here.
(It depends on alpha blend formula? gamma? I'm not familiar with them...)

Ripple color in mock: #CFCFCF
Ripple color in the implementation: #CACACA
Manual calculation: 0xee * (1-0.08) * (1-0.08) = #C9C9C9

+      button->set_ink_drop_base_color(kActionButtonInkDropBaseColor);
+      button->set_ink_drop_visible_opacity(kActionButtonInkDropVisibleOpacity);
+      button->SetEnabledTextColors(kActionButtonTextColor);
+      button->SetBorder(views::CreateEmptyBorder(kActionButtonPadding));
+      button->SetMinSize(kActionButtonMinSize);
       button->SetFocusForPlatform();
       action_buttons_.push_back(button);
       actions_row_->AddChildView(button);