BASELINE: Update Chromium to 92.0.4515.166

Change-Id: I42a050486714e9e54fc271f2a8939223a02ae364

19 files changed, 401 insertions, 226 deletions

diff --git a/chromium/components/media_message_center/BUILD.gn b/chromium/components/media_message_center/BUILD.gn
index 7becd24bbc8..3302c66d30d 100644
--- a/chromium/components/media_message_center/BUILD.gn
+++ b/chromium/components/media_message_center/BUILD.gn
@@ -4,6 +4,8 @@
 
 component("media_message_center") {
   sources = [
+    "media_artwork_view.cc",
+    "media_artwork_view.h",
     "media_controls_progress_view.cc",
     "media_controls_progress_view.h",
     "media_notification_background.h",
diff --git a/chromium/components/media_message_center/media_artwork_view.cc b/chromium/components/media_message_center/media_artwork_view.cc
new file mode 100644
index 00000000000..e2b12a656b0
--- /dev/null
+++ b/chromium/components/media_message_center/media_artwork_view.cc
@@ -0,0 +1,110 @@
+// Copyright 2021 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.
+
+#include "components/media_message_center/media_artwork_view.h"
+
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/skia_util.h"
+
+namespace media_message_center {
+
+namespace {
+
+// Get target bounds of the image fitting into |canvas_size|.
+// If |image_size| is greater than |expect_size| in any dimension,
+// we shrink it down to fit, keep the size otherwise.
+gfx::Rect GetTargetBound(const gfx::Size image_size,
+                         const gfx::Size expect_size,
+                         const gfx::Size canvas_size) {
+  gfx::Size target_size = image_size;
+  if (image_size.width() > expect_size.width() ||
+      image_size.height() > expect_size.height()) {
+    const float scale = std::min(
+        expect_size.width() / static_cast<float>(image_size.width()),
+        expect_size.height() / static_cast<float>(image_size.height()));
+    target_size = gfx::ScaleToFlooredSize(image_size, scale);
+  }
+
+  int offset_x = (canvas_size.width() - target_size.width()) / 2;
+  int offset_y = (canvas_size.height() - target_size.height()) / 2;
+  return gfx::Rect(offset_x, offset_y, target_size.width(),
+                   target_size.height());
+}
+
+}  // anonymous namespace
+
+MediaArtworkView::MediaArtworkView(float corner_radius,
+                                   const gfx::Size& artwork_size,
+                                   const gfx::Size& favicon_size)
+    : corner_radius_(corner_radius),
+      artwork_size_(artwork_size),
+      favicon_size_(favicon_size) {}
+
+void MediaArtworkView::SetVignetteColor(const SkColor& vignette_color) {
+  if (vignette_color_ == vignette_color)
+    return;
+  vignette_color_ = vignette_color;
+  OnPropertyChanged(&vignette_color_, views::kPropertyEffectsPaint);
+}
+
+SkColor MediaArtworkView::GetVignetteColor() const {
+  return vignette_color_;
+}
+
+void MediaArtworkView::SetBackgroundColor(const SkColor& background_color) {
+  background_color_ = background_color;
+}
+
+void MediaArtworkView::SetImage(const gfx::ImageSkia& image) {
+  image_ = image;
+}
+
+void MediaArtworkView::SetFavicon(const gfx::ImageSkia& favicon) {
+  favicon_ = favicon;
+}
+
+void MediaArtworkView::OnPaint(gfx::Canvas* canvas) {
+  views::View::OnPaint(canvas);
+
+  {
+    // Paint background.
+    cc::PaintFlags paint_flags;
+    paint_flags.setStyle(cc::PaintFlags::kFill_Style);
+    paint_flags.setAntiAlias(true);
+    paint_flags.setColor(background_color_);
+    canvas->DrawRect(gfx::Rect(artwork_size_), paint_flags);
+  }
+
+  // Draw image if we have artwork; fallback to favicon if we don't.
+  if (!image_.isNull()) {
+    gfx::Rect target =
+        GetTargetBound(image_.size(), artwork_size_, artwork_size_);
+    canvas->DrawImageInt(image_, 0, 0, image_.width(), image_.height(),
+                         target.x(), target.y(), target.width(),
+                         target.height(), false);
+  } else if (!favicon_.isNull()) {
+    gfx::Rect target =
+        GetTargetBound(favicon_.size(), favicon_size_, artwork_size_);
+    canvas->DrawImageInt(favicon_, 0, 0, favicon_.width(), favicon_.height(),
+                         target.x(), target.y(), target.width(),
+                         target.height(), false);
+  }
+
+  {
+    auto path = SkPath().addRoundRect(RectToSkRect(GetLocalBounds()),
+                                      corner_radius_, corner_radius_);
+    path.toggleInverseFillType();
+    cc::PaintFlags paint_flags;
+    paint_flags.setStyle(cc::PaintFlags::kFill_Style);
+    paint_flags.setAntiAlias(true);
+    paint_flags.setColor(vignette_color_);
+    canvas->DrawPath(path, paint_flags);
+  }
+}
+
+BEGIN_METADATA(MediaArtworkView, views::View)
+ADD_PROPERTY_METADATA(SkColor, VignetteColor)
+END_METADATA
+
+}  // namespace media_message_center
diff --git a/chromium/components/media_message_center/media_artwork_view.h b/chromium/components/media_message_center/media_artwork_view.h
new file mode 100644
index 00000000000..1833c0eb566
--- /dev/null
+++ b/chromium/components/media_message_center/media_artwork_view.h
@@ -0,0 +1,49 @@
+// Copyright 2021 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.
+
+#ifndef COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_ARTWORK_VIEW_H_
+#define COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_ARTWORK_VIEW_H_
+
+#include "ui/base/metadata/metadata_header_macros.h"
+#include "ui/base/metadata/metadata_impl_macros.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/views/view.h"
+
+namespace media_message_center {
+
+// An artwork view with a rounded rectangle vignette
+class MediaArtworkView : public views::View {
+ public:
+  METADATA_HEADER(MediaArtworkView);
+  MediaArtworkView(float corner_radius,
+                   const gfx::Size& artwork_size,
+                   const gfx::Size& favicon_size);
+  ~MediaArtworkView() override = default;
+
+  void SetVignetteColor(const SkColor& vignette_color);
+  SkColor GetVignetteColor() const;
+
+  void SetBackgroundColor(const SkColor& background_color);
+
+  void SetImage(const gfx::ImageSkia& image);
+  void SetFavicon(const gfx::ImageSkia& favicon);
+
+  // views::View
+  void OnPaint(gfx::Canvas* canvas) override;
+
+ private:
+  SkColor vignette_color_ = gfx::kPlaceholderColor;
+  SkColor background_color_ = gfx::kPlaceholderColor;
+
+  gfx::ImageSkia image_;
+  gfx::ImageSkia favicon_;
+
+  const float corner_radius_;
+  const gfx::Size artwork_size_;
+  const gfx::Size favicon_size_;
+};
+
+}  // namespace media_message_center
+
+#endif  // COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_ARTWORK_VIEW_H_
diff --git a/chromium/components/media_message_center/media_controls_progress_view.cc b/chromium/components/media_message_center/media_controls_progress_view.cc
index 0925128e57d..f502ccc2214 100644
--- a/chromium/components/media_message_center/media_controls_progress_view.cc
+++ b/chromium/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/base/metadata/metadata_impl_macros.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/font_list.h"
 #include "ui/views/border.h"
@@ -14,7 +15,6 @@
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/flex_layout.h"
 #include "ui/views/layout/flex_layout_types.h"
-#include "ui/views/metadata/metadata_impl_macros.h"
 #include "ui/views/view_class_properties.h"
 
 namespace media_message_center {
diff --git a/chromium/components/media_message_center/media_controls_progress_view.h b/chromium/components/media_message_center/media_controls_progress_view.h
index e74367de290..5bf699b666f 100644
--- a/chromium/components/media_message_center/media_controls_progress_view.h
+++ b/chromium/components/media_message_center/media_controls_progress_view.h
@@ -6,10 +6,13 @@
 #define COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_CONTROLS_PROGRESS_VIEW_H_
 
 #include "base/timer/timer.h"
-#include "services/media_session/public/mojom/media_session.mojom.h"
-#include "ui/views/metadata/metadata_header_macros.h"
+#include "ui/base/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"
 
+namespace media_session {
+struct MediaPosition;
+}  // namespace media_session
+
 namespace views {
 class ProgressBar;
 class Label;
diff --git a/chromium/components/media_message_center/media_notification_background_ash_impl.cc b/chromium/components/media_message_center/media_notification_background_ash_impl.cc
index 88422c5a6be..1fb7b3cf034 100644
--- a/chromium/components/media_message_center/media_notification_background_ash_impl.cc
+++ b/chromium/components/media_message_center/media_notification_background_ash_impl.cc
@@ -4,6 +4,7 @@
 
 #include "components/media_message_center/media_notification_background_ash_impl.h"
 
+#include "base/i18n/rtl.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/skia_util.h"
diff --git a/chromium/components/media_message_center/media_notification_background_impl.cc b/chromium/components/media_message_center/media_notification_background_impl.cc
index d937748b84c..072f4c817f9 100644
--- a/chromium/components/media_message_center/media_notification_background_impl.cc
+++ b/chromium/components/media_message_center/media_notification_background_impl.cc
@@ -7,11 +7,13 @@
 #include <algorithm>
 #include <vector>
 
+#include "base/i18n/rtl.h"
 #include "skia/ext/image_operations.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_analysis.h"
 #include "ui/gfx/color_utils.h"
 #include "ui/gfx/scoped_canvas.h"
+#include "ui/gfx/skia_util.h"
 #include "ui/native_theme/native_theme.h"
 #include "ui/views/style/typography.h"
 #include "ui/views/view.h"
@@ -67,20 +69,20 @@ bool IsForegroundColorSwatchAllowed(const SkColor& background,
   return diff > 10 && diff < 350;
 }
 
-base::Optional<SkColor> GetNotificationBackgroundColor(const SkBitmap* source) {
+absl::optional<SkColor> GetNotificationBackgroundColor(const SkBitmap* source) {
   if (!source || source->empty() || source->isNull())
-    return base::nullopt;
+    return absl::nullopt;
 
   std::vector<color_utils::Swatch> swatches =
       color_utils::CalculateColorSwatches(
           *source, 16, gfx::Rect(source->width() / 2, source->height()),
-          base::nullopt);
+          absl::nullopt);
 
   if (swatches.empty())
-    return base::nullopt;
+    return absl::nullopt;
 
-  base::Optional<color_utils::Swatch> most_popular;
-  base::Optional<color_utils::Swatch> non_white_black;
+  absl::optional<color_utils::Swatch> most_popular;
+  absl::optional<color_utils::Swatch> non_white_black;
 
   // Find the most popular color with the most weight and the color which
   // is the color with the most weight that is not white or black.
@@ -138,11 +140,11 @@ color_utils::Swatch SelectMutedSwatch(const color_utils::Swatch& muted,
              : more_muted;
 }
 
-base::Optional<SkColor> GetNotificationForegroundColor(
-    const base::Optional<SkColor>& background_color,
+absl::optional<SkColor> GetNotificationForegroundColor(
+    const absl::optional<SkColor>& background_color,
     const SkBitmap* source) {
   if (!background_color || !source || source->empty() || source->isNull())
-    return base::nullopt;
+    return absl::nullopt;
 
   const bool is_light =
       color_utils::GetRelativeLuminance(*background_color) > 0.5;
@@ -197,7 +199,7 @@ base::Optional<SkColor> GetNotificationForegroundColor(
   // the most popular color and then either white/black. Any swatch has to be
   // above a minimum population threshold to be determined significant enough in
   // the artwork to be used.
-  base::Optional<color_utils::Swatch> swatch;
+  absl::optional<color_utils::Swatch> swatch;
   if (more_vibrant.population > population_min &&
       vibrant.population > population_min) {
     swatch = SelectVibrantSwatch(more_vibrant, vibrant);
@@ -388,7 +390,7 @@ SkColor MediaNotificationBackgroundImpl::GetForegroundColor(
           : views::style::GetColor(owner, views::style::CONTEXT_LABEL,
                                    views::style::STYLE_PRIMARY);
   return color_utils::BlendForMinContrast(
-             foreground, GetBackgroundColor(owner), base::nullopt,
+             foreground, GetBackgroundColor(owner), absl::nullopt,
              kMediaNotificationMinimumContrastRatio)
       .color;
 }
diff --git a/chromium/components/media_message_center/media_notification_background_impl.h b/chromium/components/media_message_center/media_notification_background_impl.h
index beb99f826b6..52642c46bc5 100644
--- a/chromium/components/media_message_center/media_notification_background_impl.h
+++ b/chromium/components/media_message_center/media_notification_background_impl.h
@@ -5,11 +5,9 @@
 #ifndef COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_BACKGROUND_IMPL_H_
 #define COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_BACKGROUND_IMPL_H_
 
-#include <vector>
-
 #include "base/component_export.h"
-#include "base/optional.h"
 #include "components/media_message_center/media_notification_background.h"
+#include "third_party/abseil-cpp/absl/types/optional.h"
 #include "ui/gfx/image/image_skia.h"
 
 namespace gfx {
@@ -75,8 +73,8 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationBackgroundImpl
   double artwork_max_width_pct_;
   bool audio_device_selector_availability_ = false;
 
-  base::Optional<SkColor> background_color_;
-  base::Optional<SkColor> foreground_color_;
+  absl::optional<SkColor> background_color_;
+  absl::optional<SkColor> foreground_color_;
 
   DISALLOW_COPY_AND_ASSIGN(MediaNotificationBackgroundImpl);
 };
diff --git a/chromium/components/media_message_center/media_notification_background_impl_unittest.cc b/chromium/components/media_message_center/media_notification_background_impl_unittest.cc
index c1725112e43..07356cc9e80 100644
--- a/chromium/components/media_message_center/media_notification_background_impl_unittest.cc
+++ b/chromium/components/media_message_center/media_notification_background_impl_unittest.cc
@@ -7,6 +7,7 @@
 #include <memory>
 
 #include "base/i18n/base_i18n_switches.h"
+#include "base/i18n/rtl.h"
 #include "base/test/icu_test_util.h"
 #include "base/test/scoped_command_line.h"
 #include "testing/gtest/include/gtest/gtest.h"
@@ -104,11 +105,11 @@ class MediaNotificationBackgroundImplTest : public testing::Test {
     return background_.get();
   }
 
-  base::Optional<SkColor> GetBackgroundColor() const {
+  absl::optional<SkColor> GetBackgroundColor() const {
     return background_->background_color_;
   }
 
-  base::Optional<SkColor> GetForegroundColor() const {
+  absl::optional<SkColor> GetForegroundColor() const {
     return background_->foreground_color_;
   }
 
diff --git a/chromium/components/media_message_center/media_notification_item.h b/chromium/components/media_message_center/media_notification_item.h
index 819da49bf8b..867d2bac1f3 100644
--- a/chromium/components/media_message_center/media_notification_item.h
+++ b/chromium/components/media_message_center/media_notification_item.h
@@ -5,8 +5,6 @@
 #ifndef COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ITEM_H_
 #define COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ITEM_H_
 
-#include <string>
-
 #include "base/component_export.h"
 #include "base/macros.h"
 #include "base/memory/weak_ptr.h"
diff --git a/chromium/components/media_message_center/media_notification_view.h b/chromium/components/media_message_center/media_notification_view.h
index 9d25db8cd81..dcf2a938fd2 100644
--- a/chromium/components/media_message_center/media_notification_view.h
+++ b/chromium/components/media_message_center/media_notification_view.h
@@ -5,6 +5,7 @@
 #ifndef COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_VIEW_H_
 #define COMPONENTS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_VIEW_H_
 
+#include "base/containers/flat_set.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
 #include "ui/views/view.h"
 
diff --git a/chromium/components/media_message_center/media_notification_view_impl.cc b/chromium/components/media_message_center/media_notification_view_impl.cc
index fb7a317d497..b293c8c0682 100644
--- a/chromium/components/media_message_center/media_notification_view_impl.cc
+++ b/chromium/components/media_message_center/media_notification_view_impl.cc
@@ -18,6 +18,7 @@
 #include "ui/accessibility/ax_enums.mojom.h"
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/metadata/metadata_impl_macros.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/font_list.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -26,7 +27,6 @@
 #include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/controls/highlight_path_generator.h"
 #include "ui/views/layout/box_layout.h"
-#include "ui/views/metadata/metadata_impl_macros.h"
 #include "ui/views/style/typography.h"
 #include "ui/views/view_class_properties.h"
 
@@ -104,6 +104,7 @@ const gfx::VectorIcon* GetVectorIconForMediaAction(MediaSessionAction action) {
     case MediaSessionAction::kToggleMicrophone:
     case MediaSessionAction::kToggleCamera:
     case MediaSessionAction::kHangUp:
+    case MediaSessionAction::kRaise:
       NOTREACHED();
       break;
   }
@@ -133,7 +134,7 @@ MediaNotificationViewImpl::MediaNotificationViewImpl(
     const std::u16string& default_app_name,
     int notification_width,
     bool should_show_icon,
-    base::Optional<NotificationTheme> theme)
+    absl::optional<NotificationTheme> theme)
     : container_(container),
       item_(std::move(item)),
       default_app_name_(default_app_name),
@@ -344,7 +345,7 @@ void MediaNotificationViewImpl::SetForcedExpandedState(
   } else {
     if (!forced_expanded_state_.has_value())
       return;
-    forced_expanded_state_ = base::nullopt;
+    forced_expanded_state_ = absl::nullopt;
   }
 
   if (header_row_)
diff --git a/chromium/components/media_message_center/media_notification_view_impl.h b/chromium/components/media_message_center/media_notification_view_impl.h
index e758301c44f..8208eb985cf 100644
--- a/chromium/components/media_message_center/media_notification_view_impl.h
+++ b/chromium/components/media_message_center/media_notification_view_impl.h
@@ -7,12 +7,12 @@
 
 #include "base/component_export.h"
 #include "base/memory/weak_ptr.h"
-#include "base/optional.h"
 #include "components/media_message_center/media_notification_view.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
+#include "third_party/abseil-cpp/absl/types/optional.h"
+#include "ui/base/metadata/metadata_header_macros.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/label.h"
-#include "ui/views/metadata/metadata_header_macros.h"
 
 namespace message_center {
 class NotificationHeaderView;
@@ -69,7 +69,7 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewImpl
       const std::u16string& default_app_name,
       int notification_width,
       bool should_show_icon,
-      base::Optional<NotificationTheme> theme = base::nullopt);
+      absl::optional<NotificationTheme> theme = absl::nullopt);
   MediaNotificationViewImpl(const MediaNotificationViewImpl&) = delete;
   MediaNotificationViewImpl& operator=(const MediaNotificationViewImpl&) =
       delete;
@@ -171,7 +171,7 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewImpl
   bool expanded_ = false;
 
   // Used to force the notification to remain in a specific expanded state.
-  base::Optional<bool> forced_expanded_state_;
+  absl::optional<bool> forced_expanded_state_;
 
   // Set of enabled actions.
   base::flat_set<media_session::mojom::MediaSessionAction> enabled_actions_;
@@ -197,7 +197,7 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewImpl
   views::BoxLayout* title_artist_row_layout_ = nullptr;
   const gfx::VectorIcon* vector_header_icon_ = nullptr;
 
-  base::Optional<NotificationTheme> theme_;
+  absl::optional<NotificationTheme> theme_;
 
   const bool is_cros_;
 };
diff --git a/chromium/components/media_message_center/media_notification_view_impl_unittest.cc b/chromium/components/media_message_center/media_notification_view_impl_unittest.cc
index eff0f345ce5..573d944367f 100644
--- a/chromium/components/media_message_center/media_notification_view_impl_unittest.cc
+++ b/chromium/components/media_message_center/media_notification_view_impl_unittest.cc
@@ -54,8 +54,8 @@ const int kMediaButtonIconSize = 24;
 // The title artist row should always have the same height.
 const int kMediaTitleArtistRowExpectedHeight = 48;
 
-const char kTestDefaultAppName[] = "default app name";
-const char kTestAppName[] = "app name";
+const char16_t kTestDefaultAppName[] = u"default app name";
+const char16_t kTestAppName[] = u"app name";
 
 const gfx::Size kWidgetSize(500, 500);
 
@@ -254,7 +254,7 @@ class MediaNotificationViewImplTest : public views::ViewsTestBase {
         ->artwork_;
   }
 
-  const gfx::ImageSkia& GetAppIcon() const {
+  gfx::ImageSkia GetAppIcon() const {
     return header_row()->app_icon_for_testing();
   }
 
@@ -319,8 +319,7 @@ class MediaNotificationViewImplTest : public views::ViewsTestBase {
     // Create a MediaNotificationViewImpl.
     auto view = std::make_unique<MediaNotificationViewImpl>(
         &container_, item_->GetWeakPtr(),
-        nullptr /* header_row_controls_view */,
-        base::ASCIIToUTF16(kTestDefaultAppName), kViewWidth,
+        nullptr /* header_row_controls_view */, kTestDefaultAppName, kViewWidth,
         /*should_show_icon=*/true);
     view->SetSize(kViewSize);
 
@@ -657,19 +656,17 @@ TEST_F(MAYBE_MediaNotificationViewImplTest, UpdateMetadata_FromObserver) {
 }
 
 TEST_F(MAYBE_MediaNotificationViewImplTest, UpdateMetadata_AppName) {
-  EXPECT_EQ(base::ASCIIToUTF16(kTestDefaultAppName),
-            header_row()->app_name_for_testing());
+  EXPECT_EQ(kTestDefaultAppName, header_row()->app_name_for_testing());
 
   {
     media_session::MediaMetadata metadata;
     metadata.title = u"title";
     metadata.artist = u"artist";
-    metadata.source_title = base::ASCIIToUTF16(kTestAppName);
+    metadata.source_title = kTestAppName;
     GetItem()->MediaSessionMetadataChanged(metadata);
   }
 
-  EXPECT_EQ(base::ASCIIToUTF16(kTestAppName),
-            header_row()->app_name_for_testing());
+  EXPECT_EQ(kTestAppName, header_row()->app_name_for_testing());
 
   {
     media_session::MediaMetadata metadata;
@@ -678,8 +675,7 @@ TEST_F(MAYBE_MediaNotificationViewImplTest, UpdateMetadata_AppName) {
     GetItem()->MediaSessionMetadataChanged(metadata);
   }
 
-  EXPECT_EQ(base::ASCIIToUTF16(kTestDefaultAppName),
-            header_row()->app_name_for_testing());
+  EXPECT_EQ(kTestDefaultAppName, header_row()->app_name_for_testing());
 }
 
 TEST_F(MAYBE_MediaNotificationViewImplTest, Buttons_WhenCollapsed) {
@@ -1100,7 +1096,7 @@ TEST_F(MAYBE_MediaNotificationViewImplTest, UnfreezingDoesntMissUpdates) {
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
 
   // The item should be frozen and the view should contain the old data.
   EXPECT_TRUE(GetItem()->frozen());
@@ -1163,7 +1159,7 @@ TEST_F(MAYBE_MediaNotificationViewImplTest, UnfreezingWaitsForArtwork_Timeout) {
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   GetItem()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, SkBitmap());
 
@@ -1236,7 +1232,7 @@ TEST_F(MAYBE_MediaNotificationViewImplTest, UnfreezingWaitsForActions) {
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   DisableAction(MediaSessionAction::kPlay);
   DisableAction(MediaSessionAction::kPause);
   DisableAction(MediaSessionAction::kNextTrack);
@@ -1324,7 +1320,7 @@ TEST_F(MAYBE_MediaNotificationViewImplTest,
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   GetItem()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, SkBitmap());
 
diff --git a/chromium/components/media_message_center/media_notification_view_modern_impl.cc b/chromium/components/media_message_center/media_notification_view_modern_impl.cc
index a05ab1c7931..7cdd4dbb4f5 100644
--- a/chromium/components/media_message_center/media_notification_view_modern_impl.cc
+++ b/chromium/components/media_message_center/media_notification_view_modern_impl.cc
@@ -7,6 +7,7 @@
 #include "base/containers/contains.h"
 #include "base/metrics/histogram_macros.h"
 #include "base/stl_util.h"
+#include "components/media_message_center/media_artwork_view.h"
 #include "components/media_message_center/media_controls_progress_view.h"
 #include "components/media_message_center/media_notification_background_impl.h"
 #include "components/media_message_center/media_notification_constants.h"
@@ -19,17 +20,18 @@
 #include "ui/accessibility/ax_enums.mojom.h"
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/metadata/metadata_header_macros.h"
+#include "ui/base/metadata/metadata_impl_macros.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/font_list.h"
 #include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/skia_util.h"
 #include "ui/message_center/public/cpp/message_center_constants.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/layout/box_layout.h"
-#include "ui/views/metadata/metadata_header_macros.h"
-#include "ui/views/metadata/metadata_impl_macros.h"
 #include "ui/views/style/typography.h"
 #include "ui/views/view_class_properties.h"
 
@@ -67,46 +69,10 @@ constexpr int kUtilButtonsSpacing = 8;
 constexpr int kTitleArtistLineHeight = 20;
 constexpr gfx::Size kMediaButtonSize = {24, 24};
 constexpr gfx::Size kPlayPauseButtonSize = {32, 32};
-constexpr int kMediaButtonIconSize = 18;
-
-// An image view with a rounded rectangle vignette
-class MediaArtworkView : public views::ImageView {
- public:
-  METADATA_HEADER(MediaArtworkView);
-  explicit MediaArtworkView(float corner_radius)
-      : corner_radius_(corner_radius) {}
-
-  void SetVignetteColor(const SkColor& vignette_color) {
-    if (vignette_color_ == vignette_color)
-      return;
-    vignette_color_ = vignette_color;
-    OnPropertyChanged(&vignette_color_, views::kPropertyEffectsPaint);
-  }
-  SkColor GetVignetteColor() const { return vignette_color_; }
-
-  // ImageView
-  void OnPaint(gfx::Canvas* canvas) override;
-
- private:
-  SkColor vignette_color_ = gfx::kPlaceholderColor;
-  float corner_radius_;
-};
-
-BEGIN_METADATA(MediaArtworkView, views::ImageView)
-ADD_PROPERTY_METADATA(SkColor, VignetteColor)
-END_METADATA
-
-void MediaArtworkView::OnPaint(gfx::Canvas* canvas) {
-  views::ImageView::OnPaint(canvas);
-  auto path = SkPath().addRoundRect(RectToSkRect(GetLocalBounds()),
-                                    corner_radius_, corner_radius_);
-  path.toggleInverseFillType();
-  cc::PaintFlags paint_flags;
-  paint_flags.setStyle(cc::PaintFlags::kFill_Style);
-  paint_flags.setAntiAlias(true);
-  paint_flags.setColor(vignette_color_);
-  canvas->DrawPath(path, paint_flags);
-}
+constexpr int kMediaButtonIconSize = 14;
+constexpr int kPlayPauseIconSize = 20;
+constexpr int kMediaButtonBorderThickness = 1;
+constexpr gfx::Size kFaviconSize = {20, 20};
 
 void RecordMetadataHistogram(
     MediaNotificationViewModernImpl::Metadata metadata) {
@@ -140,6 +106,7 @@ const gfx::VectorIcon* GetVectorIconForMediaAction(MediaSessionAction action) {
     case MediaSessionAction::kToggleMicrophone:
     case MediaSessionAction::kToggleCamera:
     case MediaSessionAction::kHangUp:
+    case MediaSessionAction::kRaise:
       NOTREACHED();
       break;
   }
@@ -147,6 +114,105 @@ const gfx::VectorIcon* GetVectorIconForMediaAction(MediaSessionAction action) {
   return nullptr;
 }
 
+const std::u16string GetAccessibleNameForMediaAction(
+    MediaSessionAction action) {
+  switch (action) {
+    case MediaSessionAction::kPreviousTrack:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PREVIOUS_TRACK);
+    case MediaSessionAction::kSeekBackward:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_SEEK_BACKWARD);
+    case MediaSessionAction::kPlay:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PLAY);
+    case MediaSessionAction::kPause:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PAUSE);
+    case MediaSessionAction::kSeekForward:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_SEEK_FORWARD);
+    case MediaSessionAction::kNextTrack:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_NEXT_TRACK);
+    case MediaSessionAction::kEnterPictureInPicture:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_ENTER_PIP);
+    case MediaSessionAction::kExitPictureInPicture:
+      return l10n_util::GetStringUTF16(
+          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_EXIT_PIP);
+    case MediaSessionAction::kStop:
+    case MediaSessionAction::kSkipAd:
+    case MediaSessionAction::kSeekTo:
+    case MediaSessionAction::kScrubTo:
+    case MediaSessionAction::kSwitchAudioDevice:
+    case MediaSessionAction::kToggleMicrophone:
+    case MediaSessionAction::kToggleCamera:
+    case MediaSessionAction::kHangUp:
+    case MediaSessionAction::kRaise:
+      NOTREACHED();
+      break;
+  }
+
+  return std::u16string();
+}
+
+class MediaButton : public views::ImageButton {
+ public:
+  MediaButton(PressedCallback callback, int icon_size, gfx::Size button_size)
+      : ImageButton(callback), icon_size_(icon_size) {
+    SetImageHorizontalAlignment(views::ImageButton::ALIGN_CENTER);
+    SetImageVerticalAlignment(views::ImageButton::ALIGN_MIDDLE);
+    SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
+    SetFlipCanvasOnPaintForRTLUI(false);
+    SetPreferredSize(button_size);
+    SetBorder(views::CreateRoundedRectBorder(
+        kMediaButtonBorderThickness,
+        std::min(button_size.width(), button_size.height()) / 2,
+        SK_ColorWHITE));
+  }
+
+  void SetButtonColor(SkColor foreground_color, SkColor disabled_color) {
+    foreground_color_ = foreground_color;
+    disabled_color_ = disabled_color;
+
+    GetBorder()->set_color(IsMouseHovered() ? foreground_color
+                                            : disabled_color_);
+    views::SetImageFromVectorIconWithColor(
+        this, *GetVectorIconForMediaAction(GetActionFromButtonTag(*this)),
+        icon_size_, foreground_color_);
+
+    SchedulePaint();
+  }
+
+  void set_tag(int tag) {
+    views::ImageButton::set_tag(tag);
+
+    SetTooltipText(
+        GetAccessibleNameForMediaAction(GetActionFromButtonTag(*this)));
+    SetAccessibleName(
+        GetAccessibleNameForMediaAction(GetActionFromButtonTag(*this)));
+    views::SetImageFromVectorIconWithColor(
+        this, *GetVectorIconForMediaAction(GetActionFromButtonTag(*this)),
+        icon_size_, foreground_color_);
+  }
+
+  void OnMouseEntered(const ui::MouseEvent& event) override {
+    GetBorder()->set_color(foreground_color_);
+    SchedulePaint();
+  }
+
+  void OnMouseExited(const ui::MouseEvent& event) override {
+    GetBorder()->set_color(disabled_color_);
+    SchedulePaint();
+  }
+
+ private:
+  SkColor foreground_color_ = gfx::kPlaceholderColor;
+  SkColor disabled_color_ = gfx::kPlaceholderColor;
+  int icon_size_;
+};
+
 }  // anonymous namespace
 
 // static
@@ -212,41 +278,27 @@ MediaNotificationViewModernImpl::MediaNotificationViewModernImpl(
     // regardless of the local UI direction.
     media_controls_container->SetMirrored(false);
 
-    CreateMediaButton(
-        media_controls_container.get(), MediaSessionAction::kPreviousTrack,
-        l10n_util::GetStringUTF16(
-            IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PREVIOUS_TRACK));
-    CreateMediaButton(
-        media_controls_container.get(), MediaSessionAction::kSeekBackward,
-        l10n_util::GetStringUTF16(
-            IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_SEEK_BACKWARD));
+    CreateMediaButton(media_controls_container.get(),
+                      MediaSessionAction::kPreviousTrack);
+    CreateMediaButton(media_controls_container.get(),
+                      MediaSessionAction::kSeekBackward);
 
     {
-      auto play_pause_button = views::CreateVectorToggleImageButton(
-          views::Button::PressedCallback());
+      auto play_pause_button = std::make_unique<MediaButton>(
+          views::Button::PressedCallback(), kPlayPauseIconSize,
+          kPlayPauseButtonSize);
       play_pause_button->SetCallback(
           base::BindRepeating(&MediaNotificationViewModernImpl::ButtonPressed,
                               base::Unretained(this), play_pause_button.get()));
       play_pause_button->set_tag(static_cast<int>(MediaSessionAction::kPlay));
-      play_pause_button->SetPreferredSize(kPlayPauseButtonSize);
-      play_pause_button->SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
-      play_pause_button->SetTooltipText(l10n_util::GetStringUTF16(
-          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PLAY));
-      play_pause_button->SetToggledTooltipText(l10n_util::GetStringUTF16(
-          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_PAUSE));
-      play_pause_button->SetFlipCanvasOnPaintForRTLUI(false);
       play_pause_button_ =
           media_controls_container->AddChildView(std::move(play_pause_button));
     }
 
-    CreateMediaButton(
-        media_controls_container.get(), MediaSessionAction::kSeekForward,
-        l10n_util::GetStringUTF16(
-            IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_SEEK_FORWARD));
-    CreateMediaButton(
-        media_controls_container.get(), MediaSessionAction::kNextTrack,
-        l10n_util::GetStringUTF16(
-            IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_NEXT_TRACK));
+    CreateMediaButton(media_controls_container.get(),
+                      MediaSessionAction::kSeekForward);
+    CreateMediaButton(media_controls_container.get(),
+                      MediaSessionAction::kNextTrack);
 
     media_controls_container_ =
         buttons_container->AddChildView(std::move(media_controls_container));
@@ -285,10 +337,6 @@ MediaNotificationViewModernImpl::MediaNotificationViewModernImpl(
       auto artwork_container = std::make_unique<views::View>();
       artwork_container->SetPreferredSize(kArtworkSize);
 
-      // The artwork container will become visible once artwork has been set in
-      // UpdateWithMediaArtwork
-      artwork_container->SetVisible(false);
-
       auto* artwork_container_layout = artwork_container->SetLayoutManager(
           std::make_unique<views::BoxLayout>(
               views::BoxLayout::Orientation::kHorizontal, gfx::Insets(), 0));
@@ -298,8 +346,8 @@ MediaNotificationViewModernImpl::MediaNotificationViewModernImpl(
           views::BoxLayout::CrossAxisAlignment::kCenter);
 
       {
-        auto artwork =
-            std::make_unique<MediaArtworkView>(kArtworkVignetteCornerRadius);
+        auto artwork = std::make_unique<MediaArtworkView>(
+            kArtworkVignetteCornerRadius, kArtworkSize, kFaviconSize);
         artwork_ = artwork_container->AddChildView(std::move(artwork));
       }
 
@@ -364,27 +412,13 @@ MediaNotificationViewModernImpl::MediaNotificationViewModernImpl(
     {
       // The picture-in-picture button appears directly under the media
       // labels.
-      auto picture_in_picture_button = views::CreateVectorToggleImageButton(
-          views::Button::PressedCallback());
+      auto picture_in_picture_button = std::make_unique<MediaButton>(
+          views::Button::PressedCallback(), kPipButtonIconSize, kPipButtonSize);
       picture_in_picture_button->SetCallback(base::BindRepeating(
           &MediaNotificationViewModernImpl::ButtonPressed,
           base::Unretained(this), picture_in_picture_button.get()));
       picture_in_picture_button->set_tag(
           static_cast<int>(MediaSessionAction::kEnterPictureInPicture));
-      picture_in_picture_button->SetPreferredSize(kPipButtonSize);
-      picture_in_picture_button->SetFocusBehavior(
-          views::View::FocusBehavior::ALWAYS);
-      picture_in_picture_button->SetTooltipText(l10n_util::GetStringUTF16(
-          IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_ENTER_PIP));
-      picture_in_picture_button->SetToggledTooltipText(
-          l10n_util::GetStringUTF16(
-              IDS_MEDIA_MESSAGE_CENTER_MEDIA_NOTIFICATION_ACTION_EXIT_PIP));
-      picture_in_picture_button->SetFlipCanvasOnPaintForRTLUI(false);
-      views::SetImageFromVectorIconWithColor(
-          picture_in_picture_button.get(),
-          *GetVectorIconForMediaAction(
-              MediaSessionAction::kEnterPictureInPicture),
-          kPipButtonIconSize, SK_ColorBLACK);
       picture_in_picture_button_ = util_buttons_container->AddChildView(
           std::move(picture_in_picture_button));
     }
@@ -426,7 +460,6 @@ void MediaNotificationViewModernImpl::UpdateWithMediaSessionInfo(
   bool playing =
       session_info && session_info->playback_state ==
                           media_session::mojom::MediaPlaybackState::kPlaying;
-  play_pause_button_->SetToggled(playing);
 
   MediaSessionAction action =
       playing ? MediaSessionAction::kPause : MediaSessionAction::kPlay;
@@ -436,7 +469,6 @@ void MediaNotificationViewModernImpl::UpdateWithMediaSessionInfo(
       session_info &&
       session_info->picture_in_picture_state ==
           media_session::mojom::MediaPictureInPictureState::kInPictureInPicture;
-  picture_in_picture_button_->SetToggled(in_picture_in_picture);
 
   action = in_picture_in_picture ? MediaSessionAction::kExitPictureInPicture
                                  : MediaSessionAction::kEnterPictureInPicture;
@@ -507,14 +539,8 @@ void MediaNotificationViewModernImpl::UpdateWithMediaArtwork(
   GetMediaNotificationBackground()->UpdateArtwork(image);
 
   UMA_HISTOGRAM_BOOLEAN(kArtworkHistogramName, !image.isNull());
-
-  if (!image.isNull())
-    artwork_container_->SetVisible(true);
-
   artwork_->SetImage(image);
   artwork_->SetPreferredSize(kArtworkSize);
-  artwork_->SetVignetteColor(
-      GetMediaNotificationBackground()->GetBackgroundColor(*this));
 
   UpdateForegroundColor();
 
@@ -529,6 +555,8 @@ void MediaNotificationViewModernImpl::UpdateWithFavicon(
     const gfx::ImageSkia& icon) {
   GetMediaNotificationBackground()->UpdateFavicon(icon);
 
+  artwork_->SetFavicon(icon);
+  artwork_->SetPreferredSize(kArtworkSize);
   UpdateForegroundColor();
   SchedulePaint();
 }
@@ -562,19 +590,13 @@ void MediaNotificationViewModernImpl::UpdateActionButtonsVisibility() {
 
 void MediaNotificationViewModernImpl::CreateMediaButton(
     views::View* parent_view,
-    MediaSessionAction action,
-    const std::u16string& accessible_name) {
-  auto button =
-      views::CreateVectorImageButton(views::Button::PressedCallback());
+    MediaSessionAction action) {
+  auto button = std::make_unique<MediaButton>(
+      views::Button::PressedCallback(), kMediaButtonIconSize, kMediaButtonSize);
   button->SetCallback(
       base::BindRepeating(&MediaNotificationViewModernImpl::ButtonPressed,
                           base::Unretained(this), button.get()));
   button->set_tag(static_cast<int>(action));
-  button->SetPreferredSize(kMediaButtonSize);
-  button->SetAccessibleName(accessible_name);
-  button->SetTooltipText(accessible_name);
-  button->SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
-  button->SetFlipCanvasOnPaintForRTLUI(false);
   parent_view->AddChildView(std::move(button));
 }
 
@@ -591,6 +613,9 @@ void MediaNotificationViewModernImpl::UpdateForegroundColor() {
   const SkColor disabled_icon_color =
       SkColorSetA(foreground, gfx::kDisabledControlAlpha);
 
+  artwork_->SetBackgroundColor(disabled_icon_color);
+  artwork_->SetVignetteColor(background);
+
   progress_->SetForegroundColor(foreground);
   progress_->SetBackgroundColor(disabled_icon_color);
   progress_->SetTextColor(foreground);
@@ -604,23 +629,8 @@ void MediaNotificationViewModernImpl::UpdateForegroundColor() {
 
   // Update the colors for the toggle buttons (play/pause and
   // picture-in-picture)
-  views::SetImageFromVectorIconWithColor(
-      play_pause_button_,
-      *GetVectorIconForMediaAction(MediaSessionAction::kPlay),
-      kMediaButtonIconSize, foreground);
-  views::SetToggledImageFromVectorIconWithColor(
-      play_pause_button_,
-      *GetVectorIconForMediaAction(MediaSessionAction::kPause),
-      kMediaButtonIconSize, foreground, disabled_icon_color);
-
-  views::SetImageFromVectorIconWithColor(
-      picture_in_picture_button_,
-      *GetVectorIconForMediaAction(MediaSessionAction::kEnterPictureInPicture),
-      kPipButtonIconSize, foreground);
-  views::SetToggledImageFromVectorIconWithColor(
-      picture_in_picture_button_,
-      *GetVectorIconForMediaAction(MediaSessionAction::kExitPictureInPicture),
-      kPipButtonIconSize, foreground, disabled_icon_color);
+  play_pause_button_->SetButtonColor(foreground, disabled_icon_color);
+  picture_in_picture_button_->SetButtonColor(foreground, disabled_icon_color);
 
   // Update the colors for the media control buttons.
   for (views::View* child : media_controls_container_->children()) {
@@ -628,13 +638,9 @@ void MediaNotificationViewModernImpl::UpdateForegroundColor() {
     if (child == play_pause_button_)
       continue;
 
-    views::ImageButton* button = static_cast<views::ImageButton*>(child);
+    MediaButton* button = static_cast<MediaButton*>(child);
 
-    views::SetImageFromVectorIconWithColor(
-        button, *GetVectorIconForMediaAction(GetActionFromButtonTag(*button)),
-        kMediaButtonIconSize, foreground);
-
-    button->SchedulePaint();
+    button->SetButtonColor(foreground, disabled_icon_color);
   }
 
   SchedulePaint();
@@ -650,6 +656,11 @@ void MediaNotificationViewModernImpl::SeekTo(double seek_progress) {
   item_->SeekTo(seek_progress * position_.duration());
 }
 
+views::Button*
+MediaNotificationViewModernImpl::picture_in_picture_button_for_testing() const {
+  return picture_in_picture_button_;
+}
+
 BEGIN_METADATA(MediaNotificationViewModernImpl, views::View)
 END_METADATA
 
diff --git a/chromium/components/media_message_center/media_notification_view_modern_impl.h b/chromium/components/media_message_center/media_notification_view_modern_impl.h
index 8eae911b881..38c34a9c3a5 100644
--- a/chromium/components/media_message_center/media_notification_view_modern_impl.h
+++ b/chromium/components/media_message_center/media_notification_view_modern_impl.h
@@ -9,25 +9,25 @@
 
 #include "base/component_export.h"
 #include "base/memory/weak_ptr.h"
-#include "base/optional.h"
 #include "components/media_message_center/media_notification_view.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
+#include "third_party/abseil-cpp/absl/types/optional.h"
+#include "ui/base/metadata/metadata_header_macros.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
-#include "ui/views/metadata/metadata_header_macros.h"
 
 namespace views {
 class Button;
-class ToggleImageButton;
 }  // namespace views
 
 namespace media_message_center {
 
 namespace {
-class MediaArtworkView;
+class MediaButton;
 }  // anonymous namespace
 
+class MediaArtworkView;
 class MediaControlsProgressView;
 class MediaNotificationBackground;
 class MediaNotificationContainer;
@@ -97,9 +97,7 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewModernImpl
     return subtitle_label_;
   }
 
-  const views::Button* picture_in_picture_button_for_testing() const {
-    return picture_in_picture_button_;
-  }
+  views::Button* picture_in_picture_button_for_testing() const;
 
   const views::View* media_controls_container_for_testing() const {
     return media_controls_container_;
@@ -113,8 +111,7 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewModernImpl
   // |accessible_name| is the text used for screen readers and the
   // button's tooltip.
   void CreateMediaButton(views::View* parent_view,
-                         media_session::mojom::MediaSessionAction action,
-                         const std::u16string& accessible_name);
+                         media_session::mojom::MediaSessionAction action);
 
   void UpdateActionButtonsVisibility();
 
@@ -151,10 +148,10 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaNotificationViewModernImpl
   MediaArtworkView* artwork_ = nullptr;
   views::Label* title_label_ = nullptr;
   views::Label* subtitle_label_ = nullptr;
-  views::ToggleImageButton* picture_in_picture_button_ = nullptr;
+  MediaButton* picture_in_picture_button_ = nullptr;
   views::View* notification_controls_spacer_ = nullptr;
   views::View* media_controls_container_ = nullptr;
-  views::ToggleImageButton* play_pause_button_ = nullptr;
+  MediaButton* play_pause_button_ = nullptr;
   MediaControlsProgressView* progress_ = nullptr;
 };
 
diff --git a/chromium/components/media_message_center/media_notification_view_modern_impl_unittest.cc b/chromium/components/media_message_center/media_notification_view_modern_impl_unittest.cc
index 54ff7aac56d..52625ea4df9 100644
--- a/chromium/components/media_message_center/media_notification_view_modern_impl_unittest.cc
+++ b/chromium/components/media_message_center/media_notification_view_modern_impl_unittest.cc
@@ -216,21 +216,20 @@ class MediaNotificationViewModernImplTest : public views::ViewsTestBase {
     return view()->media_controls_container_;
   }
 
+  views::Button* picture_in_picture_button() const {
+    return view()->picture_in_picture_button_for_testing();
+  }
+
   std::vector<views::Button*> media_control_buttons() const {
     std::vector<views::Button*> buttons;
     auto children = view()->media_controls_container_->children();
     std::transform(
         children.begin(), children.end(), std::back_inserter(buttons),
         [](views::View* child) { return views::Button::AsButton(child); });
-    buttons.push_back(
-        views::Button::AsButton(view()->picture_in_picture_button_));
+    buttons.push_back(views::Button::AsButton(picture_in_picture_button()));
     return buttons;
   }
 
-  views::Button* picture_in_picture_button() const {
-    return view()->picture_in_picture_button_;
-  }
-
   MediaControlsProgressView* progress_view() const { return view()->progress_; }
 
   views::Button* GetButtonForAction(MediaSessionAction action) const {
@@ -525,20 +524,18 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   EnableAction(MediaSessionAction::kPlay);
 
   {
-    views::ToggleImageButton* button = static_cast<views::ToggleImageButton*>(
-        GetButtonForAction(MediaSessionAction::kPlay));
-    ASSERT_EQ(views::ToggleImageButton::kViewClassName, button->GetClassName());
-    EXPECT_FALSE(button->GetToggled());
+    views::Button* button = GetButtonForAction(MediaSessionAction::kPlay);
+    EXPECT_NE(button, nullptr);
+    EXPECT_EQ(button->tag(), static_cast<int>(MediaSessionAction::kPlay));
   }
 
   view()->UpdateWithMediaSessionInfo(
       media_session::mojom::MediaSessionInfo::New());
 
   {
-    views::ToggleImageButton* button = static_cast<views::ToggleImageButton*>(
-        GetButtonForAction(MediaSessionAction::kPlay));
-    ASSERT_EQ(views::ToggleImageButton::kViewClassName, button->GetClassName());
-    EXPECT_FALSE(button->GetToggled());
+    views::Button* button = GetButtonForAction(MediaSessionAction::kPlay);
+    EXPECT_NE(button, nullptr);
+    EXPECT_EQ(button->tag(), static_cast<int>(MediaSessionAction::kPlay));
   }
 }
 
@@ -548,10 +545,9 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   EnableAction(MediaSessionAction::kPause);
 
   {
-    views::ToggleImageButton* button = static_cast<views::ToggleImageButton*>(
-        GetButtonForAction(MediaSessionAction::kPlay));
-    ASSERT_EQ(views::ToggleImageButton::kViewClassName, button->GetClassName());
-    EXPECT_FALSE(button->GetToggled());
+    views::Button* button = GetButtonForAction(MediaSessionAction::kPlay);
+    EXPECT_NE(button, nullptr);
+    EXPECT_EQ(button->tag(), static_cast<int>(MediaSessionAction::kPlay));
   }
 
   media_session::mojom::MediaSessionInfoPtr session_info(
@@ -562,10 +558,9 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   view()->UpdateWithMediaSessionInfo(session_info.Clone());
 
   {
-    views::ToggleImageButton* button = static_cast<views::ToggleImageButton*>(
-        GetButtonForAction(MediaSessionAction::kPause));
-    ASSERT_EQ(views::ToggleImageButton::kViewClassName, button->GetClassName());
-    EXPECT_TRUE(button->GetToggled());
+    views::Button* button = GetButtonForAction(MediaSessionAction::kPause);
+    EXPECT_NE(button, nullptr);
+    EXPECT_EQ(button->tag(), static_cast<int>(MediaSessionAction::kPause));
   }
 
   session_info->playback_state =
@@ -573,10 +568,9 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   view()->UpdateWithMediaSessionInfo(session_info.Clone());
 
   {
-    views::ToggleImageButton* button = static_cast<views::ToggleImageButton*>(
-        GetButtonForAction(MediaSessionAction::kPlay));
-    ASSERT_EQ(views::ToggleImageButton::kViewClassName, button->GetClassName());
-    EXPECT_FALSE(button->GetToggled());
+    views::Button* button = GetButtonForAction(MediaSessionAction::kPlay);
+    EXPECT_NE(button, nullptr);
+    EXPECT_EQ(button->tag(), static_cast<int>(MediaSessionAction::kPlay));
   }
 }
 
@@ -792,7 +786,7 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest, UnfreezingDoesntMissUpdates) {
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
 
   // The item should be frozen and the view should contain the old data.
   EXPECT_TRUE(GetItem()->frozen());
@@ -856,7 +850,7 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   GetItem()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, SkBitmap());
 
@@ -929,7 +923,7 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest, UnfreezingWaitsForActions) {
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   DisableAction(MediaSessionAction::kPlay);
   DisableAction(MediaSessionAction::kPause);
   DisableAction(MediaSessionAction::kNextTrack);
@@ -1017,7 +1011,7 @@ TEST_F(MAYBE_MediaNotificationViewModernImplTest,
   EXPECT_CALL(unfrozen_callback, Run).Times(0);
   GetItem()->Freeze(unfrozen_callback.Get());
   GetItem()->MediaSessionInfoChanged(nullptr);
-  GetItem()->MediaSessionMetadataChanged(base::nullopt);
+  GetItem()->MediaSessionMetadataChanged(absl::nullopt);
   GetItem()->MediaControllerImageChanged(
       media_session::mojom::MediaSessionImageType::kArtwork, SkBitmap());
 
diff --git a/chromium/components/media_message_center/media_session_notification_item.cc b/chromium/components/media_message_center/media_session_notification_item.cc
index 36ebba6fd74..1262d79b26b 100644
--- a/chromium/components/media_message_center/media_session_notification_item.cc
+++ b/chromium/components/media_message_center/media_session_notification_item.cc
@@ -75,7 +75,7 @@ void MediaSessionNotificationItem::MediaSessionInfoChanged(
 }
 
 void MediaSessionNotificationItem::MediaSessionMetadataChanged(
-    const base::Optional<media_session::MediaMetadata>& metadata) {
+    const absl::optional<media_session::MediaMetadata>& metadata) {
   session_metadata_ = metadata.value_or(media_session::MediaMetadata());
 
   view_needs_metadata_update_ = true;
@@ -110,7 +110,7 @@ void MediaSessionNotificationItem::MediaSessionActionsChanged(
 }
 
 void MediaSessionNotificationItem::MediaSessionPositionChanged(
-    const base::Optional<media_session::MediaPosition>& position) {
+    const absl::optional<media_session::MediaPosition>& position) {
   session_position_ = position;
   if (!position.has_value())
     return;
@@ -187,6 +187,13 @@ media_message_center::SourceType MediaSessionNotificationItem::SourceType() {
   return media_message_center::SourceType::kLocalMediaSession;
 }
 
+void MediaSessionNotificationItem::Raise() {
+  if (!media_controller_remote_.is_bound())
+    return;
+
+  media_controller_remote_->Raise();
+}
+
 void MediaSessionNotificationItem::SetController(
     mojo::Remote<media_session::mojom::MediaController> controller,
     media_session::mojom::MediaSessionInfoPtr session_info) {
diff --git a/chromium/components/media_message_center/media_session_notification_item.h b/chromium/components/media_message_center/media_session_notification_item.h
index 39c451e25b4..7d52f859ff9 100644
--- a/chromium/components/media_message_center/media_session_notification_item.h
+++ b/chromium/components/media_message_center/media_session_notification_item.h
@@ -12,12 +12,12 @@
 #include "base/containers/flat_set.h"
 #include "base/macros.h"
 #include "base/memory/weak_ptr.h"
-#include "base/optional.h"
 #include "components/media_message_center/media_notification_item.h"
 #include "mojo/public/cpp/bindings/receiver.h"
 #include "mojo/public/cpp/bindings/remote.h"
 #include "services/media_session/public/mojom/media_controller.mojom.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
+#include "third_party/abseil-cpp/absl/types/optional.h"
 #include "ui/gfx/image/image_skia.h"
 
 namespace media_message_center {
@@ -47,14 +47,14 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaSessionNotificationItem
   void MediaSessionInfoChanged(
       media_session::mojom::MediaSessionInfoPtr session_info) override;
   void MediaSessionMetadataChanged(
-      const base::Optional<media_session::MediaMetadata>& metadata) override;
+      const absl::optional<media_session::MediaMetadata>& metadata) override;
   void MediaSessionActionsChanged(
       const std::vector<media_session::mojom::MediaSessionAction>& actions)
       override;
   void MediaSessionChanged(
-      const base::Optional<base::UnguessableToken>& request_id) override {}
+      const absl::optional<base::UnguessableToken>& request_id) override {}
   void MediaSessionPositionChanged(
-      const base::Optional<media_session::MediaPosition>& position) override;
+      const absl::optional<media_session::MediaPosition>& position) override;
 
   // media_session::mojom::MediaControllerImageObserver:
   void MediaControllerImageChanged(
@@ -71,6 +71,10 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaSessionNotificationItem
   void Dismiss() override;
   media_message_center::SourceType SourceType() override;
 
+  // Calls |Raise()| on the underlying MediaSession, which will focus the
+  // WebContents if the MediaSession is associated with one.
+  void Raise();
+
   base::WeakPtr<MediaSessionNotificationItem> GetWeakPtr() {
     return weak_ptr_factory_.GetWeakPtr();
   }
@@ -131,11 +135,11 @@ class COMPONENT_EXPORT(MEDIA_MESSAGE_CENTER) MediaSessionNotificationItem
 
   base::flat_set<media_session::mojom::MediaSessionAction> session_actions_;
 
-  base::Optional<media_session::MediaPosition> session_position_;
+  absl::optional<media_session::MediaPosition> session_position_;
 
-  base::Optional<gfx::ImageSkia> session_artwork_;
+  absl::optional<gfx::ImageSkia> session_artwork_;
 
-  base::Optional<gfx::ImageSkia> session_favicon_;
+  absl::optional<gfx::ImageSkia> session_favicon_;
 
   // True if the metadata needs to be updated on |view_|. Used to prevent
   // updating |view_|'s metadata twice on a single change.