Unified: Change stacked notification counter color

After trial, UX decided to change the color of stacked notification
counter.

TEST=manual
BUG=876469

Change-Id: I8492716588048d74b8bdbea611e580fb35701556
Reviewed-on: https://chromium-review.googlesource.com/1184735Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Tetsui Ohkubo <tetsui@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585352}

ash/system/tray/tray_constants.h

@@ -176,7 +176,9 @@ constexpr int kStackingNotificationCounterStartX = 18;
 constexpr int kStackingNotificationCounterDistanceX = 10;
 constexpr int kStackingNotificationCounterHeight = 20;
 constexpr SkColor kStackingNotificationCounterColor =
-    SkColorSetRGB(0xeb, 0xea, 0xed);
+    SkColorSetRGB(0x5f, 0x63, 0x68);
+constexpr SkColor kStackingNotificationCounterBorderColor =
+    SkColorSetRGB(0xe0, 0xe0, 0xe0);
 
 // Size of an icon drawn inside top shortcut buttons.
 // A dark disc with |kTrayItemSize| diameter is drawn in the background.

ash/system/unified/unified_message_center_view.cc

@@ -13,9 +13,11 @@
 #include "ui/gfx/canvas.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"
 #include "ui/message_center/views/message_view.h"
 #include "ui/message_center/views/message_view_factory.h"
 #include "ui/message_center/views/notification_control_buttons_view.h"
+#include "ui/views/border.h"
 #include "ui/views/controls/scroll_view.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/widget/widget.h"
@@ -33,7 +35,10 @@ const int kMaxVisibleNotifications = 100;
 
 }  // namespace
 
-StackingNotificationCounterView::StackingNotificationCounterView() = default;
+StackingNotificationCounterView::StackingNotificationCounterView() {
+  SetBorder(views::CreateSolidSidedBorder(
+      0, 0, 1, 0, kStackingNotificationCounterBorderColor));
+}
 
 StackingNotificationCounterView::~StackingNotificationCounterView() = default;
 
@@ -48,15 +53,25 @@ void StackingNotificationCounterView::OnPaint(gfx::Canvas* canvas) {
   const int y = kStackingNotificationCounterHeight / 2;
 
   cc::PaintFlags flags;
-  flags.setColor(kStackingNotificationCounterColor);
+  flags.setColor(message_center::kNotificationBackgroundColor);
   flags.setStyle(cc::PaintFlags::kFill_Style);
   flags.setAntiAlias(true);
 
+  SkPath background_path;
+  SkScalar top_radius = SkIntToScalar(kUnifiedTrayCornerRadius);
+  SkScalar radii[8] = {top_radius, top_radius, top_radius, top_radius,
+                       0,          0,          0,          0};
+  background_path.addRoundRect(gfx::RectToSkRect(GetLocalBounds()), radii);
+  canvas->DrawPath(background_path, flags);
+
+  flags.setColor(kStackingNotificationCounterColor);
   for (int i = 0; i < stacking_count_; ++i) {
     canvas->DrawCircle(gfx::Point(x, y), kStackingNotificationCounterRadius,
                        flags);
     x += kStackingNotificationCounterDistanceX;
   }
+
+  views::View::OnPaint(canvas);
 }
 
 // UnifiedMessageCenterView