[Lockscreen Media Controls] Media controls layout modification.

Update lock screen media controls layout and icons.

Bug: 1015133
Change-Id: I288f4826e490c18d40217ddbfd4305b25fd8c514
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1865717Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707402}

ash/login/ui/lock_screen_media_controls_view.cc

@@ -15,6 +15,7 @@
 #include "base/metrics/histogram_functions.h"
 #include "components/media_message_center/media_controls_progress_view.h"
 #include "components/media_message_center/media_notification_util.h"
+#include "components/vector_icons/vector_icons.h"
 #include "services/media_session/public/cpp/util.h"
 #include "services/media_session/public/mojom/constants.mojom.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
@@ -42,39 +43,36 @@ using media_session::mojom::MediaSessionAction;
 
 namespace {
 
-constexpr SkColor kMediaButtonColor = SK_ColorWHITE;
-constexpr SkColor kProgressBarForeground =
-    SkColorSetARGB(0xFF, 0x8A, 0xB4, 0xF8);
+constexpr SkColor kProgressBarForeground = gfx::kGoogleBlue300;
 constexpr SkColor kProgressBarBackground =
-    SkColorSetARGB(0x4C, 0x8A, 0xB4, 0xF8);
+    SkColorSetA(gfx::kGoogleBlue300, 0x4C);  // 30%
 
 // Maximum number of actions that should be displayed on |button_row_|.
 constexpr size_t kMaxActions = 5;
 
 // Dimensions.
-constexpr gfx::Insets kMediaControlsInsets = gfx::Insets(15, 15, 15, 15);
+constexpr gfx::Insets kMediaControlsInsets = gfx::Insets(16, 16, 16, 16);
 constexpr int kMediaControlsCornerRadius = 16;
-constexpr int kMinimumIconSize = 16;
-constexpr int kDesiredIconSize = 20;
-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(46, 46);
-constexpr int kMediaButtonRowSeparator = 14;
-constexpr gfx::Insets kButtonRowInsets = gfx::Insets(10, 0, 0, 0);
-constexpr int kPlayPauseIconSize = 28;
-constexpr int kChangeTrackIconSize = 14;
-constexpr int kSeekingIconsSize = 26;
+constexpr int kMinimumSourceIconSize = 16;
+constexpr int kDesiredSourceIconSize = 20;
+constexpr int kMinimumArtworkSize = 30;
+constexpr int kDesiredArtworkSize = 48;
+constexpr int kArtworkRowPadding = 16;
+constexpr gfx::Insets kArtworkRowInsets = gfx::Insets(24, 0, 9, 0);
+constexpr gfx::Size kArtworkRowPreferredSize =
+    gfx::Size(328, kDesiredArtworkSize);
+constexpr int kMediaButtonRowPadding = 16;
+constexpr gfx::Insets kButtonRowInsets = gfx::Insets(4, 0, 0, 0);
+constexpr int kPlayPauseIconSize = 40;
+constexpr int kMediaControlsIconSize = 24;
+constexpr gfx::Size kPlayPauseButtonSize = gfx::Size(72, 72);
+constexpr gfx::Size kMediaControlsButtonSize = gfx::Size(48, 48);
 constexpr gfx::Size kMediaControlsButtonRowSize =
-    gfx::Size(300, kMediaButtonSize.height());
+    gfx::Size(328, kPlayPauseButtonSize.height());
 constexpr gfx::Size kMediaButtonGroupSize =
-    gfx::Size(2 * kMediaButtonSize.width() + kMediaButtonRowSeparator,
-              kMediaButtonSize.height());
+    gfx::Size(2 * kMediaControlsButtonSize.width() + kMediaButtonRowPadding,
+              kPlayPauseButtonSize.height());
 constexpr int kArtworkCornerRadius = 4;
-constexpr int kMediaActionButtonCornerRadius = kMediaButtonSize.width() / 2;
 
 constexpr int kDragVelocityThreshold = 6;
 constexpr int kDistanceDismissalThreshold = 20;
@@ -109,17 +107,17 @@ gfx::Size ScaleSizeToFitView(const gfx::Size& size,
 const gfx::VectorIcon& GetVectorIconForMediaAction(MediaSessionAction action) {
   switch (action) {
     case MediaSessionAction::kPreviousTrack:
-      return kLockScreenPreviousTrackIcon;
+      return vector_icons::kMediaPreviousTrackIcon;
     case MediaSessionAction::kPause:
-      return kLockScreenPauseIcon;
+      return vector_icons::kPauseIcon;
     case MediaSessionAction::kNextTrack:
-      return kLockScreenNextTrackIcon;
+      return vector_icons::kMediaNextTrackIcon;
     case MediaSessionAction::kPlay:
-      return kLockScreenPlayIcon;
+      return vector_icons::kPlayArrowIcon;
     case MediaSessionAction::kSeekBackward:
-      return kLockScreenSeekBackwardIcon;
+      return vector_icons::kMediaSeekBackwardIcon;
     case MediaSessionAction::kSeekForward:
-      return kLockScreenSeekForwardIcon;
+      return vector_icons::kMediaSeekForwardIcon;
 
     // The following actions are not yet supported on the controls.
     case MediaSessionAction::kStop:
@@ -141,7 +139,10 @@ class MediaActionButton : public views::ImageButton {
                     int icon_size,
                     MediaSessionAction action,
                     const base::string16& accessible_name)
-      : views::ImageButton(listener), icon_size_(icon_size) {
+      : views::ImageButton(listener),
+        is_play_pause_(action == MediaSessionAction::kPause ||
+                       action == MediaSessionAction::kPlay),
+        icon_size_(icon_size) {
     SetInkDropMode(views::Button::InkDropMode::ON);
     set_has_ink_drop_action_on_click(true);
     SetImageHorizontalAlignment(views::ImageButton::ALIGN_CENTER);
@@ -149,7 +150,8 @@ class MediaActionButton : public views::ImageButton {
     SetBorder(
         views::CreateEmptyBorder(views::LayoutProvider::Get()->GetInsetsMetric(
             views::INSETS_VECTOR_IMAGE_BUTTON)));
-    SetPreferredSize(kMediaButtonSize);
+    SetPreferredSize(is_play_pause_ ? kPlayPauseButtonSize
+                                    : kMediaControlsButtonSize);
     SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
     SetAction(action, accessible_name);
   }
@@ -160,16 +162,22 @@ class MediaActionButton : public views::ImageButton {
                  const base::string16& accessible_name) {
     set_tag(static_cast<int>(action));
     SetTooltipText(accessible_name);
-    views::SetImageFromVectorIcon(this, GetVectorIconForMediaAction(action),
-                                  icon_size_, kMediaButtonColor);
+    views::SetImageFromVectorIcon(
+        this, GetVectorIconForMediaAction(action), icon_size_,
+        AshColorProvider::Get()->GetContentLayerColor(
+            AshColorProvider::ContentLayerType::kIconPrimary,
+            AshColorProvider::AshColorMode::kDark));
   }
 
   std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
-    return std::make_unique<views::RoundRectInkDropMask>(
-        size(), gfx::Insets(), kMediaActionButtonCornerRadius);
+    return std::make_unique<views::CircleInkDropMask>(
+        size(), GetLocalBounds().CenterPoint(),
+        is_play_pause_ ? kPlayPauseButtonSize.width() / 2
+                       : kMediaControlsButtonSize.width() / 2);
   }
 
  private:
+  const bool is_play_pause_;
   int const icon_size_;
 
   DISALLOW_COPY_AND_ASSIGN(MediaActionButton);
@@ -234,15 +242,16 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   artwork_row->SetPreferredSize(kArtworkRowPreferredSize);
   auto* artwork_row_layout =
       artwork_row->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
-          kArtworkRowSeparator));
+          views::BoxLayout::Orientation::kHorizontal, kArtworkRowInsets,
+          kArtworkRowPadding));
   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->SetPreferredSize(
+      gfx::Size(kDesiredArtworkSize, kDesiredArtworkSize));
   session_artwork_ = artwork_row->AddChildView(std::move(session_artwork));
 
   // |track_column| contains the title and artist labels of the current media
@@ -259,7 +268,9 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   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->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextPrimary,
+      AshColorProvider::AshColorMode::kDark));
   title_label->SetAutoColorReadabilityEnabled(false);
   title_label->SetElideBehavior(gfx::ELIDE_TAIL);
   title_label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
@@ -268,7 +279,9 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   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->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextSecondary,
+      AshColorProvider::AshColorMode::kDark));
   artist_label->SetAutoColorReadabilityEnabled(false);
   artist_label->SetElideBehavior(gfx::ELIDE_TAIL);
   artist_label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
@@ -298,7 +311,7 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   auto* button_row_layout =
       button_row->SetLayoutManager(std::make_unique<views::BoxLayout>(
           views::BoxLayout::Orientation::kHorizontal, kButtonRowInsets,
-          kMediaButtonRowSeparator));
+          kMediaButtonRowPadding));
   button_row_layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kCenter);
   button_row_layout->set_main_axis_alignment(
@@ -307,7 +320,7 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   auto* left_control_group_layout =
       left_control_group->SetLayoutManager(std::make_unique<views::BoxLayout>(
           views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
-          kMediaButtonRowSeparator));
+          kMediaButtonRowPadding));
   left_control_group_layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kCenter);
   left_control_group_layout->set_main_axis_alignment(
@@ -316,7 +329,7 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
   auto* right_control_group_layout =
       right_control_group->SetLayoutManager(std::make_unique<views::BoxLayout>(
           views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
-          kMediaButtonRowSeparator));
+          kMediaButtonRowPadding));
   right_control_group_layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kCenter);
   right_control_group_layout->set_main_axis_alignment(
@@ -330,13 +343,13 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
 
   media_action_buttons_.push_back(
       left_control_group->AddChildView(std::make_unique<MediaActionButton>(
-          this, kChangeTrackIconSize, MediaSessionAction::kPreviousTrack,
+          this, kMediaControlsIconSize, MediaSessionAction::kPreviousTrack,
           l10n_util::GetStringUTF16(
               IDS_ASH_LOCK_SCREEN_MEDIA_CONTROLS_ACTION_PREVIOUS_TRACK))));
 
   media_action_buttons_.push_back(
       left_control_group->AddChildView(std::make_unique<MediaActionButton>(
-          this, kSeekingIconsSize, MediaSessionAction::kSeekBackward,
+          this, kMediaControlsIconSize, MediaSessionAction::kSeekBackward,
           l10n_util::GetStringUTF16(
               IDS_ASH_LOCK_SCREEN_MEDIA_CONTROLS_ACTION_SEEK_BACKWARD))));
 
@@ -354,13 +367,13 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
 
   media_action_buttons_.push_back(
       right_control_group->AddChildView(std::make_unique<MediaActionButton>(
-          this, kSeekingIconsSize, MediaSessionAction::kSeekForward,
+          this, kMediaControlsIconSize, MediaSessionAction::kSeekForward,
           l10n_util::GetStringUTF16(
               IDS_ASH_LOCK_SCREEN_MEDIA_CONTROLS_ACTION_SEEK_FORWARD))));
 
   media_action_buttons_.push_back(
       right_control_group->AddChildView(std::make_unique<MediaActionButton>(
-          this, kChangeTrackIconSize, MediaSessionAction::kNextTrack,
+          this, kMediaControlsIconSize, MediaSessionAction::kNextTrack,
           l10n_util::GetStringUTF16(
               IDS_ASH_LOCK_SCREEN_MEDIA_CONTROLS_ACTION_NEXT_TRACK))));
 
@@ -398,7 +411,7 @@ LockScreenMediaControlsView::LockScreenMediaControlsView(
 
   media_controller_remote_->ObserveImages(
       media_session::mojom::MediaSessionImageType::kSourceIcon,
-      kMinimumIconSize, kDesiredIconSize,
+      kMinimumSourceIconSize, kDesiredSourceIconSize,
       icon_observer_receiver_.BindNewPipeAndPassRemote());
 }
 
@@ -599,8 +612,9 @@ void LockScreenMediaControlsView::MediaControllerImageChanged(
       gfx::ImageSkia session_icon =
           gfx::ImageSkia::CreateFrom1xBitmap(converted_bitmap);
       if (session_icon.isNull()) {
-        session_icon = gfx::CreateVectorIcon(message_center::kProductIcon,
-                                             kIconSize, gfx::kChromeIconGrey);
+        session_icon =
+            gfx::CreateVectorIcon(message_center::kProductIcon,
+                                  kDesiredSourceIconSize, gfx::kChromeIconGrey);
       }
       header_row_->SetAppIcon(session_icon);
     }
@@ -748,7 +762,8 @@ void LockScreenMediaControlsView::SetArtwork(
     return;
   }
 
-  session_artwork_->SetImageSize(ScaleSizeToFitView(img->size(), kArtworkSize));
+  session_artwork_->SetImageSize(
+      ScaleSizeToFitView(img->size(), session_artwork_->GetPreferredSize()));
   session_artwork_->SetImage(*img);
   session_artwork_->set_clip_path(GetArtworkClipPath());
 }

ash/login/ui/lock_screen_media_controls_view_unittest.cc

@@ -36,7 +36,7 @@ using media_session::test::TestMediaController;
 namespace {
 
 const int kAppIconSize = 20;
-constexpr int kArtworkViewHeight = 80;
+constexpr int kArtworkViewHeight = 48;
 constexpr int kArtworkCornerRadius = 4;
 
 const base::string16 kTestAppName = base::ASCIIToUTF16("Test app");
@@ -746,7 +746,7 @@ TEST_F(LockScreenMediaControlsViewTest, UpdateArtwork) {
 
   {
     // Verify that the provided artwork is correctly scaled down.
-    gfx::Rect expected_artwork_bounds(0, 20, 80, 40);
+    gfx::Rect expected_artwork_bounds(0, 12, 48, 24);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(expected_artwork_bounds, artwork_bounds);
 
@@ -758,14 +758,14 @@ TEST_F(LockScreenMediaControlsViewTest, UpdateArtwork) {
   }
 
   // Create artwork that must be scaled up to fit the view.
-  artwork.allocN32Pixels(40, 70);
+  artwork.allocN32Pixels(20, 40);
 
   media_controls_view_->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
 
   {
     // Verify that the provided artwork is correctly scaled up.
-    gfx::Rect expected_artwork_bounds(17, 0, 45, 80);
+    gfx::Rect expected_artwork_bounds(12, 0, 24, 48);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(expected_artwork_bounds, artwork_bounds);
 
@@ -777,14 +777,14 @@ TEST_F(LockScreenMediaControlsViewTest, UpdateArtwork) {
   }
 
   // Create artwork that already fits the view size.
-  artwork.allocN32Pixels(70, kArtworkViewHeight);
+  artwork.allocN32Pixels(30, kArtworkViewHeight);
 
   media_controls_view_->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, artwork);
 
   {
     // Verify that the provided artwork size doesn't change.
-    gfx::Rect expected_artwork_bounds(5, 0, 70, 80);
+    gfx::Rect expected_artwork_bounds(9, 0, 30, 48);
     gfx::Rect artwork_bounds = artwork_view()->GetImageBounds();
     EXPECT_EQ(expected_artwork_bounds, artwork_bounds);
 

ash/login/ui/media_controls_header_view.cc

@@ -6,6 +6,7 @@
 
 #include "ash/login/ui/non_accessible_view.h"
 #include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
 #include "components/vector_icons/vector_icons.h"
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -26,12 +27,10 @@ namespace ash {
 
 namespace {
 
-constexpr gfx::Insets kHeaderViewInsets = gfx::Insets(0, 0, 15, 0);
-constexpr int kIconViewSize = 18;
-constexpr int kIconSize = 12;
+constexpr int kIconViewSize = 20;
+constexpr int kIconSize = 14;
 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::Insets kAppNamePadding = gfx::Insets(0, 8, 0, 0);
 constexpr gfx::Size kAppNamePreferredSize = gfx::Size(200, 10);
 constexpr gfx::Size kCloseButtonSize = gfx::Size(20, 20);
 constexpr int kCloseButtonIconSize = 18;
@@ -54,13 +53,11 @@ MediaControlsHeaderView::MediaControlsHeaderView(
           views::MaximumFlexSizeRule::kUnbounded)
           .WithOrder(2);
 
-  auto* layout = SetLayoutManager(std::make_unique<views::FlexLayout>());
-  layout->SetInteriorMargin(kHeaderViewInsets);
+  SetLayoutManager(std::make_unique<views::FlexLayout>());
 
   auto app_icon_view = std::make_unique<views::ImageView>();
   app_icon_view->SetPreferredSize(gfx::Size(kIconViewSize, kIconViewSize));
   app_icon_view->SetImageSize(gfx::Size(kIconSize, kIconSize));
-  app_icon_view->SetBorder(views::CreateEmptyBorder(kIconPadding));
   app_icon_view->SetBackground(
       views::CreateRoundedRectBackground(SK_ColorWHITE, kIconViewSize / 2));
 
@@ -76,7 +73,9 @@ MediaControlsHeaderView::MediaControlsHeaderView(
   auto app_name_view = std::make_unique<views::Label>();
   app_name_view->SetFontList(font_list);
   app_name_view->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  app_name_view->SetEnabledColor(SK_ColorWHITE);
+  app_name_view->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextSecondary,
+      AshColorProvider::AshColorMode::kDark));
   app_name_view->SetAutoColorReadabilityEnabled(false);
   app_name_view->SetBorder(views::CreateEmptyBorder(kAppNamePadding));
   app_name_view->SetPreferredSize(kAppNamePreferredSize);

ash/resources/vector_icons/BUILD.gn

@@ -120,12 +120,6 @@ aggregate_vector_icons("ash_vector_icons") {
     "palette_tray_icon_magnify.icon",
     "palette_tray_icon_metalayer.icon",
     "parent_access_lock.icon",
-    "lock_screen_pause.icon",
-    "lock_screen_play.icon",
-    "lock_screen_previous_track.icon",
-    "lock_screen_next_track.icon",
-    "lock_screen_seek_forward.icon",
-    "lock_screen_seek_backward.icon",
     "send.icon",
     "settings.icon",
     "shelf_add_person_button.icon",

ash/resources/vector_icons/lock_screen_next_track.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 24,
-MOVE_TO, 2, 25,
-R_ARC_TO, 1.53f, 1.53f, 0, 0, 1, -0.69f, -0.17f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 0.5f, 23.54f,
-V_LINE_TO, 2,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 2.86f, 0.77f,
-LINE_TO, 18.25f, 11.54f,
-R_ARC_TO, 1.52f, 1.52f, 0, 0, 1, 0, 2.46f,
-LINE_TO, 2.86f, 24.77f,
-ARC_TO, 1.51f, 1.51f, 0, 0, 1, 2, 25,
-CLOSE,
-MOVE_TO, 3.5f, 4.88f,
-V_LINE_TO, 20.66f,
-R_LINE_TO, 11.27f, -7.89f,
-CLOSE,
-MOVE_TO, 23.23f, 25,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, -1.5f, -1.5f,
-V_LINE_TO, 2,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, 3, 0,
-V_LINE_TO, 23.54f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 23.23f, 25,
-CLOSE

ash/resources/vector_icons/lock_screen_pause.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 40,
-MOVE_TO, 7.5f, 39.5f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 6, 38,
-V_LINE_TO, 2,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 9, 2,
-V_LINE_TO, 38,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 7.5f, 39.5f,
-CLOSE,
-MOVE_TO, 32.5f, 39.5f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 31, 38,
-V_LINE_TO, 2,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, 3, 0,
-V_LINE_TO, 38,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 32.5f, 39.5f,
-CLOSE

ash/resources/vector_icons/lock_screen_play.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 40,
-MOVE_TO, 7, 39.5f,
-R_ARC_TO, 1.57f, 1.57f, 0, 0, 1, -0.7f, -0.17f,
-ARC_TO, 1.51f, 1.51f, 0, 0, 1, 5.5f, 38,
-V_LINE_TO, 2,
-ARC_TO, 1.49f, 1.49f, 0, 0, 1, 7.85f, 0.77f,
-R_LINE_TO, 26, 18,
-R_ARC_TO, 1.49f, 1.49f, 0, 0, 1, 0, 2.46f,
-R_LINE_TO, -26, 18,
-ARC_TO, 1.46f, 1.46f, 0, 0, 1, 7, 39.5f,
-CLOSE,
-MOVE_TO, 8.5f, 4.86f,
-V_LINE_TO, 35.14f,
-LINE_TO, 30.37f, 20,
-CLOSE

ash/resources/vector_icons/lock_screen_previous_track.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 24,
-MOVE_TO, 22.73f, 24.54f,
-R_ARC_TO, 1.51f, 1.51f, 0, 0, 1, -0.86f, -0.27f,
-LINE_TO, 6.49f, 13.5f,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, 0, -2.46f,
-LINE_TO, 21.87f, 0.27f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 24.23f, 1.5f,
-V_LINE_TO, 23,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, -1.5f, 1.5f,
-CLOSE,
-MOVE_TO, 10, 12.27f,
-R_LINE_TO, 11.26f, 7.89f,
-V_LINE_TO, 4.38f,
-CLOSE,
-MOVE_TO, 1.5f, 24.54f,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 0, 23,
-V_LINE_TO, 1.5f,
-R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, 3, 0,
-V_LINE_TO, 23,
-ARC_TO, 1.5f, 1.5f, 0, 0, 1, 1.5f, 24.54f,
-CLOSE

ash/resources/vector_icons/lock_screen_seek_backward.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 24,
-MOVE_TO, 9.44f, 18.88f,
-ARC_TO, 0.89f, 0.89f, 0, 0, 1, 9, 18.72f,
-R_LINE_TO, -8.58f, -6,
-R_ARC_TO, 0.87f, 0.87f, 0, 0, 1, -0.22f, -1.2f,
-R_ARC_TO, 0.88f, 0.88f, 0, 0, 1, 0.22f, -0.21f,
-LINE_TO, 9, 5.3f,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, 0.86f, -0.06f,
-R_ARC_TO, 0.84f, 0.84f, 0, 0, 1, 0.45f, 0.76f,
-V_LINE_TO, 18,
-R_ARC_TO, 0.84f, 0.84f, 0, 0, 1, -0.45f, 0.76f,
-ARC_TO, 1, 1, 0, 0, 1, 9.44f, 18.88f,
-CLOSE,
-MOVE_TO, 2.36f, 12,
-R_LINE_TO, 6.22f, 4.36f,
-V_LINE_TO, 7.65f,
-CLOSE,
-MOVE_TO, 23.18f, 18.88f,
-R_ARC_TO, 0.84f, 0.84f, 0, 0, 1, -0.49f, -0.16f,
-R_LINE_TO, -8.59f, -6,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, -0.21f, -1.2f,
-R_ARC_TO, 1, 1, 0, 0, 1, 0.21f, -0.21f,
-R_LINE_TO, 8.59f, -6,
-ARC_TO, 0.83f, 0.83f, 0, 0, 1, 24, 6,
-V_LINE_TO, 18,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, -0.45f, 0.76f,
-ARC_TO, 1, 1, 0, 0, 1, 23.18f, 18.88f,
-CLOSE,
-MOVE_TO, 16.09f, 12,
-R_LINE_TO, 6.23f, 4.36f,
-V_LINE_TO, 7.65f,
-CLOSE

ash/resources/vector_icons/lock_screen_seek_forward.icon

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-CANVAS_DIMENSIONS, 24,
-MOVE_TO, 0.86f, 18.87f,
-R_ARC_TO, 0.93f, 0.93f, 0, 0, 1, -0.4f, -0.09f,
-ARC_TO, 0.86f, 0.86f, 0, 0, 1, 0, 18,
-V_LINE_TO, 6,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, 0.46f, -0.76f,
-R_ARC_TO, 0.85f, 0.85f, 0, 0, 1, 0.93f, 0.06f,
-R_LINE_TO, 8.58f, 6,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, 0.21f, 1.2f,
-R_ARC_TO, 0.84f, 0.84f, 0, 0, 1, -0.21f, 0.21f,
-R_LINE_TO, -8.58f, 6,
-ARC_TO, 0.84f, 0.84f, 0, 0, 1, 0.86f, 18.87f,
-CLOSE,
-MOVE_TO, 1.72f, 7.65f,
-R_V_LINE_TO, 8.72f,
-LINE_TO, 8, 12,
-CLOSE,
-MOVE_TO, 14.59f, 18.87f,
-R_ARC_TO, 0.93f, 0.93f, 0, 0, 1, -0.4f, -0.09f,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, -0.46f, -0.76f,
-V_LINE_TO, 6,
-R_ARC_TO, 0.86f, 0.86f, 0, 0, 1, 0.46f, -0.76f,
-R_ARC_TO, 0.85f, 0.85f, 0, 0, 1, 0.86f, 0.06f,
-R_LINE_TO, 8.58f, 6,
-R_ARC_TO, 0.87f, 0.87f, 0, 0, 1, 0.22f, 1.2f,
-R_ARC_TO, 0.88f, 0.88f, 0, 0, 1, -0.22f, 0.21f,
-R_LINE_TO, -8.58f, 6,
-ARC_TO, 0.84f, 0.84f, 0, 0, 1, 14.59f, 18.87f,
-CLOSE,
-R_MOVE_TO, 0.86f, -11.22f,
-R_V_LINE_TO, 8.72f,
-LINE_TO, 21.68f, 12,
-CLOSE

components/media_message_center/media_controls_progress_view.cc

@@ -6,6 +6,7 @@
 
 #include "base/i18n/time_formatting.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
+#include "ui/gfx/color_palette.h"
 #include "ui/gfx/font_list.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/label.h"
@@ -19,7 +20,8 @@ namespace media_message_center {
 
 namespace {
 
-constexpr int kProgressBarAndTimeSpacing = 3;
+constexpr SkColor kTimeColor = gfx::kGoogleGrey200;
+constexpr int kProgressBarAndTimeSpacing = 8;
 constexpr int kProgressTimeFontSize = 11;
 constexpr int kProgressBarHeight = 4;
 constexpr int kMinClickHeight = 14;
@@ -56,7 +58,7 @@ MediaControlsProgressView::MediaControlsProgressView(
 
   auto progress_time = std::make_unique<views::Label>();
   progress_time->SetFontList(font_list);
-  progress_time->SetEnabledColor(SK_ColorWHITE);
+  progress_time->SetEnabledColor(kTimeColor);
   progress_time->SetAutoColorReadabilityEnabled(false);
   progress_time_ = time_view->AddChildView(std::move(progress_time));