[Lock Screen Media Controls] Add title and artist labels

This CL adds the current track title and artist to the right of the
artwork in a vertical layout. This CL also fixes the elide behavior of
the app/source label on the header row.

See bug for pictures.

Bug: 991647
Change-Id: Ia9c8601a17e1ce472bb984e90cb8a11926edb307
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1752170Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Mia Bergeron <miaber@google.com>
Cr-Commit-Position: refs/heads/master@{#686494}

ash/login/ui/lock_screen_media_controls_view.cc

@@ -19,12 +19,15 @@
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/compositor/scoped_layer_animation_settings.h"
+#include "ui/gfx/font.h"
+#include "ui/gfx/font_list.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/message_center/message_center.h"
 #include "ui/message_center/vector_icons.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/controls/image_view.h"
+#include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 
 namespace ash {
@@ -48,6 +51,8 @@ constexpr int kIconSize = 20;
 constexpr int kMinimumArtworkSize = 50;
 constexpr int kDesiredArtworkSize = 80;
 constexpr gfx::Size kArtworkSize = gfx::Size(80, 80);
+constexpr int kArtworkRowSeparator = 10;
+constexpr gfx::Size kArtworkRowPreferredSize = gfx::Size(300, 10);
 constexpr gfx::Size kMediaButtonSize = gfx::Size(38, 38);
 constexpr int kMediaButtonRowSeparator = 24;
 constexpr gfx::Insets kButtonRowInsets = gfx::Insets(10, 0, 0, 0);
@@ -156,11 +161,54 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
       std::make_unique<MediaControlsHeaderView>(base::BindOnce(
           &LockScreenMediaControlsView::Dismiss, base::Unretained(this))));
 
+  // |artwork_row| contains the session artwork, artist and track info.
+  auto artwork_row = std::make_unique<NonAccessibleView>();
+  artwork_row->SetPreferredSize(kArtworkRowPreferredSize);
+  auto* artwork_row_layout =
+      artwork_row->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
+          kArtworkRowSeparator));
+  artwork_row_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+  artwork_row_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kStart);
+
   auto session_artwork = std::make_unique<views::ImageView>();
   session_artwork->SetPreferredSize(kArtworkSize);
-  session_artwork->SetHorizontalAlignment(
-      views::ImageView::Alignment::kLeading);
-  session_artwork_ = contents_view_->AddChildView(std::move(session_artwork));
+  session_artwork_ = artwork_row->AddChildView(std::move(session_artwork));
+
+  // |track_column| contains the title and artist labels of the current media
+  // session.
+  auto track_column = std::make_unique<NonAccessibleView>();
+  auto* track_column_layout =
+      track_column->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kVertical));
+  track_column_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kCenter);
+
+  const gfx::FontList& base_font_list = views::Label::GetDefaultFontList();
+
+  auto title_label = std::make_unique<views::Label>();
+  title_label->SetFontList(base_font_list.Derive(
+      2, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::BOLD));
+  title_label->SetEnabledColor(SK_ColorWHITE);
+  title_label->SetAutoColorReadabilityEnabled(false);
+  title_label->SetElideBehavior(gfx::ELIDE_TAIL);
+  title_label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
+  title_label_ = track_column->AddChildView(std::move(title_label));
+
+  auto artist_label = std::make_unique<views::Label>();
+  artist_label->SetFontList(base_font_list.Derive(
+      0, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::LIGHT));
+  artist_label->SetEnabledColor(SK_ColorWHITE);
+  artist_label->SetAutoColorReadabilityEnabled(false);
+  artist_label->SetElideBehavior(gfx::ELIDE_TAIL);
+  artist_label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
+  artist_label_ = track_column->AddChildView(std::move(artist_label));
+
+  artwork_row->AddChildView(std::move(track_column));
+
+  contents_view_->AddChildView(std::move(artwork_row));
 
   progress_ = contents_view_->AddChildView(
       std::make_unique<media_message_center::MediaControlsProgressView>(
@@ -340,6 +388,9 @@ void LockScreenMediaControlsView::MediaSessionMetadataChanged(
           : session_metadata.source_title;
   header_row_->SetAppName(source_title);
 
+  title_label_->SetText(session_metadata.title);
+  artist_label_->SetText(session_metadata.artist);
+
   accessible_name_ =
       media_message_center::GetAccessibleNameFromMetadata(session_metadata);
 }

ash/login/ui/lock_screen_media_controls_view.h

@@ -20,6 +20,7 @@ class Connector;
 }
 
 namespace views {
+class Label;
 class ImageView;
 class ToggleImageButton;
 }  // namespace views
@@ -200,6 +201,8 @@ class ASH_EXPORT LockScreenMediaControlsView
   // Container views attached to |contents_view_|.
   MediaControlsHeaderView* header_row_ = nullptr;
   views::ImageView* session_artwork_ = nullptr;
+  views::Label* title_label_ = nullptr;
+  views::Label* artist_label_ = nullptr;
   NonAccessibleView* button_row_ = nullptr;
   views::ToggleImageButton* play_pause_button_ = nullptr;
   media_message_center::MediaControlsProgressView* progress_ = nullptr;

ash/login/ui/lock_screen_media_controls_view_unittest.cc

@@ -21,6 +21,7 @@
 #include "ui/views/animation/bounds_animator.h"
 #include "ui/views/animation/bounds_animator_observer.h"
 #include "ui/views/controls/image_view.h"
+#include "ui/views/controls/label.h"
 
 namespace ash {
 
@@ -202,6 +203,14 @@ class LockScreenMediaControlsViewTest : public LoginTestBase {
     return media_controls_view_->session_artwork_;
   }
 
+  views::Label* title_label() const {
+    return media_controls_view_->title_label_;
+  }
+
+  views::Label* artist_label() const {
+    return media_controls_view_->artist_label_;
+  }
+
   media_message_center::MediaControlsProgressView* progress_view() const {
     return media_controls_view_->progress_;
   }
@@ -237,18 +246,26 @@ class LockScreenMediaControlsViewTest : public LoginTestBase {
 };
 
 TEST_F(LockScreenMediaControlsViewTest, DoNotUpdateMetadataBetweenSessions) {
-  // Set app name for current session
+  // Set metadata for current session
   media_session::MediaMetadata metadata;
   metadata.source_title = kTestAppName;
+  metadata.title = base::ASCIIToUTF16("title");
+  metadata.artist = base::ASCIIToUTF16("artist");
+
   media_controls_view_->MediaSessionMetadataChanged(metadata);
 
   // Simulate new media session starting.
   metadata.source_title = base::ASCIIToUTF16("AppName2");
+  metadata.title = base::ASCIIToUTF16("title2");
+  metadata.artist = base::ASCIIToUTF16("artist2");
+
   SimulateMediaSessionChanged(
       media_session::mojom::MediaPlaybackState::kPlaying);
   media_controls_view_->MediaSessionMetadataChanged(metadata);
 
   EXPECT_EQ(kTestAppName, GetAppName());
+  EXPECT_EQ(base::ASCIIToUTF16("title"), title_label()->GetText());
+  EXPECT_EQ(base::ASCIIToUTF16("artist"), artist_label()->GetText());
 }
 
 TEST_F(LockScreenMediaControlsViewTest, DoNotUpdateArtworkBetweenSessions) {
@@ -533,7 +550,7 @@ TEST_F(LockScreenMediaControlsViewTest, UpdateAppIcon) {
   EXPECT_EQ(kAppIconSize, icon_view()->GetImage().height());
 }
 
-TEST_F(LockScreenMediaControlsViewTest, UpdateAppName) {
+TEST_F(LockScreenMediaControlsViewTest, UpdateMetadata) {
   // Verify that the app name is initialized to the default.
   EXPECT_EQ(
       message_center::MessageCenter::Get()->GetSystemNotificationAppName(),
@@ -542,16 +559,21 @@ TEST_F(LockScreenMediaControlsViewTest, UpdateAppName) {
   media_session::MediaMetadata metadata;
   media_controls_view_->MediaSessionMetadataChanged(metadata);
 
-  // Verify that default name is used if no name is provided.
+  // Verify that default app name is used if no name is provided.
   EXPECT_EQ(
       message_center::MessageCenter::Get()->GetSystemNotificationAppName(),
       GetAppName());
 
   metadata.source_title = kTestAppName;
+  metadata.title = base::ASCIIToUTF16("title");
+  metadata.artist = base::ASCIIToUTF16("artist");
+
   media_controls_view_->MediaSessionMetadataChanged(metadata);
 
-  // Verify that the provided app name is used.
+  // Verify that the provided data is used.
   EXPECT_EQ(kTestAppName, GetAppName());
+  EXPECT_EQ(metadata.title, title_label()->GetText());
+  EXPECT_EQ(metadata.artist, artist_label()->GetText());
 }
 
 TEST_F(LockScreenMediaControlsViewTest, UpdateImagesConvertColors) {

ash/login/ui/media_controls_header_view.cc

@@ -30,16 +30,29 @@ constexpr int kIconSize = 18;
 constexpr int kHeaderTextFontSize = 12;
 constexpr gfx::Insets kIconPadding = gfx::Insets(1, 1, 1, 1);
 constexpr gfx::Insets kAppNamePadding = gfx::Insets(0, 10, 0, 0);
+constexpr gfx::Size kAppNamePreferredSize = gfx::Size(200, 10);
 constexpr int kIconCornerRadius = 1;
 constexpr gfx::Size kCloseButtonSize = gfx::Size(20, 20);
 constexpr int kCloseButtonIconSize = 18;
-constexpr gfx::Size kSpacerPreferredSize = gfx::Size(10, 5);
+constexpr gfx::Size kSpacerPreferredSize = gfx::Size(5, 5);
 
 }  // namespace
 
 MediaControlsHeaderView::MediaControlsHeaderView(
     base::OnceClosure close_button_cb)
     : close_button_cb_(std::move(close_button_cb)) {
+  const views::FlexSpecification kAppNameFlex =
+      views::FlexSpecification::ForSizeRule(
+          views::MinimumFlexSizeRule::kScaleToZero,
+          views::MaximumFlexSizeRule::kPreferred)
+          .WithOrder(1);
+
+  const views::FlexSpecification kSpacerFlex =
+      views::FlexSpecification::ForSizeRule(
+          views::MinimumFlexSizeRule::kScaleToMinimum,
+          views::MaximumFlexSizeRule::kUnbounded)
+          .WithOrder(2);
+
   auto* layout = SetLayoutManager(std::make_unique<views::FlexLayout>());
   layout->SetInteriorMargin(kHeaderViewInsets);
 
@@ -65,15 +78,15 @@ MediaControlsHeaderView::MediaControlsHeaderView(
   app_name_view->SetEnabledColor(SK_ColorWHITE);
   app_name_view->SetAutoColorReadabilityEnabled(false);
   app_name_view->SetBorder(views::CreateEmptyBorder(kAppNamePadding));
+  app_name_view->SetPreferredSize(kAppNamePreferredSize);
+  app_name_view->SetProperty(views::kFlexBehaviorKey, kAppNameFlex);
+  app_name_view->SetElideBehavior(gfx::ELIDE_TAIL);
   app_name_view_ = AddChildView(std::move(app_name_view));
 
   // Space between app name and close button.
   auto spacer = std::make_unique<NonAccessibleView>();
   spacer->SetPreferredSize(kSpacerPreferredSize);
-  spacer->SetProperty(views::kFlexBehaviorKey,
-                      views::FlexSpecification::ForSizeRule(
-                          views::MinimumFlexSizeRule::kScaleToMinimum,
-                          views::MaximumFlexSizeRule::kUnbounded));
+  spacer->SetProperty(views::kFlexBehaviorKey, kSpacerFlex);
   AddChildView(std::move(spacer));
 
   auto close_button = CreateVectorImageButton(this);