MacViews: Overlay Scrollbars with Show/Hide Animations

ui/views/controls/scrollbar/cocoa_scroll_bar.mm

+// Copyright 2013 The Chromium Authors. All rights reserved.

[tapted, 2016/02/17 08:46:20]

2016

[spqchan, 2016/02/19 00:14:03]

Done.

+// 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/cocoa_scroll_bar.h"

[tapted, 2016/02/17 08:46:21]

nit:import

[spqchan, 2016/02/19 00:14:03]

Done.

+
+#import "base/mac/sdk_forward_declarations.h"
+#include "third_party/skia/include/core/SkColor.h"
+#include "third_party/skia/include/effects/SkGradientShader.h"
+#include "ui/compositor/layer.h"
+#include "ui/compositor/layer_animator.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
+#include "ui/gfx/canvas.h"
+#include "ui/views/controls/scrollbar/base_scroll_bar_thumb.h"
+
+namespace views {
+
+namespace {
+
+// The length of the fade animation.
+const int kFadeDurationMs = 240;
+
+// How long we should wait before hiding the scrollbar.
+const int kScrollbarHideTimeoutMs = 500;
+
+// The width of the scrollbar.
+const int kScrollbarWidth = 15;
+
+// The width of the scrollbar thumb.
+const int kScrollbarThumbWidth = 10;
+
+// The width of the scroller track border.
+const int kScrollerTrackBorderWidth = 1;
+
+// The amount the thumb is inset from both the ends and the sides of the track.
+const int kScrollbarThumbInset = 3;
+
+// Scrollbar thumb color.
+const SkColor kScrollerThumbColor = SkColorSetARGB(0x38, 0, 0, 0);

[tapted, 2016/02/17 08:46:20]

I think we've lost the Hover color - SkColorSetARGB(0x80, 0, 0, 0);  This seems
to be more noticeable for the overlay style, since thumbs in overlay style seem
to always draw as if they are hovered (i.e. darker), currently they are too
light.

If you want to defer the hover-changes-colour logic to a follow-up we should
maybe start with the darker style, since it seems quite light.

[spqchan, 2016/02/19 00:14:03]

Ah I see what you mean. The color is darker in Overlay style and if it's hovered
in Legacy. 
The logic for it is fairly simple, so it shouldn't hurt adding it to this CL. I
updated OnPaint on the CocoaScrollbarThumb

+
+// Scroller track colors.
+const SkColor kScrollerTrackGradientColors[] = {
+    SkColorSetRGB(0xEF, 0xEF, 0xEF),
+    SkColorSetRGB(0xF9, 0xF9, 0xF9),
+    SkColorSetRGB(0xFD, 0xFD, 0xFD),
+    SkColorSetRGB(0xF6, 0xF6, 0xF6) };
+const SkColor kScrollerTrackInnerBorderColor = SkColorSetRGB(0xE4, 0xE4, 0xE4);
+const SkColor kScrollerTrackOuterBorderColor = SkColorSetRGB(0xEF, 0xEF, 0xEF);
+
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBarThumb
+
+class CocoaScrollBarThumb : public BaseScrollBarThumb {
+ public:
+  explicit CocoaScrollBarThumb(CocoaScrollBar* scroll_bar);
+  ~CocoaScrollBarThumb() override;
+
+ protected:
+  // View overrides:
+  gfx::Size GetPreferredSize() const override;
+  void OnPaint(gfx::Canvas* canvas) override;
+  void OnMouseEntered(const ui::MouseEvent& event) override;
+  void OnMouseExited(const ui::MouseEvent& event) override;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(CocoaScrollBarThumb);
+};
+
+CocoaScrollBarThumb::CocoaScrollBarThumb(CocoaScrollBar* scroll_bar)
+    : BaseScrollBarThumb(scroll_bar) {
+  // This is necessary, otherwise the thumb will be rendered below the views if
+  // those views paint to their own layers.
+  SetPaintToLayer(true);
+  SetFillsBoundsOpaquely(false);
+}
+
+CocoaScrollBarThumb::~CocoaScrollBarThumb() {}
+
+gfx::Size CocoaScrollBarThumb::GetPreferredSize() const {
+  return gfx::Size(kScrollbarThumbWidth, kScrollbarThumbWidth);
+}
+
+void CocoaScrollBarThumb::OnPaint(gfx::Canvas* canvas) {
+  gfx::Rect local_bounds(GetLocalBounds());
+  SkPaint paint;

[tapted, 2016/02/17 08:46:20]

paint.setAntiAlias(true); after this (it's easier to spot on a non-retina screen
:)

[spqchan, 2016/02/19 00:14:03]

Done.

+  paint.setStyle(SkPaint::kFill_Style);
+  paint.setColor(kScrollerThumbColor);
+  const SkScalar radius = std::min(local_bounds.width(), local_bounds.height());
+  canvas->DrawRoundRect(local_bounds, radius, paint);
+}
+
+void CocoaScrollBarThumb::OnMouseEntered(const ui::MouseEvent& event) {
+  BaseScrollBarThumb::OnMouseEntered(event);
+  CocoaScrollBar* scrollbar = static_cast<CocoaScrollBar*>(scroll_bar());
+  scrollbar->OnMouseEnteredScrollbarThumb(event);
+}
+
+void CocoaScrollBarThumb::OnMouseExited(const ui::MouseEvent& event) {
+  BaseScrollBarThumb::OnMouseExited(event);
+  CocoaScrollBar* scrollbar = static_cast<CocoaScrollBar*>(scroll_bar());
+  scrollbar->OnMouseExitedScrollbarThumb(event);
+}
+
+}  // namespace
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar class
+
+CocoaScrollBar::CocoaScrollBar(bool horizontal)
+    : BaseScrollBar(horizontal, new CocoaScrollBarThumb(this)),
+      is_hovering_(false) {
+  bridge_.reset([[ViewsScrollbarBridge alloc] init]);
+  [bridge_ setDelegate:this];
+
+  scroller_style_ = [ViewsScrollbarBridge getPreferredScrollerStyle];
+
+  SetPaintToLayer(true);
+  has_scrolltrack_ = scroller_style_ == NSScrollerStyleLegacy;
+  layer()->SetOpacity(scroller_style_ == NSScrollerStyleOverlay ? 0.0 : 1.0);
+}
+
+CocoaScrollBar::~CocoaScrollBar() {
+  [bridge_ setDelegate:nullptr];
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar, BaseScrollBar:
+
+gfx::Rect CocoaScrollBar::GetTrackBounds() const {
+  gfx::Rect local_bounds(GetLocalBounds());
+  local_bounds.Inset(kScrollbarThumbInset, kScrollbarThumbInset);
+
+  gfx::Size track_size = local_bounds.size();
+  track_size.SetToMax(GetThumb()->size());
+  local_bounds.set_size(track_size);
+  return local_bounds;
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar, ScrollBar:
+
+int CocoaScrollBar::GetLayoutSize() const {
+  return scroller_style_ == NSScrollerStyleOverlay ? 0 : kScrollbarWidth;
+}
+
+int CocoaScrollBar::GetContentOverlapSize() const {
+  return scroller_style_ == NSScrollerStyleLegacy ? 0 : kScrollbarWidth;
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar::Views:
+
+gfx::Size CocoaScrollBar::GetPreferredSize() const {
+  return gfx::Size();
+}
+
+void CocoaScrollBar::OnPaint(gfx::Canvas* canvas) {
+  if (!has_scrolltrack_)
+    return;
+
+  // Paint the scrollbar track background.
+  gfx::Rect track_rect = GetLocalBounds();
+
+  SkPoint gradient_bounds[2];
+  if (IsHorizontal()) {
+    gradient_bounds[0].set(track_rect.x(), track_rect.y());
+    gradient_bounds[1].set(track_rect.x(), track_rect.bottom());
+  } else {
+    gradient_bounds[0].set(track_rect.x(), track_rect.y());
+    gradient_bounds[1].set(track_rect.right(), track_rect.y());
+  }
+  skia::RefPtr<SkShader> shader = skia::AdoptRef(
+      SkGradientShader::CreateLinear(gradient_bounds,
+                                     kScrollerTrackGradientColors,
+                                     NULL,

[tapted, 2016/02/17 08:46:20]

nit: nullptr

[spqchan, 2016/02/19 00:14:02]

Done.

+                                     arraysize(kScrollerTrackGradientColors),
+                                     SkShader::kClamp_TileMode));
+  SkPaint gradient;
+  gradient.setShader(shader.get());
+  canvas->DrawRect(track_rect, gradient);
+
+  // Draw the inner border: top if horizontal, left if vertical.
+  SkPaint paint;
+  paint.setColor(kScrollerTrackInnerBorderColor);
+  gfx::Rect inner_border(track_rect);
+  if (IsHorizontal())
+    inner_border.set_height(kScrollerTrackBorderWidth);
+  else
+    inner_border.set_width(kScrollerTrackBorderWidth);
+  canvas->DrawRect(inner_border, paint);
+
+  // Draw the outer border: bottom if horizontal, right if veritcal.
+  paint.setColor(kScrollerTrackOuterBorderColor);
+  gfx::Rect outer_border(inner_border);
+  if (IsHorizontal())
+    outer_border.set_y(track_rect.bottom());
+  else
+    outer_border.set_x(track_rect.right());
+  canvas->DrawRect(outer_border, paint);
+}
+
+void CocoaScrollBar::OnMouseEnteredScrollbarThumb(const ui::MouseEvent& event) {
+  if (scroller_style_ != NSScrollerStyleOverlay)
+    return;
+
+  hide_scrollbar_timer_.Stop();
+  is_hovering_ = true;
+  if (layer()->opacity()) {

[tapted, 2016/02/17 08:46:20]

this is subtle.. probably needs a comment, like 
// If an overlay scroller has not yet faded out completely, reshow it when
entering the scroll track to give more time for the user to drag it.

I think we also need a call to ResetTimer() after showing it for this case too,
otherwise it will stick around forever, but that only seems to be the case once
a drag is initiated.

[spqchan, 2016/02/19 00:14:03]

Sure thing. The reason why I didn't put ResetTimer() there originally was
because I didn't want the scrollbars to disappear
when the mouse is still hovering over it. I managed to fix this issue just now
by resetting the timer in HideScrollbar() if the thumb is in a hover or pressed
state.

+    ShowScrollbar();
+  }

[tapted, 2016/02/17 08:46:20]

nit: doesn't need curlies

[spqchan, 2016/02/19 00:14:03]

Done.

+}
+
+void CocoaScrollBar::OnMouseExitedScrollbarThumb(const ui::MouseEvent& event) {
+  if (scroller_style_ != NSScrollerStyleOverlay)
+    return;
+
+  is_hovering_ = false;
+  ResetTimer();
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar::ScrollDelegate:
+
+bool CocoaScrollBar::OnScroll(float dx, float dy) {
+  bool did_scroll = BaseScrollBar::OnScroll(dx, dy);
+  if (did_scroll && scroller_style_ == NSScrollerStyleOverlay) {
+    if (layer()->opacity() < 1.0)

[tapted, 2016/02/17 08:46:20]

is this check needed (can we just always ShowScrollbar()?

[spqchan, 2016/02/19 00:14:03]

This check was needed earlier because of an edge case where the scrolltrack
disappears 
before the rest of the scrollbar fades away. It's no longer necessary due to the
recent changes though, so I'll remove it.

+      ShowScrollbar();
+    ResetTimer();
+  }
+  return did_scroll;
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar::ViewsScrollbarBridge:
+
+void CocoaScrollBar::OnScrollerStyleChanged() {
+  NSScrollerStyle scroller_style =
+      [ViewsScrollbarBridge getPreferredScrollerStyle];
+  if (scroller_style_ == scroller_style)
+    return;
+
+  scroller_style_ = scroller_style;
+
+  // Ensure that the ScrollView updates the scrollbar's layout.
+  if (parent())
+    parent()->Layout();
+
+  if (scroller_style_ == NSScrollerStyleOverlay)
+    HideScrollbar();
+  else
+    ShowScrollbar();
+}
+
+//////////////////////////////////////////////////////////////////
+// CocoaScrollBar, private:
+
+void CocoaScrollBar::HideScrollbar() {
+  ui::ScopedLayerAnimationSettings animation(layer()->GetAnimator());

[tapted, 2016/02/17 08:46:20]

DCHECK in here that the scroller_style_ is overlay style

[spqchan, 2016/02/19 00:14:02]

Done.

+  animation.SetTransitionDuration(
+      base::TimeDelta::FromMilliseconds(kFadeDurationMs));
+  layer()->SetOpacity(0.0);
+}
+
+void CocoaScrollBar::ShowScrollbar() {
+  // Updates the scrolltrack and repaint it, if necessary.
+  bool has_scrolltrack =
+      scroller_style_ == NSScrollerStyleLegacy || is_hovering_;
+  if (has_scrolltrack_ != has_scrolltrack) {
+    has_scrolltrack_ = has_scrolltrack;
+    SchedulePaint();
+  }
+  layer()->SetOpacity(1.0);
+}

[tapted, 2016/02/17 08:46:21]

I think we need to cancel the timer here. E.g. hide_scrollbar_timer_.Stop().
Otherwise it could trigger shortly after the scroller style changes (I could do
this if I really quickly set `Show scroll bars` to `Always` shortly after
scrolling an overlay scroller). There may be other races - I think Timer::Stop()
here will cover them all.

[spqchan, 2016/02/19 00:14:03]

Done.

+
+void CocoaScrollBar::ResetTimer() {
+  if (hide_scrollbar_timer_.IsRunning()) {
+    hide_scrollbar_timer_.Reset();
+  } else {
+    hide_scrollbar_timer_.Start(
+        FROM_HERE, base::TimeDelta::FromMilliseconds(kScrollbarHideTimeoutMs),
+        this, &CocoaScrollBar::HideScrollbar);
+  }
+}
+
+}  // namespace views