Add notification icons in the message center stacking bar

With this change each notification that is in the message center
but not visible will have an icon representing it in the stacking bar.
The icons are removed as we scroll up through the message center.
If there is not enough space to show all icons there will be a
"+ x" appended after the icons to signify remaining notifications.

Bug: 1002714
Change-Id: I2e7737a4cf0dd145e0868e7fbf11a15be897d51d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1803731
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702203}

ash/BUILD.gn

@@ -753,6 +753,8 @@ component("ash") {
     "system/message_center/notifier_settings_view.h",
     "system/message_center/session_state_notification_blocker.cc",
     "system/message_center/session_state_notification_blocker.h",
+    "system/message_center/stacked_notification_bar.cc",
+    "system/message_center/stacked_notification_bar.h",
     "system/message_center/unified_message_center_bubble.cc",
     "system/message_center/unified_message_center_bubble.h",
     "system/message_center/unified_message_center_view.cc",

ash/system/message_center/stacked_notification_bar.cc

+// Copyright 2019 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.
+
+#include "ash/system/message_center/stacked_notification_bar.h"
+
+#include "ash/public/cpp/ash_features.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/style/default_color_constants.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_utils.h"
+#include "ash/system/unified/rounded_label_button.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
+#include "ui/gfx/canvas.h"
+#include "ui/message_center/public/cpp/message_center_constants.h"
+#include "ui/message_center/vector_icons.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_highlight.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/animation/ink_drop_mask.h"
+#include "ui/views/layout/box_layout.h"
+
+namespace ash {
+
+namespace {
+
+// The "Clear all" button in the stacking notification bar.
+class StackingBarClearAllButton : public views::LabelButton {
+ public:
+  StackingBarClearAllButton(views::ButtonListener* listener,
+                            const base::string16& text)
+      : views::LabelButton(listener, text) {
+    SetEnabledTextColors(kUnifiedMenuButtonColorActive);
+    SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    SetBorder(views::CreateEmptyBorder(gfx::Insets()));
+    label()->SetSubpixelRenderingEnabled(false);
+    label()->SetFontList(views::Label::GetDefaultFontList().Derive(
+        1, gfx::Font::NORMAL, gfx::Font::Weight::MEDIUM));
+    TrayPopupUtils::ConfigureTrayPopupButton(this);
+
+    background_color_ = AshColorProvider::Get()->DeprecatedGetBaseLayerColor(
+        AshColorProvider::BaseLayerType::kTransparentWithoutBlur,
+        kNotificationBackgroundColor);
+  }
+
+  ~StackingBarClearAllButton() override = default;
+
+  // views::LabelButton:
+  gfx::Size CalculatePreferredSize() const override {
+    return gfx::Size(label()->GetPreferredSize().width() +
+                         kStackingNotificationClearAllButtonPadding.width(),
+                     label()->GetPreferredSize().height() +
+                         kStackingNotificationClearAllButtonPadding.height());
+  }
+
+  const char* GetClassName() const override {
+    return "StackingBarClearAllButton";
+  }
+
+  int GetHeightForWidth(int width) const override {
+    return label()->GetPreferredSize().height() +
+           kStackingNotificationClearAllButtonPadding.height();
+  }
+
+  void PaintButtonContents(gfx::Canvas* canvas) override {
+    views::LabelButton::PaintButtonContents(canvas);
+  }
+
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override {
+    auto ink_drop = TrayPopupUtils::CreateInkDrop(this);
+    ink_drop->SetShowHighlightOnFocus(true);
+    ink_drop->SetShowHighlightOnHover(true);
+    return ink_drop;
+  }
+
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override {
+    return TrayPopupUtils::CreateInkDropRipple(
+        TrayPopupInkDropStyle::FILL_BOUNDS, this,
+        GetInkDropCenterBasedOnLastEvent(), background_color_);
+  }
+
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override {
+    return TrayPopupUtils::CreateInkDropHighlight(
+        TrayPopupInkDropStyle::FILL_BOUNDS, this, background_color_);
+  }
+
+  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
+    SkScalar top_radius = SkIntToScalar(kUnifiedTrayCornerRadius);
+    SkRect bounds = gfx::RectToSkRect(GetContentsBounds());
+    SkPath path;
+
+    if (base::i18n::IsRTL()) {
+      SkScalar radii[8] = {top_radius, top_radius, 0, 0, 0, 0, 0, 0};
+      path.addRoundRect(bounds, radii);
+    } else {
+      SkScalar radii[8] = {0, 0, top_radius, top_radius, 0, 0, 0, 0};
+      path.addRoundRect(bounds, radii);
+    }
+
+    return std::make_unique<views::PathInkDropMask>(size(), path);
+  }
+
+ private:
+  SkColor background_color_ = gfx::kPlaceholderColor;
+
+  DISALLOW_COPY_AND_ASSIGN(StackingBarClearAllButton);
+};
+
+}  // namespace
+
+StackedNotificationBar::StackedNotificationBar(views::ButtonListener* listener)
+    : count_label_(new views::Label),
+      clear_all_button_(new StackingBarClearAllButton(
+          listener,
+          l10n_util::GetStringUTF16(
+              IDS_ASH_MESSAGE_CENTER_CLEAR_ALL_BUTTON_LABEL))) {
+  SetVisible(false);
+
+  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kHorizontal,
+      gfx::Insets(0, kStackingNotificationClearAllButtonPadding.left(), 0, 0),
+      0));
+  layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kStretch);
+
+  if (features::IsUnifiedMessageCenterRefactorEnabled()) {
+    notification_icons_container_ = new views::View();
+    notification_icons_container_->SetLayoutManager(
+        std::make_unique<views::BoxLayout>(
+            views::BoxLayout::Orientation::kHorizontal,
+            kStackedNotificationIconsContainerPadding));
+    AddChildView(notification_icons_container_);
+  }
+
+  count_label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextSecondary,
+      AshColorProvider::AshColorMode::kLight));
+  count_label_->SetFontList(views::Label::GetDefaultFontList().Derive(
+      1, gfx::Font::NORMAL, gfx::Font::Weight::MEDIUM));
+  AddChildView(count_label_);
+
+  views::View* spacer = new views::View;
+  AddChildView(spacer);
+  layout->SetFlexForView(spacer, 1);
+
+  clear_all_button_->SetTooltipText(l10n_util::GetStringUTF16(
+      IDS_ASH_MESSAGE_CENTER_CLEAR_ALL_BUTTON_TOOLTIP));
+  AddChildView(clear_all_button_);
+}
+
+StackedNotificationBar::~StackedNotificationBar() = default;
+
+bool StackedNotificationBar::Update(
+    int total_notification_count,
+    std::vector<message_center::Notification*> stacked_notifications) {
+  int stacked_notification_count = stacked_notifications.size();
+
+  if (total_notification_count == total_notification_count_ &&
+      stacked_notification_count == stacked_notification_count_)
+    return false;
+
+  total_notification_count_ = total_notification_count;
+
+  UpdateVisibility();
+
+  auto tooltip = l10n_util::GetStringFUTF16Int(
+      IDS_ASH_MESSAGE_CENTER_STACKING_BAR_CLEAR_ALL_BUTTON_TOOLTIP,
+      total_notification_count_);
+  clear_all_button_->SetTooltipText(tooltip);
+  clear_all_button_->SetAccessibleName(tooltip);
+
+  UpdateStackedNotifications(stacked_notifications);
+
+  return true;
+}
+
+void StackedNotificationBar::SetAnimationState(
+    UnifiedMessageCenterAnimationState animation_state) {
+  animation_state_ = animation_state;
+  UpdateVisibility();
+}
+
+void StackedNotificationBar::AddNotificationIcon(
+    message_center::Notification* notification,
+    bool at_front) {
+  SkColor accent_color = notification->accent_color() == SK_ColorTRANSPARENT
+                             ? message_center::kNotificationDefaultAccentColor
+                             : notification->accent_color();
+
+  gfx::Image masked_small_icon =
+      notification->GenerateMaskedSmallIcon(15, accent_color);
+
+  views::ImageView* icon_view_ = new views::ImageView();
+
+  if (at_front)
+    notification_icons_container_->AddChildViewAt(icon_view_, 0);
+  else
+    notification_icons_container_->AddChildView(icon_view_);
+
+  if (masked_small_icon.IsEmpty()) {
+    icon_view_->SetImage(gfx::CreateVectorIcon(message_center::kProductIcon,
+                                               kStackedNotificationIconSize,
+                                               accent_color));
+  } else {
+    icon_view_->SetImage(masked_small_icon.AsImageSkia());
+  }
+}
+
+void StackedNotificationBar::ShiftIconsLeft(
+    std::vector<message_center::Notification*> stacked_notifications) {
+  int stacked_notification_count = stacked_notifications.size();
+  int removed_icons_count =
+      std::min(stacked_notification_count_ - stacked_notification_count,
+               kStackedNotificationBarMaxIcons);
+
+  // Remove required number of icons from the front.
+  for (int i = 0; i < removed_icons_count; i++) {
+    delete notification_icons_container_->children().front();
+  }
+
+  // Add icons to the back if there was a backfill.
+  int backfill_start = kStackedNotificationBarMaxIcons - removed_icons_count;
+  int backfill_end =
+      std::min(kStackedNotificationBarMaxIcons, stacked_notification_count);
+  for (int i = backfill_start; i < backfill_end; i++) {
+    AddNotificationIcon(stacked_notifications[i], false /*at_front*/);
+  }
+
+  stacked_notification_count_ = stacked_notification_count;
+}
+
+void StackedNotificationBar::ShiftIconsRight(
+    std::vector<message_center::Notification*> stacked_notifications) {
+  int new_stacked_notification_count = stacked_notifications.size();
+
+  while (stacked_notification_count_ < new_stacked_notification_count) {
+    // Remove icon from the back in case there is an overflow.
+    if (stacked_notification_count_ >= kStackedNotificationBarMaxIcons) {
+      delete notification_icons_container_->children().back();
+    }
+    // Add icon to the front.
+    AddNotificationIcon(stacked_notifications[new_stacked_notification_count -
+                                              stacked_notification_count_ - 1],
+                        true /*at_front*/);
+    ++stacked_notification_count_;
+  }
+}
+
+void StackedNotificationBar::UpdateStackedNotifications(
+    std::vector<message_center::Notification*> stacked_notifications) {
+  int stacked_notification_count = stacked_notifications.size();
+  int notification_overflow_count = 0;
+
+  if (features::IsUnifiedMessageCenterRefactorEnabled()) {
+    if (stacked_notification_count_ > stacked_notification_count)
+      ShiftIconsLeft(stacked_notifications);
+    else if (stacked_notification_count_ < stacked_notification_count)
+      ShiftIconsRight(stacked_notifications);
+
+    notification_overflow_count = std::max(
+        stacked_notification_count_ - kStackedNotificationBarMaxIcons, 0);
+  } else {
+    stacked_notification_count_ = stacked_notification_count;
+    notification_overflow_count = stacked_notification_count;
+  }
+
+  // Update overflow count label
+  if (notification_overflow_count > 0) {
+    count_label_->SetText(l10n_util::GetStringFUTF16Int(
+        IDS_ASH_MESSAGE_CENTER_HIDDEN_NOTIFICATION_COUNT_LABEL,
+        notification_overflow_count));
+    count_label_->SetVisible(true);
+  } else {
+    count_label_->SetVisible(false);
+  }
+
+  Layout();
+}
+
+void StackedNotificationBar::OnPaint(gfx::Canvas* canvas) {
+  cc::PaintFlags flags;
+  flags.setColor(AshColorProvider::Get()->DeprecatedGetBaseLayerColor(
+      AshColorProvider::BaseLayerType::kTransparentWithoutBlur,
+      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};
+
+  gfx::Rect bounds = GetLocalBounds();
+  background_path.addRoundRect(gfx::RectToSkRect(bounds), radii);
+  canvas->DrawPath(background_path, flags);
+
+  // We draw a border here than use a views::Border so the ink drop highlight
+  // of the clear all button overlays the border.
+  canvas->DrawSharpLine(
+      gfx::PointF(bounds.bottom_left() - gfx::Vector2d(0, 1)),
+      gfx::PointF(bounds.bottom_right() - gfx::Vector2d(0, 1)),
+      AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kSeparator,
+          AshColorProvider::AshColorMode::kLight));
+}
+
+const char* StackedNotificationBar::GetClassName() const {
+  return "StackedNotificationBar";
+}
+
+void StackedNotificationBar::UpdateVisibility() {
+  switch (animation_state_) {
+    case UnifiedMessageCenterAnimationState::IDLE:
+      SetVisible(total_notification_count_ > 1);
+      break;
+    case UnifiedMessageCenterAnimationState::HIDE_STACKING_BAR:
+      SetVisible(true);
+      break;
+    case UnifiedMessageCenterAnimationState::COLLAPSE:
+      SetVisible(false);
+      break;
+  }
+}
+
+}  // namespace ash
\ No newline at end of file

ash/system/message_center/stacked_notification_bar.h

+// Copyright 2019 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.
+
+#ifndef ASH_SYSTEM_MESSAGE_CENTER_STACKED_NOTIFICATION_BAR_H_
+#define ASH_SYSTEM_MESSAGE_CENTER_STACKED_NOTIFICATION_BAR_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/message_center/message_center_scroll_bar.h"
+#include "ash/system/message_center/unified_message_center_view.h"
+#include "ash/system/message_center/unified_message_list_view.h"
+#include "ui/gfx/animation/animation_delegate.h"
+#include "ui/views/background.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/controls/image_view.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/focus/focus_manager.h"
+#include "ui/views/view.h"
+
+namespace message_center {
+class Notification;
+}  // namespace message_center
+
+namespace ash {
+
+// The header shown above the notification list displaying the number of hidden
+// notifications. There are currently two UI implementations toggled by the
+// NotificationStackedBarRedesign feature flag.
+class StackedNotificationBar : public views::View {
+ public:
+  explicit StackedNotificationBar(views::ButtonListener* listener);
+  ~StackedNotificationBar() override;
+
+  // Sets the icons and overflow count for hidden notifications as well as the
+  // total notifications count. Returns true if the state of the bar has
+  // changed.
+  bool Update(int total_notification_count,
+              std::vector<message_center::Notification*> stacked_notifications);
+
+  // Sets the current animation state.
+  void SetAnimationState(UnifiedMessageCenterAnimationState animation_state);
+
+  // views::View:
+  void OnPaint(gfx::Canvas* canvas) override;
+  const char* GetClassName() const override;
+
+ private:
+  friend class UnifiedMessageCenterViewTest;
+
+  // Set visibility based on number of stacked notifications or animation state.
+  void UpdateVisibility();
+
+  // Add a stacked notification icon to the front or back of the row.
+  void AddNotificationIcon(message_center::Notification* notification,
+                           bool at_front);
+
+  // Move all icons left when notifications are scrolled up.
+  void ShiftIconsLeft(
+      std::vector<message_center::Notification*> stacked_notifications);
+
+  // Move icons right to make space for additional icons when notifications are
+  // scrolled down.
+  void ShiftIconsRight(
+      std::vector<message_center::Notification*> stacked_notifications);
+
+  // Update state for stacked notification icons and move them as necessary.
+  void UpdateStackedNotifications(
+      std::vector<message_center::Notification*> stacked_notifications);
+
+  int total_notification_count_ = 0;
+  int stacked_notification_count_ = 0;
+
+  UnifiedMessageCenterAnimationState animation_state_ =
+      UnifiedMessageCenterAnimationState::IDLE;
+
+  views::View* notification_icons_container_;
+  views::Label* const count_label_;
+  views::Button* const clear_all_button_;
+
+  DISALLOW_COPY_AND_ASSIGN(StackedNotificationBar);
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_MESSAGE_CENTER_STACKED_NOTIFICATION_BAR_H_

ash/system/message_center/unified_message_center_view.cc

@@ -10,29 +10,19 @@
 #include "ash/public/cpp/ash_features.h"
 #include "ash/session/session_controller_impl.h"
 #include "ash/shell.h"
-#include "ash/strings/grit/ash_strings.h"
-#include "ash/style/ash_color_provider.h"
-#include "ash/style/default_color_constants.h"
 #include "ash/system/message_center/ash_message_center_lock_screen_controller.h"
 #include "ash/system/message_center/message_center_scroll_bar.h"
+#include "ash/system/message_center/stacked_notification_bar.h"
 #include "ash/system/message_center/unified_message_center_bubble.h"
 #include "ash/system/message_center/unified_message_list_view.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_popup_utils.h"
-#include "ash/system/unified/rounded_label_button.h"
 #include "ash/system/unified/unified_system_tray_model.h"
 #include "ash/system/unified/unified_system_tray_view.h"
-#include "base/i18n/rtl.h"
 #include "base/metrics/user_metrics.h"
-#include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/animation/linear_animation.h"
-#include "ui/gfx/canvas.h"
 #include "ui/message_center/message_center.h"
 #include "ui/message_center/views/message_view.h"
-#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
-#include "ui/views/animation/ink_drop_highlight.h"
-#include "ui/views/animation/ink_drop_impl.h"
-#include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/scroll_view.h"
@@ -79,206 +69,8 @@ class ScrollerContentsView : public views::View {
   DISALLOW_COPY_AND_ASSIGN(ScrollerContentsView);
 };
 
-// The "Clear all" button in the stacking notification bar.
-class StackingBarClearAllButton : public views::LabelButton {
- public:
-  StackingBarClearAllButton(views::ButtonListener* listener,
-                            const base::string16& text)
-      : views::LabelButton(listener, text) {
-    SetEnabledTextColors(kUnifiedMenuButtonColorActive);
-    SetHorizontalAlignment(gfx::ALIGN_CENTER);
-    SetBorder(views::CreateEmptyBorder(gfx::Insets()));
-    label()->SetSubpixelRenderingEnabled(false);
-    label()->SetFontList(views::Label::GetDefaultFontList().Derive(
-        1, gfx::Font::NORMAL, gfx::Font::Weight::MEDIUM));
-    TrayPopupUtils::ConfigureTrayPopupButton(this);
-
-    background_color_ = AshColorProvider::Get()->DeprecatedGetBaseLayerColor(
-        AshColorProvider::BaseLayerType::kTransparentWithoutBlur,
-        kNotificationBackgroundColor);
-  }
-
-  ~StackingBarClearAllButton() override = default;
-
-  // views::LabelButton:
-  gfx::Size CalculatePreferredSize() const override {
-    return gfx::Size(label()->GetPreferredSize().width() +
-                         kStackingNotificationClearAllButtonPadding.width(),
-                     label()->GetPreferredSize().height() +
-                         kStackingNotificationClearAllButtonPadding.height());
-  }
-
-  const char* GetClassName() const override {
-    return "StackingBarClearAllButton";
-  }
-
-  int GetHeightForWidth(int width) const override {
-    return label()->GetPreferredSize().height() +
-           kStackingNotificationClearAllButtonPadding.height();
-  }
-
-  void PaintButtonContents(gfx::Canvas* canvas) override {
-    views::LabelButton::PaintButtonContents(canvas);
-  }
-
-  std::unique_ptr<views::InkDrop> CreateInkDrop() override {
-    auto ink_drop = TrayPopupUtils::CreateInkDrop(this);
-    ink_drop->SetShowHighlightOnFocus(true);
-    ink_drop->SetShowHighlightOnHover(true);
-    return ink_drop;
-  }
-
-  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override {
-    return TrayPopupUtils::CreateInkDropRipple(
-        TrayPopupInkDropStyle::FILL_BOUNDS, this,
-        GetInkDropCenterBasedOnLastEvent(), background_color_);
-  }
-
-  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
-      const override {
-    return TrayPopupUtils::CreateInkDropHighlight(
-        TrayPopupInkDropStyle::FILL_BOUNDS, this, background_color_);
-  }
-
-  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
-    SkScalar top_radius = SkIntToScalar(kUnifiedTrayCornerRadius);
-    SkRect bounds = gfx::RectToSkRect(GetContentsBounds());
-    SkPath path;
-
-    if (base::i18n::IsRTL()) {
-      SkScalar radii[8] = {top_radius, top_radius, 0, 0, 0, 0, 0, 0};
-      path.addRoundRect(bounds, radii);
-    } else {
-      SkScalar radii[8] = {0, 0, top_radius, top_radius, 0, 0, 0, 0};
-      path.addRoundRect(bounds, radii);
-    }
-
-    return std::make_unique<views::PathInkDropMask>(size(), path);
-  }
-
- private:
-  SkColor background_color_ = gfx::kPlaceholderColor;
-
-  DISALLOW_COPY_AND_ASSIGN(StackingBarClearAllButton);
-};
-
 }  // namespace
 
-StackingNotificationCounterView::StackingNotificationCounterView(
-    views::ButtonListener* listener)
-    : count_label_(new views::Label),
-      clear_all_button_(new StackingBarClearAllButton(
-          listener,
-          l10n_util::GetStringUTF16(
-              IDS_ASH_MESSAGE_CENTER_CLEAR_ALL_BUTTON_LABEL))) {
-  SetVisible(false);
-
-  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kHorizontal,
-      gfx::Insets(0, kStackingNotificationClearAllButtonPadding.left(), 0, 0),
-      0));
-  layout->set_cross_axis_alignment(
-      views::BoxLayout::CrossAxisAlignment::kStretch);
-
-  count_label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kTextSecondary,
-      AshColorProvider::AshColorMode::kLight));
-  count_label_->SetFontList(views::Label::GetDefaultFontList().Derive(
-      1, gfx::Font::NORMAL, gfx::Font::Weight::MEDIUM));
-  AddChildView(count_label_);
-
-  views::View* spacer = new views::View;
-  AddChildView(spacer);
-  layout->SetFlexForView(spacer, 1);
-
-  clear_all_button_->SetTooltipText(l10n_util::GetStringUTF16(
-      IDS_ASH_MESSAGE_CENTER_CLEAR_ALL_BUTTON_TOOLTIP));
-  AddChildView(clear_all_button_);
-}
-
-StackingNotificationCounterView::~StackingNotificationCounterView() = default;
-
-bool StackingNotificationCounterView::SetCount(int total_notification_count,
-                                               int stacked_notification_count) {
-  if (total_notification_count == total_notification_count_ &&
-      stacked_notification_count == stacked_notification_count_)
-    return false;
-
-  total_notification_count_ = total_notification_count;
-  stacked_notification_count_ = stacked_notification_count;
-
-  UpdateVisibility();
-
-  auto tooltip = l10n_util::GetStringFUTF16Int(
-      IDS_ASH_MESSAGE_CENTER_STACKING_BAR_CLEAR_ALL_BUTTON_TOOLTIP,
-      total_notification_count_);
-  clear_all_button_->SetTooltipText(tooltip);
-  clear_all_button_->SetAccessibleName(tooltip);
-
-  if (stacked_notification_count_ > 0) {
-    count_label_->SetText(l10n_util::GetStringFUTF16Int(
-        IDS_ASH_MESSAGE_CENTER_HIDDEN_NOTIFICATION_COUNT_LABEL,
-        stacked_notification_count_));
-    count_label_->SetVisible(true);
-  } else {
-    count_label_->SetVisible(false);
-  }
-
-  SchedulePaint();
-  return true;
-}
-
-void StackingNotificationCounterView::SetAnimationState(
-    UnifiedMessageCenterAnimationState animation_state) {
-  animation_state_ = animation_state;
-  UpdateVisibility();
-}
-
-void StackingNotificationCounterView::OnPaint(gfx::Canvas* canvas) {
-  cc::PaintFlags flags;
-  flags.setColor(AshColorProvider::Get()->DeprecatedGetBaseLayerColor(
-      AshColorProvider::BaseLayerType::kTransparentWithoutBlur,
-      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};
-
-  gfx::Rect bounds = GetLocalBounds();
-  background_path.addRoundRect(gfx::RectToSkRect(bounds), radii);
-  canvas->DrawPath(background_path, flags);
-
-  // We draw a border here than use a views::Border so the ink drop highlight
-  // of the clear all button overlays the border.
-  canvas->DrawSharpLine(
-      gfx::PointF(bounds.bottom_left() - gfx::Vector2d(0, 1)),
-      gfx::PointF(bounds.bottom_right() - gfx::Vector2d(0, 1)),
-      AshColorProvider::Get()->GetContentLayerColor(
-          AshColorProvider::ContentLayerType::kSeparator,
-          AshColorProvider::AshColorMode::kLight));
-}
-
-const char* StackingNotificationCounterView::GetClassName() const {
-  return "StackingNotificationCounterView";
-}
-
-void StackingNotificationCounterView::UpdateVisibility() {
-  switch (animation_state_) {
-    case UnifiedMessageCenterAnimationState::IDLE:
-      SetVisible(total_notification_count_ > 1);
-      break;
-    case UnifiedMessageCenterAnimationState::HIDE_STACKING_BAR:
-      SetVisible(true);
-      break;
-    case UnifiedMessageCenterAnimationState::COLLAPSE:
-      SetVisible(false);
-      break;
-  }
-}
-
 UnifiedMessageCenterView::UnifiedMessageCenterView(
     UnifiedSystemTrayView* parent,
     UnifiedSystemTrayModel* model,
@@ -286,7 +78,7 @@ UnifiedMessageCenterView::UnifiedMessageCenterView(
     : parent_(parent),
       model_(model),
       message_center_bubble_(bubble),
-      stacking_counter_(new StackingNotificationCounterView(this)),
+      notification_bar_(new StackedNotificationBar(this)),
       scroll_bar_(new MessageCenterScrollBar(this)),
       scroller_(new views::ScrollView()),
       message_list_view_(new UnifiedMessageListView(this, model)),
@@ -295,7 +87,7 @@ UnifiedMessageCenterView::UnifiedMessageCenterView(
       focus_search_(std::make_unique<views::FocusSearch>(this, false, false)) {
   message_list_view_->Init();
 
-  AddChildView(stacking_counter_);
+  AddChildView(notification_bar_);
 
   // Need to set the transparent background explicitly, since ScrollView has
   // set the default opaque background color.
@@ -316,7 +108,7 @@ UnifiedMessageCenterView::~UnifiedMessageCenterView() {
 
 void UnifiedMessageCenterView::SetMaxHeight(int max_height) {
   int max_scroller_height = max_height;
-  if (stacking_counter_->GetVisible())
+  if (notification_bar_->GetVisible())
     max_scroller_height -= kStackingNotificationCounterHeight;
   scroller_->ClipHeightTo(0, max_scroller_height);
 }
@@ -327,7 +119,7 @@ void UnifiedMessageCenterView::SetAvailableHeight(int available_height) {
 }
 
 void UnifiedMessageCenterView::OnNotificationSlidOut() {
-  if (stacking_counter_->GetVisible() &&
+  if (notification_bar_->GetVisible() &&
       message_list_view_->GetTotalNotificationCount() <= 1) {
     StartHideStackingBarAnimation();
   } else if (!message_list_view_->GetTotalNotificationCount()) {
@@ -367,24 +159,22 @@ void UnifiedMessageCenterView::RemovedFromWidget() {
 }
 
 void UnifiedMessageCenterView::Layout() {
-  stacking_counter_->SetCount(message_list_view_->GetTotalNotificationCount(),
-                              GetStackedNotificationCount());
-  if (stacking_counter_->GetVisible()) {
+  if (notification_bar_->GetVisible()) {
     gfx::Rect counter_bounds(GetContentsBounds());
 
-    int stacking_counter_height = kStackingNotificationCounterHeight;
-    int stacking_counter_offset = 0;
+    int notification_bar_height = kStackingNotificationCounterHeight;
+    int notification_bar_offset = 0;
     if (animation_state_ ==
         UnifiedMessageCenterAnimationState::HIDE_STACKING_BAR)
-      stacking_counter_offset = GetAnimationValue() * stacking_counter_height;
+      notification_bar_offset = GetAnimationValue() * notification_bar_height;
 
-    counter_bounds.set_height(stacking_counter_height);
-    counter_bounds.set_y(counter_bounds.y() - stacking_counter_offset);
-    stacking_counter_->SetBoundsRect(counter_bounds);
+    counter_bounds.set_height(notification_bar_height);
+    counter_bounds.set_y(counter_bounds.y() - notification_bar_offset);
+    notification_bar_->SetBoundsRect(counter_bounds);
 
     gfx::Rect scroller_bounds(GetContentsBounds());
     scroller_bounds.Inset(gfx::Insets(
-        stacking_counter_height - stacking_counter_offset, 0, 0, 0));
+        notification_bar_height - notification_bar_offset, 0, 0, 0));
     scroller_->SetBoundsRect(scroller_bounds);
   } else {
     scroller_->SetBoundsRect(GetContentsBounds());
@@ -397,7 +187,7 @@ void UnifiedMessageCenterView::Layout() {
 gfx::Size UnifiedMessageCenterView::CalculatePreferredSize() const {
   gfx::Size preferred_size = scroller_->GetPreferredSize();
 
-  if (stacking_counter_->GetVisible()) {
+  if (notification_bar_->GetVisible()) {
     int bar_height = kStackingNotificationCounterHeight;
     if (animation_state_ ==
         UnifiedMessageCenterAnimationState::HIDE_STACKING_BAR)
@@ -425,9 +215,9 @@ void UnifiedMessageCenterView::OnMessageCenterScrolled() {
   model_->set_notification_target_mode(
       UnifiedSystemTrayModel::NotificationTargetMode::LAST_POSITION);
 
-  bool was_count_updated = stacking_counter_->SetCount(
-      message_list_view_->GetTotalNotificationCount(),
-      GetStackedNotificationCount());
+  bool was_count_updated =
+      notification_bar_->Update(message_list_view_->GetTotalNotificationCount(),
+                                GetStackedNotifications());
   if (was_count_updated) {
     const int previous_y = scroller_->y();
     Layout();
@@ -496,7 +286,7 @@ void UnifiedMessageCenterView::AnimationEnded(const gfx::Animation* animation) {
   }
 
   animation_state_ = UnifiedMessageCenterAnimationState::IDLE;
-  stacking_counter_->SetAnimationState(animation_state_);
+  notification_bar_->SetAnimationState(animation_state_);
   UpdateVisibility();
 }
 
@@ -518,7 +308,7 @@ void UnifiedMessageCenterView::SetNotificationRectBelowScroll(
 void UnifiedMessageCenterView::StartHideStackingBarAnimation() {
   animation_->End();
   animation_state_ = UnifiedMessageCenterAnimationState::HIDE_STACKING_BAR;
-  stacking_counter_->SetAnimationState(animation_state_);
+  notification_bar_->SetAnimationState(animation_state_);
   animation_->SetDuration(kHideStackingBarAnimationDuration);
   animation_->Start();
 }
@@ -526,7 +316,7 @@ void UnifiedMessageCenterView::StartHideStackingBarAnimation() {
 void UnifiedMessageCenterView::StartCollapseAnimation() {
   animation_->End();
   animation_state_ = UnifiedMessageCenterAnimationState::COLLAPSE;
-  stacking_counter_->SetAnimationState(animation_state_);
+  notification_bar_->SetAnimationState(animation_state_);
   animation_->SetDuration(kCollapseAnimationDuration);
   animation_->Start();
 }
@@ -609,11 +399,14 @@ void UnifiedMessageCenterView::ScrollToTarget() {
   }
 
   scroller_->ScrollToPosition(scroll_bar_, position);
+  notification_bar_->Update(message_list_view_->GetTotalNotificationCount(),
+                            GetStackedNotifications());
   last_scroll_position_from_bottom_ =
       scroll_bar_->GetMaxPosition() - scroller_->GetVisibleRect().y();
 }
 
-int UnifiedMessageCenterView::GetStackedNotificationCount() const {
+std::vector<message_center::Notification*>
+UnifiedMessageCenterView::GetStackedNotifications() const {
   // CountNotificationsAboveY() only works after SetBoundsRect() is called at
   // least once.
   if (scroller_->bounds().IsEmpty())
@@ -623,7 +416,7 @@ int UnifiedMessageCenterView::GetStackedNotificationCount() const {
   // UnifiedMessageCenterView to count number of hidden notifications.
   const int y_offset = scroller_->GetVisibleRect().y() - scroller_->y() +
                        kStackingNotificationCounterHeight;
-  return message_list_view_->CountNotificationsAboveY(y_offset);
+  return message_list_view_->GetNotificationsAboveY(y_offset);
 }
 
 void UnifiedMessageCenterView::NotifyRectBelowScroll() {

ash/system/message_center/unified_message_center_view.h

@@ -19,6 +19,10 @@ namespace gfx {
 class LinearAnimation;
 }  // namespace gfx
 
+namespace message_center {
+class Notification;
+}  // namespace message_center
+
 namespace views {
 class ScrollView;
 }  // namespace views
@@ -26,6 +30,7 @@ class ScrollView;
 namespace ash {
 
 class MessageCenterScrollBar;
+class StackedNotificationBar;
 class UnifiedMessageCenterBubble;
 class UnifiedSystemTrayModel;
 class UnifiedSystemTrayView;
@@ -49,41 +54,6 @@ enum class UnifiedMessageCenterAnimationState {
   COLLAPSE,
 };
 
-// The header shown above the notification list displaying the number of hidden
-// notifications. There are currently two UI implementations toggled by the
-// NotificationStackingBarRedesign feature flag.
-class StackingNotificationCounterView : public views::View {
- public:
-  explicit StackingNotificationCounterView(views::ButtonListener* listener);
-  ~StackingNotificationCounterView() override;
-
-  // Sets the number of total notifications and hidden notifications. Returns
-  // true if the count was updated from the previous SetCount() call.
-  bool SetCount(int total_notification_count, int stacked_notification_count);
-
-  // Sets the current animation state.
-  void SetAnimationState(UnifiedMessageCenterAnimationState animation_state);
-
-  // views::View:
-  void OnPaint(gfx::Canvas* canvas) override;
-  const char* GetClassName() const override;
-
- private:
-  friend class UnifiedMessageCenterViewTest;
-
-  void UpdateVisibility();
-
-  int total_notification_count_ = 0;
-  int stacked_notification_count_ = 0;
-  UnifiedMessageCenterAnimationState animation_state_ =
-      UnifiedMessageCenterAnimationState::IDLE;
-
-  views::Label* const count_label_;
-  views::Button* const clear_all_button_;
-
-  DISALLOW_COPY_AND_ASSIGN(StackingNotificationCounterView);
-};
-
 // Manages scrolling of notification list.
 class ASH_EXPORT UnifiedMessageCenterView
     : public views::View,
@@ -119,7 +89,7 @@ class ASH_EXPORT UnifiedMessageCenterView
   void ConfigureMessageView(message_center::MessageView* message_view);
 
   // Count number of notifications that are above visible area.
-  int GetStackedNotificationCount() const;
+  std::vector<message_center::Notification*> GetStackedNotifications() const;
 
   // Set the first child view to be focused when focus is acquired.
   // This is the first visible child unless reverse is true, in which case
@@ -186,7 +156,7 @@ class ASH_EXPORT UnifiedMessageCenterView
   UnifiedSystemTrayView* const parent_;
   UnifiedSystemTrayModel* const model_;
   UnifiedMessageCenterBubble* const message_center_bubble_;
-  StackingNotificationCounterView* const stacking_counter_;
+  StackedNotificationBar* const notification_bar_;
   MessageCenterScrollBar* const scroll_bar_;
   views::ScrollView* const scroller_;
   UnifiedMessageListView* const message_list_view_;

ash/system/message_center/unified_message_center_view_unittest.cc

@@ -10,6 +10,7 @@
 #include "ash/shell.h"
 #include "ash/system/message_center/ash_message_center_lock_screen_controller.h"
 #include "ash/system/message_center/message_center_scroll_bar.h"
+#include "ash/system/message_center/stacked_notification_bar.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/unified/unified_system_tray_controller.h"
 #include "ash/system/unified/unified_system_tray_model.h"
@@ -163,15 +164,15 @@ class UnifiedMessageCenterViewTest : public AshTestBase,
   }
 
   views::View* GetStackingCounter() {
-    return message_center_view()->stacking_counter_;
+    return message_center_view()->notification_bar_;
   }
 
   views::View* GetStackingCounterLabel() {
-    return message_center_view()->stacking_counter_->count_label_;
+    return message_center_view()->notification_bar_->count_label_;
   }
 
   views::View* GetStackingCounterClearAllButton() {
-    return message_center_view()->stacking_counter_->clear_all_button_;
+    return message_center_view()->notification_bar_->clear_all_button_;
   }
 
   message_center::MessageView* ToggleFocusToMessageView(size_t index,

ash/system/message_center/unified_message_list_view.cc

@@ -283,12 +283,19 @@ void UnifiedMessageListView::ClearAllWithAnimation() {
     StartAnimation();
 }
 
-int UnifiedMessageListView::CountNotificationsAboveY(int y_offset) const {
-  const auto it = std::find_if(children().cbegin(), children().cend(),
-                               [y_offset](const views::View* v) {
-                                 return v->bounds().bottom() > y_offset;
-                               });
-  return std::distance(children().cbegin(), it);
+std::vector<Notification*> UnifiedMessageListView::GetNotificationsAboveY(
+    int y_offset) const {
+  std::vector<Notification*> notifications;
+  for (views::View* view : children()) {
+    if (view->bounds().bottom() < y_offset) {
+      Notification* notification =
+          MessageCenter::Get()->FindVisibleNotificationById(
+              AsMVC(view)->GetNotificationId());
+      if (notification)
+        notifications.insert(notifications.begin(), notification);
+    }
+  }
+  return notifications;
 }
 
 int UnifiedMessageListView::GetTotalNotificationCount() const {
@@ -486,8 +493,9 @@ MessageView* UnifiedMessageListView::CreateMessageView(
   return view;
 }
 
-int UnifiedMessageListView::GetStackedNotificationCount() const {
-  return message_center_view_->GetStackedNotificationCount();
+std::vector<message_center::Notification*>
+UnifiedMessageListView::GetStackedNotifications() const {
+  return message_center_view_->GetStackedNotifications();
 }
 
 // static
@@ -623,7 +631,7 @@ void UnifiedMessageListView::UpdateClearAllAnimation() {
     view->set_is_removed();
 
   if (state_ == State::CLEAR_ALL_STACKED) {
-    if (view && GetStackedNotificationCount() > 0) {
+    if (view && GetStackedNotifications().size() > 0) {
       DeleteRemovedNotifications();
       UpdateBounds();
       start_height_ = ideal_height_;

ash/system/message_center/unified_message_list_view.h

@@ -60,7 +60,8 @@ class ASH_EXPORT UnifiedMessageListView
 
   // Count the number of notifications whose bottom position is above
   // |y_offset|. O(n) where n is number of notifications.
-  int CountNotificationsAboveY(int y_offset) const;
+  std::vector<message_center::Notification*> GetNotificationsAboveY(
+      int y_offset) const;
 
   // Returns the total number of notifications in the list.
   int GetTotalNotificationCount() const;
@@ -102,7 +103,8 @@ class ASH_EXPORT UnifiedMessageListView
       const message_center::Notification& notification);
 
   // Virtual for testing.
-  virtual int GetStackedNotificationCount() const;
+  virtual std::vector<message_center::Notification*> GetStackedNotifications()
+      const;
 
  private:
   friend class UnifiedMessageCenterViewTest;

ash/system/message_center/unified_message_list_view_unittest.cc

@@ -61,7 +61,18 @@ class TestUnifiedMessageListView : public UnifiedMessageListView {
   ~TestUnifiedMessageListView() override = default;
 
   void set_stacked_notification_count(int stacked_notification_count) {
-    stacked_notification_count_ = stacked_notification_count;
+    stacked_notifications_.clear();
+    for (int i = 0; i < stacked_notification_count; i++) {
+      std::string id = base::NumberToString(0);
+      auto notification = std::make_unique<Notification>(
+          message_center::NOTIFICATION_TYPE_BASE_FORMAT, id,
+          base::UTF8ToUTF16("test title"), base::UTF8ToUTF16("test message"),
+          gfx::Image(), base::string16() /* display_source */, GURL(),
+          message_center::NotifierId(), message_center::RichNotificationData(),
+          new message_center::NotificationDelegate());
+
+      stacked_notifications_.push_back(notification.get());
+    }
   }
 
   // UnifiedMessageListView:
@@ -72,12 +83,13 @@ class TestUnifiedMessageListView : public UnifiedMessageListView {
     return view;
   }
 
-  int GetStackedNotificationCount() const override {
-    return stacked_notification_count_;
+  std::vector<message_center::Notification*> GetStackedNotifications()
+      const override {
+    return stacked_notifications_;
   }
 
  private:
-  int stacked_notification_count_ = 0;
+  std::vector<message_center::Notification*> stacked_notifications_;
 
   DISALLOW_COPY_AND_ASSIGN(TestUnifiedMessageListView);
 };

ash/system/tray/tray_constants.h

@@ -126,6 +126,12 @@ constexpr int kUnifiedSystemInfoHeight = 16;
 constexpr int kUnifiedSystemInfoSpacing = 8;
 constexpr gfx::Insets kUnifiedSystemInfoDateViewPadding(3);
 
+// Constants used in StackedNotificationBar located on top of the message
+// center.
+constexpr gfx::Insets kStackedNotificationIconsContainerPadding(2, 0, 0, 6);
+constexpr int kStackedNotificationBarMaxIcons = 5;
+constexpr int kStackedNotificationIconSize = 15;
+
 // Constants used in FeaturePodsView of UnifiedSystemTray.
 constexpr gfx::Size kUnifiedFeaturePodIconSize(48, 48);
 constexpr gfx::Size kUnifiedFeaturePodSize(112, 88);