Add hover to FeaturePodButton labels

According to UX spec, labels in FeaturePodButton should show while hover
background. In order to implement this, this CL adds
FeaturePodLabelButton class. Also, this CL fixes FeaturePodIconButton
padding which was different from UX spec.

According to the spec, icon and labels in feature pod button are
different click targets, which is still not implemented in this CL. It
will be done in another CL.

Screencast: http://dr/file/d/1FPylXzoO_xCTc8ywQU2NezUug9WgTz-q/view
UX spec: http://shortn/_U7QSE9nhSk

TEST=manual
BUG=821671

Change-Id: I596abbf5226932c9ac4f342e29c83fa4cc12185d
Reviewed-on: https://chromium-review.googlesource.com/1008942Reviewed-by: Yoshiki Iguchi <yoshiki@chromium.org>
Commit-Queue: Tetsui Ohkubo <tetsui@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550068}

ash/system/tray/tray_constants.h

@@ -140,6 +140,8 @@ constexpr SkColor kUnifiedMenuButtonColor =
     SkColorSetA(kUnifiedMenuIconColor, 0x14);
 constexpr SkColor kUnifiedMenuButtonColorActive =
     SkColorSetRGB(0x25, 0x81, 0xdf);
+constexpr SkColor kUnifiedFeaturePodHoverColor =
+    SkColorSetRGB(0xff, 0xff, 0xff);
 
 constexpr gfx::Insets kUnifiedMenuItemPadding(0, 16, 16, 16);
 constexpr gfx::Insets kUnifiedSliderPadding(0, 16);
@@ -151,9 +153,14 @@ constexpr int kUnifiedSystemInfoHeight = 16;
 constexpr int kUnifiedSystemInfoSpacing = 8;
 
 // Constants used in FeaturePodsView of UnifiedSystemTray.
-constexpr int kUnifiedFeaturePodIconSize = 48;
+constexpr gfx::Size kUnifiedFeaturePodIconSize(48, 48);
 constexpr gfx::Size kUnifiedFeaturePodSize(80, 88);
 constexpr gfx::Size kUnifiedFeaturePodCollapsedSize(48, 48);
+constexpr gfx::Size kUnifiedFeaturePodHoverSize(80, 36);
+constexpr gfx::Insets kUnifiedFeaturePodIconPadding(4);
+constexpr gfx::Insets kUnifiedFeaturePodHoverPadding(2);
+constexpr int kUnifiedFeaturePodSpacing = 6;
+constexpr int kUnifiedFeaturePodHoverRadius = 4;
 constexpr int kUnifiedFeaturePodVerticalPadding = 28;
 constexpr int kUnifiedFeaturePodHorizontalSidePadding = 28;
 constexpr int kUnifiedFeaturePodHorizontalMiddlePadding = 32;

ash/system/unified/feature_pod_button.cc

@@ -34,8 +34,8 @@ void ConfigureFeaturePodLabel(views::Label* label) {
 
 FeaturePodIconButton::FeaturePodIconButton(views::ButtonListener* listener)
     : views::ImageButton(listener) {
-  SetPreferredSize(
-      gfx::Size(kUnifiedFeaturePodIconSize, kUnifiedFeaturePodIconSize));
+  SetPreferredSize(kUnifiedFeaturePodIconSize);
+  SetBorder(views::CreateEmptyBorder(kUnifiedFeaturePodIconPadding));
   SetImageAlignment(ALIGN_CENTER, ALIGN_MIDDLE);
   TrayPopupUtils::ConfigureTrayPopupButton(this);
 }
@@ -54,8 +54,7 @@ void FeaturePodIconButton::PaintButtonContents(gfx::Canvas* canvas) {
   flags.setColor(toggled_ ? kUnifiedMenuButtonColorActive
                           : kUnifiedMenuButtonColor);
   flags.setStyle(cc::PaintFlags::kFill_Style);
-  canvas->DrawCircle(gfx::PointF(rect.CenterPoint()),
-                     kUnifiedFeaturePodIconSize / 2, flags);
+  canvas->DrawCircle(gfx::PointF(rect.CenterPoint()), rect.width() / 2, flags);
 
   views::ImageButton::PaintButtonContents(canvas);
 }
@@ -79,27 +78,75 @@ FeaturePodIconButton::CreateInkDropHighlight() const {
 
 std::unique_ptr<views::InkDropMask> FeaturePodIconButton::CreateInkDropMask()
     const {
-  return std::make_unique<views::CircleInkDropMask>(
-      size(), GetContentsBounds().CenterPoint(),
-      kUnifiedFeaturePodIconSize / 2);
+  gfx::Rect rect(GetContentsBounds());
+  return std::make_unique<views::CircleInkDropMask>(size(), rect.CenterPoint(),
+                                                    rect.width() / 2);
+}
+
+FeaturePodLabelButton::FeaturePodLabelButton(views::ButtonListener* listener)
+    : Button(listener), label_(new views::Label), sub_label_(new views::Label) {
+  SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::kVertical, kUnifiedFeaturePodHoverPadding));
+  SetPreferredSize(kUnifiedFeaturePodHoverSize);
+  ConfigureFeaturePodLabel(label_);
+  ConfigureFeaturePodLabel(sub_label_);
+  AddChildView(label_);
+  AddChildView(sub_label_);
+
+  TrayPopupUtils::ConfigureTrayPopupButton(this);
+}
+
+FeaturePodLabelButton::~FeaturePodLabelButton() = default;
+
+std::unique_ptr<views::InkDrop> FeaturePodLabelButton::CreateInkDrop() {
+  auto ink_drop = TrayPopupUtils::CreateInkDrop(this);
+  ink_drop->SetShowHighlightOnHover(true);
+  return ink_drop;
+}
+
+std::unique_ptr<views::InkDropRipple>
+FeaturePodLabelButton::CreateInkDropRipple() const {
+  return TrayPopupUtils::CreateInkDropRipple(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this,
+      GetInkDropCenterBasedOnLastEvent(), kUnifiedFeaturePodHoverColor);
+}
+
+std::unique_ptr<views::InkDropHighlight>
+FeaturePodLabelButton::CreateInkDropHighlight() const {
+  return TrayPopupUtils::CreateInkDropHighlight(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this, kUnifiedFeaturePodHoverColor);
+}
+
+std::unique_ptr<views::InkDropMask> FeaturePodLabelButton::CreateInkDropMask()
+    const {
+  return std::make_unique<views::RoundRectInkDropMask>(
+      size(), gfx::Insets(), kUnifiedFeaturePodHoverRadius);
+}
+
+void FeaturePodLabelButton::SetLabel(const base::string16& label) {
+  label_->SetText(label);
+  Layout();
+  SchedulePaint();
+}
+
+void FeaturePodLabelButton::SetSubLabel(const base::string16& sub_label) {
+  sub_label_->SetText(sub_label);
+  Layout();
+  SchedulePaint();
 }
 
 FeaturePodButton::FeaturePodButton(FeaturePodControllerBase* controller)
     : controller_(controller),
       icon_button_(new FeaturePodIconButton(this)),
-      label_(new views::Label()) {
-  auto layout = std::make_unique<views::BoxLayout>(views::BoxLayout::kVertical);
+      label_button_(new FeaturePodLabelButton(this)) {
+  auto layout = std::make_unique<views::BoxLayout>(
+      views::BoxLayout::kVertical, gfx::Insets(), kUnifiedFeaturePodSpacing);
   layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
   SetLayoutManager(std::move(layout));
 
   AddChildView(icon_button_);
-
-  label_->SetBorder(
-      views::CreateEmptyBorder(kUnifiedTopShortcutSpacing, 0, 0, 0));
-  label_->SetVisible(false);
-  ConfigureFeaturePodLabel(label_);
-  AddChildView(label_);
+  AddChildView(label_button_);
 }
 
 FeaturePodButton::~FeaturePodButton() = default;
@@ -110,23 +157,11 @@ void FeaturePodButton::SetVectorIcon(const gfx::VectorIcon& icon) {
 }
 
 void FeaturePodButton::SetLabel(const base::string16& label) {
-  label_->SetVisible(true);
-  label_->SetText(label);
-  Layout();
-  SchedulePaint();
+  label_button_->SetLabel(label);
 }
 
 void FeaturePodButton::SetSubLabel(const base::string16& sub_label) {
-  if (!sub_label_) {
-    sub_label_ = new views::Label();
-    ConfigureFeaturePodLabel(sub_label_);
-    // Insert |sub_label_| right after |label_|.
-    AddChildViewAt(sub_label_, GetIndexOf(label_) + 1);
-  }
-
-  sub_label_->SetText(sub_label);
-  Layout();
-  SchedulePaint();
+  label_button_->SetSubLabel(sub_label);
 }
 
 void FeaturePodButton::SetToggled(bool toggled) {
@@ -134,9 +169,7 @@ void FeaturePodButton::SetToggled(bool toggled) {
 }
 
 void FeaturePodButton::SetExpanded(bool expanded) {
-  label_->SetVisible(expanded);
-  if (sub_label_)
-    sub_label_->SetVisible(expanded);
+  label_button_->SetVisible(expanded);
 }
 
 void FeaturePodButton::SetVisibleByContainer(bool visible) {

ash/system/unified/feature_pod_button.h

@@ -44,6 +44,34 @@ class FeaturePodIconButton : public views::ImageButton {
   DISALLOW_COPY_AND_ASSIGN(FeaturePodIconButton);
 };
 
+// Buton internally used in FeaturePodButton. Should not be used directly.
+class FeaturePodLabelButton : public views::Button {
+ public:
+  explicit FeaturePodLabelButton(views::ButtonListener* listener);
+  ~FeaturePodLabelButton() override;
+
+  // Set the text of label shown below the icon. See FeaturePodButton::SetLabel.
+  void SetLabel(const base::string16& label);
+
+  // Set the text of sub-label shown below the label.
+  // See FeaturePodButton::SetSubLabel.
+  void SetSubLabel(const base::string16& sub_label);
+
+  // views::Button:
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override;
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override;
+  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override;
+
+ private:
+  // Owned by views hierarchy.
+  views::Label* const label_;
+  views::Label* const sub_label_;
+
+  DISALLOW_COPY_AND_ASSIGN(FeaturePodLabelButton);
+};
+
 // A button in FeaturePodsView. These buttons are main entry points of features
 // in UnifiedSystemTray. Each button has its icon, label, and sub-label placed
 // vertically. They are also togglable and the background color indicates the
@@ -93,8 +121,7 @@ class ASH_EXPORT FeaturePodButton : public views::View,
 
   // Owned by views hierarchy.
   FeaturePodIconButton* const icon_button_;
-  views::Label* const label_;
-  views::Label* sub_label_ = nullptr;
+  FeaturePodLabelButton* const label_button_;
 
   // If true, it is preferred by the FeaturePodController that the view is
   // visible. Usually, this should match visible(), but in case that the