Add headphone icon to audio settings button.

According to UX mock, audio settings button shown on the right of volume
slider is wide and has both headset icon and expand icon.

Screenshot: http://screen/ei2trCkJcSA
UX mock: http://shortn/_EMpEzaBIUx

TEST=manual
BUG=860600

Change-Id: I477243e757632881dc6ac9043838ebcfafcb69b4
Reviewed-on: https://chromium-review.googlesource.com/1141678Reviewed-by: Yoshiki Iguchi <yoshiki@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Commit-Queue: Tetsui Ohkubo <tetsui@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577378}

ash/system/audio/unified_volume_view.cc

@@ -7,7 +7,19 @@
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/system/audio/unified_volume_slider_controller.h"
-#include "ash/system/unified/top_shortcut_button.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_utils.h"
+#include "components/vector_icons/vector_icons.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/image/image_skia_operations.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_highlight.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/animation/ink_drop_mask.h"
+#include "ui/views/controls/image_view.h"
+#include "ui/views/layout/box_layout.h"
 
 using chromeos::CrasAudioHandler;
 
@@ -41,6 +53,71 @@ const gfx::VectorIcon& GetVolumeIconForLevel(float level) {
   return *kVolumeLevelIcons[index];
 }
 
+class MoreButton : public views::Button {
+ public:
+  explicit MoreButton(views::ButtonListener* listener)
+      : views::Button(listener) {
+    SetLayoutManager(std::make_unique<views::BoxLayout>(
+        views::BoxLayout::kHorizontal,
+        gfx::Insets((kTrayItemSize -
+                     GetDefaultSizeOfVectorIcon(vector_icons::kHeadsetIcon)) /
+                    2),
+        2));
+
+    auto* headset = new views::ImageView();
+    headset->set_can_process_events_within_subtree(false);
+    headset->SetImage(
+        CreateVectorIcon(vector_icons::kHeadsetIcon, kUnifiedMenuIconColor));
+    AddChildView(headset);
+
+    auto* more = new views::ImageView();
+    more->set_can_process_events_within_subtree(false);
+    more->SetImage(gfx::ImageSkiaOperations::CreateRotatedImage(
+        CreateVectorIcon(kUnifiedMenuExpandIcon, kUnifiedMenuIconColor),
+        SkBitmapOperations::ROTATION_90_CW));
+    AddChildView(more);
+
+    SetTooltipText(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_AUDIO));
+    TrayPopupUtils::ConfigureTrayPopupButton(this);
+  }
+
+  ~MoreButton() override = default;
+
+  // views::Button:
+  void PaintButtonContents(gfx::Canvas* canvas) override {
+    gfx::Rect rect(GetContentsBounds());
+    cc::PaintFlags flags;
+    flags.setAntiAlias(true);
+    flags.setColor(kUnifiedMenuButtonColor);
+    flags.setStyle(cc::PaintFlags::kFill_Style);
+    canvas->DrawRoundRect(rect, kTrayItemSize / 2, flags);
+  }
+
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override {
+    return TrayPopupUtils::CreateInkDrop(this);
+  }
+
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override {
+    return TrayPopupUtils::CreateInkDropRipple(
+        TrayPopupInkDropStyle::FILL_BOUNDS, this,
+        GetInkDropCenterBasedOnLastEvent(), kUnifiedMenuIconColor);
+  }
+
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override {
+    return TrayPopupUtils::CreateInkDropHighlight(
+        TrayPopupInkDropStyle::FILL_BOUNDS, this, kUnifiedMenuIconColor);
+  }
+
+  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
+    return std::make_unique<views::RoundRectInkDropMask>(size(), gfx::Insets(),
+                                                         kTrayItemSize / 2);
+  }
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(MoreButton);
+};
+
 }  // namespace
 
 UnifiedVolumeView::UnifiedVolumeView(UnifiedVolumeSliderController* controller,
@@ -48,9 +125,7 @@ UnifiedVolumeView::UnifiedVolumeView(UnifiedVolumeSliderController* controller,
     : UnifiedSliderView(controller,
                         kSystemMenuVolumeHighIcon,
                         IDS_ASH_STATUS_TRAY_VOLUME),
-      more_button_(new TopShortcutButton(controller,
-                                         kSystemMenuArrowRightIcon,
-                                         IDS_ASH_STATUS_TRAY_AUDIO)),
+      more_button_(new MoreButton(controller)),
       is_main_view_(is_main_view) {
   DCHECK(CrasAudioHandler::IsInitialized());
   CrasAudioHandler::Get()->AddAudioObserver(this);

ash/system/audio/unified_volume_view.h

@@ -35,7 +35,7 @@ class UnifiedVolumeView : public UnifiedSliderView,
   // UnifiedSliderView:
   void ChildVisibilityChanged(views::View* child) override;
 
-  TopShortcutButton* const more_button_;
+  views::Button* const more_button_;
   const bool is_main_view_;
 
   DISALLOW_COPY_AND_ASSIGN(UnifiedVolumeView);

ash/system/unified/unified_slider_view.cc

@@ -106,6 +106,8 @@ UnifiedSliderView::UnifiedSliderView(UnifiedSliderListener* listener,
       l10n_util::GetStringUTF16(accessible_name_id));
   slider_->SetBorder(views::CreateEmptyBorder(kUnifiedSliderPadding));
   layout->SetFlexForView(slider_, 1);
+  layout->set_cross_axis_alignment(
+      views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
 }
 
 void UnifiedSliderView::SetSliderValue(float value, bool by_user) {

components/vector_icons/BUILD.gn

@@ -21,6 +21,7 @@ aggregate_vector_icons("components_vector_icons") {
     "folder_managed_touch.icon",
     "folder_touch.icon",
     "forward_arrow.icon",
+    "headset.icon",
     "help_outline.icon",
     "info_outline.icon",
     "location_on.icon",

components/vector_icons/headset.icon

+// Copyright 2018 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, 20,
+MOVE_TO, 16, 15,
+R_CUBIC_TO, 0, 0.55f, -0.45f, 1, -1, 1,
+R_H_LINE_TO, -1,
+R_V_LINE_TO, -3,
+R_H_LINE_TO, 2,
+R_V_LINE_TO, 2,
+CLOSE,
+MOVE_TO, 6, 16,
+H_LINE_TO, 5,
+R_CUBIC_TO, -0.55f, 0, -1, -0.45f, -1, -1,
+R_V_LINE_TO, -2,
+R_H_LINE_TO, 2,
+R_V_LINE_TO, 3,
+CLOSE,
+MOVE_TO, 2, 9,
+R_V_LINE_TO, 6,
+R_CUBIC_TO, 0, 1.66f, 1.34f, 3, 3, 3,
+R_H_LINE_TO, 3,
+R_V_LINE_TO, -7,
+H_LINE_TO, 4,
+V_LINE_TO, 9,
+R_CUBIC_TO, 0, -3.87f, 2.13f, -5, 6, -5,
+R_CUBIC_TO, 3.87f, 0, 6, 1.13f, 6, 5,
+R_V_LINE_TO, 2,
+R_H_LINE_TO, -4,
+R_V_LINE_TO, 7,
+R_H_LINE_TO, 3,
+R_CUBIC_TO, 1.66f, 0, 3, -1.34f, 3, -3,
+V_LINE_TO, 9,
+R_CUBIC_TO, 0, -4.97f, -3.03f, -7, -8, -7,
+R_CUBIC_TO, -4.97f, 0, -8, 2.03f, -8, 7,
+CLOSE