Media Notification: Remove grey box around dismiss button

This CL changes updates the ChromeOS Media Notification to hide the
grey rectangle that surrounds the dismiss button. It is replaced by a
circular background colored the same as the notification background.

Bug: 1012740
Change-Id: Id8d0fefb63dbf75d5b8efd95e96cbd1a41fa3a7a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1888273
Reviewed-by: Scott Violet <sky@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711119}

ash/media/media_notification_container_impl.cc

@@ -11,21 +11,55 @@
 #include "ui/native_theme/native_theme_dark_aura.h"
 #include "ui/views/background.h"
 #include "ui/views/layout/fill_layout.h"
+#include "ui/views/view_class_properties.h"
 
 namespace ash {
 
+namespace {
+
+// Width/height of the dismiss button.
+constexpr int kDismissButtonIconSideLength = 12;
+
+// Width/height of the colored-background container of the dismiss button.
+constexpr int kControlButtonsContainerSideLength =
+    2 * kDismissButtonIconSideLength;
+
+}  // anonymous namespace
+
 MediaNotificationContainerImpl::MediaNotificationContainerImpl(
     const message_center::Notification& notification,
     base::WeakPtr<media_message_center::MediaNotificationItem> item)
     : message_center::MessageView(notification) {
   SetLayoutManager(std::make_unique<views::FillLayout>());
 
+  auto control_buttons_container = std::make_unique<views::View>();
+
+  // We paint to a layer here so that we can modify opacity of that layer to
+  // match the opacity of the |control_buttons_view_| layer.
+  control_buttons_container->SetPaintToLayer();
+  control_buttons_container->layer()->SetFillsBoundsOpaquely(false);
+
+  // Vertically center the dismiss icon within the container.
+  constexpr int top_margin =
+      (kControlButtonsContainerSideLength - kDismissButtonIconSideLength) / 2;
+  control_buttons_container->SetProperty(views::kMarginsKey,
+                                         gfx::Insets(top_margin, 0, 0, 0));
+
+  control_buttons_container->SetPreferredSize(gfx::Size(
+      kControlButtonsContainerSideLength, kControlButtonsContainerSideLength));
+  control_buttons_container->SetLayoutManager(
+      std::make_unique<views::FillLayout>());
+  control_buttons_container_ = control_buttons_container.get();
+
   auto control_buttons_view =
       std::make_unique<message_center::NotificationControlButtonsView>(this);
-  control_buttons_view_ = control_buttons_view.get();
+  control_buttons_view->SetBackground(
+      views::CreateSolidBackground(SK_ColorTRANSPARENT));
+  control_buttons_view_ =
+      control_buttons_container_->AddChildView(std::move(control_buttons_view));
 
   auto view = std::make_unique<media_message_center::MediaNotificationView>(
-      this, std::move(item), std::move(control_buttons_view),
+      this, std::move(item), std::move(control_buttons_container),
       message_center::MessageCenter::Get()->GetSystemNotificationAppName(),
       message_center::kNotificationWidth,
       /*should_show_icon=*/true);
@@ -62,10 +96,28 @@ void MediaNotificationContainerImpl::UpdateCornerRadius(int top_radius,
   view_->UpdateCornerRadius(top_radius, bottom_radius);
 }
 
+void MediaNotificationContainerImpl::UpdateControlButtonsVisibility() {
+  message_center::MessageView::UpdateControlButtonsVisibility();
+
+  // The above call may update the opacity of the control buttons to 0 or 1. We
+  // need to update the container layer opacity to match.
+  control_buttons_container_->layer()->SetOpacity(
+      control_buttons_view_->layer()->opacity());
+}
+
 void MediaNotificationContainerImpl::OnExpanded(bool expanded) {
   PreferredSizeChanged();
 }
 
+void MediaNotificationContainerImpl::OnColorsChanged(SkColor foreground,
+                                                     SkColor background) {
+  // We need to update the foreground and background colors of the dismiss icon
+  // to ensure proper contrast against the artwork.
+  control_buttons_view_->SetButtonIconColors(foreground);
+  control_buttons_container_->SetBackground(views::CreateRoundedRectBackground(
+      background, kControlButtonsContainerSideLength / 2));
+}
+
 void MediaNotificationContainerImpl::OnMouseEvent(ui::MouseEvent* event) {
   switch (event->type()) {
     case ui::ET_MOUSE_ENTERED:

ash/media/media_notification_container_impl.h

@@ -37,6 +37,7 @@ class ASH_EXPORT MediaNotificationContainerImpl
       const override;
   void SetExpanded(bool expanded) override;
   void UpdateCornerRadius(int top_radius, int bottom_radius) override;
+  void UpdateControlButtonsVisibility() override;
 
   // media_message_center::MediaNotificationContainer:
   void OnExpanded(bool expanded) override;
@@ -47,7 +48,7 @@ class ASH_EXPORT MediaNotificationContainerImpl
       const base::flat_set<media_session::mojom::MediaSessionAction>& actions)
       override {}
   void OnMediaArtworkChanged(const gfx::ImageSkia& image) override {}
-  void OnColorsChanged(SkColor foreground, SkColor background) override {}
+  void OnColorsChanged(SkColor foreground, SkColor background) override;
 
   // views::View:
   void OnMouseEvent(ui::MouseEvent* event) override;
@@ -56,6 +57,10 @@ class ASH_EXPORT MediaNotificationContainerImpl
   void UpdateControlButtonsVisibilityWithNotification(
       const message_center::Notification& notification);
 
+  // Contains |control_buttons_view_| and puts a circular colored background
+  // behind it to ensure proper contrast.
+  views::View* control_buttons_container_ = nullptr;
+
   // View containing close and settings buttons.
   message_center::NotificationControlButtonsView* control_buttons_view_ =
       nullptr;

ui/message_center/views/notification_control_buttons_view.cc

@@ -26,7 +26,7 @@ const char NotificationControlButtonsView::kViewClassName[] =
 
 NotificationControlButtonsView::NotificationControlButtonsView(
     MessageView* message_view)
-    : message_view_(message_view) {
+    : message_view_(message_view), icon_color_(gfx::kChromeIconGrey) {
   DCHECK(message_view);
   SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kHorizontal));
@@ -44,9 +44,9 @@ void NotificationControlButtonsView::ShowCloseButton(bool show) {
   if (show && !close_button_) {
     close_button_ = std::make_unique<PaddedButton>(this);
     close_button_->set_owned_by_client();
-    close_button_->SetImage(views::Button::STATE_NORMAL,
-                            gfx::CreateVectorIcon(kNotificationCloseButtonIcon,
-                                                  gfx::kChromeIconGrey));
+    close_button_->SetImage(
+        views::Button::STATE_NORMAL,
+        gfx::CreateVectorIcon(kNotificationCloseButtonIcon, icon_color_));
     close_button_->SetAccessibleName(l10n_util::GetStringUTF16(
         IDS_MESSAGE_CENTER_CLOSE_NOTIFICATION_BUTTON_ACCESSIBLE_NAME));
     close_button_->SetTooltipText(l10n_util::GetStringUTF16(
@@ -69,8 +69,7 @@ void NotificationControlButtonsView::ShowSettingsButton(bool show) {
     settings_button_->set_owned_by_client();
     settings_button_->SetImage(
         views::Button::STATE_NORMAL,
-        gfx::CreateVectorIcon(kNotificationSettingsButtonIcon,
-                              gfx::kChromeIconGrey));
+        gfx::CreateVectorIcon(kNotificationSettingsButtonIcon, icon_color_));
     settings_button_->SetAccessibleName(l10n_util::GetStringUTF16(
         IDS_MESSAGE_NOTIFICATION_SETTINGS_BUTTON_ACCESSIBLE_NAME));
     settings_button_->SetTooltipText(l10n_util::GetStringUTF16(
@@ -94,8 +93,7 @@ void NotificationControlButtonsView::ShowSnoozeButton(bool show) {
     snooze_button_->set_owned_by_client();
     snooze_button_->SetImage(
         views::Button::STATE_NORMAL,
-        gfx::CreateVectorIcon(kNotificationSnoozeButtonIcon,
-                              gfx::kChromeIconGrey));
+        gfx::CreateVectorIcon(kNotificationSnoozeButtonIcon, icon_color_));
     snooze_button_->SetAccessibleName(l10n_util::GetStringUTF16(
         IDS_MESSAGE_CENTER_NOTIFICATION_SNOOZE_BUTTON_TOOLTIP));
     snooze_button_->SetTooltipText(l10n_util::GetStringUTF16(
@@ -126,6 +124,28 @@ bool NotificationControlButtonsView::IsAnyButtonFocused() const {
          (snooze_button_ && snooze_button_->HasFocus());
 }
 
+void NotificationControlButtonsView::SetButtonIconColors(SkColor color) {
+  if (color == icon_color_)
+    return;
+  icon_color_ = color;
+
+  if (close_button_) {
+    close_button_->SetImage(
+        views::Button::STATE_NORMAL,
+        gfx::CreateVectorIcon(kNotificationCloseButtonIcon, icon_color_));
+  }
+  if (settings_button_) {
+    settings_button_->SetImage(
+        views::Button::STATE_NORMAL,
+        gfx::CreateVectorIcon(kNotificationSettingsButtonIcon, icon_color_));
+  }
+  if (snooze_button_) {
+    snooze_button_->SetImage(
+        views::Button::STATE_NORMAL,
+        gfx::CreateVectorIcon(kNotificationSnoozeButtonIcon, icon_color_));
+  }
+}
+
 views::Button* NotificationControlButtonsView::close_button() const {
   return close_button_.get();
 }

ui/message_center/views/notification_control_buttons_view.h

@@ -49,6 +49,9 @@ class MESSAGE_CENTER_EXPORT NotificationControlButtonsView
   // false otherwise.
   bool IsAnyButtonFocused() const;
 
+  // Sets the icon color for the close, settings, and snooze buttons.
+  void SetButtonIconColors(SkColor color);
+
   // Methods for retrieving the control buttons directly.
   views::Button* close_button() const;
   views::Button* settings_button() const;
@@ -67,6 +70,9 @@ class MESSAGE_CENTER_EXPORT NotificationControlButtonsView
   std::unique_ptr<PaddedButton> settings_button_;
   std::unique_ptr<PaddedButton> snooze_button_;
 
+  // The color used for the close, settings, and snooze icons.
+  SkColor icon_color_;
+
   DISALLOW_COPY_AND_ASSIGN(NotificationControlButtonsView);
 };