Implement Sebastien's overlay scrollbars for native UI (Views).

ui/views/controls/scrollbar/overlay_scroll_bar.cc

 // Copyright 2013 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/scrollbar/overlay_scroll_bar.h"
 
 #include "base/macros.h"
 #include "third_party/skia/include/core/SkColor.h"
 #include "third_party/skia/include/core/SkXfermode.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/gfx/canvas.h"
 #include "ui/views/background.h"
 #include "ui/views/border.h"
-#include "ui/views/controls/scrollbar/base_scroll_bar_thumb.h"
 
 namespace views {
 namespace {
 
-const int kScrollbarWidth = 10;
-const int kThumbInsetInside = 3;
-const int kThumbInsetFromEdge = 1;
-const int kThumbCornerRadius = 2;
-const int kThumbMinimumSize = kScrollbarWidth;
-const int kThumbHoverAlpha = 128;
-const int kThumbDefaultAlpha = 64;
+// Total thickness of the thumb (matches visuals when hovered).
+const int kThumbThickness = 11;
+// When unhovered, the thumb is slimmer by this amount of dip.
+const int kThumbUnhoveredDifference = 4;
+const int kThumbStroke = 1;
+const SkAlpha kThumbHoverAlpha = 0x80;    // 0.5
+const SkAlpha kThumbDefaultAlpha = 0x4D;  // 0.3
 
-class OverlayScrollBarThumb : public BaseScrollBarThumb,
-                              public gfx::AnimationDelegate {
- public:
-  explicit OverlayScrollBarThumb(BaseScrollBar* scroll_bar);
-  ~OverlayScrollBarThumb() override;
+}  // namespace
 
- protected:
-  // View overrides:
-  gfx::Size GetPreferredSize() const override;
-  void OnPaint(gfx::Canvas* canvas) override;
-
-  // gfx::AnimationDelegate overrides:
-  void AnimationProgressed(const gfx::Animation* animation) override;
-
- private:
-  double animation_opacity_;
-  DISALLOW_COPY_AND_ASSIGN(OverlayScrollBarThumb);
-};
-
-OverlayScrollBarThumb::OverlayScrollBarThumb(BaseScrollBar* scroll_bar)
+OverlayScrollBar::Thumb::Thumb(OverlayScrollBar* scroll_bar)
     : BaseScrollBarThumb(scroll_bar),
-      animation_opacity_(0.0) {
+      scroll_bar_(scroll_bar),
+      hover_animation_(this) {
   // This is necessary, otherwise the thumb will be rendered below the views if
   // those views paint to their own layers.
   SetPaintToLayer(true);
   layer()->SetFillsBoundsOpaquely(false);
+  layer()->SetOpacity(0);
 }
 
-OverlayScrollBarThumb::~OverlayScrollBarThumb() {
+OverlayScrollBar::Thumb::~Thumb() {}
+
+gfx::Size OverlayScrollBar::Thumb::GetPreferredSize() const {
+  return gfx::Size(kThumbThickness, kThumbThickness);
 }
 
-gfx::Size OverlayScrollBarThumb::GetPreferredSize() const {
-  return gfx::Size(kThumbMinimumSize, kThumbMinimumSize);
+void OverlayScrollBar::Thumb::OnPaint(gfx::Canvas* canvas) {
+  SkAlpha alpha = kThumbHoverAlpha;
+  // If we are in pressed state, no need to worry about animation,
+  // just display the deeper color.
+  if (GetState() != CustomButton::STATE_PRESSED) {
+    alpha = hover_animation_.CurrentValueBetween(kThumbDefaultAlpha,
+                                                 kThumbHoverAlpha);
+  }
+
+  SkPaint fill_paint;
+  fill_paint.setAntiAlias(true);
+  fill_paint.setStyle(SkPaint::kFill_Style);
+  fill_paint.setColor(SkColorSetA(SK_ColorBLACK, alpha));
+  gfx::RectF fill_bounds(GetLocalBounds());
+  const double slimmer_by =
+      hover_animation_.CurrentValueBetween(kThumbUnhoveredDifference, 0);
+  fill_bounds.Inset(gfx::InsetsF(IsHorizontal() ? slimmer_by : 0,
+                                 IsHorizontal() ? 0 : slimmer_by, 0, 0));
+  fill_bounds.Inset(gfx::InsetsF(kThumbStroke, kThumbStroke,
+                                 IsHorizontal() ? 0 : kThumbStroke,
+                                 IsHorizontal() ? kThumbStroke : 0));
+  canvas->DrawRect(fill_bounds, fill_paint);
+
+  SkPaint stroke_paint;
+  stroke_paint.setAntiAlias(true);
+  stroke_paint.setStyle(SkPaint::kFill_Style);
+  stroke_paint.setColor(SkColorSetA(SK_ColorWHITE, alpha));
+  stroke_paint.setStrokeWidth(kThumbStroke);
+  gfx::RectF stroke_bounds(fill_bounds);
+  stroke_bounds.Inset(gfx::InsetsF(-0.5f));
+  // The stroke doesn't apply to the far edge of the thumb.
+  SkPath path;
+  path.moveTo(gfx::PointFToSkPoint(stroke_bounds.top_right()));
+  path.lineTo(gfx::PointFToSkPoint(stroke_bounds.origin()));
+  path.lineTo(gfx::PointFToSkPoint(stroke_bounds.bottom_left()));
+  if (IsHorizontal()) {
+    path.moveTo(gfx::PointFToSkPoint(stroke_bounds.bottom_right()));
+    path.close();
+  } else {
+    path.lineTo(gfx::PointFToSkPoint(stroke_bounds.bottom_right()));
+  }
+  canvas->DrawPath(path, stroke_paint);
 }
 
-void OverlayScrollBarThumb::OnPaint(gfx::Canvas* canvas) {
-  gfx::Rect local_bounds(GetLocalBounds());
-  SkPaint paint;
-  int alpha = kThumbDefaultAlpha * animation_opacity_;
-  if (GetState() == CustomButton::STATE_HOVERED) {
-    alpha = kThumbHoverAlpha * animation_opacity_;
-  } else if(GetState() == CustomButton::STATE_PRESSED) {
-    // If we are in pressed state, no need to worry about animation,
-    // just display the deeper color.
-    alpha = kThumbHoverAlpha;
-  }
-
-  paint.setStyle(SkPaint::kFill_Style);
-  paint.setColor(SkColorSetARGB(alpha, 0, 0, 0));
-  canvas->DrawRoundRect(local_bounds, kThumbCornerRadius, paint);
+void OverlayScrollBar::Thumb::OnBoundsChanged(
+    const gfx::Rect& previous_bounds) {
+  scroll_bar_->ShowThumb();
+  // Don't start the hide countdown if the thumb is still hovered or pressed.
+  if (GetState() == CustomButton::STATE_NORMAL)
+    scroll_bar_->StartThumbHideCountdown();
 }
 
-void OverlayScrollBarThumb::AnimationProgressed(
+void OverlayScrollBar::Thumb::SetState(CustomButton::ButtonState state) {
+  if (state != GetState()) {
+    if (state == CustomButton::STATE_NORMAL) {
+      hover_animation_.Hide();
+      scroll_bar_->StartThumbHideCountdown();
+    } else {
+      hover_animation_.Show();

[sadrul, 2016/11/12 03:01:10]

Since the thumb has a layer, can you just animate the opacity (and scale too, I
guess?) of the layer?

[Evan Stade, 2016/11/14 16:56:07]

I've changed all animations to be applied to layers.

Implementation notes: I can't animate the scale because the stroke is always the
same width (1dp). Also it's difficult to manage two different opacity animations
(the one from 0 to 1 and the one from 0.3 to 0.5). So I added a layer to the bar
in addition to the thumb. The bar's layer clips the thumb while the thumb
translates off the outer edge (effectively growing/shrinking). The bar animates
from 0-1 opacity, the thumb animates from 0.3-0.5.

+    }
+  }
+  BaseScrollBarThumb::SetState(state);
+}
+
+void OverlayScrollBar::Thumb::AnimationProgressed(
     const gfx::Animation* animation) {
-  animation_opacity_ = animation->GetCurrentValue();
   SchedulePaint();
 }
 
-}  // namespace
-
 OverlayScrollBar::OverlayScrollBar(bool horizontal)
-    : BaseScrollBar(horizontal, new OverlayScrollBarThumb(this)),
-      animation_(static_cast<OverlayScrollBarThumb*>(GetThumb())) {
+    : BaseScrollBar(horizontal, new Thumb(this)),
+      thumb_hide_timer_(false, false) {
   set_notify_enter_exit_on_child(true);
 }
 
 OverlayScrollBar::~OverlayScrollBar() {
 }
 
 gfx::Rect OverlayScrollBar::GetTrackBounds() const {
-  gfx::Rect local_bounds(GetLocalBounds());
-  if (IsHorizontal()) {
-    local_bounds.Inset(kThumbInsetFromEdge, kThumbInsetInside,
-                       kThumbInsetFromEdge, kThumbInsetFromEdge);
-  } else {
-    local_bounds.Inset(kThumbInsetInside, kThumbInsetFromEdge,
-                       kThumbInsetFromEdge, kThumbInsetFromEdge);
-  }
-  gfx::Size track_size = local_bounds.size();
-  track_size.SetToMax(GetThumb()->size());
-  local_bounds.set_size(track_size);
-  return local_bounds;
+  return GetLocalBounds();
 }
 
 int OverlayScrollBar::GetLayoutSize() const {
   return 0;
 }
 
 int OverlayScrollBar::GetContentOverlapSize() const {
-  return kScrollbarWidth;
+  return kThumbThickness;
 }
 
-void OverlayScrollBar::OnMouseEnteredScrollView(const ui::MouseEvent& event) {
-  animation_.Show();
+void OverlayScrollBar::OnMouseEntered(const ui::MouseEvent& event) {
+  ShowThumb();
 }
 
-void OverlayScrollBar::OnMouseExitedScrollView(const ui::MouseEvent& event) {
-  animation_.Hide();
+void OverlayScrollBar::OnMouseExited(const ui::MouseEvent& event) {
+  StartThumbHideCountdown();
 }
 
-void OverlayScrollBar::OnGestureEvent(ui::GestureEvent* event) {
-  switch (event->type()) {
-    case ui::ET_GESTURE_SCROLL_BEGIN:
-      animation_.Show();
-      break;
-    case ui::ET_GESTURE_SCROLL_END:
-    case ui::ET_SCROLL_FLING_START:
-    case ui::ET_GESTURE_END:
-      animation_.Hide();
-      break;
-    default:
-      break;
-  }
-  BaseScrollBar::OnGestureEvent(event);
+void OverlayScrollBar::ShowThumb() {
+  GetThumb()->layer()->SetOpacity(1.0f);
+  thumb_hide_timer_.Stop();
+}
+
+void OverlayScrollBar::HideThumb() {
+  ui::ScopedLayerAnimationSettings settings(GetThumb()->layer()->GetAnimator());
+  settings.SetTransitionDuration(base::TimeDelta::FromMilliseconds(200));
+  GetThumb()->layer()->SetOpacity(0.0f);
+}
+
+void OverlayScrollBar::StartThumbHideCountdown() {
+  if (IsMouseHovered())
+    return;
+  thumb_hide_timer_.Start(
+      FROM_HERE, base::TimeDelta::FromSeconds(1),
+      base::Bind(&OverlayScrollBar::HideThumb, base::Unretained(this)));
 }
 
 void OverlayScrollBar::Layout() {
   gfx::Rect thumb_bounds = GetTrackBounds();
   BaseScrollBarThumb* thumb = GetThumb();
   if (IsHorizontal()) {
     thumb_bounds.set_x(thumb->x());
     thumb_bounds.set_width(thumb->width());
   } else {
     thumb_bounds.set_y(thumb->y());
     thumb_bounds.set_height(thumb->height());
   }
   thumb->SetBoundsRect(thumb_bounds);
 }
 
 }  // namespace views