Update scroll bar in 6+ login view to match the mocks.

Update color of scroll bar and make the edges of scroll thumb rounded.
Show scroll bar only upon hover.

Bug: 792742
Change-Id: I80f88e9e0ffe16202401e385593bcc736840a2f2
Reviewed-on: https://chromium-review.googlesource.com/887249
Commit-Queue: Aga Wronska <agawronska@chromium.org>
Reviewed-by: Jacob Dufault <jdufault@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532444}

ash/login/ui/scrollable_users_list_view.cc

@@ -4,6 +4,7 @@
 
 #include "ash/login/ui/scrollable_users_list_view.h"
 
+#include "ash/login/ui/hover_notifier.h"
 #include "ash/login/ui/layout_util.h"
 #include "ash/login/ui/login_display_style.h"
 #include "ash/login/ui/login_user_view.h"
@@ -16,6 +17,8 @@
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_analysis.h"
 #include "ui/gfx/color_utils.h"
+#include "ui/views/controls/scrollbar/base_scroll_bar.h"
+#include "ui/views/controls/scrollbar/base_scroll_bar_thumb.h"
 #include "ui/views/layout/box_layout.h"
 
 namespace ash {
@@ -43,8 +46,65 @@ constexpr int kExtraSmallVerticalDistanceBetweenUsersDp = 32;
 // small display style.
 constexpr int kExtraSmallGradientHeightDp = 112;
 
+// Thickness of scroll bar thumb.
+constexpr int kScrollThumbThicknessDp = 6;
+// Padding on the right of scroll bar thumb.
+constexpr int kScrollThumbPaddingDp = 8;
+// Radius of the scroll bar thumb.
+constexpr int kScrollThumbRadiusDp = 8;
+// Alpha of scroll bar thumb (17%).
+constexpr int kScrollThumbAlpha = 43;
+
+constexpr const char kScrollableUsersListContentViewName[] =
+    "ScrollableUsersListContent";
+
+class ScrollBarThumb : public views::BaseScrollBarThumb {
+ public:
+  explicit ScrollBarThumb(views::BaseScrollBar* scroll_bar)
+      : BaseScrollBarThumb(scroll_bar){};
+  ~ScrollBarThumb() override = default;
+
+  // views::BaseScrollBarThumb:
+  gfx::Size CalculatePreferredSize() const override {
+    return gfx::Size(kScrollThumbThicknessDp, kScrollThumbThicknessDp);
+  };
+
+  void OnPaint(gfx::Canvas* canvas) override {
+    cc::PaintFlags fill_flags;
+    fill_flags.setStyle(cc::PaintFlags::kFill_Style);
+    fill_flags.setColor(SkColorSetA(SK_ColorWHITE, kScrollThumbAlpha));
+    canvas->DrawRoundRect(GetLocalBounds(), kScrollThumbRadiusDp, fill_flags);
+  };
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(ScrollBarThumb);
+};
+
 }  // namespace
 
+class ScrollBar : public views::BaseScrollBar {
+ public:
+  explicit ScrollBar(bool horizontal) : BaseScrollBar(horizontal) {
+    SetThumb(new ScrollBarThumb(this));
+  };
+
+  ~ScrollBar() override = default;
+
+  // views::BaseScrollBar:
+  gfx::Rect GetTrackBounds() const override { return GetLocalBounds(); }
+
+  bool OverlapsContent() const override { return true; };
+
+  int GetThickness() const override {
+    return kScrollThumbThicknessDp + kScrollThumbPaddingDp;
+  };
+
+  void SetThumbVisible(bool visible) { GetThumb()->SetVisible(visible); }
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(ScrollBar);
+};
+
 ScrollableUsersListView::TestApi::TestApi(ScrollableUsersListView* view)
     : view_(view) {}
 
@@ -63,7 +123,7 @@ ScrollableUsersListView::ScrollableUsersListView(
   layout_params_ = GetLayoutParams(display_style);
   gradient_params_ = GetGradientParams(display_style);
 
-  auto* contents = new NonAccessibleView();
+  auto* contents = new NonAccessibleView(kScrollableUsersListContentViewName);
   layout_ = contents->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::kVertical, gfx::Insets(),
       layout_params_.between_child_spacing));
@@ -84,6 +144,15 @@ ScrollableUsersListView::ScrollableUsersListView(
 
   SetContents(contents);
   SetBackgroundColor(SK_ColorTRANSPARENT);
+  set_draw_overflow_indicator(false);
+
+  scroll_bar_ = new ScrollBar(false);
+  SetVerticalScrollBar(scroll_bar_);
+  SetHorizontalScrollBar(new ScrollBar(true));
+
+  hover_notifier_ = std::make_unique<HoverNotifier>(
+      this, base::BindRepeating(&ScrollableUsersListView::OnHover,
+                                base::Unretained(this)));
 }
 
 ScrollableUsersListView::~ScrollableUsersListView() = default;
@@ -114,6 +183,8 @@ void ScrollableUsersListView::Layout() {
                  parent_height);
   }
   ScrollView::Layout();
+  if (scroll_bar_)
+    scroll_bar_->SetThumbVisible(IsMouseHovered());
 }
 
 void ScrollableUsersListView::OnPaintBackground(gfx::Canvas* canvas) {
@@ -137,6 +208,10 @@ void ScrollableUsersListView::OnPaintBackground(gfx::Canvas* canvas) {
   canvas->DrawRect(GetLocalBounds(), flags);
 }
 
+void ScrollableUsersListView::OnHover(bool has_hover) {
+  scroll_bar_->SetThumbVisible(has_hover);
+}
+
 ScrollableUsersListView::LayoutParams ScrollableUsersListView::GetLayoutParams(
     LoginDisplayStyle style) {
   switch (style) {

ash/login/ui/scrollable_users_list_view.h

@@ -20,7 +20,9 @@ class BoxLayout;
 
 namespace ash {
 
+class HoverNotifier;
 class LoginUserView;
+class ScrollBar;
 
 // Scrollable list of the users. Stores the list of login user views. Can be
 // styled with GradientParams that define gradient tinting at the top and at the
@@ -77,6 +79,9 @@ class ASH_EXPORT ScrollableUsersListView : public views::ScrollView {
     gfx::Insets insets_portrait;
   };
 
+  // Updates visibility of scroll bar thumb. Called when hover state changes.
+  void OnHover(bool has_hover);
+
   // Returns parameters of the layout for given display |style|.
   LayoutParams GetLayoutParams(LoginDisplayStyle style);
   // Returns parameters of the gradient for given display |style|.
@@ -84,8 +89,13 @@ class ASH_EXPORT ScrollableUsersListView : public views::ScrollView {
 
   views::BoxLayout* layout_ = nullptr;
 
+  // Owned by ScrollView.
+  ScrollBar* scroll_bar_ = nullptr;
+
   std::vector<LoginUserView*> user_views_;
 
+  std::unique_ptr<HoverNotifier> hover_notifier_;
+
   GradientParams gradient_params_;
   LayoutParams layout_params_;