Adding ripple effect for clicks on MD slider

ui/views/controls/md_slider.cc

Index: ui/views/controls/md_slider.cc
diff --git a/ui/views/controls/md_slider.cc b/ui/views/controls/md_slider.cc
index 1a58eaec55cd9ec966c6a5ea67eb260224616532..0ce7a2ca188e6c319bf1060952c59b16b415c023 100644
--- a/ui/views/controls/md_slider.cc
+++ b/ui/views/controls/md_slider.cc
@@ -6,6 +6,7 @@
 
 #include "third_party/skia/include/core/SkColor.h"
 #include "third_party/skia/include/core/SkPaint.h"
+#include "ui/gfx/animation/slide_animation.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/geometry/point.h"
 #include "ui/gfx/geometry/rect.h"
@@ -16,18 +17,24 @@ namespace views {
 // Color of slider at the active and the disabled state, respectively.
 const SkColor kActiveColor = SkColorSetARGB(0xFF, 0x42, 0x85, 0xF4);
 const SkColor kDisabledColor = SkColorSetARGB(0x42, 0x00, 0x00, 0x00);
+const U8CPU kHighlightColorAlpha = 0x4D;

[sadrul, 2016/09/30 02:53:36]

I don't see U8CPU type used anywhere else in chrome. Use uint8_t instead.

[yiyix, 2016/10/03 16:06:50]

Done.

 
 // The thickness of the slider.
 const int kLineThickness = 2;
 
-// The radius of the thumb of the slider.
-const int kThumbRadius = 6;
+// The radius of the thumb and the highlighted thumb of the slider,
+// respectively.
+const float kThumbRadius = 6.f;
+const float kThumbHighlightRadius = 10.f;
 
 // The stroke of the thumb when the slider is disabled.
 const int kThumbStroke = 2;
 
+// Duration of the thumb highlight growing effect animation.
+const int kSlideHighlightChangeDurationMs = 150;
+
 MdSlider::MdSlider(SliderListener* listener)
-    : Slider(listener), is_active_(true) {
+    : Slider(listener), is_active_(true), thumb_highlight_radius_(0.f) {
   SchedulePaint();
 }
 
@@ -37,21 +44,33 @@ void MdSlider::OnPaint(gfx::Canvas* canvas) {
   Slider::OnPaint(canvas);
 
   // Paint the slider.
-  const int thumb_size = kThumbRadius * 2;
   const gfx::Rect content = GetContentsBounds();
-  const int width = content.width() - thumb_size;
+  const int width = content.width() - kThumbRadius * 2;
   const int full = GetAnimatingValue() * width;
   const int empty = width - full;
   const int y = content.height() / 2 - kLineThickness / 2;
+  const int x = content.x() + full + kThumbRadius;
+  const SkColor current_thumb_color =
+      is_active_ ? kActiveColor : kDisabledColor;
   canvas->FillRect(gfx::Rect(content.x(), y, full, kLineThickness),
-                   is_active_ ? kActiveColor : kDisabledColor);
-  canvas->FillRect(
-      gfx::Rect(content.x() + full + thumb_size, y, empty, kLineThickness),
-      kDisabledColor);
+                   current_thumb_color);
+  canvas->FillRect(gfx::Rect(x + kThumbRadius, y, empty, kLineThickness),
+                   kDisabledColor);
+
+  gfx::Point thumb_center(x, content.height() / 2);
+
+  // Paint the thumb highlight if it exists.
+  if (is_active_ && thumb_highlight_radius_ > kThumbRadius) {
+    SkPaint highlight;
+    SkColor kHighlightColor = SkColorSetA(kActiveColor, kHighlightColorAlpha);
+    highlight.setColor(kHighlightColor);
+    highlight.setFlags(SkPaint::kAntiAlias_Flag);
+    canvas->DrawCircle(thumb_center, thumb_highlight_radius_, highlight);
+  }
 
   // Paint the thumb of the slider.
   SkPaint paint;
-  paint.setColor(is_active_ ? kActiveColor : kDisabledColor);
+  paint.setColor(current_thumb_color);
   paint.setFlags(SkPaint::kAntiAlias_Flag);
 
   if (!is_active_) {
@@ -59,7 +78,7 @@ void MdSlider::OnPaint(gfx::Canvas* canvas) {
     paint.setStyle(SkPaint::kStroke_Style);
   }
   canvas->DrawCircle(
-      gfx::Point(content.x() + full + kThumbRadius, content.height() / 2),
+      thumb_center,
       is_active_ ? kThumbRadius : (kThumbRadius - kThumbStroke / 2), paint);
 }
 
@@ -75,4 +94,34 @@ void MdSlider::UpdateState(bool control_on) {
 int MdSlider::GetThumbWidth() {
   return kThumbRadius * 2;
 }
+
+void MdSlider::SetHighlighted(bool is_highlighted) {
+  if (!highlight_animation_) {
+    highlight_animation_.reset(new gfx::SlideAnimation(this));

[sadrul, 2016/09/30 02:53:36]

This can probably have an early return if (!is_highlighted) (i.e. if not
highlighted, no point creating the animation at all)

[yiyix, 2016/10/03 16:06:50]

That's true. updated.

+    highlight_animation_->SetSlideDuration(kSlideHighlightChangeDurationMs);
+  }
+  if (is_highlighted)
+    highlight_animation_->Show();
+  else
+    highlight_animation_->Hide();
+}
+
+void MdSlider::AnimationProgressed(const gfx::Animation* animation) {
+  if (animation != highlight_animation_.get()) {
+    Slider::AnimationProgressed(animation);
+    return;
+  }
+  thumb_highlight_radius_ =
+      animation->CurrentValueBetween(kThumbRadius, kThumbHighlightRadius);
+  SchedulePaint();
+}
+
+void MdSlider::AnimationEnded(const gfx::Animation* animation) {
+  Slider::AnimationEnded(animation);

[sadrul, 2016/09/30 02:53:36]

In AnimationProgressed(), you call back into Slider only if animation is not the
highlight animation. Should you do the same here? (i.e. callback only for
non-highlight animation?)

[yiyix, 2016/10/03 16:06:50]

Done.

+  if (animation == highlight_animation_.get() &&
+      !highlight_animation_->IsShowing()) {
+    highlight_animation_.reset();
+  }
+}
+
 }  // namespace views