CrOS GMC: Polish UI in quick settings.

This CL makes the following changes:
1. Modified layout so that the title/artist text will have more spaces
to the left border when artwork is hidden.
2. Hide artist label and center title label vertically if artist
is empty.
3. Modify artwork image so that it will always appear as a square. (If
the artwork is not a perfect square, we will scale it up/down and clip
the center square of the artwork.)
4. Fix drop down arrow layout bug.

Bug: 1144309
Change-Id: If0c7b0af690483644dede6866f54cde4e3beb2ed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2522675
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825006}

ash/system/media/unified_media_controls_controller_unittest.cc

@@ -269,44 +269,35 @@ TEST_F(UnifiedMediaControlsControllerTest, UpdateArtwork) {
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(0, 10, 40, 20);
+    gfx::Rect expect_bounds(-20, 0, 80, 40);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
 
     SkPath path;
-    path.addRoundRect(gfx::RectToSkRect(expect_bounds), kArtworkCornerRadius,
-                      kArtworkCornerRadius);
+    path.addRoundRect(
+        gfx::RectToSkRect(gfx::Rect(0, 0, kArtworkHeight, kArtworkHeight)),
+        kArtworkCornerRadius, kArtworkCornerRadius);
     EXPECT_EQ(path, GetArtworkClipPath());
   }
 
   // Test that artwork will be scaled up if too small.
-  artwork.allocN32Pixels(10, 20);
+  artwork.allocN32Pixels(20, 40);
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(10, 0, 20, 40);
+    gfx::Rect expect_bounds(0, -20, 40, 80);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
-
-    SkPath path;
-    path.addRoundRect(gfx::RectToSkRect(expect_bounds), kArtworkCornerRadius,
-                      kArtworkCornerRadius);
-    EXPECT_EQ(path, GetArtworkClipPath());
   }
 
   // Test that artwork fit right in to the artwork view.
-  artwork.allocN32Pixels(20, kArtworkHeight);
+  artwork.allocN32Pixels(60, kArtworkHeight);
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(10, 0, 20, kArtworkHeight);
+    gfx::Rect expect_bounds(-10, 0, 60, kArtworkHeight);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
-
-    SkPath path;
-    path.addRoundRect(gfx::RectToSkRect(expect_bounds), kArtworkCornerRadius,
-                      kArtworkCornerRadius);
-    EXPECT_EQ(path, GetArtworkClipPath());
   }
 
   // Test that artwork view will be hidden after |kHideArtworkDelay| ms if
@@ -639,4 +630,20 @@ TEST_F(UnifiedMediaControlsControllerTest,
   generator->ClickLeftButton();
 }
 
+TEST_F(UnifiedMediaControlsControllerTest, ArtistVisibility) {
+  auto request_id = base::UnguessableToken::Create();
+  controller()->MediaSessionChanged(request_id);
+
+  media_session::MediaMetadata metadata;
+  metadata.title = base::ASCIIToUTF16("title");
+  controller()->MediaSessionMetadataChanged(metadata);
+
+  // Artist label should be hidden if empty.
+  EXPECT_FALSE(artist_label()->GetVisible());
+
+  metadata.artist = base::ASCIIToUTF16("artist");
+  controller()->MediaSessionMetadataChanged(metadata);
+  EXPECT_TRUE(artist_label()->GetVisible());
+}
+
 }  // namespace ash

ash/system/media/unified_media_controls_view.cc

@@ -31,14 +31,14 @@ using media_session::mojom::MediaSessionAction;
 namespace {
 
 constexpr int kMediaControlsCornerRadius = 8;
-constexpr int kMediaControlsViewPadding = 16;
+constexpr int kMediaControlsViewPadding = 8;
 constexpr int kMediaButtonsPadding = 8;
 constexpr int kMediaButtonIconSize = 20;
 constexpr int kArtworkCornerRadius = 4;
 constexpr int kTitleRowHeight = 20;
 constexpr int kTrackTitleFontSizeIncrease = 1;
 
-constexpr gfx::Insets kTrackColumnInsets = gfx::Insets(1, 0, 1, 0);
+constexpr gfx::Insets kTrackColumnInsets = gfx::Insets(1, 8, 1, 8);
 constexpr gfx::Insets kMediaControlsViewInsets = gfx::Insets(8, 8, 8, 12);
 
 constexpr gfx::Size kEmptyArtworkIconSize = gfx::Size(20, 20);
@@ -47,14 +47,14 @@ constexpr gfx::Size kMediaButtonSize = gfx::Size(32, 32);
 
 gfx::Size ScaleSizeToFitView(const gfx::Size& size,
                              const gfx::Size& view_size) {
-  // If |size| is too big in either dimension or two small in both
+  // If |size| is too small in either dimension or too big in both
   // dimensions, scale it appropriately.
-  if ((size.width() > view_size.width() ||
+  if ((size.width() > view_size.width() &&
        size.height() > view_size.height()) ||
-      (size.width() < view_size.width() &&
+      (size.width() < view_size.width() ||
        size.height() < view_size.height())) {
     const float scale =
-        std::min(view_size.width() / static_cast<float>(size.width()),
+        std::max(view_size.width() / static_cast<float>(size.width()),
                  view_size.height() / static_cast<float>(size.height()));
     return gfx::ScaleToFlooredSize(size, scale);
   }
@@ -186,8 +186,11 @@ UnifiedMediaControlsView::UnifiedMediaControlsView(
   artwork_view_->SetVisible(false);
 
   auto track_column = std::make_unique<views::View>();
-  track_column->SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, kTrackColumnInsets));
+  auto* track_column_layout =
+      track_column->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kVertical, kTrackColumnInsets));
+  track_column_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kStart);
 
   auto title_row = std::make_unique<views::View>();
   auto* title_row_layout =
@@ -212,6 +215,7 @@ UnifiedMediaControlsView::UnifiedMediaControlsView(
   drop_down_icon_->SetPreferredSize(
       gfx::Size(kTitleRowHeight, kTitleRowHeight));
 
+  title_row_layout->SetFlexForView(title_label_, 1);
   track_column->AddChildView(std::move(title_row));
 
   artist_label_ = track_column->AddChildView(std::make_unique<views::Label>());
@@ -283,6 +287,12 @@ void UnifiedMediaControlsView::SetTitle(const base::string16& title) {
 
 void UnifiedMediaControlsView::SetArtist(const base::string16& artist) {
   artist_label_->SetText(artist);
+
+  if (artist_label_->GetVisible() != artist.empty())
+    return;
+
+  artist_label_->SetVisible(!artist.empty());
+  InvalidateLayout();
 }
 
 void UnifiedMediaControlsView::UpdateActionButtonAvailability(
@@ -344,7 +354,7 @@ void UnifiedMediaControlsView::ShowEmptyState() {
       AshColorProvider::Get()->GetContentLayerColor(
           AshColorProvider::ContentLayerType::kIconColorSecondary)));
 
-  artwork_view_->SetClipPath(GetArtworkClipPath(kArtworkSize));
+  artwork_view_->SetClipPath(GetArtworkClipPath());
 }
 
 void UnifiedMediaControlsView::OnNewMediaSession() {
@@ -366,17 +376,10 @@ void UnifiedMediaControlsView::OnNewMediaSession() {
   artwork_view_->SetBackground(nullptr);
 }
 
-SkPath UnifiedMediaControlsView::GetArtworkClipPath(
-    base::Optional<gfx::Size> image_size) {
-  // Calculate image bounds since we might need to draw this when image is
-  // not visible (i.e. when quick setting bubble is collapsed).
-  if (!image_size.has_value())
-    image_size = artwork_view_->GetImageBounds().size();
-  int x = (kArtworkSize.width() - image_size->width()) / 2;
-  int y = (kArtworkSize.height() - image_size->height()) / 2;
+SkPath UnifiedMediaControlsView::GetArtworkClipPath() {
   SkPath path;
-  path.addRoundRect(gfx::RectToSkRect(gfx::Rect(x, y, image_size->width(),
-                                                image_size->height())),
+  path.addRoundRect(gfx::RectToSkRect(gfx::Rect(0, 0, kArtworkSize.width(),
+                                                kArtworkSize.height())),
                     kArtworkCornerRadius, kArtworkCornerRadius);
   return path;
 }

ash/system/media/unified_media_controls_view.h

@@ -79,8 +79,7 @@ class ASH_EXPORT UnifiedMediaControlsView : public views::Button {
     media_session::mojom::MediaSessionAction action_;
   };
 
-  SkPath GetArtworkClipPath(
-      base::Optional<gfx::Size> image_size = base::nullopt);
+  SkPath GetArtworkClipPath();
 
   UnifiedMediaControlsController* const controller_ = nullptr;