Ash Tray: Add gradient background to status area overflow button.

When the status area overflows and is in the expanded state, we show a gradient
background over the shelf.

Screenshot:
https://screenshot.googleplex.com/5WO6NUnED4m

BUG=1026072

Change-Id: Ia90fb50a85694edba8a22d9a029912c7e1ac80a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1973355
Commit-Queue: Tim Song <tengs@chromium.org>
Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726140}

ash/system/status_area_widget.cc

@@ -180,6 +180,9 @@ void StatusAreaWidget::UpdateCollapseState() {
       tray_button->UpdateAfterStatusAreaCollapseChange();
     }
   }
+
+  status_area_widget_delegate_->OnStatusAreaCollapseStateChanged(
+      collapse_state_);
 }
 
 void StatusAreaWidget::UpdateLayout(bool animate) {

ash/system/status_area_widget_delegate.cc

@@ -16,10 +16,15 @@
 #include "ui/compositor/layer.h"
 #include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/gfx/animation/tween.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/skia_paint_util.h"
 #include "ui/views/accessible_pane_view.h"
+#include "ui/views/background.h"
 #include "ui/views/border.h"
 #include "ui/views/layout/grid_layout.h"
 
+namespace ash {
+
 namespace {
 
 constexpr int kAnimationDurationMs = 250;
@@ -45,9 +50,35 @@ class StatusAreaWidgetDelegateAnimationSettings
   DISALLOW_COPY_AND_ASSIGN(StatusAreaWidgetDelegateAnimationSettings);
 };
 
-}  // namespace
+// Gradient background for the status area shown when it overflows into the
+// shelf.
+class OverflowGradientBackground : public views::Background {
+ public:
+  explicit OverflowGradientBackground(Shelf* shelf) : shelf_(shelf) {}
+  OverflowGradientBackground(const OverflowGradientBackground&) = delete;
+  ~OverflowGradientBackground() override = default;
+  OverflowGradientBackground& operator=(const OverflowGradientBackground&) =
+      delete;
+
+  // views::Background:
+  void Paint(gfx::Canvas* canvas, views::View* view) const override {
+    gfx::Rect bounds = view->GetContentsBounds();
+
+    SkColor shelf_background_color =
+        shelf_->shelf_widget()->GetShelfBackgroundColor();
+
+    cc::PaintFlags flags;
+    flags.setShader(gfx::CreateGradientShader(
+        gfx::Point(), gfx::Point(kStatusAreaOverflowGradientSize, 0),
+        SkColorSetA(shelf_background_color, 0), shelf_background_color));
+    canvas->DrawRect(bounds, flags);
+  }
 
-namespace ash {
+ private:
+  Shelf* shelf_;
+};
+
+}  // namespace
 
 StatusAreaWidgetDelegate::StatusAreaWidgetDelegate(Shelf* shelf)
     : shelf_(shelf), focus_cycler_for_testing_(nullptr) {
@@ -84,6 +115,19 @@ bool StatusAreaWidgetDelegate::ShouldFocusOut(bool reverse) {
          (!reverse && focused_view == GetLastFocusableChild());
 }
 
+void StatusAreaWidgetDelegate::OnStatusAreaCollapseStateChanged(
+    StatusAreaWidget::CollapseState new_collapse_state) {
+  switch (new_collapse_state) {
+    case StatusAreaWidget::CollapseState::EXPANDED:
+      SetBackground(std::make_unique<OverflowGradientBackground>(shelf_));
+      break;
+    case StatusAreaWidget::CollapseState::COLLAPSED:
+    case StatusAreaWidget::CollapseState::NOT_COLLAPSIBLE:
+      SetBackground(nullptr);
+      break;
+  }
+}
+
 views::View* StatusAreaWidgetDelegate::GetDefaultFocusableChild() {
   return default_last_focusable_child_ ? GetLastFocusableChild()
                                        : GetFirstFocusableChild();

ash/system/status_area_widget_delegate.h

@@ -9,6 +9,7 @@
 #include "ash/public/cpp/shelf_config.h"
 #include "ash/public/cpp/shelf_types.h"
 #include "ash/shelf/shelf_layout_manager_observer.h"
+#include "ash/system/status_area_widget.h"
 #include "base/macros.h"
 #include "ui/gfx/image/image_skia.h"
 #include "ui/views/accessible_pane_view.h"
@@ -38,6 +39,10 @@ class ASH_EXPORT StatusAreaWidgetDelegate : public views::AccessiblePaneView,
   // designated focusing direction, otherwise false.
   bool ShouldFocusOut(bool reverse);
 
+  // Called by StatusAreaWidget when its collapse state changes.
+  void OnStatusAreaCollapseStateChanged(
+      StatusAreaWidget::CollapseState new_collapse_state);
+
   // Overridden from views::AccessiblePaneView.
   View* GetDefaultFocusableChild() override;
 

ash/system/tray/status_area_overflow_button_tray.cc

@@ -20,6 +20,8 @@ namespace ash {
 
 namespace {
 constexpr int kAnimationDurationMs = 250;
+constexpr int kTrayWidth = kStatusAreaOverflowButtonSize.width();
+constexpr int kTrayHeight = kStatusAreaOverflowButtonSize.height();
 }  // namespace
 
 StatusAreaOverflowButtonTray::IconView::IconView()
@@ -36,8 +38,8 @@ StatusAreaOverflowButtonTray::IconView::IconView()
       kOverflowShelfRightIcon, ShelfConfig::Get()->shelf_icon_color());
   SetImage(image);
 
-  const int vertical_padding = (kTrayItemSize - image.height()) / 2;
-  const int horizontal_padding = (kTrayItemSize - image.width()) / 2;
+  const int vertical_padding = (kTrayHeight - image.height()) / 2;
+  const int horizontal_padding = (kTrayWidth - image.width()) / 2;
   SetBorder(views::CreateEmptyBorder(
       gfx::Insets(vertical_padding, horizontal_padding)));
 
@@ -77,10 +79,10 @@ void StatusAreaOverflowButtonTray::IconView::UpdateRotation() {
   double progress = slide_animation_->GetCurrentValue();
 
   gfx::Transform transform;
-  double center = kTrayItemSize / 2.0;
-  transform.Translate(gfx::Vector2d(center, center));
+  gfx::Vector2d center(kTrayWidth / 2.0, kTrayHeight / 2.0);
+  transform.Translate(center);
   transform.RotateAboutZAxis(180.0 * progress);
-  transform.Translate(gfx::Vector2d(-center, -center));
+  transform.Translate(gfx::Vector2d(-center.x(), -center.y()));
 
   SetTransform(transform);
 }

ash/system/tray/tray_constants.h

@@ -194,8 +194,11 @@ constexpr int kUnifiedTopShortcutButtonMinSpacing = 4;
 constexpr gfx::Insets kUnifiedDetailedViewTitlePadding(0, 0, 0, 16);
 constexpr int kUnifiedDetailedViewTitleRowHeight = 64;
 
+// Constants used for the status area overflow button and state.
+constexpr gfx::Size kStatusAreaOverflowButtonSize(28, 32);
 constexpr int kStatusAreaLeftPaddingForOverflow = 100;
 constexpr int kStatusAreaForceCollapseAvailableWidth = 200;
+constexpr int kStatusAreaOverflowGradientSize = 24;
 
 }  // namespace ash