GMC: Tweak the device selector entry point button

This change tweaks the look and feel of the button to open the audio
device picker. Screenshots of this button are on the crbug.

Bug: 1117160
Change-Id: Idc0faa6685b73ab4246a0544bdead23b1aeccef7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2382872
Commit-Queue: Noah Rose Ledesma <noahrose@google.com>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803980}

chrome/browser/ui/views/global_media_controls/media_notification_device_selector_view.cc

@@ -31,7 +31,6 @@ constexpr int kEntryHighlightOpacity = 45;
 constexpr gfx::Insets kExpandButtonStripInsets{6, 15};
 constexpr gfx::Size kExpandButtonStripSize{400, 30};
 constexpr gfx::Insets kExpandButtonBorderInsets{4, 8};
-constexpr int kExpandButtonBorderCornerRadius = 16;
 
 class DeviceEntryView : public views::Button {
  public:
@@ -161,6 +160,55 @@ void DeviceEntryView::OnColorsChanged(const SkColor& foreground_color,
   SetHighlighted(is_highlighted_);
 }
 
+namespace {
+
+class ExpandDeviceSelectorButton : public IconLabelBubbleView {
+ public:
+  explicit ExpandDeviceSelectorButton(IconLabelBubbleView::Delegate* delegate);
+  ~ExpandDeviceSelectorButton() override = default;
+
+  void OnColorsChanged();
+
+ private:
+  bool ShouldShowSeparator() const override { return false; }
+  IconLabelBubbleView::Delegate* delegate_;
+};
+
+}  // anonymous namespace
+
+ExpandDeviceSelectorButton::ExpandDeviceSelectorButton(
+    IconLabelBubbleView::Delegate* delegate)
+    : IconLabelBubbleView(
+          views::style::GetFont(views::style::TextContext::CONTEXT_BUTTON,
+                                views::style::TextStyle::STYLE_PRIMARY),
+          delegate),
+      delegate_(delegate) {
+  SetLabel(l10n_util::GetStringUTF16(
+      IDS_GLOBAL_MEDIA_CONTROLS_DEVICES_BUTTON_LABEL));
+  SetInkDropMode(InkDropMode::ON);
+  set_has_ink_drop_action_on_click(true);
+  SetFocusBehavior(FocusBehavior::ALWAYS);
+
+  SetBorder(views::CreateRoundedRectBorder(
+      1, kExpandButtonStripSize.height() / 2, gfx::Insets(),
+      delegate_->GetIconLabelBubbleSurroundingForegroundColor()));
+
+  label()->SetBorder(views::CreateEmptyBorder(kExpandButtonBorderInsets));
+  label()->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+
+  auto size = GetPreferredSize();
+  size.set_height(kExpandButtonStripSize.height());
+  size.set_width(size.width() + kExpandButtonBorderInsets.width());
+  SetPreferredSize(size);
+}
+
+void ExpandDeviceSelectorButton::OnColorsChanged() {
+  UpdateLabelColors();
+  SetBorder(views::CreateRoundedRectBorder(
+      1, kExpandButtonStripSize.height() / 2, gfx::Insets(),
+      delegate_->GetIconLabelBubbleSurroundingForegroundColor()));
+}
+
 MediaNotificationDeviceSelectorView::MediaNotificationDeviceSelectorView(
     MediaNotificationDeviceSelectorViewDelegate* delegate,
     const std::string& current_device_id,
@@ -184,19 +232,9 @@ MediaNotificationDeviceSelectorView::MediaNotificationDeviceSelectorView(
       views::BoxLayout::CrossAxisAlignment::kCenter);
   expand_button_strip_->SetPreferredSize(kExpandButtonStripSize);
 
-  auto expand_button = std::make_unique<views::LabelButton>(
-      this, l10n_util::GetStringUTF16(
-                IDS_GLOBAL_MEDIA_CONTROLS_DEVICES_BUTTON_LABEL));
-  expand_button->SetTextColor(views::MdTextButton::ButtonState::STATE_NORMAL,
-                              foreground_color_);
-  expand_button->SetBackground(views::CreateSolidBackground(background_color_));
-  auto border = std::make_unique<views::BubbleBorder>(
-      views::BubbleBorder::Arrow::NONE, views::BubbleBorder::Shadow::NO_SHADOW,
-      background_color_);
-  border->set_insets(kExpandButtonBorderInsets);
-  border->SetCornerRadius(kExpandButtonBorderCornerRadius);
-  expand_button->SetBorder(std::move(border));
-  expand_button_ = expand_button_strip_->AddChildView(std::move(expand_button));
+  expand_button_ = expand_button_strip_->AddChildView(
+      std::make_unique<ExpandDeviceSelectorButton>(this));
+  expand_button_->set_listener(this);
 
   audio_device_entries_container_ =
       AddChildView(std::make_unique<views::View>());
@@ -291,15 +329,15 @@ void MediaNotificationDeviceSelectorView::OnColorsChanged(
   foreground_color_ = foreground_color;
   background_color_ = background_color;
 
-  expand_button_->SetTextColor(views::MdTextButton::ButtonState::STATE_NORMAL,
-                               foreground_color_);
-  expand_button_->SetBackground(
-      views::CreateSolidBackground(background_color_));
   SetBackground(views::CreateSolidBackground(background_color_));
+
   for (auto* view : audio_device_entries_container_->children()) {
     static_cast<DeviceEntryView*>(view)->OnColorsChanged(foreground_color_,
                                                          background_color_);
   }
+
+  expand_button_->OnColorsChanged();
+
   SchedulePaint();
 }
 
@@ -323,6 +361,21 @@ void MediaNotificationDeviceSelectorView::ButtonPressed(
   }
 }
 
+SkColor MediaNotificationDeviceSelectorView::
+    GetIconLabelBubbleSurroundingForegroundColor() const {
+  return foreground_color_;
+}
+
+SkColor MediaNotificationDeviceSelectorView::GetIconLabelBubbleBackgroundColor()
+    const {
+  return background_color_;
+}
+
+views::Button*
+MediaNotificationDeviceSelectorView::get_expand_button_for_testing() {
+  return expand_button_;
+}
+
 // static
 std::string MediaNotificationDeviceSelectorView::get_entry_label_for_testing(
     views::View* entry_view) {

chrome/browser/ui/views/global_media_controls/media_notification_device_selector_view.h

@@ -7,6 +7,7 @@
 
 #include "base/callback_list.h"
 #include "chrome/browser/ui/global_media_controls/media_notification_device_provider.h"
+#include "chrome/browser/ui/views/location_bar/icon_label_bubble_view.h"
 #include "media/audio/audio_device_description.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/button/md_text_button.h"
@@ -14,12 +15,15 @@
 
 namespace {
 class DeviceEntryView;
+class ExpandDeviceSelectorButton;
 }  // anonymous namespace
 
 class MediaNotificationDeviceSelectorViewDelegate;
 
-class MediaNotificationDeviceSelectorView : public views::View,
-                                            public views::ButtonListener {
+class MediaNotificationDeviceSelectorView
+    : public views::View,
+      public views::ButtonListener,
+      public IconLabelBubbleView::Delegate {
  public:
   MediaNotificationDeviceSelectorView(
       MediaNotificationDeviceSelectorViewDelegate* delegate,
@@ -42,6 +46,11 @@ class MediaNotificationDeviceSelectorView : public views::View,
   // views::ButtonListener
   void ButtonPressed(views::Button* sender, const ui::Event& event) override;
 
+  // IconLabelBubbleView::Delegate
+  SkColor GetIconLabelBubbleSurroundingForegroundColor() const override;
+  SkColor GetIconLabelBubbleBackgroundColor() const override;
+
+  views::Button* get_expand_button_for_testing();
   static std::string get_entry_label_for_testing(views::View* entry_view);
   static bool get_entry_is_highlighted_for_testing(views::View* entry_view);
 
@@ -75,7 +84,7 @@ class MediaNotificationDeviceSelectorView : public views::View,
 
   // Child views
   views::View* expand_button_strip_;
-  views::LabelButton* expand_button_;
+  ExpandDeviceSelectorButton* expand_button_;
   views::View* audio_device_entries_container_;
 
   std::unique_ptr<MediaNotificationDeviceProvider::

chrome/browser/ui/views/global_media_controls/media_notification_device_selector_view_unittest.cc

@@ -173,7 +173,7 @@ TEST_F(MediaNotificationDeviceSelectorViewTest,
 
   ASSERT_TRUE(view_->expand_button_);
   EXPECT_FALSE(view_->audio_device_entries_container_->GetVisible());
-  SimulateButtonClick(view_->expand_button_);
+  SimulateButtonClick(view_->get_expand_button_for_testing());
   EXPECT_TRUE(view_->audio_device_entries_container_->GetVisible());
 }