Implement scroll shadow on MessageCenterView.

When MessageCenterView can be scrolled, the 2dp scroll shadow is
displayed at the bottom.

The shadow is displayed over notifications on MessageCenterView.

If MessageCenterView is all scrolled, the shadow is hidden.

BUG=779880

Change-Id: I48fdb3e97c57075114ba4210cea40039c295a6d7
Reviewed-on: https://chromium-review.googlesource.com/923244
Commit-Queue: Megumi Hattori <megumihattori@google.com>
Reviewed-by: Yoshiki Iguchi <yoshiki@chromium.org>
Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537711}

ash/message_center/message_center_view.cc

@@ -22,11 +22,13 @@
 #include "build/build_config.h"
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/paint_recorder.h"
 #include "ui/gfx/animation/slide_animation.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/geometry/rect.h"
 #include "ui/gfx/geometry/size.h"
+#include "ui/gfx/skia_paint_util.h"
 #include "ui/message_center/message_center.h"
 #include "ui/message_center/message_center_types.h"
 #include "ui/message_center/public/cpp/message_center_constants.h"
@@ -62,6 +64,9 @@ namespace {
 constexpr int kMinScrollViewHeight = 77;
 constexpr int kEmptyViewHeight = 96;
 constexpr gfx::Insets kEmptyViewPadding(0, 0, 24, 0);
+constexpr int kScrollShadowOffsetY = -2;
+constexpr int kScrollShadowBlur = 2;
+constexpr SkColor kScrollShadowColor = SkColorSetA(SK_ColorBLACK, 0x24);
 
 void SetViewHierarchyEnabled(views::View* view, bool enabled) {
   for (int i = 0; i < view->child_count(); i++)
@@ -105,7 +110,8 @@ views::View* CreateEmptyNotificationView() {
 
 class MessageCenterScrollView : public views::ScrollView {
  public:
-  MessageCenterScrollView() = default;
+  MessageCenterScrollView(MessageCenterView* owner) : owner_(owner) {}
+  ~MessageCenterScrollView() override = default;
 
  private:
   // views::View:
@@ -115,9 +121,62 @@ class MessageCenterScrollView : public views::ScrollView {
         l10n_util::GetStringUTF16(IDS_ASH_MESSAGE_CENTER_FOOTER_TITLE));
   }
 
+  // views::ScrollBarController:
+  void ScrollToPosition(views::ScrollBar* source, int position) override {
+    views::ScrollView::ScrollToPosition(source, position);
+    owner_->UpdateScrollerShadowVisibility();
+  }
+
+  MessageCenterView* const owner_;
+
   DISALLOW_COPY_AND_ASSIGN(MessageCenterScrollView);
 };
 
+// A view that displays a shadow at the bottom when |scroller_| is bounded.
+class ScrollShadowView : public views::View {
+ public:
+  ScrollShadowView(int max_scroll_view_height, int button_height)
+      : max_scroll_view_height_(max_scroll_view_height),
+        button_height_(button_height) {
+    SetPaintToLayer();
+    layer()->SetFillsBoundsOpaquely(false);
+  }
+  ~ScrollShadowView() override = default;
+
+ protected:
+  void PaintChildren(const views::PaintInfo& paint_info) override {
+    views::View::PaintChildren(paint_info);
+
+    if (height() != max_scroll_view_height_)
+      return;
+
+    // Draw a shadow at the bottom of the viewport when scrolled.
+    DrawShadow(paint_info.context(),
+               gfx::Rect(0, height(), width(), button_height_));
+  }
+
+ private:
+  // Draws a drop shadow above |shadowed_area|.
+  void DrawShadow(const ui::PaintContext& context,
+                  const gfx::Rect& shadowed_area) {
+    ui::PaintRecorder recorder(context, size());
+    gfx::Canvas* canvas = recorder.canvas();
+    cc::PaintFlags flags;
+    gfx::ShadowValues shadow;
+    shadow.emplace_back(gfx::Vector2d(0, kScrollShadowOffsetY),
+                        kScrollShadowBlur, kScrollShadowColor);
+    flags.setLooper(gfx::CreateShadowDrawLooper(shadow));
+    flags.setAntiAlias(true);
+    canvas->ClipRect(shadowed_area, SkClipOp::kDifference);
+    canvas->DrawRect(shadowed_area, flags);
+  }
+
+  const int max_scroll_view_height_;
+  const int button_height_;
+
+  DISALLOW_COPY_AND_ASSIGN(ScrollShadowView);
+};
+
 }  // namespace
 
 // MessageCenterView ///////////////////////////////////////////////////////////
@@ -145,12 +204,16 @@ MessageCenterView::MessageCenterView(
   button_bar_->SetCloseAllButtonEnabled(false);
 
   const int button_height = button_bar_->GetPreferredSize().height();
+  const int max_scroll_view_height = max_height - button_height;
+
+  scroller_shadow_ =
+      new ScrollShadowView(max_scroll_view_height, button_height);
 
-  scroller_ = new MessageCenterScrollView();
+  scroller_ = new MessageCenterScrollView(this);
   // Need to set the transparent background explicitly, since ScrollView has
   // set the default opaque background color.
   scroller_->SetBackgroundColor(SK_ColorTRANSPARENT);
-  scroller_->ClipHeightTo(kMinScrollViewHeight, max_height - button_height);
+  scroller_->ClipHeightTo(kMinScrollViewHeight, max_scroll_view_height);
   scroller_->SetVerticalScrollBar(new views::OverlayScrollBar(false));
   scroller_->SetHorizontalScrollBar(new views::OverlayScrollBar(true));
 
@@ -180,6 +243,7 @@ MessageCenterView::MessageCenterView(
 
   AddChildView(no_notifications_view_);
   AddChildView(scroller_);
+  AddChildView(scroller_shadow_);
   AddChildView(settings_view_);
   AddChildView(button_bar_);
 
@@ -299,6 +363,13 @@ void MessageCenterView::OnDidChangeFocus(views::View* before,
   }
 }
 
+void MessageCenterView::UpdateScrollerShadowVisibility() {
+  // |scroller_shadow_| is visible only if |scroller_| is not all scrolled.
+  scroller_shadow_->SetVisible(scroller_->contents()->height() +
+                                   scroller_->contents()->y() !=
+                               scroller_shadow_->height());
+}
+
 void MessageCenterView::Layout() {
   if (is_closing_)
     return;
@@ -312,6 +383,7 @@ void MessageCenterView::Layout() {
   // TODO(tetsui): Fix the bug above without calling SetBounds, as SetBounds
   // invokes Layout() which is a heavy operation.
   scroller_->SetBounds(0, 0, width(), height() - button_height);
+  scroller_shadow_->SetBounds(0, 0, width(), height() - button_height);
   if (settings_view_->visible()) {
     settings_view_->SetBounds(0, height() - settings_height, width(),
                               settings_height);

ash/message_center/message_center_view.h

@@ -75,6 +75,8 @@ class ASH_EXPORT MessageCenterView
   void OnWillChangeFocus(views::View* before, views::View* now) override {}
   void OnDidChangeFocus(views::View* before, views::View* now) override;
 
+  void UpdateScrollerShadowVisibility();
+
   static const size_t kMaxVisibleNotifications;
 
  protected:
@@ -150,6 +152,7 @@ class ASH_EXPORT MessageCenterView
   // Child views.
   views::ScrollView* scroller_ = nullptr;
   std::unique_ptr<MessageListView> message_list_view_;
+  views::View* scroller_shadow_ = nullptr;
   NotifierSettingsView* settings_view_ = nullptr;
   views::View* no_notifications_view_ = nullptr;
   MessageCenterButtonBar* button_bar_ = nullptr;