GMC: Add UI for audio output device selection.

UI is enabled with #global-media-controls-seamless-transfer flag

Bug: 1096242
Change-Id: I8134a437dbda07d32291ae91fb9707fe0df39418
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2270880Reviewed-by: Ken Rockot <rockot@google.com>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Noah Rose Ledesma <noahrose@google.com>
Cr-Commit-Position: refs/heads/master@{#785882}

chrome/app/vector_icons/BUILD.gn

@@ -57,6 +57,8 @@ aggregate_vector_icons("chrome_vector_icons") {
     "incognito_profile.icon",
     "input.icon",
     "key.icon",
+    "keyboard_arrow_down.icon",
+    "keyboard_arrow_up.icon",
     "laptop.icon",
     "media_toolbar_button.icon",
     "media_toolbar_button_touch.icon",

chrome/app/vector_icons/keyboard_arrow_down.icon

+CANVAS_DIMENSIONS, 24,
+MOVE_TO, 7.41f, 8.59f,
+LINE_TO, 12, 13.17f,
+R_LINE_TO, 4.59f, -4.58f,
+LINE_TO, 18, 10,
+R_LINE_TO, -6, 6,
+R_LINE_TO, -6, -6,
+R_LINE_TO, 1.41f, -1.41f,
+CLOSE

chrome/app/vector_icons/keyboard_arrow_up.icon

+CANVAS_DIMENSIONS, 24,
+MOVE_TO, 7.41f, 15.41f,
+LINE_TO, 12, 10.83f,
+R_LINE_TO, 4.59f, 4.58f,
+LINE_TO, 18, 14,
+R_LINE_TO, -6, -6,
+R_LINE_TO, -6, 6,
+CLOSE

chrome/browser/ui/BUILD.gn

@@ -3415,6 +3415,8 @@ static_library("ui") {
       "views/global_media_controls/media_dialog_view.cc",
       "views/global_media_controls/media_dialog_view.h",
       "views/global_media_controls/media_dialog_view_observer.h",
+      "views/global_media_controls/media_notification_audio_device_selector_view.cc",
+      "views/global_media_controls/media_notification_audio_device_selector_view.h",
       "views/global_media_controls/media_notification_container_impl_view.cc",
       "views/global_media_controls/media_notification_container_impl_view.h",
       "views/global_media_controls/media_notification_list_view.cc",

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

+// Copyright 2020 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 "chrome/browser/ui/views/global_media_controls/media_notification_audio_device_selector_view.h"
+
+#include "base/strings/string16.h"
+#include "chrome/app/vector_icons/vector_icons.h"
+#include "chrome/browser/ui/views/global_media_controls/media_notification_container_impl_view.h"
+#include "components/vector_icons/vector_icons.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/text_constants.h"
+#include "ui/views/controls/button/image_button_factory.h"
+#include "ui/views/controls/button/label_button_border.h"
+#include "ui/views/controls/button/md_text_button.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/fill_layout.h"
+#include "ui/views/vector_icons.h"
+
+namespace {
+
+// Constants for this view
+constexpr int kPaddingBetweenContainers = 10;
+
+// Constants for the expand button and its container
+// The container for the expand button will take up a fixed amount of
+// space in this view. The leftover space will be given to the container
+// for device selection buttons.
+constexpr int kExpandButtonContainerWidth = 45;
+constexpr int kExpandButtonSize = 20;
+constexpr int kExpandButtonBorderThickness = 1;
+constexpr int kExpandButtonBorderCornerRadius = 2;
+
+// Constants for the device buttons and their container
+constexpr int kPaddingBetweenDeviceButtons = 5;
+constexpr int kDeviceButtonIconSize = 16;
+constexpr gfx::Insets kDeviceButtonContainerInsets = gfx::Insets(0, 10, 0, 0);
+constexpr gfx::Insets kDeviceButtonInsets = gfx::Insets(5);
+
+}  // anonymous namespace
+
+MediaNotificationAudioDeviceSelectorView::
+    MediaNotificationAudioDeviceSelectorView(
+        MediaNotificationContainerImplView* container,
+        gfx::Size size)
+    : container_(container) {
+  DCHECK(container_);
+  SetPreferredSize(size);
+
+  SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
+      kPaddingBetweenContainers));
+
+  auto device_button_container_width =
+      size.width() - kExpandButtonContainerWidth;
+  auto device_button_container = std::make_unique<views::View>();
+  device_button_container->SetPreferredSize(
+      gfx::Size(device_button_container_width, size.height()));
+  auto* device_button_container_layout =
+      device_button_container->SetLayoutManager(
+          std::make_unique<views::BoxLayout>(
+              views::BoxLayout::Orientation::kHorizontal,
+              kDeviceButtonContainerInsets, kPaddingBetweenDeviceButtons));
+  device_button_container_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kStart);
+  device_button_container_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+  device_button_container_ = AddChildView(std::move(device_button_container));
+
+  auto expand_button_container = std::make_unique<views::View>();
+  auto* expand_button_container_layout =
+      expand_button_container->SetLayoutManager(
+          std::make_unique<views::BoxLayout>(
+              views::BoxLayout::Orientation::kHorizontal));
+  expand_button_container_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kCenter);
+  expand_button_container_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+  expand_button_container->SetPreferredSize(
+      gfx::Size(kExpandButtonContainerWidth, size.height()));
+  expand_button_container_ = AddChildView(std::move(expand_button_container));
+
+  auto expand_button = views::CreateVectorToggleImageButton(this);
+  expand_button->SetPreferredSize(
+      gfx::Size(kExpandButtonSize, kExpandButtonSize));
+  expand_button_ =
+      expand_button_container_->AddChildView(std::move(expand_button));
+  expand_button_->SetBorder(views::CreateRoundedRectBorder(
+      kExpandButtonBorderThickness, kExpandButtonBorderCornerRadius,
+      SK_ColorLTGRAY));
+  views::SetImageFromVectorIcon(expand_button_, kKeyboardArrowDownIcon,
+                                kExpandButtonSize, SK_ColorBLACK);
+  views::SetToggledImageFromVectorIconWithColor(
+      expand_button_, kKeyboardArrowUpIcon, kExpandButtonSize, SK_ColorBLACK,
+      SK_ColorBLACK);
+}
+
+void MediaNotificationAudioDeviceSelectorView::UpdateAvailableAudioDevices(
+    const media::AudioDeviceDescriptions& device_descriptions) {}
+
+void MediaNotificationAudioDeviceSelectorView::ButtonPressed(
+    views::Button* sender,
+    const ui::Event& event) {}
+
+void MediaNotificationAudioDeviceSelectorView::CreateDeviceButton(
+    const media::AudioDeviceDescription& device_description) {
+  auto button = views::MdTextButton::Create(
+      this, base::UTF8ToUTF16(device_description.device_name.c_str()));
+  button->SetImage(views::Button::ButtonState::STATE_NORMAL,
+                   gfx::CreateVectorIcon(vector_icons::kHeadsetIcon,
+                                         kDeviceButtonIconSize, SK_ColorBLACK));
+
+  // I'm not sure if this border should be used with a MD button, but it
+  // looks really nice.
+  // TODO(noahrose): Investigate other border options.
+  auto border = std::make_unique<views::LabelButtonBorder>();
+  border->set_insets(kDeviceButtonInsets);
+  border->set_color(SK_ColorLTGRAY);
+  button->SetBorder(std::move(border));
+
+  device_button_container_->AddChildView(std::move(button));
+}

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

+// Copyright 2020 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 CHROME_BROWSER_UI_VIEWS_GLOBAL_MEDIA_CONTROLS_MEDIA_NOTIFICATION_AUDIO_DEVICE_SELECTOR_VIEW_H_
+#define CHROME_BROWSER_UI_VIEWS_GLOBAL_MEDIA_CONTROLS_MEDIA_NOTIFICATION_AUDIO_DEVICE_SELECTOR_VIEW_H_
+
+#include "media/audio/audio_device_description.h"
+#include "ui/views/controls/button/image_button.h"
+#include "ui/views/layout/box_layout.h"
+
+class MediaNotificationContainerImplView;
+
+class MediaNotificationAudioDeviceSelectorView : public views::View,
+                                                 public views::ButtonListener {
+ public:
+  explicit MediaNotificationAudioDeviceSelectorView(
+      MediaNotificationContainerImplView* container,
+      gfx::Size size);
+  MediaNotificationAudioDeviceSelectorView(
+      const MediaNotificationAudioDeviceSelectorView&) = delete;
+  MediaNotificationAudioDeviceSelectorView& operator=(
+      const MediaNotificationAudioDeviceSelectorView&) = delete;
+  ~MediaNotificationAudioDeviceSelectorView() override = default;
+
+  // Called when audio output devices are discovered.
+  void UpdateAvailableAudioDevices(
+      const media::AudioDeviceDescriptions& device_descriptions);
+
+  // views::ButtonListener
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  void CreateDeviceButton(
+      const media::AudioDeviceDescription& device_description);
+
+  // The parent container
+  MediaNotificationContainerImplView* const container_ = nullptr;
+
+  // Subviews
+  views::View* device_button_container_ = nullptr;
+
+  views::View* expand_button_container_ = nullptr;
+  views::ToggleImageButton* expand_button_ = nullptr;
+};
+
+#endif  // CHROME_BROWSER_UI_VIEWS_GLOBAL_MEDIA_CONTROLS_MEDIA_NOTIFICATION_AUDIO_DEVICE_SELECTOR_VIEW_H_

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

@@ -8,23 +8,28 @@
 #include "chrome/browser/ui/global_media_controls/media_notification_container_observer.h"
 #include "chrome/browser/ui/global_media_controls/media_toolbar_button_controller.h"
 #include "chrome/browser/ui/views/global_media_controls/media_dialog_view.h"
+#include "chrome/browser/ui/views/global_media_controls/media_notification_audio_device_selector_view.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/vector_icons/vector_icons.h"
 #include "media/base/media_switches.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/compositor/canvas_painter.h"
+#include "ui/message_center/public/cpp/message_center_constants.h"
 #include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/animation/slide_out_controller.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/controls/image_view.h"
+#include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/fill_layout.h"
 
 namespace {
 
 // TODO(steimel): We need to decide on the correct values here.
 constexpr int kWidth = 400;
+// TODO(noahrose): Should these sizes include the height of the audio
+// device selector view?
 constexpr gfx::Size kNormalSize = gfx::Size(kWidth, 100);
 constexpr gfx::Size kExpandedSize = gfx::Size(kWidth, 150);
 constexpr gfx::Size kDismissButtonSize = gfx::Size(30, 30);
@@ -42,6 +47,9 @@ constexpr int kMinVisibleActionsForExpanding = 4;
 // press as a click.
 constexpr int kMinMovementSquaredToBeDragging = 10;
 
+// The height of the |MediaNotificationAudioDeviceSelectorView|.
+constexpr int kAudioDeviceSelectorViewHeight = 40;
+
 }  // anonymous namespace
 
 class MediaNotificationContainerImplView::DismissButton
@@ -70,7 +78,8 @@ MediaNotificationContainerImplView::MediaNotificationContainerImplView(
       id_(id),
       foreground_color_(kDefaultForegroundColor),
       background_color_(kDefaultBackgroundColor) {
-  SetLayoutManager(std::make_unique<views::FillLayout>());
+  SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kVertical));
   SetPreferredSize(kNormalSize);
   set_notify_enter_exit_on_child(true);
   SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
@@ -111,6 +120,16 @@ MediaNotificationContainerImplView::MediaNotificationContainerImplView(
       base::string16(), kWidth, /*should_show_icon=*/false);
   view_ = swipeable_container_->AddChildView(std::move(view));
 
+  if (base::FeatureList::IsEnabled(
+          media::kGlobalMediaControlsSeamlessTransfer)) {
+    auto audio_device_selector_view =
+        std::make_unique<MediaNotificationAudioDeviceSelectorView>(
+            this, gfx::Size(kWidth, kAudioDeviceSelectorViewHeight));
+    audio_device_selector_view_ =
+        AddChildView(std::move(audio_device_selector_view));
+    view_->UpdateCornerRadius(message_center::kNotificationCornerRadius, 0);
+  }
+
   ForceExpandedState();
 
   slide_out_controller_ =

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

@@ -27,6 +27,7 @@ class ImageButton;
 class SlideOutController;
 }  // namespace views
 
+class MediaNotificationAudioDeviceSelectorView;
 class MediaNotificationContainerObserver;
 
 // MediaNotificationContainerImplView holds a media notification for display
@@ -145,6 +146,8 @@ class MediaNotificationContainerImplView
 
   DismissButton* dismiss_button_ = nullptr;
   media_message_center::MediaNotificationViewImpl* view_ = nullptr;
+  MediaNotificationAudioDeviceSelectorView* audio_device_selector_view_ =
+      nullptr;
 
   SkColor foreground_color_;
   SkColor background_color_;