Add icons and new behavior of tray notification counter.

- Show number inside a circle icon
- Show plus icon when count is larger than 9

Bug: 845804
Change-Id: Ieed91875573dde0e03c3da50d0787e87142bdb8b
Reviewed-on: https://chromium-review.googlesource.com/1088529
Commit-Queue: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Reviewed-by: Yoshiki Iguchi <yoshiki@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572458}

ash/resources/vector_icons/BUILD.gn

@@ -172,6 +172,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "system_tray_cast.icon",
     "system_tray_do_not_disturb.icon",
     "system_tray_night_light.icon",
+    "system_tray_notification_counter_plus.icon",
     "system_tray_recording.icon",
     "system_tray_rotation_lock_auto.icon",
     "system_tray_rotation_lock_locked.icon",

ash/resources/vector_icons/system_tray_notification_counter_plus.icon

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 9, 9,
+H_LINE_TO, 6,
+R_V_LINE_TO, 2,
+R_H_LINE_TO, 3,
+R_V_LINE_TO, 3,
+R_H_LINE_TO, 2,
+R_V_LINE_TO, -3,
+R_H_LINE_TO, 3,
+V_LINE_TO, 9,
+R_H_LINE_TO, -3,
+V_LINE_TO, 6,
+H_LINE_TO, 9,
+R_V_LINE_TO, 3,
+CLOSE

ash/system/unified/notification_counter_view.cc

@@ -8,15 +8,79 @@
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_utils.h"
 #include "base/i18n/number_formatting.h"
-#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/font_list.h"
+#include "ui/gfx/image/canvas_image_source.h"
 #include "ui/message_center/message_center.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 
 namespace ash {
 
+namespace {
+
+// Maximum count of notification shown by a number label. "+" icon is shown
+// instead if it exceeds this limit.
+constexpr size_t kTrayNotificationMaxCount = 9;
+
+const double kTrayNotificationCircleIconRadius = kTrayIconSize / 2 - 2;
+
+// The size of the number font inside the icon. Should be updated when
+// kTrayIconSize is changed.
+constexpr int kNumberIconFontSize = 11;
+
+gfx::FontList GetNumberIconFontList() {
+  // |kNumberIconFontSize| is hard-coded as 11, which whould be updated when
+  // the tray icon size is changed.
+  DCHECK_EQ(16, kTrayIconSize);
+
+  gfx::Font default_font;
+  int font_size_delta = kNumberIconFontSize - default_font.GetFontSize();
+  gfx::Font font = default_font.Derive(font_size_delta, gfx::Font::NORMAL,
+                                       gfx::Font::Weight::BOLD);
+  DCHECK_EQ(kNumberIconFontSize, font.GetFontSize());
+  return gfx::FontList(font);
+}
+
+class NumberIconImageSource : public gfx::CanvasImageSource {
+ public:
+  NumberIconImageSource(size_t count)
+      : CanvasImageSource(gfx::Size(kTrayIconSize, kTrayIconSize), false),
+        count_(count) {
+    DCHECK_LE(count_, kTrayNotificationMaxCount + 1);
+  }
+
+  void Draw(gfx::Canvas* canvas) override {
+    // Paint the contents inside the circle background. The color doesn't matter
+    // as it will be hollowed out by the XOR operation.
+    if (count_ > kTrayNotificationMaxCount) {
+      canvas->DrawImageInt(
+          gfx::CreateVectorIcon(kSystemTrayNotificationCounterPlusIcon,
+                                size().width(), kTrayIconColor),
+          0, 0);
+    } else {
+      canvas->DrawStringRectWithFlags(
+          base::FormatNumber(count_), GetNumberIconFontList(), kTrayIconColor,
+          gfx::Rect(size()), gfx::Canvas::TEXT_ALIGN_CENTER);
+    }
+    cc::PaintFlags flags;
+    flags.setBlendMode(SkBlendMode::kXor);
+    flags.setAntiAlias(true);
+    flags.setColor(kTrayIconColor);
+    canvas->DrawCircle(gfx::RectF(gfx::SizeF(size())).CenterPoint(),
+                       kTrayNotificationCircleIconRadius, flags);
+  }
+
+ private:
+  size_t count_;
+
+  DISALLOW_COPY_AND_ASSIGN(NumberIconImageSource);
+};
+
+}  // namespace
+
 NotificationCounterView::NotificationCounterView() : TrayItemView(nullptr) {
-  CreateLabel();
+  CreateImageView();
   Update();
 }
 
@@ -25,10 +89,18 @@ NotificationCounterView::~NotificationCounterView() = default;
 void NotificationCounterView::Update() {
   size_t notification_count =
       message_center::MessageCenter::Get()->NotificationCount();
-  SetupLabelForTray(label());
-  label()->SetText(base::FormatNumber(notification_count));
-  SetVisible(notification_count > 0 &&
-             !message_center::MessageCenter::Get()->IsQuietMode());
+  if (notification_count == 0 ||
+      message_center::MessageCenter::Get()->IsQuietMode()) {
+    SetVisible(false);
+    return;
+  }
+  int icon_id = std::min(notification_count, kTrayNotificationMaxCount + 1);
+  if (icon_id != count_for_display_) {
+    image_view()->SetImage(
+        gfx::CanvasImageSource::MakeImageSkia<NumberIconImageSource>(icon_id));
+    count_for_display_ = icon_id;
+  }
+  SetVisible(true);
 }
 
 QuietModeView::QuietModeView() : TrayItemView(nullptr) {

ash/system/unified/notification_counter_view.h

@@ -19,6 +19,12 @@ class NotificationCounterView : public TrayItemView {
   void Update();
 
  private:
+  // The type / number of the icon that is currently set to the image view.
+  // 0 indicates no icon is drawn yet.
+  // 1 through |kTrayNotificationMaxCount| indicates each number icons.
+  // |kTrayNotificationMaxCount| + 1 indicates the plus icon.
+  int count_for_display_ = 0;
+
   DISALLOW_COPY_AND_ASSIGN(NotificationCounterView);
 };