[ash-md] Animates ToggleButton highlight to move it in sync with the thumb

ui/views/controls/button/toggle_button.cc

Index: ui/views/controls/button/toggle_button.cc
diff --git a/ui/views/controls/button/toggle_button.cc b/ui/views/controls/button/toggle_button.cc
index 30bf562a54887ce6a3b62c24af0408b80104c884..a6be5205a767969e178a80317252c5570eed2793 100644
--- a/ui/views/controls/button/toggle_button.cc
+++ b/ui/views/controls/button/toggle_button.cc
@@ -32,8 +32,64 @@ const int kThumbVerticalMargin = 3;
 const SkColor kTrackOffColor =
     SkColorSetA(SK_ColorBLACK, gfx::kDisabledControlAlpha);
 
+// Paints the circular thumb at |bounds| on |canvas|. The thumb color is set
+// between white and |thumb_on_color| mixed with |ratio|. This utility function
+// is used both whether the thumb is animating or not.
+void PaintThumb(gfx::Canvas* canvas, gfx::Rect bounds, double value,
+                SkColor thumb_on_color) {
+  std::vector<gfx::ShadowValue> shadows;
+  shadows.emplace_back(gfx::Vector2d(0, 1), 4.f,
+                       SkColorSetA(SK_ColorBLACK, 0x99));
+  SkPaint thumb_paint;
+  thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows));
+  thumb_paint.setStyle(SkPaint::kFill_Style);
+  thumb_paint.setAntiAlias(true);
+  // TODO(estade): get this color from the theme?
+  const SkColor thumb_off_color = SK_ColorWHITE;
+  const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * value);
+  thumb_paint.setColor(
+      color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend));
+  canvas->DrawCircle(gfx::RectF(bounds).CenterPoint(),
+                     bounds.height() / 2.f, thumb_paint);
+}
+
 }  // namespace
 
+// Class representing the thumb when ink drop animation is active. In static
+// case the thumb is painted by the ToggleButton. When the thumb is clicked it
+// is separated into its own layer and the ink drop layer is made a child of
+// the thumb layer allowing the two to animate in sync.
+class ToggleButton::ThumbView : public views::View {
+ public:
+  ThumbView(ui::Layer* ink_drop_layer, double value) : value_(value) {
+    SetPaintToLayer(true);
+    layer()->SetFillsBoundsOpaquely(false);
+    layer()->Add(ink_drop_layer);
+  }
+  ~ThumbView() override {}
+
+  void Update(const gfx::Rect& bounds, double value) {
+    SetBoundsRect(bounds);
+    value_ = value;
+    SchedulePaint();
+  }
+
+ private:
+  // views::View:
+  void OnPaint(gfx::Canvas* canvas) override {
+    gfx::Rect thumb_bounds = GetLocalBounds();
+    thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin));
+    const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor(
+        ui::NativeTheme::kColorId_ProminentButtonColor);
+    PaintThumb(canvas, thumb_bounds, value_, thumb_on_color);
+  }
+
+  // Value between 0 and 1 that controls the thumb color.
+  double value_;
+
+  DISALLOW_COPY_AND_ASSIGN(ThumbView);
+};
+
 ToggleButton::ToggleButton(ButtonListener* listener)
     : CustomButton(listener), is_on_(false), slide_animation_(this) {
   slide_animation_.SetSlideDuration(80 /* ms */);
@@ -67,8 +123,8 @@ gfx::Size ToggleButton::GetPreferredSize() const {
 }
 
 void ToggleButton::OnPaint(gfx::Canvas* canvas) {
-  SkAlpha blend =
-      static_cast<SkAlpha>(SK_AlphaOPAQUE * slide_animation_.GetCurrentValue());
+  const double value = slide_animation_.GetCurrentValue();
+  SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * value);
 
   // Track.
   gfx::RectF track_rect(GetContentsBounds());
@@ -82,23 +138,14 @@ void ToggleButton::OnPaint(gfx::Canvas* canvas) {
       color_utils::AlphaBlend(track_on_color, kTrackOffColor, blend));
   canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint);
 
-  // Thumb.
+  if (thumb_view_)
+    return;
+
+  // Paint thumb when not animating.
   gfx::Rect thumb_bounds = GetThumbBounds();
-  SkPaint thumb_paint;
-  std::vector<gfx::ShadowValue> shadows;
-  shadows.emplace_back(gfx::Vector2d(0, 1), 4.f,
-                       SkColorSetA(SK_ColorBLACK, 0x99));
-  thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows));
-  thumb_paint.setStyle(SkPaint::kFill_Style);
-  thumb_paint.setAntiAlias(true);
   const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor(
       ui::NativeTheme::kColorId_ProminentButtonColor);
-  // TODO(estade): get this color from the theme?
-  const SkColor thumb_off_color = SK_ColorWHITE;
-  thumb_paint.setColor(
-      color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend));
-  canvas->DrawCircle(gfx::RectF(thumb_bounds).CenterPoint(),
-                     thumb_bounds.height() / 2.f, thumb_paint);
+  PaintThumb(canvas, thumb_bounds, value, thumb_on_color);
 }
 
 void ToggleButton::NotifyClick(const ui::Event& event) {
@@ -110,8 +157,26 @@ void ToggleButton::OnNativeThemeChanged(const ui::NativeTheme* theme) {
   SchedulePaint();
 }
 
+void ToggleButton::AddInkDropLayer(ui::Layer* ink_drop_layer) {
+  CustomButton::AddInkDropLayer(ink_drop_layer);
+  thumb_view_.reset(
+      new ToggleButton::ThumbView(ink_drop_layer,

[Evan Stade, 2016/10/12 00:46:55]

I was kind of expecting the thumb to just always be a child view.

[varkha, 2016/10/12 01:52:41]

Done.

+                                  slide_animation_.GetCurrentValue()));
+  AddChildView(thumb_view_.get());
+  gfx::Rect thumb_bounds = GetThumbBounds();
+  thumb_bounds.Inset(gfx::Insets(-kThumbVerticalMargin));
+  thumb_view_->SetBoundsRect(thumb_bounds);
+}
+
+void ToggleButton::RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
+  thumb_view_->layer()->Remove(ink_drop_layer);
+  thumb_view_.reset();
+  SchedulePaint();
+}
+
 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const {
-  return CreateDefaultInkDropRipple(GetThumbBounds().CenterPoint());
+  const int radius = (kTrackHeight + kTrackVerticalMargin * 2) / 2;
+  return CreateDefaultInkDropRipple(gfx::Point(radius, radius));
 }
 
 SkColor ToggleButton::GetInkDropBaseColor() const {
@@ -126,10 +191,16 @@ bool ToggleButton::ShouldShowInkDropHighlight() const {
 }
 
 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) {
-  if (animation == &slide_animation_)
+  if (animation == &slide_animation_) {
+    if (thumb_view_) {
+      gfx::Rect thumb_bounds = GetThumbBounds();
+      thumb_bounds.Inset(gfx::Insets(-kThumbVerticalMargin));
+      thumb_view_->Update(thumb_bounds, slide_animation_.GetCurrentValue());
+    }
     SchedulePaint();
-  else
+  } else {
     CustomButton::AnimationProgressed(animation);
+  }
 }
 
 gfx::Rect ToggleButton::GetThumbBounds() const {