Tweaks to ToggleButton details.

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 10 matching lines @@
 const int kTrackWidth = 28;
 // Margins from edge of track to edge of view.
 const int kTrackVerticalMargin = 5;
 const int kTrackHorizontalMargin = 6;
 // Margin from edge of thumb to closest edge of view. Note that the thumb
 // margins must be sufficiently large to allow space for the shadow.
 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 {
+// Class representing the thumb (the circle that slides horizontally).
+class ToggleButton::ThumbView : public InkDropHostView {
  public:
   ThumbView() : color_ratio_(0.) {}
   ~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();
   }
 
+  static gfx::Insets GetShadowInsets() {
+    return gfx::Insets(kShadowBlur) +
+           gfx::Vector2d(kShadowOffsetX, kShadowOffsetY);
+  }
+
  private:
+  static const int kShadowOffsetX = 0;
+  static const int kShadowOffsetY = 1;
+  static const int kShadowBlur = 2;
+
   // 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));
+    shadows.emplace_back(
+        gfx::Vector2d(kShadowOffsetX, kShadowOffsetY), 2 * kShadowBlur,
+        SkColorSetA(GetNativeTheme()->GetSystemColor(
+                        ui::NativeTheme::kColorId_LabelEnabledColor),
+                    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 SkColor thumb_off_color = GetNativeTheme()->GetSystemColor(
+        ui::NativeTheme::kColorId_DialogBackground);
     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);
+
+    gfx::RectF thumb_bounds(GetLocalBounds());
+    thumb_bounds.Inset(GetShadowInsets());
+    thumb_bounds.Inset(gfx::InsetsF(0.5f));
+    gfx::RectF bounds_in_px = thumb_bounds;
+    // We want the circle to have an integer pixel diameter and to be aligned
+    // with pixel boundaries, so we scale dip bounds to pixel bounds, round, and
+    // unscale back to dip bounds.

[sadrul, 2016/10/28 02:58:14]

This is pretty weird. Can you use Canvas::UndoDeviceScaleFactor() and draw in
pixel-space instead?

[Evan Stade, 2016/10/28 17:49:39]

That makes it harder to deal with the shadows, which are defined in DIP and use
integers rather than floats (so it wouldn't work well for dsf 1.5). Shadows
aside, this part doesn't get much less weird when unscaling:

    gfx::RectF thumb_bounds(GetLocalBounds());
    thumb_bounds.Inset(-GetShadowInsets());
    thumb_bounds.Inset(gfx::InsetsF(0.5f));
    // We want the circle to have an integer pixel diameter and to be aligned
    // with pixel boundaries, so we scale dip bounds to pixel bounds and round.
    gfx::ScopedCanvas scoped(canvas);
    float dsf = canvas->UndoDeviceScaleFactor();
    gfx::RectF bounds_in_px = thumb_bounds;
    bounds_in_px.Scale(dsf);
    bounds_in_px = gfx::RectF(gfx::ToEnclosingRect(bounds_in_px));
    canvas->DrawCircle(bounds_in_px.CenterPoint(),
                       bounds_in_px.height() / 2.f, thumb_paint);

[danakj, 2016/10/28 18:44:59]

UndoDSF() mostly lets you round to physical pixels so you don't get unintended
blurriness at scales like 1.5.

[Evan Stade, 2016/10/28 19:22:03]

I don't think that addresses the problem with shadows here. We'd have to scale
the shadow values by the dsf. That's not easy to do.

[sadrul, 2016/10/31 18:28:50]

We avoid going pixel -> dip (and possibly avoid more rounding issues?). I think
that's still better. (You shouldn't need the ScopedCanvas either, since
View::Paint calls OnPaint with a scoped-canvas, so the undoDSF wouldn't affect
other views.) Looks like ShadowValue already has a Scale() method that you would
use. So dealing with shadows shouldn't be bad either?

[sadrul, 2016/10/31 18:28:50]

Can you clarify why scaling the shadow values is hard?

[Evan Stade, 2016/11/01 16:26:22]

mainly because of a lack of awareness of ShadowValue::Scale :)

[Evan Stade, 2016/11/01 16:26:22]

Done.

+    bounds_in_px.Scale(canvas->image_scale());
+    gfx::RectF bounds_in_dip(gfx::ToEnclosingRect(bounds_in_px));
+    bounds_in_dip.Scale(1.f / canvas->image_scale());
+    canvas->DrawCircle(bounds_in_dip.CenterPoint(),
+                       bounds_in_dip.height() / 2.f, thumb_paint);
   }
 
   // Color ratio between 0 and 1 that controls the thumb color.
   double color_ratio_;
 
   DISALLOW_COPY_AND_ASSIGN(ThumbView);
 };
 
 // static
 const char ToggleButton::kViewClassName[] = "ToggleButton";
 
 ToggleButton::ToggleButton(ButtonListener* listener)
     : CustomButton(listener),
       is_on_(false),
       slide_animation_(this),
-      thumb_view_(new ToggleButton::ThumbView()) {
+      thumb_view_(new ThumbView()) {
   slide_animation_.SetSlideDuration(80 /* ms */);
   slide_animation_.SetTweenType(gfx::Tween::LINEAR);
   SetBorder(Border::CreateEmptyBorder(
       gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin)));
-  AddChildView(thumb_view_.get());
+  AddChildView(thumb_view_);
   SetInkDropMode(InkDropMode::ON);
   set_has_ink_drop_action_on_click(true);
 }
 
 ToggleButton::~ToggleButton() {
   // Destroying ink drop early allows ink drop layer to be properly removed,
   SetInkDropMode(InkDropMode::OFF);
 }
 
 void ToggleButton::SetIsOn(bool is_on, bool animate) {
@@ skipping 11 matching lines @@
 
 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));
+  thumb_bounds.Inset(-ThumbView::GetShadowInsets());
   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());
+  thumb_view_->Update(GetThumbBounds(), slide_animation_.GetCurrentValue());
+}
+
+SkColor ToggleButton::GetTrackColor(bool is_on) const {
+  const SkAlpha kOffTrackAlpha = 0x29;
+  const SkAlpha kOnTrackAlpha = kOffTrackAlpha * 2;
+  ui::NativeTheme::ColorId color_id =
+      is_on ? ui::NativeTheme::kColorId_ProminentButtonColor
+            : ui::NativeTheme::kColorId_LabelEnabledColor;
+  return SkColorSetA(GetNativeTheme()->GetSystemColor(color_id),
+                     is_on ? kOnTrackAlpha : kOffTrackAlpha);
 }
 
 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 kViewClassName;
 }
 
 void ToggleButton::OnPaint(gfx::Canvas* canvas) {
   // Paint the toggle 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);
   const double color_ratio = slide_animation_.GetCurrentValue();
   track_paint.setColor(color_utils::AlphaBlend(
-      track_on_color, kTrackOffColor,
+      GetTrackColor(true), GetTrackColor(false),
       static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio)));
   canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint);
 }
 
 void ToggleButton::NotifyClick(const ui::Event& event) {
   SetIsOn(!is_on(), true);
   CustomButton::NotifyClick(event);
 }
 
 void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) {
@@ skipping 14 matching lines @@
   thumb_view_->RemoveInkDropLayer(ink_drop_layer);
   SchedulePaint();
 }
 
 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const {
   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;
+  return GetTrackColor(is_on());
 }
 
 bool ToggleButton::ShouldShowInkDropHighlight() const {
   return false;
 }
 
 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) {
   if (animation == &slide_animation_) {
     // TODO(varkha, estade): The thumb is using its own view. Investigate if
     // repainting in every animation step to update colors could be avoided.
     UpdateThumb();
     SchedulePaint();
     return;
   }
   CustomButton::AnimationProgressed(animation);
 }
 
 }  // namespace views