CrOS GMC: Layout and UI adjustments.

This CL adjusts layout to match the spec, adds ink drop to action
buttons, and adds a drop down icon next to title label.

Bug: 1133026
Change-Id: I46a8af315c98b43e2b557908dfebf810c1666ef0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2436419Reviewed-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@{#811905}

ash/system/media/media_tray.cc

@@ -17,7 +17,6 @@
 #include "ash/system/tray/tray_bubble_wrapper.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_container.h"
-#include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/tray/tray_utils.h"
 #include "base/strings/string_util.h"
 #include "components/prefs/pref_change_registrar.h"
@@ -37,6 +36,9 @@ namespace ash {
 
 namespace {
 
+constexpr int kTitleFontSizeIncrease = 4;
+constexpr int kTitleViewHeight = 56;
+
 constexpr gfx::Insets kTitleViewInsets = gfx::Insets(0, 16, 0, 16);
 
 // Minimum screen diagonal (in inches) for pinning global media controls
@@ -82,7 +84,7 @@ class GlobalMediaControlsTitleView : public views::View {
 
     auto* box_layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
         views::BoxLayout::Orientation::kHorizontal, kTitleViewInsets));
-    box_layout->set_minimum_cross_axis_size(kTrayPopupItemMinHeight);
+    box_layout->set_minimum_cross_axis_size(kTitleViewHeight);
     box_layout->set_cross_axis_alignment(
         views::BoxLayout::CrossAxisAlignment::kCenter);
 
@@ -90,9 +92,11 @@ class GlobalMediaControlsTitleView : public views::View {
     title_label->SetText(
         l10n_util::GetStringUTF16(IDS_ASH_GLOBAL_MEDIA_CONTROLS_TITLE));
     title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SMALL_TITLE,
-                             true /* use_unified_theme */);
-    style.SetupLabel(title_label);
+    title_label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kTextColorPrimary));
+    title_label->SetAutoColorReadabilityEnabled(false);
+    title_label->SetFontList(views::Label::GetDefaultFontList().Derive(
+        kTitleFontSizeIncrease, gfx::Font::NORMAL, gfx::Font::Weight::MEDIUM));
 
     // Media tray should always be pinned to shelf when we are opening the
     // dialog.

ash/system/media/unified_media_controls_container.cc

@@ -10,7 +10,7 @@
 namespace ash {
 
 namespace {
-constexpr int kContainerHeight = 80;
+constexpr int kContainerHeight = 72;
 constexpr gfx::Insets kContainerInsets = gfx::Insets(0, 16, 16, 16);
 }  // namespace
 

ash/system/media/unified_media_controls_controller_unittest.cc

@@ -27,7 +27,7 @@ namespace {
 constexpr int kHideControlsDelay = 2000; /* in milliseconds */
 constexpr int kHideArtworkDelay = 2000;  /* in milliseconds */
 constexpr int kArtworkCornerRadius = 4;
-constexpr int kArtworkHeight = 48;
+constexpr int kArtworkHeight = 40;
 
 class MockMediaControlsDelegate
     : public UnifiedMediaControlsController::Delegate {
@@ -266,7 +266,7 @@ TEST_F(UnifiedMediaControlsControllerTest, UpdateArtwork) {
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(0, 12, 48, 24);
+    gfx::Rect expect_bounds(0, 10, 40, 20);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
 
@@ -281,7 +281,7 @@ TEST_F(UnifiedMediaControlsControllerTest, UpdateArtwork) {
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(12, 0, 24, 48);
+    gfx::Rect expect_bounds(10, 0, 20, 40);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
 
@@ -296,7 +296,7 @@ TEST_F(UnifiedMediaControlsControllerTest, UpdateArtwork) {
   controller()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
   {
-    gfx::Rect expect_bounds(14, 0, 20, kArtworkHeight);
+    gfx::Rect expect_bounds(10, 0, 20, kArtworkHeight);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(artwork_bounds, expect_bounds);
 

ash/system/media/unified_media_controls_view.cc

@@ -4,16 +4,22 @@
 
 #include "ash/system/media/unified_media_controls_view.h"
 
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/media/unified_media_controls_controller.h"
 #include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_utils.h"
 #include "components/media_message_center/media_notification_util.h"
 #include "components/vector_icons/vector_icons.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/paint_vector_icon.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/background.h"
 #include "ui/views/border.h"
+#include "ui/views/controls/highlight_path_generator.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
@@ -25,16 +31,18 @@ using media_session::mojom::MediaSessionAction;
 namespace {
 
 constexpr int kMediaControlsCornerRadius = 8;
-constexpr int kMediaControlsViewPadding = 8;
-constexpr int kMediaButtonsPadding = 4;
-constexpr int kMediaButtonIconSize = 18;
+constexpr int kMediaControlsViewPadding = 16;
+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(0, 8, 0, 0);
-constexpr gfx::Insets kMediaControlsViewInsets = gfx::Insets(8, 8, 8, 8);
+constexpr gfx::Insets kTrackColumnInsets = gfx::Insets(1, 0, 1, 0);
+constexpr gfx::Insets kMediaControlsViewInsets = gfx::Insets(8, 8, 8, 12);
 
-constexpr gfx::Size kArtworkSize = gfx::Size(48, 48);
-constexpr gfx::Size kMediaButtonSize = gfx::Size(36, 36);
+constexpr gfx::Size kArtworkSize = gfx::Size(40, 40);
+constexpr gfx::Size kMediaButtonSize = gfx::Size(32, 32);
 
 gfx::Size ScaleSizeToFitView(const gfx::Size& size,
                              const gfx::Size& view_size) {
@@ -93,6 +101,9 @@ UnifiedMediaControlsView::MediaActionButton::MediaActionButton(
   SetImageVerticalAlignment(views::ImageButton::ALIGN_MIDDLE);
   SetPreferredSize(kMediaButtonSize);
   SetAction(action, accessible_name);
+
+  TrayPopupUtils::ConfigureTrayPopupButton(this);
+  views::InstallCircleHighlightPathGenerator(this);
 }
 
 void UnifiedMediaControlsView::MediaActionButton::SetAction(
@@ -107,6 +118,25 @@ void UnifiedMediaControlsView::MediaActionButton::SetAction(
                    AshColorProvider::ContentLayerType::kIconColorPrimary)));
 }
 
+std::unique_ptr<views::InkDrop>
+UnifiedMediaControlsView::MediaActionButton::CreateInkDrop() {
+  auto ink_drop = TrayPopupUtils::CreateInkDrop(this);
+  ink_drop->SetShowHighlightOnHover(true);
+  return ink_drop;
+}
+
+std::unique_ptr<views::InkDropHighlight>
+UnifiedMediaControlsView::MediaActionButton::CreateInkDropHighlight() const {
+  return TrayPopupUtils::CreateInkDropHighlight(this);
+}
+
+std::unique_ptr<views::InkDropRipple>
+UnifiedMediaControlsView::MediaActionButton::CreateInkDropRipple() const {
+  return TrayPopupUtils::CreateInkDropRipple(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this,
+      GetInkDropCenterBasedOnLastEvent());
+}
+
 UnifiedMediaControlsView::UnifiedMediaControlsView(
     UnifiedMediaControlsController* controller)
     : views::Button(this), controller_(controller) {
@@ -129,6 +159,12 @@ UnifiedMediaControlsView::UnifiedMediaControlsView(
   track_column->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kVertical, kTrackColumnInsets));
 
+  auto title_row = std::make_unique<views::View>();
+  auto* title_row_layout =
+      title_row->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal, gfx::Insets()));
+  title_row_layout->set_minimum_cross_axis_size(kTitleRowHeight);
+
   auto config_label = [](views::Label* label) {
     label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
     label->SetAutoColorReadabilityEnabled(false);
@@ -139,7 +175,21 @@ UnifiedMediaControlsView::UnifiedMediaControlsView(
   config_label(title_label.get());
   title_label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
-  title_label_ = track_column->AddChildView(std::move(title_label));
+  title_label->SetFontList(
+      views::Label::GetDefaultFontList().DeriveWithSizeDelta(
+          kTrackTitleFontSizeIncrease));
+  title_label_ = title_row->AddChildView(std::move(title_label));
+
+  auto drop_down_icon = std::make_unique<views::ImageView>();
+  drop_down_icon->SetPreferredSize(gfx::Size(kTitleRowHeight, kTitleRowHeight));
+  drop_down_icon->SetImage(CreateVectorIcon(
+      kUnifiedMenuMoreIcon,
+      AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kIconColorPrimary)));
+  title_row->AddChildView(std::move(drop_down_icon));
+
+  title_row_layout->SetFlexForView(title_label_, 1);
+  track_column->AddChildView(std::move(title_row));
 
   auto artist_label = std::make_unique<views::Label>();
   config_label(artist_label.get());

ash/system/media/unified_media_controls_view.h

@@ -57,6 +57,12 @@ class ASH_EXPORT UnifiedMediaControlsView : public views::Button,
 
     void SetAction(media_session::mojom::MediaSessionAction action,
                    const base::string16& accessible_name);
+
+    // views::ImageButton:
+    std::unique_ptr<views::InkDrop> CreateInkDrop() override;
+    std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+        const override;
+    std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
   };
 
   SkPath GetArtworkClipPath();