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

ui/views/controls/button/toggle_button.cc

 // Copyright 2016 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 "ui/views/controls/button/toggle_button.h"
 
 #include "third_party/skia/include/core/SkDrawLooper.h"
 #include "third_party/skia/include/core/SkPaint.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
@@ skipping 16 matching lines @@
 const int kThumbHorizontalMargin = 4;
 // Margin from top/bottom edge of thumb to top/bottom edge of view.
 const int kThumbVerticalMargin = 3;
 
 // TODO(estade): get the base color (black) from the theme?
 const SkColor kTrackOffColor =
     SkColorSetA(SK_ColorBLACK, gfx::kDisabledControlAlpha);
 
 }  // namespace
 
+// Class representing the thumb. 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(views::View* parent) : color_ratio_(0.) {

[sadrul, 2016/10/13 03:30:23]

explicit

Or may be better: AddChild() from the caller, and let ThumbView not have to
worry about it.

[varkha, 2016/10/13 17:04:56]

I like your second choice more. Done.

+    parent->AddChildView(this);
+  }
+  ~ThumbView() override {}
+
+  void AddInkDropLayer(ui::Layer* ink_drop_layer) {
+    SetPaintToLayer(true);
+    layer()->SetFillsBoundsOpaquely(false);
+    layer()->Add(ink_drop_layer);
+  }
+
+  void RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
+    layer()->Remove(ink_drop_layer);
+    SetPaintToLayer(false);
+  }
+
+  void Update(const gfx::Rect& bounds, double color_ratio) {
+    SetBoundsRect(bounds);
+    color_ratio_ = color_ratio;
+    SchedulePaint();
+  }
+
+ private:
+  // views::View:
+  const char* GetClassName() const override {
+    return "ToggleButton::ThumbView";
+  }
+
+  void OnPaint(gfx::Canvas* canvas) override {
+    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);
+    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;
+    const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio_);
+    thumb_paint.setColor(
+        color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend));
+    gfx::Rect thumb_bounds = GetLocalBounds();
+    thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin));
+    canvas->DrawCircle(gfx::RectF(thumb_bounds).CenterPoint(),
+                       thumb_bounds.height() / 2.f, thumb_paint);
+  }
+
+  // Color ratio between 0 and 1 that controls the thumb color.
+  double color_ratio_;
+
+  DISALLOW_COPY_AND_ASSIGN(ThumbView);
+};
+
 ToggleButton::ToggleButton(ButtonListener* listener)
-    : CustomButton(listener), is_on_(false), slide_animation_(this) {
+    : CustomButton(listener),
+      is_on_(false),
+      slide_animation_(this),
+      thumb_view_(new ToggleButton::ThumbView(this)) {
   slide_animation_.SetSlideDuration(80 /* ms */);
   slide_animation_.SetTweenType(gfx::Tween::LINEAR);
   SetBorder(Border::CreateEmptyBorder(
       gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin)));
   SetInkDropMode(InkDropMode::ON);
   set_has_ink_drop_action_on_click(true);
 }
 
-ToggleButton::~ToggleButton() {}
+ToggleButton::~ToggleButton() {
+  thumb_view_.reset();
+}
 
 void ToggleButton::SetIsOn(bool is_on, bool animate) {
   if (is_on_ == is_on)
     return;
 
   is_on_ = is_on;
   if (!animate)
     slide_animation_.Reset(is_on_ ? 1.0 : 0.0);
   else if (is_on_)
     slide_animation_.Show();
   else
     slide_animation_.Hide();
 }
 
 gfx::Size ToggleButton::GetPreferredSize() const {
   gfx::Rect rect(0, 0, kTrackWidth, kTrackHeight);
   if (border())
     rect.Inset(-border()->GetInsets());
   return rect.size();
 }
 
+const char* ToggleButton::GetClassName() const {
+  return "ToggleButton";
+}
+
 void ToggleButton::OnPaint(gfx::Canvas* canvas) {
-  SkAlpha blend =
-      static_cast<SkAlpha>(SK_AlphaOPAQUE * slide_animation_.GetCurrentValue());
+  const double color_ratio = slide_animation_.GetCurrentValue();
+  SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio);
 
   // Track.
   gfx::RectF track_rect(GetContentsBounds());
   SkPaint track_paint;
   track_paint.setAntiAlias(true);
   const SkColor track_on_color =
       SkColorSetA(GetNativeTheme()->GetSystemColor(
                       ui::NativeTheme::kColorId_ProminentButtonColor),
                   0xFF / 2);
   track_paint.setColor(
       color_utils::AlphaBlend(track_on_color, kTrackOffColor, blend));
   canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint);
-
-  // Thumb.
-  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);
 }
 
 void ToggleButton::NotifyClick(const ui::Event& event) {
   SetIsOn(!is_on(), true);
   CustomButton::NotifyClick(event);
 }
 
+void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) {
+  UpdateThumb();
+}
+
 void ToggleButton::OnNativeThemeChanged(const ui::NativeTheme* theme) {
   SchedulePaint();
 }
 
+void ToggleButton::AddInkDropLayer(ui::Layer* ink_drop_layer) {
+  thumb_view_->AddInkDropLayer(ink_drop_layer);
+  UpdateThumb();
+  SchedulePaint();
+}
+
+void ToggleButton::RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
+  thumb_view_->RemoveInkDropLayer(ink_drop_layer);
+  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 {
   return is_on()
              ? GetNativeTheme()->GetSystemColor(
                    ui::NativeTheme::kColorId_ProminentButtonColor)
              : kTrackOffColor;
 }
 
 bool ToggleButton::ShouldShowInkDropHighlight() const {
   return false;
 }
 
 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) {
-  if (animation == &slide_animation_)
+  if (animation == &slide_animation_) {
+    UpdateThumb();
     SchedulePaint();

[sadrul, 2016/10/13 03:30:23]

Now that the thumb is a separate View, it would be nice to not have to re-paint
at each step of the animation. I see that the animation-step affects the
background/thumb colors. Would it be possible to apply some filter on the layers
to get the same visual effect instead? That should give some good perf gain.

[varkha, 2016/10/13 17:04:56]

Acknowledged. Added a TODO for a possible followup.

-  else
-    CustomButton::AnimationProgressed(animation);
+    return;
+  }
+  CustomButton::AnimationProgressed(animation);
 }
 
 gfx::Rect ToggleButton::GetThumbBounds() const {
   gfx::Rect thumb_bounds = GetLocalBounds();
   thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin, kThumbHorizontalMargin));
   thumb_bounds.set_x(thumb_bounds.x() +
                      slide_animation_.GetCurrentValue() *
                          (thumb_bounds.width() - thumb_bounds.height()));
   // The thumb is a circle, so the width should match the height.
   thumb_bounds.set_width(thumb_bounds.height());
   thumb_bounds.set_x(GetMirroredXForRect(thumb_bounds));
   return thumb_bounds;
 }
 
+void ToggleButton::UpdateThumb() {
+  gfx::Rect thumb_bounds = GetThumbBounds();
+  thumb_bounds.Inset(gfx::Insets(-kThumbVerticalMargin));
+  thumb_view_->Update(thumb_bounds, slide_animation_.GetCurrentValue());
+}
+
 }  // namespace views