[Media Notification] Add collapsed mode

Add a collapsed mode where the notification will
show fewer action buttons and also place the
buttons to the right of the title/artist
information.

BUG=893296

Change-Id: I5a05f074ddda0d000a26db76b26ccc97fd732cd7
Reviewed-on: https://chromium-review.googlesource.com/c/1327613
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612823}

ash/media/media_notification_view.cc

@@ -25,8 +25,12 @@ using media_session::mojom::MediaSessionAction;
 
 namespace {
 
-// The right padding is 2/3rds the size of the notification.
-constexpr int kRightMarginSize = message_center::kNotificationWidth / 3;
+// The right padding is 1/5th the size of the notification.
+constexpr int kRightMarginSize = message_center::kNotificationWidth / 5;
+
+// The right padding is 1/3rd the size of the notification when the
+// notification is expanded.
+constexpr int kRightMarginExpandedSize = message_center::kNotificationWidth / 3;
 
 // Dimensions.
 constexpr int kDefaultMarginSize = 16;
@@ -37,6 +41,13 @@ SkColor GetMediaNotificationColor(const views::View& view) {
                                 views::style::STYLE_PRIMARY);
 }
 
+bool ShouldShowActionWhenCollapsed(MediaSessionAction action) {
+  return action == MediaSessionAction::kPlay ||
+         action == MediaSessionAction::kPause ||
+         action == MediaSessionAction::kNextTrack ||
+         action == MediaSessionAction::kPreviousTrack;
+}
+
 }  // namespace
 
 MediaNotificationView::MediaNotificationView(
@@ -53,25 +64,26 @@ MediaNotificationView::MediaNotificationView(
   // |header_row_| contains app_icon, app_name, control buttons, etc.
   header_row_ = new message_center::NotificationHeaderView(
       control_buttons_view_.get(), this);
-  header_row_->SetExpandButtonEnabled(false);
+  header_row_->SetExpandButtonEnabled(true);
   header_row_->SetAppName(
       message_center::MessageCenter::Get()->GetSystemNotificationAppName());
   AddChildView(header_row_);
 
+  // |main_row_| holds the main content of the notification.
+  main_row_ = new views::View();
+  AddChildView(main_row_);
+
   // |title_artist_row_| contains the title and artist labels.
   title_artist_row_ = new views::View();
   auto* title_artist_row_layout =
       title_artist_row_->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::kVertical,
-          gfx::Insets(kDefaultMarginSize, kDefaultMarginSize, 0,
-                      kRightMarginSize),
-          0));
+          views::BoxLayout::kVertical, gfx::Insets(), 0));
   title_artist_row_layout->set_main_axis_alignment(
       views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
   title_artist_row_layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_START);
   title_artist_row_->SetVisible(false);
-  AddChildView(title_artist_row_);
+  main_row_->AddChildView(title_artist_row_);
 
   title_label_ = new views::Label(base::string16(), views::style::CONTEXT_LABEL,
                                   views::style::STYLE_PRIMARY);
@@ -91,16 +103,13 @@ MediaNotificationView::MediaNotificationView(
   button_row_ = new views::View();
   auto* button_row_layout =
       button_row_->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::kHorizontal,
-          gfx::Insets(kDefaultMarginSize, kDefaultMarginSize,
-                      kDefaultMarginSize, kRightMarginSize),
-          16));
+          views::BoxLayout::kHorizontal, gfx::Insets(), 0));
   button_row_layout->set_main_axis_alignment(
       views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
   button_row_layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_STRETCH);
   button_row_layout->SetDefaultFlex(1);
-  AddChildView(button_row_);
+  main_row_->AddChildView(button_row_);
 
   CreateMediaButton(vector_icons::kMediaPreviousTrackIcon,
                     MediaSessionAction::kPreviousTrack);
@@ -129,6 +138,7 @@ MediaNotificationView::MediaNotificationView(
   UpdateControlButtonsVisibilityWithNotification(notification);
   UpdateCornerRadius(message_center::kNotificationCornerRadius,
                      message_center::kNotificationCornerRadius);
+  UpdateViewForExpandedState();
 
   Shell::Get()->media_notification_controller()->SetView(this);
 }
@@ -160,6 +170,16 @@ void MediaNotificationView::UpdateControlButtonsVisibility() {
   control_buttons_view_->SetVisible(target_visibility);
 }
 
+void MediaNotificationView::SetExpanded(bool expanded) {
+  if (expanded_ == expanded)
+    return;
+
+  expanded_ = expanded;
+
+  UpdateViewForExpandedState();
+  PreferredSizeChanged();
+}
+
 void MediaNotificationView::OnMouseEvent(ui::MouseEvent* event) {
   switch (event->type()) {
     case ui::ET_MOUSE_ENTERED:
@@ -175,10 +195,18 @@ void MediaNotificationView::OnMouseEvent(ui::MouseEvent* event) {
 
 void MediaNotificationView::ButtonPressed(views::Button* sender,
                                           const ui::Event& event) {
+  if (sender == header_row_) {
+    SetExpanded(!expanded_);
+    return;
+  }
+
   if (sender->parent() == button_row_) {
     message_center::MessageCenter::Get()->ClickOnNotificationButton(
         notification_id(), sender->tag());
+    return;
   }
+
+  NOTREACHED();
 }
 
 void MediaNotificationView::UpdateWithMediaSessionInfo(
@@ -217,6 +245,42 @@ void MediaNotificationView::UpdateControlButtonsVisibilityWithNotification(
   UpdateControlButtonsVisibility();
 }
 
+void MediaNotificationView::UpdateViewForExpandedState() {
+  // We should reduce the number of action buttons we show when we are
+  // collapsed.
+  for (int i = 0; i < button_row_->child_count(); ++i) {
+    views::Button* action_button =
+        views::Button::AsButton(button_row_->child_at(i));
+
+    action_button->SetVisible(expanded_ || ShouldShowActionWhenCollapsed(
+                                               static_cast<MediaSessionAction>(
+                                                   action_button->tag())));
+  }
+
+  // Adjust the layout of the |main_row_| based on the expanded state. If the
+  // notification is expanded then the buttons should be below the title/artist
+  // information. If it is collapsed then the buttons will be to the right.
+  if (expanded_) {
+    main_row_
+        ->SetLayoutManager(std::make_unique<views::BoxLayout>(
+            views::BoxLayout::kVertical,
+            gfx::Insets(kDefaultMarginSize, kDefaultMarginSize,
+                        kDefaultMarginSize, kRightMarginExpandedSize),
+            kDefaultMarginSize))
+        ->SetDefaultFlex(1);
+  } else {
+    main_row_
+        ->SetLayoutManager(std::make_unique<views::BoxLayout>(
+            views::BoxLayout::kHorizontal,
+            gfx::Insets(0, kDefaultMarginSize, kDefaultMarginSize,
+                        kRightMarginSize),
+            kDefaultMarginSize, true))
+        ->SetDefaultFlex(1);
+  }
+
+  header_row_->SetExpanded(expanded_);
+}
+
 void MediaNotificationView::CreateMediaButton(const gfx::VectorIcon& icon,
                                               MediaSessionAction action) {
   views::ImageButton* button = views::CreateVectorImageButton(this);

ash/media/media_notification_view.h

@@ -48,6 +48,7 @@ class ASH_EXPORT MediaNotificationView : public message_center::MessageView,
   message_center::NotificationControlButtonsView* GetControlButtonsView()
       const override;
   void UpdateControlButtonsVisibility() override;
+  void SetExpanded(bool expanded) override;
 
   // views::View:
   void OnMouseEvent(ui::MouseEvent* event) override;
@@ -70,10 +71,15 @@ class ASH_EXPORT MediaNotificationView : public message_center::MessageView,
   void CreateMediaButton(const gfx::VectorIcon& icon,
                          media_session::mojom::MediaSessionAction action);
 
+  void UpdateViewForExpandedState();
+
   // View containing close and settings buttons.
   std::unique_ptr<message_center::NotificationControlButtonsView>
       control_buttons_view_;
 
+  // Whether this notification is expanded or not.
+  bool expanded_ = false;
+
   // Container views directly attached to this view.
   message_center::NotificationHeaderView* header_row_ = nullptr;
   views::View* button_row_ = nullptr;
@@ -81,6 +87,7 @@ class ASH_EXPORT MediaNotificationView : public message_center::MessageView,
   views::View* title_artist_row_ = nullptr;
   views::Label* title_label_ = nullptr;
   views::Label* artist_label_ = nullptr;
+  views::View* main_row_ = nullptr;
 
   DISALLOW_COPY_AND_ASSIGN(MediaNotificationView);
 };

ash/media/media_notification_view_unittest.cc

@@ -26,6 +26,7 @@
 #include "ui/message_center/message_center.h"
 #include "ui/message_center/views/message_view_factory.h"
 #include "ui/message_center/views/notification_control_buttons_view.h"
+#include "ui/message_center/views/notification_header_view.h"
 
 namespace ash {
 
@@ -36,7 +37,7 @@ namespace {
 
 // The icons size is 24 and INSETS_VECTOR_IMAGE_BUTTON will add padding around
 // the image.
-const int kMediaButtonIconSize = 32;
+const int kMediaButtonIconSize = 24;
 
 // Checks if the view class name is used by a media button.
 bool IsMediaButtonType(const char* class_name) {
@@ -145,6 +146,7 @@ class MediaNotificationViewTest : public AshTestBase {
     return media_controller_.get();
   }
 
+  views::View* header_row() const { return view_->header_row_; }
   views::View* button_row() const { return view_->button_row_; }
 
   views::View* title_artist_row() const { return view_->title_artist_row_; }
@@ -164,6 +166,8 @@ class MediaNotificationViewTest : public AshTestBase {
     return nullptr;
   }
 
+  bool is_expanded() const { return view_->expanded_; }
+
  private:
   std::unique_ptr<message_center::MessageView> CreateAndCaptureCustomView(
       const message_center::Notification& notification) {
@@ -216,8 +220,8 @@ TEST_F(MediaNotificationViewTest, ButtonsSanityCheck) {
     ASSERT_TRUE(IsMediaButtonType(child->GetClassName()));
 
     EXPECT_TRUE(child->visible());
-    EXPECT_EQ(kMediaButtonIconSize, child->width());
-    EXPECT_EQ(kMediaButtonIconSize, child->height());
+    EXPECT_LT(kMediaButtonIconSize, child->width());
+    EXPECT_LT(kMediaButtonIconSize, child->height());
   }
 
   EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kPlay));
@@ -451,4 +455,65 @@ TEST_F(MediaNotificationViewTest, UpdateMetadata_FromObserver_NoTitle) {
   EXPECT_EQ(metadata.artist, artist_label()->text());
 }
 
+TEST_F(MediaNotificationViewTest, Buttons_WhenCollapsed) {
+  media_session::MediaMetadata metadata;
+  metadata.artist = base::ASCIIToUTF16("artist");
+
+  Shell::Get()->media_notification_controller()->MediaSessionMetadataChanged(
+      metadata);
+
+  view()->SetExpanded(false);
+
+  EXPECT_FALSE(is_expanded());
+
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kPlay)->visible());
+  EXPECT_TRUE(
+      GetButtonForAction(MediaSessionAction::kPreviousTrack)->visible());
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kNextTrack)->visible());
+  EXPECT_FALSE(
+      GetButtonForAction(MediaSessionAction::kSeekBackward)->visible());
+  EXPECT_FALSE(GetButtonForAction(MediaSessionAction::kSeekForward)->visible());
+}
+
+TEST_F(MediaNotificationViewTest, Buttons_WhenExpanded) {
+  media_session::MediaMetadata metadata;
+  metadata.artist = base::ASCIIToUTF16("artist");
+
+  Shell::Get()->media_notification_controller()->MediaSessionMetadataChanged(
+      metadata);
+
+  view()->SetExpanded(true);
+
+  EXPECT_TRUE(is_expanded());
+
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kPlay)->visible());
+  EXPECT_TRUE(
+      GetButtonForAction(MediaSessionAction::kPreviousTrack)->visible());
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kNextTrack)->visible());
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kSeekBackward)->visible());
+  EXPECT_TRUE(GetButtonForAction(MediaSessionAction::kSeekForward)->visible());
+}
+
+TEST_F(MediaNotificationViewTest, ClickHeader_ToggleExpand) {
+  EXPECT_TRUE(is_expanded());
+
+  {
+    gfx::Point cursor_location(1, 1);
+    views::View::ConvertPointToScreen(header_row(), &cursor_location);
+    GetEventGenerator()->MoveMouseTo(cursor_location.x(), cursor_location.y());
+    GetEventGenerator()->ClickLeftButton();
+  }
+
+  EXPECT_FALSE(is_expanded());
+
+  {
+    gfx::Point cursor_location(1, 1);
+    views::View::ConvertPointToScreen(header_row(), &cursor_location);
+    GetEventGenerator()->MoveMouseTo(cursor_location.x(), cursor_location.y());
+    GetEventGenerator()->ClickLeftButton();
+  }
+
+  EXPECT_TRUE(is_expanded());
+}
+
 }  // namespace ash